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

src/components/Account/AccountNavigation.tsx

@@ -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>
       )}
     </>
   )

src/components/Button.tsx

@@ -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',

src/components/Overlay/Overlay.tsx

@@ -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,
         )}
       >

src/components/Wallet/ConnectedButton.tsx

@@ -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
         >

tailwind.config.js

@@ -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',