From 991d3ee4b3a2623f878e42c1f0ed4860b5818bb5 Mon Sep 17 00:00:00 2001 From: tjs Date: Mon, 23 Jan 2023 18:54:49 -0500 Subject: [PATCH 1/7] sort mango accounts list by equity --- components/modals/MangoAccountsListModal.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/components/modals/MangoAccountsListModal.tsx b/components/modals/MangoAccountsListModal.tsx index 06e06555..a5bd246c 100644 --- a/components/modals/MangoAccountsListModal.tsx +++ b/components/modals/MangoAccountsListModal.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useMemo, useState } from 'react' import { CheckIcon, DocumentDuplicateIcon, @@ -48,6 +48,18 @@ const MangoAccountsListModal = ({ const { asPath } = useRouter() const [submitting, setSubmitting] = useState('') + const sortedMangoAccounts = useMemo(() => { + if (!group) return mangoAccounts + + return [...mangoAccounts].sort((a, b) => { + if (b.publicKey.toString() === mangoAccount?.publicKey.toString()) + return 1 + if (a.publicKey.toString() === mangoAccount?.publicKey.toString()) + return -1 + return b.getEquity(group).toNumber() - a.getEquity(group).toNumber() + }) + }, [group, mangoAccounts]) + const handleSelectMangoAccount = async (acc: MangoAccount) => { const set = mangoStore.getState().set const client = mangoStore.getState().client @@ -94,8 +106,8 @@ const MangoAccountsListModal = ({ {loading ? ( ) : mangoAccounts.length ? ( -
- {mangoAccounts.map((acc) => { +
+ {sortedMangoAccounts.map((acc) => { if ( mangoAccount && acc.publicKey.equals(mangoAccount.publicKey) From 139ba30675ce207c1107a33dc0a8be4b2305fb2a Mon Sep 17 00:00:00 2001 From: tjs Date: Tue, 24 Jan 2023 13:08:35 -0500 Subject: [PATCH 2/7] dashboard tweaks --- components/trade/TradeAdvancedPage.tsx | 8 ++++---- pages/dashboard/index.tsx | 10 +++++----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/components/trade/TradeAdvancedPage.tsx b/components/trade/TradeAdvancedPage.tsx index 597afe28..d7d96ad2 100644 --- a/components/trade/TradeAdvancedPage.tsx +++ b/components/trade/TradeAdvancedPage.tsx @@ -74,13 +74,13 @@ const TradeAdvancedPage = () => { ], xxl: [ { i: 'market-header', x: 0, y: 0, w: 15, h: marketHeaderHeight }, - { i: 'tv-chart', x: 0, y: 1, w: 15, h: 536 }, + { i: 'tv-chart', x: 0, y: 1, w: 15, h: 488 }, { i: 'balances', x: 0, y: 2, w: 15, - h: getHeight(innerHeight, 0, 536 + marketHeaderHeight), + h: getHeight(innerHeight, 0, 488 + marketHeaderHeight), }, { i: 'orderbook', @@ -118,13 +118,13 @@ const TradeAdvancedPage = () => { ], lg: [ { i: 'market-header', x: 0, y: 0, w: 13, h: marketHeaderHeight }, - { i: 'tv-chart', x: 0, y: 1, w: 13, h: 488 }, + { i: 'tv-chart', x: 0, y: 1, w: 13, h: 456 }, { i: 'balances', x: 0, y: 2, w: 13, - h: getHeight(innerHeight, 0, 488 + marketHeaderHeight), + h: getHeight(innerHeight, 0, 456 + marketHeaderHeight), }, { i: 'orderbook', diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx index b3d6434f..06284943 100644 --- a/pages/dashboard/index.tsx +++ b/pages/dashboard/index.tsx @@ -46,7 +46,7 @@ const Dashboard: NextPage = () => { return (
-
+

Dashboard

{group ? ( @@ -102,8 +102,8 @@ const Dashboard: NextPage = () => { <>
@@ -542,9 +542,9 @@ const KeyValuePair = ({ value: number | ReactNode | string }) => { return ( -
+
{label} - {value} + {value}
) } From 4e856695ffecba87a384234f5fcead1d848bd3d1 Mon Sep 17 00:00:00 2001 From: saml33 Date: Wed, 25 Jan 2023 10:28:14 +1100 Subject: [PATCH 3/7] make stats tabs full width on small screens --- components/stats/StatsPage.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/stats/StatsPage.tsx b/components/stats/StatsPage.tsx index 0f81e696..41dd6ae9 100644 --- a/components/stats/StatsPage.tsx +++ b/components/stats/StatsPage.tsx @@ -1,7 +1,9 @@ import TabButtons from '@components/shared/TabButtons' import mangoStore from '@store/mangoStore' import useMangoGroup from 'hooks/useMangoGroup' +import { useViewport } from 'hooks/useViewport' import { useEffect, useMemo, useState } from 'react' +import { breakpoints } from 'utils/theme' import MangoStats from './MangoStats' import PerpStats from './PerpStats' import SpotMarketsTable from './SpotMarketsTable' @@ -17,6 +19,8 @@ const StatsPage = () => { const [activeTab, setActiveTab] = useState('tokens') const actions = mangoStore.getState().actions const { group } = useMangoGroup() + const { width } = useViewport() + const fullWidthTabs = width ? width < breakpoints.lg : false useEffect(() => { if (group) { @@ -32,9 +36,10 @@ const StatsPage = () => {
setActiveTab(v)} - values={tabsWithCount} showBorders + values={tabsWithCount} />
From 260b18fb9571a9293d4666fb486bee824ce18507 Mon Sep 17 00:00:00 2001 From: saml33 Date: Wed, 25 Jan 2023 15:27:17 +1100 Subject: [PATCH 4/7] reload account performance data for wallet change with no mango account --- components/account/AccountPage.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/account/AccountPage.tsx b/components/account/AccountPage.tsx index be701fb5..bd316263 100644 --- a/components/account/AccountPage.tsx +++ b/components/account/AccountPage.tsx @@ -32,7 +32,7 @@ import { ANIMATION_SETTINGS_KEY, // IS_ONBOARDED_KEY } from 'utils/constants' -// import { useWallet } from '@solana/wallet-adapter-react' +import { useWallet } from '@solana/wallet-adapter-react' import useLocalStorageState from 'hooks/useLocalStorageState' // import AccountOnboardingTour from '@components/tours/AccountOnboardingTour' import dayjs from 'dayjs' @@ -44,7 +44,7 @@ import PnlHistoryModal from '@components/modals/PnlHistoryModal' const AccountPage = () => { const { t } = useTranslation(['common', 'account']) - // const { connected } = useWallet() + const { connected } = useWallet() const { group } = useMangoGroup() const { mangoAccount, mangoAccountAddress } = useMangoAccount() const actions = mangoStore.getState().actions @@ -74,7 +74,7 @@ const AccountPage = () => { ) useEffect(() => { - if (mangoAccountAddress) { + if (mangoAccountAddress || (connected && !mangoAccountAddress)) { const set = mangoStore.getState().set set((s) => { s.mangoAccount.performance.initialLoad = false @@ -83,7 +83,7 @@ const AccountPage = () => { actions.fetchAccountPerformance(mangoAccountAddress, 1) actions.fetchAccountInterestTotals(mangoAccountAddress) } - }, [actions, mangoAccountAddress]) + }, [actions, connected, mangoAccountAddress]) useEffect(() => { if ( From e47cd766dba62d6bc36eb174c232f04d59e6b883 Mon Sep 17 00:00:00 2001 From: saml33 Date: Wed, 25 Jan 2023 20:19:12 +1100 Subject: [PATCH 5/7] fix console warning --- components/account/CreateAccountForm.tsx | 2 +- components/forms/Input.tsx | 12 ++++++------ components/modals/AccountNameModal.tsx | 2 +- components/modals/UserSetupModal.tsx | 2 +- components/profile/EditProfileForm.tsx | 2 +- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/components/account/CreateAccountForm.tsx b/components/account/CreateAccountForm.tsx index f7eb2d03..8c745aa0 100644 --- a/components/account/CreateAccountForm.tsx +++ b/components/account/CreateAccountForm.tsx @@ -126,7 +126,7 @@ const CreateAccountForm = ({ onChange={(e: ChangeEvent) => setName(e.target.value) } - charLimit={30} + maxLength={30} />
diff --git a/components/forms/Input.tsx b/components/forms/Input.tsx index 7d8b8264..068ad07f 100644 --- a/components/forms/Input.tsx +++ b/components/forms/Input.tsx @@ -4,7 +4,7 @@ interface InputProps { type: string value: any onChange: (e: ChangeEvent) => void - charLimit?: number + maxLength?: number className?: string disabled?: boolean prefixClassname?: string @@ -21,7 +21,7 @@ const Input = forwardRef((props, ref) => { type, value, onChange, - charLimit, + maxLength, className, error, wrapperClassName = 'w-full', @@ -59,20 +59,20 @@ const Input = forwardRef((props, ref) => { type={type} value={value} onChange={onChange} - maxLength={charLimit && charLimit} + maxLength={maxLength ? maxLength : undefined} /> {suffix ? ( {suffix} ) : null} - {charLimit ? ( + {maxLength ? (

- {`${value.length}/${charLimit}`} + {`${value.length}/${maxLength}`}

) : null}
diff --git a/components/modals/AccountNameModal.tsx b/components/modals/AccountNameModal.tsx index 73731e61..41bddd39 100644 --- a/components/modals/AccountNameModal.tsx +++ b/components/modals/AccountNameModal.tsx @@ -64,7 +64,7 @@ const AccountNameModal = ({ isOpen, onClose }: ModalProps) => { onChange={(e: ChangeEvent) => setName(e.target.value) } - charLimit={30} + maxLength={30} />
diff --git a/components/profile/EditProfileForm.tsx b/components/profile/EditProfileForm.tsx index 5d268824..b3fb4fab 100644 --- a/components/profile/EditProfileForm.tsx +++ b/components/profile/EditProfileForm.tsx @@ -164,7 +164,7 @@ const EditProfileForm = ({ onChange={(e: ChangeEvent) => onChangeNameInput(e.target.value) } - charLimit={20} + maxLength={20} /> {inputError ? (
From 5efb43b7fc012192131f625888b3c271b0b42d7c Mon Sep 17 00:00:00 2001 From: saml33 Date: Wed, 25 Jan 2023 22:26:21 +1100 Subject: [PATCH 6/7] simplify close account modal --- components/modals/CloseAccountModal.tsx | 137 +++++++++++------------- public/locales/en/close-account.json | 13 ++- public/locales/es/close-account.json | 13 ++- public/locales/ru/close-account.json | 13 ++- public/locales/zh/close-account.json | 13 ++- public/locales/zh_tw/close-account.json | 13 ++- 6 files changed, 94 insertions(+), 108 deletions(-) diff --git a/components/modals/CloseAccountModal.tsx b/components/modals/CloseAccountModal.tsx index eb58e7ce..a5cf9ace 100644 --- a/components/modals/CloseAccountModal.tsx +++ b/components/modals/CloseAccountModal.tsx @@ -11,11 +11,7 @@ import { TokenPosition, toUiDecimalsForQuote, } from '@blockworks-foundation/mango-v4' -import { - CheckCircleIcon, - ExclamationCircleIcon, - TrashIcon, -} from '@heroicons/react/20/solid' +import { ExclamationCircleIcon, TrashIcon } from '@heroicons/react/20/solid' import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions' import { getMultipleAccounts } from '@project-serum/anchor/dist/cjs/utils/rpc' import { formatFixedDecimals } from 'utils/numbers' @@ -120,81 +116,76 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => { hasBorrows || hasOpenPositions || !!unsettledBalances.length + return ( -
+
{loading ? ( ) : (
-
-

{t('close-account')}

-

{t('description')}

-

{t('you-must')}:

-
-
- {hasBorrows ? ( - - ) : ( - - )} - {t('close-all-borrows')} -
-
- {hasOpenPositions ? ( - - ) : ( - - )} - {t('close-perp-positions')} -
-
- {hasOpenOrders ? ( - - ) : ( - - )} - {t('close-open-orders')} -
-
- {unsettledBalances.length ? ( - - ) : ( - - )} - {t('settle-balances')} -
-
-

By closing your account you will:

-
-
- - {t('delete-your-account')} -
-
- - {t('withdraw-assets-worth', { - value: - mangoAccount && group - ? formatFixedDecimals( - toUiDecimalsForQuote( - mangoAccount!.current!.getEquity(group).toNumber() - ), - false, - true - ) - : 0, - })} -
-
- - {t('recover-x-sol', { - amount: totalAccountSOL.toFixed(3), - })} -
-
+
+

{t('close-account')}

+ {!isDisabled ? ( + <> +

{t('are-you-sure')}:

+
    +
  1. {t('delete-your-account')}
    2. +
  2. + {t('withdraw-assets-worth', { + value: + mangoAccount && group + ? formatFixedDecimals( + toUiDecimalsForQuote( + mangoAccount! + .current!.getEquity(group) + .toNumber() + ), + false, + true + ) + : 0, + })} +
    3. +
  3. + {t('recover-x-sol', { + amount: totalAccountSOL.toFixed(4), + })} +
    4. +
+ + ) : ( + <> +

{t('you-must')}:

+
+ {hasBorrows ? ( +
+ +

{t('close-all-borrows')}

+
+ ) : null} + {hasOpenPositions ? ( +
+ +

{t('close-perp-positions')}

+
+ ) : null} + {hasOpenOrders ? ( +
+ +

{t('close-open-orders')}

+
+ ) : null} + {unsettledBalances.length ? ( +
+ +

{t('settle-balances')}

+
+ ) : null} +
+ + )}
-