Example Header includes NetworkSelect and AccountMenu with Signout button

examples/components/package.json

@@ -4,10 +4,12 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
+    "@radix-ui/react-popover": "^1.0.7",
     "typescript": "latest"
   },
   "peerDependencies": {
     "@0xsequence/design-system": "*",
+    "@0xsequence/network": "*",
     "wagmi": "*"
   }
 }

examples/components/src/Header.tsx

@@ -1,15 +1,35 @@
-import { Box, Image, Text, GradientAvatar, truncateAddress } from '@0xsequence/design-system'
-import { useAccount } from 'wagmi'
+import {
+  Box,
+  Image,
+  Text,
+  GradientAvatar,
+  Select,
+  truncateAddress,
+  NetworkImage,
+  IconButton,
+  CloseIcon,
+  Card,
+  Button,
+  ChevronDownIcon,
+  SignoutIcon
+} from '@0xsequence/design-system'
+import { ChainId } from '@0xsequence/network'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { useState } from 'react'
+import { useAccount, useChainId, useDisconnect, useSwitchChain } from 'wagmi'
 
-export const Header = () => {
-  const { address, connector } = useAccount()
+const networks = [
+  { chainId: ChainId.ARBITRUM_SEPOLIA, title: 'Arbitrum Sepolia' },
+  { chainId: ChainId.ARBITRUM_NOVA, title: 'Arbitrum Nova' }
+]
 
+export const Header = () => {
   return (
     <Box
       position="fixed"
       top="0"
       width="full"
-      padding="5"
+      padding="4"
       justifyContent="space-between"
       background="backgroundOverlay"
       backdropFilter="blur"
@@ -28,21 +48,116 @@ export const Header = () => {
           disableAnimation
         />
       </Box>
-      <Box>
-        <Box flexDirection="column">
-          <Box flexDirection="row" gap="2" justifyContent="flex-end" alignItems="center">
-            <GradientAvatar address={String(address)} />
-            <Text variant="normal" fontWeight="bold" color="text100">
-              {truncateAddress(String(address), 8)}
-            </Text>
-          </Box>
-          <Box alignItems="center" justifyContent="flex-end" flexDirection="row">
-            <Text variant="small" color="text50">
-              {connector?.name}
-            </Text>
-          </Box>
-        </Box>
+      <Box gap="2" alignItems="center">
+        <NetworkSelect />
+        <AccountMenu />
       </Box>
     </Box>
   )
 }
+
+const AccountMenu = () => {
+  const [isOpen, toggleOpen] = useState(false)
+  const { address, connector } = useAccount()
+  const { disconnect } = useDisconnect()
+
+  return (
+    <PopoverPrimitive.Root open={isOpen} onOpenChange={toggleOpen}>
+      <PopoverPrimitive.Trigger asChild>
+        <Box
+          borderColor={isOpen ? 'borderFocus' : 'borderNormal'}
+          borderWidth="thin"
+          borderStyle="solid"
+          borderRadius="md"
+          paddingX="4"
+          paddingY="3"
+          cursor="pointer"
+          style={{ height: 52 }}
+        >
+          <Box gap="2" alignItems="center">
+            <Box flexDirection="column">
+              <Box flexDirection="row" gap="2" justifyContent="flex-end" alignItems="center">
+                <GradientAvatar address={String(address)} size="sm" />
+                <Text variant="normal" fontWeight="bold" color="text100">
+                  {truncateAddress(String(address), 4)}
+                </Text>
+              </Box>
+            </Box>
+
+            <Box color="text50">
+              <ChevronDownIcon />
+            </Box>
+          </Box>
+        </Box>
+      </PopoverPrimitive.Trigger>
+
+      {isOpen && (
+        <PopoverPrimitive.Portal>
+          <PopoverPrimitive.Content side="bottom" sideOffset={8} align="end" asChild>
+            <Card
+              zIndex="20"
+              background="backgroundRaised"
+              backdropFilter="blur"
+              position="relative"
+              padding="2"
+              style={{ minWidth: 360 }}
+            >
+              {/* <PopoverPrimitive.Close asChild>
+                <IconButton icon={CloseIcon} size="xs" position="absolute" top="4" right="4" />
+              </PopoverPrimitive.Close> */}
+
+              <Card>
+                <Box alignItems="center" justifyContent="space-between">
+                  <Text variant="normal" fontWeight="bold" color="text100">
+                    Account
+                  </Text>
+                  <Text variant="small" color="text50">
+                    {connector?.name}
+                  </Text>
+                </Box>
+
+                <Text as="div" marginTop="2" variant="normal" color="text80">
+                  {address}
+                </Text>
+              </Card>
+
+              <Box marginTop="2">
+                <Button
+                  width="full"
+                  shape="square"
+                  variant="emphasis"
+                  rightIcon={SignoutIcon}
+                  label="Sign out"
+                  onClick={() => disconnect()}
+                />
+              </Box>
+            </Card>
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Portal>
+      )}
+    </PopoverPrimitive.Root>
+  )
+}
+
+const NetworkSelect = () => {
+  const chainId = useChainId()
+  const { switchChain } = useSwitchChain()
+
+  return (
+    <Select
+      name="chainId"
+      labelLocation="top"
+      onValueChange={value => switchChain({ chainId: Number(value) })}
+      value={String(chainId)}
+      options={Object.values(networks).map(network => ({
+        label: (
+          <Box alignItems="center" gap="2">
+            <NetworkImage chainId={network.chainId} size="sm" />
+            <Text display={{ sm: 'none', lg: 'block' }}>{network.title!}</Text>
+          </Box>
+        ),
+        value: String(network.chainId)
+      }))}
+    />
+  )
+}

examples/next/src/app/components/Connected.tsx

@@ -1,21 +1,12 @@
-import { Box, Text, Card, Button, Select, SignoutIcon } from '@0xsequence/design-system'
+import { Box, Text, Card, Button, Select } from '@0xsequence/design-system'
 import { signEthAuthProof, useIndexerClient, useStorage, useWaasFeeOptions, validateEthProof } from '@0xsequence/kit'
 import { CheckoutSettings } from '@0xsequence/kit-checkout'
 import { CardButton, Header } from '@0xsequence/kit-example-shared-components'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
 import { ChainId, allNetworks } from '@0xsequence/network'
 import { ComponentProps, useEffect, useState } from 'react'
 import { formatUnits, parseUnits } from 'viem'
-import {
-  useAccount,
-  useChainId,
-  useDisconnect,
-  usePublicClient,
-  useSendTransaction,
-  useSwitchChain,
-  useWalletClient,
-  useWriteContract
-} from 'wagmi'
+import { useAccount, useChainId, usePublicClient, useSendTransaction, useWalletClient, useWriteContract } from 'wagmi'
 
 import { isDebugMode } from '../../config'
 
@@ -24,12 +15,10 @@ import { abi } from '@/constants/nft-abi'
 
 export const Connected = () => {
   const { address } = useAccount()
-  const { disconnect } = useDisconnect()
   const { setOpenWalletModal } = useOpenWalletModal()
   // const { setOpenConnectModal } = useOpenConnectModal()
   // const { triggerCheckout } = useCheckoutModal()
   const { data: walletClient } = useWalletClient()
-  const { switchChain } = useSwitchChain()
   const storage = useStorage()
 
   const { data: txnData, sendTransaction, isPending: isPendingSendTxn, error } = useSendTransaction()
@@ -205,17 +194,11 @@ export const Connected = () => {
   //   triggerCheckout(getCheckoutSettings(address))
   // }
 
-  const onSwitchNetwork = () => {
-    if (chainId === ChainId.ARBITRUM_SEPOLIA) {
-      switchChain({ chainId: ChainId.ARBITRUM_NOVA })
-    } else {
-      switchChain({ chainId: ChainId.ARBITRUM_SEPOLIA })
-    }
-
+  useEffect(() => {
     setLastTxnDataHash(undefined)
     setLastTxnDataHash2(undefined)
     setIsMessageValid(undefined)
-  }
+  }, [chainId])
 
   return (
     <>
@@ -305,12 +288,6 @@ export const Connected = () => {
             {isDebugMode && (
               <CardButton title="Generate EthAuth proof" description="Generate EthAuth proof" onClick={generateEthAuthProof} />
             )}
-
-            <CardButton
-              title="Switch network"
-              description={`Current network: ${networkForCurrentChainId.title}`}
-              onClick={onSwitchNetwork}
-            />
           </Box>
 
           {pendingFeeOptionConfirmation && feeOptionBalances.length > 0 && (
@@ -394,16 +371,6 @@ export const Connected = () => {
               </Box>
             </Box>
           )}
-
-          <Box width="full" gap="2" flexDirection="row" justifyContent="flex-end">
-            <Button
-              onClick={() => {
-                disconnect()
-              }}
-              leftIcon={SignoutIcon}
-              label="Sign out"
-            />
-          </Box>
         </Box>
       </Box>
     </>

examples/react/src/components/Connected.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Card, Modal, Select, SignoutIcon, Switch, Text, TextInput, breakpoints } from '@0xsequence/design-system'
+import { Box, Button, Card, Modal, Select, Switch, Text, TextInput, breakpoints } from '@0xsequence/design-system'
 import {
   useStorage,
   useWaasFeeOptions,
@@ -19,10 +19,8 @@ import {
   useAccount,
   useChainId,
   useConnections,
-  useDisconnect,
   usePublicClient,
   useSendTransaction,
-  useSwitchChain,
   useWalletClient,
   useWriteContract
 } from 'wagmi'
@@ -39,9 +37,7 @@ export const Connected = () => {
   const { setOpenWalletModal } = useOpenWalletModal()
   const { triggerCheckout } = useCheckoutModal()
   const { triggerAddFunds } = useAddFundsModal()
-  const { disconnect } = useDisconnect()
   const { data: walletClient } = useWalletClient()
-  const { switchChain } = useSwitchChain()
   const storage = useStorage()
 
   const [isCheckoutInfoModalOpen, setIsCheckoutInfoModalOpen] = React.useState(false)
@@ -263,13 +259,13 @@ export const Connected = () => {
         currencyDecimals: '6',
         nftId: checkoutTokenId,
         nftAddress: checkoutTokenContractAddress,
-        nftQuantity, 
+        nftQuantity,
         isDev: true,
         calldata: getOrderbookCalldata({
           orderId: checkoutOrderId,
           quantity: nftQuantity,
           recipient: recipientAddress
-        }),
+        })
       })
       triggerCheckout(checkoutSettings)
     }
@@ -281,17 +277,11 @@ export const Connected = () => {
     })
   }
 
-  const onSwitchNetwork = () => {
-    if (chainId === ChainId.ARBITRUM_SEPOLIA) {
-      switchChain({ chainId: ChainId.ARBITRUM_NOVA })
-    } else {
-      switchChain({ chainId: ChainId.ARBITRUM_SEPOLIA })
-    }
-
+  useEffect(() => {
     setLastTxnDataHash(undefined)
     setLastTxnDataHash2(undefined)
     setIsMessageValid(undefined)
-  }
+  }, [chainId])
 
   return (
     <>
@@ -386,12 +376,6 @@ export const Connected = () => {
                 />
               </>
             )}
-
-            <CardButton
-              title="Switch network"
-              description={`Current network: ${networkForCurrentChainId.title}`}
-              onClick={onSwitchNetwork}
-            />
           </Box>
 
           {pendingFeeOptionConfirmation && feeOptionBalances.length > 0 && (
@@ -504,18 +488,6 @@ export const Connected = () => {
               </Box>
             </Box>
           )}
-          <Box width="full" gap="2" flexDirection="row" justifyContent="flex-end">
-            <Button
-              onClick={() => {
-                disconnect()
-                setLastTxnDataHash(undefined)
-                setLastTxnDataHash2(undefined)
-                setIsMessageValid(undefined)
-              }}
-              leftIcon={SignoutIcon}
-              label="Sign out"
-            />
-          </Box>
         </Box>
       </Box>