Skip to content

Commit d33e6fa

Browse files
enesozturkenesozturk
authored
Merge branch 'main' into vue-import
2 parents 0beb0a6 + d592032 commit d33e6fa

File tree

21 files changed

+266
-319
lines changed

21 files changed

+266
-319
lines changed

‎apps/gallery-new/stories/components/wui-icon.stories.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,5 @@ export default {
3030
} as Component
3131

3232
export const Default: Component = {
33-
render: args =>
34-
html`<wui-icon size=${args.size} color=${args.color} name=${args.name}></wui-icon>`
33+
render: args => html`<wui-icon size=${args.size} name=${args.name}></wui-icon>`
3534
}

‎apps/gallery-new/stories/composites/wui-icon-box.stories.ts

Lines changed: 12 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,68 +3,44 @@ import '@reown/appkit-ui-new/src/composites/wui-icon-box'
33
import type { WuiIconBox } from '@reown/appkit-ui-new/src/composites/wui-icon-box'
44
import { html } from 'lit'
55

6-
import {
7-
backgroundOptions,
8-
colorOptions,
9-
iconBoxBorderOptions,
10-
iconOptions
11-
} from '../../utils/PresetUtils'
6+
import { backgroundColorOptions, iconColorOptions, iconOptions } from '../../utils/PresetUtils'
127

138
type Component = Meta<WuiIconBox>
149

