language select and tip content

2021-11-01 23:35:26 +11:00 · 2021-11-01 23:35:26 +11:00 · 6802fb75e6
parent bccada65fe
commit 6802fb75e6
5 changed files with 145 additions and 91 deletions
--- a/components/AlphaModal.tsx
+++ b/components/AlphaModal.tsx
@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { CheckCircleIcon } from '@heroicons/react/solid'
+import React, { useEffect, useState } from 'react'
+import { CheckCircleIcon } from '@heroicons/react/outline'
 import Modal from './Modal'
 import Button from './Button'
 import useLocalStorageState from '../hooks/useLocalStorageState'
@ -8,6 +8,9 @@ import Checkbox from './Checkbox'
 import { SHOW_TOUR_KEY } from './IntroTips'
 import { useViewport } from '../hooks/useViewport'
 import { breakpoints } from './TradePageGrid'
+import { useRouter } from 'next/router'
+import { LANGS } from './LanguageSwitch'
+import { RadioGroup } from '@headlessui/react'

 export const ALPHA_MODAL_KEY = 'mangoAlphaAccepted-3.06'

@ -22,9 +25,18 @@ const AlphaModal = ({
  const [acceptRisks, setAcceptRisks] = useState(false)
  const [, setAlphaAccepted] = useLocalStorageState(ALPHA_MODAL_KEY, false)
  const [, setShowTips] = useLocalStorageState(SHOW_TOUR_KEY, false)
+  const [savedLanguage, setSavedLanguage] = useLocalStorageState('language', '')
+  const router = useRouter()
+  const { pathname, asPath, query } = router
  const { width } = useViewport()
  const hideTips = width ? width < breakpoints.md : false

+  useEffect(() => {
+    savedLanguage
+      ? router.push({ pathname, query }, asPath, { locale: savedLanguage })
+      : null
+  }, [savedLanguage])
+
  const handleGetStarted = () => {
    setAlphaAccepted(true)
  }
@ -53,53 +65,80 @@ const AlphaModal = ({
          V3
        </span>
      </h1>
-      <div className="bg-th-bkg-3 p-4 space-y-3 rounded-md">
-        <div className="flex items-center text-th-fgd-1">
-          <CheckCircleIcon className="flex-shrink-0 h-5 mr-2 text-th-green w-5" />
-          Cross‑collateralized leverage trading
+      {savedLanguage ? (
+        <>
+          <div className="bg-th-bkg-3 p-4 space-y-3 rounded-md">
+            <div className="flex items-center text-th-fgd-1">
+              <CheckCircleIcon className="flex-shrink-0 h-5 mr-2 text-th-green w-5" />
+              Cross‑collateralized leverage trading
+            </div>
+            <div className="flex items-center text-th-fgd-1">
+              <CheckCircleIcon className="flex-shrink-0 h-5 mr-2 text-th-green w-5" />
+              All assets count as collateral to trade or borrow
+            </div>
+            <div className="flex items-center text-th-fgd-1">
+              <CheckCircleIcon className="flex-shrink-0 h-5 mr-2 text-th-green w-5" />
+              Deposit any asset and earn interest automatically
+            </div>
+            <div className="flex items-center text-th-fgd-1">
+              <CheckCircleIcon className="flex-shrink-0 h-5 mr-2 text-th-green w-5" />
+              Borrow against your assets for other DeFi activities
+            </div>
+          </div>
+          <div className="px-6 text-th-fgd-3 text-center mt-4">
+            {t('v3-unaudited')}
+          </div>
+          <div className="border border-th-fgd-4 mt-4 p-3 rounded-md">
+            <Checkbox
+              checked={acceptRisks}
+              onChange={(e) => setAcceptRisks(e.target.checked)}
+            >
+              I understand and accept the risks
+            </Checkbox>
+          </div>
+          <div className={`mt-6 flex justify-center space-x-4`}>
+            <Button
+              className="w-40"
+              disabled={!acceptRisks}
+              onClick={handleGetStarted}
+            >
+              Get Started
+            </Button>
+            {!hideTips ? (
+              <Button
+                className="w-40"
+                disabled={!acceptRisks}
+                onClick={handleTakeTour}
+              >
+                Show Tips
+              </Button>
+            ) : null}
+          </div>
+        </>
+      ) : (
+        <div className="pt-2">
+          <RadioGroup value={savedLanguage} onChange={setSavedLanguage}>
+            {LANGS.map((l) => (
+              <RadioGroup.Option
+                className="border border-th-fgd-4 cursor-pointer default-transition mb-2 p-3 rounded-md text-th-fgd-1 hover:border-th-primary"
+                key={l.locale}
+                value={l.locale}
+              >
+                {({ checked }) => (
+                  <div className="flex items-center">
+                    <CheckCircleIcon
+                      className={`h-5 mr-2 w-5 ${
+                        checked ? 'text-th-green' : 'text-th-fgd-4'
+                      }`}
+                    />
+                    <span>{t(l.name.toLowerCase())}</span>
+                  </div>
+                )}
+              </RadioGroup.Option>
+            ))}
+          </RadioGroup>
        </div>
-        <div className="flex items-center text-th-fgd-1">
-          <CheckCircleIcon className="flex-shrink-0 h-5 mr-2 text-th-green w-5" />
-          All assets count as collateral to trade or borrow
-        </div>
-        <div className="flex items-center text-th-fgd-1">
-          <CheckCircleIcon className="flex-shrink-0 h-5 mr-2 text-th-green w-5" />
-          Deposit any asset and earn interest automatically
-        </div>
-        <div className="flex items-center text-th-fgd-1">
-          <CheckCircleIcon className="flex-shrink-0 h-5 mr-2 text-th-green w-5" />
-          Borrow against your assets for other DeFi activities
-        </div>
-      </div>
-      <div className="px-6 text-th-fgd-3 text-center mt-4">
-        {t('v3-unaudited')}
-      </div>
-      <div className="border border-th-fgd-4 mt-4 p-3 rounded-md">
-        <Checkbox
-          checked={acceptRisks}
-          onChange={(e) => setAcceptRisks(e.target.checked)}
-        >
-          I understand and accept the risks
-        </Checkbox>
-      </div>
-      <div className={`mt-6 flex justify-center space-x-4`}>
-        <Button
-          className="w-40"
-          disabled={!acceptRisks}
-          onClick={handleGetStarted}
-        >
-          Get Started
-        </Button>
-        {!hideTips ? (
-          <Button
-            className="w-40"
-            disabled={!acceptRisks}
-            onClick={handleTakeTour}
-          >
-            Show Tips
-          </Button>
-        ) : null}
-      </div>
+      )}
    </Modal>
  )
 }
--- a/components/IntroTips.tsx
+++ b/components/IntroTips.tsx
@ -29,6 +29,7 @@ class IntroTips extends Component<Props, State> {
              <p>We&apos;ll show you around...</p>
            </div>
          ),
+          position: 'left',
          tooltipClass: 'intro-tooltip',
          highlightClass: 'intro-highlight',
        },
@ -63,11 +64,8 @@ class IntroTips extends Component<Props, State> {
          element: '#intro-step-3',
          intro: (
            <div>
-              <h4>Multiple Languages</h4>
-              <p>
-                English not your preferred language? No problem, change it here.
-                More languages coming soon...
-              </p>
+              <h4>Multilingual?</h4>
+              <p>Choose another language here. More coming soon...</p>
            </div>
          ),
          tooltipClass: 'intro-tooltip',
@ -78,7 +76,7 @@ class IntroTips extends Component<Props, State> {
          element: '#intro-step-4',
          intro: (
            <div>
-              <h4>Manual Refresh</h4>
+              <h4>Manual Data Refresh</h4>
              <p>
                Data is refreshed automatically but you can manually refresh it
                here.
@ -109,18 +107,18 @@ class IntroTips extends Component<Props, State> {
          intro: (
            <div>
              <h4>Perp Position Details</h4>
-              <p>The details of your open perp position.</p>
              <p>
-                If you&apos;re unfamiliar with how settling PnL works,{' '}
+                Perp positions accrue Unsettled PnL as price changes. This can
+                be settled by anyone at anytime. Settling PnL adds or removes
+                that amount from your USDC balance.{' '}
                <a
                  className="underline"
-                  href="https://docs.mango.markets/mango-v3/overview#settle-pnl"
+                  href="https://docs.mango.markets/mango-v3/perp-faq#what-is-my-unsettled-pnl"
                  rel="noopener noreferrer"
                  target="_blank"
                >
-                  read up on it
-                </a>{' '}
-                before you get started.
+                  Read More
+                </a>
              </p>
            </div>
          ),
@ -135,19 +133,50 @@ class IntroTips extends Component<Props, State> {
            <div>
              <h4>Account Details</h4>
              <p>
-                Don&apos;t have a Mango Account yet? One will be created for you
-                when you make your first deposit.
+                When you make your first deposit we&apos;ll set you up with a
+                Mango Account. You&apos;ll need at least 0.0035 SOL in your
+                wallet to cover the rent/cost of creating the account.
              </p>
+            </div>
+          ),
+          position: 'left',
+          tooltipClass: 'intro-tooltip',
+          highlightClass: 'intro-highlight',
+          disableInteraction: true,
+        },
+        {
+          element: '#intro-step-7',
+          intro: (
+            <div>
+              <h4>Collateral Available</h4>
              <p>
-                Understanding account health is important for a fruitful
-                experience.{' '}
+                This reflects the collateral value in your account that can be
+                used to take on leverage. Assets carry different collateral
+                weights depending on the risk they present to the platform.
+              </p>
+            </div>
+          ),
+          position: 'left',
+          tooltipClass: 'intro-tooltip',
+          highlightClass: 'intro-highlight',
+          disableInteraction: true,
+        },
+        {
+          element: '#intro-step-7',
+          intro: (
+            <div>
+              <h4>Account Health</h4>
+              <p>
+                To avoid liqudation you must keep your account health above 0%.
+                To increase the health of your account, reduce borrows or
+                deposit funds.{' '}
                <a
                  className="underline"
                  href="https://docs.mango.markets/mango-v3/overview#health"
                  rel="noopener noreferrer"
                  target="_blank"
                >
-                  Read more
+                  Read More
                </a>
              </p>
            </div>
@ -196,6 +225,8 @@ class IntroTips extends Component<Props, State> {
          exitOnOverlayClick: false,
          showProgress: true,
          showBullets: false,
+          doneLabel: 'Get Started',
+          overlayOpacity: 0.6,
        }}
        ref={(steps) => (this.steps = steps)}
      />
--- a/components/LanguageSwitch.tsx
+++ b/components/LanguageSwitch.tsx
@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
 import useLocalStorageState from '../hooks/useLocalStorageState'
 import { useTranslation } from 'next-i18next'

-const LANGS = [
+export const LANGS = [
  { locale: 'en', name: 'english', description: 'english' },
  { locale: 'es', name: 'spanish', description: 'spanish' },
  {
--- a/components/WalletSelect.tsx
+++ b/components/WalletSelect.tsx
@ -1,23 +1,10 @@
 import { Menu } from '@headlessui/react'
-import {
-  ChevronDownIcon,
-  ChevronUpIcon,
-  CheckCircleIcon,
-} from '@heroicons/react/solid'
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
 import useMangoStore from '../stores/useMangoStore'
-import {
-  WALLET_PROVIDERS,
-  DEFAULT_PROVIDER,
-  PROVIDER_LOCAL_STORAGE_KEY,
-} from '../hooks/useWallet'
-import useLocalStorageState from '../hooks/useLocalStorageState'
+import { WALLET_PROVIDERS } from '../hooks/useWallet'

 export default function WalletSelect({ isPrimary = false }) {
  const setMangoStore = useMangoStore((s) => s.set)
-  const [savedProviderUrl] = useLocalStorageState(
-    PROVIDER_LOCAL_STORAGE_KEY,
-    DEFAULT_PROVIDER.url
-  )

  const handleSelectProvider = (url) => {
    setMangoStore((state) => {
@ -42,20 +29,17 @@ export default function WalletSelect({ isPrimary = false }) {
              <ChevronDownIcon className="h-4 w-4" />
            )}
          </Menu.Button>
-          <Menu.Items className="absolute bg-th-bkg-1 divide-y divide-th-bkg-3 p-1 rounded-md right-0.5 mt-1 shadow-lg outline-none w-48 z-20">
+          <Menu.Items className="absolute bg-th-bkg-1 divide-y divide-th-bkg-3 p-1 rounded-md right-0.5 mt-1 shadow-lg outline-none w-36 z-20">
            {WALLET_PROVIDERS.map(({ name, url, icon }) => (
              <Menu.Item key={name}>
                <button
-                  className="flex flex-row items-center justify-between rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer font-normal focus:outline-none"
+                  className="flex flex-row items-center justify-between rounded-none text-xs w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer font-normal focus:outline-none"
                  onClick={() => handleSelectProvider(url)}
                >
                  <div className="flex">
-                    <img src={icon} className="w-5 h-5 mr-2" />
+                    <img src={icon} className="w-4 h-4 mr-2" />
                    {name}
                  </div>
-                  {savedProviderUrl === url ? (
-                    <CheckCircleIcon className="h-4 w-4 text-th-green" />
-                  ) : null}{' '}
                </button>
              </Menu.Item>
            ))}
--- a/styles/index.css
+++ b/styles/index.css
@ -324,6 +324,10 @@ input[type='number'] {

 /* Intro Tour */

+.intro-tooltip * {
+  @apply bg-th-bkg-2 font-body text-th-fgd-1;
+}
+
 .introjs-tooltip {
  @apply bg-transparent;
 }
@ -332,10 +336,6 @@ input[type='number'] {
  @apply border-0;
 }

-.intro-tooltip * {
-  @apply bg-th-bkg-1 font-body text-th-fgd-1;
-}
-
 .introjs-skipbutton {
  @apply text-sm text-th-fgd-3;
 }