feat: Show vouchers in Account Picker

src/components/modules/AccountPicker/AccountInformation/cmp.tsx

@@ -9,6 +9,7 @@ import Price from '../../../common/Price'
 import { formatCurrency } from '../../../../utils'
 
 export const AccountInformation = ({
+  vouchers,
   balance,
   rewards,
   accountAddress,
@@ -62,27 +63,51 @@ export const AccountInformation = ({
         </>
       )}
 
-      <div tw="text-center">
-        {accountAddressHref ? (
-          <>
-            <StyledLine />
-            <Button
-              as="a"
-              target="_blank"
-              size="md"
-              href={accountAddressHref}
-              kind={button3.kind}
-              variant={button3.variant}
-              color={button3.color}
-            >
-              {displayAddress}
-              <Icon name="external-link-square-alt" tw="ml-2.5" />
-            </Button>
-          </>
-        ) : (
-          displayAddress
-        )}
-      </div>
+      {(accountAddressHref || vouchers) && (
+        <>
+          <StyledLine />
+          <div tw="flex flex-col gap-6">
+            {vouchers &&
+              vouchers.map((voucher) => (
+                <div tw="flex items-center justify-between" key={voucher.name}>
+                  <div tw="flex items-center gap-2 max-w-sm ">
+                    <img
+                      src={voucher.image}
+                      alt={voucher.imageAlt}
+                      tw="w-12 h-12"
+                    />
+                    <div className="fs-16 tp-body3" tw="line-clamp-1">
+                      {voucher.name}
+                    </div>
+                  </div>
+                  <div tw="text-right pl-2" className="tp-body">
+                    x{voucher.amount}
+                  </div>
+                </div>
+              ))}
+            <div tw="text-center">
+              {accountAddressHref ? (
+                <>
+                  <Button
+                    as="a"
+                    target="_blank"
+                    size="md"
+                    href={accountAddressHref}
+                    kind={button3.kind}
+                    variant={button3.variant}
+                    color={button3.color}
+                  >
+                    {displayAddress}
+                    <Icon name="external-link-square-alt" tw="ml-2.5" />
+                  </Button>
+                </>
+              ) : (
+                displayAddress
+              )}
+            </div>
+          </div>
+        </>
+      )}
     </>
   )
 }

src/components/modules/AccountPicker/AccountInformation/index.tsx

@@ -1,2 +1,2 @@
 export { default, default as AccountInformation } from './cmp'
-export type { AccountInformationProps } from './types'
+export type { Voucher, AccountInformationProps } from './types'

src/components/modules/AccountPicker/AccountInformation/types.tsx

@@ -1,3 +1,10 @@
+export type Voucher = {
+  name: string
+  image: string
+  imageAlt: string
+  amount: number
+}
+
 export type AccountInformationProps = {
   accountAddress?: string
   accountAddressHref?: string
@@ -6,4 +13,5 @@ export type AccountInformationProps = {
     amount: number
     days?: number
   }
+  vouchers?: Voucher[]
 }

src/components/modules/AccountPicker/cmp.stories.tsx

@@ -5,6 +5,7 @@ import AccountPicker from './cmp'
 import { AccountPickerProps, Blockchain } from './types'
 import { Network } from './NetworkSelector'
 import { Wallet } from './WalletSelector'
+import { Voucher } from './AccountInformation'
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -106,6 +107,21 @@ const blockchains: Record<Blockchain['id'], Blockchain> = {
   },
 }
 
+const vouchers: Voucher[] = [
+  {
+    name: 'Web3 Voucher',
+    image: 'https://claim.twentysix.cloud/sbt/cover/web3-hosting.jpg',
+    imageAlt: 'Web3 Hosting',
+    amount: 7,
+  },
+  {
+    name: 'Confidentials Voucher',
+    image: 'https://claim.twentysix.cloud/sbt/cover/confidential-vm.jpg',
+    imageAlt: 'Confidential VM',
+    amount: 3,
+  },
+]
+
 const handleConnect = async (wallet: Wallet, network: Network) => {
   alert(`Connect to ${network.name} via ${wallet.name}`)
 }
@@ -181,6 +197,17 @@ LoggedIn.parameters = {
   ...defaultParams,
 }
 
+export const LoggedInWithVouchers = Template.bind({})
+LoggedInWithVouchers.args = {
+  ...defaultArgs,
+  accountAddress: '0x50622138b35883F2e39Bf0C39eB9fa22214433Df',
+  accountBalance: Math.random() * 10 ** 8,
+  accountVouchers: vouchers,
+}
+LoggedInWithVouchers.parameters = {
+  ...defaultParams,
+}
+
 export const LoggedInOneNetwork = Template.bind({})
 LoggedInOneNetwork.args = {
   ...defaultArgs,
@@ -222,6 +249,18 @@ LoggedInMobile.parameters = {
   ...defaultParams,
 }
 
+export const LoggedInMobileWithVouchers = Template.bind({})
+LoggedInMobileWithVouchers.args = {
+  ...defaultArgs,
+  accountAddress: '0x50622138b35883F2e39Bf0C39eB9fa22214433Df',
+  accountBalance: Math.random() * 10 ** 8,
+  accountVouchers: vouchers,
+  isMobile: true,
+}
+LoggedInMobileWithVouchers.parameters = {
+  ...defaultParams,
+}
+
 export const LoggedInMobileOneNetwork = Template.bind({})
 LoggedInMobileOneNetwork.args = {
   ...defaultArgs,

src/components/modules/AccountPicker/cmp.tsx

@@ -13,6 +13,7 @@ import { Portal } from '../../layout/Portal'
 
 export const AccountPicker = ({
   isMobile = false,
+  accountVouchers,
   ...rest
 }: AccountPickerProps) => {
   const theme = useTheme()
@@ -127,6 +128,7 @@ export const AccountPicker = ({
                   accountAddress={accountAddress}
                   accountAddressHref={accountAddressHref}
                   balance={accountBalance}
+                  vouchers={accountVouchers}
                 />
                 <StyledLine />
               </>
@@ -182,6 +184,7 @@ export const AccountPicker = ({
                   accountAddress={accountAddress}
                   accountAddressHref={accountAddressHref}
                   balance={accountBalance}
+                  vouchers={accountVouchers}
                 />
                 <StyledLine />
               </>

src/components/modules/AccountPicker/types.tsx

@@ -2,7 +2,7 @@ import { RefObject } from 'react'
 import { Network } from './NetworkSelector'
 import { Wallet } from './WalletSelector'
 import { NetworkSelectorProps } from './NetworkSelector/types'
-import { AccountInformationProps } from './AccountInformation'
+import { AccountInformationProps, Voucher } from './AccountInformation'
 
 export type Blockchain = {
   id: string
@@ -18,6 +18,7 @@ export type AccountPickerProps = {
   isMobile?: boolean
   accountAddress?: string
   accountBalance?: number
+  accountVouchers?: Voucher[]
   ensName?: string
   rewards?: AccountInformationProps['rewards']
   blockchains: Record<Blockchain['id'], Blockchain>