fix: wallet bugs

src/components/Claim/Link/Initial.view.tsx

@@ -439,7 +439,7 @@ export const InitialClaimLinkView = ({
             <FlowHeader />
             <Card className="shadow-none sm:shadow-primary-4">
                 <Card.Header>
-                    <Card.Title>
+                    <Card.Title className="mx-auto">
                         <div className="flex w-full flex-col items-center justify-center gap-2">
                             <AddressLink address={claimLinkData.senderAddress} /> sent you
                             {tokenPrice ? (

src/components/Claim/Link/Onchain/Confirm.view.tsx

@@ -112,10 +112,10 @@ export const ConfirmClaimLinkView = ({
 
     return (
         <div>
-            <FlowHeader onPrev={onPrev} disableBackBtn={isLoading} />
+            <FlowHeader onPrev={onPrev} disableBackBtn={isLoading} disableWalletHeader />
             <Card>
                 <Card.Header>
-                    <Card.Title>
+                    <Card.Title className="mx-auto text-center">
                         <AddressLink address={claimLinkData.senderAddress} /> <br /> sent you{' '}
                         <label className="text-start text-h2">
                             {claimLinkData.tokenAmount} {claimLinkData.tokenSymbol} <br /> on{' '}
@@ -148,7 +148,7 @@ export const ConfirmClaimLinkView = ({
                         </>
                     )}
                     {selectedRoute ? (
-                        <div className="flex w-full flex-row items-start justify-center gap-1 text-h7">
+                        <div className="flex w-full flex-row items-start justify-start gap-1 text-h7">
                             You are claiming{' '}
                             {utils.formatTokenAmount(
                                 utils.formatAmountWithDecimals({
@@ -160,15 +160,15 @@ export const ConfirmClaimLinkView = ({
                             {supportedSquidChainsAndTokens[selectedRoute.route.params.toChain]?.axelarChainName}
                         </div>
                     ) : (
-                        <div className="flex w-full flex-row items-start justify-center gap-1 text-h7">
+                        <div className="flex w-full flex-row items-center justify-start gap-1 text-h7">
                             {utils.formatTokenAmount(Number(claimLinkData.tokenAmount))} {claimLinkData.tokenSymbol} on{' '}
                             {
                                 consts.supportedPeanutChains.find((chain) => chain.chainId === claimLinkData.chainId)
                                     ?.name
                             }
                         </div>
                     )}
-                    <div className="flex w-full flex-row items-center justify-center gap-1 px-2">
+                    <div className="flex w-full flex-row items-center justify-start gap-1">
                         <label className="text-h7 font-normal">Claiming to:</label>
                         <span className="flex items-center gap-1 ">
                             <label className="text-h7">
@@ -180,7 +180,7 @@ export const ConfirmClaimLinkView = ({
 
                     <div className="flex w-full flex-col items-center justify-center gap-2">
                         {selectedRoute && (
-                            <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
+                            <div className="flex w-full flex-row items-center justify-between text-h8 text-grey-1">
                                 <div className="flex w-max flex-row items-center justify-center gap-1">
                                     <Icon name={'forward'} className="h-4 fill-grey-1" />
                                     <label className="font-bold">Route</label>
@@ -215,7 +215,7 @@ export const ConfirmClaimLinkView = ({
                             </div>
                         )}
 
-                        <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
+                        <div className="flex w-full flex-row items-center justify-between text-h8 text-grey-1">
                             <div className="flex w-max flex-row items-center justify-center gap-1">
                                 <Icon name={'gas'} className="h-4 fill-grey-1" />
                                 <label className="font-bold">Fees</label>

src/components/Claim/Link/Onchain/Success.view.tsx

@@ -1,5 +1,6 @@
 import { Button, Card } from '@/components/0_Bruddle'
 import Icon from '@/components/Global/Icon'
+import { PaymentsFooter } from '@/components/Global/PaymentsFooter'
 import { fetchDestinationChain } from '@/components/utils/utils'
 import * as context from '@/context'
 import { useWallet } from '@/hooks/wallet/useWallet'
@@ -102,14 +103,7 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _
                         <Icon name="external" className="h-4 fill-grey-1" />
                     </Button>
                 </Link>
-                <Link className="" href={'/profile'}>
-                    <Button variant="stroke" className="text-nowrap">
-                        <div className="border border-n-1 p-0 px-1">
-                            <Icon name="profile" className="-mt-0.5" />
-                        </div>
-                        See your payments.
-                    </Button>
-                </Link>
+                <PaymentsFooter />
                 <label className="text-start text-h9 font-normal">
                     We would like to hear from your experience. Hit us up on{' '}
                     <a

src/components/Create/Link/Success.view.tsx

@@ -3,6 +3,7 @@
 import { Button, Card } from '@/components/0_Bruddle'
 import CopyField from '@/components/Global/CopyField'
 import Icon from '@/components/Global/Icon'
+import { PaymentsFooter } from '@/components/Global/PaymentsFooter'
 import QRCodeWrapper from '@/components/Global/QRCodeWrapper'
 import { tokenSelectorContext } from '@/context'
 import { copyTextToClipboardWithFallback, getExplorerUrl, printableAddress, shareToEmail, shareToSms } from '@/utils'
@@ -128,14 +129,7 @@ export const CreateLinkSuccessView = ({ link, txHash, createType, recipient, tok
                                     <Icon name="external" className="h-4 fill-grey-1" />
                                 </Button>
                             </Link>
-                            <Link className="" href={'/profile'}>
-                                <Button variant="stroke" className="text-nowrap">
-                                    <div className="border border-n-1 p-0 px-1">
-                                        <Icon name="profile" className="-mt-0.5" />
-                                    </div>
-                                    See your payments.
-                                </Button>
-                            </Link>
+                            <PaymentsFooter />
                         </div>
                     </div>
                 )}

src/components/Global/PaymentsFooter/index.tsx

@@ -9,7 +9,7 @@ interface PaymentsFooterProps {
 }
 
 export const PaymentsFooter = ({
-    href = '/profile',
+    href = '/history',
     text = 'See your payments.',
     icon = 'profile',
 }: PaymentsFooterProps) => {

src/components/Home/WalletCard.tsx

@@ -4,7 +4,7 @@ import { Card } from '@/components/0_Bruddle'
 import Icon from '@/components/Global/Icon'
 import { useWallet } from '@/hooks/wallet/useWallet'
 import { IWallet, WalletProviderType } from '@/interfaces'
-import { printableUsdc, shortenAddressLong } from '@/utils'
+import { formatExtendedNumber, printableUsdc, shortenAddressLong } from '@/utils'
 import { identicon } from '@dicebear/collection'
 import { createAvatar } from '@dicebear/core'
 import classNames from 'classnames'
@@ -151,13 +151,13 @@ export function WalletCard({ type, onClick, ...props }: WalletCardProps) {
                     </div>
 
                     <div className="flex items-center gap-3">
-                        <p className="min-w-28 text-4xl font-black leading-none sm:text-5xl">
+                        <p className="min-w-28 text-4xl font-black leading-none sm:text-[2.5rem]">
                             {isBalanceHidden ? (
                                 <span className="inline-flex items-center">
                                     <span className="relative top-1">* * * *</span>
                                 </span>
                             ) : (
-                                `$ ${printableUsdc(wallet.balance)}`
+                                `$ ${formatExtendedNumber(printableUsdc(wallet.balance))}`
                             )}
                         </p>
                         <button onClick={onToggleBalanceVisibility}>

src/components/Request/Create/Views/Success.view.tsx

@@ -1,8 +1,7 @@
-import { Button, Card } from '@/components/0_Bruddle'
+import { Card } from '@/components/0_Bruddle'
 import CopyField from '@/components/Global/CopyField'
-import Icon from '@/components/Global/Icon'
+import { PaymentsFooter } from '@/components/Global/PaymentsFooter'
 import QRCodeWrapper from '@/components/Global/QRCodeWrapper'
-import Link from 'next/link'
 import * as _consts from '../Create.consts'
 
 export const SuccessView = ({ link }: _consts.ICreateScreenProps) => {
@@ -17,14 +16,7 @@ export const SuccessView = ({ link }: _consts.ICreateScreenProps) => {
                     Share this link or QR with anyone. They will be able to pay you from any chain in any token.
                 </label>
                 <CopyField text={link} />
-                <Link className="" href={'/profile'}>
-                    <Button variant="stroke" className="flex flex-row justify-center text-nowrap">
-                        <div className="border border-n-1 p-0 px-1">
-                            <Icon name="profile" className="-mt-0.5" />
-                        </div>
-                        See your payments.
-                    </Button>
-                </Link>
+                <PaymentsFooter />
             </Card.Content>
         </Card>
     )

src/components/Request/Pay/Views/Success.view.tsx

@@ -1,7 +1,7 @@
 import * as assets from '@/assets'
-import { Button, Card } from '@/components/0_Bruddle'
+import { Card } from '@/components/0_Bruddle'
 import AddressLink from '@/components/Global/AddressLink'
-import Icon from '@/components/Global/Icon'
+import { PaymentsFooter } from '@/components/Global/PaymentsFooter'
 import { ReferenceAndAttachment } from '@/components/Request/Components/ReferenceAndAttachment'
 import { fetchDestinationChain } from '@/components/utils/utils'
 import * as context from '@/context'
@@ -149,14 +149,7 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData }
                         Discord!
                     </a>
                 </label>
-                <Link href={'/profile'}>
-                    <Button variant="stroke">
-                        <div className=" border border-n-1 p-0 px-1">
-                            <Icon name="profile" className="-mt-0.5" />
-                        </div>
-                        See your payments.
-                    </Button>
-                </Link>
+                <PaymentsFooter />
             </Card.Content>
         </Card>
     )

src/utils/__tests__/general.utils.test.ts

@@ -1,4 +1,4 @@
-import { formatAmount } from '../general.utils'
+import { formatAmount, formatExtendedNumber } from '../general.utils'
 
 describe('Amount Formatting Utilities', () => {
     describe('formatAmount', () => {
@@ -70,4 +70,107 @@ describe('Amount Formatting Utilities', () => {
             })
         })
     })
+
+    describe('formatExtendedNumber', () => {
+        describe('edge cases', () => {
+            it('should handle empty string', () => {
+                expect(formatExtendedNumber('')).toBe('0')
+            })
+
+            it('should handle invalid string input', () => {
+                expect(formatExtendedNumber('invalid')).toBe('0')
+            })
+
+            it('should handle NaN', () => {
+                expect(formatExtendedNumber(NaN)).toBe('0')
+            })
+
+            it('should handle undefined and null', () => {
+                expect(formatExtendedNumber(undefined as any)).toBe('0')
+                expect(formatExtendedNumber(null as any)).toBe('0')
+            })
+        })
+
+        describe('numbers with 6 or fewer digits', () => {
+            it('should not apply suffix for numbers with 6 or fewer digits', () => {
+                expect(formatExtendedNumber(12345)).toBe('12345')
+                expect(formatExtendedNumber(999)).toBe('999')
+                expect(formatExtendedNumber(1000)).toBe('1000')
+                expect(formatExtendedNumber(999999)).toBe('999999')
+            })
+
+            it('should handle decimal numbers with 6 or fewer total digits', () => {
+                expect(formatExtendedNumber(12.34)).toBe('12.34')
+                expect(formatExtendedNumber(123.4)).toBe('123.4')
+                expect(formatExtendedNumber(0.123)).toBe('0.12')
+                expect(formatExtendedNumber(1234.5)).toBe('1234.5')
+            })
+
+            it('should handle negative numbers with 6 or fewer digits', () => {
+                expect(formatExtendedNumber(-1234)).toBe('-1234')
+                expect(formatExtendedNumber(-12.34)).toBe('-12.34')
+                expect(formatExtendedNumber(-99999)).toBe('-99999')
+            })
+
+            it('should handle string inputs with 6 or fewer digits', () => {
+                expect(formatExtendedNumber('12345')).toBe('12345')
+                expect(formatExtendedNumber('-1234')).toBe('-1234')
+                expect(formatExtendedNumber('999.99')).toBe('999.99')
+            })
+        })
+
+        describe('numbers exceeding 6 digits', () => {
+            it('should format whole numbers exceeding 6 digits', () => {
+                expect(formatExtendedNumber(1234567)).toBe('1.23M')
+                expect(formatExtendedNumber(9876543)).toBe('9.88M')
+            })
+
+            it('should format decimal numbers exceeding 6 total digits', () => {
+                expect(formatExtendedNumber(1234.567)).toBe('1.23K')
+                expect(formatExtendedNumber(12345.67)).toBe('12.35K')
+            })
+
+            it('should format negative numbers exceeding 6 digits', () => {
+                expect(formatExtendedNumber(-1234567)).toBe('-1.23M')
+                expect(formatExtendedNumber(-1234.567)).toBe('-1.23K')
+            })
+        })
+
+        describe('suffix selection', () => {
+            it('should apply K suffix for appropriate ranges', () => {
+                expect(formatExtendedNumber(1234567)).toBe('1.23M')
+                expect(formatExtendedNumber(1234.567)).toBe('1.23K')
+            })
+
+            it('should apply M suffix for appropriate ranges', () => {
+                expect(formatExtendedNumber(12345678)).toBe('12.35M')
+                expect(formatExtendedNumber(123456789)).toBe('123.46M')
+            })
+
+            it('should apply B suffix for appropriate ranges', () => {
+                expect(formatExtendedNumber(1234567890)).toBe('1.23B')
+                expect(formatExtendedNumber(12345678901)).toBe('12.35B')
+            })
+
+            it('should apply T suffix for appropriate ranges', () => {
+                expect(formatExtendedNumber(1234567890000)).toBe('1.23T')
+                expect(formatExtendedNumber(12345678900000)).toBe('12.35T')
+            })
+        })
+
+        describe('boundary cases', () => {
+            it('should handle numbers at the 6-digit boundary', () => {
+                expect(formatExtendedNumber(999999)).toBe('999999')
+                expect(formatExtendedNumber(1000000)).toBe('1M')
+                expect(formatExtendedNumber(999.9999)).toBe('1000')
+                expect(formatExtendedNumber(999.99999)).toBe('1000')
+            })
+
+            it('should handle numbers at suffix boundaries', () => {
+                expect(formatExtendedNumber(999999.9)).toBe('1M')
+                expect(formatExtendedNumber(999999999)).toBe('1B')
+                expect(formatExtendedNumber(999999999999)).toBe('1T')
+            })
+        })
+    })
 })