Merge branch 'peanut-wallet' into feat/history-page

src/app/(mobile-ui)/history/page.tsx

@@ -7,7 +7,7 @@ import * as utils from '@/utils'
 
 import NavHeader from '@/components/Global/NavHeader'
 import { PEANUT_API_URL } from '@/constants'
-import { useWallet } from '@/hooks/useWallet'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { IDashboardItem } from '@/interfaces'
 import { formatAmountWithSignificantDigits, printableAddress } from '@/utils'
 import { useInfiniteQuery } from '@tanstack/react-query'

src/app/(mobile-ui)/home/page.tsx

@@ -6,8 +6,12 @@ import WalletHeader from '@/components/Global/WalletHeader'
 import { WalletCard } from '@/components/Home/WalletCard'
 import ProfileSection from '@/components/Profile/Components/ProfileSection'
 import { useAuth } from '@/context/authContext'
-import { useWallet } from '@/hooks/useWallet'
 import { useZeroDev } from '@/hooks/useZeroDev'
+import { useWallet } from '@/hooks/wallet/useWallet'
+import { useWalletConnection } from '@/hooks/wallet/useWalletConnection'
+import { WalletProviderType } from '@/interfaces'
+import { useAppDispatch } from '@/redux/hooks'
+import { walletActions } from '@/redux/slices/wallet-slice'
 import { getUserPreferences, updateUserPreferences } from '@/utils'
 import classNames from 'classnames'
 import { motion, useAnimation } from 'framer-motion'
