From ccd5322899025b88669589dfec0daae58961dbef Mon Sep 17 00:00:00 2001
From: aelmanaa <aelmanaa@gmail.com>
Date: Mon, 9 Dec 2024 15:01:19 +0100
Subject: [PATCH] update

---
 .../ChainUpdateBuilder.module.css             | 182 ++++++++++++------
 .../ChainUpdateBuilder.tsx                    |   8 +-
 .../ChainUpdateBuilderWrapper.module.css      | 139 ++++++++++++-
 .../ChainUpdateBuilderWrapper.tsx             | 135 +++++++------
 .../register-from-eoa-remix.mdx               |   2 -
 5 files changed, 326 insertions(+), 140 deletions(-)

diff --git a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css
index af459fcb32c..94b568b438f 100644
--- a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css
+++ b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css
@@ -1,73 +1,77 @@
+/* Base Container */
 .builder {
-  margin-top: var(--space-3x);
-  padding: var(--space-4x);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3x);
   background: var(--color-background);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
+  width: 100%;
+  padding: var(--space-3x);
 }
 
 .configSection {
   display: flex;
   flex-direction: column;
-  gap: var(--space-4x);
+  gap: var(--space-3x);
+  width: 100%;
 }
 
-/* Remote Configuration */
-.remoteConfig {
-  padding: var(--space-3x);
-  background: var(--color-background-secondary);
+/* Container Styles - Use CSS Grid for better responsiveness */
+.remoteConfig,
+.rateLimits {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3x);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
+  background: var(--color-background-secondary);
 }
 
+/* Grid Layouts - More flexible approach */
 .field {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-3x);
-  margin-bottom: var(--space-2x);
-}
-
-.field:last-child {
-  margin-bottom: 0;
-}
-
-.field label {
-  color: var(--color-text-secondary);
-  min-width: 120px;
+  min-width: 0;
+  width: 100%;
 }
 
-.field code {
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-primary);
+/* Input Elements */
+.input input,
+.rateLimiter {
   background: var(--color-background);
-  padding: var(--space-1x) var(--space-2x);
-  border-radius: var(--border-radius-sm);
-}
-
-/* Rate Limits */
-.rateLimits {
-  padding: var(--space-3x);
-  background: var(--color-background-secondary);
+  padding: var(--space-2x) var(--space-3x);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
 }
 
-.configTitle {
+.input input {
+  font-family: var(--font-mono);
   font-size: var(--font-size-base);
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin-bottom: var(--space-3x);
+  display: block;
+  width: 100%;
 }
 
+/* Section Spacing */
+.rateLimits,
+.parameterDetails,
+.copyBlock {
+  margin-top: 0;
+}
+
+/* Rate Limiter Layout - More adaptive */
 .rateLimiterGroup {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: var(--space-3x);
 }
 
 .rateLimiter {
-  padding: var(--space-3x);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3x);
   background: var(--color-background);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
@@ -77,56 +81,108 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: var(--space-3x);
+  gap: var(--space-2x);
 }
 
