From 6802fb75e65a6bbd4ff5a276ca2621e14a751862 Mon Sep 17 00:00:00 2001 From: saml33 Date: Mon, 1 Nov 2021 23:35:26 +1100 Subject: [PATCH] language select and tip content --- components/AlphaModal.tsx | 135 ++++++++++++++++++++++------------ components/IntroTips.tsx | 65 +++++++++++----- components/LanguageSwitch.tsx | 2 +- components/WalletSelect.tsx | 26 ++----- styles/index.css | 8 +- 5 files changed, 145 insertions(+), 91 deletions(-) diff --git a/components/AlphaModal.tsx b/components/AlphaModal.tsx index d773e384..dc9d2835 100644 --- 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 -
-
- - Cross‑collateralized leverage trading + {savedLanguage ? ( + <> +
+
+ + Cross‑collateralized leverage trading +
+
+ + All assets count as collateral to trade or borrow +
+
+ + Deposit any asset and earn interest automatically +
+
+ + Borrow against your assets for other DeFi activities +
+
+
+ {t('v3-unaudited')} +
+
+ setAcceptRisks(e.target.checked)} + > + I understand and accept the risks + +
+
+ + {!hideTips ? ( + + ) : null} +
+ + ) : ( +
+ + {LANGS.map((l) => ( + + {({ checked }) => ( +
+ + {t(l.name.toLowerCase())} +
+ )} + + ))} +
-
- - All assets count as collateral to trade or borrow -
-
- - Deposit any asset and earn interest automatically -
-
- - Borrow against your assets for other DeFi activities -
-
-
- {t('v3-unaudited')} -
-
- setAcceptRisks(e.target.checked)} - > - I understand and accept the risks - -
-
- - {!hideTips ? ( - - ) : null} -
+ )} ) } diff --git a/components/IntroTips.tsx b/components/IntroTips.tsx index e5476bbc..15f17111 100644 --- a/components/IntroTips.tsx +++ b/components/IntroTips.tsx @@ -29,6 +29,7 @@ class IntroTips extends Component {

We'll show you around...

), + position: 'left', tooltipClass: 'intro-tooltip', highlightClass: 'intro-highlight', }, @@ -63,11 +64,8 @@ class IntroTips extends Component { element: '#intro-step-3', intro: (
-

Multiple Languages

-

- English not your preferred language? No problem, change it here. - More languages coming soon... -

+

Multilingual?

+

Choose another language here. More coming soon...

), tooltipClass: 'intro-tooltip', @@ -78,7 +76,7 @@ class IntroTips extends Component { element: '#intro-step-4', intro: (
-

Manual Refresh

+

Manual Data Refresh

Data is refreshed automatically but you can manually refresh it here. @@ -109,18 +107,18 @@ class IntroTips extends Component { intro: (

Perp Position Details

-

The details of your open perp position.

- If you'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.{' '} - read up on it - {' '} - before you get started. + Read More +

), @@ -135,19 +133,50 @@ class IntroTips extends Component {

Account Details

- Don'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'll set you up with a + Mango Account. You'll need at least 0.0035 SOL in your + wallet to cover the rent/cost of creating the account.

+
+ ), + position: 'left', + tooltipClass: 'intro-tooltip', + highlightClass: 'intro-highlight', + disableInteraction: true, + }, + { + element: '#intro-step-7', + intro: ( +
+

Collateral Available

- 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. +

+
+ ), + position: 'left', + tooltipClass: 'intro-tooltip', + highlightClass: 'intro-highlight', + disableInteraction: true, + }, + { + element: '#intro-step-7', + intro: ( +
+

Account Health

+

+ To avoid liqudation you must keep your account health above 0%. + To increase the health of your account, reduce borrows or + deposit funds.{' '} - Read more + Read More

@@ -196,6 +225,8 @@ class IntroTips extends Component { exitOnOverlayClick: false, showProgress: true, showBullets: false, + doneLabel: 'Get Started', + overlayOpacity: 0.6, }} ref={(steps) => (this.steps = steps)} /> diff --git a/components/LanguageSwitch.tsx b/components/LanguageSwitch.tsx index 4e2813a0..43041d1c 100644 --- 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' }, { diff --git a/components/WalletSelect.tsx b/components/WalletSelect.tsx index 193da768..4e9b0e6e 100644 --- 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 }) { )} - + {WALLET_PROVIDERS.map(({ name, url, icon }) => ( ))} diff --git a/styles/index.css b/styles/index.css index 1f0e9c2a..fe5c4a35 100644 --- 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; }