add create account modal

components/Layout.tsx

@@ -5,6 +5,7 @@ import {
   CheckCircleIcon,
   ChevronDownIcon,
   ChevronRightIcon,
+  PlusCircleIcon,
 } from '@heroicons/react/solid'
 import { useViewport } from '../hooks/useViewport'
 import { breakpoints } from '../utils/theme'
@@ -21,6 +22,7 @@ import ConnectedMenu from './wallet/ConnectedMenu'
 import WalletIcon from './icons/WalletIcon'
 import BounceLoader from './shared/BounceLoader'
 import { LinkButton } from './shared/Button'
+import CreateNewAccountModal from './modals/CreateNewAccountModal'
 
 export const IS_ONBOARDED_KEY = 'isOnboarded'
 
@@ -150,67 +152,80 @@ const MangoAccountsList = ({
   mangoAccount: MangoAccount
 }) => {
   const mangoAccounts = mangoStore((s) => s.mangoAccounts)
+  const [showNewAccountModal, setShowNewAccountModal] = useState(false)
   return (
-    <Popover>
-      {({ open }) => (
-        <>
-          <Popover.Button className="flex w-full min-w-[120px] items-center justify-between rounded-none text-th-fgd-1 hover:text-th-primary">
-            <div className="flex items-center">
-              <div className="mr-2 text-left">
-                <p className="font-bold text-th-fgd-1">{mangoAccount.name}</p>
-                <div className="flex items-center">
-                  <HealthHeart
-                    health={mangoAccount
-                      .getHealthRatio(HealthType.init)
-                      .toNumber()}
-                    size={16}
-                  />
-                  <p className="ml-1 text-xs leading-none">
-                    {mangoAccount.getHealthRatio(HealthType.init).toNumber()}%
-                  </p>
+    <>
+      <Popover>
+        {({ open }) => (
+          <>
+            <Popover.Button className="flex w-full min-w-[120px] items-center justify-between rounded-none text-th-fgd-1 hover:text-th-primary">
+              <div className="flex items-center">
+                <div className="mr-2 text-left">
+                  <p className="font-bold text-th-fgd-1">{mangoAccount.name}</p>
+                  <div className="flex items-center">
+                    <HealthHeart
+                      health={mangoAccount
+                        .getHealthRatio(HealthType.init)
+                        .toNumber()}
+                      size={16}
+                    />
+                    <p className="ml-1 text-xs leading-none">
+                      {mangoAccount.getHealthRatio(HealthType.init).toNumber()}%
+                    </p>
+                  </div>
                 </div>
               </div>
-            </div>
-            <ChevronDownIcon
-              className={`${
-                open ? 'rotate-180 transform' : 'rotate-360 transform'
-              } mt-0.5 ml-3 h-6 w-6 flex-shrink-0 text-th-fgd-3`}
-            />
-          </Popover.Button>
-          <Transition
-            appear={true}
-            show={open}
-            as={Fragment}
-            enter="transition-all ease-in duration-200"
-            enterFrom="opacity-0 transform scale-75"
-            enterTo="opacity-100 transform scale-100"
-            leave="transition ease-out duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <Popover.Panel className="absolute top-[63px] z-10 mr-4 w-56 rounded-md rounded-t-none border border-th-bkg-3 bg-th-bkg-1 p-4">
-              {mangoAccounts.length ? (
-                mangoAccounts.map((acc) => (
-                  <div key={acc.publicKey.toString()}>
-                    <button className="mb-3 flex w-full items-center justify-between border-b border-th-bkg-3 pb-3">
-                      {acc.name}
-                      {acc.publicKey.toString() ===
-                      mangoAccount.publicKey.toString() ? (
-                        <CheckCircleIcon className="h-5 w-5 text-th-green" />
-                      ) : null}
-                    </button>
-                    <LinkButton className="w-full text-center">
-                      New Account
-                    </LinkButton>
-                  </div>
-                ))
-              ) : (
-                <p>Loading...</p>
-              )}
-            </Popover.Panel>
-          </Transition>
-        </>
-      )}
-    </Popover>
+              <ChevronDownIcon
+                className={`${
+                  open ? 'rotate-180 transform' : 'rotate-360 transform'
+                } mt-0.5 ml-3 h-6 w-6 flex-shrink-0 text-th-fgd-3`}
+              />
+            </Popover.Button>
+            <Transition
+              appear={true}
+              show={open}
+              as={Fragment}
+              enter="transition-all ease-in duration-200"
+              enterFrom="opacity-0 transform scale-75"
+              enterTo="opacity-100 transform scale-100"
+              leave="transition ease-out duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Popover.Panel className="absolute top-[63px] z-10 mr-4 w-56 rounded-md rounded-t-none border border-th-bkg-3 bg-th-bkg-1 p-4">
+                {mangoAccounts.length ? (
+                  mangoAccounts.map((acc) => (
+                    <div key={acc.publicKey.toString()}>
+                      <button className="mb-3 flex w-full items-center justify-between border-b border-th-bkg-3 pb-3">
+                        {acc.name}
+                        {acc.publicKey.toString() ===
+                        mangoAccount.publicKey.toString() ? (
+                          <CheckCircleIcon className="h-5 w-5 text-th-green" />
+                        ) : null}
+                      </button>
+                      <LinkButton
+                        className="w-full justify-center"
+                        icon={<PlusCircleIcon className="h-5 w-5" />}
+                        onClick={() => setShowNewAccountModal(true)}
+                      >
+                        New Account
+                      </LinkButton>
+                    </div>
+                  ))
+                ) : (
+                  <p>Loading...</p>
+                )}
+              </Popover.Panel>
+            </Transition>
+          </>
+        )}
+      </Popover>
+      {showNewAccountModal ? (
+        <CreateNewAccountModal
+          isOpen={showNewAccountModal}
+          onClose={() => setShowNewAccountModal(false)}
+        />
+      ) : null}
+    </>
   )
 }

