Skip to content

Commit 6a6ee83

Browse files
andrewlee348andrewlee348
committed
updated design-system and added send confirmation toasts
1 parent b026b01 commit 6a6ee83

File tree

21 files changed

+165
-96
lines changed

21 files changed

+165
-96
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.2"
99
},
1010
"peerDependencies": {
11-
"@0xsequence/design-system": "2.0.12",
11+
"@0xsequence/design-system": "2.1.6",
1212
"@0xsequence/network": "*",
1313
"wagmi": "^2.14.13"
1414
},

‎examples/next/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"typecheck": "tsc --noEmit"
1111
},
1212
"dependencies": {
13-
"@0xsequence/design-system": "2.0.12",
13+
"@0xsequence/design-system": "2.1.6",
1414
"@0xsequence/network": ">= 2.2.13",
1515
"@0xsequence/checkout": "workspace:*",
1616
"@0xsequence/connect": "workspace:*",

‎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.0.12",
16+
"@0xsequence/design-system": "2.1.6",
1717
"@0xsequence/network": ">= 2.2.13",
1818
"@0xsequence/waas": ">= 2.2.13",
1919
"@0xsequence/wallet-widget": "workspace:*",

‎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.0.12",
33+
"@0xsequence/design-system": "2.1.6",
3434
"@0xsequence/marketplace": "^2.1.3",
3535
"@0xsequence/hooks": "workspace:*",
3636
"pako": "^2.1.0",

‎packages/connect/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"@0xsequence/api": ">=2.3.4",
4141
"@0xsequence/auth": ">= 2.3.4",
4242
"@0xsequence/core": ">= 2.3.4",
43-
"@0xsequence/design-system": "2.0.12",
43+
"@0xsequence/design-system": "2.1.6",
4444
"@0xsequence/ethauth": "^1.0.0",
4545
"@0xsequence/hooks": "workspace:*",
4646
"@0xsequence/indexer": ">= 2.3.4",

‎packages/connect/src/styles.ts‎

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ export const styles = String.raw`
55
:root, :host {
66
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
77
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8-
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9-
"Courier New", monospace;
8+
--font-mono: "Roboto", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
109
--color-violet-600: oklch(0.541 0.281 293.009);
1110
--color-black: #000;
1211
--color-white: #fff;
@@ -19,14 +18,19 @@ export const styles = String.raw`
1918
--text-base--line-height: calc(1.5 / 1);
2019
--text-xl: 1.25rem;
2120
--text-xl--line-height: calc(1.75 / 1.25);
22-
--text-3xl: 1.875rem;
23-
--text-3xl--line-height: calc(2.25 / 1.875);
21+
--text-2xl: 1.5rem;
22+
--text-2xl--line-height: calc(2 / 1.5);
23+
--text-4xl: 2.25rem;
24+
--text-4xl--line-height: calc(2.5 / 2.25);
25+
--text-6xl: 3.75rem;
26+
--text-6xl--line-height: 1;
2427
--font-weight-normal: 400;
2528
--font-weight-medium: 500;
2629
--font-weight-semibold: 600;
2730
--font-weight-bold: 700;
2831
--tracking-normal: 0em;
2932
--tracking-wide: 0.025em;
33+
--tracking-widest: 0.1em;
3034
--radius-xs: 0.125rem;
3135
--radius-sm: 0.25rem;
3236
--radius-md: 0.375rem;
@@ -420,9 +424,6 @@ export const styles = String.raw`
420424
.h-16 {
421425
height: calc(var(--spacing) * 16);
422426
}
423-
.h-20 {
424-
height: calc(var(--spacing) * 20);
425-
}
426427
.h-24 {
427428
height: calc(var(--spacing) * 24);
428429
}
@@ -507,15 +508,9 @@ export const styles = String.raw`
507508
.w-13 {
508509
width: calc(var(--spacing) * 13);
509510
}
510-
.w-14 {
511-
width: calc(var(--spacing) * 14);
512-
}
513511
.w-16 {
514512
width: calc(var(--spacing) * 16);
515513
}
516-
.w-20 {
517-
width: calc(var(--spacing) * 20);
518-
}
519514
.w-24 {
520515
width: calc(var(--spacing) * 24);
521516
}
@@ -691,6 +686,9 @@ export const styles = String.raw`
691686
.overflow-scroll {
692687
overflow: scroll;
693688
}
689+
.overflow-visible {
690+
overflow: visible;
691+
}
694692
.overflow-x-auto {
695693
overflow-x: auto;
696694
}
@@ -766,9 +764,9 @@ export const styles = String.raw`
766764
border-style: var(--tw-border-style);
767765
border-width: 2px;
768766
}
769-
.border-t-2 {
770-
border-top-style: var(--tw-border-style);
771-
border-top-width: 2px;
767+
.border-b-2 {
768+
border-bottom-style: var(--tw-border-style);
769+
border-bottom-width: 2px;
772770
}
773771
.border-dashed {
774772
--tw-border-style: dashed;
@@ -794,11 +792,11 @@ export const styles = String.raw`
794792
.border-violet-600 {
795793
border-color: var(--color-violet-600);
796794
}
797-
.border-t-primary {
798-
border-top-color: var(--seq-color-primary);
795+
.border-b-primary {
796+
border-bottom-color: var(--seq-color-primary);
799797
}
800-
.border-t-transparent {
801-
border-top-color: transparent;
798+
.border-b-transparent {
799+
border-bottom-color: transparent;
802800
}
803801
.bg-background-backdrop {
804802
background-color: var(--seq-color-background-backdrop);
@@ -1005,14 +1003,22 @@ export const styles = String.raw`
10051003
text-align: center;
10061004
}
10071005
.font-body {
1008-
font-family: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
1006+
font-family: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
10091007
}
10101008
.font-mono {
1011-
font-family: var(--font-mono);
1009+
font-family: "Roboto", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
10121010
}
1013-
.text-3xl {
1014-
font-size: var(--text-3xl);
1015-
line-height: var(--tw-leading, var(--text-3xl--line-height));
1011+
.text-2xl {
1012+
font-size: var(--text-2xl);
1013+
line-height: var(--tw-leading, var(--text-2xl--line-height));
1014+
}
1015+
.text-4xl {
1016+
font-size: var(--text-4xl);
1017+
line-height: var(--tw-leading, var(--text-4xl--line-height));
1018+
}
1019+
.text-6xl {
1020+
font-size: var(--text-6xl);
1021+
line-height: var(--tw-leading, var(--text-6xl--line-height));
10161022
}
10171023
.text-base {
10181024
font-size: var(--text-base);
@@ -1072,9 +1078,13 @@ export const styles = String.raw`
10721078
--tw-leading: calc(var(--spacing) * 8);
10731079
line-height: calc(var(--spacing) * 8);
10741080
}
1075-
.leading-9 {
1076-
--tw-leading: calc(var(--spacing) * 9);
1077-
line-height: calc(var(--spacing) * 9);
1081+
.leading-10 {
1082+
--tw-leading: calc(var(--spacing) * 10);
1083+
line-height: calc(var(--spacing) * 10);
1084+
}
1085+
.leading-15 {
1086+
--tw-leading: calc(var(--spacing) * 15);
1087+
line-height: calc(var(--spacing) * 15);
10781088
}
10791089
.leading-\[inherit\] {
10801090
--tw-leading: inherit;
@@ -1108,6 +1118,10 @@ export const styles = String.raw`
11081118
--tw-tracking: var(--tracking-wide);
11091119
letter-spacing: var(--tracking-wide);
11101120
}
1121+
.tracking-widest {
1122+
--tw-tracking: var(--tracking-widest);
1123+
letter-spacing: var(--tracking-widest);
1124+
}
11111125
.text-ellipsis {
11121126
text-overflow: ellipsis;
11131127
}
@@ -1856,7 +1870,7 @@ export const styles = String.raw`
18561870
--seq-color-inverse: rgba(0, 0, 0, 1);
18571871
--seq-color-background-primary: rgba(0, 0, 0, 1);
18581872
--seq-color-background-secondary: rgba(255, 255, 255, 0.1);
1859-
--seq-color-background-contrast: rgba(255, 255, 255, 0.5);
1873+
--seq-color-background-contrast: rgba(0, 0, 0, 0.5);
18601874
--seq-color-background-muted: rgba(255, 255, 255, 0.05);
18611875
--seq-color-background-control: rgba(255, 255, 255, 0.25);
18621876
--seq-color-background-inverse: rgba(255, 255, 255, 1);
@@ -1906,7 +1920,7 @@ export const styles = String.raw`
19061920
--seq-color-background-contrast: rgba(244, 244, 244, 0.5);
19071921
--seq-color-background-muted: rgba(0, 0, 0, 0.05);
19081922
--seq-color-background-control: rgba(0, 0, 0, 0.25);
1909-
--seq-color-background-inverse: #rgba(0, 0, 0, 1);
1923+
--seq-color-background-inverse: rgba(0, 0, 0, 1);
19101924
--seq-color-background-backdrop: rgba(221, 221, 221, 0.9);
19111925
--seq-color-background-overlay: rgba(244, 244, 244, 0.7);
19121926
--seq-color-background-raised: rgba(192, 192, 192, 0.7);

‎packages/wallet-widget/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.0.12",
33+
"@0xsequence/design-system": "2.1.6",
3434
"@0xsequence/hooks": "workspace:*",
3535
"@radix-ui/react-popover": "^1.0.7",
3636
"micro-observables": "1.7.2",

‎packages/wallet-widget/src/components/Filter/FilterButton.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useWallets } from '@0xsequence/connect'
2-
import { GearIcon, cn, cardVariants, Text } from '@0xsequence/design-system'
2+
import { FilterIcon, cn, cardVariants, Text } from '@0xsequence/design-system'
33
import { AnimatePresence } from 'motion/react'
44
import { useMemo, useState } from 'react'
55

@@ -28,12 +28,12 @@ export const FilterButton = ({
2828

2929
return (
3030
<div
31-
className={cn(cardVariants({ clickable: true }), 'flex items-center justify-center p-2 relative')}
31+
className={cn(cardVariants({ clickable: true }), 'flex items-center justify-center p-2 relative overflow-visible')}
3232
style={{ height: '52px', width: '52px' }}
3333
onClick={() => setIsOpen(true)}
3434
>
35-
<GearIcon size="xl" color="white" />
36-
<div className="absolute top-0 right-0">
35+
<FilterIcon size="md" color="white" />
36+
<div className="absolute" style={{ top: '-4px', right: '-4px' }}>
3737
{howManyModifiedFilters > 0 && (
3838
<div className="flex items-center justify-center w-6 h-6 rounded-full" style={{ backgroundColor: '#0076CC' }}>
3939
<Text variant="small" color="white">

‎packages/wallet-widget/src/components/Filter/FilterMenu.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,13 @@ export const FilterMenu = ({
138138
/>
139139
) : (
140140
<StackedIconTag
141-
iconList={[selectedCollections[0].contractInfo?.logoURI]}
141+
iconList={[
142+
<TokenImage
143+
size="xs"
144+
src={selectedCollections[0].contractInfo?.logoURI}
145+
symbol={selectedCollections[0].contractInfo?.name}
146+
/>
147+
]}
142148
label={
143149
<Text variant="normal" color="primary" nowrap style={{ maxWidth: '200px' }} ellipsis>
144150
{selectedCollections[0].contractInfo?.name}
@@ -272,7 +278,14 @@ export const FilterMenu = ({
272278
isSelected={selectedCollectionsObservable.get().length === 0}
273279
onClick={() => setSelectedCollections([])}
274280
>
275-
<MediaIconWrapper iconList={collections.map(collection => collection.contractInfo?.logoURI)} size="sm" />
281+
<MediaIconWrapper
282+
iconList={collections.map(collection => (
283+
<div className="bg-background-backdrop">
284+
<TokenImage src={collection.contractInfo?.logoURI} symbol={collection.contractInfo?.name} />
285+
</div>
286+
))}
287+
size="sm"
288+
/>
276289
<Text color="primary" fontWeight="medium" variant="normal">
277290
All
278291
</Text>

‎packages/wallet-widget/src/components/IconWrappers/MediaIconWrapper.tsx‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const MediaIconWrapper = ({
1616
size = 'base',
1717
shape = 'rounded'
1818
}: {
19-
iconList: string[]
19+
iconList: string[] | React.ReactNode[]
2020
isAccount?: boolean
2121
size?: '4xs' | '2xs' | 'sm' | 'base' | 'lg' | '2lg' | '3lg'
2222
shape?: 'rounded' | 'square'
@@ -70,22 +70,36 @@ export const MediaIconWrapper = ({
7070
transform: 'translateY(-50%)'
7171
}}
7272
>
73-
{isAccount ? (
74-
<div
75-
className={`${shapeClass} border overflow-hidden`}
76-
style={{ width: `calc(${widthClassMap[size]} + 2px)`, height: `calc(${widthClassMap[size]} + 2px)` }}
77-
>
78-
<GradientAvatar address={icon} className="w-full h-full" />
79-
</div>
73+
{typeof icon === 'string' ? (
74+
<>
75+
{isAccount ? (
76+
<div
77+
className={`flex items-center justify-center ${shapeClass} border overflow-hidden bg-background-primary`}
78+
style={{ width: `calc(${widthClassMap[size]} + 2px)`, height: `calc(${widthClassMap[size]} + 2px)` }}
79+
>
80+
<GradientAvatar address={icon} className="w-full h-full" />
81+
</div>
82+
) : (
83+
<div
84+
className={`flex items-center justify-center ${shapeClass} border overflow-hidden bg-background-primary`}
85+
style={{
86+
width: `calc(${widthClassMap[size]} + 2px)`,
87+
height: `calc(${widthClassMap[size]} + 2px)`
88+
}}
89+
>
90+
<img src={icon} alt="icon" style={{ backgroundColor: 'lightgray' }} />
91+
</div>
92+
)}
93+
</>
8094
) : (
8195
<div
82-
className={`${shapeClass} border overflow-hidden`}
96+
className={`flex items-center justify-center ${shapeClass} border overflow-hidden bg-background-primary`}
8397
style={{
8498
width: `calc(${widthClassMap[size]} + 2px)`,
8599
height: `calc(${widthClassMap[size]} + 2px)`
86100
}}
87101
>
88-
<img src={icon} alt="icon" style={{ backgroundColor: 'lightgray' }} />
102+
{icon}
89103
</div>
90104
)}
91105
</div>

0 commit comments

Comments
 (0)