feat: new home page ui

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

@@ -1,10 +1,10 @@
 import { Profile } from '@/components'
-
+import PageContainer from '@/components/0_Bruddle/PageContainer'
 import { Metadata } from 'next'
 
 export const metadata: Metadata = {
-    title: 'Peanut Protocol',
-    description: 'Send to Anyone',
+    title: 'Profile | Peanut Protocol',
+    description: 'Manage your Peanut profile',
     metadataBase: new URL('https://peanut.me'),
 
     icons: {
@@ -20,5 +20,9 @@ export const metadata: Metadata = {
 }
 
 export default function ProfilePage() {
-    return <Profile />
+    return (
+        <PageContainer>
+            <Profile />
+        </PageContainer>
+    )
 }

src/components/0_Bruddle/Button.tsx

@@ -12,7 +12,7 @@ export type ButtonVariant =
     | 'yellow'
     | 'transparent'
     | 'primary-soft'
-type ButtonSize = 'small' | 'medium' | 'large' | 'xl' | 'xl-fixed'
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xl' | 'xl-fixed'
 type ButtonShape = 'default' | 'square'
 type ShadowSize = '4' | '6' | '8'
 type ShadowType = 'primary' | 'secondary'

src/components/0_Bruddle/PageContainer.tsx

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react'
 
 const PageContainer = (props: HTMLAttributes<HTMLDivElement>) => {
-    return <div className="flex w-full items-center justify-center *:w-full md:*:w-2/5">{props.children}</div>
+    return <div className="flex w-full items-center justify-center *:w-full md:pl-24 md:*:w-2/5">{props.children}</div>
 }
 
 export default PageContainer

src/components/AddFunds/index.tsx

@@ -16,7 +16,7 @@ type FundingMethod = 'exchange' | 'request_link' | null
 type Wallet = { name: string; logo: string }
 
 // main component
-const AddFunds = () => {
+const AddFunds = ({ cta }: { cta?: ReactNode }) => {
     const [fundingMethod, setFundingMethod] = useState<FundingMethod>(null)
     const [showModal, setShowModal] = useState(false)
     const timerRef = useRef<NodeJS.Timeout>()
@@ -47,10 +47,16 @@ const AddFunds = () => {
     return (
         <div>
             <div onClick={() => setShowModal(true)} className="flex flex-col items-center gap-2.5">
-                <Button variant="purple" className={twMerge('h-14 w-14 rounded-full p-0')} shadowSize="4">
-                    <Icon name="plus" className="h-5 w-5" />
-                </Button>
-                <div className="font-semibold">Add</div>
+                {cta ? (
+                    cta
+                ) : (
+                    <>
+                        <Button variant="purple" className={twMerge('h-14 w-14 rounded-full p-0')} shadowSize="4">
+                            <Icon name="plus" className="h-5 w-5" />
+                        </Button>
+                        <div className="font-semibold">Add</div>
+                    </>
+                )}
             </div>
 
             <Modal

src/components/Global/Badges/AchievementsBadge.tsx

@@ -0,0 +1,97 @@
+import { twMerge } from 'tailwind-merge'
+import { Icon, IconName } from '../Icons/Icon'
+
+export type AchievementsBadgeSize = 'extra-small' | 'small' | 'medium' | 'large'
+
+interface AchievementsBadgeProps {
+    icon?: IconName
+    size?: AchievementsBadgeSize
+    color?: string
+    className?: string
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+}
+
+const AchievementsBadge = ({
+    icon = 'check',
+    size = 'medium',
+    color = 'bg-success-3',
+    className,
+    position = 'top-right',
+}: AchievementsBadgeProps) => {
+    const getContainerSize = () => {
+        switch (size) {
+            case 'extra-small':
+                return 'size-2.5'
+            case 'small':
+                return 'size-4'
+            case 'medium':
+                return 'size-5'
+            case 'large':
+                return 'size-6'
+            default:
+                return 'size-5'
+        }
+    }
+
+    const getIconSize = () => {
+        switch (size) {
+            case 'extra-small':
+                return 6
+            case 'small':
+                return 8
+            case 'medium':
+                return 10
+            case 'large':
+                return 14
+            default:
+                return 10
+        }
+    }
+
+    const getPadding = () => {
+        switch (size) {
+            case 'extra-small':
+                return 'p-0'
+            case 'small':
+                return 'p-0.5'
+            case 'medium':
+                return 'p-1'
+            case 'large':
+                return 'p-1.5'
+            default:
+                return 'p-1'
+        }
+    }
+
+    const getPosition = () => {
+        switch (position) {
+            case 'top-right':
+                return 'right-0 top-0'
+            case 'top-left':
+                return 'left-0 top-0'
+            case 'bottom-right':
+                return 'right-0 bottom-0'
+            case 'bottom-left':
+                return 'left-0 bottom-0'
+            default:
+                return 'right-0 top-0'
+        }
+    }
+
+    return (
+        <div
+            className={twMerge(
+                'absolute flex items-center justify-center rounded-full border border-black',
+                color,
+                getContainerSize(),
+                getPadding(),
+                getPosition(),
+                className
+            )}
+        >
+            <Icon name={icon} size={getIconSize()} />
+        </div>
+    )
+}
+
+export default AchievementsBadge

src/components/Global/Badges/StatusBadge.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export type StatusType = 'completed' | 'pending' | 'failed' | 'cancelled' | 'soon'
+
+interface StatusBadgeProps {
+    status: StatusType
+    className?: string
+    size?: 'small' | 'medium' | 'large'
+}
+
+const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className, size = 'small' }) => {
+    const getStatusStyles = () => {
+        switch (status) {
+            case 'completed':
+                return 'bg-success-2 text-success-1'
+            case 'pending':
+                return 'bg-secondary-4 text-secondary-1'
+            case 'failed':
+            case 'cancelled':
+                return 'bg-error-1 text-error'
+            case 'soon':
+                return 'bg-primary-3 text-primary-4'
+            default:
+                return 'bg-gray-200 text-gray-700'
+        }
+    }
+
+    const getStatusText = () => {
+        switch (status) {
+            case 'completed':
+                return 'Completed'
+            case 'pending':
+                return 'Pending'
+            case 'failed':
+                return 'Failed'
+            case 'cancelled':
+                return 'Cancelled'
+            case 'soon':
+                return 'Soon!'
+            default:
+                return status
+        }
+    }
+
+    const getSizeClasses = () => {
+        switch (size) {
+            case 'small':
+                return 'px-2 py-0.5 text-[10px]'
+            case 'medium':
+                return 'px-3 py-1 text-xs'
+            case 'large':
+                return 'px-4 py-1.5 text-sm'
+            default:
+                return 'px-2 py-0.5 text-[10px]'
+        }
+    }
+
+    return (
+        <span
+            className={twMerge(
+                'rounded-full font-roboto font-semibold',
+                getSizeClasses(),
+                getStatusStyles(),
+                className
+            )}
+        >
+            {getStatusText()}
+        </span>
+    )
+}
+
+export default StatusBadge

src/components/Global/BottomDrawer/index.tsx

@@ -9,6 +9,7 @@ interface BottomDrawerProps {
     onClose?: () => void
     initialPosition?: DrawerPosition
     handleTitle?: string
+    handleSubtitle?: string
     collapsedHeight?: number
     halfHeight?: number
     expandedHeight?: number
@@ -22,6 +23,7 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
     onClose,
     initialPosition = 'half',
     handleTitle = '',
+    handleSubtitle = '',
     collapsedHeight = 15,
     halfHeight = 50,
     expandedHeight = 90,
@@ -307,7 +309,10 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
                     style={{ cursor: isDragging ? 'grabbing' : 'grab' }}
                 >
                     <div className="mx-auto mb-4 mt-2 h-2 w-8 rounded-full bg-black"></div>
-                    {handleTitle && <h2 className="mb-8 text-2xl font-extrabold">{handleTitle}</h2>}
+                    <div className="mb-8 space-y-1">
+                        {handleTitle && <h2 className="text-lg font-extrabold">{handleTitle}</h2>}
+                        {handleSubtitle && <h2 className="mb-8">{handleSubtitle}</h2>}
+                    </div>
                 </div>
 
                 {/* Content area */}

src/components/Global/Card/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export type CardPosition = 'single' | 'first' | 'middle' | 'last'
+
+interface CardProps {
+    children: React.ReactNode
+    position?: CardPosition
+    className?: string
+    onClick?: () => void
+    border?: boolean
+}
+
+const Card: React.FC<CardProps> = ({ children, position = 'single', className = '', onClick, border = true }) => {
+    const getBorderRadius = () => {
+        switch (position) {
+            case 'single':
+                return 'rounded-sm'
+            case 'first':
+                return 'rounded-t-sm'
+            case 'last':
+                return 'rounded-b-sm'
+            case 'middle':
+                return ''
+            default:
+                return 'rounded-sm'
+        }
+    }
+
+    const getBorder = () => {
+        if (!border) return ''
+
+        switch (position) {
+            case 'single':
+                return 'border border-black'
+            case 'first':
+                return 'border border-black'
+            case 'middle':
+                return 'border border-black border-t-0'
+            case 'last':
+                return 'border border-black border-t-0'
+            default:
+                return 'border border-black'
+        }
+    }
+
+    return (
+        <div
+            className={twMerge('w-full overflow-hidden bg-white px-4 py-2', getBorderRadius(), getBorder(), className)}
+            onClick={onClick}
+        >
+            {children}
+        </div>
+    )
+}
+
+export default Card

src/components/Global/CopyToClipboard/index.tsx

@@ -1,14 +1,15 @@
 import React, { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
-import Icon from '../Icon'
+import { Icon } from '../Icons/Icon'
 
 interface Props {
     textToCopy: string
     fill?: string
     className?: string
+    iconSize?: '2' | '4' | '6' | '8'
 }
 
-const CopyToClipboard = ({ textToCopy, fill, className }: Props) => {
+const CopyToClipboard = ({ textToCopy, fill, className, iconSize = '6' }: Props) => {
     const [copied, setCopied] = useState(false)
 
     const handleCopy = (e: React.MouseEvent<SVGElement>) => {
@@ -21,8 +22,8 @@ const CopyToClipboard = ({ textToCopy, fill, className }: Props) => {
 
     return (
         <Icon
-            name={copied ? 'check' : 'content-copy'}
-            className={twMerge('h-6 w-6 hover:opacity-80', className)}
+            name={copied ? 'check' : 'copy'}
+            className={twMerge(`h-${iconSize} w-${iconSize} hover:opacity-80`, className)}
             fill={fill ? fill : 'white'}
             onClick={handleCopy}
         />

src/components/Global/DirectSendQR/utils.ts

@@ -1,5 +1,5 @@
+import { getTokenSymbol, validateEnsName } from '@/utils'
 import { isAddress } from 'viem'
-import { validateEnsName, getTokenSymbol } from '@/utils'
 
 // Constants
 const PINTA_MERCHANTS: Record<string, string> = {
@@ -67,7 +67,7 @@ const REGEXES_BY_TYPE: { [key in QrType]?: RegExp } = {
         /^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/,
 }
 
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL!
+export const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL!
 
 export function recognizeQr(data: string): QrType | null {
     if (data.startsWith(BASE_URL)) {