feat: wallet list select component (#3279)

Co-authored-by: Enes <enesozturk.d@gmail.com>
reown-com · Nov 20, 2024 · d592032 · d592032
1 parent 2c6b9d3
commit d592032
Show file tree

Hide file tree

Showing 21 changed files with 266 additions and 319 deletions.
diff --git a/apps/gallery-new/stories/components/wui-icon.stories.ts b/apps/gallery-new/stories/components/wui-icon.stories.ts
@@ -30,6 +30,5 @@ export default {
 } as Component
 
 export const Default: Component = {
-  render: args =>
-    html`<wui-icon size=${args.size} color=${args.color} name=${args.name}></wui-icon>`
+  render: args => html`<wui-icon size=${args.size} name=${args.name}></wui-icon>`
 }
diff --git a/apps/gallery-new/stories/composites/wui-icon-box.stories.ts b/apps/gallery-new/stories/composites/wui-icon-box.stories.ts
@@ -3,68 +3,44 @@ import '@reown/appkit-ui-new/src/composites/wui-icon-box'
 import type { WuiIconBox } from '@reown/appkit-ui-new/src/composites/wui-icon-box'
 import { html } from 'lit'
 
-import {
-  backgroundOptions,
-  colorOptions,
-  iconBoxBorderOptions,
-  iconOptions
-} from '../../utils/PresetUtils'
+import { backgroundColorOptions, iconColorOptions, iconOptions } from '../../utils/PresetUtils'
 
 type Component = Meta<WuiIconBox>
 
 export default {
   title: 'Composites/wui-icon-box',
   args: {
-    size: 'md',
-    backgroundColor: 'accent-100',
-    iconColor: 'accent-100',
-    icon: 'copy',
-    background: 'transparent',
-    border: false,
-    borderColor: undefined
+    iconColor: 'inverse',
+    iconSize: 'xl',
+    backgroundColor: 'foregroundSecondary',
+    icon: 'qrCode'
   },
-
   argTypes: {
-    size: {
-      defaultValue: 'md',
-      options: ['sm', 'md', 'lg', 'xl'],
+    iconColor: {
+      options: iconColorOptions,
       control: { type: 'select' }
     },
-    backgroundColor: {
-      options: colorOptions,
+    iconSize: {
+      options: ['xl', 'md', 'sm', 'xs'],
       control: { type: 'select' }
     },
-    iconColor: {
-      options: colorOptions,
+    backgroundColor: {
+      options: backgroundColorOptions,
       control: { type: 'select' }
     },
     icon: {
       options: iconOptions,
       control: { type: 'select' }
-    },
-    background: {
-      options: backgroundOptions,
-      control: { type: 'select' }
-    },
-    border: {
-      control: { type: 'boolean' }
-    },
-    borderColor: {
-      options: iconBoxBorderOptions,
-      control: { type: 'select' }
     }
   }
 } as Component
 
 export const Default: Component = {
   render: args =>
     html`<wui-icon-box
-      size=${args.size}
       iconColor=${args.iconColor}
+      iconSize=${args.iconSize}
       backgroundColor=${args.backgroundColor}
       icon=${args.icon}
-      background=${args.background}
-      ?border=${args.border}
-      .borderColor=${args.borderColor}
     ></wui-icon-box>`
 }
diff --git a/apps/gallery-new/stories/composites/wui-list-select-wallet.stories.ts b/apps/gallery-new/stories/composites/wui-list-select-wallet.stories.ts
@@ -0,0 +1,54 @@
+import type { Meta } from '@storybook/web-components'
+import '@reown/appkit-ui-new/src/composites/wui-list-select-wallet'
+import type { WuiListSelectWallet } from '@reown/appkit-ui-new/src/composites/wui-list-select-wallet'
+import { html } from 'lit'
+import '../../components/gallery-container'
+import { walletImagesOptions } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiListSelectWallet>
+
+export default {
+  title: 'Composites/wui-list-select-wallet',
+  args: {
+    imageSrc: walletImagesOptions[0]?.src,
+    name: 'MetaMask',
+    tagLabel: 'LABEL',
+    qrCode: false,
+    allWallets: false,
+    disabled: false
+  },
+  argTypes: {
+    imageSrc: {
+      control: { type: 'text' }
+    },
+    name: {
+      control: { type: 'text' }
+    },
+    tagLabel: {
+      control: { type: 'text' }
+    },
+    qrCode: {
+      control: { type: 'boolean' }
+    },
+    allWallets: {
+      control: { type: 'boolean' }
+    },
+    disabled: {
+      control: { type: 'boolean' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html`<gallery-container width="328">
+      <wui-list-select-wallet
+        .imageSrc=${args.imageSrc}
+        .tagLabel=${args.tagLabel}
+        name=${args.name}
+        ?qrcode=${args.qrCode}
+        ?allwallets=${args.allWallets}
+        ?disabled=${args.disabled}
+      ></wui-list-select-wallet>
+    </gallery-container>`
+}
diff --git a/apps/gallery-new/stories/composites/wui-list-wallet.stories.ts b/apps/gallery-new/stories/composites/wui-list-wallet.stories.ts
diff --git a/apps/gallery-new/utils/PresetUtils.ts b/apps/gallery-new/utils/PresetUtils.ts
@@ -42,7 +42,12 @@ export const textColorOptions: TextColorType[] = [
   'accent-primary'
 ]
 
-export const colorOptions = []
+export const iconColorOptions = ['accent', 'inverse']
+
+// @TODO: Deprecate this
+export const colorOptions = iconColorOptions
+
+export const backgroundColorOptions = ['foregroundSecondary', 'foregroundAccent010']
 
 export const textOptions: TextType[] = [
   'h1-regular-mono',
@@ -125,6 +130,10 @@ export const gridContentOptions: GridContentType[] = [
 ]
 
 export const walletImagesOptions = [
+  {
+    src: 'https://explorer-api.walletconnect.org/v3/logo/md/018b2d52-10e9-4158-1fde-a5d5bac5aa00?projectId=c1781fc385454899a2b1385a2b83df3b',
+    walletName: 'MetaMask'
+  },
   {
     src: 'https://explorer-api.walletconnect.com/w3m/v1/getWalletImage/7a33d7f1-3d12-4b5c-f3ee-5cd83cb1b500?projectId=c1781fc385454899a2b1385a2b83df3b',
     walletName: 'Rainbow'
@@ -340,8 +349,6 @@ export const iconBoxBorderOptions: IconBoxBorderType[] = [
   'wui-accent-glass-010'
 ]
 
-export const tagLabelOptions = ['get wallet', 'installed', 'qr code', 'recent']
-
 export const signTypedData = {
   domain: {
     name: 'Ether Mail',

diff --git a/packages/ui-new/index.ts b/packages/ui-new/index.ts
@@ -35,7 +35,7 @@ export * from './src/composites/wui-link/index.js'
 export * from './src/composites/wui-list-item/index.js'
 export * from './src/composites/wui-transaction-list-item/index.js'
 export * from './src/composites/wui-transaction-list-item-loader/index.js'
-export * from './src/composites/wui-list-wallet/index.js'
+export * from './src/composites/wui-list-select-wallet/index.js'
 export * from './src/composites/wui-logo-select/index.js'
 export * from './src/composites/wui-logo/index.js'
 export * from './src/composites/wui-network-button/index.js'

diff --git a/packages/ui-new/src/assets/svg/all-wallets.ts b/packages/ui-new/src/assets/svg/all-wallets.ts
@@ -1,8 +1,5 @@
 import { svg } from 'lit'
 
-export const allWalletsSvg = svg`<svg fill="none" viewBox="0 0 24 24">
-  <path
-    style="fill: var(--wui-color-accent-100);"
-    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"
-  />
+export const allWalletsSvg = svg`<svg viewBox="0 0 24 25" fill="none">
+  <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"/>
 </svg>`
diff --git a/packages/ui-new/src/assets/svg/qr-code.ts b/packages/ui-new/src/assets/svg/qr-code.ts
@@ -1,8 +1,6 @@
 import { svg } from 'lit'
 
-export const qrCodeIcon = svg`<svg fill="none" viewBox="0 0 20 20">
-  <path
-    fill="currentColor"
-    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"
-  />
-</svg>`
+export const qrCodeIcon = svg`<svg viewBox="0 0 24 25" fill="none">
+<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"/>
+</svg>
+`
diff --git a/packages/ui-new/src/components/wui-text/index.ts b/packages/ui-new/src/components/wui-text/index.ts
@@ -9,7 +9,7 @@ import { vars } from '../../utils/ThemeHelperUtil.js'
 
 // -- Constants ------------------------------------------ //
 
-const TEXT_VARS_BY_COLOR = {
+export const TEXT_VARS_BY_COLOR = {
   /* Colors */
   primary: vars.tokens.theme.textPrimary,
   secondary: vars.tokens.theme.textSecondary,

diff --git a/packages/ui-new/src/composites/wui-button/styles.ts b/packages/ui-new/src/composites/wui-button/styles.ts
@@ -72,4 +72,9 @@ export default css`
   button:active:enabled {
     border-radius: ${({ borderRadius }) => borderRadius[128]};
   }
+
+  /* -- Disabled states --------------------------------------------------- */
+  button:disabled {
+    opacity: 0.3;
+  }
 `
diff --git a/packages/ui-new/src/composites/wui-icon-box/index.ts b/packages/ui-new/src/composites/wui-icon-box/index.ts
@@ -4,71 +4,51 @@ import { property } from 'lit/decorators.js'
 import '../../components/wui-icon/index.js'
 import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
 import type {
-  BackgroundType,
-  ColorType,
-  IconBoxBorderType,
-  IconType,
-  SizeType
+  BackgroundColorType,
+  IconColorType,
+  IconSizeType,
+  IconType
 } from '../../utils/TypeUtil.js'
 import { customElement } from '../../utils/WebComponentsUtil.js'
 import styles from './styles.js'
+import { vars } from '../../utils/ThemeHelperUtil.js'
+
+// -- Constants ------------------------------------------ //
+
+const BACKGROUND_COLOR = {
+  foregroundSecondary: vars.tokens.theme.foregroundSecondary,
+  foregroundAccent010: vars.tokens.core.foregroundAccent010
+}
+
+// @TODO: move this to <wui-icon> component
+const ICON_COLOR = {
+  accent: vars.tokens.core.iconAccentPrimary,
+  inverse: vars.tokens.theme.iconInverse
+}
 
 @customElement('wui-icon-box')
 export class WuiIconBox extends LitElement {
   public static override styles = [resetStyles, elementStyles, styles]
 
   // -- State & Properties -------------------------------- //
-  @property() public size: SizeType = 'md'
-
-  @property() public backgroundColor: ColorType = 'accent-100'
-
-  @property() public iconColor: ColorType = 'accent-100'
-
-  @property() public iconSize?: Exclude<SizeType, 'inherit'>
-
-  @property() public background: BackgroundType = 'transparent'
+  @property() public icon: IconType = 'copy'
 
-  @property({ type: Boolean }) public border? = false
+  @property() public iconColor: IconColorType = 'inverse'
 
-  @property() public borderColor?: IconBoxBorderType = 'wui-color-bg-125'
+  @property() public iconSize?: Exclude<IconSizeType, 'inherit'>
 
-  @property() public icon: IconType = 'copy'
+  @property() public backgroundColor: BackgroundColorType = 'foregroundSecondary'
 
   // -- Render -------------------------------------------- //
   public override render() {
-    const iconSize = this.iconSize || this.size
-    const isLg = this.size === 'lg'
-    const isXl = this.size === 'xl'
-
-    const bgMix = isLg ? '12%' : '16%'
-    const borderRadius = isLg ? 'xxs' : isXl ? 's' : '3xl'
-    const isGray = this.background === 'gray'
-    const isOpaque = this.background === 'opaque'
-    const isColorChange =
-      (this.backgroundColor === 'accent-100' && isOpaque) ||
-      (this.backgroundColor === 'success-100' && isOpaque) ||
-      (this.backgroundColor === 'error-100' && isOpaque) ||
-      (this.backgroundColor === 'inverse-100' && isOpaque)
-
-    let bgValueVariable = `var(--wui-color-${this.backgroundColor})`
-
-    if (isColorChange) {
-      bgValueVariable = `var(--wui-icon-box-bg-${this.backgroundColor})`
-    } else if (isGray) {
-      bgValueVariable = `var(--wui-color-gray-${this.backgroundColor})`
-    }
-
     this.style.cssText = `
-       --local-bg-value: ${bgValueVariable};
-       --local-bg-mix: ${isColorChange || isGray ? `100%` : bgMix};
-       --local-border-radius: var(--wui-border-radius-${borderRadius});
-       --local-size: var(--wui-icon-box-size-${this.size});
-       --local-border: ${this.borderColor === 'wui-color-bg-125' ? `2px` : `1px`} solid ${
-         this.border ? `var(--${this.borderColor})` : `transparent`
-       }
+       --local-bg-color: ${BACKGROUND_COLOR[this.backgroundColor]};
+       --local-icon-color: ${ICON_COLOR[this.iconColor]};
    `
 
-    return html` <wui-icon color=${this.iconColor} size=${iconSize} name=${this.icon}></wui-icon> `
+    return html`
+      <wui-icon color=${this.iconColor} size=${this.iconSize} name=${this.icon}></wui-icon>
+    `
   }
 }