components/modals/AccountNameModal.tsx

@@ -27,7 +27,7 @@ const AccountNameModal = ({ isOpen, onClose }: ModalProps) => {
         setLoading(false)
         onClose()
         notify({
-          title: t('account-updated'),
+          title: t('account-update-success'),
           type: 'success',
           txid: tx,
         })

components/modals/CreateNewAccountModal.tsx

@@ -0,0 +1,76 @@
+import { ModalProps } from '../../types/modal'
+import Modal from '../shared/Modal'
+import mangoStore from '../../store/state'
+import { notify } from '../../utils/notifications'
+import Button from '../shared/Button'
+import { useTranslation } from 'next-i18next'
+import { ChangeEvent, useState } from 'react'
+import BounceLoader from '../shared/BounceLoader'
+import Input from '../forms/Input'
+import Label from '../forms/Label'
+
+const CreateNewAccountModal = ({ isOpen, onClose }: ModalProps) => {
+  const { t } = useTranslation('common')
+  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const [loading, setLoading] = useState(false)
+  const [name, setName] = useState(mangoAccount?.name || '')
+
+  // This doesn't work yet...
+  const handleNewAccount = async () => {
+    const client = mangoStore.getState().client
+    const group = mangoStore.getState().group
+    if (!mangoAccount || !group) return
+    setLoading(true)
+    try {
+      const tx = await client.createMangoAccount(group, 0, name)
+      if (tx) {
+        setLoading(false)
+        onClose()
+        notify({
+          title: t('new-account-success'),
+          type: 'success',
+          txid: tx,
+        })
+      }
+    } catch (e) {
+      setLoading(false)
+      notify({
+        title: t('new-account-failed'),
+        type: 'error',
+      })
+      console.log(e)
+    }
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className="h-64">
+        {loading ? (
+          <BounceLoader loadingMessage={t('creating-account')} />
+        ) : (
+          <div className="flex h-full flex-col justify-between">
+            <div className="pb-4">
+              <h2 className="mb-4">{t('new-account')}</h2>
+              <Label optional text={t('account-name')} />
+              <Input
+                type="text"
+                name="name"
+                id="name"
+                placeholder="0.00"
+                value={name}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  setName(e.target.value)
+                }
+              />
+            </div>
+            <Button className="w-full" onClick={handleNewAccount} size="large">
+              {t('create-account')}
+            </Button>
+          </div>
+        )}
+      </div>
+    </Modal>
+  )
+}
+
+export default CreateNewAccountModal

components/shared/Button.tsx

@@ -108,7 +108,7 @@ export const LinkButton: FunctionComponent<LinkButtonCombinedProps> = ({
       {...props}
     >
       {icon}
-      <span className="ml-2">{children}</span>
+      <span className={icon ? 'ml-2' : ''}>{children}</span>
     </button>
   )
 }

