show deposit modal after intro tips

components/DepositModal.tsx

@@ -151,9 +151,12 @@ const DepositModal: FunctionComponent<DepositModalProps> = ({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <Modal.Header>
       <ElementTitle noMarignBottom>{t('deposit-funds')}</ElementTitle>
-      </Modal.Header>
+      {!mangoAccount ? (
+        <div className="mb-4 mt-2 text-center text-th-fgd-3 text-xs">
+          {t('first-deposit-desc')}
+        </div>
+      ) : null}
       {tokenSymbol && !selectedAccount ? (
         <div className="mb-4">
           <InlineNotification
@@ -211,7 +214,7 @@ const DepositModal: FunctionComponent<DepositModalProps> = ({
       </div>
       {selectedAccount?.config.symbol === 'SOL' &&
       parseFloat(inputAmount) > selectedAccount?.uiBalance - 0.01 ? (
-        <div className="tiny-text text-center text-th-red -mb-4">
+        <div className="text-xs text-center text-th-red -mb-4 mt-1">
           {t('you-must-leave-enough-sol')}
         </div>
       ) : null}
@@ -237,11 +240,6 @@ const DepositModal: FunctionComponent<DepositModalProps> = ({
           <InlineNotification desc={t('interest-info')} type="info" />
         </div>
       ) : null}
-      {!mangoAccount ? (
-        <div className="flex text-th-fgd-4 text-xxs mt-1">
-          <div className="mx-auto">{t('insufficient-sol')}</div>
-        </div>
-      ) : null}
     </Modal>
   )
 }

components/IntroTips.tsx

@@ -1,11 +1,14 @@
 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'
 
 export const SHOW_TOUR_KEY = 'showTour'
 
 interface Props {
   connected: boolean
+  mangoAccount: MangoAccount
   t: any
 }
 
@@ -13,6 +16,7 @@ interface State {
   steps: any
   stepsEnabled: boolean
   initialStep: number
+  showDeposit: boolean
 }
 
 class IntroTips extends Component<Props, State> {
@@ -20,6 +24,7 @@ class IntroTips extends Component<Props, State> {
   constructor(props) {
     super(props)
     this.state = {
+      showDeposit: false,
       stepsEnabled: true,
       initialStep: 0,
       steps: [
@@ -181,9 +186,16 @@ class IntroTips extends Component<Props, State> {
     }
   }
 
+  closeCreateAccountModal = () => {
+    this.setState({ showDeposit: false })
+  }
+
   handleEndTour = () => {
     localStorage.setItem('showTour', 'false')
     this.setState({ stepsEnabled: false })
+    if (!this.props.mangoAccount) {
+      this.setState({ showDeposit: true })
+    }
   }
 
   onBeforeChange = (nextStepIndex) => {
@@ -202,9 +214,10 @@ class IntroTips extends Component<Props, State> {
   }
 
   render() {
-    const { initialStep, stepsEnabled, steps } = this.state
+    const { initialStep, showDeposit, stepsEnabled, steps } = this.state
 
     return (
+      <>
         <Steps
           enabled={stepsEnabled}
           steps={steps}
@@ -223,6 +236,13 @@ class IntroTips extends Component<Props, State> {
           }}
           ref={(steps) => (this.steps = steps)}
         />
+        {showDeposit ? (
+          <DepositModal
+            isOpen={showDeposit}
+            onClose={this.closeCreateAccountModal}
+          />
+        ) : null}
+      </>
     )
   }
 }

pages/market.tsx

@@ -36,6 +36,7 @@ const PerpMarket = () => {
   const groupConfig = useMangoGroupConfig()
   const setMangoStore = useMangoStore((s) => s.set)
   const connected = useMangoStore(walletConnectedSelector)
+  const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
   const marketConfig = useMangoStore(marketConfigSelector)
   const router = useRouter()
   const { width } = useViewport()
@@ -96,7 +97,9 @@ const PerpMarket = () => {
 
   return (
     <div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
-      {showTour && !hideTips ? <IntroTips connected={connected} /> : null}
+      {showTour && !hideTips ? (
+        <IntroTips connected={connected} mangoAccount={mangoAccount} />
+      ) : null}
       <TopBar />
       <MarketSelect />
       <PageBodyWrapper className="p-1 sm:px-2 sm:py-1 md:px-2 md:py-1">

public/locales/en/common.json

@@ -117,6 +117,7 @@
   "export-data-empty": "No data to export",
   "fee": "Fee",
   "fee-discount": "Fee Discount",
+  "first-deposit-desc": "There is a one-time cost of 0.035 SOL when you make your first deposit. This covers the rent on the Solana Blockchain for your account.",
   "funding": "Funding",
   "funding-chart-title": "Funding (Last 30 days)",
   "get-started": "Get Started",
@@ -138,7 +139,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": "You need 0.035 SOL to create a Mango Account.",
+  "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.",
   "interest": "Interest",
   "interest-chart-title": "{{symbol}} Interest (Last 30 days)",
   "interest-chart-value-title": "{{symbol}} Interest Value (Last 30 days)",

public/locales/es/common.json

@@ -116,6 +116,7 @@
   "export-data-success": "CSV exported successfully",
   "fee": "Tarifa",
   "fee-discount": "comisiones",
+  "first-deposit-desc": "Necesita 0.035 SOL para crear una cuenta de mango.",
   "funding": "Fondos",
   "funding-chart-title": "Fondos (últimos 30 días)",
   "get-started": "Comenzar",

public/locales/zh/common.json

@@ -116,6 +116,7 @@
     "export-data-success": "CSV exported successfully",
     "fee": "费率",
     "fee-discount": "费率折扣",
+    "first-deposit-desc": "创建Mango帐户最少需要0.035 SOL。",
     "funding": "资金费",
     "funding-chart-title": "资金费",
     "get-started": "开始",

public/locales/zh_tw/common.json

@@ -116,6 +116,7 @@
   "export-data-success": "CSV exported successfully",
   "fee": "費率",
   "fee-discount": "費率折扣",
+  "first-deposit-desc": "創建Mango帳戶最少需要0.035 SOL。",
   "funding": "資金費",
   "funding-chart-title": "資金費",
   "get-started": "開始",