[STABLE-3917] Add instruction docs to README

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,51 @@ 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. Add the chain enum and definitions
+
+- 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
+
+- 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.
+
+## 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.
+
+```
+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

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],
   },
 ]

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',

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'