├── README.md
├── backend
    ├── .env.example
    ├── .eslintignore
    ├── .eslintrc.js
    ├── .gitignore
    ├── .npmignore
    ├── .prettierignore
    ├── .solhint.json
    ├── .solhintignore
    ├── README.md
    ├── contracts
    │   └── ExampleContract.sol
    ├── hardhat.config.ts
    ├── package-lock.json
    ├── package.json
    ├── scripts
    │   └── deploy.ts
    ├── test
    │   └── index.ts
    └── tsconfig.json
└── frontend
    ├── .editorconfig
    ├── .eslintrc.js
    ├── .gitignore
    ├── .prettierrc.js
    ├── .vscode
        └── settings.json
    ├── LICENSE
    ├── __tests__
        └── fake_test.ts
    ├── assets
        ├── screenshot.png
        └── template-usage.png
    ├── commitlint.config.js
    ├── index.html
    ├── jest.config.js
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── src
        ├── App.css
        ├── App.tsx
        ├── favicon.svg
        ├── index.css
        ├── logo.svg
        ├── main.tsx
        ├── utils
        │   └── useGetContract.ts
        └── vite-env.d.ts
    ├── tailwind.config.js
    ├── tsconfig.json
    ├── vite.config.ts
    └── yarn.lock


/README.md:
--------------------------------------------------------------------------------
 1 | ![GitHub Banner](https://user-images.githubusercontent.com/40567147/159485872-7f63766a-3c91-48dc-aa37-fb5894232acc.png)
 2 | 
 3 | This starter template comes as a monorepo for your next fullstack dApp Development. This will be your tools:
 4 | :pager: React + Vite + Typescript
 5 |  :page_with_curl: Solidity + Hardhat + Typescript
 6 | 
 7 | Typescript is integrated in the frontend as well in the smart contract part. This gives you a HUGE advantage, why? Because you can use types from the smart contract in your frontend part ( with the help of typechain https://github.com/dethcrypto/TypeChain). 
 8 | 
 9 | 
10 | ## How to start
11 | 
12 | ### Backend
13 | pre: cd into /backend
14 | 
15 | 0) start local testnet ---> npm run testnet
16 | 1) Compile contracts ---> npm run build
17 | 2) Test contracts -->     npm run test
18 | 3) Deploy contracts -->   npm run deploy
19 | 
20 | ### Frontend
21 | pre: cd into /frontend
22 | 
23 | 1) Install dependencies ---> npm install
24 | 2) start frontend ---> npm run dev
25 | 3) build --> npm run build
26 | 
27 | Here are some ready to use IPFS services 📡, that you can easily use for your next project 🚀
28 | 
29 | 🔗 https://pinata.cloud  
30 | 🔗 https://nft.storage 
31 | 🔗 https://docs.moralis.io/moralis-dapp/files/ipfs
32 | 🔗 https://infura.io/product/ipfs 
33 | 
34 | 🌞 GM TO ALL OF YOU AND KEEP LEARNING WEB 3 -Johannes (https://twitter.com/XamHans)
35 | 
36 | PS: If you are looking for a Web3 Job checkout my newest project :green_heart: : https://www.newdevsontheblock.com/ 
37 | 


--------------------------------------------------------------------------------
/backend/.env.example:
--------------------------------------------------------------------------------
1 | ETHERSCAN_API_KEY
2 | ROPSTEN_URL=https://eth-ropsten.alchemyapi.io/v2/<YOUR ALCHEMY KEY>
3 | PRIVATE_KEY
4 | 


--------------------------------------------------------------------------------
/backend/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | artifacts
3 | cache
4 | coverage
5 | 


--------------------------------------------------------------------------------
/backend/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: false,
 4 |     es2021: true,
 5 |     mocha: true,
 6 |     node: true,
 7 |   },
 8 |   plugins: ["@typescript-eslint"],
 9 |   extends: [
10 |     "standard",
11 |     "plugin:prettier/recommended",
12 |     "plugin:node/recommended",
13 |   ],
14 |   parser: "@typescript-eslint/parser",
15 |   parserOptions: {
16 |     ecmaVersion: 12,
17 |   },
18 |   rules: {
19 |     "node/no-unsupported-features/es-syntax": [
20 |       "error",
21 |       { ignores: ["modules"] },
22 |     ],
23 |   },
24 | };
25 | 


--------------------------------------------------------------------------------
/backend/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | .env
 3 | coverage
 4 | coverage.json
 5 | typechain
 6 | 
 7 | #Hardhat files
 8 | cache
 9 | artifacts