@@ -19,28 +23,39 @@ const cardWidth = 300
 const cardMargin = 16
 
 export default function Home() {
+    const dispatch = useAppDispatch()
     const controls = useAnimation()
     const router = useRouter()
     const carouselRef = useRef<HTMLDivElement>(null)
+    const { connectWallet } = useWalletConnection()
 
     const [isBalanceHidden, setIsBalanceHidden] = useState(() => {
         const prefs = getUserPreferences()
         return prefs?.balanceHidden ?? false
     })
 
-    const { addBYOW, username } = useAuth()
-    const { selectedWallet, wallets, isPeanutWallet, isConnected, setSelectedWallet } = useWallet()
+    const { username } = useAuth()
 
-    const hasWallets = wallets.length > 0
-    const { handleLogin, isLoggingIn } = useZeroDev()
-    const toast = useToast()
+    const { selectedWallet, wallets, isPeanutWallet, isConnected, setSelectedWallet, isWalletConnected } = useWallet()
 
+    // initialize focusedIndex to match selectedWalletIndex
     const rawIndex = wallets.findIndex((wallet) => wallet.address === selectedWallet?.address)
     const selectedWalletIndex = rawIndex === -1 ? 0 : rawIndex
+    const [focusedIndex, setFocusedIndex] = useState(selectedWalletIndex)
 
+    // update focusedIndex when selectedWallet changes
+    useEffect(() => {
+        const index = wallets.findIndex((wallet) => wallet.address === selectedWallet?.address)
+        if (index !== -1) {
+            setFocusedIndex(index)
+        }
+    }, [selectedWallet, wallets])
+
+    const hasWallets = wallets.length > 0
+    const { handleLogin, isLoggingIn } = useZeroDev()
+    const toast = useToast()
     const totalCards = hasWallets ? wallets.length + 1 : 1
 
-    // hide balance
     const handleToggleBalanceVisibility = (e: React.MouseEvent<HTMLButtonElement>) => {
         e.stopPropagation()
         setIsBalanceHidden((prev: boolean) => {
@@ -59,14 +74,55 @@ export default function Home() {
 
     const handleCardClick = (index: number) => {
         if (index < wallets.length) {
-            if (selectedWalletIndex === index) {
+            const wallet = wallets[index]
+
+            if (focusedIndex !== index) {
+                setFocusedIndex(index)
+                dispatch(walletActions.setFocusedWallet(wallet))
+                controls.start({
+                    x: -(index * (cardWidth + cardMargin)),
+                    transition: { type: 'spring', stiffness: 300, damping: 30 },
+                })
+
+                if (wallet.walletProviderType === WalletProviderType.PEANUT || isWalletConnected(wallet)) {
+                    setSelectedWallet(wallet)
+                }
+                return
+            }
+
+            if (focusedIndex === index) {
                 router.push('/wallet')
-            } else {
-                setSelectedWallet(wallets[index])
             }
         }
     }
 
+    const handleDragEnd = (_e: any, { offset, velocity }: any) => {
+        const swipe = Math.abs(offset.x) * velocity.x
+        let targetIndex = focusedIndex
+
+        if (swipe < -10000) {
+            targetIndex = Math.min(focusedIndex + 1, totalCards - 1)
+        } else if (swipe > 10000) {
+            targetIndex = Math.max(focusedIndex - 1, 0)
+        }
+
+        setFocusedIndex(targetIndex)
+
+        if (targetIndex < wallets.length) {
+            dispatch(walletActions.setFocusedWallet(wallets[targetIndex]))
+
+            const targetWallet = wallets[targetIndex]
+            if (targetWallet.walletProviderType === WalletProviderType.PEANUT || isWalletConnected(targetWallet)) {
+                setSelectedWallet(targetWallet)
+            }
+        }
+
+        controls.start({
+            x: -(targetIndex * (cardWidth + cardMargin)),
+            transition: { type: 'spring', stiffness: 300, damping: 30 },
+        })
+    }
+
     return (
         <div className="w-full">
             <div className="flex w-full flex-row justify-center overflow-hidden p-6">
@@ -117,43 +173,29 @@ export default function Home() {
                                     right: 0,
                                 }}
                                 dragElastic={0.2}
-                                onDragEnd={(_e, { offset, velocity }) => {
-                                    const swipe = Math.abs(offset.x) * velocity.x
-                                    if (swipe < -10000) {
-                                        const nextIndex = Math.min(selectedWalletIndex + 1, totalCards - 1)
-                                        if (nextIndex < wallets.length) {
-                                            setSelectedWallet(wallets[nextIndex])
-                                        }
-                                    } else if (swipe > 10000) {
-                                        const prevIndex = Math.max(selectedWalletIndex - 1, 0)
-                                        setSelectedWallet(wallets[prevIndex])
-                                    } else {
-                                        controls.start({
-                                            x: -(selectedWalletIndex * (cardWidth + cardMargin)),
-                                            transition: { type: 'spring', stiffness: 300, damping: 30 },
-                                        })
-                                    }
-                                }}
+                                onDragEnd={handleDragEnd}
                             >
-                                {wallets.map((wallet, index) => (
-                                    <WalletCard
-                                        key={wallet.address}
-                                        type="wallet"
-                                        wallet={wallet}
-                                        username={username ?? ''}
-                                        selected={selectedWalletIndex === index}
-                                        onClick={() => handleCardClick(index)}
-                                        index={index}
-                                        isBalanceHidden={isBalanceHidden}
-                                        onToggleBalanceVisibility={handleToggleBalanceVisibility}
-                                    />
-                                ))}
-
-                                <WalletCard type="add" onClick={addBYOW} />
+                                {!!wallets.length &&
+                                    wallets.map((wallet, index) => (
+                                        <WalletCard
+                                            key={wallet.address}
+                                            type="wallet"
+                                            wallet={wallet}
+                                            username={username ?? ''}
+                                            selected={selectedWalletIndex === index}
+                                            onClick={() => handleCardClick(index)}
+                                            index={index}
+                                            isBalanceHidden={isBalanceHidden}
+                                            onToggleBalanceVisibility={handleToggleBalanceVisibility}
+                                            isFocused={focusedIndex === index}
+                                        />
+                                    ))}
+
+                                <WalletCard type="add" onClick={connectWallet} />
                             </motion.div>
                         ) : (
                             <div className="flex h-full w-full flex-grow flex-col justify-center">
-                                <WalletCard type="add" onClick={addBYOW} />
+                                <WalletCard type="add" onClick={connectWallet} />
                             </div>
                         )}
                     </div>

src/app/(mobile-ui)/layout.tsx

@@ -5,17 +5,17 @@ import { useToast } from '@/components/0_Bruddle/Toast'
 import Modal from '@/components/Global/Modal'
 import WalletNavigation from '@/components/Global/WalletNavigation'
 import HomeWaitlist from '@/components/Home/HomeWaitlist'
+import { ThemeProvider } from '@/config'
 import { peanutWalletIsInPreview } from '@/constants'
 import { useAuth } from '@/context/authContext'
-import { useWallet } from '@/hooks/useWallet'
 import { useZeroDev } from '@/hooks/useZeroDev'
+import { useWallet } from '@/hooks/wallet/useWallet'
 import { useAppKit } from '@reown/appkit/react'
 import classNames from 'classnames'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useEffect, useMemo, useState } from 'react'
-import '../../styles/globals.bruddle.css'
-import { ThemeProvider } from '@/config'
+import '../../styles/globals.css'
 
 const publicPathRegex = /^\/(request\/pay|claim)/
 

src/app/(mobile-ui)/wallet/page.tsx

@@ -5,22 +5,25 @@ import { ArrowIcon, Button, Card } from '@/components/0_Bruddle'
 import Icon from '@/components/Global/Icon'
 import { HomeLink } from '@/components/Home/HomeLink'
 import { useAuth } from '@/context/authContext'
-import { useWallet } from '@/hooks/useWallet'
 import { WalletProviderType } from '@/interfaces'
+import { useWalletStore } from '@/redux/hooks'
 import { printableUsdc } from '@/utils'
 import { motion } from 'framer-motion'
 import Link from 'next/link'
 
 const WalletDetailsPage = () => {
-    const { selectedWallet } = useWallet()
+    const { focusedWallet, wallets } = useWalletStore()
     const { user } = useAuth()
-    const isActiveWalletPW = selectedWallet?.walletProviderType === WalletProviderType.PEANUT
-    const isActiveWalletBYOW = selectedWallet?.walletProviderType === WalletProviderType.BYOW
+
+    const walletDetails = wallets.find((wallet) => wallet.address === focusedWallet)
+
+    const isActiveWalletPW = walletDetails?.walletProviderType === WalletProviderType.PEANUT
+    const isActiveWalletBYOW = walletDetails?.walletProviderType === WalletProviderType.BYOW
 
     return (
         <div className="flex w-full flex-row justify-center gap-2">
             <div className="flex w-[100%] flex-col gap-4 sm:w-[90%] sm:gap-2 md:w-[70%] lg:w-[35%]">
-                {selectedWallet && (
+                {focusedWallet && (
                     <Card shadowSize="4" className="w-full rounded-md py-5">
                         <Card.Content className="flex h-full flex-row items-center justify-evenly">
                             <img src={smallPeanut.src} className="h-15 w-15 object-contain" />
@@ -31,7 +34,7 @@ const WalletDetailsPage = () => {
                             )}
                             {isActiveWalletBYOW && (
                                 <p className="text-xl sm:text-2xl">
-                                    <span className="font-bold">{selectedWallet.address}</span>.peanut.wallet
+                                    <span className="font-bold">{walletDetails.address}</span>.peanut.wallet
                                 </p>
                             )}
                         </Card.Content>
@@ -40,7 +43,7 @@ const WalletDetailsPage = () => {
 
                 <Card shadowSize="4" className="w-full rounded-md py-10">
                     <Card.Content className="flex h-full flex-row items-center justify-center">
-                        <div className="text-5xl">$ {printableUsdc(selectedWallet?.balance ?? 0n)}</div>
+                        <div className="text-5xl">$ {printableUsdc(walletDetails?.balance ?? 0n)}</div>
                     </Card.Content>
                 </Card>
                 <div className="flex flex-row gap-2">

src/app/(setup)/layout.tsx

@@ -5,7 +5,7 @@ import { useAppDispatch } from '@/redux/hooks'
 import { setupActions } from '@/redux/slices/setup-slice'
 import { useEffect } from 'react'
 import { setupSteps } from '../../components/Setup/Setup.consts'
-import '../../styles/globals.bruddle.css'
+import '../../styles/globals.css'
 
 const SetupLayout = ({ children }: { children?: React.ReactNode }) => {
     const dispatch = useAppDispatch()

src/app/page.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import { useState, useEffect } from 'react'
 import * as assets from '@/assets'
 import Layout from '@/components/Global/Layout'
-import { Hero, FAQs, Features, Mike, Story, BuildOnUs } from '@/components/LandingPage'
+import { BuildOnUs, FAQs, Features, Hero, Mike, Story } from '@/components/LandingPage'
 import { useFooterVisibility } from '@/context/footerVisibility'
+import { useEffect, useState } from 'react'
 
 export default function LandingPage() {
     const hero = {
@@ -154,7 +154,7 @@ export default function LandingPage() {
             <BuildOnUs />
             <Story marquee={story.marquee} />
             <Features sections={[features.sections[1]]} marquee={features.marquee} />
-            <div className="bg-pink-1">
+            <div className="bg-primary-1">
                 <Mike lines={mike.lines} />
             </div>
         </Layout>

src/components/0_Bruddle/Button.tsx

@@ -24,7 +24,7 @@ const buttonVariants: Record<ButtonVariant, string> = {
     'transparent-light': 'btn-transparent-light',
     'transparent-dark': 'btn-transparent-dark',
     green: 'bg-green-1',
-    yellow: 'bg-yellow-1',
+    yellow: 'bg-secondary-1',
 }
 
 const buttonSizes: Record<ButtonSize, string> = {
@@ -64,7 +64,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ref
     ) => {
         const buttonClasses = twMerge(
-            'btn w-full',
+            'btn w-full flex items-center gap-2',
             buttonVariants[variant],
             size && buttonSizes[size],
             shape === 'square' && 'btn-square',

src/components/0_Bruddle/Card.tsx

@@ -47,13 +47,13 @@ const Header = ({ children, className, ...props }: React.HTMLAttributes<HTMLDivE
 )
 
 const Title = ({ children, className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
-    <h3 className={twMerge('text-h4 font-semibold sm:text-h3', className)} {...props}>
+    <h3 className={twMerge('pb-1 text-start text-h4 font-semibold sm:text-h3', className)} {...props}>
         {children}
     </h3>
 )
 
 const Description = ({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
-    <p className={twMerge('text-sm text-gray-600 dark:text-gray-400', className)} {...props}>
+    <p className={twMerge('text-start text-sm text-gray-600 dark:text-gray-400', className)} {...props}>
         {children}
     </p>
 )

src/components/0_Bruddle/Field.tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import Icon, { IconNameType } from '../Global/Icon'
-import { useFormContext } from 'react-hook-form'
 import classNames from 'classnames'
-import React from 'react'
-import { DetailedHTMLProps, InputHTMLAttributes, useState } from 'react'
+import React, { DetailedHTMLProps, InputHTMLAttributes, useState } from 'react'
+import { useFormContext } from 'react-hook-form'
+import Icon, { IconNameType } from '../Global/Icon'
 import BaseInput from './BaseInput'
 
 type FieldProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
@@ -34,7 +33,7 @@ export const Field = React.forwardRef(
                                 {
                                     'pr-15': icon || type === 'password',
                                     '!border-green-1 pr-15': success,
-                                    '!border-pink-1 pr-15': error,
+                                    '!border-primary-1 pr-15': error,
                                 },
                                 className
                             )}
@@ -62,7 +61,7 @@ export const Field = React.forwardRef(
                         {(success || error) && (
                             <Icon
                                 className={`icon-20 pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 ${
-                                    success ? 'fill-green-1' : 'fill-pink-1'
+                                    success ? 'fill-green-1' : 'fill-primary-1'
                                 }`}
                                 name={success ? 'check-circle' : 'info-circle'}
                             />

src/components/0_Bruddle/Title.tsx

@@ -10,10 +10,10 @@ const Title = ({
 } & React.HTMLAttributes<HTMLParagraphElement>) => {
     return (
         <div className="relative inline-block">
-            <p className={twMerge('font-knerd-filled relative text-white', offset && 'translate-x-[3px]', className)}>
+            <p className={twMerge('relative font-knerd-filled text-white', offset && 'translate-x-[3px]', className)}>
                 {text}
             </p>
-            <p className={twMerge('font-knerd-outline absolute left-0 top-0', className)}>{text}</p>
+            <p className={twMerge('absolute left-0 top-0 font-knerd-outline', className)}>{text}</p>
         </div>
     )
 }