|
| 1 | +# Smart Contract Interaction on EVM Rollup |
| 2 | + |
| 3 | +In this tutorial, you will deploy a smart contract to your EVM rollup and interact with it on a frontend. This tutorial assumes that you spinned up an EVM rollup, know it's RPC URL, and have funded an account on it. |
| 4 | + |
| 5 | +## Install Foundry |
| 6 | + |
| 7 | +To install Foundry, run the following commands: |
| 8 | + |
| 9 | +```bash |
| 10 | +curl -L https://foundry.paradigm.xyz | bash |
| 11 | +foundryup |
| 12 | +``` |
| 13 | + |
| 14 | +## Funds |
| 15 | + |
| 16 | +Here is the private key and derived address of the account for you to be used in this tutorial (make sure to fund it with some ETH): |
| 17 | + |
| 18 | +```bash |
| 19 | +PrivateKey: 0xfffdbb37105441e14b0ee6330d855d8504ff39e705c3afa8f859ac9865f99306 |
| 20 | +Address: 0x20f33CE90A13a4b5E7697E3544c3083B8F8A51D4 |
| 21 | +``` |
| 22 | + |
| 23 | +## Frontend |
| 24 | + |
| 25 | +Now we will make a frontend with a smart contract on our EVM rollup. First, clone the GM Portal repository: |
| 26 | + |
| 27 | +```bash |
| 28 | +cd $HOME |
| 29 | +git clone https://github.com/rollkit/gm-portal.git |
| 30 | +cd gm-portal |
| 31 | +``` |
| 32 | + |
| 33 | +### Deploy the ooga booga portal contract |
| 34 | + |
| 35 | +Next, you will deploy the smart contract. |
| 36 | +Export the funded private key and RPC URL: |
| 37 | + |
| 38 | +```bash |
| 39 | +export PRIVATE_KEY=0xfffdbb37105441e14b0ee6330d855d8504ff39e705c3afa8f859ac9865f99306 |
| 40 | +export RPC_URL=<rpc url> |
| 41 | +``` |
| 42 | + |
| 43 | +Use Foundry to deploy the contract to your EVM: |
| 44 | + |
| 45 | +```bash |
| 46 | +cd contracts |
| 47 | +forge script script/GmPortal.s.sol:GmPortalScript --rpc-url $RPC_URL --private-key $PRIVATE_KEY --broadcast |
| 48 | +``` |
| 49 | + |
| 50 | +A successful deployment's output will look similar to: |
| 51 | + |
| 52 | +```bash |
| 53 | +forge script script/GmPortal.s.sol:GmPortalScript --rpc-url $RPC_URL --private-key $PRIVATE_KEY --broadcast |
| 54 | +[⠒] Compiling... |
| 55 | +[⠑] Compiling 18 files with 0.8.20 |
| 56 | +[⠘] Solc 0.8.20 finished in 1.52s |
| 57 | +Compiler run successful! |
| 58 | +Script ran successfully. |
| 59 | + |
| 60 | +== Logs == |
| 61 | + i am a smart contract on EVM x Rollkit. gm! |
| 62 | + |
| 63 | +[...] |
| 64 | + |
| 65 | +## |
| 66 | +Waiting for receipts. |
| 67 | +⠉ [00:00:00] [######################] 1/1 receipts (0.0s) |
| 68 | +##### 2061 |
| 69 | +✅ [Success]Hash: 0xa174e9389633972458e6dce431d84736e0709e9406c1c3b14b5fa9ae0cdd6860 |
| 70 | +Contract Address: 0x18Df82C7E422A42D47345Ed86B0E935E9718eBda // [!code focus] |
| 71 | +Block: 682 |
| 72 | +Paid: 0.001528707003566983 ETH (509569 gas * 3.000000007 gwei) |
| 73 | + |
| 74 | +[...] |
| 75 | +``` |
| 76 | +
|
| 77 | +From the contract deployment output, export your contract address: |
| 78 | +
|
| 79 | +```bash |
| 80 | +export CONTRACT_ADDRESS=0x18Df82C7E422A42D47345Ed86B0E935E9718eBda |
| 81 | +``` |
| 82 | +
|
| 83 | +### Interact with the contract |
| 84 | +
|
| 85 | +Send an "ooga booga" to the contract: |
| 86 | +
|
| 87 | +```bash |
| 88 | +cast send $CONTRACT_ADDRESS \ |
| 89 | +"gm(string)" "ooga booga" \ |
| 90 | +--private-key $PRIVATE_KEY \ |
| 91 | +--rpc-url $RPC_URL |
| 92 | +``` |
| 93 | +
|
| 94 | +Get total (hex-encoded) GMs (ooga boogas): |
| 95 | +
|
| 96 | +```bash |
| 97 | +cast call $CONTRACT_ADDRESS "getTotalGms()" --rpc-url $RPC_URL |
| 98 | +``` |
| 99 | +
|
| 100 | +### Start and update the frontend |
| 101 | +
|
| 102 | +Now, change into the frontend directory: |
| 103 | +
|
| 104 | +```bash |
| 105 | +cd $HOME/gm-portal/frontend |
| 106 | +yarn && yarn dev |
| 107 | +``` |
| 108 | +
|
| 109 | +Now, your frontend is running! We'll display and interact with our smart contract |
| 110 | +on our frontend. |
| 111 | +
|
| 112 | +First, you will need to change the contract address on `gm-portal/frontend/src/App.tsx` to your contract address from above before you can interact with the contract on the frontend: |
| 113 | +
|
| 114 | +::: tip |
| 115 | +**Only if you changed the contract**, you will need to update the ABI in `gm-portal/frontend/GmPortal.json` from `gm-portal/contracts/out/GmPortal.sol/GmPortal.json`. This can be done with: |
| 116 | +
|
| 117 | +```bash |
| 118 | +cd $HOME |
| 119 | +cp gm-portal/contracts/out/GmPortal.sol/GmPortal.json gm-portal/frontend |
| 120 | +``` |
| 121 | +::: |
| 122 | +
|
| 123 | +### Interact with the frontend |
| 124 | +
|
| 125 | +In order to interact with the contract on the frontend, you'll need to fund an account that you have in your Ethereum wallet |
| 126 | +or add the private key from above into your wallet. |
| 127 | +
|
| 128 | +To transfer to an external account, use this command: |
| 129 | +
|
| 130 | +```bash |
| 131 | +export RECEIVER=<receiver ETH address> |
| 132 | +cast send --private-key $PRIVATE_KEY $RECEIVER --value 1ether --rpc-url $RPC_URL |
| 133 | +``` |
| 134 | +
|
| 135 | +_If you are in a different terminal than the one you set the private key in originally, |
| 136 | +you may need to set it again._ |
| 137 | +
|
| 138 | +Now, login with your wallet that you funded, and post a ooga booga on your ooga booga portal! |
| 139 | +
|
| 140 | + |
| 141 | +
|
| 142 | +### Conclusion |
| 143 | +
|
| 144 | +You have successfully deployed a smart contract to your EVM rollup and interacted with it on a frontend. You can now build more complex applications on your EVM rollup! |
0 commit comments