├── .env ├── .gitignore ├── README.md ├── app.gif ├── img.png ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo.png ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.test.tsx ├── App.tsx ├── components │ ├── Input.tsx │ ├── UtilExample.tsx │ └── WalletExample.tsx ├── index.css ├── index.tsx ├── logo.png ├── logo.svg ├── react-app-env.d.ts ├── reportWebVitals.ts ├── setupTests.ts └── web3 │ ├── wallet.ts │ └── web3.ts ├── tsconfig.json └── yarn.lock /.env: -------------------------------------------------------------------------------- 1 | REACT_APP_PROVIDER=http://127.0.0.1:8545 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .idea -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Example React App Web3js](./app.gif) 2 | -------------------------------------------------------------------------------- /app.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChainSafe/web3js-example-react-app/49986fc435709e4c5fd28da0defdf7aa97bc07e6/app.gif -------------------------------------------------------------------------------- /img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChainSafe/web3js-example-react-app/49986fc435709e4c5fd28da0defdf7aa97bc07e6/img.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web3js-example-react-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.11.59", 11 | "@types/react": "^18.0.20", 12 | "@types/react-dom": "^18.0.6", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.8.3", 17 | "web-vitals": "^2.1.4", 18 | "web3": "^4.0.1-alpha.0" 19 | }, 20 | "scripts": { 21 | "start": "node_modules/.bin/react-scripts start", 22 | "build": "node_modules/.bin/react-scripts build", 23 | "test": "node_modules/.bin/react-scripts test", 24 | "eject": "node_modules/.bin/react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChainSafe/web3js-example-react-app/49986fc435709e4c5fd28da0defdf7aa97bc07e6/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChainSafe/web3js-example-react-app/49986fc435709e4c5fd28da0defdf7aa97bc07e6/public/logo.png -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChainSafe/web3js-example-react-app/49986fc435709e4c5fd28da0defdf7aa97bc07e6/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChainSafe/web3js-example-react-app/49986fc435709e4c5fd28da0defdf7aa97bc07e6/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App-logo { 2 | height: 40vmin; 3 | pointer-events: none; 4 | } 5 | 6 | @media (prefers-reduced-motion: no-preference) { 7 | .App-logo { 8 | animation: App-logo-spin infinite 20s linear; 9 | } 10 | } 11 | 12 | .Header { 13 | background: #fff; 14 | text-align: center; 15 | padding: 20px; 16 | width: 100%; 17 | } 18 | .Header img{ 19 | max-width:500px; 20 | width:100%; 21 | } 22 | 23 | .App-link { 24 | color: #61dafb; 25 | } 26 | 27 | @keyframes App-logo-spin { 28 | from { 29 | transform: rotate(0deg); 30 | } 31 | to { 32 | transform: rotate(360deg); 33 | } 34 | } 35 | 36 | 37 | .Card { 38 | display: flex; 39 | justify-content: center; 40 | align-items: center; 41 | flex-direction: column; 42 | margin: 30px; 43 | } 44 | .CardHead{ 45 | 46 | } 47 | .CardBody{ 48 | display: flex; 49 | flex-direction: column; 50 | } 51 | .Label{ 52 | margin: 5px 0; 53 | } 54 | 55 | .InputComponent{ 56 | display: flex; 57 | flex-direction: column; 58 | } 59 | .InputComponent input { 60 | margin: 5px 0; 61 | padding: 10px; 62 | width:100% 63 | } 64 | button{ 65 | background: #ffffff; 66 | border: 1px solid #000; 67 | padding: 15px; 68 | text-align: center; 69 | cursor: pointer; 70 | } 71 | 72 | button:hover{ 73 | background: #f8ef48; 74 | } 75 | 76 | .Block{ 77 | margin-bottom: 20px; 78 | } -------------------------------------------------------------------------------- /src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import {UtilExample} from './components/UtilExample' 4 | import {WalletExample} from './components/WalletExample' 5 | import logo from './logo.png' 6 | 7 | function App() { 8 | return ( 9 |
10 |
11 | logo 12 |
13 |
14 |

Example React App