10 | 


--------------------------------------------------------------------------------
/backend/.npmignore:
--------------------------------------------------------------------------------
1 | hardhat.config.ts
2 | scripts
3 | test
4 | 


--------------------------------------------------------------------------------
/backend/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | artifacts
3 | cache
4 | coverage*
5 | gasReporterOutput.json
6 | 


--------------------------------------------------------------------------------
/backend/.solhint.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "solhint:recommended",
3 |   "rules": {
4 |     "compiler-version": ["error", "^0.8.0"],
5 |     "func-visibility": ["warn", { "ignoreConstructors": true }]
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/backend/.solhintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/backend/README.md:
--------------------------------------------------------------------------------
 1 | # Advanced Sample Hardhat Project
 2 | 
 3 | This project demonstrates an advanced Hardhat use case, integrating other tools commonly used alongside Hardhat in the ecosystem.
 4 | 
 5 | The project comes with a sample contract, a test for that contract, a sample script that deploys that contract, and an example of a task implementation, which simply lists the available accounts. It also comes with a variety of other tools, preconfigured to work with the project code.
 6 | 
 7 | Try running some of the following tasks:
 8 | 
 9 | ```shell
10 | npx hardhat accounts
11 | npx hardhat compile
12 | npx hardhat clean
13 | npx hardhat test
14 | npx hardhat node
15 | npx hardhat help
16 | REPORT_GAS=true npx hardhat test
17 | npx hardhat coverage
18 | npx hardhat run scripts/deploy.ts
19 | TS_NODE_FILES=true npx ts-node scripts/deploy.ts
20 | npx eslint '**/*.{js,ts}'
21 | npx eslint '**/*.{js,ts}' --fix
22 | npx prettier '**/*.{json,sol,md}' --check
23 | npx prettier '**/*.{json,sol,md}' --write
24 | npx solhint 'contracts/**/*.sol'
25 | npx solhint 'contracts/**/*.sol' --fix
26 | ```
27 | 
28 | # Etherscan verification
29 | 
30 | To try out Etherscan verification, you first need to deploy a contract to an Ethereum network that's supported by Etherscan, such as Ropsten.
31 | 
32 | In this project, copy the .env.example file to a file named .env, and then edit it to fill in the details. Enter your Etherscan API key, your Ropsten node URL (eg from Alchemy), and the private key of the account which will send the deployment transaction. With a valid .env file in place, first deploy your contract:
33 | 
34 | ```shell
35 | hardhat run --network ropsten scripts/sample-script.ts
36 | ```
37 | 
38 | Then, copy the deployment address and paste it in to replace `DEPLOYED_CONTRACT_ADDRESS` in this command:
39 | 
40 | ```shell
41 | npx hardhat verify --network ropsten DEPLOYED_CONTRACT_ADDRESS "Hello, Hardhat!"
42 | ```
43 | 
44 | # Performance optimizations
45 | 
46 | For faster runs of your tests and scripts, consider skipping ts-node's type checking by setting the environment variable `TS_NODE_TRANSPILE_ONLY` to `1` in hardhat's environment. For more details see [the documentation](https://hardhat.org/guides/typescript.html#performance-optimizations).
47 | 


--------------------------------------------------------------------------------
/backend/contracts/ExampleContract.sol:
--------------------------------------------------------------------------------
 1 | //SPDX-License-Identifier: Unlicense
 2 | //specific solidity cersion
 3 | pragma solidity ^0.8.7;
 4 | // we can use the console.log func from hardhat for debugging (like in javascript)
 5 | import "hardhat/console.sol";
 6 | 
 7 | // openzeppelin provides libaries of different use cases, this one provides a counter with best practices 
 8 | // a simple way to get a counter that can only be incremented or decremented. Very useful for ID generation, counting contract activity, among others.
 9 | import "@openzeppelin/contracts/utils/Counters.sol";
10 | 
11 | contract ExampleContract {
12 |     // this is how to define a enum, the values are defined in the {}
13 |     enum ExampleEnum{CREATED, OPEN, CLOSED}
14 | 
15 |     // a struct is like a class but without any implementation logic
16 |     struct AccountInfo {
17 |         uint id;
18 |         string name;
19 |         address accountAddress;
20 |     }
21 |     //  Functions in a library can be used by many contracts. If you have many contracts that have some common code, then you can deploy that common code as a library.
22 |     // The directive using A for B; can be used to attach library functions of library A to a given type B. These functions will used the caller type as their first parameter (identified using self).
23 |     using Counters for Counters.Counter;
24 |     Counters.Counter private accountId;
25 | 
26 |     // mapping (technically a hashtable) stores keys to values (key => value) good for association topics
27 |     // this mapping is used to keep track of the ids (number) to the right account address (hash)
28 |     mapping ( uint=> AccountInfo ) private accounts;
29 | 
30 |     // an event is used to let other parties know that something important has happend in your contract
31 |     // other contracts or event frontends can subscribe to your events
32 |     event accountCreatedEvent(address indexed accountAddress, string name);
33 | 
34 |     function addAccount(string calldata _name) external {
35 |         // require is like an early out criterium, if the condition is false, the function will be stopped and the error message (defined as second parameter) will be returned
36 |         // msg. sender is the address who calls the contract
37 |         require(msg.sender != address(0x0), "The sender address must exist");
38 |         accountId.increment();
39 |         uint accountId = accountId.current();
40 |         // create new object from type AccountInfo
41 |         // memory indicates that the object only lives during the function call, if you want to store it permanently on the blockchain use the storage keyword
42 |         address accAddress = address(msg.sender);
43 |         AccountInfo memory newAccount = AccountInfo(accountId, _name, accAddress);
44 |         accounts[accountId] = newAccount; 
45 |         // trigger event that a new account has been created
46 |         emit accountCreatedEvent(accAddress, _name);
47 |         console.log("NEW ACCOUNT ADDED", newAccount.name);
48 |     }
49 | 
50 | 
51 | }
52 | 


--------------------------------------------------------------------------------
/backend/hardhat.config.ts:
--------------------------------------------------------------------------------
 1 | import * as dotenv from "dotenv";
 2 | 
 3 | import { HardhatUserConfig, task } from "hardhat/config";
 4 | import "@nomiclabs/hardhat-etherscan";
 5 | import "@nomiclabs/hardhat-waffle";
 6 | import "@typechain/hardhat";
 7 | import "hardhat-gas-reporter";
 8 | import "solidity-coverage";
 9 | 
10 | dotenv.config();
11 | 
12 | // This is a sample Hardhat task. To learn how to create your own go to
13 | // https://hardhat.org/guides/create-task.html
14 | task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
15 |   const accounts = await hre.ethers.getSigners();
16 | 
17 |   for (const account of accounts) {
18 |     console.log(account.address);
19 |   }
20 | });
21 | 
22 | // You need to export an object to set up your config
23 | // Go to https://hardhat.org/config/ to learn more
24 | 
25 | const config: HardhatUserConfig = {
26 |   solidity: "0.8.7",
27 |   networks: {
28 |     ropsten: {
29 |       url: process.env.ROPSTEN_URL || "",
30 |       accounts:
31 |         process.env.PRIVATE_KEY !== undefined ? [process.env.PRIVATE_KEY] : [],
32 |     },
33 |     hardhat: {
34 |       chainId: 1337
35 |     },
36 |   },
37 |   gasReporter: {
38 |     enabled: process.env.REPORT_GAS !== undefined,
39 |     currency: "USD",
40 |   },
41 |   etherscan: {
42 |     apiKey: process.env.ETHERSCAN_API_KEY,
43 |   },
44 | };
45 | 
46 | export default config;
47 | 


