Skip to content

refactor(assets): name the mascot a mascot, not a logo #2327

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kushagrasarathe merged 1 commit into from
Jul 2, 2026
Merged

refactor(assets): name the mascot a mascot, not a logo #2327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/(mobile-ui)/notifications/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import { formatGroupHeaderDate, getDateGroup, getDateGroupKey } from '@/utils/dateGrouping.utils'
import React, { useEffect, useMemo, useRef, useState } from 'react'
import Image from 'next/image'
import { PEANUTMAN_LOGO } from '@/assets'
import { PEANUTMAN } from '@/assets'
import Link from 'next/link'
import EmptyState from '@/components/Global/EmptyStates/EmptyState'
import { Button } from '@/components/0_Bruddle/Button'
Expand Down Expand Up @@ -61,7 +61,7 @@
return () => {
if (element) observer.unobserve(element)
}
}, [nextPageCursor, isLoadingMore])

Check warning on line 64 in src/app/(mobile-ui)/notifications/page.tsx

View workflow job for this annotation

GitHub Actions / eslint 

React Hook useEffect has a missing dependency: 'loadNextPage'. Either include it or remove the dependency array

Check warning on line 64 in src/app/(mobile-ui)/notifications/page.tsx

View workflow job for this annotation

GitHub Actions / eslint 

React Hook useEffect has a missing dependency: 'loadNextPage'. Either include it or remove the dependency array

const loadNextPage = async () => {
// load the next page when the sentinel enters the viewport
Expand Down Expand Up @@ -172,7 +172,7 @@
onClick={() => handleNotificationClick(notif.id)}
>
<Image
src={notif.iconUrl ?? PEANUTMAN_LOGO}
src={notif.iconUrl ?? PEANUTMAN}
alt="icon"
width={32}
height={32}
Expand Down
2 changes: 1 addition & 1 deletion src/app/(mobile-ui)/qr-pay/__tests__/qr-pay-states.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
default: (props: any) => {
// next/image uses 'fill' boolean; strip non-DOM props
const { priority, layout, objectFit, fill, ...rest } = props
return <img {...rest} />

Check warning on line 51 in src/app/(mobile-ui)/qr-pay/__tests__/qr-pay-states.test.tsx

View workflow job for this annotation

GitHub Actions / eslint 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element

Check warning on line 51 in src/app/(mobile-ui)/qr-pay/__tests__/qr-pay-states.test.tsx

View workflow job for this annotation

GitHub Actions / eslint 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
},
}))

Expand Down Expand Up @@ -81,7 +81,7 @@

