This is an example app that uses Ethereum Name Service (ENS)'s evmgateway.

Check it out at https://evmgateway-starter.vercel.app/

The Passport NFT is as non-transferrable NFT on L1 (Goerli) that dynamically updates based on some of the owner's actions on L2 (OP Goerli). The NFT's tokenURI function performs two subsequent CCIP-Reads, and returns a svg string that encodes the read results.

EVM Gateway is a CCIP-Read gateway that allows L1 smart contracts to fetch and verify state from L2s. Read more about it here.

• Hackers hacking on evmgateway
• Hackers interested in learning more about how an OP Stack chain works
• Hackers interested in learning more about how CCIP-Read works

Check out the contract here

• L2TestCoin is deployed on OP Goerli
• L2TestNFT is deployed on OP Goerli
• L1PassportNFT is deployed on Goerli

1. tokenURI function on the L1PassportNFT contract performs a CCIP-Read on the L2TestCoin's totalSupply and balanceOf storage slots for the current owner of the NFT.
2. When the CCIP-Read in step 1 succeeds, L1PassportNFT's tokenURIFetchL2TestCoinBalanceCallback is called
3. tokenURIFetchL2TestCoinBalanceCallback performs another CCIP-Read on L2TestNFT's _balanceOf
4. When the CCIP-Read in step 3 succeeds, L1PassportNFT's tokenURIFetchL2TestNFTBalanceCallback is called
5. tokenURIFetchL2TestNFTBalanceCallback takes the fetch results from the last 2 CCIP-Read calls, and then generates an svg string that displays the user's L2TestCoin and L2TestNFT balance.

The following are deployed versions of the op-gateway with delay = 0 and their corresponding op-verifier contracts

git clone https://github.com/ethereum-optimism/evmgateway-starter.git

cd evmgateway-starter

1. Copy .env.example to .env.

   cp .env.example .env

2. Edit your .env to specify the environment variables.

   • VITE_RPC_URL_GOERLI: HTTP RPC URL for Goerli

   • VITE_RPC_URL_OP_GOERLI: HTTP RPC URL for OP-Goerli

   • VITE_WALLETCONNECT_PROJECT_ID: WalletConnect v2 requires a project ID. You can obtain it from your WC dashboard: https://cloud.walletconnect.com/sign-in

1. Install the necessary node packages:

   npm install

2. Start the frontend with npm run dev

   npm run dev

3. Open localhost:5173 in your browser.

Using a testnet is recommended. You can use the existing deployment for op-verifier contract and the op-gateway service on Goerli (listed above).

For a local development environment, you will need to do the following

• run an Optimism Devnet
• run an op-gateway service against the devnet
• deploy op-verifier contract on the devnet that uses the op-gateway service

You will need to install Foundry to build your smart contracts.

1. Run the following command:

   curl -L https://foundry.paradigm.xyz | bash

2. Source your environment as requested by Foundry.

3. Run foundryup.

1. Register for Etherscan. Add the api key to ETHERSCAN_API_KEY_GOERLI in your .env file

2. Register for Etherscan on Optimism. This account is different from your normal Etherscan account. Add this api key to ETHERSCAN_API_KEY_OP_GOERLI in your .env file

1. Deploy the L2TestCoin contract on OP Goerli

   npm run deploy:l2-test-coin

2. Deploy the L2TestNFT contract on OP Goerli

   npm run deploy:l2-test-nft

3. Update the VITE_L2TESTNFT_CONTRACT_ADDRESS_OP_GOERLI and VITE_L2TESTCOIN_CONTRACT_ADDRESS_OP_GOERLI with the addresses of the newly deployed contracts. This will be used as inputs for the L1PassportNFT contract

4. Deploy the L1PassportNFT contract on Goerli

   npm run deploy:l1-passport-nft

• thorin (ENS Design System)
• wagmi
• rainbowkit
• vite
• foundry