[TASK-8173] fix: claim flow + ui fixes

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

@@ -8,7 +8,6 @@ import ProfileSection from '@/components/Profile/Components/ProfileSection'
 import { useAuth } from '@/context/authContext'
 import { useWallet } from '@/hooks/useWallet'
 import { useZeroDev } from '@/hooks/useZeroDev'
-import { WalletProviderType } from '@/interfaces'
 import { getUserPreferences, updateUserPreferences } from '@/utils'
 import classNames from 'classnames'
 import { motion, useAnimation } from 'framer-motion'
@@ -61,11 +60,7 @@ export default function Home() {
     const handleCardClick = (index: number) => {
         if (index < wallets.length) {
             if (selectedWalletIndex === index) {
-                if (selectedWallet?.walletProviderType === WalletProviderType.PEANUT) {
-                    router.push('/profile')
-                } else {
-                    router.push('/wallet')
-                }
+                router.push('/wallet')
             } else {
                 setSelectedWallet(wallets[index])
             }

src/app/(mobile-ui)/layout.tsx

@@ -70,16 +70,16 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                     >
                         Sign In
                     </Button>
-                    <Link href={'/setup'} className="text-h8 hover:underline">
-                        Don't have a penanut wallet? Get one now.
+                    <Link href={'/setup'} className="text-h8 underline">
+                        Don't have a peanut wallet? Get one now.
                     </Link>
                     <div className="my-2 flex w-full items-center gap-4">
                         <div className="h-px flex-1 bg-gray-200" />
                         <span className="text-sm text-gray-500">or</span>
                         <div className="h-px flex-1 bg-gray-200" />
                     </div>
                     <Button
-                        loading={isLoggingIn}
+                        // loading={isLoggingIn}
                         disabled={isLoggingIn}
                         variant="dark"
                         shadowType="secondary"

src/components/0_Bruddle/PageContainer.tsx

@@ -3,13 +3,12 @@ import { twMerge } from 'tailwind-merge'
 
 const PageContainer = (props: HTMLAttributes<HTMLDivElement>) => {
     return (
-        <div
-            className={twMerge(
-                'flex h-[120%] w-full flex-col items-center sm:h-full sm:justify-center',
-                props.className
-            )}
-        >
-            {props.children}
+        <div className="flex min-h-[calc(100dvh-3rem)] w-full items-center justify-center py-6 *:w-full md:*:w-2/5">
+            <div
+                className={twMerge('mx-auto flex h-full w-full items-center justify-evenly *:w-full', props.className)}
+            >
+                {props.children}
+            </div>
         </div>
     )
 }

src/components/Cashout/Components/RecipientInfo.comp.tsx

@@ -1,4 +1,3 @@
-import Icon from '@/components/Global/Icon'
 import MoreInfo from '@/components/Global/MoreInfo'
 import { TOOLTIPS } from '@/constants/tooltips'
 

src/components/Claim/Generic/AlreadyClaimed.view.tsx

@@ -1,14 +1,10 @@
 'use client'
 
-import Icon from '@/components/Global/Icon'
-import * as _consts from '../Claim.consts'
+import { Card } from '@/components/0_Bruddle'
+import AddressLink from '@/components/Global/AddressLink'
+import { PaymentsFooter } from '@/components/Global/PaymentsFooter'
 import * as consts from '@/constants'
-import * as utils from '@/utils'
 import * as interfaces from '@/interfaces'
-import Link from 'next/link'
-import { Button, Card } from '@/components/0_Bruddle'
-import { PaymentsFooter } from '@/components/Global/PaymentsFooter'
-import AddressLink from '@/components/Global/AddressLink'
 
 export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: interfaces.ILinkDetails | undefined }) => {
     const chainName =
@@ -82,7 +78,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter
                         )}
                     </div>
                 )}
-                <label className="text-h9 font-normal">
+                <label className="text-center text-h9 font-normal">
                     We would like to hear from your experience. Hit us up on{' '}
                     <a
                         className="cursor-pointer text-black underline dark:text-white"

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

@@ -60,28 +60,30 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _
 
     return (
         <Card className="shadow-none sm:shadow-primary-4">
-            <Card.Header>
-                <Card.Title>Yay!</Card.Title>
-                <Card.Description>You have successfully claimed your funds!</Card.Description>
+            <Card.Header className="mx-auto">
+                <Card.Title className="mx-auto text-center">Yay!</Card.Title>
+                <Card.Description className="mx-auto text-center">
+                    You have successfully claimed your funds!
+                </Card.Description>
             </Card.Header>
             <Card.Content className="flex flex-col gap-2">
-                <label className="text-h8 font-normal text-gray-1">Transaction details</label>
+                <label className="text-center text-h8 font-normal text-gray-1">Transaction details</label>
                 {type === 'claimxchain' && (
                     <div className="flex flex-col items-start justify-center gap-1 text-h9  font-normal">
-                        <div className="flex w-full flex-row items-center justify-start gap-1">
+                        <div className="flex w-full flex-row items-center justify-between gap-1">
                             <label className="">Source chain:</label>
                             <Link className="cursor-pointer  underline" href={explorerUrlWithTx}>
                                 {utils.shortenAddressLong(transactionHash ?? '')}
                             </Link>
                         </div>
-                        <div className="flex w-full flex-row items-center justify-start gap-1">
+                        <div className="flex w-full flex-row items-center justify-between gap-1">
                             <label className="">Cross-chain Routing via Axelar:</label>
 
                             <Link className="cursor-pointer  underline" href={explorerUrlAxelarWithTx}>
                                 {utils.shortenAddressLong(transactionHash ?? '')}
                             </Link>
                         </div>
-                        <div className="flex w-full flex-row  items-center justify-start gap-1">
+                        <div className="flex w-full flex-row  items-center justify-between gap-1">
                             <label className="">Destination Address:</label>
                             {!explorerUrlDestChainWithTxHash ? (
                                 <div className="h-2 w-16 animate-colorPulse rounded bg-slate-700"></div>
@@ -110,7 +112,7 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _
                         See your payments.
                     </Button>
                 </Link>
-                <label className="text-h9 font-normal">
+                <label className="text-center text-h9 font-normal">
                     We would like to hear from your experience. Hit us up on{' '}
                     <a
                         className="cursor-pointer text-black underline dark:text-white"