feat: created the create account flow (#136)
* feat: created the create account flow * fix: right not left * fix: updated the styles and removed images * tidy: refactor
BIN
public/images/account.png
Normal file
After Width: | Height: | Size: 61 KiB |
BIN
public/images/account.webp
Normal file
After Width: | Height: | Size: 7.9 KiB |
Before Width: | Height: | Size: 150 KiB |
Before Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 164 KiB |
Before Width: | Height: | Size: 6.4 KiB |
Before Width: | Height: | Size: 76 KiB |
Before Width: | Height: | Size: 4.5 KiB |
@ -1,5 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import classNames from 'classnames'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useState } from 'react'
|
||||
|
||||
@ -34,8 +35,13 @@ export const AccountNavigation = () => {
|
||||
|
||||
const [showMenu, setShowMenu] = useState(false)
|
||||
|
||||
const [createAccount, setCreateAccount] = useState(false)
|
||||
|
||||
async function createAccountHandler() {
|
||||
setShowMenu(true)
|
||||
setCreateAccount(true)
|
||||
const accountId = await createCreditAccount({ fee: hardcodedFee })
|
||||
setCreateAccount(false)
|
||||
if (!accountId) return
|
||||
router.push(`/wallets/${params.wallet}/accounts/${accountId}`)
|
||||
}
|
||||
@ -53,115 +59,136 @@ export const AccountNavigation = () => {
|
||||
{creditAccounts === null ? (
|
||||
<Loading className='h-8 w-35' />
|
||||
) : (
|
||||
<>
|
||||
{' '}
|
||||
{hasCreditAccounts ? (
|
||||
<div className='relative'>
|
||||
<Button
|
||||
variant='solid'
|
||||
color='tertiary'
|
||||
className='flex flex-1 flex-nowrap'
|
||||
leftIcon={<Account />}
|
||||
onClick={() => setShowMenu(!showMenu)}
|
||||
hasFocus={showMenu}
|
||||
hasSubmenu
|
||||
>
|
||||
<span>{accountSelected ? `Account ${selectedAccount}` : 'Select Account'}</span>
|
||||
</Button>
|
||||
<Overlay className='left-0 mt-2 w-[274px]' show={showMenu} setShow={setShowMenu}>
|
||||
{accountSelected && (
|
||||
<div className='flex w-full flex-wrap'>
|
||||
<Text size='sm' uppercase={true} className='w-full px-4 pt-4'>
|
||||
Manage Account {selectedAccount}
|
||||
</Text>
|
||||
<div className='flex w-full justify-between p-4'>
|
||||
<Button
|
||||
className='flex w-[115px] items-center justify-center pl-0 pr-2'
|
||||
text='Fund'
|
||||
leftIcon={<ArrowUpLine />}
|
||||
onClick={() => {
|
||||
useStore.setState({ fundAccountModal: true })
|
||||
setShowMenu(false)
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
className='flex w-[115px] items-center justify-center pl-0 pr-2'
|
||||
color='secondary'
|
||||
leftIcon={<ArrowDownLine />}
|
||||
text='Withdraw'
|
||||
onClick={() => {
|
||||
useStore.setState({ withdrawModal: true })
|
||||
setShowMenu(false)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex w-full flex-wrap border-t border-t-white/10 p-4'>
|
||||
<Button
|
||||
className='w-full whitespace-nowrap py-2'
|
||||
variant='transparent'
|
||||
color='quaternary'
|
||||
text='Create New Account'
|
||||
onClick={() => {
|
||||
setShowMenu(false)
|
||||
createAccountHandler()
|
||||
}}
|
||||
leftIcon={<Add />}
|
||||
/>
|
||||
<Button
|
||||
className='w-full whitespace-nowrap py-2'
|
||||
variant='transparent'
|
||||
color='quaternary'
|
||||
text='Close Account'
|
||||
onClick={() => {
|
||||
setShowMenu(false)
|
||||
deleteAccountHandler()
|
||||
}}
|
||||
leftIcon={<Rubbish />}
|
||||
/>
|
||||
<Button
|
||||
className='w-full whitespace-nowrap py-2'
|
||||
variant='transparent'
|
||||
color='quaternary'
|
||||
text='Transfer Balance'
|
||||
onClick={() => {
|
||||
setShowMenu(false)
|
||||
/* TODO: add Transfer Balance Function */
|
||||
}}
|
||||
leftIcon={<ArrowsLeftRight />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{creditAccounts.length > 1 && (
|
||||
<div className='flex w-full flex-wrap border-t border-t-white/10 p-4'>
|
||||
<Text size='sm' uppercase={true} className='w-full pb-2'>
|
||||
Select Account
|
||||
</Text>
|
||||
{creditAccounts.map((account) =>
|
||||
selectedAccount === account ? null : (
|
||||
<Button
|
||||
key={account}
|
||||
className='w-full whitespace-nowrap py-2'
|
||||
variant='transparent'
|
||||
color='quaternary'
|
||||
onClick={() => {
|
||||
router.push(`/wallets/${params.wallet}/accounts/${account}`)
|
||||
setShowMenu(!showMenu)
|
||||
}}
|
||||
text={`Account ${account}`}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Overlay>
|
||||
</div>
|
||||
) : (
|
||||
<Button onClick={createAccountHandler} leftIcon={<Add />} color='tertiary'>
|
||||
Create Account
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
<div className='relative'>
|
||||
<Button
|
||||
onClick={hasCreditAccounts ? () => setShowMenu(!showMenu) : createAccountHandler}
|
||||
leftIcon={hasCreditAccounts ? <Account /> : <Add />}
|
||||
color={hasCreditAccounts ? 'tertiary' : 'primary'}
|
||||
hasFocus={showMenu}
|
||||
hasSubmenu={hasCreditAccounts}
|
||||
>
|
||||
{hasCreditAccounts
|
||||
? accountSelected
|
||||
? `Account ${selectedAccount}`
|
||||
: 'Select Account'
|
||||
: 'Create Account'}
|
||||
</Button>
|
||||
<Overlay
|
||||
className={classNames(
|
||||
'max-w-screen right-0 mt-2 flex h-[530px] w-[336px] flex-wrap overflow-y-scroll scrollbar-hide',
|
||||
hasCreditAccounts ? 'items-start' : 'items-end',
|
||||
)}
|
||||
show={showMenu}
|
||||
setShow={setShowMenu}
|
||||
>
|
||||
<div className='absolute inset-0 z-1 h-full w-full bg-account' />
|
||||
{!hasCreditAccounts && (
|
||||
<div className='relative z-10 w-full p-4'>
|
||||
<Text size='lg' className='font-bold'>
|
||||
Create Credit Account
|
||||
</Text>
|
||||
<Text className='mb-4 text-white/70'>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
||||
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
|
||||
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
|
||||
no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</Text>
|
||||
<Button
|
||||
className='w-full'
|
||||
showProgressIndicator={createAccount}
|
||||
disabled={createAccount}
|
||||
text='Create Account'
|
||||
onClick={createAccountHandler}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{accountSelected && (
|
||||
<div className='flex w-full flex-wrap'>
|
||||
<Text size='sm' uppercase={true} className='w-full px-4 pt-4'>
|
||||
Manage Account {selectedAccount}
|
||||
</Text>
|
||||
<div className='flex w-full justify-between p-4'>
|
||||
<Button
|
||||
className='flex w-[115px] items-center justify-center pl-0 pr-2'
|
||||
text='Fund'
|
||||
leftIcon={<ArrowUpLine />}
|
||||
onClick={() => {
|
||||
useStore.setState({ fundAccountModal: true })
|
||||
setShowMenu(false)
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
className='flex w-[115px] items-center justify-center pl-0 pr-2'
|
||||
color='secondary'
|
||||
leftIcon={<ArrowDownLine />}
|
||||
text='Withdraw'
|
||||
onClick={() => {
|
||||
useStore.setState({ withdrawModal: true })
|
||||
setShowMenu(false)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex w-full flex-wrap border-t border-t-white/10 p-4'>
|
||||
<Button
|
||||
className='w-full whitespace-nowrap py-2'
|
||||
variant='transparent'
|
||||
color='quaternary'
|
||||
text='Create New Account'
|
||||
onClick={() => {
|
||||
setShowMenu(false)
|
||||
createAccountHandler()
|
||||
}}
|
||||
leftIcon={<Add />}
|
||||
/>
|
||||
<Button
|
||||
className='w-full whitespace-nowrap py-2'
|
||||
variant='transparent'
|
||||
color='quaternary'
|
||||
text='Close Account'
|
||||
onClick={() => {
|
||||
setShowMenu(false)
|
||||
deleteAccountHandler()
|
||||
}}
|
||||
leftIcon={<Rubbish />}
|
||||
/>
|
||||
<Button
|
||||
className='w-full whitespace-nowrap py-2'
|
||||
variant='transparent'
|
||||
color='quaternary'
|
||||
text='Transfer Balance'
|
||||
onClick={() => {
|
||||
setShowMenu(false)
|
||||
/* TODO: add Transfer Balance Function */
|
||||
}}
|
||||
leftIcon={<ArrowsLeftRight />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{creditAccounts.length > 1 && (
|
||||
<div className='flex w-full flex-wrap border-t border-t-white/10 p-4'>
|
||||
<Text size='sm' uppercase={true} className='w-full pb-2'>
|
||||
Select Account
|
||||
</Text>
|
||||
{creditAccounts.map((account) => {
|
||||
return selectedAccount === account ? null : (
|
||||
<Button
|
||||
key={account}
|
||||
className='w-full whitespace-nowrap py-2'
|
||||
variant='transparent'
|
||||
color='quaternary'
|
||||
onClick={() => {
|
||||
router.push(`/wallets/${params.wallet}/accounts/${account}`)
|
||||
setShowMenu(!showMenu)
|
||||
}}
|
||||
text={`Account ${account}`}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</Overlay>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
@ -24,7 +24,8 @@ interface Props {
|
||||
}
|
||||
|
||||
export const buttonColorClasses = {
|
||||
primary: 'gradient-primary-to-secondary hover:bg-white/20 active:bg-white/40 focus:bg-white/20',
|
||||
primary:
|
||||
'font-bold gradient-primary-to-secondary hover:bg-white/20 active:bg-white/40 focus:bg-white/20',
|
||||
secondary:
|
||||
'border border-white/30 bg-transparent hover:bg-white/20 active:bg-white/40 focus:bg-white/20',
|
||||
tertiary: 'bg-white/10 hover:bg-white/20 active:bg-white/40 focus:bg-white/20',
|
||||
|
@ -18,7 +18,8 @@ export const Overlay = ({ children, content, className, show, setShow }: Props)
|
||||
<>
|
||||
<div
|
||||
className={classNames(
|
||||
'max-w-screen absolute z-50 rounded-sm border border-white/40 shadow-overlay backdrop-blur-sm gradient-popover',
|
||||
'max-w-screen absolute z-50 rounded-sm shadow-overlay backdrop-blur-lg gradient-popover',
|
||||
'before:content-[" "] before:absolute before:inset-0 before:z-[-1] before:rounded-sm before:p-[1px] before:border-glas',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
|
@ -74,7 +74,7 @@ export default function ConnectedButton() {
|
||||
<div className={'relative'}>
|
||||
{network?.chainId !== ChainInfoID.Osmosis1 && (
|
||||
<Text
|
||||
className='absolute -right-2 -top-2.5 z-10 rounded-lg p-0.5 px-2 gradient-primary-to-secondary'
|
||||
className='absolute -right-2 -top-2.5 z-10 rounded-sm p-0.5 px-2 gradient-primary-to-secondary'
|
||||
size='3xs'
|
||||
uppercase
|
||||
>
|
||||
|
@ -44,9 +44,7 @@ module.exports = {
|
||||
sticky: '50px',
|
||||
},
|
||||
backgroundImage: {
|
||||
'fund-modal': 'url(/images/fund-bg.webp), url(/images/fund-bg.png)',
|
||||
'delete-modal': 'url(/images/delete-account-bg.webp), url(/images/delete-account-bg.png)',
|
||||
'create-modal': 'url(/images/create-account-bg.webp), url(/images/create-account-bg.png)',
|
||||
account: 'url(/images/account.webp), url(/images/account.png)',
|
||||
},
|
||||
backgroundSize: {
|
||||
desktop: '100% auto',
|
||||
|