Repository: peanutprotocol/peanut-ui
Pull request #745: fix: setup copy changes
Author: login: Hugo0
Created: 2025-03-18T15:21:59Z | Merged: 2025-03-19T19:39:19Z

flagging: Badly named branch

fixes: 
- addressLink everywhere
- addressLink doesnt link to debank anymore
- payment receipt ens resolution hierarchy https://discord.com/channels/972435984954302464/1351613681867427932/1351631175940313088
- /setup copy changes
- new setup instructions on desktop to incentivize PWA install
- minor code fixes
- makes card address smaller, slightly more legible



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Recipient and payer addresses are now interactive clickable links across payments, history, and confirmations.
  - A QR code is provided on the installation page to guide mobile setups.

- **Refactor**
  - Setup step titles and descriptions have been revised for clearer, more engaging guidance.
  - Address rendering logic has been streamlined across various views for a consistent experience.

- **Style**
  - Wallet display details now use dynamic URLs and adjusted font sizes for improved visual presentation.
  
- **Bug Fixes**
  - Enhanced clarity in setup steps and improved user engagement through revised language.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/src/app/(mobile-ui)/history/page.tsx b/src/app/(mobile-ui)/history/page.tsx
index 90f6b3205..1d31d5897 100644
--- a/src/app/(mobile-ui)/history/page.tsx
+++ b/src/app/(mobile-ui)/history/page.tsx
@@ -72,8 +72,11 @@ const HistoryPage = () => {
                 amount: `${isStableCoin(data.tokenSymbol) ? `$${formatAmount(data.amount)}` : `${formatAmount(data.amount)} ${data.tokenSymbol}`}`,
                 recipientAddress: data.address ?? '',
                 recipientAddressFormatter: (address: string) => {
-                    const sanitizedAddressOrName = isAddress(address) ? printableAddress(address) : address
-                    return `To ${sanitizedAddressOrName}`
+                    return (
+                        <>
+                            To <AddressLink address={address} />
+                        </>
+                    )
                 },
                 status: transactionStatus,
                 transactionDetails: {
diff --git a/src/app/[...recipient]/layout.tsx b/src/app/[...recipient]/layout.tsx
index 2768b808a..516ce318c 100644
--- a/src/app/[...recipient]/layout.tsx
+++ b/src/app/[...recipient]/layout.tsx
@@ -1,4 +1,6 @@
 import PaymentLayoutWrapper from './payment-layout-wrapper'
+import { printableAddress } from '@/utils'
+import { isAddress } from 'viem'
 
 function getPreviewUrl(
     host: string,
@@ -60,11 +62,11 @@ export async function generateMetadata({ params }: any) {
     previewUrl = getPreviewUrl(host, previewData)
 
     if (amount && token) {
-        title = `${recipient} is requesting ${amount} ${token.toUpperCase()}`
+        title = `${isAddress(recipient) ? printableAddress(recipient) : recipient} is requesting ${amount} ${token.toUpperCase()}`
     } else if (amount) {
-        title = `${recipient} is requesting $${amount}`
+        title = `${isAddress(recipient) ? printableAddress(recipient) : recipient} is requesting $${amount}`
     } else {
-        title = `${recipient} is requesting funds`
+        title = `${isAddress(recipient) ? printableAddress(recipient) : recipient} is requesting funds`
     }
 
     return {
diff --git a/src/components/Create/Link/Confirm.view.tsx b/src/components/Create/Link/Confirm.view.tsx
index 6df8ff7c8..7013988c5 100644
--- a/src/components/Create/Link/Confirm.view.tsx
+++ b/src/components/Create/Link/Confirm.view.tsx
@@ -24,9 +24,10 @@ import {
     updateUserPreferences,
     validateEnsName,
 } from '@/utils'
-import * as Sentry from '@sentry/nextjs'
 import * as _consts from '../Create.consts'
 import { useCreateLink } from '../useCreateLink'
+import * as Sentry from '@sentry/nextjs'
+import AddressLink from '@/components/Global/AddressLink'
 
 export const CreateLinkConfirmView = ({
     onNext,
@@ -262,10 +263,11 @@ export const CreateLinkConfirmView = ({
                         {createType == 'link'
                             ? 'Send to Anyone'
                             : createType == 'direct'
-                              ? `Send to ${validateEnsName(recipient.name) ? recipient.name : printableAddress(recipient.address ?? '')}`
+                              ? `Send to ${validateEnsName(recipient.name) ? recipient.name : <AddressLink address={recipient.address ?? ''} />}`
                               : `Send to ${recipient.name}`}
                     </Card.Title>
                     <Card.Description>
+                        {/* TODO: use addresslink */}
                         {createType === 'link' &&
                             'Make a payment with the link. Send the link to the recipient. They will be able to claim the funds in any token on any chain from the link.'}
                         {createType === 'email_link' &&
@@ -273,7 +275,9 @@ export const CreateLinkConfirmView = ({
                         {createType === 'sms_link' &&
                             `You will send a text message to ${recipient.name ?? recipient.address} containing a link. They will be able to claim the funds in any token on any chain from the link.`}
                         {createType === 'direct' &&
-                            `You will send the tokens directly to ${recipient.name ?? recipient.address}. Ensure the recipient address is correct, else the funds might be lost.`}
+                            `You will send the tokens directly to ${
+                                recipient.name ?? <AddressLink address={recipient.address ?? ''} />
+                            }. Ensure the recipient address is correct, else the funds might be lost.`}
                     </Card.Description>
                 </Card.Header>
                 <Card.Content className="space-y-3">
diff --git a/src/components/Global/AddressLink/index.tsx b/src/components/Global/AddressLink/index.tsx
index 1bd443c47..ed2a865aa 100644
--- a/src/components/Global/AddressLink/index.tsx
+++ b/src/components/Global/AddressLink/index.tsx
@@ -4,12 +4,20 @@ import { usePrimaryName } from '@justaname.id/react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { isAddress } from 'viem'
+import { printableAddress } from '@/utils'
 
-const AddressLink = ({ address, recipientType }: { address: string; recipientType?: RecipientType }) => {
-    const [url, setUrl] = useState<string>('')
-    const [displayAddress, setDisplayAddress] = useState<string>(utils.printableAddress(address))
+interface AddressLinkProps {
+    address: string
+    className?: string
+    children?: React.ReactNode
+}
+
+const AddressLink = ({ address, className = '' }: AddressLinkProps) => {
+    const [displayAddress, setDisplayAddress] = useState<string>(
+        isAddress(address) ? printableAddress(address) : address
+    )
 
-    // Look up ENS name for any valid Ethereum address
+    // Look up ENS name only for Ethereum addresses
     const { primaryName: ensName } = usePrimaryName({
         address: isAddress(address) ? (address as `0x${string}`) : undefined,
         chainId: 1, // Mainnet for ENS lookups
@@ -17,26 +25,21 @@ const AddressLink = ({ address, recipientType }: { address: string; recipientTyp
     })
 
     useEffect(() => {
-        if (recipientType === 'USERNAME') {
-            setUrl(`${process.env.NEXT_PUBLIC_BASE_URL}/${address}`)
-        } else {
-            setUrl(`https://debank.com/profile/${address}`)
-        }
-
-        // Update display: prefer ENS name, fallback to shortened address
-        if (ensName) {
+        // Update display: prefer ENS name for addresses, otherwise use as-is
+        if (isAddress(address) && ensName) {
             setDisplayAddress(ensName)
         } else {
-            setDisplayAddress(utils.printableAddress(address))
+            setDisplayAddress(isAddress(address) ? printableAddress(address) : address)
         }
     }, [address, ensName])
 
-    return url ? (
-        <Link className="cursor-pointer underline" href={url} target="_blank">
+    // Create a simple URL - all identifiers go to /{identifier}
+    const url = `/${address}`
+
+    return (
+        <Link className={`cursor-pointer underline ${className}`} href={url} target="_blank">
             {displayAddress}
         </Link>
-    ) : (
-        <span>{displayAddress}</span>
     )
 }
 
diff --git a/src/components/Global/WalletHeader/index.tsx b/src/components/Global/WalletHeader/index.tsx
index 2e3cef1e4..0110a4330 100644
--- a/src/components/Global/WalletHeader/index.tsx
+++ b/src/components/Global/WalletHeader/index.tsx
@@ -206,7 +206,6 @@ const WalletHeader = ({ className, disabled, hideRewardsWallet = false }: Wallet
         }
     }, [sortedWallets, isWalletConnected, dispatch, selectedWallet])
 
-    // Add primary name resolution
     const { primaryName } = usePrimaryName({
         address: selectedWallet?.address,
         priority: 'onChain',
diff --git a/src/components/Home/WalletCard.tsx b/src/components/Home/WalletCard.tsx
index 769c4ffd7..f1799e267 100644
--- a/src/components/Home/WalletCard.tsx
+++ b/src/components/Home/WalletCard.tsx
@@ -81,6 +81,8 @@ function ExistingWalletCard({
     onClick,
 }: WalletCardWallet) {
     const { isWalletConnected } = useWallet()
+
+    // exceptionally we don't use AddressLink here because the whole card is clickable
     const { primaryName } = usePrimaryName({
         address: wallet.address,
         priority: 'onChain',
@@ -330,9 +332,8 @@ function WalletIdentifier({
             </p>
         )
     }
-
     return (
-        <p className="notranslate truncate text-xl font-black sm:text-2xl" translate="no">
+        <p className="notranslate truncate text-lg font-black sm:text-xl" translate="no">
             {displayName}
         </p>
     )
@@ -352,13 +353,16 @@ function getWalletDisplayInfo(
     }
 
     if (wallet.walletProviderType === WalletProviderType.PEANUT) {
+        const baseUrl = process.env.NEXT_PUBLIC_BASE_URL?.split('://')[1] || 'peanut.me'
         return {
             displayName: (
                 <>
-                    peanut.me/<span className="font-bold">{username}</span>
+                    <span className="font-bold">
+                        {baseUrl}/{username}
+                    </span>
                 </>
             ),
-            copyText: `peanut.me/${username}`,
+            copyText: `${baseUrl}/${username}`,
         }
     }
 
diff --git a/src/components/Payment/History/index.tsx b/src/components/Payment/History/index.tsx
index 2e85f6eb4..607e83d05 100644
--- a/src/components/Payment/History/index.tsx
+++ b/src/components/Payment/History/index.tsx
@@ -15,8 +15,7 @@ export default function PaymentHistory({ recipient, history }: PaymentHistoryPro
     return (
         <div className="space-y-3">
             <div className="text-base font-semibold">
-                Payment history to{' '}
-                <AddressLink address={recipient.resolvedAddress} recipientType={recipient.recipientType} />
+                Payment history to <AddressLink address={recipient.identifier} />
             </div>
             <div className="border-t border-t-black">
                 {[...history]
@@ -48,7 +47,6 @@ export default function PaymentHistory({ recipient, history }: PaymentHistoryPro
                                                     address={
                                                         entry.senderAccount.username || entry.senderAccount.identifier
                                                     }
-                                                    recipientType={entry.senderAccount.isUser ? 'USERNAME' : undefined}
                                                 />{' '}
                                                 <br className="md:hidden" /> <span className="hidden md:inline">|</span>{' '}
                                                 Status: {entry.status}
diff --git a/src/components/Payment/PaymentForm/index.tsx b/src/components/Payment/PaymentForm/index.tsx
index b129b7652..0482e6055 100644
--- a/src/components/Payment/PaymentForm/index.tsx
+++ b/src/components/Payment/PaymentForm/index.tsx
@@ -390,16 +390,6 @@ export const PaymentForm = ({ recipient, amount, token, chain, isPintaReq }: Par
         if (isPeanutWallet) resetTokenAndChain()
     }, [resetTokenAndChain, isPeanutWallet])
 
-    const recipientLabel = useMemo(() => {
-        if (!requestDetails) return ''
-
-        if (requestDetails.recipientAccount.type === AccountType.PEANUT_WALLET) {
-            return requestDetails.recipientAccount.user.username
-        }
-
-        return printableAddress(requestDetails.recipientAddress)
-    }, [requestDetails])
-
     const renderRequestedPaymentDetails = () => {
         if (!requestDetails || !requestDetails.tokenAmount || !requestDetails.tokenSymbol) return null
 
@@ -415,7 +405,14 @@ export const PaymentForm = ({ recipient, amount, token, chain, isPintaReq }: Par
 
         return (
             <div className="mb-6 border border-dashed border-black p-4">
-                <div className="text-sm font-semibold text-black">{recipientLabel} is requesting:</div>
+                <div className="text-sm font-semibold text-black">
+                    {requestDetails.recipientAccount.type === AccountType.PEANUT_WALLET ? (
+                        <AddressLink address={requestDetails.recipientAccount.user.username} />
+                    ) : (
+                        <AddressLink address={requestDetails.recipientAddress} />
+                    )}{' '}
+                    is requesting:
+                </div>
                 <div className="flex flex-col">
                     <PaymentInfoRow label="Amount" value={displayAmount} />
                     {requestDetails.chainId && (
@@ -538,12 +535,7 @@ export const PaymentForm = ({ recipient, amount, token, chain, isPintaReq }: Par
             <FlowHeader hideWalletHeader={!isConnected} isPintaReq={token?.symbol === 'PNT'} />
             {/* Show recipient from parsed data */}
             <div className="text-h6 font-bold">
-                Sending to{' '}
-                {recipient.recipientType === 'USERNAME' ? (
-                    recipient.identifier
-                ) : (
-                    <AddressLink address={recipient?.identifier} />
-                )}
+                Sending to <AddressLink address={recipient.identifier} />
             </div>
             <TokenAmountInput
                 tokenValue={inputTokenAmount}
diff --git a/src/components/Payment/PaymentInfoRow.tsx b/src/components/Payment/PaymentInfoRow.tsx
index 70f5b01e8..239619c48 100644
--- a/src/components/Payment/PaymentInfoRow.tsx
+++ b/src/components/Payment/PaymentInfoRow.tsx
@@ -8,7 +8,7 @@ export const PaymentInfoRow = ({
     moreInfoText,
     loading,
 }: {
-    label: string
+    label: string | React.ReactNode
     value: number | string | React.ReactNode
     moreInfoText?: string
     loading?: boolean
diff --git a/src/components/Payment/Views/Confirm.payment.view.tsx b/src/components/Payment/Views/Confirm.payment.view.tsx
index d74efeb80..092fd9bfd 100644
--- a/src/components/Payment/Views/Confirm.payment.view.tsx
+++ b/src/components/Payment/Views/Confirm.payment.view.tsx
@@ -30,6 +30,7 @@ import { useSearchParams } from 'next/navigation'
 import { useContext, useEffect, useMemo, useState } from 'react'
 import { useSwitchChain } from 'wagmi'
 import { PaymentInfoRow } from '../PaymentInfoRow'
+import AddressLink from '@/components/Global/AddressLink'
 
 export default function ConfirmPaymentView() {
     const dispatch = useAppDispatch()
@@ -504,7 +505,13 @@ export default function ConfirmPaymentView() {
             <div className="">
                 <PaymentInfoRow
                     label="Recipient"
-                    value={parsedPaymentData?.recipient?.identifier || chargeDetails?.requestLink?.recipientAddress}
+                    value={
+                        <AddressLink
+                            address={
+                                parsedPaymentData?.recipient?.identifier || chargeDetails?.requestLink?.recipientAddress
+                            }
+                        />
+                    }
                 />
 
                 <PaymentInfoRow
@@ -515,7 +522,17 @@ export default function ConfirmPaymentView() {
 
                 <PaymentInfoRow
                     loading={isCalculatingFees || isEstimatingGas}
-                    label={`${parsedPaymentData?.recipient.recipientType === 'ADDRESS' ? shortenAddressLong(parsedPaymentData?.recipient.identifier) : parsedPaymentData?.recipient.identifier} will receive`}
+                    label={
+                        <>
+                            <AddressLink
+                                address={
+                                    parsedPaymentData?.recipient?.identifier ||
+                                    chargeDetails?.requestLink?.recipientAddress
+                                }
+                            />{' '}
+                            will receive
+                        </>
+                    }
                     value={`${formatAmount(Number(chargeDetails!.tokenAmount))} ${chargeDetails?.tokenSymbol} on ${getReadableChainName(chargeDetails.chainId)}`}
                 />
 
diff --git a/src/components/Payment/Views/Payment.status.view.tsx b/src/components/Payment/Views/Payment.status.view.tsx
index 7e15c432d..8e07f0d14 100644
--- a/src/components/Payment/Views/Payment.status.view.tsx
+++ b/src/components/Payment/Views/Payment.status.view.tsx
@@ -18,6 +18,7 @@ import { formatDate, getExplorerUrl, shortenAddressLong } from '@/utils'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
 import { useEffect, useMemo } from 'react'
+import { isAddress } from 'viem'
 
 export default function PaymentStatusView() {
     const { requestDetails, chargeDetails, transactionHash, resolvedAddress } = usePaymentStore()
@@ -140,30 +141,16 @@ export default function PaymentStatusView() {
     const recipientLink = useMemo(() => {
         if (!requestDetails) return null
 
-        if (requestDetails.recipientAccount.user) {
-            const username = requestDetails.recipientAccount.user.username
-            return (
-                <Link className="cursor-pointer underline" href={`/${username}`}>
-                    {username}
-                </Link>
-            )
-        }
+        const identifier = requestDetails.recipientAccount.user
+            ? requestDetails.recipientAccount.user.username
+            : (resolvedAddress ?? requestDetails.recipientAddress)
 
-        return <AddressLink address={resolvedAddress ?? requestDetails.recipientAddress} />
+        return <AddressLink address={identifier} />
     }, [requestDetails, resolvedAddress])
 
     const payerLink = useMemo(() => {
         if (!latestPayment?.payerAddress) return null
 
-        if (latestPayment.payerAccount?.user) {
-            const username = latestPayment.payerAccount.user.username
-            return (
-                <Link className="cursor-pointer underline" href={`/${username}`}>
-                    {username}
-                </Link>
-            )
-        }
-
         return <AddressLink address={latestPayment.payerAddress} />
     }, [latestPayment])
 
diff --git a/src/components/Setup/Setup.consts.tsx b/src/components/Setup/Setup.consts.tsx
index 80736de0c..b2419596d 100644
--- a/src/components/Setup/Setup.consts.tsx
+++ b/src/components/Setup/Setup.consts.tsx
@@ -39,7 +39,7 @@ export const setupSteps: ISetupStep[] = [
         screenId: 'passkey-permission',
         layoutType: 'standard',
         title: `Let's setup passkeys`,
-        description: `Use your face or fingerprint to verify it's you. There's no need for a password.`,
+        description: `Use your face or fingerprint to verify it's you. There's no need for a password or seed phrase!`,
         image: passkeyPeanut.src,
         component: SetupPasskey,
         showBackButton: true,
@@ -49,8 +49,8 @@ export const setupSteps: ISetupStep[] = [
     {
         screenId: 'passkey-success',
         layoutType: 'standard',
-        title: `Your Passkey is already setup now`,
-        description: `Use your face or fingerprint to verify it's you. There's no need for a password.`,
+        title: `Your Passkey is set up!`,
+        description: `From now on, Peanut will use your face or fingerprint to verify it's you. Never lose or leak your seed phrase again - there is no seed phrase!`,
         image: ThumbsUp,
         component: PasskeySuccess,
         showBackButton: true,
@@ -61,7 +61,7 @@ export const setupSteps: ISetupStep[] = [
         screenId: 'notification-permission',
         layoutType: 'standard',
         title: 'Enable Notifications',
-        description: `Get immediately notified when you get paid.`,
+        description: `Get immediately notified when you get paid (and when we send you goodies)!`,
         image: PEANUTMAN_THINKING,
         component: NotificationPermission,
         showBackButton: true,
@@ -71,8 +71,8 @@ export const setupSteps: ISetupStep[] = [
     {
         screenId: 'pwa-install',
         layoutType: 'standard',
-        title: 'Install Peanut wallet App in your phone',
-        description: 'You can directly use app from Homescreen on your phone.',
+        title: 'Install Peanut on your phone',
+        description: 'We recommend installing Peanut on your phone for the best experience!',
         image: PEANUTMAN_MOBILE,
         component: InstallPWA,
         showBackButton: true,
@@ -82,8 +82,9 @@ export const setupSteps: ISetupStep[] = [
     {
         screenId: 'add-wallets',
         layoutType: 'standard',
-        title: 'Add extra wallet',
-        description: 'Have another wallet? Add it here to keep everything in one place.',
+        title: 'Add External Wallet',
+        description:
+            'Want to manage multiple wallets from peanut? Add it now to keep everything in one place - or do it later',
         image: PEANUTMAN_WALLET,
         component: AddWallets,
         showBackButton: true,
@@ -94,7 +95,7 @@ export const setupSteps: ISetupStep[] = [
         screenId: 'success',
         layoutType: 'standard',
         title: `You're all set!`,
-        description: 'Start using Peanut for payments.',
+        description: 'Start using Peanut for your payments',
         image: successPeanut.src,
         component: SetupSuccess,
         showBackButton: true,
diff --git a/src/components/Setup/Views/InstallPWA.tsx b/src/components/Setup/Views/InstallPWA.tsx
index f1d56e562..5de4c8f83 100644
--- a/src/components/Setup/Views/InstallPWA.tsx
+++ b/src/components/Setup/Views/InstallPWA.tsx
@@ -1,6 +1,7 @@
 import peanutPointing from '@/animations/512x512_PNGS_ALPHA_BACKGROUND/PNGS_512_konradurban_06/PNGS_konradurban_06_11.png'
 import { Button } from '@/components/0_Bruddle'
 import Modal from '@/components/Global/Modal'
+import QRCodeWrapper from '@/components/Global/QRCodeWrapper'
 import { useSetupFlow } from '@/hooks/useSetupFlow'
 import { useEffect, useState } from 'react'
 
@@ -54,6 +55,7 @@ const InstallPWA = () => {
     const [deviceType, setDeviceType] = useState<'ios' | 'android' | 'desktop'>('desktop')
     const [showModal, setShowModal] = useState(false)
     const [installComplete, setInstallComplete] = useState(false)
+    const [isDesktop, setIsDesktop] = useState(false)
 
     useEffect(() => {
         // Store the install prompt
@@ -75,18 +77,26 @@ const InstallPWA = () => {
         })
 
         // Detect device type
-        const isIOSDevice = /iPad|iPhone|iPod/.test(navigator.userAgent)
+        const isIOSDevice = /iPad|iPhone|iPod|Mac|Macintosh/.test(navigator.userAgent)
         const isMobileDevice = /Android|webOS|iPad|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
             navigator.userAgent
         )
 
-        if (isIOSDevice) {
-            setDeviceType('ios')
-        } else if (isMobileDevice) {
-            setDeviceType('android')
-        } else {
+        setIsDesktop(!isMobileDevice)
+
+        // For desktop, default to iOS if on Mac, otherwise Android
+        if (!isMobileDevice) {
             setDeviceType('desktop')
+        } else {
+            if (isIOSDevice) {
+                setDeviceType('ios')
+            } else {
+                setDeviceType('android')
+            }
         }
+
+        // Log the final device type
+        console.log('Detected Device Type:', deviceType)
     }, [])
 
     const handleInstall = async () => {
@@ -105,10 +115,10 @@ const InstallPWA = () => {
 
     const IOSInstructions = () => (
         <div className="space-y-4">
-            <StepTitle text="Add Peanut wallet in to your home screen" />
+            <StepTitle text="Install Peanut" />
             <p>
-                To add Peanut wallet to your Home screen, tap the (<ShareIcon />) icons and then {`"Add home Screen"`}{' '}
-                in your Safari browser.
+                To add Peanut to your Home screen, tap the (<ShareIcon />) icons and then {`"Add to home screen"`} in
+                your browser.
             </p>
         </div>
     )
@@ -117,12 +127,12 @@ const InstallPWA = () => {
         <div className="flex flex-col gap-4">
             {canInstall ? (
                 <Button onClick={handleInstall} className="w-full">
-                    Install Peanut Wallet
+                    Install Peanut
                 </Button>
             ) : (
                 <>
                     <div className="space-y-4">
-                        <StepTitle text="Add Peanut wallet in to your home screen" />
+                        <StepTitle text="Install Peanut" />
                         <p className="mt-2">1. Tap the three dots menu at the top of your screen.</p>
                         <p>2. Tap 'Add to Home Screen' or 'Install app' from the menu options.</p>
                     </div>
@@ -131,35 +141,44 @@ const InstallPWA = () => {
         </div>
     )
 
+    // Desktop instructions tell the user to install on their phone
     const DesktopInstructions = () => (
         <div>
-            {canInstall ? (
-                <Button onClick={handleInstall} className="w-full">
-                    <InstallPWADesktopIcon />
-                    Install Peanut Wallet
-                </Button>
-            ) : (
-                <>
-                    <div className="space-y-4">
-                        <StepTitle text="Install on Desktop" />
-                        <p>
-                            Look for the install icon (<InstallPWADesktopIcon />) in your browser's address bar and
-                            click it.
-                        </p>
+            <div className="space-y-4">
+                <StepTitle text="Install on your Phone" />
+                <p className="mb-4">
+                    For the best experience, we recommend installing Peanut on your phone. Scan this QR code with your
+                    phone's camera:
+                </p>
+                <div className="mx-auto rounded-lg bg-background p-4">
+                    <QRCodeWrapper url={process.env.NEXT_PUBLIC_BASE_URL + '/setup' || window.location.origin} />
+                </div>
+                {/* TODO: we need to have setup instructions after login! This currently wont fully work */}
+                <p className="text-center text-sm text-gray-600">
+                    After scanning, log in with your passkey and follow the installation instructions.
+                </p>
+                {canInstall && (
+                    <div className="mt-4 border-t pt-4">
+                        <p className="mb-2 text-sm text-gray-600">Alternatively, you can install on desktop:</p>
+                        <Button onClick={handleInstall} className="w-full">
+                            <InstallPWADesktopIcon />
+                            Install Peanut
+                        </Button>
                     </div>
-                </>
-            )}
+                )}
+            </div>
         </div>
     )
 
     const getInstructions = () => {
-        switch (deviceType) {
-            case 'ios':
-                return <IOSInstructions />
-            case 'android':
-                return <AndroidInstructions />
-            default:
-                return <DesktopInstructions />
+        console.log('Showing instructions for:', deviceType)
+
+        if (deviceType === 'desktop') {
+            return <DesktopInstructions />
+        } else if (deviceType === 'ios') {
+            return <IOSInstructions />
+        } else {
+            return <AndroidInstructions />
         }
     }
 
@@ -185,13 +204,15 @@ const InstallPWA = () => {
                 className="items-center rounded-none"
                 classWrap="sm:m-auto sm:self-center self-center bg-background m-4 rounded-none border-0"
             >
-                <img
-                    className="mx-auto pt-6 md:w-6/12"
-                    width={200}
-                    height={200}
-                    src={peanutPointing.src}
-                    alt="Peanut pointing"
-                />
+                {deviceType !== 'desktop' && (
+                    <img
+                        className="mx-auto pt-6 md:w-6/12"
+                        width={200}
+                        height={200}
+                        src={peanutPointing.src}
+                        alt="Peanut pointing"
+                    />
+                )}
                 <div className="space-y-4 p-6">
                     {getInstructions()}
                     <Button
diff --git a/src/context/authContext.tsx b/src/context/authContext.tsx
index ffd8e4cf8..46418feee 100644
--- a/src/context/authContext.tsx
+++ b/src/context/authContext.tsx
@@ -5,7 +5,7 @@ import { useAppDispatch } from '@/redux/hooks'
 import { setupActions } from '@/redux/slices/setup-slice'
 import { type GetUserLinksResponse, fetchWithSentry } from '@/utils'
 import { hitUserMetric } from '@/utils/metrics.utils'
-import { ToastId, useToast } from '@chakra-ui/react'
+import { ToastId, useToast } from '@chakra-ui/react' // TODO: use normmal toasts we use throughout the app, not chakra toasts!
 import { useAppKit } from '@reown/appkit/react'
 import { useQuery } from '@tanstack/react-query'
 import { useRouter } from 'next/navigation'
diff --git a/src/hooks/useZeroDev.ts b/src/hooks/useZeroDev.ts
index 49d75349c..afe201683 100644
--- a/src/hooks/useZeroDev.ts
+++ b/src/hooks/useZeroDev.ts
@@ -32,6 +32,7 @@ export const useZeroDev = () => {
     const { isKernelClientReady, isRegistering, isLoggingIn, isSendingUserOp, address } = useZerodevStore()
     const { setWebAuthnKey, getClientForChain } = useKernelClient()
 
+    // Future note: could be `${handle}.${process.env.NEXT_PUBLIC_JUSTANAME_ENS_DOMAIM || 'peanut.me'}` (have to change BE too)
     const _getPasskeyName = (handle: string) => `${handle}.peanut.wallet`
 
     // register function


Reviews:
user: login: Hugo0
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T00:40:14Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (1)</summary><blockquote>

<details>
<summary>src/components/Payment/Views/Payment.status.view.tsx (1)</summary><blockquote>

`21-21`: **Remove unused import.**

The `isAddress` function is imported from 'viem' but doesn't appear to be used anywhere in this component. Consider removing this unused import to keep the code clean.

```diff
-import { isAddress } from 'viem'
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 036aadbc818441e31967ad467bcddb2dc64843a2 and 92b1b4f833de767003848e4dadd5739116a1e00b.

</details>

<details>
<summary>📒 Files selected for processing (6)</summary>

* `src/components/Global/ImageGeneration/LinkPreview.tsx` (2 hunks)
* `src/components/Global/ListItemView/index.tsx` (1 hunks)
* `src/components/Global/WalletHeader/index.tsx` (0 hunks)
* `src/components/Home/WalletCard.tsx` (3 hunks)
* `src/components/Payment/History/index.tsx` (2 hunks)
* `src/components/Payment/Views/Payment.status.view.tsx` (2 hunks)

</details>

<details>
<summary>💤 Files with no reviewable changes (1)</summary>

* src/components/Global/WalletHeader/index.tsx

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (3)</summary>

* src/components/Payment/History/index.tsx
* src/components/Global/ListItemView/index.tsx
* src/components/Home/WalletCard.tsx

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧠 Learnings (1)</summary>

<details>
<summary>src/components/Global/ImageGeneration/LinkPreview.tsx (1)</summary>

```
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#460
File: src/components/Global/ImageGeneration/LinkPreview.tsx:125-128
Timestamp: 2025-03-12T19:04:37.402Z
Learning: 'tokenPrice' is not used currently and will be removed in future PRs.
```

</details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: Deploy-Preview

</details>

<details>
<summary>🔇 Additional comments (4)</summary><blockquote>

<details>
<summary>src/components/Global/ImageGeneration/LinkPreview.tsx (2)</summary>

`2-2`: **Good addition of the AddressLink component import.**

This import aligns with the PR's objective to ensure consistency in address display throughout the application.

---

`71-71`: **Clean implementation of the AddressLink component.**

Replacing the plain text address with the AddressLink component improves consistency across the UI while maintaining readability with the "no-underline" class. This change successfully implements part of the PR objective to standardize address display throughout the application.

</details>
<details>
<summary>src/components/Payment/Views/Payment.status.view.tsx (2)</summary>

`143-143`: **Great documentation practice.**

Including a reference to the Discord conversation that influenced this resolution logic is excellent. This helps future developers understand the reasoning behind the implementation decisions.

---

`145-147`: **Well-structured address resolution hierarchy.**

The simplification of the recipient address resolution logic improves code clarity while maintaining the proper resolution hierarchy. Using the `AddressLink` component consistently helps ensure a uniform user experience across the application.



Also applies to: 149-150

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T01:09:03Z
user: login: jjramirezn
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T01:13:52Z
user: login: jjramirezn
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T01:20:10Z
user: login: jjramirezn
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T01:21:15Z
user: login: jjramirezn
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T01:23:16Z
user: login: jjramirezn
body: Added some comments, two are blocking (changing or answering)
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T01:25:12Z
user: login: Hugo0
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T01:41:01Z
user: login: kushagrasarathe
body: left a few comments 🫡 
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T07:34:04Z
user: login: jjramirezn
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T14:18:25Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (4)</summary><blockquote>

<details>
<summary>src/components/Global/AddressLink/index.tsx (4)</summary><blockquote>

`1-1`: **Remove unused import.**

The `RecipientType` import is no longer used in the component after the refactoring.

```diff
-import { RecipientType } from '@/lib/url-parser/types/payment'
```

---

`7-7`: **Consider consolidating imports from the same module.**

You're importing from `@/utils` in two separate import statements (line 2 and line 7).

```diff
-import * as utils from '@/utils'
-import { printableAddress } from '@/utils'
+import { printableAddress, ...other needed utils... } from '@/utils'
```

---

`9-13`: **The interface looks good, but children prop is unused.**

You've defined a `children` prop in the interface, but it's not destructured or used in the component.

Either remove the unused prop from the interface or update the component to use it:

```diff
interface AddressLinkProps {
    address: string
    className?: string
-   children?: React.ReactNode
}
```

Or alternatively, if you intend to use it:

```diff
-const AddressLink = ({ address, className = '' }: AddressLinkProps) => {
+const AddressLink = ({ address, className = '', children }: AddressLinkProps) => {
```

And then in the return statement:
```diff
<Link className={`cursor-pointer underline ${className}`} href={url} target="_blank">
-   {displayAddress}
+   {children || displayAddress}
</Link>
```

---

`39-43`: **Consider adding a title attribute for accessibility.**

For better accessibility, consider adding a title attribute to the link that explains where it leads.

```diff
<Link 
  className={`cursor-pointer underline ${className}`} 
  href={url} 
  target="_blank"
+ title={`View details for ${displayAddress}`}
>
  {displayAddress}
</Link>
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 5535c395660013c09716257d8a4fa543014a37a1 and d2b2aec80f1234a168390f4897a71e08868177f9.

</details>

<details>
<summary>📒 Files selected for processing (16)</summary>

* `src/app/(mobile-ui)/history/page.tsx` (1 hunks)
* `src/app/[...recipient]/layout.tsx` (2 hunks)
* `src/components/Create/Link/Confirm.view.tsx` (3 hunks)
* `src/components/Global/AddressLink/index.tsx` (1 hunks)
* `src/components/Global/ListItemView/index.tsx` (1 hunks)
* `src/components/Global/WalletHeader/index.tsx` (0 hunks)
* `src/components/Home/WalletCard.tsx` (3 hunks)
* `src/components/Payment/History/index.tsx` (2 hunks)
* `src/components/Payment/PaymentForm/index.tsx` (2 hunks)
* `src/components/Payment/PaymentInfoRow.tsx` (1 hunks)
* `src/components/Payment/Views/Confirm.payment.view.tsx` (3 hunks)
* `src/components/Payment/Views/Payment.status.view.tsx` (2 hunks)
* `src/components/Setup/Setup.consts.tsx` (6 hunks)
* `src/components/Setup/Views/InstallPWA.tsx` (7 hunks)
* `src/context/authContext.tsx` (1 hunks)
* `src/hooks/useZeroDev.ts` (1 hunks)

</details>

<details>
<summary>💤 Files with no reviewable changes (1)</summary>

* src/components/Global/WalletHeader/index.tsx

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (14)</summary>

* src/app/(mobile-ui)/history/page.tsx
* src/context/authContext.tsx
* src/components/Payment/PaymentInfoRow.tsx
* src/hooks/useZeroDev.ts
* src/app/[...recipient]/layout.tsx
* src/components/Payment/Views/Payment.status.view.tsx
* src/components/Setup/Views/InstallPWA.tsx
* src/components/Payment/PaymentForm/index.tsx
* src/components/Payment/History/index.tsx
* src/components/Payment/Views/Confirm.payment.view.tsx
* src/components/Global/ListItemView/index.tsx
* src/components/Home/WalletCard.tsx
* src/components/Create/Link/Confirm.view.tsx
* src/components/Setup/Setup.consts.tsx

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Definitions (1)</summary>

<details>
<summary>src/components/Global/AddressLink/index.tsx (1)</summary><blockquote>

<details>
<summary>src/utils/general.utils.ts (1) (1)</summary>

* `printableAddress` (63-66)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: Deploy-Preview

</details>

<details>
<summary>🔇 Additional comments (3)</summary><blockquote>

<details>
<summary>src/components/Global/AddressLink/index.tsx (3)</summary>

`16-18`: **Good initial state setup.**

The initialization of `displayAddress` with conditional logic is a good practice, ensuring a sensible default value.

---

`27-34`: **Improved address display logic.**

The updated effect properly prioritizes ENS names when available, with sensible fallbacks. The code logic is cleaner and more maintainable.

---

`36-37`: <details>
<summary>✅ Verification successful</summary>

**Simpler URL construction.**

The URL construction has been simplified, which is good. However, make sure this simplified approach works for all use cases where this component is used.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if there are any instances where AddressLink might expect different URL formats
rg -A 2 -B 2 "AddressLink" --type ts --type tsx
```

Length of output: 75

---

It looks like the previous search command didn’t work because the file type `tsx` wasn’t recognized. Let’s try verifying the usage of `AddressLink` across both `.ts` and `.tsx` files using a file glob pattern instead. Please run the following script:

  

After you check the output, we can decide if any additional changes or manual verifications are needed.

---

🏁 Script executed:

```shell

#!/bin/bash
# Search for usage of AddressLink in both .ts and .tsx files using a glob pattern.
rg -A 2 -B 2 "AddressLink" -g "*.{ts,tsx}" || echo "No instances found"
```

Length of output: 18334

---



</details>

**Simplified URL Construction Verified**

Our search across `.ts` and `.tsx` files shows that all instances of `AddressLink` pass a plain address—there’s no evidence that any usage requires a more complex URL format. The simplified URL construction (`const url = `/${address}``) appears to be working consistently across the codebase. Please continue to monitor usage should new requirements arise.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T14:20:09Z
user: login: Hugo0
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T15:14:41Z
user: login: Hugo0
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T15:14:57Z
user: login: Hugo0
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T15:17:36Z
user: login: Hugo0
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T15:23:25Z
user: login: Hugo0
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T19:37:26Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 1**

<details>
<summary>🧹 Nitpick comments (1)</summary><blockquote>

<details>
<summary>src/components/Setup/Views/InstallPWA.tsx (1)</summary><blockquote>

`58-58`: **Potentially unused state variable**

The `isDesktop` state is assigned but never referenced in the rendered logic. Consider removing it if not needed or clarify future usage to avoid confusion.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between d2b2aec80f1234a168390f4897a71e08868177f9 and 7c38ae17e22f93da33c2876f51cb53ec5d2b58d9.

</details>

<details>
<summary>📒 Files selected for processing (4)</summary>

* `src/components/Create/Link/Confirm.view.tsx` (2 hunks)
* `src/components/Payment/History/index.tsx` (1 hunks)
* `src/components/Setup/Setup.consts.tsx` (6 hunks)
* `src/components/Setup/Views/InstallPWA.tsx` (7 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (3)</summary>

* src/components/Payment/History/index.tsx
* src/components/Create/Link/Confirm.view.tsx
* src/components/Setup/Setup.consts.tsx

</details>

<details>
<summary>🔇 Additional comments (6)</summary><blockquote>

<details>
<summary>src/components/Setup/Views/InstallPWA.tsx (6)</summary>

`4-4`: **The QRCodeWrapper import is aligned with the PR's objective**

This import cleanly integrates a dedicated QR code component without introducing any conflicts.

---

`80-99`: **Refine device detection logic and address logging duplication**

1. Including `"Mac|Macintosh"` in `isIOSDevice` might be redundant as `isMobileDevice` is false for typical macOS user agents. Review if this pattern inadvertently flags non-iOS devices as `ios` in edge cases (e.g., certain iPads with user agents containing `"Mac"`).

2. The `console.log` usage replicates an existing “nit: log” comment from a previous review. Since you've indicated comfort with logs, continuing them is fine, but keep in mind React state updates are asynchronous, so the output may show a stale value for `deviceType`.

---

`118-121`: **Updated iOS copy looks good**

Renaming to "Install Peanut" and clarifying the share icon instructions is consistent with the new text guidelines.

---

`130-135`: **Rebranded Android actions align well**

The updated button label and step title (“Install Peanut”) provide clarity and maintain textual consistency.

---

`174-182`: **Instruction selection behaves as expected**

The updated control flow for desktop, iOS, and Android instructions aligns with the overall device detection logic.

---

`207-215`: **Conditional image rendering is consistent**

Displaying the Peanut pointing image for mobile users only is clear and intuitive.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T19:44:48Z

Review comments:
diff_hunk: @@ -5,7 +5,7 @@ import { useAppDispatch } from '@/redux/hooks'
 import { setupActions } from '@/redux/slices/setup-slice'
 import { type GetUserLinksResponse, fetchWithSentry } from '@/utils'
 import { hitUserMetric } from '@/utils/metrics.utils'
-import { ToastId, useToast } from '@chakra-ui/react'
+import { ToastId, useToast } from '@chakra-ui/react' // TODO: use normmal toasts we use throughout the app, not chakra toasts!
path: src/context/authContext.tsx
user: login: Hugo0
body: @kushagrasarathe fyi

created_at: 2025-03-19T00:40:14Z
author_association: CONTRIBUTOR
diff_hunk: @@ -32,6 +32,7 @@ export const useZeroDev = () => {
     const { isKernelClientReady, isRegistering, isLoggingIn, isSendingUserOp, address } = useZerodevStore()
     const { setWebAuthnKey, getClientForChain } = useKernelClient()
 
+    // Future note: could be `${handle}.${process.env.NEXT_PUBLIC_JUSTANAME_ENS_DOMAIM || 'peanut.me'}` (have to change BE too)
path: src/hooks/useZeroDev.ts
user: login: Hugo0
body: @jjramirezn fyi
created_at: 2025-03-19T00:40:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -67,7 +68,7 @@ export function LinkPreviewImg({
                 }}
             >
                 <label style={{ fontSize: '16px', fontWeight: 'bold', color: 'black' }}>
-                    {printableAddress(address)} {PREVIEW_TYPES[previewType].message}
path: src/components/Global/ImageGeneration/LinkPreview.tsx
user: login: jjramirezn
body: issue(blocking): this LinkPreview is for generating the image for previews

No link needed (or functional) here. Also AddressLink uses effects with can only run on client side, this runs (correctly) only on server side
created_at: 2025-03-19T01:13:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -139,31 +140,19 @@ export default function PaymentStatusView() {
 
     const recipientLink = useMemo(() => {
         if (!requestDetails) return null
+        // context on resolution logic: https://discord.com/channels/972435984954302464/1351613681867427932/1351632018177392650
 
-        if (requestDetails.recipientAccount.user) {
-            const username = requestDetails.recipientAccount.user.username
-            return (
-                <Link className="cursor-pointer underline" href={`/${username}`}>
-                    {username}
-                </Link>
-            )
+        if (requestDetails.recipientAddress) {
+            return <AddressLink address={requestDetails.recipientAddress} />
         }
 
-        return <AddressLink address={resolvedAddress ?? requestDetails.recipientAddress} />
+        // Fallback to resolved address (?)
+        return resolvedAddress ? <AddressLink address={resolvedAddress} /> : null
path: src/components/Payment/Views/Payment.status.view.tsx
user: login: jjramirezn
body: comment: requestDetail always has recipient address, so this fallback is not needed
created_at: 2025-03-19T01:20:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -139,31 +140,19 @@ export default function PaymentStatusView() {
 
     const recipientLink = useMemo(() => {
         if (!requestDetails) return null
+        // context on resolution logic: https://discord.com/channels/972435984954302464/1351613681867427932/1351632018177392650
path: src/components/Payment/Views/Payment.status.view.tsx
user: login: jjramirezn
body: comment(blocking): We should check if the recipientAccount type is PEANUT_WALLET and use user.username for that case, recipientAddress for everything else
created_at: 2025-03-19T01:21:15Z
author_association: CONTRIBUTOR
path: src/components/Global/AddressLink/index.tsx
user: login: jjramirezn
body: praise: long needed change
created_at: 2025-03-19T01:23:15Z
author_association: CONTRIBUTOR
diff_hunk: @@ -139,31 +140,19 @@ export default function PaymentStatusView() {
 
     const recipientLink = useMemo(() => {
         if (!requestDetails) return null
+        // context on resolution logic: https://discord.com/channels/972435984954302464/1351613681867427932/1351632018177392650
path: src/components/Payment/Views/Payment.status.view.tsx
user: login: Hugo0
body: reason i didnt do that is because addresslink alrdy resolves to username.peanut.me

But thats wrong reasoning, we only need to see username. Good comment thx!
created_at: 2025-03-19T01:40:55Z
author_association: CONTRIBUTOR
diff_hunk: @@ -68,8 +68,11 @@ const HistoryPage = () => {
                 amount: `${isStableCoin(data.tokenSymbol) ? `$${formatAmount(data.amount)}` : `${formatAmount(data.amount)} ${data.tokenSymbol}`}`,
                 recipientAddress: data.address ?? '',
                 recipientAddressFormatter: (address: string) => {
-                    const sanitizedAddressOrName = isAddress(address) ? printableAddress(address) : address
-                    return `To ${sanitizedAddressOrName}`
+                    return (
path: src/app/(mobile-ui)/history/page.tsx
user: login: kushagrasarathe
body: blocking: @Hugo0 we can remove the `recipientAddressFormatter` from here, its' not being used anywhere, check the updated `ListItemView` and how it is being used in history page.
created_at: 2025-03-19T07:17:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -272,7 +273,9 @@ export const CreateLinkConfirmView = ({
                         {createType === 'sms_link' &&
                             `You will send a text message to ${recipient.name ?? recipient.address} containing a link. They will be able to claim the funds in any token on any chain from the link.`}
                         {createType === 'direct' &&
-                            `You will send the tokens directly to ${recipient.name ?? recipient.address}. Ensure the recipient address is correct, else the funds might be lost.`}
+                            `You will send the tokens directly to ${
+                                recipient.name ?? <AddressLink address={recipient.address ?? ''} />
path: src/components/Create/Link/Confirm.view.tsx
user: login: kushagrasarathe
body: qn: not linking `recipient.name` to users' profile here?
created_at: 2025-03-19T07:18:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -39,6 +39,10 @@ interface ListItemViewProps {
     metadata: {
         tokenLogo?: string
         chainLogo?: string
+        subText?: string
path: src/components/Global/ListItemView/index.tsx
user: login: kushagrasarathe
body: blocking: same, these props from metadata are not being used anywhere, lets remove them
created_at: 2025-03-19T07:21:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -64,6 +62,18 @@ export default function PaymentHistory({ recipient, history }: PaymentHistoryPro
                                 subText: new Date(entry.timestamp).toLocaleDateString(),
                             }}
                             metadata={{
+                                recipientAddress: entry.senderAccount
path: src/components/Payment/History/index.tsx
user: login: kushagrasarathe
body: blocking: same `recipientAddressFormatter` not being used in the `ListItemView`
created_at: 2025-03-19T07:24:25Z
author_association: CONTRIBUTOR
diff_hunk: @@ -49,8 +49,8 @@ export const setupSteps: ISetupStep[] = [
     {
         screenId: 'passkey-success',
         layoutType: 'standard',
-        title: `Your Passkey is already setup now`,
-        description: `Use your face or fingerprint to verify it's you. There's no need for a password.`,
+        title: `Your Passkey is set up!`,
+        description: `From now on, Peanut will use your face or fingerprint to verify it's you. Never lose your seed phrase again.`,
path: src/components/Setup/Setup.consts.tsx
user: login: kushagrasarathe
body: > Never lose your seed phrase again

not sure about this part in copy, there is no seed phares involved, it makes sense in the `passkey-permission` view since we are letting users know, but in success view i'm not sure if it makes sense
created_at: 2025-03-19T07:29:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -82,8 +82,9 @@ export const setupSteps: ISetupStep[] = [
     {
         screenId: 'add-wallets',
         layoutType: 'standard',
-        title: 'Add extra wallet',
-        description: 'Have another wallet? Add it here to keep everything in one place.',
+        title: 'Add External Wallet',
+        description:
+            'Want to manage multiple wallets from peanut? Add it now to keep everything in one place - or do it later',
path: src/components/Setup/Setup.consts.tsx
user: login: kushagrasarathe
body: noice
created_at: 2025-03-19T07:30:21Z
author_association: CONTRIBUTOR
diff_hunk: @@ -75,18 +77,32 @@ const InstallPWA = () => {
         })
 
         // Detect device type
-        const isIOSDevice = /iPad|iPhone|iPod/.test(navigator.userAgent)
+        const isIOSDevice = /iPad|iPhone|iPod|Mac|Macintosh/.test(navigator.userAgent)
         const isMobileDevice = /Android|webOS|iPad|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
             navigator.userAgent
         )
 
-        if (isIOSDevice) {
-            setDeviceType('ios')
-        } else if (isMobileDevice) {
-            setDeviceType('android')
-        } else {
+        // Log user agent and detection results
path: src/components/Setup/Views/InstallPWA.tsx
user: login: kushagrasarathe
body: nit: logsss 
created_at: 2025-03-19T07:30:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -105,10 +121,10 @@ const InstallPWA = () => {
 
     const IOSInstructions = () => (
         <div className="space-y-4">
-            <StepTitle text="Add Peanut wallet in to your home screen" />
+            <StepTitle text="Install Peanut" />
             <p>
-                To add Peanut wallet to your Home screen, tap the (<ShareIcon />) icons and then {`"Add home Screen"`}{' '}
-                in your Safari browser.
+                To add Peanut to your Home screen, tap the (<ShareIcon />) icons and then {`"Add to home screen"`} in
+                your Safari browser.
path: src/components/Setup/Views/InstallPWA.tsx
user: login: kushagrasarathe
body: thought: user can be on ios but on chrome browser, we saying `Safari` explicitly, should be more generic imo?
created_at: 2025-03-19T07:32:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -131,35 +147,44 @@ const InstallPWA = () => {
         </div>
     )
 
+    // Desktop instructions tell the user to install on their phone
     const DesktopInstructions = () => (
         <div>
-            {canInstall ? (
-                <Button onClick={handleInstall} className="w-full">
-                    <InstallPWADesktopIcon />
-                    Install Peanut Wallet
-                </Button>
-            ) : (
-                <>
-                    <div className="space-y-4">
-                        <StepTitle text="Install on Desktop" />
-                        <p>
-                            Look for the install icon (<InstallPWADesktopIcon />) in your browser's address bar and
-                            click it.
-                        </p>
+            <div className="space-y-4">
+                <StepTitle text="Install on your Phone" />
+                <p className="mb-4">
+                    For the best experience, we recommend installing Peanut on your phone. Scan this QR code with your
+                    phone's camera:
+                </p>
+                <div className="mx-auto rounded-lg bg-background p-4">
+                    <QRCodeWrapper url={process.env.NEXT_PUBLIC_BASE_URL + '/setup' || window.location.origin} />
+                </div>
+                {/* TODO: we need to have setup instructions after login! This currently wont fully work */}
+                <p className="text-center text-sm text-gray-600">
+                    After scanning, log in with your passkey and follow the installation instructions.
+                </p>
+                {canInstall && (
+                    <div className="mt-4 border-t pt-4">
+                        <p className="mb-2 text-sm text-gray-600">Alternatively, you can install on desktop:</p>
+                        <Button onClick={handleInstall} className="w-full">
+                            <InstallPWADesktopIcon />
+                            Install Peanut
+                        </Button>
                     </div>
-                </>
-            )}
+                )}
+            </div>
         </div>
     )
 
     const getInstructions = () => {
-        switch (deviceType) {
-            case 'ios':
-                return <IOSInstructions />
-            case 'android':
-                return <AndroidInstructions />
-            default:
-                return <DesktopInstructions />
+        console.log('Showing instructions for:', deviceType)
path: src/components/Setup/Views/InstallPWA.tsx
user: login: kushagrasarathe
body: nit: log
created_at: 2025-03-19T07:33:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -131,35 +147,44 @@ const InstallPWA = () => {
         </div>
     )
 
+    // Desktop instructions tell the user to install on their phone
     const DesktopInstructions = () => (
         <div>
-            {canInstall ? (
-                <Button onClick={handleInstall} className="w-full">
-                    <InstallPWADesktopIcon />
-                    Install Peanut Wallet
-                </Button>
-            ) : (
-                <>
-                    <div className="space-y-4">
-                        <StepTitle text="Install on Desktop" />
-                        <p>
-                            Look for the install icon (<InstallPWADesktopIcon />) in your browser's address bar and
-                            click it.
-                        </p>
+            <div className="space-y-4">
+                <StepTitle text="Install on your Phone" />
+                <p className="mb-4">
+                    For the best experience, we recommend installing Peanut on your phone. Scan this QR code with your
+                    phone's camera:
+                </p>
+                <div className="mx-auto rounded-lg bg-background p-4">
+                    <QRCodeWrapper url={process.env.NEXT_PUBLIC_BASE_URL + '/setup' || window.location.origin} />
+                </div>
+                {/* TODO: we need to have setup instructions after login! This currently wont fully work */}
+                <p className="text-center text-sm text-gray-600">
+                    After scanning, log in with your passkey and follow the installation instructions.
+                </p>
+                {canInstall && (
+                    <div className="mt-4 border-t pt-4">
+                        <p className="mb-2 text-sm text-gray-600">Alternatively, you can install on desktop:</p>
+                        <Button onClick={handleInstall} className="w-full">
+                            <InstallPWADesktopIcon />
+                            Install Peanut
+                        </Button>
                     </div>
-                </>
-            )}
+                )}
+            </div>
         </div>
     )
 
     const getInstructions = () => {
-        switch (deviceType) {
-            case 'ios':
-                return <IOSInstructions />
-            case 'android':
-                return <AndroidInstructions />
-            default:
-                return <DesktopInstructions />
+        console.log('Showing instructions for:', deviceType)
path: src/components/Setup/Views/InstallPWA.tsx
user: login: Hugo0
body: I think these are fine!
created_at: 2025-03-19T15:14:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -105,10 +121,10 @@ const InstallPWA = () => {
 
     const IOSInstructions = () => (
         <div className="space-y-4">
-            <StepTitle text="Add Peanut wallet in to your home screen" />
+            <StepTitle text="Install Peanut" />
             <p>
-                To add Peanut wallet to your Home screen, tap the (<ShareIcon />) icons and then {`"Add home Screen"`}{' '}
-                in your Safari browser.
+                To add Peanut to your Home screen, tap the (<ShareIcon />) icons and then {`"Add to home screen"`} in
+                your Safari browser.
path: src/components/Setup/Views/InstallPWA.tsx
user: login: Hugo0
body: True! 
created_at: 2025-03-19T15:14:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -49,8 +49,8 @@ export const setupSteps: ISetupStep[] = [
     {
         screenId: 'passkey-success',
         layoutType: 'standard',
-        title: `Your Passkey is already setup now`,
-        description: `Use your face or fingerprint to verify it's you. There's no need for a password.`,
+        title: `Your Passkey is set up!`,
+        description: `From now on, Peanut will use your face or fingerprint to verify it's you. Never lose your seed phrase again.`,
path: src/components/Setup/Setup.consts.tsx
user: login: Hugo0
body: adjusted copy slightly
created_at: 2025-03-19T15:17:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -272,7 +273,9 @@ export const CreateLinkConfirmView = ({
                         {createType === 'sms_link' &&
                             `You will send a text message to ${recipient.name ?? recipient.address} containing a link. They will be able to claim the funds in any token on any chain from the link.`}
                         {createType === 'direct' &&
-                            `You will send the tokens directly to ${recipient.name ?? recipient.address}. Ensure the recipient address is correct, else the funds might be lost.`}
+                            `You will send the tokens directly to ${
+                                recipient.name ?? <AddressLink address={recipient.address ?? ''} />
path: src/components/Create/Link/Confirm.view.tsx
user: login: Hugo0
body: You're correct- adding todo comment, since isnt used anywhere
created_at: 2025-03-19T15:23:16Z
author_association: CONTRIBUTOR
diff_hunk: @@ -39,6 +39,10 @@ interface ListItemViewProps {
     metadata: {
         tokenLogo?: string
         chainLogo?: string
+        subText?: string
path: src/components/Global/ListItemView/index.tsx
user: login: Hugo0
body: thx, ai, srry, fixed
created_at: 2025-03-19T19:36:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -131,35 +141,44 @@ const InstallPWA = () => {
         </div>
     )
 
+    // Desktop instructions tell the user to install on their phone
     const DesktopInstructions = () => (
         <div>
-            {canInstall ? (
-                <Button onClick={handleInstall} className="w-full">
-                    <InstallPWADesktopIcon />
-                    Install Peanut Wallet
-                </Button>
-            ) : (
-                <>
-                    <div className="space-y-4">
-                        <StepTitle text="Install on Desktop" />
-                        <p>
-                            Look for the install icon (<InstallPWADesktopIcon />) in your browser's address bar and
-                            click it.
-                        </p>
+            <div className="space-y-4">
+                <StepTitle text="Install on your Phone" />
+                <p className="mb-4">
+                    For the best experience, we recommend installing Peanut on your phone. Scan this QR code with your
+                    phone's camera:
+                </p>
+                <div className="mx-auto rounded-lg bg-background p-4">
+                    <QRCodeWrapper url={process.env.NEXT_PUBLIC_BASE_URL + '/setup' || window.location.origin} />
+                </div>
+                {/* TODO: we need to have setup instructions after login! This currently wont fully work */}
+                <p className="text-center text-sm text-gray-600">
+                    After scanning, log in with your passkey and follow the installation instructions.
+                </p>
+                {canInstall && (
+                    <div className="mt-4 border-t pt-4">
+                        <p className="mb-2 text-sm text-gray-600">Alternatively, you can install on desktop:</p>
+                        <Button onClick={handleInstall} className="w-full">
+                            <InstallPWADesktopIcon />
+                            Install Peanut
+                        </Button>
                     </div>
-                </>
-            )}
+                )}
+            </div>
path: src/components/Setup/Views/InstallPWA.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix the fallback for the QR code URL**

Using the expression `process.env.NEXT_PUBLIC_BASE_URL + '/setup' || window.location.origin` can yield an unintended `'undefined/setup'` if the environment variable is undefined. This breaks the QR code link. Use a nullish or conditional check instead.



Apply this diff to ensure a proper fallback:

```diff
-<QRCodeWrapper url={process.env.NEXT_PUBLIC_BASE_URL + '/setup' || window.location.origin} />
+<QRCodeWrapper
+  url={
+    process.env.NEXT_PUBLIC_BASE_URL
+      ? process.env.NEXT_PUBLIC_BASE_URL + '/setup'
+      : window.location.origin
+  }
/>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    // Desktop instructions tell the user to install on their phone
    const DesktopInstructions = () => (
        <div>
            <div className="space-y-4">
                <StepTitle text="Install on your Phone" />
                <p className="mb-4">
                    For the best experience, we recommend installing Peanut on your phone. Scan this QR code with your
                    phone's camera:
                </p>
                <div className="mx-auto rounded-lg bg-background p-4">
                    <QRCodeWrapper
                      url={
                        process.env.NEXT_PUBLIC_BASE_URL
                          ? process.env.NEXT_PUBLIC_BASE_URL + '/setup'
                          : window.location.origin
                      }
                    />
                </div>
                {/* TODO: we need to have setup instructions after login! This currently wont fully work */}
                <p className="text-center text-sm text-gray-600">
                    After scanning, log in with your passkey and follow the installation instructions.
                </p>
                {canInstall && (
                    <div className="mt-4 border-t pt-4">
                        <p className="mb-2 text-sm text-gray-600">Alternatively, you can install on desktop:</p>
                        <Button onClick={handleInstall} className="w-full">
                            <InstallPWADesktopIcon />
                            Install Peanut
                        </Button>
                    </div>
                )}
            </div>
        </div>
    );
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-03-19T19:44:47Z
author_association: CONTRIBUTOR

PR comments:
user: login: vercel[bot]
created_at: 2025-03-18T15:22:04Z
body: [vc]: #G3vlpb9ZM7GsENV4/1WIq6LZvKqtLbXXyjUmXpQHOG4=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJwZWFudXQtdWkiLCJyb290RGlyZWN0b3J5IjpudWxsLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vc3F1aXJyZWxsYWJzL3BlYW51dC11aS81V3ExUTc0d3pvU3NQZWNKeHlWRW4zcmtnZjlZIiwicHJldmlld1VybCI6InBlYW51dC11aS1naXQtZml4LWNvcHktaXNzdWVzLW1hci0xMC1zcXVpcnJlbGxhYnMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJwZWFudXQtdWktZ2l0LWZpeC1jb3B5LWlzc3Vlcy1tYXItMTAtc3F1aXJyZWxsYWJzLnZlcmNlbC5hcHAifX0seyJuYW1lIjoicGVhbnV0LXdhbGxldCIsInJvb3REaXJlY3RvcnkiOm51bGwsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9zcXVpcnJlbGxhYnMvcGVhbnV0LXdhbGxldC9FZ054WnFKVlhwNWNpQldnbzFSS0dkSGtjMTZQIiwicHJldmlld1VybCI6InBlYW51dC13YWxsZXQtZ2l0LWZpeC1jb3B5LWlzc3Vlcy1tYXItMTAtc3F1aXJyZWxsYWJzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoicGVhbnV0LXdhbGxldC1naXQtZml4LWNvcHktaXNzdWVzLW1hci0xMC1zcXVpcnJlbGxhYnMudmVyY2VsLmFwcCJ9fV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **peanut-ui** | ✅ Ready ([Inspect](https://vercel.com/squirrellabs/peanut-ui/5Wq1Q74wzoSsPecJxyVEn3rkgf9Y)) | [Visit Preview](https://peanut-ui-git-fix-copy-issues-mar-10-squirrellabs.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/peanut-ui-git-fix-copy-issues-mar-10-squirrellabs.vercel.app?via=pr-comment-feedback-link) | Mar 19, 2025 7:45pm |
| **peanut-wallet** | ✅ Ready ([Inspect](https://vercel.com/squirrellabs/peanut-wallet/EgNxZqJVXp5ciBWgo1RKGdHkc16P)) | [Visit Preview](https://peanut-wallet-git-fix-copy-issues-mar-10-squirrellabs.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/peanut-wallet-git-fix-copy-issues-mar-10-squirrellabs.vercel.app?via=pr-comment-feedback-link) | Mar 19, 2025 7:45pm |



author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-03-18T15:22:06Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: failure by coderabbit.ai -->

> [!CAUTION]
> ## Review failed
> 
> The pull request is closed.

<!-- end of auto-generated comment: failure by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough
This pull request standardizes address rendering across multiple components by replacing plain text addresses with the new `AddressLink` component. Changes include UI text updates in setup steps, enhanced device detection with QR code generation in the installation view, and refinements to wallet and payment display logic. Minor refactorings, such as import reordering and comment updates, are also included without altering underlying functionality.

## Changes
| File(s) | Change Summary |
|---|---|
| `src/components/Create/Link/Confirm.view.tsx`, `src/app/(mobile-ui)/history/page.tsx`, `src/components/Payment/History/index.tsx`, `src/components/Payment/Views/{Confirm.payment.view,Payment.status.view}.tsx`, `src/components/Payment/PaymentForm/index.tsx`, `src/components/Global/AddressLink/index.tsx` | Replaced plain text and legacy formatting with the `AddressLink` component. Refactored props, interfaces, and internal logic to standardize clickable recipient address rendering across payment, history, and link confirmation views. |
| `src/components/Setup/Setup.consts.tsx`, `src/components/Setup/Views/InstallPWA.tsx` | Updated setup step titles and descriptions; enhanced device detection with a new `isDesktop` state, and integrated `QRCodeWrapper` to generate a QR code linking to the current origin for mobile installations. |
| `src/components/Home/WalletCard.tsx` | Adjusted wallet identifier font sizes and introduced dynamic URL generation using an environment variable for flexible wallet display. |
| `src/components/Payment/PaymentInfoRow.tsx` | Modified the `label` prop type from `string` to `string | React.ReactNode` to support richer content in payment information rows. |
| `src/context/authContext.tsx`, `src/hooks/useZeroDev.ts`, `src/components/Global/WalletHeader/index.tsx`, `src/app/[...recipient]/layout.tsx` | Minor refactoring including reorganized import statements, updated metadata formatting, and comment adjustments without affecting functionality. |

## Sequence Diagram(s)
```mermaid
sequenceDiagram
  participant U as User
  participant PC as Payment Component
  participant AL as AddressLink Component
  U->>PC: Initiate Payment Process
  PC->>AL: Render recipient address with provided data
  AL->>AL: Validate address (using isAddress) and format display (using printableAddress/ENS)
  AL-->>PC: Return clickable address element
  PC-->>U: Display processed address
```

```mermaid
sequenceDiagram
  participant U as User
  participant IP as InstallPWA Component
  participant DD as Device Detector
  participant QR as QRCodeWrapper
  U->>IP: Open Install PWA Page
  IP->>DD: Check device type via user agent regex
  DD-->>IP: Return device type (desktop/mobile)
  alt Desktop
    IP->>IP: Set deviceType to "desktop"
    IP->>QR: Generate QR code linking to current origin
    IP-->>U: Display QR code & alternative install button
  else Mobile
    IP->>IP: Set deviceType as mobile (iOS/Android)
    IP-->>U: Display mobile installation instructions
  end
```

## Possibly related PRs
- **peanutprotocol/peanut-ui#603**: Involves similar updates to the HistoryPage component using the `AddressLink` component for address rendering.
- **peanutprotocol/peanut-ui#741**: Directly modifies the history page file to integrate the `AddressLink` component for rendering recipient addresses.
- **peanutprotocol/peanut-ui#719**: Focuses on incorporating the `AddressLink` component in PaymentStatusView and ConfirmPaymentView for consistent recipient address display.

## Suggested reviewers
- kushagrasarathe

## Poem
> I'm a little rabbit, hopping with delight,  
> In code gardens where addresses shine so bright.  
> With links for carrots and QR codes for play,  
> Our components now dance in a brand new way.  
> Happy hops in our code all day!

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- announcements_start -->

> [!TIP]
> <details>
> <summary>⚡🧪 Multi-step agentic review comment chat (experimental)</summary>
> 
> - We're introducing multi-step agentic chat in review comments. This experimental feature enhances review discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments.
> 						- To enable this feature, set early_access to true under in the settings.
> 
> </details>

<!-- announcements_end -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 7c38ae17e22f93da33c2876f51cb53ec5d2b58d9 and 01de4906c924083b2f17533e0712482a4d39cb5b.

</details>

<details>
<summary>📒 Files selected for processing (2)</summary>

* `src/components/Global/WalletHeader/index.tsx` (0 hunks)
* `src/components/Home/WalletCard.tsx` (3 hunks)

</details>

</details>
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=peanutprotocol/peanut-ui&utm_content=745):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR
user: login: notion-workspace[bot]
created_at: 2025-03-18T15:23:21Z
body: <a href="https://www.notion.so/Homepage-QR-for-phone-if-on-desktop-1ba8381175798029be31f70f2756fc5d?pvs=8&n=github_linkback">Homepage QR for phone if on desktop</a>
author_association: NONE
user: login: notion-workspace[bot]
created_at: 2025-03-18T15:23:47Z
body: <a href="https://www.notion.so/Homepage-QR-for-phone-if-on-desktop-1ba8381175798029be31f70f2756fc5d?pvs=8&n=github_linkback">Homepage QR for phone if on desktop</a>
author_association: NONE
user: login: notion-workspace[bot]
created_at: 2025-03-19T01:00:05Z
body: <a href="https://www.notion.so/Consistent-Address-usage-1b383811757980c49487fbfdab68f018?pvs=8&n=github_linkback">Consistent Address usage</a>
author_association: NONE