π§ͺ An open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts as well as add EthGlobal partner technology such as account abstraction, chain abstraction, onboarding, transaction exploring, EVM networks, custom chains and much more!
Before you begin, you need to install the following tools:
-
You have to get a Pimlico API key and put it in your env file (
NEXT_PUBLIC_PIMLICO_API_KEY). -
You have to get a Lighthouse Storage API key and add it to the env file(
NEXT_PUBLIC_LIGHTHOUSE_API_KEY) -
You should send some ERC20 (USDC is better) to your Safe smart wallet in order to use the transfer and cross-chain transfer capabilities.
-
You can use the default Dynamic environment ID to test, but we recommend you add your own as soon as possible in the env file (NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID)
To get started with Scaffold-ETH 2 Hacker Edition, follow the steps below:
- Clone this repo & install dependencies
git clone https://github.com/dynamic-labs/hackathon-starter-kit
cd hackathon-starter-kit
yarn install
- Run a local network in the first terminal:
yarn chain
This command starts a local Ethereum network using Hardhat. The network runs on your local machine and can be used for testing and development. You can customize the network configuration in hardhat.config.ts.
- On a second terminal, deploy the test contract:
yarn deploy
This command deploys a test smart contract to the local network. The contract is located in packages/hardhat/contracts and can be modified to suit your needs. The yarn deploy command uses the deploy script located in packages/hardhat/deploy to deploy the contract to the network. You can also customize the deploy script.
- On a third terminal, start your NextJS app:
yarn start
Visit your app on: http://localhost:3000. You can interact with your smart contract using the Debug Contracts page. You can tweak the app config in packages/nextjs/scaffold.config.ts.
βοΈ Built using NextJS, Dynamic, Hardhat, Wagmi, Viem, and Typescript.
- β Contract Hot Reload: Your frontend auto-adapts to your smart contract as you edit it.
- πͺ Custom hooks: Collection of React hooks wrapper around wagmi to simplify interactions with smart contracts with typescript autocompletion.
- 𧱠Components: Collection of common web3 components to quickly build your frontend.
- π₯ Burner Wallet & Local Faucet: Quickly test your application with a burner wallet and local faucet.
- π€ Dynamic onboarding: Provides an interactive and responsive widget for interacting with your embedded wallet. You can create your embedded wallet using social logins or connecting an existing wallet.
- π₯ Safe Smart Wallet: Provides the most battle-tested ERC-4337 compatible smart wallet, improving users' UX.
- π± Permissionless.js (Pimlico) for gasless transactions: Facilitates transactions without requiring users to pay gas fees. Pimlico is the world's most popular ERC-4337 account abstraction infrastructure platform.
- β Chainlink CCIP for cross-chain transactions: Enables seamless transfers across different blockchain networks.
- π Blockscout for checking transactions: Allows users to track and verify their transactions.
Out of the box with the Dynamic implementation you get:
- Base
- Arbitrum
- Polygon
- Scroll
- Zircuit
- Rootstock
- ZERΟ΄
- Morph
You can add many more via the dashboard, or using custom EVM Networks!
This means you can instantly plug in any local chain you have running, like from Arbitrum Orbit, Polygon CDK etc!
Navigate to the "Smart Wallet" section and click on "Deploy Safe Account".
This action calls the createSmartAccountClient function from Permissionless.js. More details can be found here.
The Safe address is calculated deterministically based on your Dynamic embedded wallet address.
The actual deployment of the Safe wallet occurs when you initiate your first transaction, such as a transfer.
You can perform a transfer of ERC-20 tokens in a gasless way. The app uses smartAccountClient.writeContract from Permissionless.js (source). This allows for gasless transfers, sponsored by the Pimlico Paymaster on testnets.
ERC-20 transfers are supported on any chain supported by Pimlico. Refer to the supported chains documentation here.
A custom Chainlink CCIP cross-chain transfer smart contract has been deployed, allowing for USDC (only!) transfers.
The contract has ETH on Base Sepolia to cover CCIP fees.
Contract address: 0x480A24B3F71f8704066211e61CF6CCE430B8a5c7. You can find it in the constants.ts file of the project.
Check the contract code: you can find the code in /hardhat/contracts/CCIPTransfer.sol.
Check the contract ABI: you can find the contract ABI in /nextjs/lib/ABI.
The reference of the contract is this Chainlink CCIP contract example (source).
The app uses smartAccountClient.writeContract (source) of Permissionless.js to ensure gasless cross-chain transactions.
The implementation is flexible, allowing for easy extension to support additional chains or rewriting the contract.
If your allowance is lower than the amount to transfer, you are asked to execute an approve too.
In the "Transactions" section, users can view all transactions executed by the Safe smart wallet within the session. The app integrates the Blockscout API to fetch and display transaction details, providing a transparent and user-friendly way to track activities.