@@ -10,7 +10,6 @@ import { walletAddressService } from '@/lib/api/walletAddress'
1010import { useOnboardingContext } from '@/lib/context/onboarding'
1111import { useDialog } from '@/lib/hooks/useDialog'
1212import { NextPageWithLayout } from '@/lib/types/app'
13- import { Link } from '@/ui/Link'
1413import { formatAmount , replaceWalletAddressProtocol } from '@/utils/helpers'
1514import type {
1615 GetServerSideProps ,
@@ -60,88 +59,75 @@ const AccountPage: NextPageWithLayout<AccountPageProps> = ({
6059 return (
6160 < >
6261 < PageHeader title = { account . name } />
63- < div className = "mt-6 items-center text-green" id = "balance" >
64- < h2 className = "text-lg font-light md:text-xl" > Balance</ h2 >
65- < div className = "text-2xl font-semibold md:text-4xl" >
66- { formattedAmount . amount }
67- </ div >
62+ < div className = "mb-6" id = "balance" >
63+ < h2 className = "mb-2 text-xl" > Balance</ h2 >
64+ < div className = "text-3xl font-bold" > { formattedAmount . amount } </ div >
6865 </ div >
69- < div className = "mt-5 flex w-full flex-col space-y-5 md:max-w-md" >
70- < div className = "my-5 flex justify-between space-x-2" >
71- < button
72- id = "walletAddress"
73- onClick = { ( ) => {
74- if ( isUserFirstTime ) {
75- setRunOnboarding ( false )
76- }
77- openDialog (
78- < CreateWalletAddressDialog
79- accountName = { account . name }
80- onClose = { closeDialog }
81- />
82- )
83- } }
84- className = "group flex aspect-square h-24 w-24 flex-col items-center justify-center -space-y-1 rounded-lg border border-green-5 bg-white shadow-md hover:border-green-6"
85- >
86- < New className = "h-9 w-7" />
87- < div className = "-space-y-2 text-[15px]" >
88- < p className = "font-medium text-green-5 group-hover:text-green-6" >
89- Add payment{ ' ' }
90- </ p >
91- < p className = "font-medium text-green-5 group-hover:text-green-6" >
92- pointer
93- </ p >
94- </ div >
95- </ button >
96- < Link
97- id = "fund"
98- onClick = { ( ) => {
99- if ( isUserFirstTime ) {
100- setRunOnboarding ( false )
101- }
102- openDialog (
103- < FundAccountDialog account = { account } onClose = { closeDialog } />
104- )
105- } }
106- className = "group flex aspect-square h-24 w-24 flex-col items-center justify-center rounded-lg border border-green-5 bg-white shadow-md hover:border-green-6"
107- >
108- < Request className = "h-8 w-8" />
109- < span className = "font-medium text-green-5 group-hover:text-green-6" >
110- Add money
111- </ span >
112- </ Link >
113- < Link
114- onClick = { ( ) =>
115- openDialog (
116- < WithdrawFundsDialog account = { account } onClose = { closeDialog } />
117- )
66+ < div className = "my-12 flex gap-8 md:max-w-lg" >
67+ < button
68+ id = "walletAddress"
69+ onClick = { ( ) => {
70+ if ( isUserFirstTime ) {
71+ setRunOnboarding ( false )
11872 }
119- className = "group flex aspect-square h-24 w-24 flex-col items-center justify-center rounded-lg border border-green-5 bg-white shadow-md hover:border-green-6"
120- >
121- < Withdraw className = "h-8 w-8" />
122- < span className = "font-medium text-green-5 group-hover:text-green-6" >
123- Withdraw
124- </ span >
125- </ Link >
126- </ div >
127- < div className = "flex items-center justify-between" >
128- < h3 className = "text-lg font-semibold leading-none text-green" >
129- Payment Pointers
130- </ h3 >
131- </ div >
132- < div className = "flex flex-col" >
133- { walletAddresses . length > 0 ? (
134- < WalletAddressesTable
135- account = { account }
136- walletAddresses = { walletAddresses }
137- />
138- ) : (
139- < div className = "flex items-center justify-center p-4 text-green" >
140- < span > No payment pointers found for this account.</ span >
141- </ div >
142- ) }
143- </ div >
73+ openDialog (
74+ < CreateWalletAddressDialog
75+ accountName = { account . name }
76+ onClose = { closeDialog }
77+ />
78+ )
79+ } }
80+ className = "group flex aspect-square min-w-28 flex-shrink-0 flex-grow-0 basis-1/4 flex-col items-center justify-center rounded-lg border-2 text-center transition-[box-shadow] duration-200 dark:hover:shadow-glow-button dark:focus:shadow-glow-button"
81+ >
82+ < New className = "mb-1 h-8 w-8 transition-[filter] duration-200 group-hover:dark:drop-shadow-glow-svg group-focus:dark:drop-shadow-glow-svg" />
83+ < span className = "text-center text-[smaller] leading-4 underline-offset-2 transition-transform group-hover:scale-110 group-hover:underline group-focus:scale-110 group-focus:underline group-focus:underline-offset-2 dark:group-hover:decoration-transparent" >
84+ Add payment pointer
85+ </ span >
86+ </ button >
87+ < button
88+ id = "fund"
89+ onClick = { ( ) => {
90+ if ( isUserFirstTime ) {
91+ setRunOnboarding ( false )
92+ }
93+ openDialog (
94+ < FundAccountDialog account = { account } onClose = { closeDialog } />
95+ )
96+ } }
97+ className = "group flex aspect-square min-w-28 flex-shrink-0 flex-grow-0 basis-1/4 flex-col items-center justify-center rounded-lg border-2 text-center transition-[box-shadow] duration-200 dark:hover:shadow-glow-button dark:focus:shadow-glow-button"
98+ >
99+ < Request className = "mb-1 h-8 w-8 transition-[filter] duration-200 group-hover:dark:drop-shadow-glow-svg group-focus:dark:drop-shadow-glow-svg" />
100+ < span className = "text-center text-[smaller] leading-4 underline-offset-2 transition-transform group-hover:scale-110 group-hover:underline group-focus:scale-110 group-focus:underline group-focus:underline-offset-2 dark:group-hover:decoration-transparent" >
101+ Add money
102+ </ span >
103+ </ button >
104+ < button
105+ id = "withdraw"
106+ onClick = { ( ) =>
107+ openDialog (
108+ < WithdrawFundsDialog account = { account } onClose = { closeDialog } />
109+ )
110+ }
111+ className = "group flex aspect-square min-w-28 flex-shrink-0 flex-grow-0 basis-1/4 flex-col items-center justify-center rounded-lg border-2 text-center transition-[box-shadow] duration-200 dark:hover:shadow-glow-button dark:focus:shadow-glow-button"
112+ >
113+ < Withdraw className = "mb-1 h-8 w-8 transition-[filter] duration-200 group-hover:dark:drop-shadow-glow-svg group-focus:dark:drop-shadow-glow-svg" />
114+ < span className = "text-center text-[smaller] leading-4 underline-offset-2 transition-transform group-hover:scale-110 group-hover:underline group-focus:scale-110 group-focus:underline group-focus:underline-offset-2 dark:group-hover:decoration-transparent" >
115+ Withdraw
116+ </ span >
117+ </ button >
144118 </ div >
119+ < h2 className = "mb-2 text-2xl font-bold" > Payment Pointers</ h2 >
120+
121+ { walletAddresses . length > 0 ? (
122+ < WalletAddressesTable
123+ account = { account }
124+ walletAddresses = { walletAddresses }
125+ />
126+ ) : (
127+ < div className = "p-4" >
128+ < span > No payment pointers found for this account.</ span >
129+ </ div >
130+ ) }
145131 </ >
146132 )
147133}
0 commit comments