31 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/client/src/images/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/client/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | // eslint-disable-next-line no-unused-vars
4 | import { useWeb3Network, useEphemeralKey, useWeb3Injected } from '@openzeppelin/network/react';
5 |
6 | import Header from './components/Header/index.js';
7 | import Footer from './components/Footer/index.js';
8 | import Hero from './components/Hero/index.js';
9 | import Web3Info from './components/Web3Info/index.js';
10 | import Counter from './components/Counter/index.js';
11 |
12 | import styles from './App.module.scss';
13 |
14 | // eslint-disable-next-line no-unused-vars
15 | const infuraToken = process.env.REACT_APP_INFURA_TOKEN || '95202223388e49f48b423ea50a70e336';
16 |
17 | function App() {
18 | // get ephemeralKey
19 | // eslint-disable-next-line no-unused-vars
20 | const signKey = useEphemeralKey();
21 |
22 | // get GSN web3
23 | // const context = useWeb3Network(`wss://rinkeby.infura.io/ws/v3/${infuraToken}`, {
24 | // pollInterval: 15 * 1000,
25 | // gsn: {
26 | // signKey,
27 | // },
28 | // });
29 |
30 | const context = useWeb3Network('http://127.0.0.1:8545', {
31 | gsn: {
32 | dev: true,
33 | signKey,
34 | },
35 | });
36 |
37 | // load Counter json artifact
38 | let counterJSON = undefined;
39 | try {
40 | // see https://github.com/OpenZeppelin/solidity-loader
41 | counterJSON = require('../../contracts/Counter.sol');
42 | } catch (e) {
43 | console.log(e);
44 | }
45 |
46 | // load Counter instance
47 | const [counterInstance, setCounterInstance] = useState(undefined);
48 | let deployedNetwork = undefined;
49 | if (!counterInstance && context && counterJSON && counterJSON.networks && context.networkId) {
50 | deployedNetwork = counterJSON.networks[context.networkId.toString()];
51 | if (deployedNetwork) {
52 | setCounterInstance(new context.lib.eth.Contract(counterJSON.abi, deployedNetwork.address));
53 | }
54 | }
55 |
56 | function renderNoWeb3() {
57 | return (
58 | {props.title}
32 |
33 |
36 | Network:
34 | {networkId ? `${networkId} – ${networkName}` : 'No connection'}
35 |
37 |
42 | Your address:
38 |
39 |
41 |
43 |
46 | Your ETH balance:
44 | {balance}
45 |
47 |
50 | {accounts && accounts.length ? (
51 | Provider:
48 | {providerName}
49 |
52 |
55 | ) : !!networkId && providerName !== 'infura' ? (
56 | Accounts & Signing Status
53 | Access Granted
54 |
57 |
58 | 59 |
60 | ) : (
61 |
62 | )}
63 | 58 | 59 |
59 |
62 | );
63 | }
64 |
65 | return (
66 | Web3 Provider Not Found
60 |Please, install and run Ganache.
61 |
67 |
81 | );
82 | }
83 |
84 | export default App;
85 |
--------------------------------------------------------------------------------
/client/src/components/Hero/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import styles from './Hero.module.scss';
3 | import cx from 'classnames';
4 | import logos from './pic_bg.png';
5 |
6 | export default class Hero extends Component {
7 | renderLogo(name, imgUrl) {
8 | return (
9 |
70 | {!context.lib && renderNoWeb3()}
71 |
79 |
80 |
72 |
78 | BUIDL with GSN Kit!
73 |
74 |
77 |
10 | 
11 |
12 | );
13 | }
14 | render() {
15 | return (
16 |
11 |
17 |
73 | );
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `npm start`
8 |
9 | Runs the app in the development mode.
18 |
72 |
19 |
68 | GSN Kit
20 |21 | The easiest way to build a Web3 application and onboard users with the most trusted tools in Ethereum. 22 |
23 |
24 |
57 |
25 | - Upgradeable smart contracts with{' '}
26 |
27 | OpenZeppelin SDK
28 |
29 | .
30 |
31 |
32 | - Includes{' '}
33 |
34 | Infura
35 | {' '}
36 | setup for easy deployments & connection.
37 |
38 |
39 | -{' '}
40 |
41 | Truffle
42 | {' '}
43 | to compile & test smart contracts.
44 |
45 |
46 | -{' '}
47 |
48 | React
49 |
50 | &
51 |
52 | Rimble
53 | {' '}
54 | to build usable and friendly interfaces.
55 |
56 |
58 |
64 | > View code on github
65 |
66 |
67 |
69 | 
70 |
71 | 10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /client/src/layout/index.scss: -------------------------------------------------------------------------------- 1 | @import './variables.scss'; 2 | 3 | html { 4 | -ms-text-size-adjust: 100%; 5 | -webkit-text-size-adjust: 100%; 6 | } 7 | 8 | html, 9 | body { 10 | overflow-x: hidden; 11 | } 12 | 13 | body { 14 | margin: 0; 15 | padding: 0; 16 | font: 112.5%/1.45em 'Roboto', sans-serif; 17 | box-sizing: border-box; 18 | overflow-y: scroll; 19 | background: $white; 20 | color: $primary; 21 | } 22 | 23 | a { 24 | color: $blue; 25 | text-decoration: none; 26 | cursor: pointer; 27 | 28 | &:hover { 29 | text-decoration: underline; 30 | } 31 | } 32 | 33 | * { 34 | box-sizing: inherit; 35 | } 36 | *:before { 37 | box-sizing: inherit; 38 | } 39 | *:after { 40 | box-sizing: inherit; 41 | } 42 | 43 | body { 44 | color: hsla(0, 0%, 0%, 0.8); 45 | font-weight: normal; 46 | word-wrap: break-word; 47 | font-kerning: normal; 48 | -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; 49 | -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; 50 | -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; 51 | font-feature-settings: 'kern', 'liga', 'clig', 'calt'; 52 | } 53 | 54 | img { 55 | max-width: 100%; 56 | margin-left: 0; 57 | margin-right: 0; 58 | margin-top: 0; 59 | padding-bottom: 0; 60 | padding-left: 0; 61 | padding-right: 0; 62 | padding-top: 0; 63 | margin-bottom: 0; 64 | } 65 | h1 { 66 | margin-left: 0; 67 | margin-right: 0; 68 | margin-top: 0; 69 | padding-bottom: 0; 70 | padding-left: 0; 71 | padding-right: 0; 72 | padding-top: 0; 73 | margin-bottom: 1.45rem; 74 | color: inherit; 75 | font-weight: bold; 76 | text-rendering: optimizeLegibility; 77 | line-height: 1.1; 78 | font-size: 2em; 79 | font-weight: 300; 80 | } 81 | h2 { 82 | margin-left: 0; 83 | margin-right: 0; 84 | margin-top: 0; 85 | padding-bottom: 0; 86 | padding-left: 0; 87 | padding-right: 0; 88 | padding-top: 0; 89 | margin-bottom: 1.45rem; 90 | color: inherit; 91 | font-weight: bold; 92 | text-rendering: optimizeLegibility; 93 | font-size: 1.62671rem; 94 | line-height: 1.1; 95 | } 96 | h3 { 97 | margin-left: 0; 98 | margin-right: 0; 99 | margin-top: 0; 100 | padding-bottom: 0; 101 | padding-left: 0; 102 | padding-right: 0; 103 | padding-top: 0; 104 | margin-bottom: 1.45rem; 105 | color: inherit; 106 | font-weight: bold; 107 | text-rendering: optimizeLegibility; 108 | font-size: 1.38316rem; 109 | line-height: 1.1; 110 | } 111 | h4 { 112 | margin-left: 0; 113 | margin-right: 0; 114 | margin-top: 0; 115 | padding-bottom: 0; 116 | padding-left: 0; 117 | padding-right: 0; 118 | padding-top: 0; 119 | margin-bottom: 1.45rem; 120 | color: inherit; 121 | font-weight: bold; 122 | text-rendering: optimizeLegibility; 123 | font-size: 1rem; 124 | line-height: 1.1; 125 | } 126 | h5 { 127 | margin-left: 0; 128 | margin-right: 0; 129 | margin-top: 0; 130 | padding-bottom: 0; 131 | padding-left: 0; 132 | padding-right: 0; 133 | padding-top: 0; 134 | margin-bottom: 1.45rem; 135 | color: inherit; 136 | font-weight: bold; 137 | text-rendering: optimizeLegibility; 138 | font-size: 0.85028rem; 139 | line-height: 1.1; 140 | } 141 | h6 { 142 | margin-left: 0; 143 | margin-right: 0; 144 | margin-top: 0; 145 | padding-bottom: 0; 146 | padding-left: 0; 147 | padding-right: 0; 148 | padding-top: 0; 149 | margin-bottom: 1.45rem; 150 | color: inherit; 151 | font-weight: bold; 152 | text-rendering: optimizeLegibility; 153 | font-size: 0.78405rem; 154 | line-height: 1.1; 155 | } 156 | 157 | button { 158 | box-shadow: none; 159 | outline: none; 160 | color: $white; 161 | padding: 10px 15px; 162 | border: 1px solid $white; 163 | font-size: 16px; 164 | font-weight: 400; 165 | cursor: pointer; 166 | 167 | &.purple { 168 | background: $primary; 169 | &:hover { 170 | background: $white; 171 | color: $primary; 172 | border-color: $primary; 173 | } 174 | } 175 | 176 | &.yellow { 177 | background: $yellow; 178 | &:hover { 179 | background: $white; 180 | color: $yellow; 181 | border-color: $yellow; 182 | } 183 | } 184 | 185 | &.pink { 186 | background: $pink; 187 | &:hover { 188 | background: $white; 189 | color: $pink; 190 | border-color: $pink; 191 | } 192 | } 193 | } 194 | 195 | input { 196 | width: 100%; 197 | border: 1px solid #ccc; 198 | padding: 5px; 199 | color: $primary; 200 | margin: 5px 0; 201 | } 202 | 203 | @media only screen and (max-width: 480px) { 204 | html { 205 | font-size: 100%; 206 | } 207 | } 208 | -------------------------------------------------------------------------------- /client/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read http://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/), 19 | ); 20 | 21 | export function register(config) { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Let's check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl, config); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit http://bit.ly/CRA-PWA', 45 | ); 46 | }); 47 | } else { 48 | // Is not localhost. Just register service worker 49 | registerValidSW(swUrl, config); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl, config) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | if (installingWorker == null) { 62 | return; 63 | } 64 | installingWorker.onstatechange = () => { 65 | if (installingWorker.state === 'installed') { 66 | if (navigator.serviceWorker.controller) { 67 | // At this point, the updated precached content has been fetched, 68 | // but the previous service worker will still serve the older 69 | // content until all client tabs are closed. 70 | console.log( 71 | 'New content is available and will be used when all ' + 72 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.', 73 | ); 74 | 75 | // Execute callback 76 | if (config && config.onUpdate) { 77 | config.onUpdate(registration); 78 | } 79 | } else { 80 | // At this point, everything has been precached. 81 | // It's the perfect time to display a 82 | // "Content is cached for offline use." message. 83 | console.log('Content is cached for offline use.'); 84 | 85 | // Execute callback 86 | if (config && config.onSuccess) { 87 | config.onSuccess(registration); 88 | } 89 | } 90 | } 91 | }; 92 | }; 93 | }) 94 | .catch(error => { 95 | console.error('Error during service worker registration:', error); 96 | }); 97 | } 98 | 99 | function checkValidServiceWorker(swUrl, config) { 100 | // Check if the service worker can be found. If it can't reload the page. 101 | fetch(swUrl) 102 | .then(response => { 103 | // Ensure service worker exists, and that we really are getting a JS file. 104 | const contentType = response.headers.get('content-type'); 105 | if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) { 106 | // No service worker found. Probably a different app. Reload the page. 107 | navigator.serviceWorker.ready.then(registration => { 108 | registration.unregister().then(() => { 109 | window.location.reload(); 110 | }); 111 | }); 112 | } else { 113 | // Service worker found. Proceed as normal. 114 | registerValidSW(swUrl, config); 115 | } 116 | }) 117 | .catch(() => { 118 | console.log('No internet connection found. App is running in offline mode.'); 119 | }); 120 | } 121 | 122 | export function unregister() { 123 | if ('serviceWorker' in navigator) { 124 | navigator.serviceWorker.ready.then(registration => { 125 | registration.unregister(); 126 | }); 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /client/src/components/Counter/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useCallback } from 'react'; 2 | import { PublicAddress, Button, Loader } from 'rimble-ui'; 3 | 4 | import styles from './Counter.module.scss'; 5 | 6 | import getTransactionReceipt from '../../utils/getTransactionReceipt'; 7 | import { utils } from '@openzeppelin/gsn-provider'; 8 | const { isRelayHubDeployedForRecipient, getRecipientFunds } = utils; 9 | 10 | export default function Counter(props) { 11 | const { instance, accounts, lib, networkName, networkId, providerName } = props; 12 | const { _address, methods } = instance || {}; 13 | 14 | // GSN provider has only one key pair 15 | const isGSN = providerName === 'GSN'; 16 | 17 | const [balance, setBalance] = useState(0); 18 | 19 | const getBalance = useCallback(async () => { 20 | let balance = 21 | accounts && accounts.length > 0 ? lib.utils.fromWei(await lib.eth.getBalance(accounts[0]), 'ether') : 'Unknown'; 22 | setBalance(Number(balance)); 23 | }, [accounts, lib.eth, lib.utils]); 24 | 25 | useEffect(() => { 26 | if (!isGSN) getBalance(); 27 | }, [accounts, getBalance, isGSN, lib.eth, lib.utils, networkId]); 28 | 29 | const [, setIsDeployed] = useState(false); 30 | const [funds, setFunds] = useState(0); 31 | 32 | const getDeploymentAndFunds = useCallback(async () => { 33 | if (instance) { 34 | if (isGSN) { 35 | // if GSN check how much funds recipient has 36 | const isDeployed = await isRelayHubDeployedForRecipient(lib, _address); 37 | 38 | setIsDeployed(isDeployed); 39 | if (isDeployed) { 40 | const funds = await getRecipientFunds(lib, _address); 41 | setFunds(Number(funds)); 42 | } 43 | } 44 | } 45 | }, [_address, instance, isGSN, lib]); 46 | 47 | useEffect(() => { 48 | getDeploymentAndFunds(); 49 | }, [getDeploymentAndFunds, instance]); 50 | 51 | const [count, setCount] = useState(0); 52 | 53 | const getCount = useCallback(async () => { 54 | if (instance) { 55 | // Get the value from the contract to prove it worked. 56 | const response = await instance.methods.getCounter().call(); 57 | // Update state with the result. 58 | setCount(response); 59 | } 60 | }, [instance]); 61 | 62 | useEffect(() => { 63 | getCount(); 64 | }, [getCount, instance]); 65 | 66 | const [sending, setSending] = useState(false); 67 | const [transactionHash, setTransactionHash] = useState(''); 68 | 69 | const increase = async number => { 70 | try { 71 | if (!sending) { 72 | setSending(true); 73 | 74 | const tx = await instance.methods.increaseCounter(number).send({ from: accounts[0] }); 75 | const receipt = await getTransactionReceipt(lib, tx.transactionHash); 76 | setTransactionHash(receipt.transactionHash); 77 | 78 | getCount(); 79 | getDeploymentAndFunds(); 80 | 81 | setSending(false); 82 | } 83 | } catch (e) { 84 | setSending(false); 85 | console.log(e); 86 | } 87 | }; 88 | 89 | const decrease = async number => { 90 | try { 91 | if (!sending) { 92 | setSending(true); 93 | 94 | const receipt = await instance.methods.decreaseCounter(number).send({ from: accounts[0] }); 95 | setTransactionHash(receipt.transactionHash); 96 | 97 | getCount(); 98 | getDeploymentAndFunds(); 99 | 100 | setSending(false); 101 | } 102 | } catch (e) { 103 | setSending(false); 104 | console.log(e); 105 | } 106 | }; 107 | 108 | function renderNoDeploy() { 109 | return ( 110 |
111 |
116 | );
117 | }
118 |
119 | function renderNoFunds() {
120 | return (
121 | 112 | Can't Load Deployed Counter Instance 113 |
114 |Please, run `oz create` to deploy an counter instance.
115 |
122 |
133 | );
134 | }
135 |
136 | function renderNoBalance() {
137 | return (
138 | 123 | The recipient has no funds 124 |
125 |Please, run:
126 |
127 |
131 |
128 | npx oz-gsn fund-recipient --recipient {_address}
129 |
130 | to fund the recipient on local network.
132 |
139 |
150 | );
151 | }
152 |
153 | function renderTransactionHash() {
154 | return (
155 | 140 | Fund your Metamask account 141 |
142 |You need some ETH to be able to send transactions. Please, run:
143 |
144 |
148 |
145 | openzeppelin transfer --to {accounts[0]}
146 |
147 | to fund your Metamask.
149 |
156 |
168 | );
169 | }
170 |
171 | return (
172 | 157 | Transaction{' '} 158 | 163 | {transactionHash.substr(0, 6)} 164 | {' '} 165 | has been mined on {networkName} network. 166 |
167 |
173 |
177 |
198 |
210 | )}
211 | {transactionHash && networkName !== 'Private' && renderTransactionHash()}
212 |
213 | )}
214 |
215 | );
216 | }
217 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | :warning: This project is **deprecated**. We are no longer actively developing new features nor addressing issues. Read [here](https://forum.openzeppelin.com/t/doubling-down-in-security/2712) for more info, and reach out if you are interested in taking over maintenance. We suggest looking into [create-eth-app](https://github.com/PaulRBerg/create-eth-app) for a popular alternative to this project.
2 |
3 | # OpenZeppelin GSN Starter Kit
4 |
5 | An OpenZeppelin Starter Kit GSN containing React, OpenZeppelin CLI, OpenZeppelin Contracts, Gas Station Network, Truffle and Infura.
6 |
7 | OpenZeppelin GSN Starter Kit comes with everything you need to start using Gas Station Network contracts inside your applications. It also includes all the GSN Providers & Web3 connectors that you need to abstract gas for your users.
8 |
9 | In addition to the contents included in the [vanilla Starter Kit](https://github.com/OpenZeppelin/starter-kit/blob/master/README.md), this kit contains a step-by-step tutorial on how to enable Gas Station Network for a simple Counter Contract.
10 |
11 | ## Requirements
12 |
13 | Install Ganache, and Truffle
14 |
15 | ```
16 | npm install -g truffle@5.0.41 ganache-cli@6.7.0
17 | ```
18 |
19 | ## Installation
20 |
21 | Ensure you are in a new and empty directory, and run the `unpack` command with `gsn` to create a starter project:
22 |
23 | ```javascript
24 | npx @openzeppelin/cli unpack gsn
25 | ```
26 |
27 | ## Run
28 |
29 | In a new terminal window, run your local blockchain:
30 |
31 | ```
32 | ganache-cli --deterministic
33 | ```
34 |
35 | In your original terminal window, at the top level of your folder, initialize the project
36 | and follow the prompts:
37 |
38 | ```javascript
39 | npx openzeppelin init
40 | ```
41 |
42 | In a new terminal window, in the `client` directory, run the React app:
43 |
44 | ```javascript
45 | cd client
46 | npm run start
47 | ```
48 |
49 | Follow the instructions in the browser.
50 |
51 | ## Test
52 |
53 | Truffle can run tests written in Solidity or JavaScript against your smart contracts. Note the command varies slightly if you're in or outside of the truffle development console.
54 |
55 | ```javascript
56 | // inside the development console.
57 | test
58 |
59 | // outside the development console..
60 | truffle test
61 | ```
62 |
63 | Jest is included for testing React components. Compile your contracts before running Jest, or you may receive some file not found errors.
64 |
65 | ```javascript
66 | // ensure you are inside the client directory when running this
67 | npm run test
68 | ```
69 |
70 | ## Build
71 |
72 | To build the application for production, use the build script. A production build will be in the `client/build` folder.
73 |
74 | ```javascript
75 | // ensure you are inside the client directory when running this
76 | npm run build
77 | ```
78 |
79 | ## Why this kit?
80 |
81 | This kit leverages GSN to create dapps that are ready for mass adoption. Free your users from
82 | the initial burden of installing Metamask and obtaining Ether. Create blockchain applications
83 | that are indistinguishable from Web2.0 apps.
84 |
85 | This documents assumes familiarity with the [Gas Station Network](https://gsn.openzeppelin.com/). Check out our [GSN getting started guide](https://docs.openzeppelin.com/learn/sending-gasless-transactions) and [GSN Kit Tutorial](https://forum.openzeppelin.com/t/using-gas-station-network-starter-kit-on-a-local-network/1213) to learn more.
86 |
87 | ### How does it use Web3 with GSN?
88 |
89 | This kit uses Open Zeppelin [network.js](https://github.com/OpenZeppelin/openzeppelin-network.js) to create the connection to Web3. Using a couple of flags for development and production you can see how the dapp obtains a context that is aware of Gas Station Network.
90 |
91 | ```javascript
92 | // get GSN web3
93 | const context = useWeb3Network("http://127.0.0.1:8545", {
94 | gsn: { dev: true }
95 | });
96 | ```
97 |
98 | ### How are the contracts modified to use GSN?
99 |
100 | The `Counter` contract is modified to inherit from `RelayRecipient`. Also, the `Counter` contract is going to
101 | naively pay for all the transactions that are submitted. Note how the `acceptRelayedCall` determines this by returning 0. Also `_preRelayedCall` and `_postRelayedCall` methods must be implemented because they are defined as abstract in `GSNRecipient`.
102 |
103 | ```solidity
104 | pragma solidity ^0.5.0;
105 |
106 | import "@openzeppelin/contracts-ethereum-package/contracts/GSN/GSNRecipient.sol";
107 | import "@openzeppelin/upgrades/contracts/Initializable.sol";
108 |
109 | contract Counter is Initializable, GSNRecipient {
110 | //it keeps a count to demonstrate stage changes
111 | uint private count;
112 | address private _owner;
113 |
114 | function initialize(uint num) public initializer {
115 | GSNRecipient.initialize();
116 | _owner = _msgSender();
117 | count = num;
118 | }
119 |
120 | // accept all requests
121 | function acceptRelayedCall(
122 | address,
123 | address,
124 | bytes calldata,
125 | uint256,
126 | uint256,
127 | uint256,
128 | uint256,
129 | bytes calldata,
130 | uint256
131 | ) external view returns (uint256, bytes memory) {
132 | return _approveRelayedCall();
133 | } ...
134 | }
135 |
136 | function _preRelayedCall(bytes memory context) internal returns (bytes32) {
137 | // solhint-disable-previous-line no-empty-blocks
138 | }
139 |
140 | function _postRelayedCall(bytes memory context, bool, uint256 actualCharge, bytes32) internal {
141 | // solhint-disable-previous-line no-empty-blocks
142 | }
143 |
144 | ```
145 |
146 | ### How to know if my recipient has funds?
147 |
148 | The frontend also has some functions to help you see how much remaining balance you have left.
149 | Once it runs out, transactions will stop working because your dapp won't be able to pay the gas fee
150 | on behalf of its users.
151 |
152 | ```js
153 | const getDeploymentAndFunds = async () => {
154 | if (instance) {
155 | const isDeployed = await isRelayHubDeployedForRecipient(lib, _address);
156 | setIsDeployed(isDeployed);
157 | if (isDeployed) {
158 | const funds = await getRecipientFunds(lib, _address);
159 | setFunds(funds);
160 | }
161 | }
162 | };
163 | ```
164 |
165 | You can top your balance by sending funds to your contract using `npx oz-gsn fund-recipient --recipient ADDRESS` command or heading to the [dapp tool](https://gsn.openzeppelin.com/recipients).
166 |
167 | ### How is the RelayHub deployed locally?
168 |
169 | When you run `npx oz-gsn fund-recipient`, the following [code](https://github.com/OpenZeppelin/openzeppelin-gsn-helpers/blob/master/src/fund.js) gets executed:
170 |
171 | ```js
172 | // Ensure relayHub is deployed on the local network
173 | if (options.relayHubAddress.toLowerCase() === data.relayHub.address.toLowerCase()) {
174 | await deployRelayHub(web3, options.from);
175 | }
176 | ```
177 |
178 | Note that on both mainnet and testnets, as well as local blockchain (`ganache`) environments, the address of the `RelayHub` contract is always `0xD216153c06E857cD7f72665E0aF1d7D82172F494`.
179 |
180 | ## FAQ
181 |
182 | - **How do I use this with the Ganache-CLI?**
183 |
184 | It's as easy as modifying the config file! [Check out our documentation on adding network configurations](http://truffleframework.com/docs/advanced/configuration#networks).
185 |
186 | - **Where is my production build?**
187 |
188 | The production build will be in the `client/build` folder after running `npm run build` in the `client` folder.
189 |
190 | - **Where can I find more documentation?**
191 |
192 | Check out the [OpenZeppelin Starter Kits documentation](https://docs.openzeppelin.com/starter-kits/).
193 |
--------------------------------------------------------------------------------
/client/src/components/Footer/zeppelin_logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/client/src/components/Instructions/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button } from 'rimble-ui';
3 | import styles from './Instructions.module.scss';
4 |
5 | export default class Instructions extends Component {
6 | renderCounterSetup() {
7 | return (
8 | Counter Instance
174 | {lib && !instance && renderNoDeploy()} 175 | {lib && instance && ( 176 |
178 |
183 | Instance address:
179 |
180 |
182 |
184 |
187 | {isGSN && (
188 | Counter Value:
185 | {count}
186 |
189 |
192 | )}
193 | {isGSN && !funds && renderNoFunds()}
194 | {!isGSN && !balance && renderNoBalance()}
195 |
196 | {(!!funds || !!balance) && (
197 | Recipient Funds:
190 | {lib.utils.fromWei(funds.toString(), 'ether')} ETH
191 |
199 | Counter Actions
200 |
201 |
202 |
205 |
208 |
209 |
9 |
36 | );
37 | }
38 |
39 | renderSetup() {
40 | return (
41 | Build your first app with Starter Kit Tutorial
10 |
11 |
16 | Initialize your OpenZeppelin SDK project
12 |
13 |
15 | openzeppelin init {'<>'}
14 |
17 |
24 |
18 | Create an instance of the Counter contract and deploy it using the create command, follow the cli prompts.
19 |
20 |
21 |
23 | openzeppelin create Counter
22 |
25 |
33 | 34 |
35 |
26 | Done! Refresh the page to interact with your instance of the counter contract.
27 |
28 |
29 | Learn more about OpenZeppelin SDK or ask a question in the{' '}
30 | Forum.
31 |
32 | 33 | 34 |
42 |
54 | );
55 | }
56 |
57 | renderMetamask() {
58 | const code = this.props.accounts[0];
59 | return (
60 | Starter Kit Tutorial is running!
43 |
44 |
46 |
47 | Congratulations! Your application is correctly setup.
45 |
48 |
53 |
49 | Visit the tutorials. Start with the Counter page to deploy and interact with your
50 | first contract.
51 |
52 |
61 |
83 | );
84 | }
85 |
86 | renderUpgrade() {
87 | return (
88 | Fund your Metamask account
62 |You need some ETH to be able to send transactions.
63 |
64 |
69 | 1. Open a terminal and type
65 |
66 |
68 | openzeppelin transfer
67 |
70 |
77 |
71 | 2. Send 0.5 ETH from one of your ganache accounts to your Metamask account.
72 |
73 |
74 |
76 | {code}
75 |
78 |
82 |
79 | 3. Congratulations!! You can now interact with the contract and increase the counter.
80 |
81 |
89 |
115 | );
116 | }
117 |
118 | renderAutoUpgrade() {
119 | return (
120 | Upgrading your contract
90 |Thanks to OpenZeppelin SDK, you can upgrade the code of your contract to add more functionality.
91 |
92 |
99 |
93 | 1. Open contracts/Counter.sol and uncomment the decreaseCounter method (lines 32-36).
94 |
95 |
96 |
98 | {`// function decreaseCounter(uint256 amount) public returns (bool) {`}
97 |
100 |
107 |
101 | 2. Save the changes and compile, push, and update the new changes to the network.
102 |
103 |
104 |
106 | openzeppelin update Counter
105 |
108 |
112 | 113 |
114 |
109 | 3. Congratulations! You have upgraded your contract and you can now decrease the counter.
110 |
111 | 112 | 113 |
121 |
152 | );
153 | }
154 |
155 | renderFAQ() {
156 | return (
157 | Upgrading on Development Network
122 |123 | {' '} 124 | Thanks to OpenZeppelin SDK and Solidity Loader your smart contracts would reload automatically after you save 125 | a .sol file while preserving a state.{' '} 126 |
127 |
128 |
135 |
129 | 1. Open contracts/Counter.sol and uncomment the decreaseCounter method (lines 32-36).
130 |
131 |
132 |
134 | {`// function decreaseCounter(uint256 amount) public returns (bool) {`}
133 |
136 |
141 |
137 | 2. Save the changes and wait for the .sol files to compile. Upon completion, Solidity Loader will push and
138 | update your smart contracts
139 |
140 |
142 |
146 |
147 |
143 | 3. Congratulations! You have upgraded your contract and you can now decrease the counter.
144 |
145 | 148 | {' '} 149 | * On a non development network you would have to run openzeppelin update command manually.{' '} 150 |
151 |
158 |
215 | );
216 | }
217 |
218 | getDefaultAddress() {
219 | const { ganacheAccounts } = this.props;
220 | return (ganacheAccounts && ganacheAccounts.length) > 2 ? ganacheAccounts[2] : '';
221 | }
222 |
223 | render() {
224 | const { name } = this.props;
225 | switch (name) {
226 | case 'setup':
227 | return this.renderSetup();
228 | case 'metamask':
229 | return this.renderMetamask();
230 | case 'upgrade':
231 | return this.renderUpgrade();
232 | case 'upgrade-auto':
233 | return this.renderAutoUpgrade();
234 | case 'counter':
235 | return this.renderCounterSetup();
236 | case 'faq':
237 | return this.renderFAQ();
238 | case 'evm':
239 | return this.renderEVM();
240 | default:
241 | return this.renderSetup();
242 | }
243 | }
244 | }
245 |
--------------------------------------------------------------------------------
FAQ
159 |Q: How do I deploy to other networks?
160 |
161 |
162 |
171 |
163 | 1. Enter the mnemonic of the account you want to use to deploy in the{' '}
164 | .env file located in the top level folder. Add your network to the{' '}
165 | networks.js file.
166 |
167 |
168 |
170 | mnemonic='fill'
169 |
172 |
177 | 3. Push the project contracts and deploy the dependencies (if any).
173 |
174 |
176 | openzeppelin push
175 |
178 |
185 |
179 | 4. Create the instances and follow the cli prompts
180 |
181 |
182 |
184 | openzeppelin create CONTRACT_NAME
183 | Q: How do I run tests?
186 |
187 |
188 |
193 | 1. To execute smart contract tests run:
189 |
190 |
192 | truffle test
191 |
194 |
199 | 2. To test your React components, (inside the client folder) run:
195 |
196 |
198 | npm run test
197 | Q: How do I connect to other networks from my local website?
200 |
201 |
202 |
210 |
203 | 1. Change the fallback provider by switching REACT_APP_NETWORK {' '}
204 | inside the .env file located in the client folder.
205 |
206 |
207 |
209 | REACT_APP_NETWORK = https://mainnet.infura.io/v3/d6760e62b67f4937ba1ea2691046f06d
208 |
211 | Take into account that this only switches the default provider. If you are using Metamask, you only need to
212 | switch network from the extension.
213 |
214 |