--------------------------------------------------------------------------------
/backend/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   
  3 |   "scripts": {
  4 |   "testnet": "npx hardhat node", 
  5 |   "deploy": "npx hardhat run --network localhost scripts/deploy.ts",  
  6 |   "compile": "npx hardhat compile",
  7 |   "test": "npx hardhat test"
  8 |   
  9 |   },
 10 |   
 11 |   "devDependencies": {
 12 |   
 13 |     
 14 |   "@nomiclabs/hardhat-ethers": "^2.0.0",
 15 |   
 16 |     
 17 |   "@nomiclabs/hardhat-etherscan": "^2.1.3",
 18 |   
 19 |     
 20 |   "@nomiclabs/hardhat-waffle": "^2.0.0",
 21 |   
 22 |     
 23 |   "@typechain/ethers-v5": "^7.0.1",
 24 |   
 25 |     
 26 |   "@typechain/hardhat": "^2.3.0",
 27 |   
 28 |     
 29 |   "@types/chai": "^4.2.21",
 30 |   
 31 |     
 32 |   "@types/mocha": "^9.0.0",
 33 |   
 34 |     
 35 |   "@types/node": "^12.0.0",
 36 |   
 37 |     
 38 |   "@typescript-eslint/eslint-plugin": "^4.29.1",
 39 |   
 40 |     
 41 |   "@typescript-eslint/parser": "^4.29.1",
 42 |   
 43 |     
 44 |   "chai": "^4.2.0",
 45 |   
 46 |     
 47 |   "dotenv": "^10.0.0",
 48 |   
 49 |     
 50 |   "eslint": "^7.29.0",
 51 |   
 52 |     
 53 |   "eslint-config-prettier": "^8.3.0",
 54 |   
 55 |     
 56 |   "eslint-config-standard": "^16.0.3",
 57 |   
 58 |     
 59 |   "eslint-plugin-import": "^2.23.4",
 60 |   
 61 |     
 62 |   "eslint-plugin-node": "^11.1.0",
 63 |   
 64 |     
 65 |   "eslint-plugin-prettier": "^3.4.0",
 66 |   
 67 |     
 68 |   "eslint-plugin-promise": "^5.1.0",
 69 |   
 70 |     
 71 |   "ethereum-waffle": "^3.0.0",
 72 |   
 73 |     
 74 |   "ethers": "^5.0.0",
 75 |   
 76 |     
 77 |   "hardhat": "^2.8.3",
 78 |   
 79 |     
 80 |   "hardhat-gas-reporter": "^1.0.4",
 81 |   
 82 |     
 83 |   "prettier": "^2.3.2",
 84 |   
 85 |     
 86 |   "prettier-plugin-solidity": "^1.0.0-beta.13",
 87 |   
 88 |     
 89 |   "solhint": "^3.3.6",
 90 |   
 91 |     
 92 |   "solidity-coverage": "^0.7.16",
 93 |   
 94 |     
 95 |   "ts-node": "^10.1.0",
 96 |   
 97 |     
 98 |   "typechain": "^5.1.2",
 99 |   
100 |     
101 |   "typescript": "^4.5.2"
102 |   
103 |   },
104 |   
105 |   "dependencies": {
106 |   
107 |     
108 |   "@openzeppelin/contracts": "^4.5.0"
109 |   
110 |   }
111 | }
112 | 