public/locales/en/common.json

@@ -2,6 +2,8 @@
   "account-closed": "Account Closed 👋",
   "account-name": "Account Name",
   "account-name-desc": "Organize your accounts by giving them useful names",
+  "account-update-failed": "Failed to update account",
+  "account-update-success": "Account updated successfully",
   "account-value": "Account Value",
   "available": "Available",
   "available-balance": "Available Balance",
@@ -19,6 +21,7 @@
   "collateral-value": "Collateral Value",
   "connect": "Connect",
   "connect-helper": "Connect to get started",
+  "create-account": "Create Account",
   "daily-volume": "24h Volume",
   "deposit": "Deposit",
   "deposit-value": "Deposit Value",
@@ -36,6 +39,9 @@
   "margin": "Margin",
   "max": "Max",
   "more": "More",
+  "new-account": "New Account",
+  "new-account-failed": "Failed to create account",
+  "new-account-success": "Your new account is ready 😎",
   "portfolio": "Portfolio",
   "price": "Price",
   "rate": "Rate (APR)",

public/locales/es/common.json

@@ -2,6 +2,8 @@
   "account-closed": "Account Closed 👋",
   "account-name": "Account Name",
   "account-name-desc": "Organize your accounts by giving them useful names",
+  "account-update-failed": "Failed to update account",
+  "account-update-success": "Account updated successfully",
   "account-value": "Account Value",
   "available": "Available",
   "available-balance": "Available Balance",
@@ -19,6 +21,7 @@
   "collateral-value": "Collateral Value",
   "connect": "Connect",
   "connect-helper": "Connect to get started",
+  "create-account": "Create Account",
   "daily-volume": "24h Volume",
   "deposit": "Deposit",
   "deposit-value": "Deposit Value",
@@ -36,6 +39,9 @@
   "margin": "Margin",
   "max": "Max",
   "more": "More",
+  "new-account": "New Account",
+  "new-account-failed": "Failed to create account",
+  "new-account-success": "Your new account is ready 😎",
   "portfolio": "Portfolio",
   "price": "Price",
   "rate": "Rate (APR)",

public/locales/zh/common.json

@@ -2,6 +2,8 @@
   "account-closed": "Account Closed 👋",
   "account-name": "Account Name",
   "account-name-desc": "Organize your accounts by giving them useful names",
+  "account-update-failed": "Failed to update account",
+  "account-update-success": "Account updated successfully",
   "account-value": "Account Value",
   "available": "Available",
   "available-balance": "Available Balance",
@@ -19,6 +21,7 @@
   "collateral-value": "Collateral Value",
   "connect": "Connect",
   "connect-helper": "Connect to get started",
+  "create-account": "Create Account",
   "daily-volume": "24h Volume",
   "deposit": "Deposit",
   "deposit-value": "Deposit Value",
@@ -36,6 +39,9 @@
   "margin": "Margin",
   "max": "Max",
   "more": "More",
+  "new-account": "New Account",
+  "new-account-failed": "Failed to create account",
+  "new-account-success": "Your new account is ready 😎",
   "portfolio": "Portfolio",
   "price": "Price",
   "rate": "Rate (APR)",

public/locales/zh_tw/common.json

@@ -2,6 +2,8 @@
   "account-closed": "Account Closed 👋",
   "account-name": "Account Name",
   "account-name-desc": "Organize your accounts by giving them useful names",
+  "account-update-failed": "Failed to update account",
+  "account-update-success": "Account updated successfully",
   "account-value": "Account Value",
   "available": "Available",
   "available-balance": "Available Balance",
@@ -19,6 +21,7 @@
   "collateral-value": "Collateral Value",
   "connect": "Connect",
   "connect-helper": "Connect to get started",
+  "create-account": "Create Account",
   "daily-volume": "24h Volume",
   "deposit": "Deposit",
   "deposit-value": "Deposit Value",
@@ -36,6 +39,9 @@
   "margin": "Margin",
   "max": "Max",
   "more": "More",
+  "new-account": "New Account",
+  "new-account-failed": "Failed to create account",
+  "new-account-success": "Your new account is ready 😎",
   "portfolio": "Portfolio",
   "price": "Price",
   "rate": "Rate (APR)",