Fixes to peanut.me

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: {

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 {

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

@@ -4,6 +4,7 @@ import AddressLink from '@/components/Global/AddressLink'
 import FlowHeader from '@/components/Global/FlowHeader'
 import Icon from '@/components/Global/Icon'
 import MoreInfo from '@/components/Global/MoreInfo'
+import PeanutSponsored from '@/components/Global/PeanutSponsored'
 import * as consts from '@/constants'
 import * as context from '@/context'
 import { useWallet } from '@/hooks/wallet/useWallet'
@@ -187,7 +188,7 @@ export const ConfirmClaimLinkView = ({
                         </span>
                     </div>
 
-                    <div className="flex w-full flex-col items-center justify-center gap-2">
+                    <div className="flex w-full flex-col items-center justify-center gap-2 py-2">
                         {selectedRoute && (
                             <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
                                 <div className="flex w-max flex-row items-center justify-center gap-1">
@@ -224,36 +225,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-max flex-row items-center justify-center gap-1">
-                                <Icon name={'gas'} className="h-4 fill-grey-1" />
-                                <label className="font-bold">Fees</label>
-                            </div>
-                            <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
-                                $0.00 <MoreInfo text={'This transaction is sponsored by Peanut! Enjoy!'} />
-                            </span>
-                        </div>
-
-                        {/* TODO: correct points estimation
-                    <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
-                        <div className="flex w-max flex-row items-center justify-center gap-1">
-                            <Icon name={'plus-circle'} className="h-4 fill-grey-1" />
-                            <label className="font-bold">Points</label>
-                        </div>
-                    <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
-                        {estimatedPoints < 0 ? estimatedPoints : `+${estimatedPoints}`}
-                        <MoreInfo
-                            text={
-                                estimatedPoints
-                                    ? estimatedPoints > 0
-                                        ? `This transaction will add ${estimatedPoints} to your total points balance.`
-                                        : 'This transaction will not add any points to your total points balance'
-                                    : 'This transaction will not add any points to your total points balance'
-                            }
-                        />
-                    </span>
-                </div>
-                    */}
+                        <PeanutSponsored />
 
                         <Button onClick={handleOnClaim} disabled={isLoading} loading={isLoading}>
                             {isLoading ? loadingState : 'Claim'}

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

@@ -6,7 +6,8 @@ import Divider from '@/components/0_Bruddle/Divider'
 import ConfirmDetails from '@/components/Global/ConfirmDetails/Index'
 import FlowHeader from '@/components/Global/FlowHeader'
 import Icon from '@/components/Global/Icon'
-import MoreInfo from '@/components/Global/MoreInfo'
+import InfoRow from '@/components/Global/InfoRow'
+import PeanutSponsored from '@/components/Global/PeanutSponsored'
 import { peanutTokenDetails, supportedPeanutChains } from '@/constants'
 import * as context from '@/context'
 import { useWalletType } from '@/hooks/useWalletType'
@@ -26,6 +27,7 @@ import {
 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,
@@ -261,18 +263,21 @@ 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' &&
                             `You will send an email 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 === '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">
@@ -325,53 +330,27 @@ export const CreateLinkConfirmView = ({
                                 )}
                             </div>
                         )}
-                        {transactionCostUSD !== undefined && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 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">Network cost</label>
-                                </div>
-                                <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
-                                    {isPeanutWallet
-                                        ? '$0'
-                                        : transactionCostUSD === 0
-                                          ? '$0'
-                                          : transactionCostUSD < 0.01
+                        {transactionCostUSD !== undefined &&
+                            (!isPeanutWallet ? (
+                                <InfoRow
+                                    iconName="gas"
+                                    label="Network cost"
+                                    value={
+                                        transactionCostUSD < 0.01
                                             ? '$<0.01'
-                                            : `$${formatTokenAmount(transactionCostUSD, 3) ?? 0}`}
-                                    <MoreInfo
-                                        text={
-                                            isPeanutWallet
-                                                ? 'This transaction is sponsored by peanut! Enjoy!'
-                                                : transactionCostUSD > 0
-                                                  ? `This transaction will cost you $${formatTokenAmount(transactionCostUSD, 3)} in network fees.`
-                                                  : 'This transaction is sponsored by Peanut! Enjoy!'
-                                        }
-                                    />
-                                </label>
-                            </div>
-                        )}
-                    </div>
-                    {/* <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1">
-                    <div className="flex w-max flex-row items-center justify-center gap-1">
-                        <Icon name={'plus-circle'} className="h-4 fill-grey-1" />
-                        <label className="font-bold">Points</label>
+                                            : `$${formatTokenAmount(transactionCostUSD, 3) ?? 0}`
+                                    }
+                                    moreInfoText={`This transaction will cost you $${
+                                        transactionCostUSD < 0.01
+                                            ? '<0.01'
+                                            : `${formatTokenAmount(transactionCostUSD, 3) ?? 0}`
+                                    } in network fees.`}
+                                />
+                            ) : (
+                                <PeanutSponsored />
+                            ))}
                     </div>
-                    <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
-                        {estimatedPoints && estimatedPoints < 0 ? estimatedPoints : `+${estimatedPoints}`}
-                        <MoreInfo
-                            text={
-                                estimatedPoints
-                                    ? estimatedPoints > 0
-                                        ? `This transaction will add ${estimatedPoints} to your total points balance.`
-                                        : estimatedPoints < 0
-                                          ? `This transaction will cost you ${estimatedPoints} points, but will not cost you any gas fees!`
-                                          : 'This transaction will not add any points to your total points balance'
-                                    : 'This transaction will not add any points to your total points balance'
-                            }
-                        />
-                    </span>
-                </div> */}
+
                     <Divider className="my-4" />
                     <div className="mb-4 flex flex-col gap-2 sm:flex-row-reverse">
                         <Button loading={isLoading} onClick={handleConfirm} disabled={isLoading}>

src/components/Global/AddressLink/index.tsx

@@ -4,39 +4,48 @@ 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
+    )
+    const [urlAddress, setUrlAddress] = useState<string>(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
         priority: 'onChain',
     })
 
     useEffect(() => {
-        if (recipientType === 'USERNAME') {
-            setUrl(`${process.env.NEXT_PUBLIC_BASE_URL}/${address}`)
-        } else {
-            setUrl(`https://debank.com/profile/${address}`)
-        }
+        // Update display: prefer ENS name for addresses, otherwise use as-is
+        if (isAddress(address) && ensName) {
+            // for peanut ens names, strip the domain from the displayed string so its just a username (no ens subdomain)
+            const peanutEnsDomain = process.env.NEXT_PUBLIC_JUSTANAME_ENS_DOMAIN || ''
+            const normalizedEnsName = ensName.replace(peanutEnsDomain, '').replace(/\.$/, '')
 
-        // Update display: prefer ENS name, fallback to shortened address
-        if (ensName) {
-            setDisplayAddress(ensName)
+            setDisplayAddress(normalizedEnsName)
+            setUrlAddress(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 = `/${urlAddress}`
+
+    return (
+        <Link className={`cursor-pointer underline ${className}`} href={url} target="_blank">
             {displayAddress}
         </Link>
-    ) : (
-        <span>{displayAddress}</span>
     )
 }
 

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',
@@ -366,7 +365,7 @@ const WalletEntryCard: React.FC<WalletEntryCardProps> = ({
                 <div className="flex w-full flex-col gap-1">
                     <div className="flex w-full items-center justify-between">
                         <div className="space-y-1">
-                            <div className="flex items-center gap-2">
+                            <div className="notranslate flex items-center gap-2" translate="no">
                                 {!isRewardsWallet ? (
                                     isPeanutWallet && username ? (
                                         <p className="text-base font-bold">Peanut Wallet</p>

src/components/Global/WalletNavigation/index.tsx

@@ -76,8 +76,9 @@ const MobileNav: React.FC<MobileNavProps> = ({ tabs, pathName }) => (
             <Link
                 href={href}
                 key={name}
+                translate="no"
                 className={classNames(
-                    'flex flex-col items-center justify-center object-contain py-2 hover:cursor-pointer',
+                    'notranslate flex flex-col items-center justify-center object-contain py-2 hover:cursor-pointer',
                     { 'text-primary-1': pathName === href }
                 )}
             >

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,8 +332,11 @@ function WalletIdentifier({
             </p>
         )
     }
-
-    return <p className="truncate text-xl font-black sm:text-2xl">{displayName}</p>
+    return (
+        <p className="notranslate truncate text-lg font-black sm:text-xl" translate="no">
+            {displayName}
+        </p>
+    )
 }
 
 function getWalletDisplayInfo(
@@ -348,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}`,
         }
     }
 

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}