--------------------------------------------------------------------------------
/backend/scripts/deploy.ts:
--------------------------------------------------------------------------------
 1 | // We require the Hardhat Runtime Environment explicitly here. This is optional
 2 | // but useful for running the script in a standalone fashion through `node <script>`.
 3 | //
 4 | // When running the script with `npx hardhat run <script>` you'll find the Hardhat
 5 | // Runtime Environment's members available in the global scope.
 6 | import { ethers } from "hardhat";
 7 | 
 8 | async function main() {
 9 |   // Hardhat always runs the compile task when running scripts with its command
10 |   // line interface.
11 |   //
12 |   // If this script is run directly using `node` you may want to call compile
13 |   // manually to make sure everything is compiled
14 |   // await hre.run('compile');
15 | 
16 |   // We get the contract to deploy
17 |   const ContractToDeploy = await ethers.getContractFactory("ExampleContract");
18 |   const ContractDeployed = await ContractToDeploy.deploy();
19 | 
20 |   await ContractDeployed.deployed();
21 | 
22 |   console.log("deployed to:", ContractDeployed.address);
23 | }
24 | 
25 | // We recommend this pattern to be able to use async/await everywhere
26 | // and properly handle errors.
27 | main().catch((error) => {
28 |   console.error(error);
29 |   process.exitCode = 1;
30 | });
31 | 


--------------------------------------------------------------------------------
/backend/test/index.ts:
--------------------------------------------------------------------------------
1 | import { expect } from "chai";
2 | 
3 | describe("TEST_SUITE", function () {
4 | 
5 | });
6 | 


--------------------------------------------------------------------------------
/backend/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2018",
 4 |     "module": "commonjs",
 5 |     "strict": true,
 6 |     "esModuleInterop": true,
 7 |     "outDir": "dist",
 8 |     "declaration": true
 9 |   },
10 |   "include": ["./scripts", "./test", "./typechain"],
11 |   "files": ["./hardhat.config.ts"]
12 | }
13 | 


