Chore/gtag

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

@@ -3,7 +3,7 @@ import React from 'react'
 import { generateMetadata } from '@/app/metadata'
 
 export const metadata = generateMetadata({
-    title: 'Transaction History | Peanut',
+    title: 'History | Peanut',
     description:
         'View your transaction history with Peanut. Track your P2P digital dollar payments, transfers, and claims.',
 })

src/app/[...recipient]/client.tsx

@@ -8,7 +8,7 @@ import InitialPaymentView from '@/components/Payment/Views/Initial.payment.view'
 import DirectSuccessView from '@/components/Payment/Views/Status.payment.view'
 import PintaReqPaySuccessView from '@/components/PintaReqPay/Views/Success.pinta.view'
 import PublicProfile from '@/components/Profile/components/PublicProfile'
-import { TransactionDetailsDrawer } from '@/components/TransactionDetails/TransactionDetailsDrawer'
+import { TransactionDetailsReceipt } from '@/components/TransactionDetails/TransactionDetailsDrawer'
 import { TransactionDetails } from '@/components/TransactionDetails/transactionTransformer'
 import { useAuth } from '@/context/authContext'
 import { useCurrency } from '@/hooks/useCurrency'
@@ -255,7 +255,11 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
             return null
         }
 
-        const username = recipientAccount?.user.username
+        const username =
+            recipientAccount?.user?.username ||
+            recipientAccount?.identifier ||
+            chargeDetails.requestLink.recipientAddress
+        const originalUserRole = isCurrentUser ? EHistoryUserRole.RECIPIENT : EHistoryUserRole.SENDER
         let details: Partial<TransactionDetails> = {
             id: chargeDetails.uuid,
             status,
@@ -267,9 +271,9 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
             attachmentUrl: chargeDetails.requestLink.attachmentUrl ?? undefined,
             cancelledDate: status === 'cancelled' ? new Date(chargeDetails.timeline[0].time) : undefined,
             extraDataForDrawer: {
-                isLinkTransaction: true,
+                isLinkTransaction: originalUserRole === EHistoryUserRole.SENDER && isCurrentUser,
                 originalType: EHistoryEntryType.REQUEST,
-                originalUserRole: isCurrentUser ? EHistoryUserRole.RECIPIENT : EHistoryUserRole.SENDER,
+                originalUserRole: originalUserRole,
                 link: window.location.href,
             },
             userName: username ?? chargeDetails.requestLink.recipientAddress,
@@ -395,6 +399,8 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
                 <>
                     {parsedPaymentData?.token?.symbol === 'PNT' ? (
                         <PintaReqPaySuccessView />
+                    ) : isDrawerOpen && selectedTransaction?.id === transactionForDrawer?.id ? (
+                        <TransactionDetailsReceipt transaction={selectedTransaction} />
                     ) : (
                         <DirectSuccessView
                             headerTitle={isAddMoneyFlow ? 'Add Money' : 'Send'}
@@ -409,13 +415,6 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
                     )}
                 </>
             )}
-            <TransactionDetailsDrawer
-                isOpen={isDrawerOpen && selectedTransaction?.id === transactionForDrawer?.id}
-                onClose={() => {
-                    router.push('/home')
-                }}
-                transaction={selectedTransaction}
-            />
         </div>
     )
 }

src/app/layout.tsx

@@ -5,6 +5,7 @@ import { FooterVisibilityProvider } from '@/context/footerVisibility'
 import { Viewport } from 'next'
 import { Londrina_Solid, Roboto_Flex, Sniglet } from 'next/font/google'
 import localFont from 'next/font/local'
+import Script from 'next/script'
 import '../styles/globals.css'
 import { generateMetadata } from './metadata'
 
@@ -58,9 +59,28 @@ export const viewport: Viewport = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
         <html lang="en">
+            <head>
+                <Script id="google-tag-manager" strategy="afterInteractive">
+                    {`
+                        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+                        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+                        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+                        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+                        })(window,document,'script','dataLayer','GTM-5MGHBCQ9');
+                    `}
+                </Script>
+            </head>
             <body
                 className={`${roboto.variable} ${londrina.variable} ${knerdOutline.variable} ${knerdFilled.variable} ${sniglet.variable} chakra-ui-light font-sans`}
             >
+                <noscript>
+                    <iframe
+                        src="https://www.googletagmanager.com/ns.html?id=GTM-5MGHBCQ9"
+                        height="0"
+                        width="0"
+                        style={{ display: 'none', visibility: 'hidden' }}
+                    ></iframe>
+                </noscript>
                 <PeanutProvider>
                     <ContextProvider>
                         <FooterVisibilityProvider>

src/components/AddWithdraw/components/AddWithdrawCountriesList.tsx

@@ -61,7 +61,8 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
                                             backgroundColor:
                                                 method.icon === ('bank' as IconName)
                                                     ? '#FFC900'
