feat(swap): 1inch swaps

apps/gallery/stories/composites/wui-button.stories.ts

@@ -13,19 +13,23 @@ export default {
     size: 'md',
     variant: 'fill',
     disabled: false,
+    fullWidth: false,
     iconLeft: undefined,
     iconRight: undefined,
     loading: false
   },
   argTypes: {
     size: {
-      options: ['sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg'],
       control: { type: 'select' }
     },
     variant: {
       options: buttonOptions,
       control: { type: 'select' }
     },
+    fullWidth: {
+      control: { type: 'boolean' }
+    },
     disabled: {
       control: { type: 'boolean' }
     },
@@ -49,6 +53,7 @@ export const Default: Component = {
       size=${args.size}
       ?loading=${args.loading}
       ?disabled=${args.disabled}
+      ?fullWidth=${args.fullWidth}
       variant=${args.variant}
     >
       ${args.iconLeft

apps/gallery/stories/composites/wui-details-group.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-cta-button'
+import type { WuiDetailsGroup } from '@web3modal/ui/src/composites/wui-details-group'
+import { html } from 'lit'
+import '../../components/gallery-container'
+
+type Component = Meta<WuiDetailsGroup>
+
+export default {
+  title: 'Composites/wui-details-group',
+  args: {}
+} as Component
+
+export const Default: Component = {
+  render: () => html`
+    <gallery-container width="336">
+      <wui-details-group>
+        <wui-details-group-item name=${'Sending'}>
+          <wui-text variant="paragraph-400" color="fg-100">2 AVAX</wui-text>
+        </wui-details-group-item>
+        <wui-details-group-item name=${'To'}>
+          <wui-text variant="paragraph-400" color="fg-100">0x276...f0ed7</wui-text>
+        </wui-details-group-item>
+      </wui-details-group>
+    </gallery-container>
+  `
+}

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

@@ -0,0 +1,34 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-list-item'
+import type { WuiTokenListItem } from '@web3modal/ui/src/composites/wui-token-list-item'
+import { html } from 'lit'
+import '../../components/gallery-container'
+import { networkImageSrc } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiTokenListItem>
+
+export default {
+  title: 'Composites/wui-token-list-item',
+  args: {
+    name: 'Ethereum',
+    symbol: 'ETH',
+    price: '$1,740.72',
+    amount: '0.867',
+    imageSrc: networkImageSrc
+  },
+  argTypes: {}
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html`<gallery-container width="336">
+      <wui-token-list-item
+        name=${args.name}
+        symbol=${args.symbol}
+        price=${args.price}
+        amount=${args.amount}
+        .imageSrc=${args.imageSrc}
+      >
+      </wui-token-list-item>
+    </gallery-container>`
+}