--------------------------------------------------------------------------------
/frontend/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | 
3 | [**/**.{yml,ts,tsx,js,json,jsx,html}]
4 | indent_style = space
5 | indent_size = 2
6 | insert_final_newline = true
7 | 


--------------------------------------------------------------------------------
/frontend/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: [
 3 |     'eslint:recommended',
 4 |     'plugin:@typescript-eslint/recommended',
 5 |     'plugin:prettier/recommended'
 6 |   ],
 7 |   env: {
 8 |     node: true,
 9 |     mocha: true,
10 |     es6: true
11 |   },
12 |   plugins: ['@typescript-eslint', 'prettier'],
13 |   parserOptions: {
14 |     parser: '@typescript-eslint/parser'
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/frontend/.gitignore:
--------------------------------------------------------------------------------
  1 | 
  2 | # Created by https://www.toptal.com/developers/gitignore/api/node,jetbrains+all,visualstudiocode,macos
  3 | # Edit at https://www.toptal.com/developers/gitignore?templates=node,jetbrains+all,visualstudiocode,macos
  4 | 
  5 | ### JetBrains+all ###
  6 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
  7 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
  8 | 
  9 | # User-specific stuff
 10 | .idea/**/workspace.xml
 11 | .idea/**/tasks.xml
 12 | .idea/**/usage.statistics.xml
 13 | .idea/**/dictionaries
 14 | .idea/**/shelf
 15 | 
 16 | # AWS User-specific
 17 | .idea/**/aws.xml
 18 | 
 19 | # Generated files
 20 | .idea/**/contentModel.xml
 21 | 
 22 | # Sensitive or high-churn files
 23 | .idea/**/dataSources/
 24 | .idea/**/dataSources.ids
 25 | .idea/**/dataSources.local.xml
 26 | .idea/**/sqlDataSources.xml
 27 | .idea/**/dynamic.xml
 28 | .idea/**/uiDesigner.xml
 29 | .idea/**/dbnavigator.xml
 30 | 
 31 | # Gradle
 32 | .idea/**/gradle.xml
 33 | .idea/**/libraries
 34 | 
 35 | # Gradle and Maven with auto-import
 36 | # When using Gradle or Maven with auto-import, you should exclude module files,
 37 | # since they will be recreated, and may cause churn.  Uncomment if using
 38 | # auto-import.
 39 | # .idea/artifacts
 40 | # .idea/compiler.xml
 41 | # .idea/jarRepositories.xml
 42 | # .idea/modules.xml
 43 | # .idea/*.iml
 44 | # .idea/modules
 45 | # *.iml
 46 | # *.ipr
 47 | 
 48 | # CMake
 49 | cmake-build-*/
 50 | 
 51 | # Mongo Explorer plugin
 52 | .idea/**/mongoSettings.xml
 53 | 
 54 | # File-based project format
 55 | *.iws
 56 | 
 57 | # IntelliJ
 58 | out/
 59 | 
 60 | # mpeltonen/sbt-idea plugin
 61 | .idea_modules/
 62 | 
 63 | # JIRA plugin
 64 | atlassian-ide-plugin.xml
 65 | 
 66 | # Cursive Clojure plugin
 67 | .idea/replstate.xml
 68 | 
 69 | # Crashlytics plugin (for Android Studio and IntelliJ)
 70 | com_crashlytics_export_strings.xml
 71 | crashlytics.properties
 72 | crashlytics-build.properties
 73 | fabric.properties
 74 | 
 75 | # Editor-based Rest Client
 76 | .idea/httpRequests
 77 | 
 78 | # Android studio 3.1+ serialized cache file
 79 | .idea/caches/build_file_checksums.ser
 80 | 
 81 | ### JetBrains+all Patch ###
 82 | # Ignores the whole .idea folder and all .iml files
 83 | # See https://github.com/joeblau/gitignore.io/issues/186 and https://github.com/joeblau/gitignore.io/issues/360
 84 | 
 85 | .idea/
 86 | 
 87 | # Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-249601023
 88 | 
 89 | *.iml
 90 | modules.xml
 91 | .idea/misc.xml
 92 | *.ipr
 93 | 
 94 | # Sonarlint plugin
 95 | .idea/sonarlint
 96 | 
 97 | ### macOS ###
 98 | # General
 99 | .DS_Store
100 | .AppleDouble
101 | .LSOverride
102 | 
103 | # Icon must end with two \r
104 | Icon

105 | 
106 | # Thumbnails
107 | ._*
108 | 
109 | # Files that might appear in the root of a volume
110 | .DocumentRevisions-V100
111 | .fseventsd
112 | .Spotlight-V100
113 | .TemporaryItems
114 | .Trashes
115 | .VolumeIcon.icns
116 | .com.apple.timemachine.donotpresent
117 | 
118 | # Directories potentially created on remote AFP share
119 | .AppleDB
120 | .AppleDesktop
121 | Network Trash Folder
122 | Temporary Items
123 | .apdisk
124 | 
125 | ### Node ###
126 | # Logs
127 | logs
128 | *.log
129 | npm-debug.log*
130 | yarn-debug.log*
131 | yarn-error.log*
132 | lerna-debug.log*
133 | .pnpm-debug.log*
134 | 
135 | # Diagnostic reports (https://nodejs.org/api/report.html)
136 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
137 | 
138 | # Runtime data
139 | pids
140 | *.pid
141 | *.seed
142 | *.pid.lock
143 | 
144 | # Directory for instrumented libs generated by jscoverage/JSCover
145 | lib-cov
146 | 
147 | # Coverage directory used by tools like istanbul
148 | coverage
149 | *.lcov
150 | 
151 | # nyc test coverage
152 | .nyc_output
153 | 
154 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
155 | .grunt
156 | 
157 | # Bower dependency directory (https://bower.io/)
158 | bower_components
159 | 
160 | # node-waf configuration
161 | .lock-wscript
162 | 
163 | # Compiled binary addons (https://nodejs.org/api/addons.html)
164 | build/Release
165 | 
166 | # Dependency directories
167 | node_modules/
168 | jspm_packages/
169 | 
170 | # Snowpack dependency directory (https://snowpack.dev/)
171 | web_modules/
172 | 
173 | # TypeScript cache
174 | *.tsbuildinfo
175 | 
176 | # Optional npm cache directory
177 | .npm
178 | 
179 | # Optional eslint cache
180 | .eslintcache
181 | 
182 | # Microbundle cache
183 | .rpt2_cache/
184 | .rts2_cache_cjs/
185 | .rts2_cache_es/
186 | .rts2_cache_umd/
187 | 
188 | # Optional REPL history
189 | .node_repl_history
190 | 
191 | # Output of 'npm pack'
192 | *.tgz
193 | 
194 | # Yarn Integrity file
195 | .yarn-integrity
196 | 
197 | # dotenv environment variables file
198 | .env
199 | .env.test
200 | .env.production
201 | 
202 | # parcel-bundler cache (https://parceljs.org/)
203 | .cache
204 | .parcel-cache
205 | 
206 | # Next.js build output
207 | .next
208 | out
209 | 
210 | # Nuxt.js build / generate output
211 | .nuxt
212 | dist
213 | 
214 | # Gatsby files
215 | .cache/
216 | # Comment in the public line in if your project uses Gatsby and not Next.js
217 | # https://nextjs.org/blog/next-9-1#public-directory-support
218 | # public
219 | 
220 | # vuepress build output
221 | .vuepress/dist
222 | 
223 | # Serverless directories
224 | .serverless/
225 | 
226 | # FuseBox cache
227 | .fusebox/
228 | 
229 | # DynamoDB Local files
230 | .dynamodb/
231 | 
232 | # TernJS port file
233 | .tern-port
234 | 
235 | # Stores VSCode versions used for testing VSCode extensions
236 | .vscode-test
237 | 
238 | # yarn v2
239 | .yarn/cache
240 | .yarn/unplugged
241 | .yarn/build-state.yml
242 | .yarn/install-state.gz
243 | .pnp.*
244 | 
245 | ### Node Patch ###
246 | # Serverless Webpack directories
247 | .webpack/
248 | 
249 | ### VisualStudioCode ###
250 | .vscode/*
251 | !.vscode/settings.json
252 | !.vscode/tasks.json
253 | !.vscode/launch.json
254 | !.vscode/extensions.json
255 | *.code-workspace
256 | 
257 | # Local History for Visual Studio Code
258 | .history/
259 | 
260 | ### VisualStudioCode Patch ###
261 | # Ignore all local history of files
262 | .history
263 | .ionide
264 | 
265 | # End of https://www.toptal.com/developers/gitignore/api/node,jetbrains+all,visualstudiocode,macos
266 | 


--------------------------------------------------------------------------------
/frontend/.prettierrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   printWidth: 80,
 3 |   tabWidth: 2,
 4 |   singleQuote: true,
 5 |   quoteProps: 'as-needed',
 6 |   trailingComma: 'none',
 7 |   bracketSpacing: true,
 8 |   semi: false,
 9 |   useTabs: false,
10 |   bracketSameLine: false,
11 |   proseWrap: 'never'
12 | }
13 | 


--------------------------------------------------------------------------------
/frontend/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "editor.formatOnSave": true,
 3 |   "editor.formatOnPaste": true,
 4 |   "[typescript]": {
 5 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
 6 |   },
 7 |   "[typescriptreact]": {
 8 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
 9 |   },
10 |   "[json]": {
11 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
12 |   },
13 |   "[javascript]": {
14 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
15 |   },
16 |   "[html]": {
17 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/frontend/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 PDMLab
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/frontend/__tests__/fake_test.ts:
--------------------------------------------------------------------------------
1 | export {}
2 | 
3 | test('some test should succeed', () => {
4 |   expect(true).toBeTruthy()
5 | })
6 | 


--------------------------------------------------------------------------------
/frontend/assets/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/XamHans/React-Solidity-Typescript-Starter/60673cace3ec56553251527ccba717c330ccd8c2/frontend/assets/screenshot.png


--------------------------------------------------------------------------------
/frontend/assets/template-usage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/XamHans/React-Solidity-Typescript-Starter/60673cace3ec56553251527ccba717c330ccd8c2/frontend/assets/template-usage.png


--------------------------------------------------------------------------------
/frontend/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = { extends: ['@commitlint/config-conventional'] }
2 | 


--------------------------------------------------------------------------------
/frontend/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Solidity & React Starter &#9829;
 8 |     </title>
 9 |   </head>
10 |   <body>
11 |     <div
12 |       id="root"
13 |       class="h-screen w-full flex justify-center items-center"
14 |     ></div>
15 |     <script type="module" src="/src/main.tsx"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/frontend/jest.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
2 | module.exports = {
3 |   preset: 'ts-jest',
4 |   testEnvironment: 'node'
5 | }
6 | 


--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vite-react-typescript-tailwind-starter",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "tsc && vite build",
 7 |     "serve": "vite preview --port 3000",
 8 |     "lint": "eslint . --ext .ts,.tsx,.js",
 9 |     "test": "jest"
10 |   },
11 |   "dependencies": {
12 |     "ethers": "^5.6.0",
13 |     "ipfs-http-client": "^56.0.1",
14 |     "react": "^17.0.2",
15 |     "react-dom": "^17.0.2"
16 |   },
17 |   "devDependencies": {
18 |     "@commitlint/cli": "^15.0.0",
19 |     "@commitlint/config-conventional": "^15.0.0",
20 |     "@heroicons/react": "^1.0.5",
21 |     "@tailwindcss/forms": "^0.4.0",
22 |     "@typechain/ethers-v5": "^9.0.0",
23 |     "@typechain/hardhat": "^5.0.0",
24 |     "@types/jest": "^27.0.3",
25 |     "@types/node": "16",
26 |     "@types/react": "^17.0.38",
27 |     "@types/react-dom": "^17.0.11",
28 |     "@typescript-eslint/eslint-plugin": "^5.8.0",
29 |     "@typescript-eslint/parser": "^5.8.0",
30 |     "@vitejs/plugin-react": "^1.1.3",
31 |     "autoprefixer": "^10.4.0",
32 |     "eslint": "^8.5.0",
33 |     "eslint-config-prettier": "^8.3.0",
34 |     "eslint-plugin-import": "^2.25.3",
35 |     "eslint-plugin-prettier": "^4.0.0",
36 |     "eslint-watch": "^8.0.0",
37 |     "jest": "^27.4.5",
38 |     "postcss": "^8.4.5",
39 |     "prettier": "^2.5.1",
40 |     "tailwindcss": "^3.0.7",
41 |     "ts-jest": "^27.1.2",
42 |     "typechain": "^7.0.1",
43 |     "typescript": "^4.5.4",
44 |     "vite": "^2.7.6"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/frontend/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {}
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/frontend/src/App.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/frontend/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import logo from "./logo.svg";
 3 | // if you have successfuly compiled the smart contract in the backend folder, typechain should have created an interface that we can use here 
 4 | // import {ExampleContract} from '../../backend/typechain/ExampleContract';
 5 | import getContract from "./utils/useGetContract";
 6 | 
 7 | function App() {
 8 |   /*-----------STATES---------------*/
 9 |   // const [typedContract, setTypedContract] = useState<ExampleContract>()
10 |   const [contract, setContract] = useState<any>(undefined)
11 |   const contractAddress = "0x5FbDB2315678afecb367f032d93F642f64180aa3"
12 | 
13 |   /*-----------SIDE EFFECTS---------------*/
14 |   useEffect(() => {
15 |     // wild wild west version of setting contract
16 |     setContract(getContract(contractAddress))
17 | 
18 |     // gentlemen version of setting contract 
19 |     //setTypedContract( (getContract(contractAddress) as ExampleContract))
20 | }, [])
21 | 
22 |   /*-----------FUNCTIONS---------------*/
23 | async function addAccount() {
24 |   // if you want to use the typed contract
25 | 
26 |   //   await (await typedContract?.addAccount("XamHans"));
27 |   //   typedContract?.on("accountCreatedEvent", async function (event:any) {
28 |   //     console.log('Recieved event from smart contract ',event)
29 |   // })
30 | 
31 |   await contract.addAccount("XamHans");
32 |   contract?.on("accountCreatedEvent", async function (event:any) {
33 |         console.log('Recieved event from smart contract ',event)
34 |   })
35 | }
36 | 
37 |   return (
38 |     <div className="flex flex-col w-full h-full bg-white dark:bg-gray-700">
39 |  
40 |       <header className="flex flex-col items-center justify-center flex-grow text-2xl text-gray-700 dark:text-white">
41 |         <img src={logo} className="animate-spin-slow h-72" alt="logo" />
42 |         <p>Vite + React + Solidity + Typescript = 🌞</p>
43 |         <p className="my-8">
44 |           <button
45 |             className="inline-flex items-center px-6 py-3 text-base font-medium text-white bg-teal-600 border border-transparent rounded-md shadow-sm hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
46 |             onClick={() => addAccount()}
47 |           >
48 |             Press me and check your console :)
49 |           </button>
50 |         </p>
51 |         <p>
52 |           <a
53 |             className="text-blue-400"
54 |             href="https://reactjs.org"
55 |             target="_blank"
56 |             rel="noopener noreferrer"
57 |           >
58 |             Learn React
59 |           </a>
60 |           {" | "}
61 |           <a
62 |             className="text-blue-400"
63 |             href="https://vitejs.dev/guide/features.html"
64 |             target="_blank"
65 |             rel="noopener noreferrer"
66 |           >
67 |             Vite Docs
68 |           </a>
69 |           {" | "}
70 |           <a
71 |             className="text-blue-400"
72 |             href="https://docs.soliditylang.org/en/v0.8.13/"
73 |             target="_blank"
74 |             rel="noopener noreferrer"
75 |           >
76 |             Solidity Docs
77 |           </a>
78 |         </p>
79 |       </header>
80 |     </div>
81 |   );
82 | }
83 | 
84 | export default App;


