LaconicNetwork/mars-v2-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: created the create account flow (#136)

Browse Source 
* feat: created the create account flow

* fix: right not left

* fix: updated the styles and removed images

* tidy: refactor
This commit is contained in:
Linkie Link 2023-03-24 11:45:43 +01:00 committed by GitHub
parent f1ff3e88d4
commit 69da882fa0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 142 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/account.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
public/images/account.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
public/images/create-account-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 150 KiB

BIN
public/images/create-account-bg.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.4 KiB

BIN
public/images/delete-account-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 164 KiB

BIN
public/images/delete-account-bg.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.4 KiB

BIN
public/images/fund-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 76 KiB

BIN
public/images/fund-bg.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.5 KiB

245
src/components/Account/AccountNavigation.tsx
View File

@ -1,5 +1,6 @@
'use client' 'use client'
import classNames from 'classnames'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { useState } from 'react' import { useState } from 'react'
@ -34,8 +35,13 @@ export const AccountNavigation = () => {
const [showMenu, setShowMenu] = useState(false) const [showMenu, setShowMenu] = useState(false)
const [createAccount, setCreateAccount] = useState(false)
async function createAccountHandler() { async function createAccountHandler() {
setShowMenu(true)
setCreateAccount(true)
const accountId = await createCreditAccount({ fee: hardcodedFee }) const accountId = await createCreditAccount({ fee: hardcodedFee })
setCreateAccount(false)
if (!accountId) return if (!accountId) return
router.push(`/wallets/${params.wallet}/accounts/${accountId}`) router.push(`/wallets/${params.wallet}/accounts/${accountId}`)
} }
@ -53,115 +59,136 @@ export const AccountNavigation = () => {
{creditAccounts === null ? ( {creditAccounts === null ? (
<Loading className='h-8 w-35' /> <Loading className='h-8 w-35' />
) : ( ) : (
<> <div className='relative'>
{' '} <Button
{hasCreditAccounts ? ( onClick={hasCreditAccounts ? () => setShowMenu(!showMenu) : createAccountHandler}
<div className='relative'> leftIcon={hasCreditAccounts ? <Account /> : <Add />}
<Button color={hasCreditAccounts ? 'tertiary' : 'primary'}
variant='solid' hasFocus={showMenu}
color='tertiary' hasSubmenu={hasCreditAccounts}
className='flex flex-1 flex-nowrap' >
leftIcon={<Account />} {hasCreditAccounts
onClick={() => setShowMenu(!showMenu)} ? accountSelected
hasFocus={showMenu} ? `Account ${selectedAccount}`
hasSubmenu : 'Select Account'
> : 'Create Account'}
<span>{accountSelected ? `Account ${selectedAccount}` : 'Select Account'}</span> </Button>
</Button> <Overlay
<Overlay className='left-0 mt-2 w-[274px]' show={showMenu} setShow={setShowMenu}> className={classNames(
{accountSelected && ( 'max-w-screen right-0 mt-2 flex h-[530px] w-[336px] flex-wrap overflow-y-scroll scrollbar-hide',
<div className='flex w-full flex-wrap'> hasCreditAccounts ? 'items-start' : 'items-end',
<Text size='sm' uppercase={true} className='w-full px-4 pt-4'> )}
Manage Account {selectedAccount} show={showMenu}
</Text> setShow={setShowMenu}
<div className='flex w-full justify-between p-4'> >
<Button <div className='absolute inset-0 z-1 h-full w-full bg-account' />
className='flex w-[115px] items-center justify-center pl-0 pr-2' {!hasCreditAccounts && (
text='Fund' <div className='relative z-10 w-full p-4'>
leftIcon={<ArrowUpLine />} <Text size='lg' className='font-bold'>
onClick={() => { Create Credit Account
useStore.setState({ fundAccountModal: true }) </Text>
setShowMenu(false) <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
<Button vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
className='flex w-[115px] items-center justify-center pl-0 pr-2' no sea takimata sanctus est Lorem ipsum dolor sit amet.
color='secondary' </Text>
leftIcon={<ArrowDownLine />} <Button
text='Withdraw' className='w-full'
onClick={() => { showProgressIndicator={createAccount}
useStore.setState({ withdrawModal: true }) disabled={createAccount}
setShowMenu(false) text='Create Account'
}} onClick={createAccountHandler}
/> />
</div> </div>
<div className='flex w-full flex-wrap border-t border-t-white/10 p-4'> )}
<Button {accountSelected && (
className='w-full whitespace-nowrap py-2' <div className='flex w-full flex-wrap'>
variant='transparent' <Text size='sm' uppercase={true} className='w-full px-4 pt-4'>
color='quaternary' Manage Account {selectedAccount}
text='Create New Account' </Text>
onClick={() => { <div className='flex w-full justify-between p-4'>
setShowMenu(false) <Button
createAccountHandler() className='flex w-[115px] items-center justify-center pl-0 pr-2'
}} text='Fund'
leftIcon={<Add />} leftIcon={<ArrowUpLine />}
/> onClick={() => {
<Button useStore.setState({ fundAccountModal: true })
className='w-full whitespace-nowrap py-2' setShowMenu(false)
variant='transparent' }}
color='quaternary' />
text='Close Account' <Button
onClick={() => { className='flex w-[115px] items-center justify-center pl-0 pr-2'
setShowMenu(false) color='secondary'
deleteAccountHandler() leftIcon={<ArrowDownLine />}
}} text='Withdraw'
leftIcon={<Rubbish />} onClick={() => {
/> useStore.setState({ withdrawModal: true })
<Button setShowMenu(false)
className='w-full whitespace-nowrap py-2' }}
variant='transparent' />
color='quaternary' </div>
text='Transfer Balance' <div className='flex w-full flex-wrap border-t border-t-white/10 p-4'>
onClick={() => { <Button
setShowMenu(false) className='w-full whitespace-nowrap py-2'
/* TODO: add Transfer Balance Function */ variant='transparent'
}} color='quaternary'
leftIcon={<ArrowsLeftRight />} text='Create New Account'
/> onClick={() => {
</div> setShowMenu(false)
</div> createAccountHandler()
)} }}
{creditAccounts.length > 1 && ( leftIcon={<Add />}
<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'> <Button
Select Account className='w-full whitespace-nowrap py-2'
</Text> variant='transparent'
{creditAccounts.map((account) => color='quaternary'
selectedAccount === account ? null : ( text='Close Account'
<Button onClick={() => {
key={account} setShowMenu(false)
className='w-full whitespace-nowrap py-2' deleteAccountHandler()
variant='transparent' }}
color='quaternary' leftIcon={<Rubbish />}
onClick={() => { />
router.push(`/wallets/${params.wallet}/accounts/${account}`) <Button
setShowMenu(!showMenu) className='w-full whitespace-nowrap py-2'
}} variant='transparent'
text={`Account ${account}`} color='quaternary'
/> text='Transfer Balance'
), onClick={() => {
)} setShowMenu(false)
</div> /* TODO: add Transfer Balance Function */
)} }}
</Overlay> leftIcon={<ArrowsLeftRight />}
</div> />
) : ( </div>
<Button onClick={createAccountHandler} leftIcon={<Add />} color='tertiary'> </div>
Create Account )}
</Button> {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>
)} )}
</> </>
) )

3
src/components/Button.tsx
View File

@ -24,7 +24,8 @@ interface Props {
} }
export const buttonColorClasses = { 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: secondary:
'border border-white/30 bg-transparent hover:bg-white/20 active:bg-white/40 focus:bg-white/20', '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', tertiary: 'bg-white/10 hover:bg-white/20 active:bg-white/40 focus:bg-white/20',

3
src/components/Overlay/Overlay.tsx
View File

@ -18,7 +18,8 @@ export const Overlay = ({ children, content, className, show, setShow }: Props)
<> <>
<div <div
className={classNames( 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, className,
)} )}
> >

2
src/components/Wallet/ConnectedButton.tsx
View File

@ -74,7 +74,7 @@ export default function ConnectedButton() {
<div className={'relative'}> <div className={'relative'}>
{network?.chainId !== ChainInfoID.Osmosis1 && ( {network?.chainId !== ChainInfoID.Osmosis1 && (
<Text <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' size='3xs'
uppercase uppercase
> >

4
tailwind.config.js
View File

@ -44,9 +44,7 @@ module.exports = {
sticky: '50px', sticky: '50px',
}, },
backgroundImage: { backgroundImage: {
'fund-modal': 'url(/images/fund-bg.webp), url(/images/fund-bg.png)', account: 'url(/images/account.webp), url(/images/account.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)',
}, },
backgroundSize: { backgroundSize: {
desktop: '100% auto', desktop: '100% auto',