Skip to content

Commit ab4ce0c

Browse files
corbanbrookcorbanbrook
authored
Update design system v2.1.11 (#419)
1 parent 927a4de commit ab4ce0c

File tree

12 files changed

+83
-31
lines changed

12 files changed

+83
-31
lines changed

‎examples/components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"typescript": "^5.8.3"
99
},
1010
"peerDependencies": {
11-
"@0xsequence/design-system": "2.1.6",
11+
"@0xsequence/design-system": "2.1.11",
1212
"@0xsequence/network": "*",
1313
"wagmi": "^2.15.0"
1414
},

‎examples/components/src/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const NetworkSelect = () => {
108108
>
109109
<div className="flex items-center gap-2">
110110
<NetworkImage chainId={chainId} size="sm" />
111-
<Text display={{ sm: 'none', lg: 'block' }} variant="normal" fontWeight="bold" color="primary">
111+
<Text className="hidden lg:block" variant="normal" fontWeight="bold" color="primary">
112112
{chains.find(chain => chain.id === chainId)?.name || chainId}
113113
</Text>
114114
</div>

‎examples/next/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"dependencies": {
1313
"@0xsequence/checkout": "workspace:*",
1414
"@0xsequence/connect": "workspace:*",
15-
"@0xsequence/design-system": "2.1.6",
15+
"@0xsequence/design-system": "2.1.11",
1616
"@0xsequence/hooks": "workspace:*",
1717
"@0xsequence/network": "^2.3.10",
1818
"@0xsequence/waas": "^2.3.10",

‎examples/react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"dependencies": {
1414
"@0xsequence/checkout": "workspace:*",
1515
"@0xsequence/connect": "workspace:*",
16-
"@0xsequence/design-system": "2.1.6",
16+
"@0xsequence/design-system": "2.1.11",
1717
"@0xsequence/hooks": "workspace:*",
1818
"@0xsequence/immutable-connector": "workspace:*",
1919
"@0xsequence/network": "^2.3.10",

‎examples/react/src/components/Connected.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -702,7 +702,8 @@ export const Connected = () => {
702702
<Text variant="xsmall">{formatUnits(BigInt(option.value), option.token.decimals || 0)}</Text>
703703
</div>
704704
<div className="flex flex-row">
705-
<Text>Wallet balance for {option.token.name}: </Text> <Text>{option.balanceFormatted}</Text>
705+
<Text>Wallet balance for {option.token.name}: </Text>{' '}
706+
<Text>{'balanceFormatted' in option ? option.balanceFormatted : null}</Text>
706707
</div>
707708
</div>
708709
),
@@ -718,7 +719,7 @@ export const Connected = () => {
718719
)
719720

720721
if (selected?.token.contractAddress !== undefined) {
721-
if (!selected.hasEnoughBalanceForFee) {
722+
if (!('hasEnoughBalanceForFee' in selected) || !selected.hasEnoughBalanceForFee) {
722723
setFeeOptionAlert({
723724
title: 'Insufficient balance',
724725
description: `You do not have enough balance to pay the fee with ${selected.token.name}, please make sure you have enough balance in your wallet for the selected fee option.`,

‎examples/react/src/components/CustomCheckout/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export const CustomCheckout = () => {
7676
}
7777

7878
if (orderSummary.error) {
79-
return <Text color="error">Error loading order summary</Text>
79+
return <Text color="negative">Error loading order summary</Text>
8080
}
8181

8282
return (
@@ -128,7 +128,7 @@ export const CustomCheckout = () => {
128128
}
129129

130130
if (creditCardPayment.error) {
131-
return <Text color="error">Error loading credit card payment</Text>
131+
return <Text color="negative">Error loading credit card payment</Text>
132132
}
133133

134134
const CreditCardIframe = creditCardPayment.data?.CreditCardIframe
@@ -152,7 +152,7 @@ export const CustomCheckout = () => {
152152
}
153153

154154
if (cryptoPayment.cryptoOptions.error) {
155-
return <Text color="error">Error loading crypto payment</Text>
155+
return <Text color="negative">Error loading crypto payment</Text>
156156
}
157157

158158
return (
@@ -183,15 +183,15 @@ export const CustomCheckout = () => {
183183
return (
184184
<div className="flex pt-16 pb-8 px-6 gap-2 flex-col">
185185
<Text color="primary">The following data is generated by the useCheckoutUI hook</Text>
186-
<Text fontSize="large" fontWeight="bold" color="primary">
186+
<Text variant="large" fontWeight="bold" color="primary">
187187
Order Summary section
188188
</Text>
189189
<OrderSummary />
190-
<Text fontSize="large" fontWeight="bold" color="primary">
190+
<Text variant="large" fontWeight="bold" color="primary">
191191
Crypto Payment section
192192
</Text>
193193
<CryptoPayment />
194-
<Text fontSize="large" fontWeight="bold" color="primary">
194+
<Text variant="large" fontWeight="bold" color="primary">
195195
Credit Card Payment section
196196
</Text>
197197
<CreditCardPayment />

‎examples/react/src/components/ImmutableCallback.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function ImmutableCallback() {
2424
return (
2525
<div className="flex flex-col items-center justify-center min-h-screen">
2626
<Spinner size="lg" />
27-
<Text marginTop="4">Processing Immutable login...</Text>
27+
<Text className="mt-4">Processing Immutable login...</Text>
2828
</div>
2929
)
3030
}

‎packages/checkout/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"typecheck": "tsc --noEmit"
3131
},
3232
"dependencies": {
33-
"@0xsequence/design-system": "2.1.6",
33+
"@0xsequence/design-system": "2.1.11",
3434
"@0xsequence/hooks": "workspace:*",
3535
"@0xsequence/marketplace": "^2.3.10",
3636
"motion": "^12.9.2",

‎packages/connect/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"@0xsequence/api": "2.3.11",
4343
"@0xsequence/auth": "^2.3.10",
4444
"@0xsequence/core": "^2.3.10",
45-
"@0xsequence/design-system": "2.1.6",
45+
"@0xsequence/design-system": "2.1.11",
4646
"@0xsequence/ethauth": "^1.0.0",
4747
"@0xsequence/hooks": "workspace:*",
4848
"@0xsequence/indexer": "^2.3.10",

‎packages/connect/src/styles.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -454,6 +454,9 @@ export const styles = String.raw`
454454
.max-h-\[200px\] {
455455
max-height: 200px;
456456
}
457+
.max-h-\[360px\] {
458+
max-height: 360px;
459+
}
457460
.max-h-\[calc\(100dvh-80px\)\] {
458461
max-height: calc(100dvh - 80px);
459462
}
@@ -559,6 +562,9 @@ export const styles = String.raw`
559562
.min-w-6 {
560563
min-width: calc(var(--spacing) * 6);
561564
}
565+
.min-w-\[var\(--radix-select-trigger-width\)\] {
566+
min-width: var(--radix-select-trigger-width);
567+
}
562568
.min-w-full {
563569
min-width: 100%;
564570
}
@@ -578,6 +584,9 @@ export const styles = String.raw`
578584
.transform {
579585
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
580586
}
587+
.animate-skeleton {
588+
animation: skeleton 1s ease infinite;
589+
}
581590
.animate-spin {
582591
animation: var(--animate-spin);
583592
}
@@ -777,6 +786,9 @@ export const styles = String.raw`
777786
--tw-border-style: solid;
778787
border-style: solid;
779788
}
789+
.border-border-error {
790+
border-color: var(--seq-color-border-error);
791+
}
780792
.border-border-focus {
781793
border-color: var(--seq-color-border-focus);
782794
}
@@ -1222,6 +1234,9 @@ export const styles = String.raw`
12221234
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
12231235
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
12241236
}
1237+
.ring-border-error {
1238+
--tw-ring-color: var(--seq-color-border-error);
1239+
}
12251240
.ring-border-focus {
12261241
--tw-ring-color: var(--seq-color-border-focus);
12271242
}
@@ -1610,6 +1625,11 @@ export const styles = String.raw`
16101625
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
16111626
}
16121627
}
1628+
.focus-within\:ring-border-error {
1629+
&:focus-within {
1630+
--tw-ring-color: var(--seq-color-border-error);
1631+
}
1632+
}
16131633
.focus-within\:ring-border-focus {
16141634
&:focus-within {
16151635
--tw-ring-color: var(--seq-color-border-focus);
@@ -1665,6 +1685,11 @@ export const styles = String.raw`
16651685
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
16661686
}
16671687
}
1688+
.focus\:ring-border-error {
1689+
&:focus {
1690+
--tw-ring-color: var(--seq-color-border-error);
1691+
}
1692+
}
16681693
.focus\:ring-border-focus {
16691694
&:focus {
16701695
--tw-ring-color: var(--seq-color-border-focus);
@@ -1792,6 +1817,11 @@ export const styles = String.raw`
17921817
transition-timing-function: var(--ease-out);
17931818
}
17941819
}
1820+
.data-\[swipe\=end\]\:animate-swipe-out {
1821+
&[data-swipe="end"] {
1822+
animation: swipe-out 200ms ease-out;
1823+
}
1824+
}
17951825
.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\] {
17961826
&[data-swipe="move"] {
17971827
--tw-translate-x: var(--radix-toast-swipe-move-x);
@@ -1898,6 +1928,7 @@ export const styles = String.raw`
18981928
--seq-color-background-raised: rgba(54, 54, 54, 0.7);
18991929
--seq-color-border-normal: rgba(255, 255, 255, 0.25);
19001930
--seq-color-border-focus: rgba(255, 255, 255, 0.5);
1931+
--seq-color-border-error: rgba(255, 69, 0, 1);
19011932
--seq-color-button-glass: rgba(255, 255, 255, 0.15);
19021933
--seq-color-button-emphasis: rgba(0, 0, 0, 0.5);
19031934
--seq-color-button-inverse: rgba(255, 255, 255, 0.8);
@@ -1945,6 +1976,7 @@ export const styles = String.raw`
19451976
--seq-color-background-raised: rgba(192, 192, 192, 0.7);
19461977
--seq-color-border-normal: rgba(0, 0, 0, 0.25);
19471978
--seq-color-border-focus: rgba(0, 0, 0, 0.5);
1979+
--seq-color-border-error: rgba(255, 69, 0, 1);
19481980
--seq-color-button-glass: rgba(0, 0, 0, 0.15);
19491981
--seq-color-button-emphasis: rgba(255, 255, 255, 0.5);
19501982
--seq-color-button-inverse: rgba(0, 0, 0, 0.8);
@@ -2243,6 +2275,25 @@ export const styles = String.raw`
22432275
transform: rotate(360deg);
22442276
}
22452277
}
2278+
@keyframes skeleton {
2279+
0% {
2280+
background-position: 0% 50%;
2281+
}
2282+
50% {
2283+
background-position: 100% 50%;
2284+
}
2285+
100% {
2286+
background-position: 0% 50%;
2287+
}
2288+
}
2289+
@keyframes swipe-out {
2290+
from {
2291+
transform: translateX(var(--radix-toast-swipe-end-x));
2292+
}
2293+
to {
2294+
transform: translateX(100%);
2295+
}
2296+
}
22462297
@layer properties {
22472298
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
22482299
*, ::before, ::after, ::backdrop {

0 commit comments

Comments
 (0)