--------------------------------------------------------------------------------
/frontend/src/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
 3 | <path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
 4 | <defs>
 5 | <linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
 6 | <stop stop-color="#41D1FF"/>
 7 | <stop offset="1" stop-color="#BD34FE"/>
 8 | </linearGradient>
 9 | <linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
10 | <stop stop-color="#FFEA83"/>
11 | <stop offset="0.0833333" stop-color="#FFDD35"/>
12 | <stop offset="1" stop-color="#FFA800"/>
13 | </linearGradient>
14 | </defs>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/frontend/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 | 


--------------------------------------------------------------------------------
/frontend/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/frontend/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import './App.css'
 4 | import App from './App'
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById('root')
11 | )
12 | 


--------------------------------------------------------------------------------
/frontend/src/utils/useGetContract.ts:
--------------------------------------------------------------------------------
 1 | import { Contract, ethers } from "ethers";
 2 | import ExampleContract  from '../../../backend/artifacts/contracts/ExampleContract.sol/ExampleContract.json'
 3 | 
 4 | export default function getContract(contractAddress: string): any {
 5 |   const provider = new ethers.providers.Web3Provider( (window as any).ethereum);
 6 |   const signer = provider.getSigner();
 7 |   const contract = new ethers.Contract(
 8 |     contractAddress,
 9 |     ExampleContract.abi,
10 |     signer
11 |   );
12 |   return contract;
13 | }


--------------------------------------------------------------------------------
/frontend/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/frontend/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: ['./dist/**/*.html', './src/**/*.{js,jsx,ts,tsx}', './*.html'],
 3 |   plugins: [require('@tailwindcss/forms')],
 4 |   variants: {
 5 |     extend: {
 6 |       opacity: ['disabled']
 7 |     }
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/frontend/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["DOM", "DOM.Iterable", "ESNext"],
 6 |     "allowJs": false,
 7 |     "skipLibCheck": false,
 8 |     "esModuleInterop": false,
 9 |     "allowSyntheticDefaultImports": true,
10 |     "strict": true,
11 |     "forceConsistentCasingInFileNames": true,
12 |     "module": "ESNext",
13 |     "moduleResolution": "Node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "noEmit": true,
17 |     "jsx": "react-jsx"
18 |   },
19 |   "include": ["./src"]
20 | }
21 | 


--------------------------------------------------------------------------------
/frontend/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()]
7 | })
8 | 


--------------------------------------------------------------------------------