:feat integrating account balance

apps/gallery/stories/composites/wui-list-description.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-list-description'
+import type { WuiListDescription } from '@web3modal/ui/src/composites/wui-list-description'
+import { html } from 'lit'
+import '../../components/gallery-container'
+import { colorOptions, iconOptions } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiListDescription>
+
+export default {
+  title: 'Composites/wui-list-description',
+  args: {
+    icon: 'card',
+    text: 'Buy Crypto',
+    tag: 'Popular',
+    description: 'Easy with card or bank account',
+    iconBackgroundColor: 'success-100',
+    iconColor: 'success-100'
+  },
+  argTypes: {
+    icon: {
+      options: iconOptions,
+      control: { type: 'select' }
+    },
+    iconBackgroundColor: {
+      options: colorOptions,
+      control: { type: 'select' }
+    },
+    iconColor: {
+      options: colorOptions,
+      control: { type: 'select' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html` <gallery-container width="336">
+      <wui-list-description
+        icon=${args.icon}
+        text=${args.text}
+        .tag=${args.tag}
+        description=${args.description}
+        iconBackgroundColor=${args.iconBackgroundColor}
+        iconColor=${args.iconColor}
+      ></wui-list-description>
+    </gallery-container>`
+}

apps/gallery/stories/composites/wui-list-token.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-list-token'
+import type { WuiListToken } from '@web3modal/ui/src/composites/wui-list-token'
+import { html } from 'lit'
+import '../../components/gallery-container'
+import { networkImageSrc } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiListToken>
+
+export default {
+  title: 'Composites/wui-list-token',
+  args: {
+    tokenName: 'Ethereum',
+    tokenImageUrl: networkImageSrc,
+    tokenValue: '$1,740.72',
+    tokenAmount: 0.867,
+    tokenCurrency: 'ETH'
+  }
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html` <gallery-container width="336">
+      <wui-list-token
+        tokenName=${args.tokenName}
+        tokenImageUrl=${args.tokenImageUrl}
+        tokenValue=${args.tokenValue}
+        tokenAmount=${args.tokenAmount}
+        tokenCurrency=${args.tokenCurrency}
+      ></wui-list-token>
+    </gallery-container>`
+}

apps/gallery/utils/PresetUtils.ts

@@ -44,6 +44,7 @@ export const colorOptions: ColorType[] = [
 export const textOptions: TextType[] = [
   'micro-700',
   'micro-600',
+  'mini-700',
   'tiny-500',
   'tiny-600',
   'small-500',