use new account modal for first deposit

components/AccountInfo.tsx

@@ -17,6 +17,7 @@ import { ElementTitle } from './styles'
 import Tooltip from './Tooltip'
 import DepositModal from './DepositModal'
 import WithdrawModal from './WithdrawModal'
+import AccountsModal from './AccountsModal'
 import Button from './Button'
 import { DataLoader } from './MarketPosition'
 
@@ -31,9 +32,22 @@ export default function AccountInfo() {
   const marketConfig = useMangoStore((s) => s.selectedMarket.config)
   const actions = useMangoStore((s) => s.actions)
 
+  const [showAccountModal, setShowAccountModal] = useState(false)
   const [showDepositModal, setShowDepositModal] = useState(false)
   const [showWithdrawModal, setShowWithdrawModal] = useState(false)
 
+  const handleOpenDeposit = useCallback(() => {
+    if (mangoAccount) {
+      setShowDepositModal(true)
+    } else {
+      setShowAccountModal(true)
+    }
+  }, [])
+
+  const handleCloseAccount = useCallback(() => {
+    setShowAccountModal(false)
+  }, [])
+
   const handleCloseDeposit = useCallback(() => {
     setShowDepositModal(false)
   }, [])
@@ -283,7 +297,7 @@ export default function AccountInfo() {
           </div>
           <div className={`grid grid-cols-2 grid-rows-1 gap-4 pt-4`}>
             <Button
-              onClick={() => setShowDepositModal(true)}
+              onClick={handleOpenDeposit}
               className="w-full"
               disabled={!connected}
             >
@@ -299,6 +313,9 @@ export default function AccountInfo() {
           </div>
         </div>
       </div>
+      {showAccountModal && (
+        <AccountsModal isOpen={showAccountModal} onClose={handleCloseAccount} />
+      )}
       {showDepositModal && (
         <DepositModal isOpen={showDepositModal} onClose={handleCloseDeposit} />
       )}

components/NewAccount.tsx

@@ -34,6 +34,7 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({
   const [maxButtonTransition, setMaxButtonTransition] = useState(false)
   const [invalidNameMessage, setInvalidNameMessage] = useState('')
   const [name, setName] = useState('')
+  const mangoAccounts = useMangoStore((s) => s.mangoAccounts)
   const walletTokens = useMangoStore((s) => s.wallet.tokens)
   const actions = useMangoStore((s) => s.actions)
 
@@ -139,7 +140,12 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({
 
   return (
     <>
-      <ElementTitle className="pb-2">Create Account</ElementTitle>
+      <ElementTitle>
+        {mangoAccounts.length > 0 ? 'New Account' : 'Deposit Funds'}
+      </ElementTitle>
+      <div className="text-th-fgd-3 text-center pb-4">
+        Add funds to initialize your Mango Account
+      </div>
       <div className="pb-4">
         <div className="flex items-center pb-2 text-th-fgd-1">
           Account Name <span className="ml-1 text-th-fgd-3">(Optional)</span>