// The page imports PeanutThinking from @/assets/mascot and STAR_STRAIGHT_ICON
// from @/assets/icons directly — mock those paths, not the @/assets barrel, and
// keep sibling exports (e.g. PEANUTMAN_LOGO, ETHEREUM_ICON used by QRScanner) intact.
// keep sibling exports (e.g. PEANUTMAN, ETHEREUM_ICON used by QRScanner) intact.
jest.mock('@/assets/mascot', () => ({
...jest.requireActual('@/assets/mascot'),
PeanutThinking: '/peanut-guy.gif',
Expand Down
4 changes: 2 additions & 2 deletions src/app/dev/loading-words/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'

import { PEANUTMAN_LOGO } from '@/assets/mascot'
import { PEANUTMAN } from '@/assets/mascot'
import { PAYMENT_LOADING_WORDS } from '@/components/Global/PeanutLoading/words'
import { useEffect, useState } from 'react'

Expand Down Expand Up @@ -41,7 +41,7 @@ export default function LoadingWordsPreview() {
</h2>
<div className="flex flex-col items-center justify-center gap-6 rounded-sm border border-n-1 bg-primary-3 px-6 py-16 shadow-[4px_4px_0_0_#000]">
<div className="animate-spin">
<img src={PEANUTMAN_LOGO.src} alt="Peanut" className="h-10 w-10" />
<img src={PEANUTMAN.src} alt="Peanut" className="h-10 w-10" />
</div>
<LoadingMessage word={WORDS[index]} className="text-base font-medium" />
</div>
Expand Down
1 change: 0 additions & 1 deletion src/assets/illustrations/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ export { default as HandThumbsUpV2 } from './hand-thumbs-up-v2.svg'
export { default as HandToken } from './new-hand-token.svg'
export { default as AboutPeanut } from './new-hero-description.svg'
//export { default as PeanutArmHoldingBeer } from './peanut-arm-holding-beer.svg'
export { default as PEANUT_LOGO_BLACK } from './peanut-logo-dark.svg'
export { default as PeanutsBG } from './peanuts-bg.svg'
export { default as Sparkle } from './sparkle.svg'
export { default as Star } from './star.svg'
Expand Down
1 change: 1 addition & 0 deletions src/assets/logos/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export { default as PEANUT_LOGO } from './peanut-logo.svg';
export { default as PEANUT_LOGO_BLACK } from './peanut-logo-dark.svg';
export { default as MEPA_ARGENTINA_LOGO } from './mepa-arg.svg';
export { default as PIX_BRZ_LOGO } from './pix-brz.svg';
export { default as DEVCONNECT_LOGO } from './devconnect.svg';
0 ...assets/illustrations/peanut-logo-dark.svg → src/assets/logos/peanut-logo-dark.svg
View file
Open in desktop
File renamed without changes
2 changes: 1 addition & 1 deletion src/assets/mascot/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export { default as PeanutWalking } from './peanut-walking.webp' // mid-stride,
export { default as PeanutPointingDown } from './peanut-pointing-down.webp' // both hands pointing down — marketing CTA

// Stills
export { default as PEANUTMAN_LOGO } from './peanut-logo.svg'
export { default as PEANUTMAN } from './peanutman.svg'
export { default as PEANUTMAN_PFP } from './peanut-pfp.svg'
export { default as PEANUTMAN_HOLDING_BEER } from './peanut-beer.svg'
export { default as PEANUTMAN_MOBILE } from './peanut-club.webp'
0 src/assets/mascot/peanut-logo.svg → src/assets/mascot/peanutman.svg
View file
Open in desktop
File renamed without changes
4 changes: 2 additions & 2 deletions src/components/Badges/badge.utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
// Codes here must match the backend registry (peanut-api-ts
// src/acknowledgments/seed-definitions.ts). How the whole system works + how to
// add a badge: peanut-api-ts/docs/BADGES.md.
import { PEANUTMAN_LOGO } from '@/assets/mascot'
import { PEANUTMAN } from '@/assets/mascot'

export type BadgeMeta = {
path: string
Expand Down Expand Up @@ -236,7 +236,7 @@ export const BADGE_CODES: readonly string[] = Object.keys(BADGES)
export function getBadgeIcon(code?: string): string {
// .src: the svg import is StaticImageData (typed `any` by the module shim, so the
// annotation alone can't enforce this) — raw <img src> consumers need a string URL.
return (code && BADGES[code]?.path) || PEANUTMAN_LOGO.src
return (code && BADGES[code]?.path) || PEANUTMAN.src
}

// returns the public-facing description for a badge code (third-person perspective)
Expand Down
4 changes: 2 additions & 2 deletions src/components/Card/CardFace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Image from 'next/image'
import { twMerge } from 'tailwind-merge'
import { Icon } from '@/components/Global/Icons/Icon'
import { PEANUT_CARD_HAND, VISA_BRAND_MARK } from '@/assets/cards'
import { PEANUTMAN_LOGO } from '@/assets/mascot'
import { PEANUTMAN } from '@/assets/mascot'

export interface RevealedCardDetails {
pan: string
Expand Down Expand Up @@ -86,7 +86,7 @@ const CardFace: FC<Props> = ({
<div className="relative flex h-full w-full flex-col p-4">
{/* Top row: peanut icon (no wordmark) + Visa */}
<div className="flex items-start justify-between">
<Image src={PEANUTMAN_LOGO} alt="" aria-hidden className="h-10 w-auto" />
<Image src={PEANUTMAN} alt="" aria-hidden className="h-10 w-auto" />
<Image src={VISA_BRAND_MARK} alt="Visa" className="h-6 w-auto brightness-0 invert" />
</div>

Expand Down
8 changes: 4 additions & 4 deletions src/components/Card/share-asset/PixelatedCardFace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@

import { type FC, type CSSProperties } from 'react'
import { CARD_W, CARD_H } from './shareAssetLayout'
import { PEANUTMAN_LOGO } from '@/assets/mascot'
import { PEANUTMAN } from '@/assets/mascot'
import PEANUT_CARD_HAND_PIXEL_ASSET from '@/assets/cards/peanut-card-hand-pixel.png'
import VISA_BRAND_MARK_ASSET from '@/assets/cards/visa-brand-mark.png'

const ASSET_PEANUTMAN_LOGO = PEANUTMAN_LOGO.src
const ASSET_PEANUTMAN = PEANUTMAN.src
const ASSET_VISA_BRAND = VISA_BRAND_MARK_ASSET.src
const ASSET_CARD_HAND_PIXEL = PEANUT_CARD_HAND_PIXEL_ASSET.src

Expand Down Expand Up @@ -93,9 +93,9 @@ export const PixelatedCardFace: FC<PixelatedCardFaceProps> = ({
style={{ top: 24, left: 28, right: 28, zIndex: 2 }}
>
{blurAll ? (
<PixelatedImg src={ASSET_PEANUTMAN_LOGO} displayW={52} displayH={52} />
<PixelatedImg src={ASSET_PEANUTMAN} displayW={52} displayH={52} />
) : (
<img src={ASSET_PEANUTMAN_LOGO} alt="" aria-hidden style={{ height: 52, width: 'auto' }} />
<img src={ASSET_PEANUTMAN} alt="" aria-hidden style={{ height: 52, width: 'auto' }} />
)}
{!hideVisa &&
(blurAll ? (
Expand Down
4 changes: 2 additions & 2 deletions src/components/Claim/Link/Initial.view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ import { evmChainIdToRhinoName } from '@/constants/rhino.consts'
import { getTokenSymbol } from '@/utils/general.utils'
import { Button } from '@/components/0_Bruddle/Button'
import Image from 'next/image'
import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
import { PEANUT_LOGO_BLACK, PEANUTMAN } from '@/assets'

@coderabbitai coderabbitai Bot Jul 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Import from @/assets barrel is lint-restricted.

ESLint flags this as an error: importing from the @/assets barrel forces loading every re-export and hurts build perf. Other files in this same PR (SendLinkActionList.tsx, QRScanner/index.tsx) already import from the specific submodules (@/assets/mascot, @/assets/logos) — this file should follow suit.

🛠️ Proposed fix 
-import { PEANUT_LOGO_BLACK, PEANUTMAN } from '`@/assets`'
+import { PEANUTMAN } from '`@/assets/mascot`'
+import { PEANUT_LOGO_BLACK } from '`@/assets/logos`'
📝 Committable suggestion

‼️ 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.

Suggested change
import { PEANUT_LOGO_BLACK, PEANUTMAN } from '@/assets'
import { PEANUTMAN } from '`@/assets/mascot`'
import { PEANUT_LOGO_BLACK } from '`@/assets/logos`'
🧰 Tools
🪛 ESLint

[error] 45-45: '@/assets' import is restricted from being used. Import from a specific file instead of the '@/assets' barrel — barrels force the bundler to load every re-export and hurt build perf. See CLAUDE.md.

(no-restricted-imports)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Claim/Link/Initial.view.tsx` at line 45, The import in
Initial.view.tsx is using the lint-restricted `@/assets` barrel, which should be
replaced with direct submodule imports to match SendLinkActionList.tsx and
QRScanner/index.tsx. Update the PEANUT_LOGO_BLACK and PEANUTMAN imports to come
from their specific asset modules under `@/assets` instead of the barrel, keeping
the same symbols but avoiding the broad re-export path.

Source: Linters/SAST tools

import { GuestVerificationModal } from '@/components/Global/GuestVerificationModal'
import { useCapabilities } from '@/hooks/useCapabilities'
import MantecaFlowManager from './MantecaFlowManager'
Expand Down Expand Up @@ -822,7 +822,7 @@ export const InitialClaimLinkView = (props: IClaimScreenProps) => {
<div className="flex items-center gap-1">
<div>Receive on </div>
<div className="flex items-center gap-1">
<Image src={PEANUTMAN_LOGO} alt="Peanut Logo" className="size-5" />
<Image src={PEANUTMAN} alt="Peanut Logo" className="size-5" />

@coderabbitai coderabbitai Bot Jul 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Alt text still says "logo" despite PR's stated rename intent.

The PR objective states the mascot alt text should change from "logo" to "Peanut mascot" (confirmed in PublicProfile.tsx which already uses alt="Peanut mascot"), but this <Image src={PEANUTMAN} .../> still uses alt="Peanut Logo".

✏️ Proposed fix 
-                        <Image src={PEANUTMAN} alt="Peanut Logo" className="size-5" />
+                        <Image src={PEANUTMAN} alt="Peanut mascot" className="size-5" />
📝 Committable suggestion

‼️ 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.

Suggested change
<Image src={PEANUTMAN} alt="Peanut Logo" className="size-5" />
<Image src={PEANUTMAN} alt="Peanut mascot" className="size-5" />
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Claim/Link/Initial.view.tsx` at line 825, Update the PEANUTMAN
image alt text in Initial.view.tsx to match the new mascot naming used
elsewhere, changing the current “Peanut Logo” text to “Peanut mascot”. Use the
existing <Image src={PEANUTMAN} /> element as the locator and keep the wording
consistent with PublicProfile.tsx.

<Image src={PEANUT_LOGO_BLACK} alt="Peanut Logo" />
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Claim/Link/SendLinkActionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,10 @@ import { useContext, useMemo, useState } from 'react'
import ActionModal from '@/components/Global/ActionModal'
import Divider from '../../0_Bruddle/Divider'
import { Button } from '@/components/0_Bruddle/Button'
import { PEANUT_LOGO_BLACK } from '@/assets/illustrations'
import { PEANUT_LOGO_BLACK } from '@/assets/logos'
import Image from 'next/image'
import { useRouter } from 'next/navigation'
import { PEANUTMAN_LOGO } from '@/assets/mascot'
import { PEANUTMAN } from '@/assets/mascot'
import { BankClaimType, useDetermineBankClaimType } from '@/hooks/useDetermineBankClaimType'
import useSavedAccounts from '@/hooks/useSavedAccounts'
import { tokenSelectorContext } from '@/context'
Expand Down Expand Up @@ -243,7 +243,7 @@ export default function SendLinkActionList({
>
{showDevconnectMethod ? <div>Claim on</div> : <div>Continue with </div>}
<div className="flex items-center gap-1">
<Image src={PEANUTMAN_LOGO} alt="Peanut Logo" className="size-5" />
<Image src={PEANUTMAN} alt="Peanut Logo" className="size-5" />
<Image src={PEANUT_LOGO_BLACK} alt="Peanut Logo" />
</div>
</Button>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Global/ConfirmInviteModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client'
import { type FC } from 'react'
import Image from 'next/image'
import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
import { PEANUT_LOGO_BLACK, PEANUTMAN } from '@/assets'
import Modal from '../Modal'
import { Button } from '@/components/0_Bruddle/Button'
import { PeanutWavingHello } from '@/assets/mascot'
Expand Down Expand Up @@ -52,7 +52,7 @@ const ConfirmInviteModal: FC<ConfirmInviteModalProps> = ({
<Button className="w-full" shadowSize="4" variant="purple" onClick={handleContinueWithPeanut}>
<div>Join</div>
<div className="flex items-center gap-1">
<Image src={PEANUTMAN_LOGO} alt="Peanut Logo" className="size-5" />
<Image src={PEANUTMAN} alt="Peanut Logo" className="size-5" />
<Image src={PEANUT_LOGO_BLACK} alt="Peanut Logo" />
</div>
</Button>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Global/CreateAccountButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'

import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
import { PEANUT_LOGO_BLACK, PEANUTMAN } from '@/assets'
import { Button } from '@/components/0_Bruddle/Button'
import Image from 'next/image'

Expand All @@ -13,7 +13,7 @@ const CreateAccountButton = ({ onClick }: CreateAccountButtonProps) => {
<Button onClick={onClick} shadowSize="4">
<div>Create a</div>
<div className="flex items-center gap-1">
<Image src={PEANUTMAN_LOGO} alt="Peanut Logo" className="size-5" />
<Image src={PEANUTMAN} alt="Peanut Logo" className="size-5" />
<Image src={PEANUT_LOGO_BLACK} alt="Peanut Logo" />
</div>
<div>account</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Global/NoMoreJailModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
import posthog from 'posthog-js'
import { ANALYTICS_EVENTS, MODAL_TYPES } from '@/constants/analytics.consts'
import Image from 'next/image'
import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
import { PEANUT_LOGO_BLACK, PEANUTMAN } from '@/assets'
import Modal from '../Modal'
import { Button } from '@/components/0_Bruddle/Button'
import { PeanutWhistling } from '@/assets/mascot'
Expand Down Expand Up @@ -55,7 +55,7 @@ const NoMoreJailModal = () => {
<Button className="w-full" shadowSize="4" variant="purple" onClick={onClose}>
<div>Start using</div>
<div className="flex items-center gap-1">
<Image src={PEANUTMAN_LOGO} alt="Peanut Logo" className="size-5" />
<Image src={PEANUTMAN} alt="Peanut Logo" className="size-5" />
<Image src={PEANUT_LOGO_BLACK} alt="Peanut Logo" />
</div>
</Button>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Global/PeanutLoading/CyclingLoading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'

import { PEANUTMAN_LOGO } from '@/assets/mascot'
import { PEANUTMAN } from '@/assets/mascot'
import { useEffect, useState } from 'react'
import { PAYMENT_LOADING_WORDS } from './words'

Expand All @@ -26,7 +26,7 @@ export default function CyclingLoading() {
<div className="w-full flex-col items-center justify-center self-center text-center">
<div className="flex w-full items-center justify-center self-center">
<div className="animate-spin">
<img src={PEANUTMAN_LOGO.src} alt="logo" className="h-10" />
<img src={PEANUTMAN.src} alt="logo" className="h-10" />

@coderabbitai coderabbitai Bot Jul 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Alt text not updated to "Peanut mascot".

Per the PR objective, mascot alt text should change from "logo" to "Peanut mascot". The sibling PeanutLoading/index.tsx was updated but this one was missed.

💚 Proposed fix 
-                    <img src={PEANUTMAN.src} alt="logo" className="h-10" />
+                    <img src={PEANUTMAN.src} alt="Peanut mascot" className="h-10" />
📝 Committable suggestion

‼️ 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.

Suggested change
<img src={PEANUTMAN.src} alt="logo" className="h-10" />
<img src={PEANUTMAN.src} alt="Peanut mascot" className="h-10" />
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Global/PeanutLoading/CyclingLoading.tsx` at line 29, The
CyclingLoading component still uses the old image alt text, so update the <img>
in CyclingLoading to match the PR’s mascot wording. In the component identified
by PEANUTMAN and the CyclingLoading JSX, change the alt attribute from the
generic logo text to "Peanut mascot" so it stays consistent with the sibling
PeanutLoading/index.tsx update.

<span className="sr-only">{word}</span>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Global/PeanutLoading/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { PEANUTMAN_LOGO } from '@/assets'
import { PEANUTMAN } from '@/assets'

@coderabbitai coderabbitai Bot Jul 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Barrel import violates project convention.

ESLint flags this: importing PEANUTMAN from '@/assets' pulls in the whole barrel instead of the specific module, unlike sibling consumers (e.g. CardFace.tsx, CyclingLoading.tsx) that import from '@/assets/mascot'.

🔧 Proposed fix 
-import { PEANUTMAN } from '`@/assets`'
+import { PEANUTMAN } from '`@/assets/mascot`'
📝 Committable suggestion

‼️ 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.

Suggested change
import { PEANUTMAN } from '@/assets'
import { PEANUTMAN } from '`@/assets/mascot`'
🧰 Tools
🪛 ESLint

[error] 1-1: '@/assets' import is restricted from being used. Import from a specific file instead of the '@/assets' barrel — barrels force the bundler to load every re-export and hurt build perf. See CLAUDE.md.

(no-restricted-imports)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Global/PeanutLoading/index.tsx` at line 1, The import in
PeanutLoading uses the assets barrel instead of the specific module, which
violates the project convention. Update the PEANUTMAN import in this component
to come directly from the mascot asset module, matching the pattern used by
sibling components like CardFace and CyclingLoading. Keep the change scoped to
the PEANUTMAN symbol so the component no longer pulls in the full barrel.

Source: Linters/SAST tools

import { twMerge } from 'tailwind-merge'

export default function PeanutLoading({
Expand All @@ -18,7 +18,7 @@ export default function PeanutLoading({
)}
>
<div className={twMerge('animate-spin')}>
<img src={PEANUTMAN_LOGO.src} alt="logo" className="h-10" />
<img src={PEANUTMAN.src} alt="Peanut mascot" className="h-10" />
<span className="sr-only">{message ?? 'Loading...'}</span>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Global/QRScanner/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { createPortal } from 'react-dom'
import { Button } from '@/components/0_Bruddle/Button'
import { MERCADO_PAGO, PIX } from '@/assets/payment-apps'
import { PEANUTMAN_LOGO } from '@/assets/mascot'
import { PEANUTMAN } from '@/assets/mascot'
import { ETHEREUM_ICON } from '@/assets/icons'
import Image from 'next/image'
import { Icon } from '../Icons/Icon'
Expand All @@ -14,7 +14,7 @@ import CameraPermissionModal from './CameraPermissionModal'
// ============================================================================

const PAYMENT_METHODS = [
{ src: PEANUTMAN_LOGO, alt: 'Peanut', name: 'Peanut' },
{ src: PEANUTMAN, alt: 'Peanut', name: 'Peanut' },
{ src: MERCADO_PAGO, alt: 'Mercado Pago', name: 'Mercado Pago' },
{ src: PIX, alt: 'PIX', name: 'PIX' },
{ src: ETHEREUM_ICON, alt: 'Ethereum and EVMs', name: 'ETH & EVMs' },
Expand Down
4 changes: 2 additions & 2 deletions src/components/Profile/components/PublicProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'

import { HandThumbsUpV2, PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
import { HandThumbsUpV2, PEANUT_LOGO_BLACK, PEANUTMAN } from '@/assets'

@coderabbitai coderabbitai Bot Jul 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Performance & Scalability | 🟠 Major | ⚡ Quick win

Avoid the @/assets barrel import.

This still trips the repo’s restricted-imports rule and pulls in the broader asset re-export graph. Split the mascot/logo symbols onto their owning modules instead, and move HandThumbsUpV2 off the barrel too if it still comes from there.

🧰 Tools
🪛 ESLint

[error] 3-3: '@/assets' import is restricted from being used. Import from a specific file instead of the '@/assets' barrel — barrels force the bundler to load every re-export and hurt build perf. See CLAUDE.md.

(no-restricted-imports)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Profile/components/PublicProfile.tsx` at line 3, The import in
PublicProfile still uses the restricted `@/assets` barrel, so replace it with
direct imports from the owning asset modules. Update the PublicProfile
component’s asset import to pull PEANUT_LOGO_BLACK and PEANUTMAN from their
specific module(s), and move HandThumbsUpV2 off the barrel as well if it is
still re-exported there, so the component no longer depends on the broader asset
graph.

Source: Linters/SAST tools

import { Button } from '@/components/0_Bruddle/Button'
import { Icon } from '@/components/Global/Icons/Icon'
import NavHeader from '@/components/Global/NavHeader'
Expand Down Expand Up @@ -76,7 +76,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ username, isLoggedIn = fa
<div>
{!isLoggedIn ? (
<div className="flex items-center gap-2 md:hidden">
<Image src={PEANUTMAN_LOGO} alt="Peanut Logo" height={24} />
<Image src={PEANUTMAN} alt="Peanut mascot" height={24} />
<Image src={PEANUT_LOGO_BLACK} alt="Peanut Text" height={12} />
</div>
) : (
Expand Down
4 changes: 2 additions & 2 deletions src/components/TransactionDetails/TransactionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { VerifiedUserLabel } from '../UserHeader'
import { PerkIcon } from './PerkIcon'
import { useHaptic } from 'use-haptic'
import LazyLoadErrorBoundary from '@/components/Global/LazyLoadErrorBoundary'
import { PEANUTMAN_LOGO } from '@/assets/mascot'
import { PEANUTMAN } from '@/assets/mascot'
import InvitesIcon from '../Home/InvitesIcon'

// Lazy load transaction details drawer (~40KB) to reduce initial bundle size
Expand Down Expand Up @@ -167,7 +167,7 @@ const TransactionCard: React.FC<TransactionCardProps> = ({
{isTestTransaction ? (
<div className={'relative flex size-7 items-center justify-center rounded-full p-0.5'}>
<Image
src={PEANUTMAN_LOGO}
src={PEANUTMAN}
alt="Peanut Logo"
className="size-8 object-contain"
width={30}
Expand Down
4 changes: 2 additions & 2 deletions src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { VerifiedUserLabel } from '../UserHeader'
import ProgressBar from '../Global/ProgressBar'
import { useRouter } from 'next/navigation'
import { twMerge } from 'tailwind-merge'
import { PEANUTMAN_LOGO } from '@/assets/mascot'
import { PEANUTMAN } from '@/assets/mascot'
import { profileUrl } from '@/utils/native-routes'

interface TransactionDetailsHeaderCardProps {
Expand Down Expand Up @@ -210,7 +210,7 @@ export const TransactionDetailsHeaderCard: React.FC<TransactionDetailsHeaderCard
{isTestTransaction ? (
<div className="flex items-center gap-3">
<div>
<Image src={PEANUTMAN_LOGO} alt="Peanut Logo" width={64} height={64} className="size-8" />
<Image src={PEANUTMAN} alt="Peanut Logo" width={64} height={64} className="size-8" />
</div>
Comment on lines 210 to 214

@coderabbitai coderabbitai Bot Jul 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Update the alt text to match the mascot rename.

The image source was renamed, but the label still says “Logo.” Switch this to “Peanut mascot” so the header card stays consistent with the new naming.

♻️ Suggested tweak 
-                        <Image src={PEANUTMAN} alt="Peanut Logo" width={64} height={64} className="size-8" />
+                        <Image src={PEANUTMAN} alt="Peanut mascot" width={64} height={64} className="size-8" />
📝 Committable suggestion

‼️ 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.

Suggested change
{isTestTransaction ? (
<div className="flex items-center gap-3">
<div>
<Image src={PEANUTMAN_LOGO} alt="Peanut Logo" width={64} height={64} className="size-8" />
<Image src={PEANUTMAN} alt="Peanut Logo" width={64} height={64} className="size-8" />
</div>
{isTestTransaction ? (
<div className="flex items-center gap-3">
<div>
<Image src={PEANUTMAN} alt="Peanut mascot" width={64} height={64} className="size-8" />
</div>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx` around
lines 210 - 214, The image alt text in TransactionDetailsHeaderCard’s
test-transaction header still uses the old “Logo” label even though the
PEANUTMAN asset was renamed; update the Image alt string to “Peanut mascot” so
the naming is consistent in this component.

<div>
<h2 className="text-xl font-extrabold">Enjoy Peanut!</h2>
Expand Down
4 changes: 2 additions & 2 deletions src/features/payments/shared/components/SendWithPeanutCta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* - logged in: "send with peanut" + executes payment
*/

import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
import { PEANUT_LOGO_BLACK, PEANUTMAN } from '@/assets'
import { Button, type ButtonProps } from '@/components/0_Bruddle/Button'
import type { IconName } from '@/components/Global/Icons/Icon'
import { useAuth } from '@/context/authContext'
Expand Down Expand Up @@ -100,7 +100,7 @@ export default function SendWithPeanutCta({
const peanutLogo = useMemo((): React.ReactNode => {
return (
<div className="flex items-center gap-1">
<Image src={PEANUTMAN_LOGO} alt="Peanut Logo" className="size-5" />
<Image src={PEANUTMAN} alt="Peanut Logo" className="size-5" />
<Image src={PEANUT_LOGO_BLACK} alt="Peanut Logo" />
</div>
)
Expand Down
Loading