|
| 1 | +import { useStore } from "@nanostores/react" |
| 2 | +import { laneStore } from "@stores/lanes" |
| 3 | +import { NetworkCheck } from "../TutorialSetup/NetworkCheck" |
| 4 | +import { TutorialCard } from "../TutorialSetup/TutorialCard" |
| 5 | +import { TutorialStep } from "../TutorialSetup/TutorialStep" |
| 6 | +import { NetworkAddress } from "./NetworkAddress" |
| 7 | +import { StepCheckbox } from "../TutorialProgress/StepCheckbox" |
| 8 | +import { SolidityParam } from "../TutorialSetup/SolidityParam" |
| 9 | +import { Callout } from "../TutorialSetup/Callout" |
| 10 | +import styles from "./AdminSetupStep.module.css" |
| 11 | + |
| 12 | +interface AdminSetupStepProps { |
| 13 | + chain: "source" | "destination" |
| 14 | +} |
| 15 | + |
| 16 | +export const AdminSetupStep = ({ chain }: AdminSetupStepProps) => { |
| 17 | + const state = useStore(laneStore) |
| 18 | + const network = chain === "source" ? state.sourceNetwork : state.destinationNetwork |
| 19 | + const networkInfo = network ? { name: network.name, logo: network.logo } : { name: "loading..." } |
| 20 | + const stepId = chain === "source" ? "sourceChain" : "destinationChain" |
| 21 | + const tokenAddress = chain === "source" ? state.sourceContracts.token : state.destinationContracts.token |
| 22 | + |
| 23 | + const getSubStepId = (subStepId: string) => `${stepId}-${subStepId}` |
| 24 | + |
| 25 | + const content = ( |
| 26 | + <> |
| 27 | + <NetworkCheck network={networkInfo} /> |
| 28 | + |
| 29 | + <ol className={styles.steps}> |
| 30 | + <TutorialStep |
| 31 | + id={getSubStepId("admin-claimed")} |
| 32 | + title="Register as Admin" |
| 33 | + checkbox={<StepCheckbox stepId={stepId} subStepId="admin-claimed" />} |
| 34 | + > |
| 35 | + <Callout type="note" title="Admin Registration Options"> |
| 36 | + The Cross-Chain Token (CCT) standard supports multiple methods for registering as a token administrator. We |
| 37 | + use <code>registerAdminViaOwner()</code> in this tutorial because our deployed BurnMintERC677 token |
| 38 | + implements the <code>owner()</code> function. For other token implementations, you might use different |
| 39 | + registration methods. See the{" "} |
| 40 | + <a href="/ccip/concepts/cross-chain-tokens#self-service-registration-flow"> |
| 41 | + self-service registration documentation |
| 42 | + </a>{" "} |
| 43 | + for all available options. |
| 44 | + </Callout> |
| 45 | + |
| 46 | + <ol className={styles.instructions}> |
| 47 | + <li> |
| 48 | + In the "Deploy & Run Transactions" tab, select the <strong>RegistryModuleOwnerCustom</strong> contract |
| 49 | + </li> |
| 50 | + <li> |
| 51 | + Click "At Address" with: |
| 52 | + <div className={styles.contractInfo}> |
| 53 | + <strong>Contract:</strong> RegistryModuleOwnerCustom |
| 54 | + <NetworkAddress type="registryModule" chain={chain} /> |
| 55 | + </div> |
| 56 | + </li> |
| 57 | + <li>The RegistryModuleOwnerCustom will be displayed in the "Deployed Contracts" section</li> |
| 58 | + <li>Click on the RegistryModuleOwnerCustom contract address to open the contract details</li> |
| 59 | + <li> |
| 60 | + Call <code>registerAdminViaOwner</code>: |
| 61 | + <div className={styles.functionCall}> |
| 62 | + <div className={styles.functionHeader}> |
| 63 | + <code className={styles.functionName}>registerAdminViaOwner</code> |
| 64 | + <div className={styles.functionPurpose}> |
| 65 | + Register yourself as the CCIP administrator for your token |
| 66 | + </div> |
| 67 | + </div> |
| 68 | + |
| 69 | + <div className={styles.functionRequirement}>⚠️ You must be the token owner to call this function</div> |
| 70 | + |
| 71 | + <div className={styles.parametersSection}> |
| 72 | + <div className={styles.parametersTitle}>Parameters:</div> |
| 73 | + <div className={styles.parametersList}> |
| 74 | + <SolidityParam |
| 75 | + name="token" |
| 76 | + type="address" |
| 77 | + description="The token contract you want to administer" |
| 78 | + example={tokenAddress || "Your deployed token address"} |
| 79 | + /> |
| 80 | + </div> |
| 81 | + </div> |
| 82 | + </div> |
| 83 | + </li> |
| 84 | + <li>Confirm the transaction in MetaMask</li> |
| 85 | + </ol> |
| 86 | + </TutorialStep> |
| 87 | + |
| 88 | + <TutorialStep |
| 89 | + id={getSubStepId("admin-accepted")} |
| 90 | + title="Accept Admin Role" |
| 91 | + checkbox={<StepCheckbox stepId={stepId} subStepId="admin-accepted" />} |
| 92 | + > |
| 93 | + <ol className={styles.instructions}> |
| 94 | + <li> |
| 95 | + In the "Deploy & Run Transactions" tab, select <strong>TokenAdminRegistry</strong> contract |
| 96 | + </li> |
| 97 | + <li> |
| 98 | + Click "At Address" with: |
| 99 | + <div className={styles.contractInfo}> |
| 100 | + <strong>Contract:</strong> TokenAdminRegistry |
| 101 | + <NetworkAddress type="tokenAdminRegistry" chain={chain} /> |
| 102 | + </div> |
| 103 | + </li> |
| 104 | + <li>The TokenAdminRegistry will be displayed in the "Deployed Contracts" section</li> |
| 105 | + <li>Click on the TokenAdminRegistry contract address to open the contract details</li> |
| 106 | + <li> |
| 107 | + Call <code>acceptAdminRole</code>: |
| 108 | + <div className={styles.functionCall}> |
| 109 | + <div className={styles.functionHeader}> |
| 110 | + <code className={styles.functionName}>acceptAdminRole</code> |
| 111 | + <div className={styles.functionPurpose}>Accept your role as CCIP administrator for your token</div> |
| 112 | + </div> |
| 113 | + |
| 114 | + <div className={styles.functionRequirement}> |
| 115 | + ⚠️ Must be called after registerAdminViaOwner is confirmed |
| 116 | + </div> |
| 117 | + |
| 118 | + <div className={styles.parametersSection}> |
| 119 | + <div className={styles.parametersTitle}>Parameters:</div> |
| 120 | + <div className={styles.parametersList}> |
| 121 | + <SolidityParam |
| 122 | + name="token" |
| 123 | + type="address" |
| 124 | + description="The token contract to accept administrator role for" |
| 125 | + example={tokenAddress || "Your deployed token address"} |
| 126 | + /> |
| 127 | + </div> |
| 128 | + </div> |
| 129 | + </div> |
| 130 | + </li> |
| 131 | + <li>Confirm the transaction in MetaMask</li> |
| 132 | + </ol> |
| 133 | + </TutorialStep> |
| 134 | + </ol> |
| 135 | + </> |
| 136 | + ) |
| 137 | + |
| 138 | + return ( |
| 139 | + <TutorialCard |
| 140 | + title="Claim and Accept Admin Role" |
| 141 | + description="Configure your EOA as CCIP administrator of your token" |
| 142 | + > |
| 143 | + {content} |
| 144 | + </TutorialCard> |
| 145 | + ) |
| 146 | +} |
0 commit comments