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 ccd5322 commit 8823c99
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 36 deletions.
42 changes: 42 additions & 0 deletions src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,3 +186,45 @@
min-width: 0;
max-width: 100%;
}

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

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

.inputLabel label {
font-weight: 600;
color: var(--color-text-primary);
}

.inputHint {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}

.numericInput {
padding: var(--space-2x);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
background: var(--color-background);
font-family: var(--font-mono);
width: 100%;
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);
}
32 changes: 24 additions & 8 deletions src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,23 +212,31 @@ export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate
{outbound.enabled && (
<div className={styles.rateLimiterInputs}>
<div className={styles.input}>
<label>Capacity</label>
<div className={styles.inputLabel}>
<label>Capacity</label>
<span className={styles.inputHint}>Maximum tokens allowed per period</span>
</div>
<input
type="text"
value={outbound.capacity}
onChange={(e) => handleRateLimitChange("outbound", "capacity", e.target.value)}
placeholder="Max tokens per period"
placeholder="Enter amount..."
pattern="[0-9]*"
className={styles.numericInput}
/>
</div>
<div className={styles.input}>
<label>Rate</label>
<div className={styles.inputLabel}>
<label>Rate</label>
<span className={styles.inputHint}>Tokens allowed per second</span>
</div>
<input
type="text"
value={outbound.rate}
onChange={(e) => handleRateLimitChange("outbound", "rate", e.target.value)}
placeholder="Tokens per second"
placeholder="Enter amount..."
pattern="[0-9]*"
className={styles.numericInput}
/>
</div>
</div>
Expand All @@ -252,23 +260,31 @@ export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate
{inbound.enabled && (
<div className={styles.rateLimiterInputs}>
<div className={styles.input}>
<label>Capacity</label>
<div className={styles.inputLabel}>
<label>Capacity</label>
<span className={styles.inputHint}>Maximum tokens allowed per period</span>
</div>
<input
type="text"
value={inbound.capacity}
onChange={(e) => handleRateLimitChange("inbound", "capacity", e.target.value)}
placeholder="Max tokens per period"
placeholder="Enter amount..."
pattern="[0-9]*"
className={styles.numericInput}
/>
</div>
<div className={styles.input}>
<label>Rate</label>
<div className={styles.inputLabel}>
<label>Rate</label>
<span className={styles.inputHint}>Tokens allowed per second</span>
</div>
<input
type="text"
value={inbound.rate}
onChange={(e) => handleRateLimitChange("inbound", "rate", e.target.value)}
placeholder="Tokens per second"
placeholder="Enter amount..."
pattern="[0-9]*"
className={styles.numericInput}
/>
</div>
</div>
Expand Down
39 changes: 12 additions & 27 deletions src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilderWrapper.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,6 @@
opacity: 1;
}

.chainInfo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3x);
margin-bottom: var(--space-4x);
}

.chainDetails {
position: relative;
padding: var(--space-3x);
Expand Down Expand Up @@ -113,13 +106,6 @@
font-size: 14px;
}

@media (max-width: 768px) {
.chainInfo {
grid-template-columns: 1fr;
gap: 16px;
}
}

.loadingState {
text-align: center;
padding: 32px 16px;
Expand Down Expand Up @@ -549,17 +535,7 @@
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);
}
Expand Down Expand Up @@ -595,15 +571,24 @@

.configurationTool {
margin-top: var(--space-4x);
border-top: 1px solid var(--color-border);
padding-top: var(--space-4x);
width: 100%;
border-top: 1px solid var(--color-border);
}

.configSteps {
margin-bottom: var(--space-4x);
}

.configTitle {
font-size: var(--font-size-lg);
color: var(--color-text-primary);
margin-bottom: var(--space-3x);
margin-bottom: var(--space-2x);
}

.configDescription {
color: var(--color-text-secondary);
font-size: var(--font-size-base);
line-height: 1.5;
}

.resultSection {
Expand Down
8 changes: 7 additions & 1 deletion src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilderWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,13 @@ export const ChainUpdateBuilderWrapper = ({ chain }: ChainUpdateBuilderWrapperPr
</div>

<div className={styles.configurationTool}>
<h3 className={styles.configTitle}>Rate Limit Configuration Tool</h3>
<div className={styles.configSteps}>
<h3 className={styles.configTitle}>Rate Limit Configuration</h3>
<p className={styles.configDescription}>
Configure the rate limits below. The generated value will be used for the chainsToAdd parameter.
</p>
</div>

<ChainUpdateBuilder
chain={chain}
readOnly={{
Expand Down

0 comments on commit 8823c99

Please sign in to comment.