:feat new account page + receive flow (#2011)

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

@@ -0,0 +1,18 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-balance'
+import type { WuiBalance } from '@web3modal/ui/src/composites/wui-balance'
+import { html } from 'lit'
+
+type Component = Meta<WuiBalance>
+
+export default {
+  title: 'Composites/wui-balance',
+  args: {
+    dollars: '4,798',
+    pennies: '75'
+  }
+} as Component
+
+export const Default: Component = {
+  render: args => html`<wui-balance pennies=${args.pennies} dollars=${args.dollars}></wui-balance>`
+}

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

@@ -0,0 +1,29 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-banner'
+import type { WuiBanner } from '@web3modal/ui/src/composites/wui-banner'
+import { html } from 'lit'
+import { iconOptions } from '../../utils/PresetUtils'
+import '../../components/gallery-container'
+
+type Component = Meta<WuiBanner>
+
+export default {
+  title: 'Composites/wui-banner',
+  args: {
+    text: 'You can only receive assets on these networks',
+    icon: 'warningCircle'
+  },
+  argTypes: {
+    icon: {
+      options: iconOptions,
+      control: { type: 'select' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html` <gallery-container width="336"
+      ><wui-banner icon=${args.icon} text=${args.text}></wui-banner
+    ></gallery-container>`
+}

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

@@ -0,0 +1,42 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-chip-button'
+import type { WuiChipButton } from '@web3modal/ui/src/composites/wui-chip-button'
+import { html } from 'lit'
+import { chipOptions, iconOptions, walletImagesOptions } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiChipButton>
+
+export default {
+  title: 'Composites/wui-chip-button',
+  args: {
+    variant: 'fill',
+    disabled: false,
+    icon: 'externalLink',
+    imageSrc: walletImagesOptions[3]?.src,
+    text: 'dianeyes.walletconnect.eth'
+  },
+  argTypes: {
+    variant: {
+      options: chipOptions,
+      control: { type: 'select' }
+    },
+    icon: {
+      options: iconOptions,
+      control: { type: 'select' }
+    },
+    disabled: {
+      control: { type: 'boolean' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html`<wui-chip-button
+      icon=${args.icon}
+      text=${args.text}
+      variant=${args.variant}
+      ?disabled=${args.disabled}
+      .imageSrc=${args.imageSrc}
+    ></wui-chip-button>`
+}

apps/gallery/stories/composites/wui-compatible-network.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-compatible-network'
+import type { WuiCompatibleNetwork } from '@web3modal/ui/src/composites/wui-compatible-network'
+import { html } from 'lit'
+import { networkImages } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiCompatibleNetwork>
+
+export default {
+  title: 'Composites/wui-compatible-network',
+  args: {
+    text: 'Only receive assets on these networks"',
+    networkImages
+  }
+} as Component
+
+export const Default: Component = {
+  render: args => html`
+    <wui-compatible-network .networkImages=${args.networkImages} .text=${args.text}>
+    </wui-compatible-network>
+  `
+}

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

@@ -12,7 +12,11 @@ export default {
   args: {
     walletImages: walletImagesOptions,
     imageSrc: networkImageSrc,
-    name: 'Ethereum'
+    name: 'Ethereum',
+    transparent: false
+  },
+  transparent: {
+    control: { type: 'boolean' }
   }
 } as Component
 
@@ -23,6 +27,7 @@ export const Default: Component = {
         .imageSrc=${args.imageSrc}
         ?disabled=${args.disabled}
         name=${args.name}
+        ?transparent=${args.transparent}
       ></wui-list-network>
     </gallery-container>`
 }

apps/gallery/stories/composites/wui-network-image.stories.ts

@@ -16,7 +16,7 @@ export default {
   },
   argTypes: {
     size: {
-      options: ['sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg'],
       control: { type: 'select' }
     }
   }

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

@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-profile-button'
+import type { WuiProfileButton } from '@web3modal/ui/src/composites/wui-profile-button'
+import { html } from 'lit'
+import { address, avatarImageSrc, networkImageSrc } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiProfileButton>
+
+export default {
+  title: 'Composites/wui-profile-button',
+  args: {
+    networkSrc: networkImageSrc,
+    avatarSrc: avatarImageSrc,
+    address,
+    isProfileName: false
+  },
+  argTypes: {
+    isProfileName: {
+      control: { type: 'boolean' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html`<wui-profile-button
+      ?isProfileName=${args.isProfileName}
+      .networkSrc=${args.networkSrc}
+      .avatarSrc=${args.avatarSrc}
+      address=${args.address}
+    ></wui-profile-button>`
+}

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

@@ -0,0 +1,17 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-promo'
+import type { WuiPromo } from '@web3modal/ui/src/composites/wui-promo'
+import { html } from 'lit'
+
+type Component = Meta<WuiPromo>
+
+export default {
+  title: 'Composites/wui-promo',
+  args: {
+    text: 'Activate your account'
+  }
+} as Component
+
+export const Default: Component = {
+  render: args => html`<wui-promo text=${args.text}></wui-promo>`
+}

apps/gallery/stories/composites/wui-tooltip-select.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-tooltip-select'
+import type { WuiTooltipSelect } from '@web3modal/ui/src/composites/wui-tooltip-select'
+import { html } from 'lit'
+import '../../components/gallery-container'
+import { iconOptions } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiTooltipSelect>
+
+export default {
+  title: 'Composites/wui-tooltip-select',
+  args: {
+    icon: 'card',
+    text: 'Buy'
+  },
+  argTypes: {
+    icon: {
+      options: iconOptions,
+      control: { type: 'select' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: args => html`
+    <gallery-container width="120"
+      ><wui-tooltip-select icon=${args.icon} text=${args.text}></wui-tooltip-select>
+    </gallery-container>
+  `
+}

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

@@ -11,18 +11,27 @@ export default {
   title: 'Composites/wui-tooltip',
   args: {
     message: 'Tooltip',
-    placement: 'top'
+    placement: 'top',
+    variant: 'fill'
   },
 
   argTypes: {
     placement: {
       options: placementOptions,
       control: { type: 'select' }
+    },
+    variant: {
+      options: ['fill', 'shade'],
+      control: { type: 'select' }
     }
   }
 } as Component
 
 export const Default: Component = {
   render: args =>
-    html`<wui-tooltip placement=${args.placement} message=${args.message}></wui-tooltip>`
+    html`<wui-tooltip
+      variant=${args.variant}
+      placement=${args.placement}
+      message=${args.message}
+    ></wui-tooltip>`
 }

apps/gallery/utils/PresetUtils.ts

@@ -133,6 +133,14 @@ export const walletImageSrc =
 export const networkImageSrc =
   'https://explorer-api.walletconnect.com/w3m/v1/getAssetImage/692ed6ba-e569-459a-556a-776476829e00?projectId=c1781fc385454899a2b1385a2b83df3b'
 
+export const networkImages = [
+  'https://explorer-api.walletconnect.com/w3m/v1/getAssetImage/692ed6ba-e569-459a-556a-776476829e00?projectId=c1781fc385454899a2b1385a2b83df3b',
+  'https://explorer-api.walletconnect.com/w3m/v1/getAssetImage/30c46e53-e989-45fb-4549-be3bd4eb3b00?projectId=c1781fc385454899a2b1385a2b83df3b',
+  'https://explorer-api.walletconnect.com/w3m/v1/getAssetImage/93564157-2e8e-4ce7-81df-b264dbee9b00?projectId=c1781fc385454899a2b1385a2b83df3b',
+  'https://explorer-api.walletconnect.com/w3m/v1/getAssetImage/ab9c186a-c52f-464b-2906-ca59d760a400?projectId=c1781fc385454899a2b1385a2b83df3b',
+  'https://explorer-api.walletconnect.com/w3m/v1/getAssetImage/41d04d42-da3b-4453-8506-668cc0727900?projectId=c1781fc385454899a2b1385a2b83df3b'
+]
+
 export const avatarImageSrc =
   'https://i.seadn.io/gcs/files/007a5af0d93d561f87c8d026ddd5179e.png?auto=format&dpr=1&w=1000'
 
@@ -179,6 +187,7 @@ export const iconOptions: IconType[] = [
   'compass',
   'copy',
   'cursor',
+  'cursorTransparent',
   'desktop',
   'disconnect',
   'discord',

apps/laboratory/src/pages/library/ethers-wallet.tsx

@@ -0,0 +1,35 @@
+import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/react'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { EthersConstants } from '../../utils/EthersConstants'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { EthersTests } from '../../components/Ethers/EthersTests'
+import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+
+const modal = createWeb3Modal({
+  ethersConfig: defaultConfig({
+    metadata: ConstantsUtil.Metadata,
+    defaultChainId: 1,
+    rpcUrl: 'https://cloudflare-eth.com',
+    enableEmail: true
+  }),
+  chains: EthersConstants.chains,
+  projectId: ConstantsUtil.ProjectId,
+  enableAnalytics: true,
+  metadata: ConstantsUtil.Metadata,
+  termsConditionsUrl: 'https://walletconnect.com/terms',
+  privacyPolicyUrl: 'https://walletconnect.com/privacy',
+  enableOnramp: true,
+  customWallets: ConstantsUtil.CustomWallets,
+  enableWalletFeatures: true
+})
+
+ThemeStore.setModal(modal)
+
+export default function Ethers() {
+  return (
+    <>
+      <Web3ModalButtons />
+      <EthersTests />
+    </>
+  )
+}

apps/laboratory/src/pages/library/wagmi-wallet.tsx

@@ -0,0 +1,51 @@
+import { createWeb3Modal } from '@web3modal/wagmi/react'
+import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import { WagmiProvider } from 'wagmi'
+import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+import { WagmiTests } from '../../components/Wagmi/WagmiTests'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { WagmiConstantsUtil } from '../../utils/WagmiConstants'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+
+const queryClient = new QueryClient()
+
+export const wagmiConfig = defaultWagmiConfig({
+  chains: WagmiConstantsUtil.chains,
+  projectId: ConstantsUtil.ProjectId,
+  metadata: ConstantsUtil.Metadata,
+  enableEmail: true,
+  ssr: true
+})
+
+const modal = createWeb3Modal({
+  wagmiConfig,
+  projectId: ConstantsUtil.ProjectId,
+  enableAnalytics: true,
+  metadata: ConstantsUtil.Metadata,
+  termsConditionsUrl: 'https://walletconnect.com/terms',
+  privacyPolicyUrl: 'https://walletconnect.com/privacy',
+  enableOnramp: true,
+  customWallets: ConstantsUtil.CustomWallets,
+  enableWalletFeatures: true
+})
+
+ThemeStore.setModal(modal)
+
+export default function Wagmi() {
+  const [ready, setReady] = useState(false)
+
+  useEffect(() => {
+    setReady(true)
+  }, [])
+
+  return ready ? (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <Web3ModalButtons />
+        <WagmiTests />
+      </QueryClientProvider>
+    </WagmiProvider>
+  ) : null
+}

apps/laboratory/src/utils/DataUtil.ts

@@ -33,6 +33,11 @@ export const wagmiSdkOptions = [
     title: 'Email',
     link: '/library/wagmi-email/',
     description: 'Configuration usign wagmi and implementing email login'
+  },
+  {
+    title: 'Wallet',
+    link: '/library/wagmi-wallet/',
+    description: 'Configuration usign wagmi and implementing email wallet'
   }
 ]
 
@@ -51,5 +56,10 @@ export const ethersSdkOptions = [
     title: 'Email',
     link: '/library/ethers-email/',
     description: 'Configuration usign ethers and implementing email login'
+  },
+  {
+    title: 'Wallet',
+    link: '/library/ethers-wallet/',
+    description: 'Configuration usign ethers and implementing email wallet'
   }
 ]