Ccip/1.5.1 remix 2

src/components/CCIP/TutorialBlockchainSelector/AdminSetupStep.module.css

@@ -0,0 +1,130 @@
+.steps {
+  padding-left: var(--space-4x);
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4x);
+}
+
+.instructions {
+  padding-left: var(--space-6x);
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3x);
+}
+
+.contractInfo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3x);
+  padding: var(--space-3x);
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  margin-bottom: var(--space-3x);
+}
+
+.contractInfo strong {
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.actionDetails {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2x);
+}
+
+.actionTitle {
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.actionTitle code {
+  font-family: var(--font-mono);
+  color: var(--color-text-primary);
+  background: var(--color-background);
+  padding: var(--space-1x) var(--space-2x);
+  border-radius: 4px;
+  font-size: var(--font-size-sm);
+}
+
+.parameter {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: var(--space-3x);
+  align-items: center;
+  padding: var(--space-2x) var(--space-3x);
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+}
+
+.paramName {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .parameter {
+    grid-template-columns: 1fr;
+    gap: var(--space-2x);
+  }
+}
+
+.functionDescription {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  margin: var(--space-2x) 0;
+}
+
+.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);
+}

src/components/CCIP/TutorialBlockchainSelector/AdminSetupStep.tsx

@@ -0,0 +1,134 @@
+import { useStore } from "@nanostores/react"
+import { laneStore } from "@stores/lanes"
+import { NetworkCheck } from "../TutorialSetup/NetworkCheck"
+import { TutorialCard } from "../TutorialSetup/TutorialCard"
+import { TutorialStep } from "../TutorialSetup/TutorialStep"
+import { NetworkAddress } from "./NetworkAddress"
+import { StepCheckbox } from "../TutorialProgress/StepCheckbox"
+import { SolidityParam } from "../TutorialSetup/SolidityParam"
+import styles from "./AdminSetupStep.module.css"
+
+interface AdminSetupStepProps {
+  chain: "source" | "destination"
+}
+
+export const AdminSetupStep = ({ chain }: AdminSetupStepProps) => {
+  const state = useStore(laneStore)
+  const network = chain === "source" ? state.sourceNetwork : state.destinationNetwork
+  const networkInfo = network ? { name: network.name, logo: network.logo } : { name: "loading..." }
+  const stepId = chain === "source" ? "sourceChain" : "destinationChain"
+  const tokenAddress = chain === "source" ? state.sourceContracts.token : state.destinationContracts.token
+
+  const getSubStepId = (subStepId: string) => `${stepId}-${subStepId}`
+
+  const content = (
+    <>
+      <NetworkCheck network={networkInfo} />
+
+      <ol className={styles.steps}>
+        <TutorialStep
+          id={getSubStepId("admin-claimed")}
+          title="Register as Admin"
+          checkbox={<StepCheckbox stepId={stepId} subStepId="admin-claimed" />}
+        >
+          <ol className={styles.instructions}>
+            <li>
+              In the "Deploy & Run Transactions" tab, select <strong>RegistryModuleOwnerCustom</strong> contract
+            </li>
+            <li>
+              Click "At Address" with:
+              <div className={styles.contractInfo}>
+                <strong>Contract:</strong> RegistryModuleOwnerCustom
+                <NetworkAddress type="registryModule" chain={chain} />
+              </div>
+            </li>
+            <li>The RegistryModuleOwnerCustom will be displayed in the "Deployed Contracts" section</li>
+            <li>Click on the RegistryModuleOwnerCustom contract address to open the contract details</li>
+            <li>
+              Call <code>registerAdminViaOwner</code>:
+              <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={tokenAddress || "Your deployed token address"}
+                    />
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li>Confirm the transaction in MetaMask</li>
+          </ol>
+        </TutorialStep>
+
+        <TutorialStep
+          id={getSubStepId("admin-accepted")}
+          title="Accept Admin Role"
+          checkbox={<StepCheckbox stepId={stepId} subStepId="admin-accepted" />}
+        >
+          <ol className={styles.instructions}>
+            <li>
+              In the "Deploy & Run Transactions" tab, select <strong>TokenAdminRegistry</strong> contract
+            </li>
+            <li>
+              Click "At Address" with:
+              <div className={styles.contractInfo}>
+                <strong>Contract:</strong> TokenAdminRegistry
+                <NetworkAddress type="tokenAdminRegistry" chain={chain} />
+              </div>
+            </li>
+            <li>The TokenAdminRegistry will be displayed in the "Deployed Contracts" section</li>
+            <li>Click on the TokenAdminRegistry contract address to open the contract details</li>
+            <li>
+              Call <code>acceptAdminRole</code>:
+              <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={tokenAddress || "Your deployed token address"}
+                    />
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li>Confirm the transaction in MetaMask</li>
+          </ol>
+        </TutorialStep>
+      </ol>
+    </>
+  )
+
+  return (
+    <TutorialCard
+      title="Claim and Accept Admin Role"
+      description="Configure your EOA as CCIP administrator of your token"
+    >
+      {content}
+    </TutorialCard>
+  )
+}