added send, swap foundation

Author: andrewlee348

packages/wallet-widget/src/components/IconWrappers/StackedIconTag.tsx

@@ -20,7 +20,7 @@ export const StackedIconTag = ({
       style={{ height: '28px', gap: '3px' }}
       onClick={onClick}
     >
-      <MediaIconWrapper iconList={iconList} isAccount={isAccount} shape={shape} size="4xs" />
+      {iconList.length > 0 && <MediaIconWrapper iconList={iconList} isAccount={isAccount} shape={shape} size="4xs" />}
       {label}
     </div>
   )

packages/wallet-widget/src/components/ListCard/ListCardNav.tsx

@@ -26,7 +26,7 @@ export const ListCardNav = ({
 
       <div className="flex flex-row gap-1 items-center">
         {rightChildren}
-        <ChevronRightIcon color="white" size="lg" />
+        <ChevronRightIcon color="white" />
       </div>
     </div>
   )

packages/wallet-widget/src/components/ListCard/ListCardSelect.tsx

@@ -17,7 +17,7 @@ export const ListCardSelect = ({
   shape?: 'rounded' | 'square'
   style?: React.CSSProperties
   type?: 'radio' | 'custom'
-  isSelected: boolean
+  isSelected?: boolean
   disabled?: boolean
   onClick?: () => void
 }) => {

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

@@ -6,7 +6,7 @@ import { Modal, Scroll } from '@0xsequence/design-system'
 import { AnimatePresence } from 'motion/react'
 import React, { useState } from 'react'
 
-import { HEADER_HEIGHT } from '../../constants'
+import { HEADER_HEIGHT, HEADER_HEIGHT_WITH_LABEL } from '../../constants'
 import { History, Navigation, NavigationContextProvider, WalletModalContextProvider, WalletOptions } from '../../contexts'
 
 import { getHeader, getContent } from './utils'
@@ -50,6 +50,8 @@ export const WalletContent = ({ children }: SequenceWalletProviderProps) => {
 
   const displayScrollbar =
     navigation.location === 'home' ||
+    navigation.location === 'send-general' ||
+    navigation.location === 'swap' ||
     navigation.location === 'collection-details' ||
     navigation.location === 'collectible-details' ||
     navigation.location === 'coin-details' ||
@@ -61,11 +63,27 @@ export const WalletContent = ({ children }: SequenceWalletProviderProps) => {
     navigation.location === 'settings-networks' ||
     navigation.location === 'settings-currency' ||
     navigation.location === 'settings-profiles' ||
+    navigation.location === 'settings-preferences' ||
     navigation.location === 'settings-apps' ||
     navigation.location === 'legacy-settings-currency' ||
     navigation.location === 'search-tokens' ||
     navigation.location === 'search-collectibles'
 
+  let paddingTop = 0
+  switch (navigation.location) {
+    case 'home':
+      paddingTop = 0
+      break
+    case 'send-general':
+      paddingTop = HEADER_HEIGHT_WITH_LABEL
+      break
+    case 'swap':
+      paddingTop = HEADER_HEIGHT_WITH_LABEL
+      break
+    default:
+      paddingTop = HEADER_HEIGHT
+  }
+
   return (
     <WalletModalContextProvider value={{ setOpenWalletModal, openWalletModalState: openWalletModal }}>
       <NavigationContextProvider value={{ setHistory, history, isBackButtonEnabled, setIsBackButtonEnabled }}>
@@ -89,11 +107,7 @@ export const WalletContent = ({ children }: SequenceWalletProviderProps) => {
                   {getHeader(navigation)}
 
                   {displayScrollbar ? (
-                    <Scroll
-                      style={{ paddingTop: navigation.location === 'home' ? '' : HEADER_HEIGHT, height: 'min(800px, 90vh)' }}
-                    >
-                      {getContent(navigation)}
-                    </Scroll>
+                    <Scroll style={{ paddingTop: paddingTop, height: 'min(800px, 90vh)' }}>{getContent(navigation)}</Scroll>
                   ) : (
                     getContent(navigation)
                   )}

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

@@ -20,22 +20,25 @@ import {
   SearchTokens,
   SearchCollectibles
 } from '../../../views'
+import { SendGeneral } from '../../../views/SendGeneral'
 import { SettingsWallets } from '../../../views/Settings'
 import { SettingsApps } from '../../../views/Settings/Apps'
 import { SettingsCurrency } from '../../../views/Settings/Currency'
 import { SettingsMenu } from '../../../views/Settings/Menu'
 import { SettingsNetworks } from '../../../views/Settings/Networks'
+import { SettingsPreferences } from '../../../views/Settings/Preferences'
 import { SettingsProfiles } from '../../../views/Settings/Profiles'
 import { QrScan } from '../../../views/Settings/QrScan'
+import { Swap } from '../../../views/Swap'
 import { NavigationHeader } from '../../NavigationHeader'
 import { WalletHeader } from '../../WalletHeader'
 
 export const getContent = (navigation: Navigation) => {
   const { location } = navigation
 
   switch (location) {
-    case 'send':
-      return <History />
+    case 'send-general':
+      return <SendGeneral />
     case 'send-coin':
       return <SendCoin chainId={navigation.params.chainId} contractAddress={navigation.params.contractAddress} />
     case 'send-collectible':
@@ -47,7 +50,7 @@ export const getContent = (navigation: Navigation) => {
         />
       )
     case 'swap':
-      return <History />
+      return <Swap />
     case 'receive':
       return <Receive />
     case 'history':
@@ -70,6 +73,8 @@ export const getContent = (navigation: Navigation) => {
       return <SettingsCurrency />
     case 'settings-profiles':
       return <SettingsProfiles />
+    case 'settings-preferences':
+      return <SettingsPreferences />
     case 'settings-apps':
       return <SettingsApps />
     case 'connect-dapp':
@@ -83,13 +88,21 @@ export const getContent = (navigation: Navigation) => {
     case 'legacy-settings-networks':
       return <LegacySettingsNetwork />
     case 'coin-details':
-      return <CoinDetails contractAddress={navigation.params.contractAddress} chainId={navigation.params.chainId} />
+      return (
+        <CoinDetails
+          contractAddress={navigation.params.contractAddress}
+          chainId={navigation.params.chainId}
+          accountAddress={navigation.params.accountAddress}
+        />
+      )
+
     case 'collectible-details':
       return (
         <CollectibleDetails
           contractAddress={navigation.params.contractAddress}
           chainId={navigation.params.chainId}
           tokenId={navigation.params.tokenId}
+          accountAddress={navigation.params.accountAddress}
         />
       )
     case 'collection-details':
@@ -141,6 +154,8 @@ export const getHeader = (navigation: Navigation) => {
       return <NavigationHeader primaryText="Currency" />
     case 'settings-profiles':
       return <NavigationHeader primaryText="Profiles" />
+    case 'settings-preferences':
+      return <NavigationHeader primaryText="Preferences" />
     case 'settings-apps':
       return <NavigationHeader primaryText="Apps" />
     case 'connect-dapp':
@@ -153,7 +168,7 @@ export const getHeader = (navigation: Navigation) => {
       return <WalletHeader />
     case 'transaction-details':
       return <NavigationHeader secondaryText="" primaryText="" />
-    case 'send':
+    case 'send-general':
       return <WalletHeader label="Send" />
     case 'send-coin':
       return <NavigationHeader secondaryText="Wallet / " primaryText="Send Coin" />

packages/wallet-widget/src/components/WalletHeader/components/AccountInformation.tsx

@@ -1,5 +1,5 @@
 import { formatAddress } from '@0xsequence/connect'
-import { Text, GradientAvatar, ChevronDownIcon } from '@0xsequence/design-system'
+import { Text, GradientAvatar, ChevronDownIcon, Card } from '@0xsequence/design-system'
 import React, { forwardRef } from 'react'
 import { useAccount } from 'wagmi'
 
@@ -11,21 +11,18 @@ export const AccountInformation = forwardRef(({ onClickAccount }: AccountInforma
   const { address } = useAccount()
 
   return (
-    <div className="flex gap-2 items-center">
-      <div className="flex w-full flex-col items-center justify-center">
-        <div
-          className="flex gap-2 items-center justify-center relative select-none cursor-pointer"
-          onClick={onClickAccount}
-          // @ts-ignore-next-line
-          ref={ref}
-        >
-          <GradientAvatar size="sm" address={address || ''} />
-          <Text color="primary" fontWeight="medium" variant="normal">
-            {formatAddress(address || '')}
-          </Text>
-          <ChevronDownIcon className="text-primary" />
-        </div>
-      </div>
-    </div>
+    <Card
+      className="flex gap-1 items-center justify-center select-none cursor-pointer rounded-full py-1 px-3"
+      style={{ width: 'fit-content' }}
+      onClick={onClickAccount}
+      // @ts-ignore-next-line
+      ref={ref}
+    >
+      <GradientAvatar size="sm" address={address || ''} />
+      <Text color="primary" fontWeight="medium" variant="normal">
+        {formatAddress(address || '')}
+      </Text>
+      <ChevronDownIcon className="text-primary" />
+    </Card>
   )
 })

packages/wallet-widget/src/components/WalletHeader/index.tsx

@@ -3,7 +3,7 @@ import { ChevronLeftIcon, IconButton, Text } from '@0xsequence/design-system'
 import { AnimatePresence } from 'motion/react'
 import { useState } from 'react'
 
-import { HEADER_HEIGHT } from '../../constants'
+import { HEADER_HEIGHT, HEADER_HEIGHT_WITH_LABEL } from '../../constants'
 import { useNavigation } from '../../hooks'
 import { SelectWalletRow } from '../SelectWalletRow'
 import { SlideupDrawer } from '../SlideupDrawer'
@@ -32,9 +32,9 @@ export const WalletHeader = ({ label }: { label?: string }) => {
 
   return (
     <div
-      className="flex justify-between items-center fixed bg-background-primary w-full px-4 z-20 "
+      className="flex flex-col justify-between items-center fixed bg-background-primary w-full p-4 z-20 "
       style={{
-        height: HEADER_HEIGHT
+        height: label ? HEADER_HEIGHT_WITH_LABEL : HEADER_HEIGHT
       }}
     >
       <div className="flex flex-row justify-between items-center w-full">
@@ -43,7 +43,7 @@ export const WalletHeader = ({ label }: { label?: string }) => {
         <div style={{ width: '28px' }} />
       </div>
       {label && (
-        <Text variant="normal" color="primary" fontWeight="medium">
+        <Text variant="normal" color="primary" fontWeight="bold">
           {label}
         </Text>
       )}

packages/wallet-widget/src/constants/sizing.ts

@@ -1 +1,2 @@
-export const HEADER_HEIGHT = '60px'
+export const HEADER_HEIGHT = 60
+export const HEADER_HEIGHT_WITH_LABEL = 100

packages/wallet-widget/src/contexts/Navigation.ts

@@ -7,6 +7,7 @@ import { createGenericContext } from './genericContext'
 export interface CollectionDetailsParams {
   contractAddress: string
   chainId: number
+  accountAddress: string
 }
 
 export interface CollectionDetailsNavigation {
@@ -17,6 +18,7 @@ export interface CollectionDetailsNavigation {
 export interface CoinDetailsParams {
   contractAddress: string
   chainId: number
+  accountAddress: string
 }
 
 export interface CoinDetailsNavigation {
@@ -28,6 +30,7 @@ export interface CollectibleDetailsParams {
   contractAddress: string
   chainId: number
   tokenId: string
+  accountAddress: string
 }
 
 export interface CollectibleDetailsNavigation {
@@ -98,10 +101,9 @@ export interface SendCollectibleNavigation {
 export interface BasicNavigation {
   location:
     | 'home'
-    | 'send'
+    | 'send-general'
     | 'swap'
     | 'receive'
-    | 'receive'
     | 'history'
     | 'legacy-settings'
     | 'legacy-settings-general'
@@ -113,6 +115,7 @@ export interface BasicNavigation {
     | 'settings-currency'
     | 'settings-profiles'
     | 'settings-apps'
+    | 'settings-preferences'
     | 'connect-dapp'
     | 'search'
     | 'search-tokens'

packages/wallet-widget/src/views/CoinDetails/index.tsx

@@ -1,8 +1,15 @@
-import { compareAddress, formatDisplay, getNativeTokenInfoByChainId, ContractVerificationStatus } from '@0xsequence/connect'
+import {
+  compareAddress,
+  formatDisplay,
+  getNativeTokenInfoByChainId,
+  ContractVerificationStatus,
+  useWallets
+} from '@0xsequence/connect'
 import { Button, SendIcon, SwapIcon, Text, TokenImage } from '@0xsequence/design-system'
 import { useGetTokenBalancesSummary, useGetCoinPrices, useGetExchangeRate, useGetTransactionHistory } from '@0xsequence/hooks'
+import { useEffect } from 'react'
 import { formatUnits, zeroAddress } from 'viem'
-import { useAccount, useConfig } from 'wagmi'
+import { useConfig } from 'wagmi'
 
 import { InfiniteScroll } from '../../components/InfiniteScroll'
 import { NetworkBadge } from '../../components/NetworkBadge'
@@ -16,13 +23,18 @@ import { CoinDetailsSkeleton } from './Skeleton'
 export interface CoinDetailsProps {
   contractAddress: string
   chainId: number
+  accountAddress: string
 }
 
-export const CoinDetails = ({ contractAddress, chainId }: CoinDetailsProps) => {
+export const CoinDetails = ({ contractAddress, chainId, accountAddress }: CoinDetailsProps) => {
   const { chains } = useConfig()
   const { setNavigation } = useNavigation()
+  const { setActiveWallet } = useWallets()
   const { fiatCurrency, hideUnlistedTokens } = useSettings()
-  const { address: accountAddress } = useAccount()
+
+  useEffect(() => {
+    setActiveWallet(accountAddress || '')
+  }, [accountAddress])
 
   const isReadOnly = !chains.map(chain => chain.id).includes(chainId)
 
@@ -118,6 +130,9 @@ export const CoinDetails = ({ contractAddress, chainId }: CoinDetailsProps) => {
           </Text>
           <NetworkBadge chainId={chainId} />
         </div>
+        <Text variant="normal" fontWeight="medium" color="muted">
+          {accountAddress}
+        </Text>
         <div>
           <Text variant="normal" fontWeight="medium" color="muted">
             Balance