Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@aelmanaa
aelmanaa committed Dec 9, 2024
1 parent 1c2c742 commit 0c98b15
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 38 deletions.
50 changes: 25 additions & 25 deletions src/components/CCIP/TutorialBlockchainSelector/DeployPoolStep.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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} />}
/>
</>
Expand Down
38 changes: 26 additions & 12 deletions src/components/CCIP/TutorialBlockchainSelector/StoredContractAddress.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
}
4 changes: 3 additions & 1 deletion src/components/CCIP/TutorialSetup/SolidityParam.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)

0 comments on commit 0c98b15

Please sign in to comment.