-                                                    : getColorForUsername(method.title).backgroundColor,
+                                                    : getColorForUsername(method.title).lightShade,
+                                            color: method.icon === ('bank' as IconName) ? 'black' : 'black',
                                         }}
                                     />
                                 ) : (

src/components/Claim/Claim.tsx

@@ -1,30 +1,29 @@
 'use client'
 import peanut from '@squirrel-labs/peanut-sdk'
-import { useCallback, useContext, useEffect, useState, useMemo } from 'react'
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 
 import { fetchTokenDetails, fetchTokenPrice } from '@/app/actions/tokens'
+import { StatusType } from '@/components/Global/Badges/StatusBadge'
+import { TransactionDetailsReceipt } from '@/components/TransactionDetails/TransactionDetailsDrawer'
+import { TransactionDetails } from '@/components/TransactionDetails/transactionTransformer'
 import * as consts from '@/constants'
 import { tokenSelectorContext } from '@/context'
 import { useAuth } from '@/context/authContext'
+import { useTransactionDetailsDrawer } from '@/hooks/useTransactionDetailsDrawer'
+import { EHistoryEntryType, EHistoryUserRole } from '@/hooks/useTransactionHistory'
 import { useWallet } from '@/hooks/wallet/useWallet'
 import * as interfaces from '@/interfaces'
 import { ESendLinkStatus, sendLinksApi, type ClaimLinkData } from '@/services/sendLinks'
-import { isStableCoin } from '@/utils'
+import { getInitialsFromName, getTokenDetails, isStableCoin } from '@/utils'
 import * as Sentry from '@sentry/nextjs'
+import { useRouter } from 'next/navigation'
+import type { Hash } from 'viem'
+import { formatUnits } from 'viem'
 import PageContainer from '../0_Bruddle/PageContainer'
 import PeanutLoading from '../Global/PeanutLoading'
 import * as _consts from './Claim.consts'
 import * as genericViews from './Generic'
 import FlowManager from './Link/FlowManager'
-import { TransactionDetailsDrawer } from '@/components/TransactionDetails/TransactionDetailsDrawer'
-import { useTransactionDetailsDrawer } from '@/hooks/useTransactionDetailsDrawer'
-import { TransactionDetails } from '@/components/TransactionDetails/transactionTransformer'
-import { StatusType } from '@/components/Global/Badges/StatusBadge'
-import { getInitialsFromName, getTokenDetails } from '@/utils'
-import { EHistoryEntryType, EHistoryUserRole } from '@/hooks/useTransactionHistory'
-import type { Hash } from 'viem'
-import { formatUnits } from 'viem'
-import { useRouter } from 'next/navigation'
 
 export const Claim = ({}) => {
     const [step, setStep] = useState<_consts.IClaimScreenState>(_consts.INIT_VIEW_STATE)
@@ -276,13 +275,7 @@ export const Claim = ({}) => {
             )}
             {linkState === _consts.claimLinkStateType.WRONG_PASSWORD && <genericViews.WrongPasswordClaimLink />}
             {linkState === _consts.claimLinkStateType.NOT_FOUND && <genericViews.NotFoundClaimLink />}
-            <TransactionDetailsDrawer
-                isOpen={isDrawerOpen && selectedTransaction?.id === transactionForDrawer?.id}
-                onClose={() => {
-                    router.push('/home')
-                }}
-                transaction={selectedTransaction}
-            />
+            <TransactionDetailsReceipt transaction={selectedTransaction} />
         </PageContainer>
     )
 }

src/components/Global/PeanutActionDetailsCard/index.tsx

@@ -2,7 +2,7 @@ import AvatarWithBadge, { AvatarSize } from '@/components/Profile/AvatarWithBadg
 import { PEANUT_WALLET_TOKEN_SYMBOL } from '@/constants'
 import { RecipientType } from '@/lib/url-parser/types/payment'
 import { printableAddress } from '@/utils'
-import { getColorForUsername } from '@/utils/color.utils'
+import { AVATAR_TEXT_DARK, getColorForUsername } from '@/utils/color.utils'
 import { useCallback } from 'react'
 import { twMerge } from 'tailwind-merge'
 import Attachment from '../Attachment'
@@ -85,9 +85,19 @@ export default function PeanutActionDetailsCard({
                         backgroundColor:
                             viewType === 'SUCCESS'
                                 ? '#29CC6A'
-                                : transactionType === 'ADD_MONEY' || recipientType === 'ADDRESS'
+                                : transactionType === 'ADD_MONEY' ||
+                                    recipientType === 'ADDRESS' ||
+                                    recipientType === 'ENS'
                                   ? '#FFC900'
-                                  : getColorForUsername(recipientName).backgroundColor,
+                                  : getColorForUsername(recipientName).darkShade,
+                        color:
+                            viewType === 'SUCCESS'
+                                ? AVATAR_TEXT_DARK
+                                : transactionType === 'ADD_MONEY' ||
+                                    recipientType === 'ADDRESS' ||
+                                    recipientType === 'ENS'
+                                  ? AVATAR_TEXT_DARK
+                                  : getColorForUsername(recipientName).darkShade,
                     }}
                 />
             </div>

src/components/Global/TokenSelector/TokenSelector.tsx

