From 0c98b155620c8805176eeff98c17638d45945f28 Mon Sep 17 00:00:00 2001
From: aelmanaa <aelmanaa@gmail.com>
Date: Mon, 9 Dec 2024 10:54:38 +0100
Subject: [PATCH] update

---
 .../DeployPoolStep.tsx                        | 50 +++++++++----------
 .../StoredContractAddress.tsx                 | 38 +++++++++-----
 .../CCIP/TutorialSetup/SolidityParam.tsx      |  4 +-
 3 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/src/components/CCIP/TutorialBlockchainSelector/DeployPoolStep.tsx b/src/components/CCIP/TutorialBlockchainSelector/DeployPoolStep.tsx
index 68cf8d0866c..a956f5ba2f7 100644
--- a/src/components/CCIP/TutorialBlockchainSelector/DeployPoolStep.tsx
+++ b/src/components/CCIP/TutorialBlockchainSelector/DeployPoolStep.tsx
@@ -32,38 +32,38 @@ export const DeployPoolStep = ({ chain }: DeployPoolStepProps) => {
 
           <div className={styles.poolOptions}>
             <button
-              className={`${styles.poolOption} ${poolType === "lock" ? styles.selected : ""}`}
-              onClick={() => setPoolType("lock")}
+              className={`${styles.poolOption} ${poolType === "burn" ? styles.selected : ""}`}
+              onClick={() => setPoolType("burn")}
             >
               <div className={styles.poolTitle}>
-                <span className={styles.poolName}>Lock & Release Pool</span>
-                {poolType === "lock" && <span className={styles.selectedIndicator} />}
+                <span className={styles.poolName}>Burn & Mint Pool</span>
+                {poolType === "burn" && <span className={styles.selectedIndicator} />}
               </div>
               <div className={styles.poolContent}>
                 <p className={styles.poolDescription}>
-                  Suitable for tokens that already exist on this blockchain and can't be burned. Tokens are locked here
-                  and "wrapped" versions are minted on other chains.
+                  Standard mechanism for cross-chain transfers. Tokens are burned on one chain and minted on another,
+                  maintaining constant total supply.
                 </p>
-                <div className={styles.poolNote}>
-                  ℹ️ Deploy this on the blockchain where your token originally exists
-                </div>
+                <div className={styles.poolNote}>ℹ️ Use this for new tokens or tokens with burn/mint capability</div>
               </div>
             </button>
 
             <button
-              className={`${styles.poolOption} ${poolType === "burn" ? styles.selected : ""}`}
-              onClick={() => setPoolType("burn")}
+              className={`${styles.poolOption} ${poolType === "lock" ? styles.selected : ""}`}
+              onClick={() => setPoolType("lock")}
             >
               <div className={styles.poolTitle}>
-                <span className={styles.poolName}>Burn & Mint Pool</span>
-                {poolType === "burn" && <span className={styles.selectedIndicator} />}
+                <span className={styles.poolName}>Lock & Release Pool</span>
+                {poolType === "lock" && <span className={styles.selectedIndicator} />}
               </div>
               <div className={styles.poolContent}>
                 <p className={styles.poolDescription}>
-                  Standard mechanism for cross-chain transfers. Tokens are burned on one chain and minted on another,
-                  maintaining constant total supply.
+                  Suitable for tokens that already exist on this blockchain and can't be burned. Tokens are locked here
+                  and "wrapped" versions are minted on other chains.
                 </p>
-                <div className={styles.poolNote}>ℹ️ Use this for new tokens or tokens with burn/mint capability</div>
+                <div className={styles.poolNote}>
+                  ℹ️ Deploy this on the blockchain where your token originally exists
+                </div>
               </div>
             </button>
           </div>
@@ -77,9 +77,9 @@ export const DeployPoolStep = ({ chain }: DeployPoolStepProps) => {
             {poolType === "lock" ? (
               <>
                 <SolidityParam
-                  name="tokenAddress"
+                  name="token"
                   type="address"
-                  description="The token contract this pool will manage"
+                  description="Address of the token to be released/locked"
                   example={<StoredContractAddress type="token" chain={chain} />}
                 />
                 <SolidityParam
@@ -95,9 +95,9 @@ export const DeployPoolStep = ({ chain }: DeployPoolStepProps) => {
                   example="[]"
                 />
                 <SolidityParam
-                  name="rmnProxyAddress"
+                  name="rmnProxy"
                   type="address"
-                  description="ARM Proxy contract"
+                  description="Address of the RMN contract"
                   example={<NetworkAddress type="armProxy" chain={chain} />}
                 />
                 <SolidityParam
@@ -109,16 +109,16 @@ export const DeployPoolStep = ({ chain }: DeployPoolStepProps) => {
                 <SolidityParam
                   name="router"
                   type="address"
-                  description="CCIP Router contract"
+                  description="Address of the CCIP Router contract"
                   example={<NetworkAddress type="router" chain={chain} />}
                 />
               </>
             ) : (
               <>
                 <SolidityParam
-                  name="tokenAddress"
+                  name="token"
                   type="address"
-                  description="The token contract this pool will manage"
+                  description="Address of the token to be minted/burned"
                   example={<StoredContractAddress type="token" chain={chain} />}
                 />
                 <SolidityParam
@@ -136,13 +136,13 @@ export const DeployPoolStep = ({ chain }: DeployPoolStepProps) => {
                 <SolidityParam
                   name="rmnProxy"
                   type="address"
-                  description="ARM Proxy contract"
+                  description="Address of the RMN contract"
                   example={<NetworkAddress type="armProxy" chain={chain} />}
                 />
                 <SolidityParam
                   name="router"
                   type="address"
-                  description="CCIP Router contract"
+                  description="Address of the CCIP Router contract"
                   example={<NetworkAddress type="router" chain={chain} />}
                 />
               </>
diff --git a/src/components/CCIP/TutorialBlockchainSelector/StoredContractAddress.tsx b/src/components/CCIP/TutorialBlockchainSelector/StoredContractAddress.tsx
index 392e9b51a0e..b16a18b19ef 100644
--- a/src/components/CCIP/TutorialBlockchainSelector/StoredContractAddress.tsx
+++ b/src/components/CCIP/TutorialBlockchainSelector/StoredContractAddress.tsx
@@ -2,27 +2,41 @@ import { useStore } from "@nanostores/react"
 import { laneStore } from "@stores/lanes"
 import type { DeployedContracts } from "@stores/lanes"
 import { ReactCopyText } from "@components/ReactCopyText"
-import { ethers } from "ethers"
+import { utils } from "ethers"
+
+type AddressFields = Extract<keyof DeployedContracts, "token" | "tokenPool" | "tokenPools">
 
 interface StoredContractAddressProps {
-  type: keyof DeployedContracts
+  type: AddressFields
   chain: "source" | "destination"
-  required?: boolean
+  code?: boolean
   encode?: boolean
 }
 
-export const StoredContractAddress = ({ type, chain, required = true, encode = false }: StoredContractAddressProps) => {
+export const StoredContractAddress = ({ type, chain, code = true, encode = false }: StoredContractAddressProps) => {
   const state = useStore(laneStore)
   const contracts = chain === "source" ? state.sourceContracts : state.destinationContracts
-  const address = contracts[type]
+  const value = contracts[type]
+
+  // Format and encode addresses
+  const displayAddress = (() => {
+    if (!value) return ""
+
+    if (Array.isArray(value)) {
+      const validAddresses = value.filter((addr): addr is string => typeof addr === "string" && utils.isAddress(addr))
+      if (!validAddresses.length) return ""
+
+      return encode
+        ? validAddresses.map((addr) => utils.defaultAbiCoder.encode(["address"], [addr])).join(", ")
+        : validAddresses.join(", ")
+    }
 
-  if (!address) {
-    return required ? <code>[No address saved yet]</code> : null
-  }
+    if (typeof value === "string" && value) {
+      return encode ? utils.defaultAbiCoder.encode(["address"], [utils.getAddress(value)]) : utils.getAddress(value)
+    }
 
-  const displayAddress = encode
-    ? ethers.utils.defaultAbiCoder.encode(["address"], [address]).toString()
-    : address.toString()
+    return ""
+  })()
 
-  return <ReactCopyText text={displayAddress} code={true} />
+  return <ReactCopyText text={displayAddress} code={code} />
 }
diff --git a/src/components/CCIP/TutorialSetup/SolidityParam.tsx b/src/components/CCIP/TutorialSetup/SolidityParam.tsx
index e166a5d0da9..b17105c56e4 100644
--- a/src/components/CCIP/TutorialSetup/SolidityParam.tsx
+++ b/src/components/CCIP/TutorialSetup/SolidityParam.tsx
@@ -14,7 +14,9 @@ export const SolidityParam = ({ name, type, description, example }: SolidityPara
     <code className={styles.type}>{type}</code>
     <div className={styles.info}>
       <p className={styles.description}>{description}</p>
-      {example && <ReactCopyText text={example} code />}
+      {
+        example && (typeof example === "string" ? <ReactCopyText text={example} code /> : example) // Render React element directly
+      }
     </div>
   </div>
 )