Merge branch 'peanut-wallet' into refactor/wallet-context

src/app/api/peanut/user/add-account/route.ts

@@ -6,7 +6,7 @@ import { cookies } from 'next/headers'
 export async function POST(request: NextRequest) {
     try {
         const body = await request.json()
-        const { userId, bridgeAccountId, accountType, accountIdentifier } = body
+        const { userId, bridgeAccountId, accountType, accountIdentifier, connector } = body
 
         const apiKey = process.env.PEANUT_API_KEY!
 
@@ -29,6 +29,7 @@ export async function POST(request: NextRequest) {
                 bridgeAccountIdentifier: bridgeAccountId,
                 accountType,
                 accountIdentifier,
+                connector,
             }),
         })
 

src/components/Global/WalletHeader/index.tsx

@@ -26,7 +26,6 @@ const WalletHeader = () => {
     const [showModal, setShowModal] = useState(false)
     const { wallets, selectedWallet, setSelectedWallet, isConnected } = useWallet()
     const { open: openWeb3Modal } = useAppKit()
-    const { connector } = useAccount()
 
     // sort wallets to add active wallet at the top
     const sortedWallets = useMemo(() => {
@@ -53,14 +52,20 @@ const WalletHeader = () => {
             >
                 {/* wallet icon container */}
                 <div className="mr-1.5 flex size-7 items-center justify-center rounded-full border border-n-1 bg-white p-2">
-                    <Image src={PeanutWalletIcon} alt="" width={24} height={24} className="size-6 object-contain" />
+                    <Image
+                        src={selectedWallet?.connector?.iconUrl || PeanutWalletIcon}
+                        alt=""
+                        width={24}
+                        height={24}
+                        className="size-6 object-contain"
+                    />
                 </div>
 
                 {isConnected ? (
                     <span>
                         {selectedWallet?.walletProviderType === WalletProviderType.PEANUT
                             ? 'Peanut'
-                            : connector?.name || shortenAddressLong(selectedWallet?.address)}
+                            : selectedWallet?.connector?.name || shortenAddressLong(selectedWallet?.address)}
                     </span>
                 ) : (
                     'Connect Wallet'
@@ -112,8 +117,8 @@ const WalletEntryCard = ({ wallet, isActive, onClick }: WalletEntryCardProps) =>
 
     // get wallet icon to display
     const walletImage = useMemo(() => {
-        return isPeanutWallet ? PeanutWalletIcon : connector?.icon || PeanutWalletIcon
-    }, [isPeanutWallet, connector])
+        return isPeanutWallet ? PeanutWalletIcon : wallet?.connector?.iconUrl || PeanutWalletIcon
+    }, [isPeanutWallet, connector, wallet])
 
     return (
         <Card onClick={onClick}>

src/components/Home/WalletCard.tsx

@@ -9,6 +9,8 @@ import { motion } from 'framer-motion'
 import Image from 'next/image'
 import { useMemo } from 'react'
 import CopyToClipboard from '../Global/CopyToClipboard'
+import { identicon } from '@dicebear/collection'
+import { createAvatar } from '@dicebear/core'
 
 const colorArray = ['bg-blue-1', 'bg-yellow-1', 'bg-pink-1']
 
@@ -67,7 +69,13 @@ export function WalletCard({ type, onClick, ...props }: WalletCardProps) {
         if (wallet.walletProviderType === WalletProviderType.PEANUT) {
             return PeanutWalletIcon
         }
-        return wallet.walletIcon || PeanutWalletIcon
+        return (
+            wallet.connector?.iconUrl ||
+            createAvatar(identicon, {
+                seed: wallet.address,
+                size: 128,
+            }).toDataUri()
+        )
     }, [wallet])
 
     return (

src/context/authContext.tsx

@@ -21,10 +21,15 @@ interface AuthContextType {
         accountIdentifier,
         accountType,
         userId,
+        connector,
     }: {
         accountIdentifier: string
         accountType: string
         userId: string
+        connector?: {
+            iconUrl: string
+            name: string
+        }
     }) => Promise<void>
     isFetchingUser: boolean
     logoutUser: () => Promise<void>
@@ -213,11 +218,16 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
         accountType,
         userId,
         bridgeAccountId,
+        connector,
     }: {
         accountIdentifier: string
         accountType: string
         userId: string
         bridgeAccountId?: string
+        connector?: {
+            iconUrl: string
+            name: string
+        }
     }) => {
         const response = await fetch('/api/peanut/user/add-account', {
             method: 'POST',
@@ -229,6 +239,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
                 accountIdentifier,
                 bridgeAccountId,
                 accountType,
+                connector,
             }),
         })
 

