[TASK-14052] Prod release 105 (#1122)

* feat: handle send link claims to bank account for peanut users (#1078)

* reafactor: create reusable country list component and use it for all the flows

* feat: reusable user accounts components

* feat: handle different cases based on kyc status for bank claim

* fix: account creation

* chore: add docstring to hooks

* chore: better comments for bank flow manager

* fix: kyc modal closing after tos acceptance issue

* fix: remove bank acc caching from withdraw flow

* fix: update confirm claim modal copy

* fix: remove bank acc caching from claim flow

* fix: navheader title

* remove duplicate debounce code and use `useDebounce` hook instead (#1079)

* Landing page v2.1 (#1089)

* lpv2.1 part 1

* Add exchange widget

* add and integrate exchange API

* add yourMoney component bg

* update landing countries svg

* integrate frankfurter API

* fixes and improvements

* decrease hero section height

* allow max 2 decimal places

* Add `/exchange` route

* fix: overlay

* make destination amount editable and bugg fixes

* some fixes & currency improvements

* crucial commit

* fix checkmark, font size and weight

---------

Co-authored-by: Hugo Montenegro <[email protected]>

* [TASK-13186] refactor: use networkName instead of axelarChainName (#1095)

* refactor: use networkName instead of axelarChainName

* fix: types

* fix: onramp currency (#1096)

* fix: stretched favicon (#1099)

* [TASK-13971] fix: scientific notation in eip681 parsing (#1097)

* fix: scientific notation in eip681 parsing

* fix: qr handling tests

* fix: peanut sdk mock

* pull iban hotfix (#1100)

* fix: claim flow bugs (#1102)

* fix: cross chain claim

* fix: full name issue on confirm bank claim view

* fix: back navigation on desktop views

* Fix back button not working on /profile (#1101)

* Fix back button not working

* fix public profile page

* extract internal navigation logic to utility function

* fix: send link claims to us bank accounts (#1108)

* fix: usa bank account claims

* fix: show bank account details in confirm claim view

* Sync Landing page changes (#1111)

* reduce clouds size and update font

* fix: hero section responsiveness issue

* fix: formatting errors

* add currency animation

* fix: us bank claims after kyc for logged in users (#1112)

* fix: trim account form inputs for spaces (#1114)

* [TASK-14107] fix: don't allow claiming on xChain if route is not found (#1115)

* fix: don't allow claiming on xChain if route is not found

* fix(claim): use correct decimals for min receive amount

* feat: handle redirect uri when on unsupported browsers (#1117)

* feat: handle redirect uri when on unsupported browsers

* fix: confirm bank claim ui rows for iban guest claim

* remove animation (#1118)

* fix: formatting

---------

Co-authored-by: Kushagra Sarathe <[email protected]>
Co-authored-by: Mohd Zishan <[email protected]>
Co-authored-by: Hugo Montenegro <[email protected]>

Author: 4 people

src/app/(mobile-ui)/claim/page.tsx

@@ -97,7 +97,7 @@ export async function generateMetadata({
         description,
         ...(siteUrl ? { metadataBase: new URL(siteUrl) } : {}),
         icons: {
-            icon: '/logo-favicon.png',
+            icon: '/favicon.ico',
         },
         openGraph: {
             title,

src/app/(mobile-ui)/home/page.tsx

@@ -38,8 +38,8 @@ import { AccountType } from '@/interfaces'
 import { formatUnits } from 'viem'
 import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants'
 import { PostSignupActionManager } from '@/components/Global/PostSignupActionManager'
-import { useGuestFlow } from '@/context/GuestFlowContext'
 import { useWithdrawFlow } from '@/context/WithdrawFlowContext'
+import { useClaimBankFlow } from '@/context/ClaimBankFlowContext'
 
 const BALANCE_WARNING_THRESHOLD = parseInt(process.env.NEXT_PUBLIC_BALANCE_WARNING_THRESHOLD ?? '500')
 const BALANCE_WARNING_EXPIRY = parseInt(process.env.NEXT_PUBLIC_BALANCE_WARNING_EXPIRY ?? '1814400') // 21 days in seconds
@@ -48,7 +48,7 @@ export default function Home() {
     const { balance, address, isFetchingBalance, isFetchingRewardBalance } = useWallet()
     const { rewardWalletBalance } = useWalletStore()
     const [isRewardsModalOpen, setIsRewardsModalOpen] = useState(false)
-    const { resetGuestFlow } = useGuestFlow()
+    const { resetFlow: resetClaimBankFlow } = useClaimBankFlow()
     const { resetWithdrawFlow } = useWithdrawFlow()
     const [isBalanceHidden, setIsBalanceHidden] = useState(() => {
         const prefs = getUserPreferences()
@@ -84,9 +84,9 @@ export default function Home() {
     const isLoading = isFetchingUser && !username
 
     useEffect(() => {
-        resetGuestFlow()
+        resetClaimBankFlow()
         resetWithdrawFlow()
-    }, [resetGuestFlow, resetWithdrawFlow])
+    }, [resetClaimBankFlow, resetWithdrawFlow])
 
     useEffect(() => {
         // We have some users that didn't have the peanut wallet created

src/app/(mobile-ui)/request/pay/page.tsx

@@ -68,7 +68,7 @@ export async function generateMetadata({
         title,
         description: 'Request cryptocurrency from friends, family, or anyone else using Peanut on any chain.',
         icons: {
-            icon: '/logo-favicon.png',
+            icon: '/favicon.ico',
         },
         openGraph: {
             images: [

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

@@ -137,7 +137,7 @@ export async function generateMetadata({ params, searchParams }: any) {
         description,
         ...(siteUrl ? { metadataBase: new URL(siteUrl) } : {}),
         icons: {
-            icon: '/logo-favicon.png',
+            icon: '/favicon.ico',
         },
         openGraph: {
             title,

src/app/actions/squid.ts

@@ -34,16 +34,17 @@ const getSquidTokensCache = unstable_cache(
 )
 
 export const getSquidChainsAndTokens = unstable_cache(
-    async (): Promise<Record<string, interfaces.ISquidChain & { tokens: interfaces.ISquidToken[] }>> => {
+    async (): Promise<
+        Record<string, interfaces.ISquidChain & { networkName: string; tokens: interfaces.ISquidToken[] }>
+    > => {
         const [chains, tokens] = await Promise.all([getSquidChainsCache(), getSquidTokensCache()])
 
-        const chainsById = chains.reduce<Record<string, interfaces.ISquidChain & { tokens: interfaces.ISquidToken[] }>>(
-            (acc, chain) => {
-                acc[chain.chainId] = { ...chain, tokens: [] }
-                return acc
-            },
-            {}
-        )
+        const chainsById = chains.reduce<
+            Record<string, interfaces.ISquidChain & { networkName: string; tokens: interfaces.ISquidToken[] }>
+        >((acc, chain) => {
+            acc[chain.chainId] = { ...(chain as interfaces.ISquidChain & { networkName: string }), tokens: [] }
+            return acc
+        }, {})
 
         tokens.forEach((token) => {
             if (token.active && token.chainId in chainsById) {

src/app/exchange/page.tsx

@@ -6,7 +6,7 @@ import Footer from '@/components/LandingPage/Footer'
 export default function ExchangePage() {
     return (
         <Layout className="enable-select !m-0 w-full !p-0">
-            <NoFees isExchangePage />
+            <NoFees />
             <Footer />
         </Layout>
     )

src/components/0_Bruddle/Button.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React, { forwardRef, useEffect, useRef, useState, useCallback } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { Icon, IconName } from '../Global/Icons/Icon'

src/components/AddMoney/components/DepositMethodList.tsx

@@ -2,7 +2,6 @@
 import { CardPosition } from '@/components/Global/Card'
 import AvatarWithBadge from '@/components/Profile/AvatarWithBadge'
 import { SearchResultCard } from '@/components/SearchUsers/SearchResultCard'
-import { IconName } from '@/components/Global/Icons/Icon'
 import Image from 'next/image'
 import { twMerge } from 'tailwind-merge'
 import { countryCodeMap } from '../consts'
@@ -38,7 +37,7 @@ export const DepositMethodList = ({ methods, onItemClick, isAllMethodsView = fal
                 if (isSingleOverall) {
                     determinedPosition = 'single'
                 } else if (isFirstOverall) {
-                    determinedPosition = 'first'
+                    determinedPosition = isCryptoAtSlot0 && isAllMethodsView ? 'single' : 'first'
                 } else if (isCryptoAtSlot0 && isCurrentMethodCountry && index === 1 && isAllMethodsView) {
                     // if crypto card is at methods[0], and this is the country card at methods[1],
                     // treat this country card as 'first' in its own group.

src/components/AddMoney/views/NetworkSelection.view.tsx

@@ -49,7 +49,7 @@ const NetworkSelectionView: React.FC<NetworkSelectionViewProps> = ({ onNetworkSe
                             <NetworkListItem
                                 key={index}
                                 chainId={squidChainDetails?.chainId ?? network.chainId}
-                                name={squidChainDetails?.axelarChainName ?? network.name}
+                                name={squidChainDetails?.networkName ?? network.name}
                                 iconUrl={squidChainDetails?.chainIconURI ?? network.iconUrl}
                                 isComingSoon={isComingSoon}
                                 iconClassName={
@@ -60,7 +60,7 @@ const NetworkSelectionView: React.FC<NetworkSelectionViewProps> = ({ onNetworkSe
                                 onClick={() =>
                                     onNetworkSelect({
                                         chainId: squidChainDetails?.chainId ?? network.chainId,
-                                        name: squidChainDetails?.axelarChainName ?? network.name,
+                                        name: squidChainDetails?.networkName ?? network.name,
                                         iconUrl: squidChainDetails?.chainIconURI ?? network.iconUrl,
                                     })
                                 }

src/components/AddWithdraw/AddWithdrawCountriesList.tsx

@@ -20,12 +20,10 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { InitiateKYCModal } from '@/components/Kyc'
 import { DynamicBankAccountForm, IBankAccountDetails } from './DynamicBankAccountForm'
 import { addBankAccount, updateUserById } from '@/app/actions/users'
-import { jsonParse, jsonStringify } from '@/utils/general.utils'
 import { KYCStatus } from '@/utils/bridge-accounts.utils'
 import { AddBankAccountPayload } from '@/app/actions/types/users.types'
 import { useWebSocket } from '@/hooks/useWebSocket'
 import { useWithdrawFlow } from '@/context/WithdrawFlowContext'
-import { useOnrampFlow } from '@/context/OnrampFlowContext'
 import { Account } from '@/interfaces'
 import PeanutLoading from '../Global/PeanutLoading'
 import { getCountryCodeForWithdraw } from '@/utils/withdraw.utils'
@@ -39,10 +37,8 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
     const params = useParams()
     const { user, fetchUser } = useAuth()
     const { setSelectedBankAccount, amountToWithdraw } = useWithdrawFlow()
-    const { setFromBankSelected } = useOnrampFlow()
     const [view, setView] = useState<'list' | 'form'>('list')
     const [isKycModalOpen, setIsKycModalOpen] = useState(false)
-    const [cachedBankDetails, setCachedBankDetails] = useState<Partial<IBankAccountDetails> | null>(null)
     const formRef = useRef<{ handleSubmit: () => void }>(null)
     const [liveKycStatus, setLiveKycStatus] = useState<KYCStatus | undefined>(user?.user?.kycStatus as KYCStatus)
 
@@ -72,18 +68,6 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
         (country) => country.type === 'country' && country.path === countrySlugFromUrl
     )
 
-    useEffect(() => {
-        if (user?.user.userId) {
-            const item = sessionStorage.getItem(`temp-bank-account-${user.user.userId}`)
-            const data = item ? jsonParse(item) : null
-            const currentStatus = liveKycStatus || user.user.kycStatus
-            if (data && currentStatus === 'approved' && !cachedBankDetails) {
-                setCachedBankDetails(data)
-                setView('form')
-            }
-        }
-    }, [user, liveKycStatus, cachedBankDetails])
-
     const handleFormSubmit = async (
         payload: AddBankAccountPayload,
         rawData: IBankAccountDetails
@@ -130,9 +114,6 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
                 setSelectedBankAccount(newAccountFromResponse)
             }
 
-            if (user?.user.userId) {
-                sessionStorage.removeItem(`temp-bank-account-${user.user.userId}`)
-            }
             if (currentCountry) {
                 router.push(`/withdraw/${currentCountry.path}/bank`)
             }
@@ -157,20 +138,17 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
 
         // scenario (2): if the user hasn't completed kyc yet
         if (!isUserKycVerified) {
-            const { firstName, lastName, email, ...detailsToSave } = rawData
-            if (user?.user.userId) {
-                sessionStorage.setItem(`temp-bank-account-${user.user.userId}`, jsonStringify(detailsToSave))
-            }
             setIsKycModalOpen(true)
         }
 
         return {}
     }
 
     const handleKycSuccess = () => {
-        setIsKycModalOpen(false)
-        if (formRef.current) {
-            formRef.current.handleSubmit()
+        // only transition to form if this component initiated the KYC modal
+        if (isKycModalOpen) {
+            setIsKycModalOpen(false)
+            setView('form')
         }
     }
 
@@ -213,16 +191,20 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
     if (view === 'form') {
         return (
             <div className="flex min-h-[inherit] flex-col justify-normal gap-8">
-                <NavHeader title={'Withdraw'} onPrev={() => setView('list')} />
-
-                <div className="flex h-full w-full flex-1 flex-col justify-start gap-4">
-                    <DynamicBankAccountForm
-                        ref={formRef}
-                        country={getCountryCodeForWithdraw(currentCountry.id)}
-                        onSuccess={handleFormSubmit}
-                        initialData={cachedBankDetails ?? {}}
-                    />
-                </div>
+                <NavHeader
+                    title={flow === 'withdraw' ? 'Withdraw' : 'Add money'}
+                    onPrev={() => {
+                        // ensure kyc modal isn't open so late success events don't flip view
+                        setIsKycModalOpen(false)
+                        setView('list')
+                    }}
+                />
+                <DynamicBankAccountForm
+                    ref={formRef}
+                    country={getCountryCodeForWithdraw(currentCountry.id)}
+                    onSuccess={handleFormSubmit}
+                    initialData={{}}
+                />
                 <InitiateKYCModal
                     isOpen={isKycModalOpen}
                     onClose={() => setIsKycModalOpen(false)}