From e436c951b846c9b86b5f22c6eda83e29b1f0a495 Mon Sep 17 00:00:00 2001 From: aelmanaa Date: Fri, 13 Dec 2024 19:18:15 +0100 Subject: [PATCH] update --- .../ChainUpdateBuilder.module.css | 78 +++++++++++++------ .../ChainUpdateBuilder.tsx | 48 ++++++------ 2 files changed, 82 insertions(+), 44 deletions(-) diff --git a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css index 9342adb3c5e..6f9a99f0679 100644 --- a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css +++ b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css @@ -63,9 +63,10 @@ /* Rate Limiter Layout - More adaptive */ .rateLimiterGroup { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: var(--space-3x); + display: flex; + flex-direction: column; + gap: 1.5rem; + margin-top: 0.5rem; } .rateLimiter { @@ -96,7 +97,10 @@ .rateLimiterInputs { display: flex; flex-direction: column; - gap: var(--space-3x); + gap: 1rem; + padding: 1rem; + background: var(--color-background-secondary); + border-radius: 8px; } /* Interactive Elements */ @@ -237,13 +241,13 @@ .input { display: flex; flex-direction: column; - gap: var(--space-2x); + gap: 0.5rem; } .inputLabel { display: flex; flex-direction: column; - gap: var(--space-1x); + gap: 0.25rem; } .inputLabel label { @@ -252,37 +256,67 @@ } .inputHint { - font-size: var(--font-size-sm); + font-size: 0.875rem; color: var(--color-text-secondary); } .numericInput { - padding: var(--space-2x); + padding: 0.75rem; border: 1px solid var(--color-border); - border-radius: var(--border-radius); - background: var(--color-background); - font-family: var(--font-mono); - width: 100%; + border-radius: 6px; + font-size: 1rem; transition: all 0.2s ease; } -.numericInput:hover { - border-color: var(--color-border-hover); -} - .numericInput:focus { - border-color: var(--color-accent); outline: none; - box-shadow: 0 0 0 2px var(--color-accent-alpha); + border-color: var(--color-primary); + box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1); +} + +.inputError { + border-color: var(--color-error); +} + +.inputError:focus { + border-color: var(--color-error); + box-shadow: 0 0 0 2px rgba(var(--color-error-rgb), 0.1); +} + +/* Validation warning styling */ +.rateLimiterInputs :global(.callout) { + margin-bottom: 1rem; + font-size: 0.875rem; + border-radius: 6px; +} + +.rateLimiterInputs :global(.callout-title) { + font-size: 0.875rem; + font-weight: 600; + margin-bottom: 0.25rem; +} + +.maxSupplyInfo { + margin-bottom: 1rem; } .validationWarnings { - margin-bottom: var(--space-4x); + margin-bottom: 1rem; display: flex; flex-direction: column; - gap: var(--space-2x); + gap: 0.5rem; } -.maxSupplyInfo { - margin-bottom: var(--space-4x); +.validationWarnings :global(.callout) { + margin: 0; + padding: 0.75rem 1rem; + border-radius: 6px; + background-color: var(--color-warning-background); + border: 1px solid var(--color-warning-border); +} + +.validationWarnings :global(.callout-title) { + color: var(--color-warning-text); + font-weight: 600; + margin-bottom: 0.25rem; } diff --git a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx index 57a5291f56a..254e148803f 100644 --- a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx +++ b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx @@ -235,26 +235,10 @@ export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate }} >
- {/* Validation Warnings */} - {(validationErrors.inbound || validationErrors.outbound) && ( -
- {validationErrors.outbound && ( - - {validationErrors.outbound} - - )} - {validationErrors.inbound && ( - - {validationErrors.inbound} - - )} -
- )} -

Rate limits control how many tokens can be transferred over a given blockchain lane within a specific time - frame. Each rate limit has: + frame. When working with rate limits, consider the following:

  • @@ -264,10 +248,14 @@ export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate
  • Refill rate: How quickly this capacity is restored over time after transfers occur.
    • -
  • Setting both capacity and rate to 0 removes all limitations, allowing unlimited transfers.
  • - When defining these limits, remember to account for token decimals. For example, for a token with 18 - decimals, to allow a maximum capacity of 1 whole token, set it to 1000000000000000000. + Disabling rate limits: Setting both capacity and rate to 0 removes all limitations, + allowing unlimited transfers. +
    • +
  • + Token decimals: When defining these limits, remember to account for token decimals. For + example, for a token with 18 decimals, to allow a maximum capacity of 1 whole token, set it to{" "} + 1000000000000000000.

@@ -307,6 +295,22 @@ export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate

)} + {/* Validation Warnings */} + {(validationErrors.inbound || validationErrors.outbound) && ( +
+ {validationErrors.outbound && ( + + {validationErrors.outbound} + + )} + {validationErrors.inbound && ( + + {validationErrors.inbound} + + )} +
+ )} +
{/* Outbound Configuration */}
@@ -335,7 +339,7 @@ export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate onChange={(e) => handleRateLimitChange("outbound", "capacity", e.target.value)} placeholder="Enter amount..." pattern="[0-9]*" - className={styles.numericInput} + className={`${styles.numericInput} ${validationErrors.outbound ? styles.inputError : ""}`} />
@@ -351,7 +355,7 @@ export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate onChange={(e) => handleRateLimitChange("outbound", "rate", e.target.value)} placeholder="Enter amount..." pattern="[0-9]*" - className={styles.numericInput} + className={`${styles.numericInput} ${validationErrors.outbound ? styles.inputError : ""}`} />