@@ -243,7 +243,6 @@ const TokenSelector: React.FC<NewTokenSelectorProps> = ({ classNameButton, viewT
                 buttonSymbol = generalTokenDetails.symbol
                 buttonLogoURI = generalTokenDetails.logoURI
                 buttonChainName = chainInfo.axelarChainName || `Chain ${selectedChainID}`
-                buttonChainLogoURI = chainInfo.chainIconURI
             }
             if (userBalanceDetails) {
                 buttonFormattedBalance = formatTokenAmount(userBalanceDetails.amount) ?? null

src/components/Profile/AvatarWithBadge.tsx

@@ -70,9 +70,10 @@ const AvatarWithBadge: React.FC<AvatarWithBadgeProps> = ({
                 // apply dynamic styles (e.g., background color)
 
                 style={{
-                    background: name ? getColorForUsername(name).backgroundColor : undefined,
+                    background: name ? getColorForUsername(name).lightShade : undefined,
+                    border: name && !icon ? `1px solid ${getColorForUsername(name).darkShade}` : undefined,
+                    color: name ? getColorForUsername(name).darkShade : !icon ? textColor : undefined,
                     ...inlineStyle,
-                    color: !icon ? textColor : undefined,
                 }}
             >
                 {/* display icon if provided, otherwise display initials */}

src/components/Profile/components/PublicProfile.tsx

@@ -13,6 +13,9 @@ import ProfileHeader from './ProfileHeader'
 import { useState, useEffect } from 'react'
 import { usersApi } from '@/services/users'
 import { useRouter } from 'next/navigation'
+import { formatExtendedNumber } from '@/utils'
+import Card from '@/components/Global/Card'
+import { useAuth } from '@/context/authContext'
 
 interface PublicProfileProps {
     username: string
@@ -29,6 +32,9 @@ const PublicProfile: React.FC<PublicProfileProps> = ({
 }) => {
     const dispatch = useAppDispatch()
     const [fullName, setFullName] = useState<string>(username)
+    const [totalSent, setTotalSent] = useState<string>('0.00')
+    const [totalReceived, setTotalReceived] = useState<string>('0.00')
+    const { user } = useAuth()
     const router = useRouter()
 
     // Handle send button click
@@ -43,6 +49,8 @@ const PublicProfile: React.FC<PublicProfileProps> = ({
     useEffect(() => {
         usersApi.getByUsername(username).then((user) => {
             if (user?.fullName) setFullName(user.fullName)
+            setTotalSent(user.totalUsdSent)
+            setTotalReceived(user.totalUsdReceived)
         })
     }, [username])
 
@@ -92,31 +100,26 @@ const PublicProfile: React.FC<PublicProfileProps> = ({
                     </Link>
                 </div>
 
-                {/*
-                <div className="space-y-6">
-                    {!!hasTransactions && (
+                {totalSent !== '0.00' && totalReceived !== '0.00' && (
+                    <div className="space-y-6">
                         <div>
                             <Card position="first">
                                 <div className="flex items-center justify-between py-2">
                                     <span className="font-medium">Total sent to</span>
-                                    <span className="font-medium">
-                                        ${formatExtendedNumber(transactions?.sent || 0)}
-                                    </span>
+                                    <span className="font-medium">${formatExtendedNumber(totalSent)}</span>
                                 </div>
                             </Card>
                             <Card position="last">
                                 <div className="flex items-center justify-between py-2">
                                     <span className="font-medium">Total received from</span>
-                                    <span className="font-medium">
-                                        ${formatExtendedNumber(transactions?.received || 0)}
-                                    </span>
+                                    <span className="font-medium">${formatExtendedNumber(totalReceived)}</span>
                                 </div>
                             </Card>
                         </div>
-                    )}
-
-                </div>
+                    </div>
+                )}
 
+                {/*
                 {!hasTransactions && (
                     <div className="relative flex flex-col items-center">
                         <Card position="single" className="z-10 mt-28 space-y-2 p-4 text-center">

src/components/Setup/Views/Signup.tsx

@@ -38,8 +38,8 @@ const SignupStep = () => {
         }
 
         // check character requirement
-        if (!username.match(/^[a-z][a-z0-9_]{3,11}$/)) {
-            setError('Username must contain only lowercase letters, numbers and underscores and start with a letter')
+        if (!username.match(/^[a-z][a-z0-9]{3,11}$/)) {
+            setError('Username must contain only lowercase letters and numbers and start with a letter')
             return false
         }
 

src/components/TransactionDetails/TransactionAvatarBadge.tsx

@@ -80,8 +80,8 @@ const TransactionAvatarBadge: React.FC<TransactionAvatarBadgeProps> = ({
                 iconFillColor = AVATAR_TEXT_DARK
             } else if (displayInitials) {
                 const colors = getColorForUsername(userName)
-                calculatedBgColor = colors.backgroundColor
-                textColor = AVATAR_TEXT_DARK
+                calculatedBgColor = colors.lightShade
+                textColor = colors.darkShade
                 displayIconName = undefined
             } else {
                 // fallback for send/request if no initials and not link/address