From d1cdd5affef3994b5fb8e4eb478f8ed2d589d99a Mon Sep 17 00:00:00 2001 From: saml33 Date: Wed, 21 Dec 2022 10:06:50 +1100 Subject: [PATCH 01/14] smaller deposit/withdraw buttons on mobile --- components/TopBar.tsx | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/components/TopBar.tsx b/components/TopBar.tsx index 6c559236..b85e4540 100644 --- a/components/TopBar.tsx +++ b/components/TopBar.tsx @@ -1,7 +1,9 @@ import { useCallback, useState } from 'react' import { + ArrowDownTrayIcon, ArrowLeftIcon, ArrowRightIcon, + ArrowUpTrayIcon, ExclamationTriangleIcon, UsersIcon, } from '@heroicons/react/20/solid' @@ -32,6 +34,7 @@ const TopBar = () => { const { connected } = useWallet() const [isOnboarded, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY) const [showUserSetup, setShowUserSetup] = useState(false) + const [action, setAction] = useState<'deposit' | 'withdraw'>('deposit') const [showCreateAccountModal, setShowCreateAccountModal] = useState(false) const [showMangoAccountsModal, setShowMangoAccountsModal] = useState(false) const [showDepositWithdrawModal, setShowDepositWithdrawModal] = @@ -57,6 +60,11 @@ const TopBar = () => { } }, [mangoAccount]) + const handleDepositWithdrawModal = (action: 'deposit' | 'withdraw') => { + setAction(action) + setShowDepositWithdrawModal(true) + } + return ( <>
@@ -100,10 +108,24 @@ const TopBar = () => {
*/} +
+ handleDepositWithdrawModal('deposit')} + > + + + handleDepositWithdrawModal('withdraw')} + > + + +
{connected ? (
{showDepositWithdrawModal ? ( setShowDepositWithdrawModal(false)} /> From 3df2f06fd679f5b44638b321db1ef39d98bcae81 Mon Sep 17 00:00:00 2001 From: saml33 Date: Wed, 21 Dec 2022 10:14:01 +1100 Subject: [PATCH 02/14] full screen modals on mobile --- components/TopBar.tsx | 10 ++-------- components/shared/Modal.tsx | 6 +++--- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/components/TopBar.tsx b/components/TopBar.tsx index b85e4540..a18030e5 100644 --- a/components/TopBar.tsx +++ b/components/TopBar.tsx @@ -113,16 +113,10 @@ const TopBar = () => { className="mx-4 hidden sm:block" >{`${t('deposit')} / ${t('withdraw')}`}
- handleDepositWithdrawModal('deposit')} - > + handleDepositWithdrawModal('deposit')}> - handleDepositWithdrawModal('withdraw')} - > + handleDepositWithdrawModal('withdraw')}>
diff --git a/components/shared/Modal.tsx b/components/shared/Modal.tsx index cad87be3..d021b221 100644 --- a/components/shared/Modal.tsx +++ b/components/shared/Modal.tsx @@ -28,12 +28,12 @@ function Modal({ }`} aria-hidden="true" /> -
- +
+ {!hideClose ? ( From 57e8128c45c3908325590ea3e634f6cdfbd87478 Mon Sep 17 00:00:00 2001 From: saml33 Date: Wed, 21 Dec 2022 10:30:00 +1100 Subject: [PATCH 03/14] allow viewing account action modals when not connected --- components/BorrowForm.tsx | 12 ++++++++++-- components/DepositForm.tsx | 15 ++++++++++++--- components/RepayForm.tsx | 8 +++++++- components/TopBar.tsx | 1 - components/WithdrawForm.tsx | 15 +++++++++++++-- components/account/AccountActions.tsx | 3 +-- 6 files changed, 43 insertions(+), 11 deletions(-) diff --git a/components/BorrowForm.tsx b/components/BorrowForm.tsx index eed07269..69299136 100644 --- a/components/BorrowForm.tsx +++ b/components/BorrowForm.tsx @@ -4,6 +4,7 @@ import { ArrowUpLeftIcon, ChevronDownIcon, ExclamationCircleIcon, + LinkIcon, } from '@heroicons/react/20/solid' import Decimal from 'decimal.js' import { useTranslation } from 'next-i18next' @@ -33,6 +34,7 @@ import useMangoAccount from 'hooks/useMangoAccount' import useJupiterMints from 'hooks/useJupiterMints' import useMangoGroup from 'hooks/useMangoGroup' import TokenVaultWarnings from '@components/shared/TokenVaultWarnings' +import { useWallet } from '@solana/wallet-adapter-react' interface BorrowFormProps { onSuccess: () => void @@ -51,6 +53,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) { const [sizePercentage, setSizePercentage] = useState('') const { mangoTokens } = useJupiterMints() const { mangoAccount } = useMangoAccount() + const { connected } = useWallet() const bank = useMemo(() => { const group = mangoStore.getState().group @@ -314,10 +317,15 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) { + ) : !connected ? ( +
+ +

Connect to repay your borrows

+
) : (
😎 diff --git a/components/TopBar.tsx b/components/TopBar.tsx index a18030e5..182427bd 100644 --- a/components/TopBar.tsx +++ b/components/TopBar.tsx @@ -107,7 +107,6 @@ const TopBar = () => {
*/} - - - {showSetupStep === 1 ? ( -
-

- {t('onboarding:connect-wallet')} -

-

{t('onboarding:choose-wallet')}

-
- {wallets?.map((w) => ( - - ))} -
- -
- ) : null} - - - {showSetupStep === 2 ? ( -
-
-

- {t('onboarding:create-account')} -

-

- {t('onboarding:create-account-desc')} -

-
-
-
-
- -
- - - - - {t('onboarding:skip')} - - -
-
-
- ) : null} - - - {showSetupStep === 3 ? ( -
-

- {t('onboarding:fund-account')} -

- 0}> -
- - -
-
-
-
- - ) => - setDepositAmount(e.target.value) - } - /> -
- handleSizePercentage(p)} - values={['10', '25', '50', '75', '100']} - unit="%" - /> -
-
-
-
-

{t('deposit-value')}

-

- {depositBank - ? formatFixedDecimals( - depositBank.uiPrice * Number(depositAmount), - true - ) - : ''} -

-
-
- - setShowSetupStep(4)}> - - {t('onboarding:skip')} - - - - -
-
-
-

{t('token')}

-
-
-

{t('deposit-rate')}

-
-
-

- {t('wallet-balance')} -

-
-
- -
- -
- ) : null} - - - {showSetupStep === 4 ? ( -
-

- {t('onboarding:your-profile')} -

-

{t('onboarding:profile-desc')}

- {!showEditProfilePic ? ( -
- setShowEditProfilePic(true)} - onboarding - /> - - - {t('onboarding:skip-finish')} - - -
- ) : null} - -
- setShowEditProfilePic(false)} - /> -
- -
- ) : null} - -
-
- -
-
- ) -} - -export default UserSetup - -const UserSetupTransition = ({ - show, - children, - delay = false, -}: { - show: boolean - children: ReactNode - delay?: boolean -}) => { - return ( - - {children} - - ) -} diff --git a/components/modals/UserSetupModal.tsx b/components/modals/UserSetupModal.tsx new file mode 100644 index 00000000..7cc2b0e8 --- /dev/null +++ b/components/modals/UserSetupModal.tsx @@ -0,0 +1,619 @@ +import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4' +import { Transition } from '@headlessui/react' +import { + ArrowDownTrayIcon, + CheckCircleIcon, + ExclamationCircleIcon, + FireIcon, + PencilIcon, +} from '@heroicons/react/20/solid' +import { Wallet } from '@project-serum/anchor' +import { useWallet } from '@solana/wallet-adapter-react' +import mangoStore from '@store/mangoStore' +import Decimal from 'decimal.js' +import useMangoAccount from 'hooks/useMangoAccount' +import useMangoGroup from 'hooks/useMangoGroup' +import useSolBalance from 'hooks/useSolBalance' +import { useTranslation } from 'next-i18next' +import Image from 'next/image' +import { + ChangeEvent, + ReactNode, + useCallback, + useEffect, + useMemo, + useState, +} from 'react' +import { ALPHA_DEPOSIT_LIMIT } from 'utils/constants' +import { notify } from 'utils/notifications' +import { floorToDecimal, formatFixedDecimals } from 'utils/numbers' +import ActionTokenList from '../account/ActionTokenList' +import ButtonGroup from '../forms/ButtonGroup' +import Input from '../forms/Input' +import Label from '../forms/Label' +import WalletIcon from '../icons/WalletIcon' +import { walletBalanceForToken } from '../DepositForm' +import ParticlesBackground from '../ParticlesBackground' +import EditNftProfilePic from '../profile/EditNftProfilePic' +import EditProfileForm from '../profile/EditProfileForm' +import Button, { LinkButton } from '../shared/Button' +import InlineNotification from '../shared/InlineNotification' +import Loading from '../shared/Loading' +import MaxAmountButton from '../shared/MaxAmountButton' +import SolBalanceWarnings from '../shared/SolBalanceWarnings' +import { useEnhancedWallet } from '../wallet/EnhancedWalletProvider' +import Modal from '../shared/Modal' + +const UserSetupModal = ({ + isOpen, + onClose, +}: { + isOpen: boolean + onClose: () => void +}) => { + const { t } = useTranslation(['common', 'onboarding', 'swap']) + const { group } = useMangoGroup() + const { connected, select, wallet, wallets } = useWallet() + const { mangoAccount } = useMangoAccount() + const mangoAccountLoading = mangoStore((s) => s.mangoAccount.initialLoad) + const [accountName, setAccountName] = useState('') + const [loadingAccount, setLoadingAccount] = useState(false) + const [showSetupStep, setShowSetupStep] = useState(0) + const [depositToken, setDepositToken] = useState('USDC') + const [depositAmount, setDepositAmount] = useState('') + const [submitDeposit, setSubmitDeposit] = useState(false) + const [sizePercentage, setSizePercentage] = useState('') + const [showEditProfilePic, setShowEditProfilePic] = useState(false) + const walletTokens = mangoStore((s) => s.wallet.tokens) + const { handleConnect } = useEnhancedWallet() + const { maxSolDeposit } = useSolBalance() + + useEffect(() => { + if (connected) { + setShowSetupStep(2) + } + }, [connected]) + + const handleCreateAccount = useCallback(async () => { + const client = mangoStore.getState().client + const group = mangoStore.getState().group + const actions = mangoStore.getState().actions + if (!group || !wallet) return + setLoadingAccount(true) + try { + const tx = await client.createMangoAccount( + group, + 0, + accountName || 'Account 1', + undefined, // tokenCount + undefined, // serum3Count + 8, // perpCount + 8 // perpOoCount + ) + actions.fetchMangoAccounts(wallet!.adapter as unknown as Wallet) + if (tx) { + actions.fetchWalletTokens(wallet!.adapter as unknown as Wallet) // need to update sol balance after account rent + setShowSetupStep(3) + notify({ + title: t('new-account-success'), + type: 'success', + txid: tx, + }) + } + } catch (e: any) { + notify({ + title: t('new-account-failed'), + txid: e?.txid, + type: 'error', + }) + console.error(e) + } finally { + setLoadingAccount(false) + } + }, [accountName, wallet, t]) + + const handleDeposit = useCallback(async () => { + const client = mangoStore.getState().client + const group = mangoStore.getState().group + const actions = mangoStore.getState().actions + const mangoAccount = mangoStore.getState().mangoAccount.current + + if (!mangoAccount || !group) return + const bank = group.banksMapByName.get(depositToken)![0] + try { + setSubmitDeposit(true) + const tx = await client.tokenDeposit( + group, + mangoAccount, + bank.mint, + parseFloat(depositAmount) + ) + notify({ + title: 'Transaction confirmed', + type: 'success', + txid: tx, + }) + + await actions.reloadMangoAccount() + setShowSetupStep(4) + setSubmitDeposit(false) + } catch (e: any) { + notify({ + title: 'Transaction failed', + description: e.message, + txid: e?.txid, + type: 'error', + }) + setSubmitDeposit(false) + console.error(e) + } + }, [depositAmount, depositToken]) + + useEffect(() => { + if (mangoAccount && showSetupStep === 2) { + onClose() + } + }, [mangoAccount, showSetupStep, onClose]) + + const banks = useMemo(() => { + const banks = group?.banksMapByName + ? Array.from(group?.banksMapByName, ([key, value]) => { + const walletBalance = walletBalanceForToken(walletTokens, key) + return { + key, + value, + tokenDecimals: walletBalance.maxDecimals, + walletBalance: floorToDecimal( + walletBalance.maxAmount, + walletBalance.maxDecimals + ).toNumber(), + walletBalanceValue: walletBalance.maxAmount * value?.[0].uiPrice, + } + }) + : [] + return banks + }, [group?.banksMapByName, walletTokens]) + + const depositBank = useMemo(() => { + return banks.find((b) => b.key === depositToken)?.value[0] + }, [depositToken, banks]) + + const exceedsAlphaMax = useMemo(() => { + const mangoAccount = mangoStore.getState().mangoAccount.current + if (!group || !mangoAccount) return + if ( + mangoAccount.owner.toString() === + '8SSLjXBEVk9nesbhi9UMCA32uijbVBUqWoKPPQPTekzt' + ) + return false + const accountValue = toUiDecimalsForQuote( + mangoAccount.getEquity(group)!.toNumber() + ) + return ( + parseFloat(depositAmount) * (depositBank?.uiPrice || 1) > + ALPHA_DEPOSIT_LIMIT || accountValue > ALPHA_DEPOSIT_LIMIT + ) + }, [depositAmount, depositBank, group]) + + const tokenMax = useMemo(() => { + const bank = banks.find((bank) => bank.key === depositToken) + if (bank) { + return { amount: bank.walletBalance, decimals: bank.tokenDecimals } + } + return { amount: 0, decimals: 0 } + }, [banks, depositToken]) + + const showInsufficientBalance = tokenMax.amount < Number(depositAmount) + + const handleSizePercentage = useCallback( + (percentage: string) => { + setSizePercentage(percentage) + let amount = new Decimal(tokenMax.amount).mul(percentage).div(100) + if (percentage !== '100') { + amount = floorToDecimal(amount, tokenMax.decimals) + } + + setDepositAmount(amount.toString()) + }, + [tokenMax] + ) + + const handleNextStep = () => { + setShowSetupStep(showSetupStep + 1) + } + + return ( + +
+ next + next +
+
+
+
+ +

+ {t('onboarding:intro-heading')} +

+

{t('onboarding:intro-desc')}

+
+
+ +

{t('onboarding:bullet-1')}

+
+ {/*
+ +

Deeply liquid markets

+
*/} +
+ +

{t('onboarding:bullet-2')}

+
+
+ +

{t('onboarding:bullet-3')}

+
+
+ +

{t('onboarding:bullet-4')}

+
+
+ + + + {showSetupStep === 1 ? ( +
+

+ {t('onboarding:connect-wallet')} +

+

+ {t('onboarding:choose-wallet')} +

+
+ {wallets?.map((w) => ( + + ))} +
+ +
+ ) : null} + + + {showSetupStep === 2 ? ( +
+
+

+ {t('onboarding:create-account')} +

+

+ {t('onboarding:create-account-desc')} +

+
+
+
+
+ +
+ + + + + {t('onboarding:skip')} + + +
+
+
+ ) : null} + + + {showSetupStep === 3 ? ( +
+

+ {t('onboarding:fund-account')} +

+ 0}> +
+ + +
+
+
+
+ + ) => + setDepositAmount(e.target.value) + } + /> +
+ handleSizePercentage(p)} + values={['10', '25', '50', '75', '100']} + unit="%" + /> +
+
+
+
+

{t('deposit-value')}

+

+ {depositBank + ? formatFixedDecimals( + depositBank.uiPrice * Number(depositAmount), + true + ) + : ''} +

+
+
+ + setShowSetupStep(4)}> + + {t('onboarding:skip')} + + + + +
+
+
+

{t('token')}

+
+
+

{t('deposit-rate')}

+
+
+

+ {t('wallet-balance')} +

+
+
+ +
+ +
+ ) : null} + + + {showSetupStep === 4 ? ( +
+

+ {t('onboarding:your-profile')} +

+

{t('onboarding:profile-desc')}

+ {!showEditProfilePic ? ( +
+ setShowEditProfilePic(true)} + onboarding + /> + + + {t('onboarding:skip-finish')} + + +
+ ) : null} + +
+ setShowEditProfilePic(false)} + /> +
+ +
+ ) : null} + +
+
+ +
+
+ + ) +} + +export default UserSetupModal + +const UserSetupTransition = ({ + show, + children, + delay = false, +}: { + show: boolean + children: ReactNode + delay?: boolean +}) => { + return ( + + {children} + + ) +} diff --git a/components/shared/Modal.tsx b/components/shared/Modal.tsx index d021b221..ca3dac11 100644 --- a/components/shared/Modal.tsx +++ b/components/shared/Modal.tsx @@ -4,6 +4,7 @@ import { XMarkIcon } from '@heroicons/react/20/solid' type ModalProps = { children: React.ReactNode disableOutsideClose?: boolean + fullScreen?: boolean isOpen: boolean onClose: () => void hideClose?: boolean @@ -12,6 +13,7 @@ type ModalProps = { function Modal({ children, disableOutsideClose = false, + fullScreen = false, isOpen, onClose, hideClose, @@ -28,8 +30,18 @@ function Modal({ }`} aria-hidden="true" /> -
- +
+ {!hideClose ? (
- - o instanceof PerpOrder - ? handleCancelPerpOrder(o) - : handleCancelSerumOrder(o) - } - > - {cancelId === o.orderId.toString() ? ( - - ) : ( - - )} - - - o instanceof PerpOrder - ? handleCancelPerpOrder(o) - : handleCancelSerumOrder(o) - } - > - {cancelId === o.orderId.toString() ? ( - - ) : ( - - )} - + {modifyOrderId !== o.orderId.toString() ? ( + <> + showEditOrderForm(o, tickSize)} + > + + + + o instanceof PerpOrder + ? handleCancelPerpOrder(o) + : handleCancelSerumOrder(o) + } + > + {cancelId === o.orderId.toString() ? ( + + ) : ( + + )} + + + ) : ( + <> + modifyOrder(o)}> + + + + + + + )}
From da1ea7c5ce70712b5bec234abca8056baac256eb Mon Sep 17 00:00:00 2001 From: saml33 Date: Wed, 21 Dec 2022 14:11:38 +1100 Subject: [PATCH 07/14] give open orders more horizontal space on mobile --- components/shared/SideBadge.tsx | 6 +++--- components/trade/OpenOrders.tsx | 15 +++++++-------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/components/shared/SideBadge.tsx b/components/shared/SideBadge.tsx index 72ead780..9bebf26c 100644 --- a/components/shared/SideBadge.tsx +++ b/components/shared/SideBadge.tsx @@ -13,10 +13,10 @@ const SideBadge: FunctionComponent = ({ side }) => {
{typeof side === 'string' ? t(side) diff --git a/components/trade/OpenOrders.tsx b/components/trade/OpenOrders.tsx index e7106569..d3e2af45 100644 --- a/components/trade/OpenOrders.tsx +++ b/components/trade/OpenOrders.tsx @@ -415,13 +415,11 @@ const OpenOrders = () => { className="flex items-center justify-between border-b border-th-bkg-3 p-4" key={`${o.side}${o.size}${o.price}`} > -
+
- -
-
-
-

+

+ +

{o.size.toLocaleString(undefined, { maximumFractionDigits: @@ -429,8 +427,7 @@ const OpenOrders = () => { })} {' '} {baseSymbol} -

-

+ {' for '} {o.price.toLocaleString(undefined, { minimumFractionDigits: getDecimalCount(tickSize), @@ -440,6 +437,8 @@ const OpenOrders = () => { {quoteSymbol}

+
+
{modifyOrderId !== o.orderId.toString() ? ( <> From 3cc5b759d3fb3b1203288d9d93d2c4ea8b5e2330 Mon Sep 17 00:00:00 2001 From: saml33 Date: Wed, 21 Dec 2022 14:36:40 +1100 Subject: [PATCH 08/14] add edit order form to mobile --- components/modals/UserSetupModal.tsx | 2 +- components/trade/OpenOrders.tsx | 83 ++++++++++++++++++++-------- 2 files changed, 62 insertions(+), 23 deletions(-) diff --git a/components/modals/UserSetupModal.tsx b/components/modals/UserSetupModal.tsx index 7cc2b0e8..1cc35e56 100644 --- a/components/modals/UserSetupModal.tsx +++ b/components/modals/UserSetupModal.tsx @@ -248,7 +248,7 @@ const UserSetupModal = ({

{t('onboarding:intro-heading')}

-

{t('onboarding:intro-desc')}

+

{t('onboarding:intro-desc')}

diff --git a/components/trade/OpenOrders.tsx b/components/trade/OpenOrders.tsx index d3e2af45..e705ead0 100644 --- a/components/trade/OpenOrders.tsx +++ b/components/trade/OpenOrders.tsx @@ -41,6 +41,7 @@ const OpenOrders = () => { const [modifyOrderId, setModifyOrderId] = useState( undefined ) + const [loadingModifyOrder, setLoadingModifyOrder] = useState(false) const [modifiedOrderSize, setModifiedOrderSize] = useState('') const [modifiedOrderPrice, setModifiedOrderPrice] = useState('') const { width } = useViewport() @@ -116,6 +117,7 @@ const OpenOrders = () => { const baseSize = modifiedOrderSize ? Number(modifiedOrderSize) : o.size const price = modifiedOrderPrice ? Number(modifiedOrderPrice) : o.price if (!group || !mangoAccount) return + setLoadingModifyOrder(true) try { let tx = '' if (o instanceof PerpOrder) { @@ -217,6 +219,7 @@ const OpenOrders = () => { } const cancelEditOrderForm = () => { setModifyOrderId(undefined) + setLoadingModifyOrder(false) setModifiedOrderSize('') setModifiedOrderPrice('') } @@ -359,7 +362,11 @@ const OpenOrders = () => { onClick={() => modifyOrder(o)} size="small" > - + {loadingModifyOrder ? ( + + ) : ( + + )} { >
-
- -

- - {o.size.toLocaleString(undefined, { - maximumFractionDigits: - getDecimalCount(minOrderSize), - })} - {' '} - {baseSymbol} - {' for '} - - {o.price.toLocaleString(undefined, { - minimumFractionDigits: getDecimalCount(tickSize), - maximumFractionDigits: getDecimalCount(tickSize), - })} - {' '} - {quoteSymbol} -

-
+ {modifyOrderId !== o.orderId.toString() ? ( +
+ +

+ + {o.size.toLocaleString(undefined, { + maximumFractionDigits: + getDecimalCount(minOrderSize), + })} + {' '} + {baseSymbol} + {' for '} + + {o.price.toLocaleString(undefined, { + minimumFractionDigits: getDecimalCount(tickSize), + maximumFractionDigits: getDecimalCount(tickSize), + })} + {' '} + {quoteSymbol} +

+
+ ) : ( +
+
+

{t('trade:size')}

+ ) => + setModifiedOrderSize(e.target.value) + } + /> +
+
+

{t('price')}

+ ) => + setModifiedOrderPrice(e.target.value) + } + /> +
+
+ )}
@@ -465,7 +500,11 @@ const OpenOrders = () => { ) : ( <> modifyOrder(o)}> - + {loadingModifyOrder ? ( + + ) : ( + + )} From dff0df6c8b3878723d44a9cac66a186f548f981a Mon Sep 17 00:00:00 2001 From: saml33 Date: Wed, 21 Dec 2022 14:48:06 +1100 Subject: [PATCH 09/14] remove unwanted border --- components/shared/TabButtons.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/components/shared/TabButtons.tsx b/components/shared/TabButtons.tsx index d261a363..6fd49a75 100644 --- a/components/shared/TabButtons.tsx +++ b/components/shared/TabButtons.tsx @@ -33,9 +33,9 @@ const TabButtons: FunctionComponent = ({ rounded ? 'rounded-md' : 'rounded-none' } ${ showBorders - ? `border-r border-th-bkg-3 ${ - fillWidth && i === values.length - 1 ? 'border-r-0' : '' - }` + ? fillWidth && i === values.length - 1 + ? 'border-r-0' + : 'border-r border-th-bkg-3' : '' } ${ label === activeValue @@ -45,7 +45,9 @@ const TabButtons: FunctionComponent = ({ key={`${label}${i}`} onClick={() => onChange(label)} > - {t(label)} +

+ {t(label)} +

{count ? (
Date: Wed, 21 Dec 2022 15:04:08 +1100 Subject: [PATCH 10/14] horizontal scroll trade tabs on overflow --- components/account/AccountTabs.tsx | 16 +++++++++------- components/shared/TabButtons.tsx | 10 ++-------- components/stats/StatsPage.tsx | 14 ++++++++------ components/swap/SwapInfoTabs.tsx | 2 +- components/token/ChartTabs.tsx | 4 ++-- components/trade/TradeInfoTabs.tsx | 2 +- styles/globals.css | 1 + 7 files changed, 24 insertions(+), 25 deletions(-) diff --git a/components/account/AccountTabs.tsx b/components/account/AccountTabs.tsx index 42dc0040..5b30c5c0 100644 --- a/components/account/AccountTabs.tsx +++ b/components/account/AccountTabs.tsx @@ -28,13 +28,15 @@ const AccountTabs = () => { return ( <> - setActiveTab(v)} - values={tabsWithCount} - showBorders - fillWidth={isMobile} - /> +
+ setActiveTab(v)} + values={tabsWithCount} + showBorders + fillWidth={isMobile} + /> +
) diff --git a/components/shared/TabButtons.tsx b/components/shared/TabButtons.tsx index 6fd49a75..7a147493 100644 --- a/components/shared/TabButtons.tsx +++ b/components/shared/TabButtons.tsx @@ -21,11 +21,7 @@ const TabButtons: FunctionComponent = ({ const { t } = useTranslation(['common', 'swap', 'token', 'trade']) return ( -
+
{values.map(([label, count], i) => (
-
- handleDepositWithdrawModal('deposit')}> - - - handleDepositWithdrawModal('withdraw')}> - - -
+ {!connected && isMobile ? null : ( + + )} {connected ? (
) : null}