wallet integrated ui

Author: andrewlee348

packages/react-connect/src/hooks/useWaasFeeOptions.ts

@@ -49,7 +49,7 @@ export type UseWaasFeeOptionsReturn = [
  */
 export interface WaasFeeOptionsConfig {
   /** Whether to skip checking token balances (default: false) */
-  skipFeeBalanceCheck?: boolean;
+  skipFeeBalanceCheck?: boolean
 }
 
 /**
@@ -73,7 +73,7 @@ export interface WaasFeeOptionsConfig {
  *   ] = useWaasFeeOptions();
  *
  *   // Or skip balance checking if needed
- *   // const [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption] = 
+ *   // const [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption] =
  *   //   useWaasFeeOptions({ skipFeeBalanceCheck: true });
  *
  *   const [selectedFeeOptionTokenName, setSelectedFeeOptionTokenName] = useState<string>();

packages/react-connect/src/hooks/useWallets.ts

@@ -1,6 +1,7 @@
 'use client'
 
 import { SequenceAPIClient, GetLinkedWalletsArgs, LinkedWallet } from '@0xsequence/api'
+import { IconProps } from '@0xsequence/design-system'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Connector, type UseConnectionsReturnType, useAccount, useConnect, useConnections, useDisconnect } from 'wagmi'
 
@@ -131,6 +132,9 @@ export interface ConnectedWallet {
   address: string
   isActive: boolean
   isEmbedded: boolean
+  signInMethod: string
+  logoDark: React.ComponentType<IconProps>
+  logoLight: React.ComponentType<IconProps>
 }
 
 export const useWallets = () => {
@@ -172,7 +176,10 @@ export const useWallets = () => {
     name: getConnectorName(connection.connector),
     address: connection.accounts[0],
     isActive: connection.accounts[0] === address,
-    isEmbedded: connection.connector.id.includes('waas')
+    isEmbedded: connection.connector.id.includes('waas'),
+    signInMethod: (connection.connector._wallet as any)?.id,
+    logoDark: (connection.connector._wallet as any)?.logoDark,
+    logoLight: (connection.connector._wallet as any)?.logoLight
   }))
 
   const setActiveWallet = async (walletAddress: string) => {

packages/react-wallet/src/components/GradientAvatarList.tsx

@@ -0,0 +1,24 @@
+import { GradientAvatar } from '@0xsequence/design-system'
+
+export const GradientAvatarList = ({ accountAddressList, size = 'xs' }: { accountAddressList: string[]; size?: 'xs' | 'md' }) => {
+  const firstThreeAddresses = accountAddressList.slice(0, 3)
+  const width = size === 'xs' ? firstThreeAddresses.length * 6 + 6 : firstThreeAddresses.length * 12 + 20
+
+  return (
+    <div className="flex flex-row relative" style={{ position: 'relative', width: `${width}px` }}>
+      {firstThreeAddresses.map((accountAddress, index) => (
+        <div
+          key={accountAddress}
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: `${index * (size === 'xs' ? 6 : 12)}px`,
+            transform: 'translateY(-50%)'
+          }}
+        >
+          <GradientAvatar size={size} address={accountAddress || ''} />
+        </div>
+      ))}
+    </div>
+  )
+}

packages/react-wallet/src/components/SelectRow/SelectRow.tsx

@@ -0,0 +1,24 @@
+import { cn, cardVariants } from '@0xsequence/design-system'
+
+import { SelectedIndicator } from './SelectedIndicator'
+
+export const SelectRow = ({
+  isSelected,
+  children,
+  onClick
+}: {
+  isSelected: boolean
+  children: React.ReactNode
+  onClick: () => void
+}) => {
+  return (
+    <div
+      className={cn(cardVariants({ clickable: true }), 'flex flex-row justify-between items-center')}
+      style={{ height: '60px' }}
+      onClick={onClick}
+    >
+      <div className="flex flex-row items-center gap-2">{children}</div>
+      <SelectedIndicator selected={isSelected} />
+    </div>
+  )
+}

packages/react-wallet/src/components/SelectRow/SelectedIndicator.tsx

@@ -0,0 +1,27 @@
+import { CheckmarkIcon } from '@0xsequence/design-system'
+import { motion } from 'motion/react'
+
+interface SelectedIndicatorProps {
+  selected: boolean
+  className?: string
+}
+
+export const SelectedIndicator = (props: SelectedIndicatorProps) => {
+  const { selected, className } = props
+  return (
+    <div className={`${className} border-2 border-border-normal bg-background-muted rounded-full ml-4 relative shrink-0 w-8 h-8`}>
+      <motion.div
+        className="flex bg-background-inverse absolute items-center justify-center rounded-full text-inverse w-8 h-8"
+        initial={{ opacity: selected ? 1 : 0, scale: selected ? 1 : 0.5 }}
+        animate={{ opacity: selected ? 1 : 0, scale: selected ? 1 : 0.5 }}
+        transition={{ ease: 'backOut' }}
+        style={{
+          top: '-2px',
+          left: '-2px'
+        }}
+      >
+        <CheckmarkIcon />
+      </motion.div>
+    </div>
+  )
+}

packages/react-wallet/src/components/SelectWalletRow.tsx

@@ -0,0 +1,46 @@
+import { ChevronRightIcon, Text } from '@0xsequence/design-system'
+import { cardVariants } from '@0xsequence/design-system'
+import { cn } from '@0xsequence/design-system'
+import { formatAddress, ConnectedWallet } from '@0xsequence/react-connect'
+
+import { WalletAccountGradient } from './WalletAccountGradient'
+
+export const SelectWalletRow = ({
+  wallet,
+  setActiveWallet,
+  onClose
+}: {
+  wallet: ConnectedWallet
+  setActiveWallet: (address: string) => void
+  onClose: () => void
+}) => {
+  const onSelectWallet = () => {
+    setActiveWallet(wallet.address)
+    onClose()
+  }
+
+  return (
+    <div
+      key={wallet.address}
+      className={cn(
+        cardVariants({ clickable: true }),
+        'flex flex-row justify-between  items-center p-3',
+        wallet.isActive ? 'bg-background-secondary' : 'bg-background-muted'
+      )}
+      onClick={onSelectWallet}
+    >
+      <div className="flex flex-row gap-2 items-center">
+        <WalletAccountGradient accountAddress={wallet.address} loginIcon={wallet.logoDark} size={'small'} />
+        <div className="flex flex-col">
+          <Text color="primary" fontWeight="medium" variant="normal">
+            {formatAddress(wallet.address)}
+          </Text>
+          <Text color="primary" fontWeight="medium" variant="small">
+            {wallet.id}
+          </Text>
+        </div>
+      </div>
+      <ChevronRightIcon color="white" />
+    </div>
+  )
+}

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

@@ -11,6 +11,8 @@ import { History, Navigation, NavigationContextProvider, WalletModalContextProvi
 
 import { getHeader, getContent } from './utils'
 
+export const WALLET_WIDTH = 400
+
 export type SequenceWalletProviderProps = {
   children: React.ReactNode
 }
@@ -55,7 +57,13 @@ export const WalletContent = ({ children }: SequenceWalletProviderProps) => {
     navigation.location === 'history' ||
     navigation.location === 'search' ||
     navigation.location === 'search-view-all' ||
-    navigation.location === 'settings-currency'
+    navigation.location === 'settings' ||
+    navigation.location === 'settings-wallets' ||
+    navigation.location === 'settings-profiles' ||
+    navigation.location === 'settings-apps' ||
+    navigation.location === 'legacy-settings-currency' ||
+    navigation.location === 'search-tokens' ||
+    navigation.location === 'search-collectibles'
 
   return (
     <WalletModalContextProvider value={{ setOpenWalletModal, openWalletModalState: openWalletModal }}>
@@ -66,7 +74,7 @@ export const WalletContent = ({ children }: SequenceWalletProviderProps) => {
               <Modal
                 contentProps={{
                   style: {
-                    maxWidth: '400px',
+                    maxWidth: WALLET_WIDTH,
                     height: 'fit-content',
                     ...getModalPositionCss(position),
                     scrollbarColor: 'gray black',

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

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Navigation } from '../../../contexts'
 import {
   CoinDetails,
@@ -12,21 +10,29 @@ import {
   History,
   SearchWallet,
   SearchWalletViewAll,
-  SettingsMenu,
-  SettingsCurrency,
-  SettingsNetwork,
-  SettingsGeneral,
+  LegacySettingsMenu,
+  LegacySettingsCurrency,
+  LegacySettingsNetwork,
+  LegacySettingsGeneral,
   TransactionDetails,
   SwapCoin,
-  SwapList
+  SwapList,
+  SearchTokens,
+  SearchCollectibles
 } from '../../../views'
+import { SettingsWallets } from '../../../views/Settings'
+import { SettingsApps } from '../../../views/Settings/Apps'
+import { SettingsMenu } from '../../../views/Settings/Menu'
+import { SettingsProfiles } from '../../../views/Settings/Profiles'
 import { NavigationHeader } from '../../NavigationHeader'
 import { WalletHeader } from '../../WalletHeader'
 
 export const getContent = (navigation: Navigation) => {
   const { location } = navigation
 
   switch (location) {
+    case 'send':
+      return <History />
     case 'send-coin':
       return <SendCoin chainId={navigation.params.chainId} contractAddress={navigation.params.contractAddress} />
     case 'send-collectible':
@@ -37,22 +43,38 @@ export const getContent = (navigation: Navigation) => {
           tokenId={navigation.params.tokenId}
         />
       )
+    case 'swap':
+      return <History />
     case 'receive':
       return <Receive />
+    case 'buy':
+      return <History />
     case 'history':
       return <History />
     case 'search':
       return <SearchWallet />
     case 'search-view-all':
       return <SearchWalletViewAll defaultTab={navigation.params.defaultTab} />
+    case 'search-tokens':
+      return <SearchTokens />
+    case 'search-collectibles':
+      return <SearchCollectibles />
     case 'settings':
       return <SettingsMenu />
-    case 'settings-general':
-      return <SettingsGeneral />
-    case 'settings-currency':
-      return <SettingsCurrency />
-    case 'settings-networks':
-      return <SettingsNetwork />
+    case 'settings-wallets':
+      return <SettingsWallets />
+    case 'settings-profiles':
+      return <SettingsProfiles />
+    case 'settings-apps':
+      return <SettingsApps />
+    case 'legacy-settings':
+      return <LegacySettingsMenu />
+    case 'legacy-settings-general':
+      return <LegacySettingsGeneral />
+    case 'legacy-settings-currency':
+      return <LegacySettingsCurrency />
+    case 'legacy-settings-networks':
+      return <LegacySettingsNetwork />
     case 'coin-details':
       return <CoinDetails contractAddress={navigation.params.contractAddress} chainId={navigation.params.chainId} />
     case 'collectible-details':
@@ -77,6 +99,7 @@ export const getContent = (navigation: Navigation) => {
           amount={navigation.params.amount}
         />
       )
+    case 'home':
     default:
       return <Home />
   }
@@ -89,16 +112,18 @@ export const getHeader = (navigation: Navigation) => {
       return <NavigationHeader primaryText="Search wallet" />
     case 'search-view-all':
       return <NavigationHeader secondaryText="Search wallet / " primaryText="View all" />
-    case 'settings':
+    case 'search-tokens':
+      return <NavigationHeader primaryText="Search tokens" />
+    case 'search-collectibles':
+      return <NavigationHeader primaryText="Search collectibles" />
+    case 'legacy-settings':
       return <NavigationHeader secondaryText="Wallet / " primaryText="Settings" />
-    case 'settings-general':
+    case 'legacy-settings-general':
       return <NavigationHeader secondaryText="Wallet / Settings / " primaryText="General" />
-    case 'settings-currency':
+    case 'legacy-settings-currency':
       return <NavigationHeader secondaryText="Wallet / Settings / " primaryText="Currency" />
-    case 'settings-networks':
+    case 'legacy-settings-networks':
       return <NavigationHeader secondaryText="Wallet / Settings / " primaryText="Networks" />
-    case 'receive':
-      return <NavigationHeader secondaryText="Wallet / " primaryText="Receive" />
     case 'history':
       return <NavigationHeader secondaryText="Wallet / " primaryText="History" />
     case 'coin-details':
@@ -107,12 +132,22 @@ export const getHeader = (navigation: Navigation) => {
       return <WalletHeader />
     case 'transaction-details':
       return <NavigationHeader secondaryText="" primaryText="" />
-    case 'send-collectible':
-    case 'send-coin':
+    case 'send':
       return <NavigationHeader secondaryText="Wallet / " primaryText="Send" />
+    case 'send-coin':
+      return <NavigationHeader secondaryText="Wallet / " primaryText="Send Coin" />
+    case 'send-collectible':
+      return <NavigationHeader secondaryText="Wallet / " primaryText="Send Collectible" />
+    case 'swap':
+      return <NavigationHeader secondaryText="Wallet / " primaryText="Swap" />
     case 'swap-coin':
     case 'swap-coin-list':
       return <NavigationHeader secondaryText="Wallet / " primaryText="Buy" />
+    case 'receive':
+      return <NavigationHeader secondaryText="Wallet / " primaryText="Receive" />
+    case 'buy':
+      return <NavigationHeader secondaryText="Wallet / " primaryText="Add Funds" />
+    case 'home':
     default:
       return <WalletHeader />
   }