From 0682f3e0c1e569676f183ed24a42b429c49d246f Mon Sep 17 00:00:00 2001 From: David Yu Date: Mon, 26 Jun 2023 14:11:59 -0400 Subject: [PATCH 1/4] Rename addressees constants --- src/constants/{addresses/testnet.ts => addresses.ts} | 0 src/utils/addresses.ts | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/constants/{addresses/testnet.ts => addresses.ts} (100%) diff --git a/src/constants/addresses/testnet.ts b/src/constants/addresses.ts similarity index 100% rename from src/constants/addresses/testnet.ts rename to src/constants/addresses.ts diff --git a/src/utils/addresses.ts b/src/utils/addresses.ts index a2af09a..f36a8f2 100644 --- a/src/utils/addresses.ts +++ b/src/utils/addresses.ts @@ -1,4 +1,4 @@ -import * as testnet from 'constants/addresses/testnet' +import * as testnet from 'constants/addresses' import type { SupportedChainId } from 'constants/chains' From 5f70d3bbaf74c8c77768bbd6911524357f6394e0 Mon Sep 17 00:00:00 2001 From: David Yu Date: Mon, 26 Jun 2023 14:25:48 -0400 Subject: [PATCH 2/4] Add instuctions for adding new chain --- README.md | 24 +++++++++++++++++++++++- src/constants/chains.ts | 1 + 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6fc84b5..d7149c7 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,9 @@ A sample app used to demonstrate CCTP step by step capabilities on testnet. The This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). -## Setup +# Setup + +## Install dependencies Install NVM @@ -78,3 +80,23 @@ yarn global add serve serve -s build ``` See [deployment docs](https://facebook.github.io/create-react-app/docs/deployment) for more information. + +# Instructions + +## Adding a new chain + +We have two config files which will be need to be updated to add a new chain support. + +1. ./src/constants/chains.ts In chains.ts, we need to add some enums and details for the chain to support. Add the new chain details to `Chain`, `SupportedChainId`, `SupportedChainIdHex`, `CHAIN_TO_CHAIN_ID`, `CHAIN_TO_CHAIN_NAME`, `DestinationDomain` and `CHAIN_ID_HEXES_TO_PARAMETERS`. This will automatically populate the UI dropdown with the new chain + +2. ./src/constants/addresses.ts In addresses.ts, we need to add the contract addresses for the new chain to support. For `CHAIN_IDS_TO_USDC_ADDRESSES`, `CHAIN_IDS_TO_TOKEN_MESSENGER_ADDRESSES` and `CHAIN_IDS_TO_MESSAGE_TRANSMITTER_ADDRESSES`, add the coressponding addresses for the new chain. + +## Setup Typechain + +We use Typechain in this sample app to easily integrate smart contract with generated Typescript bindings. If we want to add some functionality and update the abis, we can update the abis as necessary in ./src/abis/ and then run the following command to update the generated files. + +``` +typechain --target=ethers-v5 --out-dir src/typechain src/abis/*.json +``` + +This generates `typechain` folder under `src` containing contract types to be used by our hooks diff --git a/src/constants/chains.ts b/src/constants/chains.ts index b725421..bbdee72 100644 --- a/src/constants/chains.ts +++ b/src/constants/chains.ts @@ -18,6 +18,7 @@ export enum SupportedChainId { /** * List of all the chain/network IDs supported in hexadecimals + * TODO: Infer from SupportedChainId */ export const SupportedChainIdHex = { ETH_GOERLI: '0x5', From 486d926d49493bac36778cb6559146a57a7af076 Mon Sep 17 00:00:00 2001 From: David Yu Date: Mon, 26 Jun 2023 14:30:38 -0400 Subject: [PATCH 3/4] Format --- README.md | 18 +++++++++++++++--- src/components/Send/SendForm.tsx | 8 ++++---- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index d7149c7..1c1b293 100644 --- a/README.md +++ b/README.md @@ -87,13 +87,25 @@ See [deployment docs](https://facebook.github.io/create-react-app/docs/deploymen We have two config files which will be need to be updated to add a new chain support. -1. ./src/constants/chains.ts In chains.ts, we need to add some enums and details for the chain to support. Add the new chain details to `Chain`, `SupportedChainId`, `SupportedChainIdHex`, `CHAIN_TO_CHAIN_ID`, `CHAIN_TO_CHAIN_NAME`, `DestinationDomain` and `CHAIN_ID_HEXES_TO_PARAMETERS`. This will automatically populate the UI dropdown with the new chain +1. Add the chain enum and definitions -2. ./src/constants/addresses.ts In addresses.ts, we need to add the contract addresses for the new chain to support. For `CHAIN_IDS_TO_USDC_ADDRESSES`, `CHAIN_IDS_TO_TOKEN_MESSENGER_ADDRESSES` and `CHAIN_IDS_TO_MESSAGE_TRANSMITTER_ADDRESSES`, add the coressponding addresses for the new chain. +- In `./src/constants/chains.ts`.ts, we need to add some enums and details for the chain to support. Add the new chain details to `Chain`, `SupportedChainId`, `SupportedChainIdHex`, `CHAIN_TO_CHAIN_ID`, `CHAIN_TO_CHAIN_NAME`, `DestinationDomain` and `CHAIN_ID_HEXES_TO_PARAMETERS`. + +2. Add the addresses for the new chain + +- In `./src/constants/addresses.ts`, we need to add the contract addresses for the new chain to support. For `CHAIN_IDS_TO_USDC_ADDRESSES`, `CHAIN_IDS_TO_TOKEN_MESSENGER_ADDRESSES` and `CHAIN_IDS_TO_MESSAGE_TRANSMITTER_ADDRESSES`, add the coressponding addresses for the new chain. This will allow the hooks to interact with the relevant addresses + +3. Add the logo for the new chain + +- We will also need to upload a svg image for the UI to display the chain logo. In `./src/assets/chains/`, add a svg logo for the new chain and then in `index.ts`, add the new icon to the `CHAIN_ICONS` map. + +4. Add the new chain to the form dropdown selector + +- In `./components/Send/SendForm.tsx`, Add the new chain to `CHAIN_SELECT_ITEMS` and this should automatically update the UI dropdown. ## Setup Typechain -We use Typechain in this sample app to easily integrate smart contract with generated Typescript bindings. If we want to add some functionality and update the abis, we can update the abis as necessary in ./src/abis/ and then run the following command to update the generated files. +We use Typechain in this sample app to easily integrate smart contract with generated Typescript bindings. If we want to add some functionality and update the abis, we can update the abis as necessary in `./src/abis` and then run the following command to update the generated files. ``` typechain --target=ethers-v5 --out-dir src/typechain src/abis/*.json diff --git a/src/components/Send/SendForm.tsx b/src/components/Send/SendForm.tsx index b11bc4d..bd63aca 100644 --- a/src/components/Send/SendForm.tsx +++ b/src/components/Send/SendForm.tsx @@ -15,7 +15,7 @@ import { formatUnits } from 'ethers/lib/utils' import { CHAIN_ICONS } from 'assets/chains' import NetworkAlert from 'components/NetworkAlert/NetworkAlert' -import { Chain, CHAIN_TO_CHAIN_ID } from 'constants/chains' +import { Chain, CHAIN_TO_CHAIN_ID, CHAIN_TO_CHAIN_NAME } from 'constants/chains' import { DEFAULT_DECIMALS } from 'constants/tokens' import useTokenBalance from 'hooks/useTokenBalance' import { getUSDCContractAddress } from 'utils/addresses' @@ -32,17 +32,17 @@ interface SelectItem { const CHAIN_SELECT_ITEMS: SelectItem[] = [ { value: Chain.ETH, - label: 'Ethereum', + label: CHAIN_TO_CHAIN_NAME[Chain.ETH], icon: CHAIN_ICONS[Chain.ETH], }, { value: Chain.AVAX, - label: 'Avalanche', + label: CHAIN_TO_CHAIN_NAME[Chain.AVAX], icon: CHAIN_ICONS[Chain.AVAX], }, { value: Chain.ARB, - label: 'Arbitrum', + label: CHAIN_TO_CHAIN_NAME[Chain.ARB], icon: CHAIN_ICONS[Chain.ARB], }, ] From beee16be19b01dab8e041c4bc2a20100beba82e8 Mon Sep 17 00:00:00 2001 From: David Yu Date: Mon, 26 Jun 2023 15:04:48 -0400 Subject: [PATCH 4/4] Add docs on mainnet configuration --- README.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 1c1b293..fd9d5d8 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,7 @@ We have two config files which will be need to be updated to add a new chain sup 1. Add the chain enum and definitions -- In `./src/constants/chains.ts`.ts, we need to add some enums and details for the chain to support. Add the new chain details to `Chain`, `SupportedChainId`, `SupportedChainIdHex`, `CHAIN_TO_CHAIN_ID`, `CHAIN_TO_CHAIN_NAME`, `DestinationDomain` and `CHAIN_ID_HEXES_TO_PARAMETERS`. +- In `./src/constants/chains.ts`, we need to add some enums and details for the chain to support. Add the new chain details to `Chain`, `SupportedChainId`, `SupportedChainIdHex`, `CHAIN_TO_CHAIN_ID`, `CHAIN_TO_CHAIN_NAME`, `DestinationDomain` and `CHAIN_ID_HEXES_TO_PARAMETERS`. 2. Add the addresses for the new chain @@ -103,6 +103,22 @@ We have two config files which will be need to be updated to add a new chain sup - In `./components/Send/SendForm.tsx`, Add the new chain to `CHAIN_SELECT_ITEMS` and this should automatically update the UI dropdown. +## Configuration for Mainnet + +This sample app is development for testnet use, but if we want to update this for mainnet, these are the steps needed. + +1. Update the chain definitions to mainnet + +- In `./src/constants/chains.ts`, update the `SupportedChainId`, `SupportedChainIdHex` and `ChainParameter` objects with mainnet values. We may want to rename the enums as well. + +2. Update the addresses to mainnet + +- In `./src/constants/addresses.ts`, update the addresses with mainnet addresses. The mainnet address values can be found on https://developers.circle.com/stablecoin/docs.cctp-protocol-contract. + +3. Update the attestation API URL + +- In `./src/constants/index.ts`, update `IRIS_ATTESTATION_API_URL` with the mainnet value. The mainnet API url can be found on https://developers.circle.com/stablecoin/docs/cctp-getting-started#attestation-service-api. + ## Setup Typechain We use Typechain in this sample app to easily integrate smart contract with generated Typescript bindings. If we want to add some functionality and update the abis, we can update the abis as necessary in `./src/abis` and then run the following command to update the generated files.