added receive view network swapping

Author: andrewlee348

…s/wallet-widget/src/views/FilterMenu.tsx …let-widget/src/components/FilterMenu.tsxpackages/wallet-widget/src/views/FilterMenu.tsx renamed to packages/wallet-widget/src/components/FilterMenu.tsx packages/wallet-widget/src/views/FilterMenu.tsx renamed to packages/wallet-widget/src/components/FilterMenu.tsx

@@ -6,20 +6,21 @@ import { ChainId } from '@0xsequence/network'
 import { useObservable } from 'micro-observables'
 import { useState } from 'react'
 
-import { GradientAvatarList } from '../components/GradientAvatarList'
-import { ListCardNav } from '../components/ListCard'
-import { ListCardSelect } from '../components/ListCard/ListCardSelect'
-import { SlideupDrawer } from '../components/SlideupDrawer'
-import { WalletAccountGradient } from '../components/WalletAccountGradient'
 import { useSettings } from '../hooks'
 import { useFiatWalletsMap } from '../hooks/useFiatWalletsMap'
 import { getConnectorLogo } from '../utils/wallets'
 
+import { GradientAvatarList } from './GradientAvatarList'
+import { ListCardNav } from './ListCard'
+import { ListCardSelect } from './ListCard/ListCardSelect'
+import { SlideupDrawer } from './SlideupDrawer'
+import { WalletAccountGradient } from './WalletAccountGradient'
+
 enum FilterType {
   menu = 'Filters',
-  wallets = 'Select a Wallet',
-  networks = 'Select a Network',
-  collections = 'Select a Collection'
+  wallets = 'Select active Wallets',
+  networks = 'Select active Networks',
+  collections = 'Select active Collections'
 }
 
 export const FilterMenu = ({

packages/wallet-widget/src/components/NetworkSelect.tsx

@@ -0,0 +1,65 @@
+import { Button, Card, ChevronDownIcon, NetworkImage, Text } from '@0xsequence/design-system'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { useState } from 'react'
+import { useChainId, useChains, useSwitchChain } from 'wagmi'
+
+import { WALLET_HEIGHT } from './SequenceWalletProvider'
+
+export const NetworkSelect = () => {
+  const chains = useChains()
+  const chainId = useChainId()
+  const { switchChain } = useSwitchChain()
+  const [isOpen, toggleOpen] = useState(false)
+
+  return (
+    <PopoverPrimitive.Root open={isOpen} onOpenChange={toggleOpen}>
+      <PopoverPrimitive.Trigger asChild>
+        <div
+          className="flex border-1 border-solid rounded-xl px-4 py-3 cursor-pointer gap-2 items-center select-none"
+          style={{ height: 52 }}
+        >
+          <div className="flex items-center gap-2">
+            <NetworkImage chainId={chainId} size="sm" />
+            <Text variant="normal" fontWeight="bold" color="primary">
+              {chains.find(chain => chain.id === chainId)?.name || chainId}
+            </Text>
+          </div>
+
+          <div className="text-muted">
+            <ChevronDownIcon />
+          </div>
+        </div>
+      </PopoverPrimitive.Trigger>
+      {isOpen && (
+        <PopoverPrimitive.Content side="bottom" sideOffset={8} align="center" asChild>
+          <Card className="bg-background-raised backdrop-blur-md relative px-1 py-3" style={{ overflowY: 'hidden' }}>
+            <div className="flex flex-col gap-2 px-2 overflow-y-auto" style={{ maxHeight: `calc(${WALLET_HEIGHT} / 2)` }}>
+              {chains.map(chain => (
+                <div style={{ height: 44 }}>
+                  <Button
+                    className="w-full"
+                    key={chain.id}
+                    shape="square"
+                    onClick={() => {
+                      console.log('chain', chain)
+                      switchChain({ chainId: chain.id })
+                      toggleOpen(false)
+                    }}
+                    leftIcon={() => <NetworkImage chainId={chain.id} size="sm" />}
+                    label={
+                      <div className="flex items-center gap-2">
+                        <Text variant="normal" fontWeight="bold" color="primary">
+                          {chain.name}
+                        </Text>
+                      </div>
+                    }
+                  />
+                </div>
+              ))}
+            </div>
+          </Card>
+        </PopoverPrimitive.Content>
+      )}
+    </PopoverPrimitive.Root>
+  )
+}

packages/wallet-widget/src/components/SearchLists/CollectiblesList.tsx

@@ -5,7 +5,7 @@ import { AnimatePresence } from 'motion/react'
 import { useState, useMemo } from 'react'
 
 import { TokenBalanceWithPrice, useGetMoreBalances } from '../../utils'
-import { FilterMenu } from '../../views/FilterMenu'
+import { FilterMenu } from '../FilterMenu'
 
 import { CollectiblesTab } from './CollectiblesList/CollectiblesTab'
 

packages/wallet-widget/src/components/SearchLists/TokenList.tsx

@@ -11,7 +11,7 @@ import { useConfig } from 'wagmi'
 import { useSettings } from '../../hooks'
 import { computeBalanceFiat, TokenBalanceWithPrice } from '../../utils'
 import { useGetMoreBalances } from '../../utils'
-import { FilterMenu } from '../../views/FilterMenu'
+import { FilterMenu } from '../FilterMenu'
 
 import { CoinsTab } from './TokenList/CoinsTab'
 

packages/wallet-widget/src/components/SequenceWalletProvider/SequenceWalletProvider.tsx

@@ -12,7 +12,8 @@ import { History, Navigation, NavigationContextProvider, WalletModalContextProvi
 import { FiatWalletsMapProvider } from './ProviderComponents/FiatWalletsMapProvider'
 import { getHeader, getContent } from './utils'
 
-export const WALLET_WIDTH = 460
+export const WALLET_WIDTH = '460px'
+export const WALLET_HEIGHT = 'min(800px, 90vh)'
 
 export type SequenceWalletProviderProps = {
   children: React.ReactNode

packages/wallet-widget/src/views/History.tsx

@@ -8,11 +8,10 @@ import { useMemo, useState } from 'react'
 import { zeroAddress } from 'viem'
 import { useConfig } from 'wagmi'
 
+import { FilterMenu } from '../components/FilterMenu'
 import { TransactionHistoryList } from '../components/TransactionHistoryList'
 import { useSettings } from '../hooks'
 
-import { FilterMenu } from './FilterMenu'
-
 export const History = () => {
   const { chains } = useConfig()
   const { selectedNetworks, selectedWallets } = useSettings()

packages/wallet-widget/src/views/Home/IntegratedWallet/index.tsx

@@ -19,6 +19,7 @@ import { AnimatePresence } from 'motion/react'
 import { useMemo, useState } from 'react'
 import { useAccount, useConfig } from 'wagmi'
 
+import { FilterMenu } from '../../../components/FilterMenu'
 import { StackedIconTag } from '../../../components/IconWrappers/StackedIconTag'
 import { ListCardNav } from '../../../components/ListCard/ListCardNav'
 import { ListCardNavTable } from '../../../components/ListCardTable/ListCardNavTable'
@@ -29,7 +30,6 @@ import { useNavigation, useSettings } from '../../../hooks'
 import { useFiatWalletsMap } from '../../../hooks/useFiatWalletsMap'
 import { computeBalanceFiat } from '../../../utils'
 import { getConnectorLogo } from '../../../utils/wallets'
-import { FilterMenu } from '../../FilterMenu'
 
 import { OperationButtonTemplate } from './Buttons/OperationButtonTemplate'
 

packages/wallet-widget/src/views/Receive.tsx

@@ -1,18 +1,21 @@
-import { getNativeTokenInfoByChainId } from '@0xsequence/connect'
-import { Button, Text, CopyIcon, ShareIcon, Image } from '@0xsequence/design-system'
+import { getNetwork } from '@0xsequence/connect'
+import { Button, Text, CopyIcon, ShareIcon, Image, Card } from '@0xsequence/design-system'
 import { QRCodeCanvas } from 'qrcode.react'
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { useAccount, useConfig } from 'wagmi'
+import { useAccount } from 'wagmi'
 
+import { NetworkSelect } from '../components/NetworkSelect'
 import { HEADER_HEIGHT } from '../constants'
 
+const isVowel = (char: string) => ['a', 'e', 'i', 'o', 'u'].includes(char.toLowerCase())
+
 export const Receive = () => {
   const { address, chain } = useAccount()
-  const { chains } = useConfig()
   const [isCopied, setCopied] = useState<boolean>(false)
 
-  const nativeTokenInfo = getNativeTokenInfoByChainId(chain?.id || 1, chains)
+  const networkInfo = getNetwork(chain?.id || 1)
+  const networkName = networkInfo.title || networkInfo.name
 
   useEffect(() => {
     if (isCopied) {
@@ -34,7 +37,10 @@ export const Receive = () => {
 
   return (
     <div style={{ paddingTop: HEADER_HEIGHT }}>
-      <div className="flex p-5 pt-3 flex-col justify-center items-center gap-4">
+      <div className="flex flex-col justify-center items-center p-4  gap-4">
+        <Card className="p-0 w-fit">
+          <NetworkSelect />
+        </Card>
         <div className="flex mt-1 w-fit bg-white rounded-xl items-center justify-center p-4">
           <QRCodeCanvas value={address || ''} size={200} bgColor="white" fgColor="black" data-id="receiveQR" />
         </div>
@@ -43,7 +49,7 @@ export const Receive = () => {
             <Text className="text-center leading-[inherit]" variant="medium" color="primary" style={{ fontWeight: '700' }}>
               My Wallet
             </Text>
-            <Image className="w-5" src={nativeTokenInfo.logoURI} alt="icon" />
+            <Image className="w-5 rounded-xs" src={networkInfo.logoURI} alt="icon" />
           </div>
           <div className="mt-2" style={{ maxWidth: '180px', textAlign: 'center' }}>
             <Text
@@ -74,7 +80,7 @@ export const Receive = () => {
               overflowWrap: 'anywhere'
             }}
           >
-            {`This is a ${nativeTokenInfo.name} address. Please only send assets on the ${nativeTokenInfo.name} network.`}
+            {`This is a${isVowel(networkName[0]) ? 'n' : ''} ${networkName} address. Please only send assets on the ${networkName} network.`}
           </Text>
         </div>
       </div>