86 lines
3.9 KiB
TypeScript
86 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { Display } from '@/components/display';
|
|
import useGlobalStore from '@/config/use-global';
|
|
import { Card, CardContent } from '@workspace/airo-ui/components/card';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
import CopyShortenedLink from '@/components/CopyShortenedLink/CopyShortenedLink';
|
|
import Recharge from '@/components/subscribe/recharge';
|
|
import Link from 'next/link';
|
|
import Table from './components/Table/Table';
|
|
import WalletDialog from './components/WalletDialog/WalletDialog';
|
|
import WhithdrawDialog from './components/Withdraw/WithdrawDialog';
|
|
|
|
export default function Page() {
|
|
const t = useTranslations('wallet');
|
|
const dashboardT = useTranslations('dashboard');
|
|
const { user } = useGlobalStore();
|
|
const totalAssets = (user?.balance || 0) + (user?.commission || 0) + (user?.gift_amount || 0);
|
|
return (
|
|
<>
|
|
<Card className='rounded-[40px] border border-[#D9D9D9] px-[24px] pb-[30px] pt-[20px] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:mb-4 sm:px-[30px]'>
|
|
<CardContent className='p-0'>
|
|
<h2 className='mb-4 flex items-center justify-between text-base font-bold text-[#666] sm:text-xl'>
|
|
<span>{t('assetOverview')}</span>
|
|
<Recharge />
|
|
</h2>
|
|
<div className='mb-4'>
|
|
<div className='flex items-center justify-between'>
|
|
<div>
|
|
<p className='text-sm font-light text-[#666]'>{t('totalAssets')}</p>
|
|
<p className='text-2xl font-bold'>
|
|
<Display type='currency' value={totalAssets} />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='grid grid-cols-2 gap-2 sm:grid-cols-2 sm:gap-6 md:grid-cols-4'>
|
|
<div className='col-span-2 rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md sm:col-span-1'>
|
|
<p className='text-sm font-light text-[#666] opacity-80 sm:mb-3'>
|
|
{t('accountBalance')}
|
|
</p>
|
|
<p className='text-xl font-medium text-[#225BA9]'>
|
|
<Display type='currency' value={user?.balance} />
|
|
</p>
|
|
</div>
|
|
<div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
|
|
<p className='text-sm font-light text-[#666] opacity-80 sm:mb-3'>{t('giftAmount')}</p>
|
|
<p className='text-xl font-medium text-[#225BA9]'>
|
|
<Display type='currency' value={user?.gift_amount} />
|
|
</p>
|
|
</div>
|
|
<div className='rounded-[20px] bg-[#EAEAEA] p-4 shadow-sm transition-all duration-300 hover:shadow-md'>
|
|
<p className='flex items-center justify-between text-sm font-light text-[#666] opacity-80 sm:mb-3'>
|
|
<span>{t('commission')}</span>
|
|
<WhithdrawDialog commission={user?.commission} />
|
|
</p>
|
|
<p className='text-xl font-medium text-[#225BA9]'>
|
|
<Display type='currency' value={user?.commission} />
|
|
</p>
|
|
</div>
|
|
<div className='col-span-2 rounded-[20px] border-2 border-[#D9D9D9] p-4 shadow-sm transition-all duration-300 hover:shadow-md sm:col-span-1'>
|
|
<p className='mb-1 flex justify-between text-sm font-light text-[#666] sm:mb-3'>
|
|
<span>{t('referralCode')}</span>
|
|
<Link href='/affiliate' className={'text-[#225BA9]'}>
|
|
{t('referralDetails')}
|
|
</Link>
|
|
</p>
|
|
<p className='flex justify-between text-base font-medium text-[#225BA9]'>
|
|
<span> {user?.refer_code}</span>
|
|
<CopyShortenedLink />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<div className={'hidden sm:block'}>
|
|
<Table />
|
|
</div>
|
|
<div className={'mt-2.5 sm:hidden'}>
|
|
<WalletDialog />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|