Feat/request pots

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

@@ -1045,6 +1045,7 @@ export default function QRPayPage() {
                                                     exchange_rate: currency.price.toString(),
                                                 },
                                             },
+                                            totalAmountCollected: Number(usdAmount),
                                         })
                                     }}
                                 >
@@ -1126,6 +1127,7 @@ export default function QRPayPage() {
                                             exchange_rate: currency.price.toString(),
                                         },
                                     },
+                                    totalAmountCollected: Number(usdAmount),
                                 })
                             }}
                         >

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

@@ -1,6 +1,6 @@
 import { generateMetadata } from '@/app/metadata'
 import PageContainer from '@/components/0_Bruddle/PageContainer'
-import { RequestRouterView } from '@/components/Request/views/RequestRouter.view'
+import { CreateRequestLinkView } from '@/components/Request/link/views/Create.request.link.view'
 
 export const metadata = generateMetadata({
     title: 'Request Money | Peanut',
@@ -13,7 +13,7 @@ export const metadata = generateMetadata({
 export default function RequestPage() {
     return (
         <PageContainer>
-            <RequestRouterView />
+            <CreateRequestLinkView />
         </PageContainer>
     )
 }

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

@@ -521,9 +521,10 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
                         }
                         setCurrencyAmount={(value: string | undefined) => setCurrencyAmount(value || '')}
                         currencyAmount={currencyAmount}
+                        showRequestPotInitialView={!!requestId}
                     />
                     <div>
-                        {showActionList && (
+                        {!requestId && showActionList && (
                             <ActionList
                                 flow="request"
                                 requestLinkData={parsedPaymentData as ParsedURL}

src/assets/icons/index.ts

@@ -21,3 +21,5 @@ export { default as STAR_STRAIGHT_ICON } from './starStraight.svg'
 export { default as WHATSAPP_ICON } from './whatsapp.svg'
 export { default as IMESSAGE_ICON } from './imessage.svg'
 export { default as FBMessenger_ICON } from './fbmessenger.svg'
+export { default as SOCIALS_ICON } from './socials.svg'
+export { default as COIN_ICON } from './coin.svg'

src/components/Global/Badges/StatusBadge.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { twMerge } from 'tailwind-merge'
 
-export type StatusType = 'completed' | 'pending' | 'failed' | 'cancelled' | 'soon' | 'processing' | 'custom'
+export type StatusType = 'completed' | 'pending' | 'failed' | 'cancelled' | 'soon' | 'processing' | 'custom' | 'closed'
 
 interface StatusBadgeProps {
     status: StatusType
@@ -14,6 +14,7 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className, size = 'sm
     const getStatusStyles = () => {
         switch (status) {
             case 'completed':
+            case 'closed':
                 return 'bg-success-2 text-success-4 border border-success-5'
             case 'pending':
             case 'processing':
@@ -43,6 +44,8 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className, size = 'sm
                 return 'Cancelled'
             case 'soon':
                 return 'Soon!'
+            case 'closed':
+                return 'Closed'
             case 'custom':
                 return customText
             default:

src/components/Global/Contributors/ContributorCard.tsx

@@ -0,0 +1,46 @@
+import { type Payment } from '@/services/services.types'
+import Card, { type CardPosition } from '../Card'
+import AvatarWithBadge from '@/components/Profile/AvatarWithBadge'
+import { getColorForUsername } from '@/utils/color.utils'
+import { VerifiedUserLabel } from '@/components/UserHeader'
+import { formatTokenAmount } from '@/utils'
+import { isAddress } from 'viem'
+
+export type Contributor = {
+    uuid: string
+    payments: Payment[]
+    amount: string
+    username: string | undefined
+    fulfillmentPayment: Payment | null
+    isUserVerified: boolean
+}
+
+const ContributorCard = ({ contributor, position }: { contributor: Contributor; position: CardPosition }) => {
+    const colors = getColorForUsername(contributor.username ?? '')
+    const isEvmAddress = isAddress(contributor.username ?? '')
+    return (
+        <Card position={position} className="cursor-pointer">
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                    <AvatarWithBadge
+                        name={contributor.username ?? ''}
+                        size={'extra-small'}
+                        inlineStyle={{ backgroundColor: isEvmAddress ? '#FFC900' : colors.lightShade }}
+                        textColor={isEvmAddress ? '#000000' : colors.darkShade}
+                        icon={isEvmAddress ? 'wallet-outline' : undefined}
+                    />
+
+                    <VerifiedUserLabel
+                        username={contributor.username ?? ''}
+                        name={contributor.username ?? ''}
+                        isVerified={contributor.isUserVerified}
+                    />
+                </div>
+
+                <p className="font-medium">${formatTokenAmount(Number(contributor.amount))}</p>
+            </div>
+        </Card>
+    )
+}
+
+export default ContributorCard