Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@aelmanaa
aelmanaa committed Dec 9, 2024
1 parent 0d1cee1 commit 35a391b
Show file tree
Hide file tree
Showing 6 changed files with 381 additions and 221 deletions.
126 changes: 101 additions & 25 deletions src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,132 @@
.builder {
margin-top: var(--space-3x);
padding: var(--space-4x);
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 1.5rem;
margin: 1rem 0;
background: var(--color-background);
}

.section {
margin-bottom: 2rem;
.configSection {
display: flex;
flex-direction: column;
gap: var(--space-4x);
}

.sectionTitle {
font-size: var(--font-size-small);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
/* Remote Configuration */
.remoteConfig {
padding: var(--space-3x);
background: var(--color-background-secondary);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
}

.field {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
gap: var(--space-3x);
margin-bottom: var(--space-2x);
}

.field:last-child {
margin-bottom: 0;
}

.field label {
font-weight: 500;
min-width: 160px;
color: var(--color-text-secondary);
min-width: 120px;
}

.field code {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
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: 0.25rem 0.5rem;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
}

.rateLimiterConfig {
margin-bottom: 1.5rem;
.configTitle {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: var(--space-3x);
}

.rateLimiterGroup {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3x);
}

.rateLimiter {
padding: var(--space-3x);
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
}

.rateLimiterConfig h5 {
font-size: var(--font-size-small);
.rateLimiterHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-3x);
}

.rateLimiterHeader h5 {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}

.toggle {
display: flex;
align-items: center;
gap: var(--space-2x);
cursor: pointer;
}

.rateLimiterInputs {
display: flex;
flex-direction: column;
gap: var(--space-3x);
}

.input {
display: flex;
flex-direction: column;
gap: var(--space-1x);
}

.input label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: 0.5rem;
}

.input input {
padding: var(--space-2x);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-sm);
font-family: var(--font-mono);
font-size: var(--font-size-sm);
}

.notice {
color: var(--color-text-secondary);
font-size: var(--font-size-small);
margin-bottom: 1rem;
margin-top: var(--space-3x);
padding: var(--space-3x);
background: var(--color-warning-background);
border: 1px solid var(--color-warning-border);
border-radius: var(--border-radius);
color: var(--color-warning);
font-size: var(--font-size-sm);
}

/* ... more styles matching your theme ... */
/* ... more styles matching tutorial theme ... */
186 changes: 106 additions & 80 deletions src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,95 +168,121 @@ export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate
fallback={<div>Error configuring rate limits. Please refresh and try again.</div>}
onError={(error) => {
console.error("Rate limit configuration error:", error)
// Could add error reporting here
reportError?.(error) // Assuming you have an error reporting service
}}
>
<div className={styles.builder}>
<div className={styles.section}>
<div className={styles.sectionTitle}>Remote Configuration</div>
<div className={styles.field}>
<label>Remote Chain Selector:</label>
<code>{readOnly.chainSelector}</code>
<div className={styles.configSection}>
{/* Remote Configuration Section */}
<div className={styles.remoteConfig}>
<h4 className={styles.configTitle}>Remote Configuration</h4>
<div className={styles.field}>
<label>Chain Selector:</label>
<code>{readOnly.chainSelector}</code>
</div>
<div className={styles.field}>
<label>Pool Address:</label>
<code>{readOnly.poolAddress}</code>
</div>
<div className={styles.field}>
<label>Token Address:</label>
<code>{readOnly.tokenAddress}</code>
</div>
</div>
<div className={styles.field}>
<label>Remote Pool Address:</label>
<code>{readOnly.poolAddress}</code>
</div>
<div className={styles.field}>
<label>Remote Token Address:</label>
<code>{readOnly.tokenAddress}</code>
</div>
</div>

<div className={styles.section}>
<div className={styles.sectionTitle}>Rate Limits (Optional)</div>
{/* Rate Limits Section */}
<div className={styles.rateLimits}>
<h4 className={styles.configTitle}>Rate Limit Configuration</h4>

