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,7 +152,9 @@ const MangoAccountsList = ({
   mangoAccount: MangoAccount
 }) => {
   const mangoAccounts = mangoStore((s) => s.mangoAccounts)
+  const [showNewAccountModal, setShowNewAccountModal] = useState(false)
   return (
+    <>
       <Popover>
         {({ open }) => (
           <>
@@ -199,7 +203,11 @@ const MangoAccountsList = ({
                           <CheckCircleIcon className="h-5 w-5 text-th-green" />
                         ) : null}
                       </button>
-                    <LinkButton className="w-full text-center">
+                      <LinkButton
+                        className="w-full justify-center"
+                        icon={<PlusCircleIcon className="h-5 w-5" />}
+                        onClick={() => setShowNewAccountModal(true)}
+                      >
                         New Account
                       </LinkButton>
                     </div>
@@ -212,5 +220,12 @@ const MangoAccountsList = ({
           </>
         )}
       </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)",