show create account message and hide tips

components/AlphaModal.tsx

@@ -5,9 +5,9 @@ import Button from './Button'
 import useLocalStorageState from '../hooks/useLocalStorageState'
 import { useTranslation } from 'next-i18next'
 import Checkbox from './Checkbox'
-import { SHOW_TOUR_KEY } from './IntroTips'
-import { useViewport } from '../hooks/useViewport'
-import { breakpoints } from './TradePageGrid'
+// import { SHOW_TOUR_KEY } from './IntroTips'
+// import { useViewport } from '../hooks/useViewport'
+// import { breakpoints } from './TradePageGrid'
 import { useRouter } from 'next/router'
 import { LANGS } from './SettingsModal'
 import { RadioGroup } from '@headlessui/react'
@@ -24,13 +24,13 @@ const AlphaModal = ({
   const { t } = useTranslation('common')
   const [acceptRisks, setAcceptRisks] = useState(false)
   const [, setAlphaAccepted] = useLocalStorageState(ALPHA_MODAL_KEY, false)
-  const [, setShowTips] = useLocalStorageState(SHOW_TOUR_KEY, false)
+  // const [, setShowTips] = useLocalStorageState(SHOW_TOUR_KEY, false)
   const [savedLanguage, setSavedLanguage] = useLocalStorageState('language', '')
   const [language, setLanguage] = useState('en')
   const router = useRouter()
   const { pathname, asPath, query } = router
-  const { width } = useViewport()
-  const hideTips = width ? width < breakpoints.md : false
+  // const { width } = useViewport()
+  // const hideTips = width ? width < breakpoints.md : false
 
   const handleLanguageSelect = () => {
     setSavedLanguage(language)
@@ -41,10 +41,10 @@ const AlphaModal = ({
     setAlphaAccepted(true)
   }
 
-  const handleTakeTour = () => {
-    setAlphaAccepted(true)
-    setShowTips(true)
-  }
+  // const handleTakeTour = () => {
+  //   setAlphaAccepted(true)
+  //   setShowTips(true)
+  // }
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} hideClose>
@@ -104,7 +104,7 @@ const AlphaModal = ({
             >
               {t('get-started')}
             </Button>
-            {!hideTips ? (
+            {/* {!hideTips ? (
               <Button
                 className="w-40"
                 disabled={!acceptRisks}
@@ -112,7 +112,7 @@ const AlphaModal = ({
               >
                 {t('show-tips')}
               </Button>
-            ) : null}
+            ) : null} */}
           </div>
         </>
       ) : (

components/Layout.tsx

@@ -88,33 +88,49 @@ const Layout = ({ children }) => {
                             : abbreviateAddress(mangoAccount.publicKey)
                         }`}
                       </span>
-                    ) : null
+                    ) : (
+                      <span className="flex items-center text-th-fgd-3">
+                        {t('create-account-helper')}
+                        <ArrowRightIcon className="sideways-bounce ml-2 h-5 w-5 text-th-fgd-1" />
+                      </span>
+                    )
                   ) : (
                     <div className="h-4 w-28 animate-pulse rounded bg-th-bkg-3" />
                   )
                 ) : !isMobile ? (
                   <span className="flex items-center text-th-fgd-3">
-                    Connect to get started
+                    {t('connect-helper')}
                     <ArrowRightIcon className="sideways-bounce ml-2 h-5 w-5 text-th-fgd-1" />
                   </span>
                 ) : null}
               </div>
             )}
             <div className="flex items-center space-x-4">
-              {mangoAccount && canWithdraw && !isMobile ? (
+              {!isMobile && connected && !initialLoad ? (
                 <div className="flex space-x-2">
-                  <Button
-                    className="flex h-8 w-24 items-center justify-center pl-3 pr-3 text-xs"
-                    onClick={() => setShowDepositModal(true)}
-                  >
-                    {t('deposit')}
-                  </Button>
-                  <Button
-                    className="flex h-8 w-24 items-center justify-center border border-th-fgd-4 bg-transparent pl-3 pr-3 text-xs"
-                    onClick={() => setShowWithdrawModal(true)}
-                  >
-                    {t('withdraw')}
-                  </Button>
+                  {mangoAccount ? (
+                    <Button
+                      className="flex h-8 w-24 items-center justify-center pl-3 pr-3 text-xs"
+                      onClick={() => setShowDepositModal(true)}
+                    >
+                      {t('deposit')}
+                    </Button>
+                  ) : (
+                    <Button
+                      className="flex h-8 w-32 items-center justify-center pl-3 pr-3 text-xs"
+                      onClick={() => setShowAccountsModal(true)}
+                    >
+                      {t('create-account')}
+                    </Button>
+                  )}
+                  {canWithdraw ? (
+                    <Button
+                      className="flex h-8 items-center justify-center border border-th-fgd-4 bg-transparent pl-3 pr-3 text-xs"
+                      onClick={() => setShowWithdrawModal(true)}
+                    >
+                      {t('withdraw')}
+                    </Button>
+                  ) : null}
                 </div>
               ) : null}
               <IconButton

public/locales/en/common.json

@@ -83,6 +83,7 @@
    "confirm-withdraw": "Confirm Withdraw",
    "confirming-transaction": "Confirming Transaction",
    "connect": "Connect",
+   "connect-helper": "Connect to get started",
    "connect-view": "Connect a wallet to view your account",
    "connect-wallet": "Connect Wallet",
    "connect-wallet-tip-desc": "We'll show you around...",
@@ -92,6 +93,7 @@
    "country-not-allowed": "Country {{country}} Not Allowed",
    "country-not-allowed-tooltip": "You are using an open-source frontend facilitated by the Mango DAO. As such, it restricts access to certain regions out of an abundance of caution, due to regulatory uncertainty.",
    "create-account": "Create Account",
+   "create-account-helper": "Create an account to start trading",
    "current-stats": "Current Stats",
    "custom": "Custom",
    "daily-change": "Daily Change",

public/locales/es/common.json

@@ -83,6 +83,7 @@
    "confirm-withdraw": "Confirmar retiro",
    "confirming-transaction": "Confirmando transacción",
    "connect": "Conectar",
+   "connect-helper": "Connect to get started",
    "connect-view": "Conecte una billetera para ver su cuenta",
    "connect-wallet": "Conecte una billetera",
    "connect-wallet-tip-desc": "Te mostraremos los alrededores...",
@@ -92,6 +93,7 @@
    "country-not-allowed": "País no permitido",
    "country-not-allowed-tooltip": "Está utilizando una interfaz de código abierto facilitada por Mango DAO. Como tal, restringe el acceso a ciertas regiones por precaución, debido a la incertidumbre regulatoria.",
    "create-account": "Crear cuenta",
+   "create-account-helper": "Create an account to start trading",
    "current-stats": "Estadísticas actuales",
    "custom": "Personalizada",
    "daily-change": "Cambio diario",

public/locales/zh/common.json

@@ -83,6 +83,7 @@
     "confirm-withdraw": "确认取款",
     "confirming-transaction": "正在确认交易...",
     "connect": "连结",
+    "connect-helper": "Connect to get started",
     "connect-view": "连结钱包而看帐户状态",
     "connect-wallet": "连结钱包",
     "connect-wallet-tip-desc": "我们会带你四处看看...",
@@ -92,6 +93,7 @@
     "country-not-allowed": "您的国家{{country}}不允许",
     "country-not-allowed-tooltip": "您正在使用MangoDAO提供的开源介面。由于监管的不确定性因此处于谋些地区的人的行动会受到限制。",
     "create-account": "创建帐户",
+    "create-account-helper": "Create an account to start trading",
     "current-stats": "当前统计",
     "custom": "自定义",
     "daily-change": "一日间变动",

public/locales/zh_tw/common.json

@@ -83,6 +83,7 @@
   "confirm-withdraw": "確認取款",
   "confirming-transaction": "正在確認交易...",
   "connect": "連結",
+  "connect-helper": "Connect to get started",
   "connect-view": "連結錢包而看帳戶狀態",
   "connect-wallet": "連結錢包",
   "connect-wallet-tip-desc": "我們會帶你四處看看...",
@@ -92,6 +93,7 @@
   "country-not-allowed": "您的國家{{country}}不允許",
   "country-not-allowed-tooltip": "您正在使用MangoDAO提供的開源介面。由於監管的不確定性因此處於謀些地區的人的行動會受到限制。",
   "create-account": "創建帳戶",
+  "create-account-helper": "Create an account to start trading",
   "current-stats": "當前統計",
   "custom": "自定義",
   "daily-change": "一日間變動",