src/hooks/useWallet.ts

@@ -8,9 +8,7 @@ import * as interfaces from '@/interfaces'
 import { useAppDispatch, useWalletStore } from '@/redux/hooks'
 import { walletActions } from '@/redux/slices/wallet-slice'
 import { areEvmAddressesEqual, backgroundColorFromAddress, fetchWalletBalances } from '@/utils'
-import { identicon } from '@dicebear/collection'
-import { createAvatar } from '@dicebear/core'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useCallback, useEffect, useMemo } from 'react'
 import { erc20Abi, getAddress, parseUnits } from 'viem'
 import { useAccount } from 'wagmi'
@@ -31,22 +29,12 @@ const createDefaultDBWallet = (address: string): interfaces.IDBWallet => ({
 
 export const useWallet = () => {
     const dispatch = useAppDispatch()
-    const queryClient = useQueryClient()
     const toast = useToast()
     const { address: kernelClientAddress, isKernelClientReady } = useZeroDev()
     const { isConnected: isWagmiConnected, addresses: wagmiAddresses, connector } = useAccount()
     const { addAccount, user } = useAuth()
     const { selectedAddress, wallets, signInModalVisible, walletColor } = useWalletStore()
 
-    const getWalletIcon = useCallback(
-        (address: string) => {
-            if (connector?.icon) return connector.icon
-
-            return createAvatar(identicon, { seed: address.toLowerCase(), size: 128 }).toDataUri()
-        },
-        [connector]
-    )
-
     const isWalletConnected = useCallback(
         (wallet: interfaces.IDBWallet): boolean => {
             if (isPeanut(wallet) && kernelClientAddress) {
@@ -72,7 +60,7 @@ export const useWallet = () => {
                               walletProviderType: account.account_type as unknown as interfaces.WalletProviderType,
                               protocolType: interfaces.WalletProtocolType.EVM,
                               address: account.account_identifier,
-                              walletIcon: getWalletIcon(account.account_identifier),
+                              connector: account.connector,
                           }
 
                           let balance = BigInt(0)
@@ -148,6 +136,13 @@ export const useWallet = () => {
                     accountIdentifier: address,
                     accountType: interfaces.WalletProviderType.BYOW,
                     userId: user.user.userId,
+                    connector:
+                      connector && connector.icon
+                          ? {
+                                iconUrl: connector.icon,
+                                name: connector.name,
+                            }
+                          : undefined,
                 }).catch((error) => {
                     const errorMsg = error.message.includes('Account already exists')
                         ? 'Could not add external wallet, already associated with another account'

src/interfaces/interfaces.ts

@@ -400,6 +400,10 @@ interface Account {
     referred_users_points: number
     totalReferralPoints: number
     chain_id: ChainIdType
+    connector?: {
+        iconUrl: string
+        name: string
+    }
 }
 
 export interface IUserProfile {

src/interfaces/wallet.interfaces.ts

@@ -16,7 +16,10 @@ export interface IDBWallet {
     walletProviderType: WalletProviderType
     protocolType: WalletProtocolType
     address: string
-    walletIcon?: string
+    connector?: {
+        iconUrl: string
+        name: string
+    }
 }
 
 export interface IWallet extends IDBWallet {