<div className={styles.rateLimiterConfig}>
<h5>Outbound Configuration</h5>
<label>
<input
type="checkbox"
checked={outbound.enabled}
onChange={(e) => handleRateLimitToggle("outbound", e.target.checked)}
/>
Enable Rate Limit
</label>
{outbound.enabled && (
<>
<input
type="text"
value={outbound.capacity}
onChange={(e) => handleRateLimitChange("outbound", "capacity", e.target.value)}
placeholder="Capacity (uint128)"
pattern="[0-9]*"
/>
<input
type="text"
value={outbound.rate}
onChange={(e) => handleRateLimitChange("outbound", "rate", e.target.value)}
placeholder="Rate (uint128)"
pattern="[0-9]*"
/>
</>
)}
</div>
<div className={styles.rateLimiterGroup}>
{/* Outbound Configuration */}
<div className={styles.rateLimiter}>
<div className={styles.rateLimiterHeader}>
<h5>Outbound Transfers</h5>
<label className={styles.toggle}>
<input
type="checkbox"
checked={outbound.enabled}
onChange={(e) => handleRateLimitToggle("outbound", e.target.checked)}
/>
<span>Enable Limits</span>
</label>
</div>

<div className={styles.rateLimiterConfig}>
<h5>Inbound Configuration</h5>
<label>
<input
type="checkbox"
checked={inbound.enabled}
onChange={(e) => handleRateLimitToggle("inbound", e.target.checked)}
/>
Enable Rate Limit
</label>
{inbound.enabled && (
<>
<input
type="text"
value={inbound.capacity}
onChange={(e) => handleRateLimitChange("inbound", "capacity", e.target.value)}
placeholder="Capacity (uint128)"
pattern="[0-9]*"
/>
<input
type="text"
value={inbound.rate}
onChange={(e) => handleRateLimitChange("inbound", "rate", e.target.value)}
placeholder="Rate (uint128)"
pattern="[0-9]*"
/>
</>
)}
</div>
</div>
{outbound.enabled && (
<div className={styles.rateLimiterInputs}>
<div className={styles.input}>
<label>Capacity</label>
<input
type="text"
value={outbound.capacity}
onChange={(e) => handleRateLimitChange("outbound", "capacity", e.target.value)}
placeholder="Max tokens per period"
pattern="[0-9]*"
/>
</div>
<div className={styles.input}>
<label>Rate</label>
<input
type="text"
value={outbound.rate}
onChange={(e) => handleRateLimitChange("outbound", "rate", e.target.value)}
placeholder="Tokens per second"
pattern="[0-9]*"
/>
</div>
</div>
)}
</div>

{/* Inbound Configuration */}
<div className={styles.rateLimiter}>
<div className={styles.rateLimiterHeader}>
<h5>Inbound Transfers</h5>
<label className={styles.toggle}>
<input
type="checkbox"
checked={inbound.enabled}
onChange={(e) => handleRateLimitToggle("inbound", e.target.checked)}
/>
<span>Enable Limits</span>
</label>
</div>

{!canGenerateUpdate() && (
<div className={styles.notice}>
Please ensure all remote addresses are available before generating the update
{inbound.enabled && (
<div className={styles.rateLimiterInputs}>
<div className={styles.input}>
<label>Capacity</label>
<input
type="text"
value={inbound.capacity}
onChange={(e) => handleRateLimitChange("inbound", "capacity", e.target.value)}
placeholder="Max tokens per period"
pattern="[0-9]*"
/>
</div>
<div className={styles.input}>
<label>Rate</label>
<input
type="text"
value={inbound.rate}
onChange={(e) => handleRateLimitChange("inbound", "rate", e.target.value)}
placeholder="Tokens per second"
pattern="[0-9]*"
/>
</div>
</div>
)}
</div>
</div>
</div>
)}

{!canGenerateUpdate() && (
<div className={styles.notice}>
Please ensure all remote addresses are available before generating the update
</div>
)}
</div>
</div>
</ErrorBoundary>
)
Expand Down
Loading

0 comments on commit 35a391b

Please sign in to comment.