feat: updated wallet asset page ui

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

@@ -1,7 +1,10 @@
 'use client'
 
+import { ARBITRUM_ICON } from '@/assets'
 import { useDashboard } from '@/components/Dashboard/useDashboard'
-import { HistoryView } from '@/components/Global/HistoryView'
+import { ListItemView, TransactionType } from '@/components/Global/ListItemView'
+import * as utils from '@/utils'
+
 import NavHeader from '@/components/Global/NavHeader'
 import { PEANUT_API_URL } from '@/constants'
 import { useWallet } from '@/hooks/useWallet'
@@ -107,16 +110,38 @@ const HistoryPage = () => {
             <div className="w-full">
                 {data?.pages.map((page, pageIndex) => (
                     <div key={pageIndex}>
-                        {page.items.map((item) => (
-                            <div key={item.id} className="border-b border-n-1">
-                                <HistoryView
-                                    id={item.id}
-                                    transactionType={item.transactionType}
-                                    amount={item.amount}
-                                    recipientAddress={item.recipientAddress}
-                                    status={item.status}
-                                    transactionDetails={item.transactionDetails}
-                                />
+                        {data?.pages.map((page, pageIndex) => (
+                            <div key={pageIndex}>
+                                {page.items.map((item) => (
+                                    <div key={item.id} className="border-b border-n-1">
+                                        <ListItemView
+                                            id={item.id}
+                                            variant="history"
+                                            primaryInfo={{
+                                                title: item.transactionType,
+                                            }}
+                                            secondaryInfo={{
+                                                mainText: item.amount,
+                                            }}
+                                            metadata={{
+                                                tokenLogo:
+                                                    item.transactionDetails.tokenSymbol === 'USDC'
+                                                        ? 'https://cryptologos.cc/logos/usd-coin-usdc-logo.png?v=040'
+                                                        : undefined,
+                                                chainLogo:
+                                                    item.transactionDetails.chain === 'Arbitrum One'
+                                                        ? ARBITRUM_ICON
+                                                        : undefined,
+                                                subText: item.transactionDetails.date
+                                                    ? utils.formatDate(new Date(item.transactionDetails.date))
+                                                    : '',
+                                                recipientAddress: item.recipientAddress,
+                                                transactionType: item.transactionType as TransactionType,
+                                            }}
+                                            details={item.transactionDetails}
+                                        />
+                                    </div>
+                                ))}
                             </div>
                         ))}
                     </div>

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

@@ -1,7 +1,8 @@
 'use client'
 
-import { ArrowIcon, Button } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle'
 import { useToast } from '@/components/0_Bruddle/Toast'
+import DirectionalActionButtons from '@/components/Global/DirectionalActionButtons'
 import WalletHeader from '@/components/Global/WalletHeader'
 import { WalletCard } from '@/components/Home/WalletCard'
 import ProfileSection from '@/components/Profile/Components/ProfileSection'
@@ -11,7 +12,6 @@ import { useZeroDev } from '@/hooks/useZeroDev'
 import { getUserPreferences, updateUserPreferences } from '@/utils'
 import classNames from 'classnames'
 import { motion, useAnimation } from 'framer-motion'
-import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { useEffect, useRef, useState } from 'react'
 
@@ -158,28 +158,16 @@ export default function Home() {
                         )}
                     </div>
 
-                    <div className="flex w-full flex-grow flex-row items-center justify-center gap-5 sm:justify-evenly md:mx-auto md:w-fit">
-                        <Link href={'/send'}>
-                            <Button
-                                variant="purple"
-                                shadowSize="4"
-                                className="flex w-38 items-center gap-2 rounded-full transition-all ease-in-out active:scale-95"
-                            >
-                                <ArrowIcon />
-                                <p className="text-base">Send</p>
-                            </Button>
-                        </Link>
-                        <Link href={'/request/create'}>
-                            <Button
-                                variant="purple"
-                                shadowSize="4"
-                                className="flex w-38 items-center gap-2 rounded-full transition-all ease-in-out active:scale-95"
-                            >
-                                <ArrowIcon className="rotate-180" />
-                                <p className="text-base">Receive</p>
-                            </Button>
-                        </Link>
-                    </div>
+                    <DirectionalActionButtons
+                        leftButton={{
+                            title: 'Send',
+                            href: '/send',
+                        }}
+                        rightButton={{
+                            title: 'Receive',
+                            href: '/request/create',
+                        }}
+                    />
                 </div>
             </div>
         </div>

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

@@ -5,6 +5,7 @@ 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'
@@ -15,7 +16,6 @@ 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'
 
 const publicPathRegex = /^\/(request\/pay|claim)/
 
@@ -40,7 +40,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
 
     if (!isReady) return null
     return (
-        <div className="flex h-[100dvh] flex-col  bg-background md:flex-row-reverse">
+        <div className="flex min-h-[100dvh] flex-col  bg-background md:flex-row-reverse">
             <div
                 className={classNames('z-1 flex w-full flex-1 overflow-x-visible overflow-y-scroll', {
                     'p-6': !isHome,

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

@@ -1,78 +1,127 @@
 'use client'
 
-import smallPeanut from '@/assets/icons/small-peanut.png'
-import { ArrowIcon, Button, Card } from '@/components/0_Bruddle'
+import { Button } from '@/components/0_Bruddle'
+import DirectionalActionButtons from '@/components/Global/DirectionalActionButtons'
+import NoDataEmptyState from '@/components/Global/EmptyStates/NoDataEmptyState'
 import Icon from '@/components/Global/Icon'
-import { HomeLink } from '@/components/Home/HomeLink'
+import { ListItemView } from '@/components/Global/ListItemView'
+import NavHeader from '@/components/Global/NavHeader'
+import { WalletCard } from '@/components/Home/WalletCard'
 import { useAuth } from '@/context/authContext'
 import { useWallet } from '@/hooks/useWallet'
 import { WalletProviderType } from '@/interfaces'
-import { printableUsdc } from '@/utils'
-import { motion } from 'framer-motion'
-import Link from 'next/link'
+import { formatAmount, getChainName, getUserPreferences, updateUserPreferences } from '@/utils'
+import { useAppKit, useDisconnect } from '@reown/appkit/react'
+import { useState } from 'react'
+import { twMerge } from 'tailwind-merge'
 
 const WalletDetailsPage = () => {
-    const { selectedWallet } = useWallet()
-    const { user } = useAuth()
+    const { selectedWallet, isConnected } = useWallet()
+    const { open } = useAppKit()
+    const { disconnect } = useDisconnect()
+    const [isBalanceHidden, setIsBalanceHidden] = useState(() => {
+        const prefs = getUserPreferences()
+        return prefs?.balanceHidden ?? false
+    })
+
+    const { username } = useAuth()
     const isActiveWalletPW = selectedWallet?.walletProviderType === WalletProviderType.PEANUT
     const isActiveWalletBYOW = selectedWallet?.walletProviderType === WalletProviderType.BYOW
 
+    console.log('selectedWallet', selectedWallet)
+
+    const handleToggleBalanceVisibility = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation()
+        setIsBalanceHidden((prev: boolean) => {
+            const newValue = !prev
+            updateUserPreferences({ balanceHidden: newValue })
+            return newValue
+        })
+    }
+
     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%]">
+        <div className="mx-auto flex w-full flex-col gap-6 md:max-w-2xl">
+            <div className="md:hidden">
+                <NavHeader title="Wallet asset" />
+            </div>
+
+            <div className="mx-auto">
                 {selectedWallet && (
-                    <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" />
-                            {isActiveWalletPW && (
-                                <p className="text-xl sm:text-2xl">
-                                    <span className="font-bold">{user?.user.username}</span>.peanut.wallet
-                                </p>
-                            )}
-                            {isActiveWalletBYOW && (
-                                <p className="text-xl sm:text-2xl">
-                                    <span className="font-bold">{selectedWallet.address}</span>.peanut.wallet
-                                </p>
-                            )}
-                        </Card.Content>
-                    </Card>
+                    <WalletCard
+                        key={selectedWallet.address}
+                        type="wallet"
+                        wallet={selectedWallet}
+                        username={username ?? ''}
+                        selected
+                        onClick={() => {}}
+                        index={0}
+                        isBalanceHidden={isBalanceHidden}
+                        onToggleBalanceVisibility={handleToggleBalanceVisibility}
+                    />
                 )}
+            </div>
+
+            <DirectionalActionButtons
+                leftButton={{
+                    title: 'Top up',
+                    href: '/topup',
+                    disabled: true,
+                }}
+                rightButton={{
+                    title: 'Cash out',
+                    href: '/cashout',
+                }}
+            />
 
-                <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>
-                    </Card.Content>
-                </Card>
-                <div className="flex flex-row gap-2">
-                    <Button shadowSize="4">
-                        <Link href="/cashout" className="flex flex-row items-center text-nowrap">
-                            <div>
-                                <Icon name="minus-circle" />
-                            </div>
-                            Cash out
-                        </Link>
-                    </Button>
-                    <Button shadowSize="4" className="text-nowrap" disabled>
+            <div
+                className={twMerge(
+                    selectedWallet?.balances && !!selectedWallet?.balances?.length ? 'border-b border-b-n-1' : ''
+                )}
+            >
+                {!!selectedWallet?.balances?.length ? (
+                    <div className="space-y-3">
+                        <div className="text-base font-semibold">Balance</div>
                         <div>
-                            <Icon name="plus-circle" />
+                            {selectedWallet.balances.map((balance) => (
+                                <ListItemView
+                                    key={`${balance.chainId}-${balance.symbol}`}
+                                    id={`${balance.chainId}-${balance.symbol}`}
+                                    variant="balance"
+                                    primaryInfo={{
+                                        title: balance.symbol,
+                                    }}
+                                    secondaryInfo={{
+                                        mainText: `$${Number(balance.value).toFixed(2)}`,
+                                        subText: getChainName(balance.chainId),
+                                    }}
+                                    metadata={{
+                                        tokenLogo: balance.logoURI,
+                                        subText: `${formatAmount(balance.amount)} ${balance.symbol}`,
+                                    }}
+                                    details={balance}
+                                />
+                            ))}
                         </div>
-                        Top Up
-                    </Button>
-                </div>
-                <div className="flex w-full flex-grow flex-row items-center justify-center gap-4 sm:justify-evenly sm:gap-8">
-                    <motion.div className="flex flex-col items-center gap-2" whileTap={{ scale: 0.95 }}>
-                        <HomeLink href={'/send'}>
-                            <ArrowIcon />
-                        </HomeLink>
-                        <p className="text-base">Send</p>
-                    </motion.div>
-                    <motion.div className="flex flex-col items-center gap-2" whileTap={{ scale: 0.95 }}>
-                        <HomeLink href={'/request/create'}>
-                            <ArrowIcon className="rotate-180" />
-                        </HomeLink>
-                        <p>Recieve</p>
-                    </motion.div>
-                </div>
+                    </div>
+                ) : (
+                    <NoDataEmptyState message="No tokens found" />
+                )}
+            </div>
+            <div>
+                <Button
+                    onClick={() => {
+                        if (isConnected) {
+                            disconnect()
+                        } else {
+                            open()
+                        }
+                    }}
+                    variant="stroke"
+                    className="flex w-full items-center justify-center gap-2 bg-purple-4/30 hover:bg-purple-4/20"
+                >
+                    <Icon name={isConnected ? 'minus-circle' : 'plus-circle'} className="size-4" />
+                    <div>{isConnected ? 'Disconnect' : 'Connect'}</div>
+                </Button>
             </div>
         </div>
     )

src/assets/peanut/index.ts

@@ -1,6 +1,7 @@
 export { default as PEANUTMAN_MANTLE } from './peanut-holding-mantle-logo.svg'
 export { default as PEANUTMAN_MOBILE } from './peanut-holding-mobile.svg'
 export { default as PEANUTMAN_CHEERING } from './peanutman-cheering.svg'
+export { default as PEANUTMAN_CRY } from './peanutman-cry.png'
 export { default as PEANUTMAN_HAPPY } from './peanutman-happy.svg'
 export { default as PEANUTMAN_LOGO } from './peanutman-logo.svg'
 export { default as PEANUTMAN_PRESENTING } from './peanutman-presenting.svg'

src/components/0_Bruddle/Button.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import { twMerge } from 'tailwind-merge'
 import Loading from '../Global/Loading'
 
-type ButtonVariant = 'purple' | 'dark' | 'stroke' | 'transparent-light' | 'transparent-dark' | 'green' | 'yellow'
+export type ButtonVariant = 'purple' | 'dark' | 'stroke' | 'transparent-light' | 'transparent-dark' | 'green' | 'yellow'
 type ButtonSize = 'small' | 'medium' | 'large' | 'xl' | 'xl-fixed'
 type ButtonShape = 'default' | 'square'
 type ShadowSize = '4' | '6' | '8'