15 | 16 | 17 |
18 | 19 |
20 | ); 21 | } 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /src/components/Input.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | 4 | export const Input = (props: { label: any; value: any; onChange: any }) => { 5 | const {label, value, onChange} = props 6 | return ( 7 |
8 | 9 | 10 |
11 | ) 12 | } -------------------------------------------------------------------------------- /src/components/UtilExample.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState, useCallback, ChangeEvent} from 'react' 2 | import {web3} from '../web3/web3' 3 | import {Input} from './Input' 4 | 5 | export const UtilExample = () => { 6 | const [hex, setHex] = useState('') 7 | const [num, setNum] = useState('') 8 | const nToHex = useCallback((e: ChangeEvent) => { 9 | const value = e.target.value 10 | try { 11 | setHex(web3.utils.numberToHex(value)) 12 | } catch { 13 | setHex('Incorrect number') 14 | } 15 | setNum(value) 16 | }, [setNum, setHex]) 17 | const hexToN = useCallback((e: ChangeEvent) => { 18 | const value = e.target.value 19 | try { 20 | setNum(String(web3.utils.hexToNumber(value))) 21 | } catch { 22 | setNum('Incorrect hex') 23 | } 24 | setHex(value) 25 | }, [setNum, setHex]) 26 | 27 | return ( 28 | 29 |
30 |
31 |

Utils

32 |
33 |
34 | 35 |
36 | 37 |
38 |
39 | 40 |
41 |
42 |
43 | ) 44 | } -------------------------------------------------------------------------------- /src/components/WalletExample.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState, useCallback, ChangeEvent, useEffect} from 'react' 2 | import {Wallet} from '../web3/wallet' 3 | import {web3} from '../web3/web3' 4 | import {Input} from './Input' 5 | 6 | export const WalletExample = () => { 7 | const [wallet, setWallet] = useState() 8 | const [toAddress, setToAddress] = useState('') 9 | const [balance, setBalance] = useState('') 10 | const [toAddressBalance, setToAddressBalance] = useState('') 11 | const [pk, setPk] = useState('') 12 | 13 | const getBalance = useCallback(() => { 14 | wallet?.getBalance().then((balance) => { 15 | setBalance(String(web3.utils.fromWei(balance, 'ether'))) 16 | }) 17 | }, [wallet, setBalance]) 18 | 19 | const getToAddressBalance = useCallback((address?: string) => { 20 | wallet?.getBalance(address || toAddress).then(balance => { 21 | setToAddressBalance(String(web3.utils.fromWei(balance, 'ether'))) 22 | }) 23 | }, [toAddress, wallet, setToAddressBalance]) 24 | 25 | const handleChangeToAddress = useCallback((e: ChangeEvent) => { 26 | const value = e.target.value 27 | setToAddress(value) 28 | getToAddressBalance(value) 29 | }, [setToAddress, getToAddressBalance]) 30 | 31 | const handleSendEther = useCallback(async () => { 32 | await wallet?.sendEther(toAddress, web3.utils.toWei(0.001, 'ether')) 33 | getToAddressBalance() 34 | getBalance() 35 | }, [toAddress, wallet, getToAddressBalance, getBalance]) 36 | 37 | const createNewWallet = useCallback((e: ChangeEvent) => { 38 | const value = e.target.value 39 | try { 40 | setWallet(new Wallet(value)) 41 | } catch { 42 | } 43 | setPk(value) 44 | }, [setWallet, setPk]) 45 | 46 | useEffect(() => { 47 | getBalance() 48 | }, [wallet, getBalance]) 49 | 50 | return ( 51 | 52 |
53 |
54 |

Wallet

55 |
56 |
57 |
58 |
59 | 60 | {wallet && ( 61 | <> 62 |
You address: {wallet && wallet.getAccount().address}
63 | {balance && ( 64 |
Your balance: {balance}ETH
65 | )} 66 | 67 | )} 68 |
69 |
70 | {balance && ( 71 |
72 |
73 | 75 |
76 |
77 | 78 |
79 | {toAddressBalance && ( 80 |
Recipient balance: {toAddressBalance}ETH
81 | )} 82 |
83 | )} 84 |
85 |
86 |
87 |
88 | ) 89 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | html{ 2 | background: #f8ef48; 3 | } 4 | html, body{ 5 | margin: 0; 6 | padding: 0; 7 | width: 100%; 8 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 9 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 10 | sans-serif; 11 | -webkit-font-smoothing: antialiased; 12 | -moz-osx-font-smoothing: grayscale; 13 | } 14 | 15 | code { 16 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 17 | monospace; 18 | } 19 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChainSafe/web3js-example-react-app/49986fc435709e4c5fd28da0defdf7aa97bc07e6/src/logo.png -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/web3/wallet.ts: -------------------------------------------------------------------------------- 1 | import { Web3PromiEvent } from 'web3-core'; 2 | import {SendSignedTransactionEvents} from 'web3-eth'; 3 | import { Receipt} from 'web3-types'; 4 | import {web3} from './web3'; 5 | import {DataFormat} from "web3-utils"; 6 | import {Web3Account} from "web3-eth-accounts"; 7 | 8 | export class Wallet { 9 | 10 | private readonly account: Web3Account; 11 | public constructor(privateKey: string) { 12 | this.account = web3.eth.accounts.privateKeyToAccount(privateKey); 13 | } 14 | public async sendEther( 15 | address: string, 16 | value: string, 17 | ): Promise>> { 18 | 19 | const tx = { 20 | from: this.account.address, 21 | to: address, 22 | value, 23 | gas: '21000', 24 | gasPrice: web3.utils.numberToHex(await web3.eth.getGasPrice()), 25 | } 26 | const signedTx = await web3.eth.accounts.signTransaction(tx, this.account.privateKey); 27 | 28 | return web3.eth.sendSignedTransaction(signedTx.rawTransaction); 29 | } 30 | 31 | public getAccount(){ 32 | return this.account 33 | } 34 | 35 | public async getBalance(address?: string) { 36 | return web3.eth.getBalance(address ?? this.account.address); 37 | } 38 | } -------------------------------------------------------------------------------- /src/web3/web3.ts: -------------------------------------------------------------------------------- 1 | import Web3 from 'web3' 2 | export const web3=new Web3(process.env.REACT_APP_PROVIDER) -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | --------------------------------------------------------------------------------