improve no account flow

components/IntroTips.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Steps } from 'intro.js-react'
 import { withTranslation } from 'react-i18next'
 import { MangoAccount } from '@blockworks-foundation/mango-client'
-import DepositModal from './DepositModal'
+import AccountsModal from './AccountsModal'
 
 export const SHOW_TOUR_KEY = 'showTour'
 
@@ -16,7 +16,7 @@ interface State {
   steps: any
   stepsEnabled: boolean
   initialStep: number
-  showDeposit: boolean
+  showCreateAccount: boolean
 }
 
 class IntroTips extends Component<Props, State> {
@@ -24,7 +24,7 @@ class IntroTips extends Component<Props, State> {
   constructor(props) {
     super(props)
     this.state = {
-      showDeposit: false,
+      showCreateAccount: false,
       stepsEnabled: true,
       initialStep: 0,
       steps: [
@@ -163,14 +163,14 @@ class IntroTips extends Component<Props, State> {
   }
 
   closeCreateAccountModal = () => {
-    this.setState({ showDeposit: false })
+    this.setState({ showCreateAccount: false })
   }
 
   handleEndTour = () => {
     localStorage.setItem('showTour', 'false')
     this.setState({ stepsEnabled: false })
     if (!this.props.mangoAccount) {
-      this.setState({ showDeposit: true })
+      this.setState({ showCreateAccount: true })
     }
   }
 
@@ -192,7 +192,7 @@ class IntroTips extends Component<Props, State> {
   }
 
   render() {
-    const { initialStep, showDeposit, stepsEnabled, steps } = this.state
+    const { initialStep, showCreateAccount, stepsEnabled, steps } = this.state
 
     return (
       <>
@@ -214,9 +214,9 @@ class IntroTips extends Component<Props, State> {
           }}
           ref={(steps) => (this.steps = steps)}
         />
-        {showDeposit ? (
-          <DepositModal
-            isOpen={showDeposit}
+        {showCreateAccount ? (
+          <AccountsModal
+            isOpen={showCreateAccount}
             onClose={this.closeCreateAccountModal}
           />
         ) : null}

components/NewAccount.tsx

@@ -139,14 +139,16 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({
     <>
       <Modal.Header>
         <ElementTitle noMarginBottom>{t('create-account')}</ElementTitle>
-        <p className="mt-1 text-center">{t('insufficient-sol')}</p>
+        <div className="my-2">
+          <InlineNotification type="info" desc={t('insufficient-sol')} />
+        </div>
       </Modal.Header>
       <div className="mb-4 border-b border-th-bkg-4 pb-6">
         <Label className="flex items-center">
           {t('account-name')}{' '}
           <span className="ml-1 text-th-fgd-3">{t('optional')}</span>
           <Tooltip content={t('tooltip-name-onchain')}>
-            <InformationCircleIcon className="ml-2 h-5 w-5 text-th-primary" />
+            <InformationCircleIcon className="ml-2 h-5 w-5 text-th-fgd-3" />
           </Tooltip>
         </Label>
         <Input
@@ -164,7 +166,7 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({
           </div>
         ) : null}
       </div>
-      <h3 className="mb-2 text-center">{t('initial-deposit')}</h3>
+      <h3 className="mb-1 text-center">{t('initial-deposit')}</h3>
       <AccountSelect
         accounts={walletTokens}
         selectedAccount={selectedAccount}
@@ -210,9 +212,6 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({
           </div>
         </Button>
       </div>
-      <div className="pt-3">
-        <InlineNotification desc={t('interest-info')} type="info" />
-      </div>
     </>
   )
 }

components/TopBar.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import Link from 'next/link'
 import { abbreviateAddress } from '../utils/index'
 import useLocalStorageState from '../hooks/useLocalStorageState'
@@ -29,9 +29,12 @@ import { useWallet } from '@solana/wallet-adapter-react'
 
 const TopBar = () => {
   const { t } = useTranslation('common')
-  const { publicKey } = useWallet()
+  const { connected, publicKey } = useWallet()
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
+  const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const cluster = useMangoStore((s) => s.connection.cluster)
+  const mangoClient = useMangoStore((s) => s.connection.client)
+  const [numberOfAccounts, setNumberOfAccounts] = useState<number | null>(null)
   const [showAccountsModal, setShowAccountsModal] = useState(false)
   const [defaultMarket] = useLocalStorageState(
     DEFAULT_MARKET_KEY,
@@ -39,6 +42,19 @@ const TopBar = () => {
   )
   const isDevnet = cluster === 'devnet'
 
+  useEffect(() => {
+    if (mangoAccount && mangoGroup && publicKey) {
+      const getMangoAccounts = async () => {
+        const mangoAccounts = await mangoClient.getMangoAccountsForOwner(
+          mangoGroup,
+          publicKey
+        )
+        setNumberOfAccounts(mangoAccounts.length)
+      }
+      getMangoAccounts()
+    }
+  }, [mangoAccount, mangoGroup, publicKey])
+
   const handleCloseAccounts = useCallback(() => {
     setShowAccountsModal(false)
   }, [])
@@ -143,12 +159,26 @@ const TopBar = () => {
                   onClick={() => setShowAccountsModal(true)}
                 >
                   <div className="text-xs font-normal text-th-primary">
-                    {t('account')}
+                    {numberOfAccounts
+                      ? numberOfAccounts === 1
+                        ? `1 ${t('account')}`
+                        : `${numberOfAccounts} ${t('accounts')}`
+                      : t('account')}
                   </div>
                   {mangoAccount.name
                     ? mangoAccount.name
                     : abbreviateAddress(mangoAccount.publicKey)}
                 </button>
+              ) : connected && !mangoAccount ? (
+                <button
+                  className="rounded border border-th-bkg-4 py-1 px-2 text-xs hover:border-th-fgd-4 focus:outline-none"
+                  onClick={() => setShowAccountsModal(true)}
+                >
+                  <div className="text-xs font-normal text-th-primary">
+                    {`0 ${t('accounts')}`}
+                  </div>
+                  {t('get-started')} 😎
+                </button>
               ) : null}
               <ConnectWalletButton />
             </div>

pages/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import useMangoStore, { serumProgramId } from '../stores/useMangoStore'
 import {
@@ -22,6 +22,9 @@ import {
 import { PublicKey } from '@solana/web3.js'
 import FavoritesShortcutBar from '../components/FavoritesShortcutBar'
 import { useWallet } from '@solana/wallet-adapter-react'
+import AccountsModal from 'components/AccountsModal'
+
+const DISMISS_CREATE_ACCOUNT_KEY = 'show-create-account'
 
 export async function getStaticProps({ locale }) {
   return {
@@ -41,6 +44,11 @@ export async function getStaticProps({ locale }) {
 const PerpMarket: React.FC = () => {
   const [alphaAccepted] = useLocalStorageState(ALPHA_MODAL_KEY, false)
   const [showTour] = useLocalStorageState(SHOW_TOUR_KEY, false)
+  const [dismissCreateAccount, setDismissCreateAccount] = useLocalStorageState(
+    DISMISS_CREATE_ACCOUNT_KEY,
+    false
+  )
+  const [showCreateAccount, setShowCreateAccount] = useState(false)
   const { connected } = useWallet()
   const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
   const setMangoStore = useMangoStore((s) => s.set)
@@ -53,6 +61,17 @@ const PerpMarket: React.FC = () => {
   const { width } = useViewport()
   const hideTips = width ? width < breakpoints.md : false
 
+  useEffect(() => {
+    if (connected && !mangoAccount && !dismissCreateAccount) {
+      setShowCreateAccount(true)
+    }
+  }, [connected, mangoAccount])
+
+  const handleCloseCreateAccount = useCallback(() => {
+    setShowCreateAccount(false)
+    setDismissCreateAccount(true)
+  }, [])
+
   useEffect(() => {
     async function loadUnownedMangoAccount() {
       if (!pubkey) return
@@ -151,6 +170,12 @@ const PerpMarket: React.FC = () => {
         {!alphaAccepted && (
           <AlphaModal isOpen={!alphaAccepted} onClose={() => {}} />
         )}
+        {showCreateAccount ? (
+          <AccountsModal
+            isOpen={showCreateAccount}
+            onClose={() => handleCloseCreateAccount()}
+          />
+        ) : null}
       </div>
     </>
   )

public/locales/en/common.json

@@ -176,7 +176,7 @@
    "initial-deposit": "Initial Deposit",
    "insufficient-balance-deposit": "Insufficient balance. Reduce the amount to deposit",
    "insufficient-balance-withdraw": "Insufficient balance. Borrow funds to withdraw",
-   "insufficient-sol": "There is a one-time cost of 0.035 SOL to create a Mango Account. This covers the rent on the Solana Blockchain.",
+   "insufficient-sol": "The Solana blockchain requires 0.035 SOL to create a Mango Account. This covers rent for your account and will be refunded if you close your account.",
    "interest": "Interest",
    "interest-chart-title": "{{symbol}} Interest – Last 30 days (current bar is delayed)",
    "interest-chart-value-title": "{{symbol}} Interest Value – Last 30 days (current bar is delayed)",