update

smartcontractkit · Dec 8, 2024 · 54e800b · 54e800b
1 parent c567d7c
commit 54e800b
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 20 deletions.
diff --git a/src/components/CCIP/TutorialBlockchainSelector/AdminSetupStep.module.css b/src/components/CCIP/TutorialBlockchainSelector/AdminSetupStep.module.css
@@ -84,3 +84,47 @@
 .parameters {
   margin-top: var(--space-2x);
 }
+
+.functionCall {
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  padding: var(--space-4x);
+  margin: var(--space-2x) 0;
+}
+
+.functionHeader {
+  margin-bottom: var(--space-3x);
+}
+
+.functionName {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-lg);
+  color: var(--color-text-primary);
+  background: var(--color-background);
+  padding: var(--space-1x) var(--space-2x);
+  border-radius: 4px;
+}
+
+.functionPurpose {
+  color: var(--color-text);
+  margin-top: var(--space-2x);
+  font-size: var(--font-size-base);
+}
+
+.functionRequirement {
+  color: var(--color-warning);
+  font-size: var(--font-size-sm);
+  margin-bottom: var(--space-3x);
+}
+
+.parametersSection {
+  border-top: 1px solid var(--color-border);
+  padding-top: var(--space-3x);
+}
+
+.parametersTitle {
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-2x);
+}
diff --git a/src/components/CCIP/TutorialBlockchainSelector/AdminSetupStep.tsx b/src/components/CCIP/TutorialBlockchainSelector/AdminSetupStep.tsx
@@ -40,16 +40,27 @@ export const AdminSetupStep = ({ chain }: AdminSetupStepProps) => {
             <li>Click on the RegistryModuleOwnerCustom contract address to open the contract details</li>
             <li>
               Call <code>registerAdminViaOwner</code>:
-              <div className={styles.functionDescription}>
-                Register yourself as the CCIP administrator for your token. You must be the token owner.
-              </div>
-              <div className={styles.parameters}>
-                <SolidityParam
-                  name="token"
-                  type="address"
-                  description="The token contract you want to administer"
-                  example={state.sourceContracts.token || "Your deployed token address"}
-                />
+              <div className={styles.functionCall}>
+                <div className={styles.functionHeader}>
+                  <code className={styles.functionName}>registerAdminViaOwner</code>
+                  <div className={styles.functionPurpose}>
+                    Register yourself as the CCIP administrator for your token
+                  </div>
+                </div>
+
+                <div className={styles.functionRequirement}>⚠️ You must be the token owner to call this function</div>
+
+                <div className={styles.parametersSection}>
+                  <div className={styles.parametersTitle}>Parameters:</div>
+                  <div className={styles.parametersList}>
+                    <SolidityParam
+                      name="token"
+                      type="address"
+                      description="The token contract you want to administer"
+                      example={state.sourceContracts.token || "Your deployed token address"}
+                    />
+                  </div>
+                </div>
               </div>
             </li>
             <li>Confirm the transaction in MetaMask</li>
@@ -72,16 +83,27 @@ export const AdminSetupStep = ({ chain }: AdminSetupStepProps) => {
             <li>Click on the TokenAdminRegistry contract address to open the contract details</li>
             <li>
               Call <code>acceptAdminRole</code>:
-              <div className={styles.functionDescription}>
-                Accept the pending administrator role for your token. Must be called after registerAdminViaOwner.
-              </div>
-              <div className={styles.parameters}>
-                <SolidityParam
-                  name="token"
-                  type="address"
-                  description="The token contract to accept administrator role for"
-                  example={state.sourceContracts.token || "Your deployed token address"}
-                />
+              <div className={styles.functionCall}>
+                <div className={styles.functionHeader}>
+                  <code className={styles.functionName}>acceptAdminRole</code>
+                  <div className={styles.functionPurpose}>Accept your role as CCIP administrator for your token</div>
+                </div>
+
+                <div className={styles.functionRequirement}>
+                  ⚠️ Must be called after registerAdminViaOwner is confirmed
+                </div>
+
+                <div className={styles.parametersSection}>
+                  <div className={styles.parametersTitle}>Parameters:</div>
+                  <div className={styles.parametersList}>
+                    <SolidityParam
+                      name="token"
+                      type="address"
+                      description="The token contract to accept administrator role for"
+                      example={state.sourceContracts.token || "Your deployed token address"}
+                    />
+                  </div>
+                </div>
               </div>
             </li>
             <li>Confirm the transaction in MetaMask</li>