diff --git a/examples/components/package.json b/examples/components/package.json index c6c94a620..d8fabecc3 100644 --- a/examples/components/package.json +++ b/examples/components/package.json @@ -8,7 +8,7 @@ "typescript": "^5.8.3" }, "peerDependencies": { - "@0xsequence/design-system": "2.1.6", + "@0xsequence/design-system": "2.1.11", "@0xsequence/network": "*", "wagmi": "^2.15.0" }, diff --git a/examples/components/src/Header.tsx b/examples/components/src/Header.tsx index 74e4627ca..e110e5f50 100644 --- a/examples/components/src/Header.tsx +++ b/examples/components/src/Header.tsx @@ -108,7 +108,7 @@ const NetworkSelect = () => { >
- + {chains.find(chain => chain.id === chainId)?.name || chainId}
diff --git a/examples/next/package.json b/examples/next/package.json index f3c8884f6..861ecb5c7 100644 --- a/examples/next/package.json +++ b/examples/next/package.json @@ -12,7 +12,7 @@ "dependencies": { "@0xsequence/checkout": "workspace:*", "@0xsequence/connect": "workspace:*", - "@0xsequence/design-system": "2.1.6", + "@0xsequence/design-system": "2.1.11", "@0xsequence/hooks": "workspace:*", "@0xsequence/network": "^2.3.10", "@0xsequence/waas": "^2.3.10", diff --git a/examples/react/package.json b/examples/react/package.json index bf714127a..017881d6d 100644 --- a/examples/react/package.json +++ b/examples/react/package.json @@ -13,7 +13,7 @@ "dependencies": { "@0xsequence/checkout": "workspace:*", "@0xsequence/connect": "workspace:*", - "@0xsequence/design-system": "2.1.6", + "@0xsequence/design-system": "2.1.11", "@0xsequence/hooks": "workspace:*", "@0xsequence/immutable-connector": "workspace:*", "@0xsequence/network": "^2.3.10", diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx index 02227f637..90ee7ecae 100644 --- a/examples/react/src/components/Connected.tsx +++ b/examples/react/src/components/Connected.tsx @@ -702,7 +702,8 @@ export const Connected = () => { {formatUnits(BigInt(option.value), option.token.decimals || 0)}
- Wallet balance for {option.token.name}: {option.balanceFormatted} + Wallet balance for {option.token.name}: {' '} + {'balanceFormatted' in option ? option.balanceFormatted : null}
), @@ -718,7 +719,7 @@ export const Connected = () => { ) if (selected?.token.contractAddress !== undefined) { - if (!selected.hasEnoughBalanceForFee) { + if (!('hasEnoughBalanceForFee' in selected) || !selected.hasEnoughBalanceForFee) { setFeeOptionAlert({ title: 'Insufficient balance', 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.`, diff --git a/examples/react/src/components/CustomCheckout/index.tsx b/examples/react/src/components/CustomCheckout/index.tsx index c72cd2ce3..a5f63ef34 100644 --- a/examples/react/src/components/CustomCheckout/index.tsx +++ b/examples/react/src/components/CustomCheckout/index.tsx @@ -76,7 +76,7 @@ export const CustomCheckout = () => { } if (orderSummary.error) { - return Error loading order summary + return Error loading order summary } return ( @@ -128,7 +128,7 @@ export const CustomCheckout = () => { } if (creditCardPayment.error) { - return Error loading credit card payment + return Error loading credit card payment } const CreditCardIframe = creditCardPayment.data?.CreditCardIframe @@ -152,7 +152,7 @@ export const CustomCheckout = () => { } if (cryptoPayment.cryptoOptions.error) { - return Error loading crypto payment + return Error loading crypto payment } return ( @@ -183,15 +183,15 @@ export const CustomCheckout = () => { return (
The following data is generated by the useCheckoutUI hook - + Order Summary section - + Crypto Payment section - + Credit Card Payment section diff --git a/examples/react/src/components/ImmutableCallback.tsx b/examples/react/src/components/ImmutableCallback.tsx index 129aeb387..bc7e51172 100644 --- a/examples/react/src/components/ImmutableCallback.tsx +++ b/examples/react/src/components/ImmutableCallback.tsx @@ -24,7 +24,7 @@ export function ImmutableCallback() { return (
- Processing Immutable login... + Processing Immutable login...
) } diff --git a/packages/checkout/package.json b/packages/checkout/package.json index 32d923cbb..c6d2f33e9 100644 --- a/packages/checkout/package.json +++ b/packages/checkout/package.json @@ -30,7 +30,7 @@ "typecheck": "tsc --noEmit" }, "dependencies": { - "@0xsequence/design-system": "2.1.6", + "@0xsequence/design-system": "2.1.11", "@0xsequence/hooks": "workspace:*", "@0xsequence/marketplace": "^2.3.10", "motion": "^12.9.2", diff --git a/packages/connect/package.json b/packages/connect/package.json index 50684354c..c9cbbadaa 100644 --- a/packages/connect/package.json +++ b/packages/connect/package.json @@ -42,7 +42,7 @@ "@0xsequence/api": "2.3.11", "@0xsequence/auth": "^2.3.10", "@0xsequence/core": "^2.3.10", - "@0xsequence/design-system": "2.1.6", + "@0xsequence/design-system": "2.1.11", "@0xsequence/ethauth": "^1.0.0", "@0xsequence/hooks": "workspace:*", "@0xsequence/indexer": "^2.3.10", diff --git a/packages/connect/src/styles.ts b/packages/connect/src/styles.ts index c865ba84d..49d0de0d8 100644 --- a/packages/connect/src/styles.ts +++ b/packages/connect/src/styles.ts @@ -454,6 +454,9 @@ export const styles = String.raw` .max-h-\[200px\] { max-height: 200px; } + .max-h-\[360px\] { + max-height: 360px; + } .max-h-\[calc\(100dvh-80px\)\] { max-height: calc(100dvh - 80px); } @@ -559,6 +562,9 @@ export const styles = String.raw` .min-w-6 { min-width: calc(var(--spacing) * 6); } + .min-w-\[var\(--radix-select-trigger-width\)\] { + min-width: var(--radix-select-trigger-width); + } .min-w-full { min-width: 100%; } @@ -578,6 +584,9 @@ export const styles = String.raw` .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } + .animate-skeleton { + animation: skeleton 1s ease infinite; + } .animate-spin { animation: var(--animate-spin); } @@ -777,6 +786,9 @@ export const styles = String.raw` --tw-border-style: solid; border-style: solid; } + .border-border-error { + border-color: var(--seq-color-border-error); + } .border-border-focus { border-color: var(--seq-color-border-focus); } @@ -1222,6 +1234,9 @@ export const styles = String.raw` --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .ring-border-error { + --tw-ring-color: var(--seq-color-border-error); + } .ring-border-focus { --tw-ring-color: var(--seq-color-border-focus); } @@ -1610,6 +1625,11 @@ export const styles = String.raw` box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } + .focus-within\:ring-border-error { + &:focus-within { + --tw-ring-color: var(--seq-color-border-error); + } + } .focus-within\:ring-border-focus { &:focus-within { --tw-ring-color: var(--seq-color-border-focus); @@ -1665,6 +1685,11 @@ export const styles = String.raw` box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } + .focus\:ring-border-error { + &:focus { + --tw-ring-color: var(--seq-color-border-error); + } + } .focus\:ring-border-focus { &:focus { --tw-ring-color: var(--seq-color-border-focus); @@ -1792,6 +1817,11 @@ export const styles = String.raw` transition-timing-function: var(--ease-out); } } + .data-\[swipe\=end\]\:animate-swipe-out { + &[data-swipe="end"] { + animation: swipe-out 200ms ease-out; + } + } .data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\] { &[data-swipe="move"] { --tw-translate-x: var(--radix-toast-swipe-move-x); @@ -1898,6 +1928,7 @@ export const styles = String.raw` --seq-color-background-raised: rgba(54, 54, 54, 0.7); --seq-color-border-normal: rgba(255, 255, 255, 0.25); --seq-color-border-focus: rgba(255, 255, 255, 0.5); + --seq-color-border-error: rgba(255, 69, 0, 1); --seq-color-button-glass: rgba(255, 255, 255, 0.15); --seq-color-button-emphasis: rgba(0, 0, 0, 0.5); --seq-color-button-inverse: rgba(255, 255, 255, 0.8); @@ -1945,6 +1976,7 @@ export const styles = String.raw` --seq-color-background-raised: rgba(192, 192, 192, 0.7); --seq-color-border-normal: rgba(0, 0, 0, 0.25); --seq-color-border-focus: rgba(0, 0, 0, 0.5); + --seq-color-border-error: rgba(255, 69, 0, 1); --seq-color-button-glass: rgba(0, 0, 0, 0.15); --seq-color-button-emphasis: rgba(255, 255, 255, 0.5); --seq-color-button-inverse: rgba(0, 0, 0, 0.8); @@ -2243,6 +2275,25 @@ export const styles = String.raw` transform: rotate(360deg); } } +@keyframes skeleton { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} +@keyframes swipe-out { + from { + transform: translateX(var(--radix-toast-swipe-end-x)); + } + to { + transform: translateX(100%); + } +} @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { diff --git a/packages/wallet-widget/package.json b/packages/wallet-widget/package.json index 7383ca210..fe551fadc 100644 --- a/packages/wallet-widget/package.json +++ b/packages/wallet-widget/package.json @@ -30,7 +30,7 @@ "typecheck": "tsc --noEmit" }, "dependencies": { - "@0xsequence/design-system": "2.1.6", + "@0xsequence/design-system": "2.1.11", "@0xsequence/hooks": "workspace:*", "@radix-ui/react-popover": "^1.1.11", "dayjs": "^1.11.13", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 736cc04fa..cd3bc584f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -78,8 +78,8 @@ importers: examples/components: dependencies: '@0xsequence/design-system': - specifier: 2.1.6 - version: 2.1.6(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(motion@12.9.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + specifier: 2.1.11 + version: 2.1.11(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(motion@12.9.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@0xsequence/network': specifier: '*' version: 2.3.11(ethers@6.13.7(bufferutil@4.0.9)(utf-8-validate@5.0.10)) @@ -102,8 +102,8 @@ importers: specifier: workspace:* version: link:../../packages/connect '@0xsequence/design-system': - specifier: 2.1.6 - version: 2.1.6(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(motion@12.9.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + specifier: 2.1.11 + version: 2.1.11(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(motion@12.9.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@0xsequence/hooks': specifier: workspace:* version: link:../../packages/hooks @@ -175,8 +175,8 @@ importers: specifier: workspace:* version: link:../../packages/connect '@0xsequence/design-system': - specifier: 2.1.6 - version: 2.1.6(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(motion@12.9.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + specifier: 2.1.11 + version: 2.1.11(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(motion@12.9.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@0xsequence/hooks': specifier: workspace:* version: link:../../packages/hooks @@ -272,8 +272,8 @@ importers: specifier: 2.3.11 version: 2.3.11 '@0xsequence/design-system': - specifier: 2.1.6 - version: 2.1.6(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(motion@12.9.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + specifier: 2.1.11 + version: 2.1.11(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(motion@12.9.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@0xsequence/hooks': specifier: workspace:* version: link:../hooks @@ -351,8 +351,8 @@ importers: specifier: ^2.3.10 version: 2.3.11(ethers@6.13.7(bufferutil@4.0.9)(utf-8-validate@5.0.10)) '@0xsequence/design-system': - specifier: 2.1.6 - version: 2.1.6(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(motion@12.9.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + specifier: 2.1.11 + version: 2.1.11(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(motion@12.9.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@0xsequence/ethauth': specifier: ^1.0.0 version: 1.0.0(ethers@6.13.7(bufferutil@4.0.9)(utf-8-validate@5.0.10)) @@ -523,8 +523,8 @@ importers: specifier: 2.3.11 version: 2.3.11 '@0xsequence/design-system': - specifier: 2.1.6 - version: 2.1.6(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(motion@12.9.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + specifier: 2.1.11 + version: 2.1.11(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(motion@12.9.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@0xsequence/hooks': specifier: workspace:* version: link:../hooks @@ -615,8 +615,8 @@ packages: peerDependencies: ethers: '>=6' - '@0xsequence/design-system@2.1.6': - resolution: {integrity: sha512-XRUAKrzKZBSEkWZFBm/OJq8qaMFtfCe6/n3nhnJSefGUWOuThYbM11muKlFzpT3gD/RJhBOMR1fCOVJXsnfvUA==} + '@0xsequence/design-system@2.1.11': + resolution: {integrity: sha512-wfuY9v2dNQxw9qAYyflwcKzuiiVqm4qqn2Jkoyw/CqxODcqQ3orUsGxjnbyvCWOwvHbH908c4LOZj/TBI6T0Fw==} peerDependencies: motion: '>= 12' react: '>= 17' @@ -7886,7 +7886,7 @@ snapshots: '@0xsequence/utils': 2.3.11(ethers@6.13.7(bufferutil@4.0.9)(utf-8-validate@5.0.10)) ethers: 6.13.7(bufferutil@4.0.9)(utf-8-validate@5.0.10) - '@0xsequence/design-system@2.1.6(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(motion@12.9.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': + '@0xsequence/design-system@2.1.11(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(motion@12.9.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': dependencies: '@radix-ui/react-aspect-ratio': 1.1.4(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@radix-ui/react-checkbox': 1.2.3(@types/react-dom@19.1.3(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)