-.rateLimiterHeader h5 {
+.rateLimiterHeader h5,
+.rateLimiterHeader span {
   font-size: var(--font-size-base);
-  font-weight: 600;
-  color: var(--color-text-primary);
+  font-weight: normal;
+  color: var(--color-text);
   margin: 0;
+  white-space: nowrap;
 }
 
-.toggle {
+.rateLimiterInputs {
   display: flex;
+  flex-direction: column;
+  gap: var(--space-3x);
+}
+
+/* Interactive Elements */
+.toggle {
+  display: inline-flex;
   align-items: center;
   gap: var(--space-2x);
-  cursor: pointer;
+  white-space: nowrap;
 }
 
-.rateLimiterInputs {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3x);
+/* Parameter Description */
+.parameterDetails {
+  border-left: 3px solid var(--color-accent);
+  padding-left: var(--space-3x);
+  margin: var(--space-2x) 0;
+  color: var(--color-text-secondary);
 }
 
-.input {
+/* Notice - Use semantic colors */
+.notice {
   display: flex;
-  flex-direction: column;
-  gap: var(--space-1x);
+  align-items: center;
+  gap: var(--space-2x);
+  background: var(--color-warning-background);
+  border: 1px solid var(--color-warning-border);
+  border-radius: var(--border-radius);
+  color: var(--color-warning);
 }
 
-.input label {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
+/* Responsive Design */
+@media (max-width: 768px) {
+  .field {
+    grid-template-columns: 1fr;
+  }
+
+  .rateLimiterHeader {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
 
-.input input {
-  padding: var(--space-2x);
+/* Keep consistent with SetPoolStep.module.css */
+.functionCall {
+  background: var(--color-background-secondary);
   border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-sm);
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
+  border-radius: var(--border-radius);
+  padding: var(--space-4x);
+  margin: var(--space-2x) 0;
 }
 
-.notice {
-  margin-top: var(--space-3x);
+/* Use the same copyBlock style as SetPoolStep */
+.copyBlock {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3x);
   padding: var(--space-3x);
-  background: var(--color-warning-background);
-  border: 1px solid var(--color-warning-border);
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
-  color: var(--color-warning);
+  margin-top: var(--space-3x);
+}
+
+.copyInstructions {
+  white-space: nowrap;
+  color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
 }
 
-/* ... more styles matching tutorial theme ... */
+/* Container Styles */
+.remoteConfig {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3x);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  background: var(--color-background-secondary);
+  padding: var(--space-3x);
+  width: 100%;
+  max-width: none;
+}
+
+/* Ensure code blocks don't overflow */
+.field code {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  min-width: 0;
+  max-width: 100%;
+}
diff --git a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx
index f5d053ed82f..76cfbcb855a 100644
--- a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx
+++ b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx
@@ -175,7 +175,7 @@ export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate
         <div className={styles.configSection}>
           {/* Remote Configuration Section */}
           <div className={styles.remoteConfig}>
-            <h4 className={styles.configTitle}>Remote Configuration</h4>
+            <span className={styles.sectionLabel}>Remote Configuration</span>
             <div className={styles.field}>
               <label>Chain Selector:</label>
               <code>{readOnly.chainSelector}</code>
@@ -192,13 +192,13 @@ export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate
 
           {/* Rate Limits Section */}
           <div className={styles.rateLimits}>
-            <h4 className={styles.configTitle}>Rate Limit Configuration</h4>
+            <span className={styles.sectionLabel}>Rate Limit Configuration</span>
 
             <div className={styles.rateLimiterGroup}>
               {/* Outbound Configuration */}
               <div className={styles.rateLimiter}>
                 <div className={styles.rateLimiterHeader}>
-                  <h5>Outbound Transfers</h5>
+                  <span>Outbound Transfers</span>
                   <label className={styles.toggle}>
                     <input
                       type="checkbox"
@@ -238,7 +238,7 @@ export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate
               {/* Inbound Configuration */}
               <div className={styles.rateLimiter}>
                 <div className={styles.rateLimiterHeader}>
-                  <h5>Inbound Transfers</h5>
+                  <span className={styles.sectionLabel}>Inbound Transfers</span>
                   <label className={styles.toggle}>
                     <input
                       type="checkbox"
diff --git a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilderWrapper.module.css b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilderWrapper.module.css
index fd2fe8e1def..6380c0a19ff 100644
--- a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilderWrapper.module.css
+++ b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilderWrapper.module.css
@@ -399,17 +399,48 @@
 
 /* Copy Block Styling */
 .copyBlock {
-  background: var(--color-background-secondary);
-  border-radius: 8px;
-  padding: 16px;
-  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2x);
+  width: 100%;
+  margin-top: var(--space-3x);
 }
 
 .copyInstructions {
-  font-family: var(--font-family-base);
-  font-size: 14px;
   color: var(--color-text-secondary);
-  margin-bottom: 12px;
+  font-size: var(--font-size-sm);
+}
+
+/* Add proper container for the copy section */
+.copyContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2x);
+  padding: var(--space-3x);
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  width: 100%;
+  min-width: 0;
+}
+
+/* Ensure code blocks wrap properly */
+.copyContainer code {
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Update responsive behavior */
+@media (min-width: 768px) {
+  .copyBlock {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .copyContainer {
+    flex: 1;
+  }
 }
 
 /* Typography Consistency */
@@ -511,3 +542,97 @@
   flex-direction: column;
   gap: var(--space-3x);
 }
+
+.functionTitle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3x);
+}
+
+@media (max-width: 1200px) {
+  .chainInfo {
+    gap: var(--space-2x);
+  }
+}
+
+@media (max-width: 768px) {
+  .chainInfo {
+    grid-template-columns: 1fr;
+  }
+
+  .verificationCard {
+    padding: var(--space-3x);
+  }
+
+  .functionCall {
+    padding: var(--space-3x);
+  }
+
+  .parametersList {
+    gap: var(--space-3x);
+  }
+}
+
+@media (max-width: 480px) {
+  .chainDetails {
+    padding: var(--space-2x);
+  }
+
+  .chainValue {
+    font-size: var(--font-size-sm);
+  }
+
+  .functionName {
+    font-size: var(--font-size-base);
+  }
+
+  .functionTitle {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2x);
+  }
+}
+
+.configurationTool {
+  margin-top: var(--space-4x);
+  border-top: 1px solid var(--color-border);
+  padding-top: var(--space-4x);
+  width: 100%;
+}
+
+.configTitle {
+  font-size: var(--font-size-lg);
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-3x);
+}
+
+.resultSection {
+  margin-top: var(--space-4x);
+  width: 100%;
+}
+
+.copyBlock {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3x);
+  width: 100%;
+}
+
+.copyContainer {
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  padding: var(--space-3x);
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .copyBlock {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .copyContainer {
+    flex: 1;
+  }
+}
diff --git a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilderWrapper.tsx b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilderWrapper.tsx
index bdc018b514e..9893870856f 100644
--- a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilderWrapper.tsx
+++ b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilderWrapper.tsx
@@ -7,6 +7,7 @@ import { ReactCopyText } from "@components/ReactCopyText"
 import { useState, useEffect } from "react"
 import type { Network } from "@config/data/ccip/types"
 import { TutorialCard, SolidityParam, NetworkCheck } from "../TutorialSetup"
+import { StepCheckbox } from "../TutorialProgress/StepCheckbox"
 
 interface ChainUpdateBuilderWrapperProps {
   chain: "source" | "destination"
@@ -78,6 +79,42 @@ export const ChainUpdateBuilderWrapper = ({ chain }: ChainUpdateBuilderWrapperPr
     )
   }
 
+  const handleCalculate = (input: ChainUpdateInput) => {
+    const update = {
+      remoteChainSelector: input.remoteChainSelector,
+      remotePoolAddresses: [input.poolAddress].map((addr) => ethers.utils.defaultAbiCoder.encode(["address"], [addr])),
+      remoteTokenAddress: ethers.utils.defaultAbiCoder.encode(["address"], [input.tokenAddress]),
+      outboundRateLimiterConfig: {
+        enabled: input.outbound.enabled,
+        capacity: input.outbound.capacity,
+        rate: input.outbound.rate,
+      },
+      inboundRateLimiterConfig: {
+        enabled: input.inbound.enabled,
+        capacity: input.inbound.capacity,
+        rate: input.inbound.rate,
+      },
+    }
+
+    const generatedCallData = generateCallData({
+      ...update,
+      remoteChainSelector: BigInt(input.remoteChainSelector),
+    })
+
+    const formatted = JSON.stringify(
+      {
+        json: [update],
+        callData: generatedCallData,
+      },
+      null,
+      2
+    )
+
+    setCallData(generatedCallData)
+    setFormattedUpdate(formatted)
+    return formatted
+  }
+
   useEffect(() => {
     if (showCopyFeedback) {
       const timer = setTimeout(() => setShowCopyFeedback(false), 2000)
@@ -141,7 +178,10 @@ export const ChainUpdateBuilderWrapper = ({ chain }: ChainUpdateBuilderWrapperPr
 
         <div className={styles.functionCall}>
           <div className={styles.functionHeader}>
-            <code className={styles.functionName}>applyChainUpdates</code>
+            <div className={styles.functionTitle}>
+              <code className={styles.functionName}>applyChainUpdates</code>
+              <StepCheckbox stepId={`${chain}Config`} subStepId={`${chain}-pool-config`} />
+            </div>
             <div className={styles.functionPurpose}>
               Sets the permissions for cross-chain communication and configures rate limits
             </div>
@@ -162,72 +202,39 @@ export const ChainUpdateBuilderWrapper = ({ chain }: ChainUpdateBuilderWrapperPr
               <SolidityParam
                 name="chainsToAdd"
                 type="ChainUpdate[]"
-                description="Configure permissions and rate limits for remote chains"
-              >
-                <div className={styles.parameterDetails}>
-                  Configure the rate limits below to generate this parameter's value:
-                </div>
-                <div className={styles.rateConfigSection}>
-                  <ChainUpdateBuilder
-                    chain={chain}
-                    readOnly={{
-                      chainSelector: remoteNetwork.chainSelector,
-                      poolAddress,
-                      tokenAddress: remoteTokenAddress || "",
-                    }}
-                    defaultConfig={{
-                      outbound: { enabled: false, capacity: "0", rate: "0" },
-                      inbound: { enabled: false, capacity: "0", rate: "0" },
-                    }}
-                    onCalculate={(input: ChainUpdateInput) => {
-                      const update = {
-                        remoteChainSelector: input.remoteChainSelector,
-                        remotePoolAddresses: [input.poolAddress].map((addr) =>
-                          ethers.utils.defaultAbiCoder.encode(["address"], [addr])
-                        ),
-                        remoteTokenAddress: ethers.utils.defaultAbiCoder.encode(["address"], [input.tokenAddress]),
-                        outboundRateLimiterConfig: {
-                          enabled: input.outbound.enabled,
-                          capacity: input.outbound.capacity,
-                          rate: input.outbound.rate,
-                        },
-                        inboundRateLimiterConfig: {
-                          enabled: input.inbound.enabled,
-                          capacity: input.inbound.capacity,
-                          rate: input.inbound.rate,
-                        },
-                      }
-
-                      const generatedCallData = generateCallData({
-                        ...update,
-                        remoteChainSelector: BigInt(input.remoteChainSelector),
-                      })
-
-                      const formatted = JSON.stringify(
-                        {
-                          json: [update],
-                          callData: generatedCallData,
-                        },
-                        null,
-                        2
-                      )
-
-                      setCallData(generatedCallData)
-                      setFormattedUpdate(formatted)
-                      return formatted
-                    }}
-                  />
-                </div>
-                {formattedUpdate && (
-                  <div className={styles.copyBlock}>
-                    <div className={styles.copyInstructions}>Copy generated value to Remix:</div>
-                    <ReactCopyText text={callData} code />
-                  </div>
-                )}
-              </SolidityParam>
+                description="Configure permissions and rate limits for remote chains. The value for this parameter will be generated using the configuration tool below."
+              />
             </div>
           </div>
         </div>
+
+        <div className={styles.configurationTool}>
+          <h3 className={styles.configTitle}>Rate Limit Configuration Tool</h3>
+          <ChainUpdateBuilder
+            chain={chain}
+            readOnly={{
+              chainSelector: remoteNetwork.chainSelector,
+              poolAddress,
+              tokenAddress: remoteTokenAddress || "",
+            }}
+            defaultConfig={{
+              outbound: { enabled: false, capacity: "0", rate: "0" },
+              inbound: { enabled: false, capacity: "0", rate: "0" },
+            }}
+            onCalculate={handleCalculate}
+          />
+
+          {formattedUpdate && (
+            <div className={styles.resultSection}>
+              <div className={styles.copyBlock}>
+                <div className={styles.copyInstructions}>Copy generated value to Remix:</div>
+                <div className={styles.copyContainer}>
+                  <ReactCopyText text={callData} code />
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
     </TutorialCard>
   )
diff --git a/src/content/ccip/tutorials/cross-chain-tokens/register-from-eoa-remix.mdx b/src/content/ccip/tutorials/cross-chain-tokens/register-from-eoa-remix.mdx
index 12a4c0dc2f5..0672dfe5f72 100644
--- a/src/content/ccip/tutorials/cross-chain-tokens/register-from-eoa-remix.mdx
+++ b/src/content/ccip/tutorials/cross-chain-tokens/register-from-eoa-remix.mdx
@@ -123,8 +123,6 @@ Call the following function on your Token Pool contract to configure cross-chain
 
 <ChainUpdateBuilderWrapper chain="source" client:load />
 
-<StepCheckbox stepId="sourceConfig" subStepId="source-pool-config" client:only="react" />
-
 ##### Verify Source Configuration
 
 Call these functions on your Token Pool contract to verify your configuration: