├── .gitignore ├── README.md ├── Screenshot_8.png ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.test.tsx ├── App.tsx ├── abi │ └── SimpleContract.json ├── components │ ├── AccountModal.tsx │ ├── ConnectButton.tsx │ ├── Count.tsx │ ├── Identicon.tsx │ └── Layout.tsx ├── contracts │ ├── SimpleContract.sol │ └── index.ts ├── hooks │ └── index.ts ├── index.css ├── index.tsx ├── logo.svg ├── react-app-env.d.ts ├── reportWebVitals.ts └── setupTests.ts ├── tsconfig.json └── yarn.lock /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](Screenshot_8.png) 2 | 3 | 4 | 5 |

Ethereum Portfolio

6 | 7 |
 8 |   * Web3, Solidity, React, Typescript
 9 | 
10 | 11 |

:gear: Getting started

12 | 13 | 1. Clone project. 14 | 2. Install MetaMask using this site (https://metamask.io/) 15 | 3. Install required dependencies with `yarn install`. 16 | 4. Run project using `npm start` command 17 | 5. Deploy using `yarn build` command. -------------------------------------------------------------------------------- /Screenshot_8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemaster730/Ethereum/c6900eb9fcc2a3168c625a675992be6a2e29dafb/Screenshot_8.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-dapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@chakra-ui/icons": "^1.0.14", 7 | "@chakra-ui/react": "^1.6.5", 8 | "@emotion/react": "^11.4.0", 9 | "@emotion/styled": "^11.3.0", 10 | "@metamask/jazzicon": "^2.0.0", 11 | "@testing-library/jest-dom": "^5.11.4", 12 | "@testing-library/react": "^11.1.0", 13 | "@testing-library/user-event": "^12.1.10", 14 | "@types/jest": "^26.0.15", 15 | "@types/node": "^12.0.0", 16 | "@types/react": "^17.0.0", 17 | "@types/react-dom": "^17.0.0", 18 | "@usedapp/core": "^0.4.3", 19 | "framer-motion": "^4.1.17", 20 | "react": "^17.0.2", 21 | "react-dom": "^17.0.2", 22 | "react-scripts": "4.0.3", 23 | "typescript": "^4.1.2", 24 | "web-vitals": "^1.0.1" 25 | }, 26 | "scripts": { 27 | "start": "react-scripts start", 28 | "build": "react-scripts build", 29 | "test": "react-scripts test", 30 | "eject": "react-scripts eject" 31 | }, 32 | "eslintConfig": { 33 | "extends": [ 34 | "react-app", 35 | "react-app/jest" 36 | ] 37 | }, 38 | "browserslist": { 39 | "production": [ 40 | ">0.2%", 41 | "not dead", 42 | "not op_mini all" 43 | ], 44 | "development": [ 45 | "last 1 chrome version", 46 | "last 1 firefox version", 47 | "last 1 safari version" 48 | ] 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemaster730/Ethereum/c6900eb9fcc2a3168c625a675992be6a2e29dafb/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/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemaster730/Ethereum/c6900eb9fcc2a3168c625a675992be6a2e29dafb/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codemaster730/Ethereum/c6900eb9fcc2a3168c625a675992be6a2e29dafb/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 { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /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 { ChakraProvider, useDisclosure } from "@chakra-ui/react"; 2 | import Layout from "./components/Layout"; 3 | import ConnectButton from "./components/ConnectButton"; 4 | import AccountModal from "./components/AccountModal"; 5 | import Count from "./components/Count"; 6 | 7 | function App() { 8 | // Pull the disclosure methods 9 | const { isOpen, onOpen, onClose } = useDisclosure(); 10 | return ( 11 | 12 | 13 | // Our connect button will only handle opening 14 | 15 | // Our Account modal will handle open state & closing 16 | 17 | 18 | 19 | 20 | ); 21 | } 22 | 23 | export default App; -------------------------------------------------------------------------------- /src/abi/SimpleContract.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "inputs": [], 4 | "name": "incrementCount", 5 | "outputs": [], 6 | "stateMutability": "nonpayable", 7 | "type": "function" 8 | }, 9 | { 10 | "inputs": [ 11 | { 12 | "internalType": "uint256", 13 | "name": "_count", 14 | "type": "uint256" 15 | } 16 | ], 17 | "name": "setCount", 18 | "outputs": [], 19 | "stateMutability": "nonpayable", 20 | "type": "function" 21 | }, 22 | { 23 | "inputs": [], 24 | "name": "count", 25 | "outputs": [ 26 | { 27 | "internalType": "uint256", 28 | "name": "", 29 | "type": "uint256" 30 | } 31 | ], 32 | "stateMutability": "view", 33 | "type": "function" 34 | } 35 | ] -------------------------------------------------------------------------------- /src/components/AccountModal.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Button, 4 | Flex, 5 | Link, 6 | Modal, 7 | ModalOverlay, 8 | ModalContent, 9 | ModalHeader, 10 | ModalFooter, 11 | ModalBody, 12 | ModalCloseButton, 13 | Text, 14 | } from "@chakra-ui/react"; 15 | import { ExternalLinkIcon, CopyIcon } from "@chakra-ui/icons"; 16 | import { useEthers } from "@usedapp/core"; 17 | import Identicon from "./Identicon"; 18 | 19 | type Props = { 20 | isOpen: any; 21 | onClose: any; 22 | } 23 | export default function AccountModal({ isOpen, onClose }: Props) { 24 | const { account, deactivate } = useEthers(); 25 | function handleDeactivateAccount() { 26 | deactivate(); 27 | onClose(); 28 | } 29 | return ( 30 | 31 | 32 | 39 | 40 | Account 41 | 42 | 49 | 50 | 60 | 61 | 62 | Connected with MetaMask 63 | 64 | 83 | 84 | 85 | 86 | 93 | {account && 94 | `${account.slice(0, 6)}...${account.slice( 95 | account.length - 4, 96 | account.length 97 | )}`} 98 | 99 | 100 | 101 | 114 | 127 | 128 | View on Explorer 129 | 130 | 131 | 132 | 133 | 134 | 141 | 147 | Your transactions willl appear here... 148 | 149 | 150 | 151 | 152 | ) 153 | 154 | } -------------------------------------------------------------------------------- /src/components/ConnectButton.tsx: -------------------------------------------------------------------------------- 1 | import { Button, Box, Text } from "@chakra-ui/react"; 2 | import { useEthers, useEtherBalance } from "@usedapp/core"; 3 | import { formatEther } from '@ethersproject/units'; 4 | type Props = { 5 | handleOpenModal: any; 6 | } 7 | export default function ConnectButton({ handleOpenModal }: Props) { 8 | const { activateBrowserWallet, account } = useEthers(); 9 | const etherBalance = useEtherBalance(account); 10 | function handleConnectWallet() { 11 | activateBrowserWallet(); 12 | } 13 | return account ? ( 14 | 21 | 22 | 23 | {etherBalance && parseFloat(formatEther(etherBalance)).toFixed(3)} ETH 24 | 25 | 26 | 50 | 51 | ) : ( 52 | 53 | ); 54 | } -------------------------------------------------------------------------------- /src/components/Count.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { 3 | Box, 4 | Flex, 5 | Text, 6 | Button, 7 | NumberInput, 8 | NumberInputField, 9 | } from "@chakra-ui/react"; 10 | import { useCount, useContractMethod } from "../hooks"; 11 | 12 | export default function Count() { 13 | const count = useCount(); 14 | const { state, send: incrementCount } = useContractMethod("incrementCount"); 15 | const { state: setCountState, send: setCount } = 16 | useContractMethod("setCount"); 17 | const [input, setInput] = useState(""); 18 | 19 | function handleIncrement() { 20 | incrementCount(); 21 | } 22 | 23 | function handleSetCount() { 24 | const _count = parseInt(input); 25 | if (_count) { 26 | setCount(_count); 27 | } 28 | } 29 | 30 | function handleInput(valueAsString: string, valueAsNumber: number) { 31 | setInput(valueAsString); 32 | } 33 | 34 | return ( 35 | 36 | 37 | {count ? count.toNumber() : 0} 38 | 39 | 42 | 43 | 51 | 52 | 53 | 56 | 57 | 58 | ); 59 | } -------------------------------------------------------------------------------- /src/components/Identicon.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from "react"; 2 | import { useEthers } from "@usedapp/core"; 3 | import styled from "@emotion/styled"; 4 | import Jazzicon from "@metamask/jazzicon"; 5 | const StyledIdenticon = styled.div` 6 | height: 1rem; 7 | width: 1rem; 8 | border-radius: 1.125rem; 9 | background-color: black; 10 | `; 11 | 12 | export default function Identicon() { 13 | const ref = useRef(); 14 | const { account } = useEthers(); 15 | 16 | useEffect(() => { 17 | if (account && ref.current) { 18 | ref.current.innerHTML = ""; 19 | ref.current.appendChild(Jazzicon(16, parseInt(account.slice(2, 10), 16))); 20 | } 21 | }, [account]); 22 | 23 | return 24 | } -------------------------------------------------------------------------------- /src/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from "react"; 2 | import { Flex } from "@chakra-ui/react"; 3 | 4 | type Props = { 5 | children?: ReactNode; 6 | }; 7 | 8 | export default function Layout({ children }: Props) { 9 | return ( 10 | 17 | {children} 18 | 19 | ) 20 | } -------------------------------------------------------------------------------- /src/contracts/SimpleContract.sol: -------------------------------------------------------------------------------- 1 | pragma solidity > 0.5; 2 | 3 | contract SimpleContract { 4 | uint256 public count; 5 | 6 | function incrementCount() public { 7 | count++; 8 | } 9 | 10 | function setCount(uint256 _count) public { 11 | require(_count > 0); 12 | count = _count; 13 | } 14 | } -------------------------------------------------------------------------------- /src/contracts/index.ts: -------------------------------------------------------------------------------- 1 | export const simpleContractAddress = "0x68e2662cedfa92dCE4b170868Ca869a2D56bFE78"; -------------------------------------------------------------------------------- /src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | import { ethers } from "ethers"; 2 | import { useContractCall, useContractFunction } from "@usedapp/core"; 3 | import simpleContractAbi from "../abi/SimpleContract.json"; 4 | import { simpleContractAddress } from "../contracts" 5 | import { Contract } from "@ethersproject/contracts"; 6 | 7 | const simpleContractInterface = new ethers.utils.Interface(simpleContractAbi); 8 | const contract = new Contract(simpleContractAddress, simpleContractInterface); 9 | 10 | export function useCount() { 11 | const [count]: any = useContractCall({ 12 | abi: simpleContractInterface, 13 | address: simpleContractAddress, 14 | method: "count", 15 | args: [], 16 | }) ?? []; 17 | return count; 18 | } 19 | 20 | export function useIncrement() { 21 | const { state, send } = useContractFunction(contract, "incrementCount", {}); 22 | return { state, send }; 23 | } 24 | 25 | export function useSetCount() { 26 | const { state, send } = useContractFunction(contract, "setCount", {}); 27 | return { state, send }; 28 | } 29 | 30 | export function useContractMethod(methodName: string) { 31 | const { state, send } = useContractFunction(contract, methodName, {}); 32 | return { state, send }; 33 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { DAppProvider } from '@usedapp/core'; 7 | 8 | ReactDOM.render( 9 | 10 | {/* wrap the app , config is required, but can be left as an empty object */} 11 | 12 | 13 | 14 | , 15 | document.getElementById('root') 16 | ); 17 | 18 | // If you want to start measuring performance in your app, pass a function 19 | // to log results (for example: reportWebVitals(console.log)) 20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 21 | reportWebVitals(); 22 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | declare module "@metamask/jazzicon" { 3 | export default function (diameter: number, seed: number): HTMLElement; 4 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------