1510
export default {
1611
title: 'Composites/wui-icon-box',
1712
args: {
18-
size: 'md',
19-
backgroundColor: 'accent-100',
20-
iconColor: 'accent-100',
21-
icon: 'copy',
22-
background: 'transparent',
23-
border: false,
24-
borderColor: undefined
13+
iconColor: 'inverse',
14+
iconSize: 'xl',
15+
backgroundColor: 'foregroundSecondary',
16+
icon: 'qrCode'
2517
},
26-
2718
argTypes: {
28-
size: {
29-
defaultValue: 'md',
30-
options: ['sm', 'md', 'lg', 'xl'],
19+
iconColor: {
20+
options: iconColorOptions,
3121
control: { type: 'select' }
3222
},
33-
backgroundColor: {
34-
options: colorOptions,
23+
iconSize: {
24+
options: ['xl', 'md', 'sm', 'xs'],
3525
control: { type: 'select' }
3626
},
37-
iconColor: {
38-
options: colorOptions,
27+
backgroundColor: {
28+
options: backgroundColorOptions,
3929
control: { type: 'select' }
4030
},
4131
icon: {
4232
options: iconOptions,
4333
control: { type: 'select' }
44-
},
45-
background: {
46-
options: backgroundOptions,
47-
control: { type: 'select' }
48-
},
49-
border: {
50-
control: { type: 'boolean' }
51-
},
52-
borderColor: {
53-
options: iconBoxBorderOptions,
54-
control: { type: 'select' }
5534
}
5635
}
5736
} as Component
5837

5938
export const Default: Component = {
6039
render: args =>
6140
html`<wui-icon-box
62-
size=${args.size}
6341
iconColor=${args.iconColor}
42+
iconSize=${args.iconSize}
6443
backgroundColor=${args.backgroundColor}
6544
icon=${args.icon}
66-
background=${args.background}
67-
?border=${args.border}
68-
.borderColor=${args.borderColor}
6945
></wui-icon-box>`
7046
}

‎apps/gallery-new/stories/composites/wui-list-select-wallet.stories.ts

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import type { Meta } from '@storybook/web-components'
2+
import '@reown/appkit-ui-new/src/composites/wui-list-select-wallet'
3+
import type { WuiListSelectWallet } from '@reown/appkit-ui-new/src/composites/wui-list-select-wallet'
4+
import { html } from 'lit'
5+
import '../../components/gallery-container'
6+
import { walletImagesOptions } from '../../utils/PresetUtils'
7+
8+
type Component = Meta<WuiListSelectWallet>
9+
10+
export default {
11+
title: 'Composites/wui-list-select-wallet',
12+
args: {
13+
imageSrc: walletImagesOptions[0]?.src,
14+
name: 'MetaMask',
15+
tagLabel: 'LABEL',
16+
qrCode: false,
17+
allWallets: false,
18+
disabled: false
19+
},
20+
argTypes: {
21+
imageSrc: {
22+
control: { type: 'text' }
23+
},
24+
name: {
25+
control: { type: 'text' }
26+
},
27+
tagLabel: {
28+
control: { type: 'text' }
29+
},
30+
qrCode: {
31+
control: { type: 'boolean' }
32+
},
33+
allWallets: {
34+
control: { type: 'boolean' }
35+
},
36+
disabled: {
37+
control: { type: 'boolean' }
38+
}
39+
}
40+
} as Component
41+
42+
export const Default: Component = {
43+
render: args =>
44+
html`<gallery-container width="328">
45+
<wui-list-select-wallet
46+
.imageSrc=${args.imageSrc}
47+
.tagLabel=${args.tagLabel}
48+
name=${args.name}
49+
?qrcode=${args.qrCode}
50+
?allwallets=${args.allWallets}
51+
?disabled=${args.disabled}
52+
></wui-list-select-wallet>
53+
</gallery-container>`
54+
}

‎apps/gallery-new/stories/composites/wui-list-wallet.stories.ts

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎apps/gallery-new/utils/PresetUtils.ts

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,12 @@ export const textColorOptions: TextColorType[] = [
4242
'accent-primary'
4343
]
4444

45-
export const colorOptions = []
45+
export const iconColorOptions = ['accent', 'inverse']
46+
47+
// @TODO: Deprecate this
48+
export const colorOptions = iconColorOptions
49+
50+
export const backgroundColorOptions = ['foregroundSecondary', 'foregroundAccent010']
4651

4752
export const textOptions: TextType[] = [
4853
'h1-regular-mono',
@@ -125,6 +130,10 @@ export const gridContentOptions: GridContentType[] = [
125130
]
126131

127132
export const walletImagesOptions = [
133+
{
134+
src: 'https://explorer-api.walletconnect.org/v3/logo/md/018b2d52-10e9-4158-1fde-a5d5bac5aa00?projectId=c1781fc385454899a2b1385a2b83df3b',
135+
walletName: 'MetaMask'
136+
},
128137
{
129138
src: 'https://explorer-api.walletconnect.com/w3m/v1/getWalletImage/7a33d7f1-3d12-4b5c-f3ee-5cd83cb1b500?projectId=c1781fc385454899a2b1385a2b83df3b',
130139
walletName: 'Rainbow'
@@ -340,8 +349,6 @@ export const iconBoxBorderOptions: IconBoxBorderType[] = [
340349
'wui-accent-glass-010'
341350
]
342351

343-
export const tagLabelOptions = ['get wallet', 'installed', 'qr code', 'recent']
344-
345352
export const signTypedData = {
346353
domain: {
347354
name: 'Ether Mail',

‎packages/ui-new/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export * from './src/composites/wui-link/index.js'
3535
export * from './src/composites/wui-list-item/index.js'
3636
export * from './src/composites/wui-transaction-list-item/index.js'
3737
export * from './src/composites/wui-transaction-list-item-loader/index.js'
38-
export * from './src/composites/wui-list-wallet/index.js'
38+
export * from './src/composites/wui-list-select-wallet/index.js'
3939
export * from './src/composites/wui-logo-select/index.js'
4040
export * from './src/composites/wui-logo/index.js'
4141
export * from './src/composites/wui-network-button/index.js'

‎packages/ui-new/src/assets/svg/all-wallets.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import { svg } from 'lit'
22

3-
export const allWalletsSvg = svg`<svg fill="none" viewBox="0 0 24 24">
4-
<path
5-
style="fill: var(--wui-color-accent-100);"
6-
d="M10.2 6.6a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0ZM21 6.6a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0ZM10.2 17.4a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0ZM21 17.4a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0Z"
7-
/>
3+
export const allWalletsSvg = svg`<svg viewBox="0 0 24 25" fill="none">
4+
<path d="M11.25 8C11.25 8.74168 11.0301 9.46671 10.618 10.0834C10.206 10.7001 9.62029 11.1807 8.93506 11.4646C8.24984 11.7484 7.49584 11.8226 6.76841 11.6779C6.04098 11.5333 5.3728 11.1761 4.84835 10.6517C4.3239 10.1272 3.96675 9.45902 3.82206 8.73159C3.67736 8.00416 3.75162 7.25016 4.03545 6.56494C4.31928 5.87972 4.79993 5.29405 5.41661 4.88199C6.0333 4.46994 6.75832 4.25 7.5 4.25C8.49456 4.25 9.44839 4.64509 10.1517 5.34835C10.8549 6.05161 11.25 7.00544 11.25 8ZM16.5 11.75C17.2417 11.75 17.9667 11.5301 18.5834 11.118C19.2001 10.706 19.6807 10.1203 19.9646 9.43506C20.2484 8.74984 20.3226 7.99584 20.1779 7.26841C20.0333 6.54098 19.6761 5.8728 19.1517 5.34835C18.6272 4.8239 17.959 4.46675 17.2316 4.32206C16.5042 4.17736 15.7502 4.25162 15.0649 4.53545C14.3797 4.81928 13.794 5.29993 13.382 5.91661C12.9699 6.5333 12.75 7.25832 12.75 8C12.75 8.99456 13.1451 9.94839 13.8484 10.6517C14.5516 11.3549 15.5054 11.75 16.5 11.75ZM7.5 13.25C6.75832 13.25 6.0333 13.4699 5.41661 13.882C4.79993 14.294 4.31928 14.8797 4.03545 15.5649C3.75162 16.2502 3.67736 17.0042 3.82206 17.7316C3.96675 18.459 4.3239 19.1272 4.84835 19.6517C5.3728 20.1761 6.04098 20.5333 6.76841 20.6779C7.49584 20.8226 8.24984 20.7484 8.93506 20.4646C9.62029 20.1807 10.206 19.7001 10.618 19.0834C11.0301 18.4667 11.25 17.7417 11.25 17C11.25 16.0054 10.8549 15.0516 10.1517 14.3484C9.44839 13.6451 8.49456 13.25 7.5 13.25ZM16.5 13.25C15.7583 13.25 15.0333 13.4699 14.4166 13.882C13.7999 14.294 13.3193 14.8797 13.0355 15.5649C12.7516 16.2502 12.6774 17.0042 12.8221 17.7316C12.9668 18.459 13.3239 19.1272 13.8484 19.6517C14.3728 20.1761 15.041 20.5333 15.7684 20.6779C16.4958 20.8226 17.2498 20.7484 17.9351 20.4646C18.6203 20.1807 19.206 19.7001 19.618 19.0834C20.0301 18.4667 20.25 17.7417 20.25 17C20.25 16.0054 19.8549 15.0516 19.1517 14.3484C18.4484 13.6451 17.4946 13.25 16.5 13.25Z" fill="currentColor"/>
85
</svg>`

‎packages/ui-new/src/assets/svg/qr-code.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { svg } from 'lit'
22

3-
export const qrCodeIcon = svg`<svg fill="none" viewBox="0 0 20 20">
4-
<path
5-
fill="currentColor"
6-
d="M3 6a3 3 0 0 1 3-3h1a1 1 0 1 0 0-2H6a5 5 0 0 0-5 5v1a1 1 0 0 0 2 0V6ZM13 1a1 1 0 1 0 0 2h1a3 3 0 0 1 3 3v1a1 1 0 1 0 2 0V6a5 5 0 0 0-5-5h-1ZM3 13a1 1 0 1 0-2 0v1a5 5 0 0 0 5 5h1a1 1 0 1 0 0-2H6a3 3 0 0 1-3-3v-1ZM19 13a1 1 0 1 0-2 0v1a3 3 0 0 1-3 3h-1a1 1 0 1 0 0 2h1.01a5 5 0 0 0 5-5v-1ZM5.3 6.36c-.04.2-.04.43-.04.89s0 .7.05.89c.14.52.54.92 1.06 1.06.19.05.42.05.89.05.46 0 .7 0 .88-.05A1.5 1.5 0 0 0 9.2 8.14c.06-.2.06-.43.06-.89s0-.7-.06-.89A1.5 1.5 0 0 0 8.14 5.3c-.19-.05-.42-.05-.88-.05-.47 0-.7 0-.9.05a1.5 1.5 0 0 0-1.05 1.06ZM10.8 6.36c-.04.2-.04.43-.04.89s0 .7.05.89c.14.52.54.92 1.06 1.06.19.05.42.05.89.05.46 0 .7 0 .88-.05a1.5 1.5 0 0 0 1.06-1.06c.06-.2.06-.43.06-.89s0-.7-.06-.89a1.5 1.5 0 0 0-1.06-1.06c-.19-.05-.42-.05-.88-.05-.47 0-.7 0-.9.05a1.5 1.5 0 0 0-1.05 1.06ZM5.26 12.75c0-.46 0-.7.05-.89a1.5 1.5 0 0 1 1.06-1.06c.19-.05.42-.05.89-.05.46 0 .7 0 .88.05.52.14.93.54 1.06 1.06.06.2.06.43.06.89s0 .7-.06.89a1.5 1.5 0 0 1-1.06 1.06c-.19.05-.42.05-.88.05-.47 0-.7 0-.9-.05a1.5 1.5 0 0 1-1.05-1.06c-.05-.2-.05-.43-.05-.89ZM10.8 11.86c-.04.2-.04.43-.04.89s0 .7.05.89c.14.52.54.92 1.06 1.06.19.05.42.05.89.05.46 0 .7 0 .88-.05a1.5 1.5 0 0 0 1.06-1.06c.06-.2.06-.43.06-.89s0-.7-.06-.89a1.5 1.5 0 0 0-1.06-1.06c-.19-.05-.42-.05-.88-.05-.47 0-.7 0-.9.05a1.5 1.5 0 0 0-1.05 1.06Z"
7-
/>
8-
</svg>`
3+
export const qrCodeIcon = svg`<svg viewBox="0 0 24 25" fill="none">
4+
<path d="M9.75 4.25H5.25C4.85218 4.25 4.47064 4.40804 4.18934 4.68934C3.90804 4.97064 3.75 5.35218 3.75 5.75V10.25C3.75 10.6478 3.90804 11.0294 4.18934 11.3107C4.47064 11.592 4.85218 11.75 5.25 11.75H9.75C10.1478 11.75 10.5294 11.592 10.8107 11.3107C11.092 11.0294 11.25 10.6478 11.25 10.25V5.75C11.25 5.35218 11.092 4.97064 10.8107 4.68934C10.5294 4.40804 10.1478 4.25 9.75 4.25ZM9.75 10.25H5.25V5.75H9.75V10.25ZM9.75 13.25H5.25C4.85218 13.25 4.47064 13.408 4.18934 13.6893C3.90804 13.9706 3.75 14.3522 3.75 14.75V19.25C3.75 19.6478 3.90804 20.0294 4.18934 20.3107C4.47064 20.592 4.85218 20.75 5.25 20.75H9.75C10.1478 20.75 10.5294 20.592 10.8107 20.3107C11.092 20.0294 11.25 19.6478 11.25 19.25V14.75C11.25 14.3522 11.092 13.9706 10.8107 13.6893C10.5294 13.408 10.1478 13.25 9.75 13.25ZM9.75 19.25H5.25V14.75H9.75V19.25ZM18.75 4.25H14.25C13.8522 4.25 13.4706 4.40804 13.1893 4.68934C12.908 4.97064 12.75 5.35218 12.75 5.75V10.25C12.75 10.6478 12.908 11.0294 13.1893 11.3107C13.4706 11.592 13.8522 11.75 14.25 11.75H18.75C19.1478 11.75 19.5294 11.592 19.8107 11.3107C20.092 11.0294 20.25 10.6478 20.25 10.25V5.75C20.25 5.35218 20.092 4.97064 19.8107 4.68934C19.5294 4.40804 19.1478 4.25 18.75 4.25ZM18.75 10.25H14.25V5.75H18.75V10.25ZM12.75 17V14C12.75 13.8011 12.829 13.6103 12.9697 13.4697C13.1103 13.329 13.3011 13.25 13.5 13.25C13.6989 13.25 13.8897 13.329 14.0303 13.4697C14.171 13.6103 14.25 13.8011 14.25 14V17C14.25 17.1989 14.171 17.3897 14.0303 17.5303C13.8897 17.671 13.6989 17.75 13.5 17.75C13.3011 17.75 13.1103 17.671 12.9697 17.5303C12.829 17.3897 12.75 17.1989 12.75 17ZM20.25 15.5C20.25 15.6989 20.171 15.8897 20.0303 16.0303C19.8897 16.171 19.6989 16.25 19.5 16.25H17.25V20C17.25 20.1989 17.171 20.3897 17.0303 20.5303C16.8897 20.671 16.6989 20.75 16.5 20.75H13.5C13.3011 20.75 13.1103 20.671 12.9697 20.5303C12.829 20.3897 12.75 20.1989 12.75 20C12.75 19.8011 12.829 19.6103 12.9697 19.4697C13.1103 19.329 13.3011 19.25 13.5 19.25H15.75V14C15.75 13.8011 15.829 13.6103 15.9697 13.4697C16.1103 13.329 16.3011 13.25 16.5 13.25C16.6989 13.25 16.8897 13.329 17.0303 13.4697C17.171 13.6103 17.25 13.8011 17.25 14V14.75H19.5C19.6989 14.75 19.8897 14.829 20.0303 14.9697C20.171 15.1103 20.25 15.3011 20.25 15.5ZM20.25 18.5V20C20.25 20.1989 20.171 20.3897 20.0303 20.5303C19.8897 20.671 19.6989 20.75 19.5 20.75C19.3011 20.75 19.1103 20.671 18.9697 20.5303C18.829 20.3897 18.75 20.1989 18.75 20V18.5C18.75 18.3011 18.829 18.1103 18.9697 17.9697C19.1103 17.829 19.3011 17.75 19.5 17.75C19.6989 17.75 19.8897 17.829 20.0303 17.9697C20.171 18.1103 20.25 18.3011 20.25 18.5Z" fill="currentColor"/>
5+
</svg>
6+
`

‎packages/ui-new/src/components/wui-text/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { vars } from '../../utils/ThemeHelperUtil.js'
99

1010
// -- Constants ------------------------------------------ //
1111

12-
const TEXT_VARS_BY_COLOR = {
12+
export const TEXT_VARS_BY_COLOR = {
1313
/* Colors */
1414
primary: vars.tokens.theme.textPrimary,
1515
secondary: vars.tokens.theme.textSecondary,

‎packages/ui-new/src/composites/wui-button/styles.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,4 +72,9 @@ export default css`
7272
button:active:enabled {
7373
border-radius: ${({ borderRadius }) => borderRadius[128]};
7474
}
75+
76+
/* -- Disabled states --------------------------------------------------- */
77+
button:disabled {
78+
opacity: 0.3;
79+
}
7580
`

‎packages/ui-new/src/composites/wui-icon-box/index.ts

Lines changed: 27 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -4,71 +4,51 @@ import { property } from 'lit/decorators.js'
44
import '../../components/wui-icon/index.js'
55
import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
66
import type {
7-
BackgroundType,
8-
ColorType,
9-
IconBoxBorderType,
10-
IconType,
11-
SizeType
7+
BackgroundColorType,
8+
IconColorType,
9+
IconSizeType,
10+
IconType
1211
} from '../../utils/TypeUtil.js'
1312
import { customElement } from '../../utils/WebComponentsUtil.js'
1413
import styles from './styles.js'
14+
import { vars } from '../../utils/ThemeHelperUtil.js'
15+
16+
// -- Constants ------------------------------------------ //
17+
18+
const BACKGROUND_COLOR = {
19+
foregroundSecondary: vars.tokens.theme.foregroundSecondary,
20+
foregroundAccent010: vars.tokens.core.foregroundAccent010
21+
}
22+
23+
// @TODO: move this to <wui-icon> component
24+
const ICON_COLOR = {
25+
accent: vars.tokens.core.iconAccentPrimary,
26+
inverse: vars.tokens.theme.iconInverse
27+
}
1528

1629
@customElement('wui-icon-box')
1730
export class WuiIconBox extends LitElement {
1831
public static override styles = [resetStyles, elementStyles, styles]
1932

2033
// -- State & Properties -------------------------------- //
21-
@property() public size: SizeType = 'md'
22-
23-
@property() public backgroundColor: ColorType = 'accent-100'
24-
25-
@property() public iconColor: ColorType = 'accent-100'
26-
27-
@property() public iconSize?: Exclude<SizeType, 'inherit'>
28-
29-
@property() public background: BackgroundType = 'transparent'
34+
@property() public icon: IconType = 'copy'
3035

31-
@property({ type: Boolean }) public border? = false
36+
@property() public iconColor: IconColorType = 'inverse'
3237

33-
@property() public borderColor?: IconBoxBorderType = 'wui-color-bg-125'
38+
@property() public iconSize?: Exclude<IconSizeType, 'inherit'>
3439

35-
@property() public icon: IconType = 'copy'
40+
@property() public backgroundColor: BackgroundColorType = 'foregroundSecondary'
3641

3742
// -- Render -------------------------------------------- //
3843
public override render() {
39-
const iconSize = this.iconSize || this.size
40-
const isLg = this.size === 'lg'
41-
const isXl = this.size === 'xl'
42-
43-
const bgMix = isLg ? '12%' : '16%'
44-
const borderRadius = isLg ? 'xxs' : isXl ? 's' : '3xl'
45-
const isGray = this.background === 'gray'
46-
const isOpaque = this.background === 'opaque'
47-
const isColorChange =
48-
(this.backgroundColor === 'accent-100' && isOpaque) ||
49-
(this.backgroundColor === 'success-100' && isOpaque) ||
50-
(this.backgroundColor === 'error-100' && isOpaque) ||
51-
(this.backgroundColor === 'inverse-100' && isOpaque)
52-
53-
let bgValueVariable = `var(--wui-color-${this.backgroundColor})`
54-
55-
if (isColorChange) {
56-
bgValueVariable = `var(--wui-icon-box-bg-${this.backgroundColor})`
57-
} else if (isGray) {
58-
bgValueVariable = `var(--wui-color-gray-${this.backgroundColor})`
59-
}
60-
6144
this.style.cssText = `
62-
--local-bg-value: ${bgValueVariable};
63-
--local-bg-mix: ${isColorChange || isGray ? `100%` : bgMix};
64-
--local-border-radius: var(--wui-border-radius-${borderRadius});
65-
--local-size: var(--wui-icon-box-size-${this.size});
66-
--local-border: ${this.borderColor === 'wui-color-bg-125' ? `2px` : `1px`} solid ${
67-
this.border ? `var(--${this.borderColor})` : `transparent`
68-
}
45+
--local-bg-color: ${BACKGROUND_COLOR[this.backgroundColor]};
46+
--local-icon-color: ${ICON_COLOR[this.iconColor]};
6947
`
7048

71-
return html` <wui-icon color=${this.iconColor} size=${iconSize} name=${this.icon}></wui-icon> `
49+
return html`
50+
<wui-icon color=${this.iconColor} size=${this.iconSize} name=${this.icon}></wui-icon>
51+
`
7252
}
7353
}
7454

0 commit comments

Comments
 (0)