Add TransactionProvider to pass data down

blockchain-app/README.md

@@ -59,3 +59,50 @@ npm install --save-dev @nomiclabs/hardhat-ethers @nomiclabs/hardhat-waffle chai
 **Make sure you have enough ETH to do the deploy **
 
 Expected message will be similar to `Transactions deployed to: 0xB1eA0Bc0Bbd554d921Ac6778775208A39259831A`
+
+## React Context
+
+[docs](https://reactjs.org/docs/context.html)
+
+Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.
+
+```js
+// Context lets us pass a value deep into the component tree
+// without explicitly threading it through every component.
+// Create a context for the current theme (with "light" as the default).
+const ThemeContext = React.createContext('light');
+
+class App extends React.Component {
+	render() {
+		// Use a Provider to pass the current theme to the tree below.
+		// Any component can read it, no matter how deep it is.
+		// In this example, we're passing "dark" as the current value.
+		return (
+			// ThemeContext is the const that we defined above. We're setting a new theme value
+			<ThemeContext.Provider value='dark'>
+				<Toolbar />
+			</ThemeContext.Provider>
+		);
+	}
+}
+
+// A component in the middle doesn't have to
+// pass the theme down explicitly anymore.
+function Toolbar() {
+	return (
+		<div>
+			<ThemedButton />
+		</div>
+	);
+}
+
+class ThemedButton extends React.Component {
+	// Assign a contextType to read the current theme context.
+	// React will find the closest theme Provider above and use its value.
+	// In this example, the current theme is "dark".
+	static contextType = ThemeContext;
+	render() {
+		return <Button theme={this.context} />;
+	}
+}
+```

blockchain-app/client/src/components/Welcome.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { AiFillPlayCircle } from 'react-icons/ai';
 import { SiEthereum } from 'react-icons/si';
 import { BsInfoCircle } from 'react-icons/bs';
 import Loader from './Loader';
+import { TransactionContext } from '../context/TransactionContext';
 
 const connectWallet = () => {
 	console.log('connectWallet');
@@ -33,6 +34,11 @@ const companyCommonStyles =
 	'min-h-[70px] sm:px-0 px-2 sm:min-w-[120px] flex justify-center items-center border-[0.5px] border-gray-400 text-sm font-light text-white';
 
 const Welcome = () => {
+	// consuming TransactionContext using useContext
+	const value = useContext(TransactionContext);
+
+	console.log(value);
+
 	return (
 		<div className='flex w-full justify-center items-center'>
 			{/* the 'mf' is coming from tailwind.config.css and isn't found on tailwind website */}

blockchain-app/client/src/context/TransactionContext.jsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { ethers } from 'ethers';
+import { contractABI, contractAddress } from '../utils/constants';
+
+// create a context for transactions with no default value
+export const TransactionContext = React.createContext();
+
+// window.ethereum is enabled thanks to our Metamask extension
+const { ethereum } = window;
+
+const getEthereumContract = () => {
+	const provider = new ethers.providers.Web3Provider(ethereum);
+	const signer = provider.getSigner();
+	const transactionContract = new ethers.Contract(
+		contractAddress,
+		contractABI,
+		signer
+	);
+
+	console.log({ provider, signer, transactionContract });
+};
+
+export const TransactionProvider = ({ children }) => {
+	return (
+		// using TransactionContext defined above, .Provider allows us to set
+		// a value to pass down to all of the children
+		<TransactionContext.Provider value='test'>
+			{children}
+		</TransactionContext.Provider>
+	);
+};

blockchain-app/client/src/main.jsx

@@ -1,11 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import { TransactionProvider } from './context/TransactionContext';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-)
+	<TransactionProvider>
+		<App />
+	</TransactionProvider>,
+	document.getElementById('root')
+);