Deploy your own ICTT frontend (#179)

Author: 0xstt

content/course/interchain-token-transfer/06-erc-20-to-erc-20-bridge/08-deploy-your-own-frontend.mdx

@@ -0,0 +1,178 @@
+---
+title:  Deploy Your Own ICTT Frontend
+description: Set up the BuilderKit for deploying your own Interchain Token Transfer (ICTT) frontend with custom tokens and chains.
+updated: 2024-05-31
+icon: Terminal
+authors: [0xstt]
+---
+import Link from 'next/link';
+import { cn } from '@/utils/cn';
+import { buttonVariants } from '@/components/ui/button.tsx'
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+
+In this section, you’ll learn how to deploy your own **ICTT frontend** using the BuilderKit and pre-configured tokens and chains. Follow these steps to quickly set up and test your own ICTT frontends with Avalanche L1s.
+
+---
+
+<Steps>
+
+<Step>
+### Open the AvaCloudSDK Starter Kit Github Repository
+
+Start by opening the repository on Github.
+
+<Link
+    href="https://github.com/ava-labs/avalanche-starter-kit"
+    className={cn(
+    buttonVariants({ variant: 'default', className: 'mt-4' }),
+    )}
+    target='_blank'
+>Open Avalanche Starter Kit</Link>
+</Step>
+
+<Step>
+### Open the Dev Container and Navigate to the Chain Definitions
+
+- Open the repository in a Github Codespace or Visual Studio Code.
+- Navigate to the `web-apps/builderkit/chains/definitions` folder.
+
+In this folder, you’ll find separate files for each chain configuration. For example, `echo.ts` contains the definition for the **Echo L1** chain:
+
+```ts
+import { defineChain } from "viem";
+
+export const echo = defineChain({
+    id: 173750,
+    name: 'Echo L1',
+    network: 'echo',
+    nativeCurrency: {
+        decimals: 18,
+        name: 'Ech',
+        symbol: 'ECH',
+    },
+    rpcUrls: {
+        default: {
+            http: ['https://subnets.avax.network/echo/testnet/rpc']
+        },
+    },
+    blockExplorers: {
+        default: { name: 'Explorer', url: 'https://subnets-test.avax.network/echo' },
+    },
+    iconUrl: "/chains/logo/173750.png"
+});
+```
+
+### How to Configure Your Own Blockchain
+
+To configure your custom blockchain (e.g., `myblockchain`):
+
+1. Copy the existing echo.ts file and rename it to myblockchain.ts.
+2. Update the fields to match your blockchain’s specific details, such as chain ID, network name, and native currency.
+3. Save the file in the chains/definitions folder. 
+
+</Step>
+<Step> 
+### Import Your Chains
+
+- Navigate to the `web-apps/builderkit/flows/ictt` folder.
+
+Once you're inside the **ICTT** folder, open the `page.tsx` file to begin configuring the tokens and chains.
+
+```tsx
+import { myblockchain } from './chains/definitions';
+```
+
+**Add Imported Chains to Array**
+
+After importing the chains, add them into the chains array:
+
+```tsx
+const chains = [avalanche, avalancheFuji, echo, dispatch, myblockchain];
+```
+
+This array will hold the configuration of all the chains that will interact with your ICTT frontend.
+</Step>
+<Step> 
+### Add Your Chain, and Configure Tokens
+
+Next, configure your tokens. Here’s an example token configuration:
+
+```tsx
+const tokens = [
+  {
+    address: "0x8D6f0E153B1D4Efb46c510278Db3678Bb1Cc823d",
+    name: "TOK",
+    symbol: "TOK",
+    decimals: 18,
+    chain_id: 43113,
+    supports_ictt: true,
+    transferer: "0xD63c60859e6648b20c38092cCceb92c5751E32fF",
+    mirrors: [
+      {
+        address: "0x8D6f0E153B1D4Efb46c510278Db3678Bb1Cc823d",
+        transferer: "0x8D6f0E153B1D4Efb46c510278Db3678Bb1Cc823d",
+        chain_id: 173750,
+        decimals: 18
+      }
+    ]
+  },
+  {
+    address: "0x8D6f0E153B1D4Efb46c510278Db3678Bb1Cc823d",
+    name: "TOK.e",
+    symbol: "TOK.e",
+    decimals: 18,
+    chain_id: 173750,
+    supports_ictt: true,
+    is_transferer: true,
+    mirrors: [
+      {
+        home: true,
+        address: "0x8D6f0E153B1D4Efb46c510278Db3678Bb1Cc823d",
+        transferer: "0xD63c60859e6648b20c38092cCceb92c5751E32fF",
+        chain_id: 43113,
+        decimals: 18
+      }
+    ]
+  }
+];
+```
+
+<Accordions>
+<Accordion title="What Are `is_transferer` and `home` Flags?">
+- **`is_transferer` Flag**: This flag is used to indicate if the token on the current chain is a transferer. A transferer is a contract that allows the token to be moved between chains using Interchain Token Transfers (ICTT). Set this flag to true if this token is responsible for transferring assets.
+- **`home` Flag**: The `home` flag is used to indicate that this token is the original version of the asset on the **home chain**. When a token is mirrored on multiple chains, the home chain holds the original token, while the mirrors are representations of it on other chains.
+
+These flags ensure proper handling of tokens when they are moved across chains. The `home` flag helps identify which chain holds the token, while `the is_transferer` flag specifies whether the token contract is responsible for transfers. 
+</Accordion>
+</Accordions>
+
+
+</Step>
+<Step> 
+### Implement the ICTT Component
+
+After configuring the tokens and chains, implement the **ICTT component** in the page. Here’s how to pass the token and chain details to the component:
+
+```tsx
+<ICTT tokens={tokens} token_in="0x8D6f0E153B1D4Efb46c510278Db3678Bb1Cc823d" source_chain_id={43113} destination_chain_id={173750}></ICTT>
+```
+
+In this example:
+
+- `tokens` contains the configuration.
+- `token_in` specifies the address of the token being transferred.
+- `source_chain_id` and `destination_chain_id` represent the IDs of the source and destination chains. 
+</Step>
+<Step> 
+### Run the Application
+
+Move back to the `web-apps` folder and run the following command to start the app in development mode:
+
+```bash
+yarn run dev
+```
+
+You can now interact with the ICTT component. 
+![](/course-images/interchain-token-transfer/site-running.png)
+</Step>
+</Steps>