From 3c280518e8e2b110daa8d37bc87aa8746e4ffcbf Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Tue, 6 Feb 2024 10:05:42 +0100 Subject: [PATCH] Morph summary (#763) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: fixed mobile issues with SVGs * feat: first morphing AccountDetails * tidy: composition refresh * tidy: fine adjusting * fix: svg fixes * feat: updated summary structure * feat: overall layout adjustments * fix: fixed svg adjustments * feat: finished AccountSummary update * fix: fixed build * tidy: refactor * fix: fix enourmous APYs * fix: don’t abbreviate APYs * tidy: console.log * fix: fix borrow Rate sorting * fix: fixed scrollbars * fix: hide scrollbars * fix: resolved feedback * fix: amount not size * feat: only show credit account number outside of modals * fix: added missing Strategies to PortfolioAccount * fix: save some space --- package.json | 2 +- .../Modals/AssetAmountSelectActionModal.tsx | 8 +- src/components/Modals/BorrowModal.tsx | 3 +- .../Modals/HLS/Deposit/SubTitles.tsx | 13 +- .../Modals/ModalContentWithSummary.tsx | 4 +- .../Modals/Vault/VaultModalContent.tsx | 7 +- src/components/Wallet/WalletConnectButton.tsx | 2 +- .../Wallet/WalletConnectedButton.tsx | 2 +- .../AccountBalancesTable/Columns/Apy.tsx | 11 +- .../AccountBalancesTable/Columns/Asset.tsx | 27 ++- .../account/AccountBalancesTable/functions.ts | 32 ---- .../useAccountBalanceData.tsx | 15 +- src/components/account/AccountComposition.tsx | 26 +-- .../AccountDetails/AccountDetailsLeverage.tsx | 54 ------ .../account/AccountDetails/index.tsx | 161 +++++++++--------- .../account/AccountList/Skeleton.tsx | 7 +- src/components/account/AccountMenuContent.tsx | 2 +- .../Columns/Asset.tsx | 28 ++- .../Columns/LiqPrice.tsx | 67 ++++++++ .../AccountStrategiesTable/Columns/Size.tsx | 64 +++++++ .../Columns/StrategyAndValue.tsx | 39 +++++ .../AccountStrategiesTable/Columns/Value.tsx | 44 +++++ .../Columns/useAccountStrategiesColumns.tsx | 40 +++++ .../AccountStrategiesTable/functions.ts | 70 ++++++++ .../account/AccountStrategiesTable/index.tsx | 38 +++++ .../useAccountStrategiesData.tsx | 27 +++ .../AccountSummary/AccountSummaryHeader.tsx | 135 +++++++++++++++ .../AccountSummary/AccountSummaryInModal.tsx | 19 +++ .../AccountSummary/AccountSummaryLeverage.tsx | 77 +++++++++ .../index.tsx} | 161 ++++++++---------- .../account/CurrentAccountSummary.tsx | 10 -- src/components/account/Health/HealthBar.tsx | 79 +++++---- .../borrow/Table/Columns/BorrowRate.tsx | 2 +- src/components/common/Accordion.tsx | 4 +- src/components/common/AccordionContent.tsx | 17 +- src/components/common/Button/EscButton.tsx | 4 +- src/components/common/Icons/ArrowRight.svg | 16 +- .../common/Icons/ArrowRightLine.svg | 8 + src/components/common/Icons/Chain.svg | 10 +- src/components/common/Icons/Check.svg | 9 +- src/components/common/Icons/ChevronLeft.svg | 10 +- src/components/common/Icons/ChevronUp.svg | 10 +- src/components/common/Icons/Circle.svg | 21 ++- .../common/Icons/ExclamationMarkTriangle.svg | 15 +- src/components/common/Icons/GridGlobe.svg | 2 + src/components/common/Icons/GridHole.svg | 10 +- src/components/common/Icons/GridLandscape.svg | 10 +- src/components/common/Icons/GridPlanet.svg | 2 + src/components/common/Icons/GridTire.svg | 2 + src/components/common/Icons/GridWeb.svg | 2 + src/components/common/Icons/MarsProtocol.svg | 10 +- src/components/common/Icons/Neutron.svg | 10 +- src/components/common/Icons/Scale.svg | 12 +- src/components/common/Icons/StarFilled.svg | 24 ++- src/components/common/Icons/StarOutlined.svg | 8 +- src/components/common/Icons/SwapIcon.svg | 8 +- src/components/common/Icons/TooltipArrow.svg | 7 +- src/components/common/Icons/Twitter.svg | 10 +- .../common/Icons/VerticalThreeLine.svg | 10 +- src/components/common/Icons/Wallet.svg | 9 +- src/components/common/Icons/index.ts | 1 + src/components/common/Intro.tsx | 38 ++++- src/components/common/SearchBar.tsx | 6 +- src/components/common/Settings.tsx | 2 +- src/components/common/Table/Row.tsx | 10 +- src/components/common/Table/index.tsx | 20 ++- src/components/common/WarningMessages.tsx | 4 +- .../earn/farm/Table/Columns/Apy.tsx | 3 - src/components/header/ChainSelect.tsx | 2 +- src/components/header/RewardsCenter.tsx | 2 +- .../portfolio/Account/Strategies.tsx | 52 ++++++ .../trade/TradeChart/PoweredByPyth.tsx | 4 +- .../AssetSelector/AssetSelectorPair.tsx | 2 +- .../AssetSelector/AssetSelectorSingle.tsx | 2 +- src/components/trade/TradeModule/index.tsx | 2 +- src/constants/defaultSettings.ts | 3 +- src/constants/localStorageKeys.ts | 1 + src/pages/PortfolioAccountPage.tsx | 2 + src/pages/_document.tsx | 4 +- src/pages/_layout.tsx | 6 +- src/styles/globals.css | 10 ++ src/types/interfaces/account.d.ts | 11 +- src/types/interfaces/store/settings.d.ts | 1 + tailwind.config.js | 16 +- 84 files changed, 1262 insertions(+), 478 deletions(-) delete mode 100644 src/components/account/AccountDetails/AccountDetailsLeverage.tsx create mode 100644 src/components/account/AccountStrategiesTable/Columns/LiqPrice.tsx create mode 100644 src/components/account/AccountStrategiesTable/Columns/Size.tsx create mode 100644 src/components/account/AccountStrategiesTable/Columns/StrategyAndValue.tsx create mode 100644 src/components/account/AccountStrategiesTable/Columns/Value.tsx create mode 100644 src/components/account/AccountStrategiesTable/Columns/useAccountStrategiesColumns.tsx create mode 100644 src/components/account/AccountStrategiesTable/functions.ts create mode 100644 src/components/account/AccountStrategiesTable/index.tsx create mode 100644 src/components/account/AccountStrategiesTable/useAccountStrategiesData.tsx create mode 100644 src/components/account/AccountSummary/AccountSummaryHeader.tsx create mode 100644 src/components/account/AccountSummary/AccountSummaryInModal.tsx create mode 100644 src/components/account/AccountSummary/AccountSummaryLeverage.tsx rename src/components/account/{AccountSummary.tsx => AccountSummary/index.tsx} (53%) delete mode 100644 src/components/account/CurrentAccountSummary.tsx create mode 100644 src/components/common/Icons/ArrowRightLine.svg create mode 100644 src/components/portfolio/Account/Strategies.tsx diff --git a/package.json b/package.json index 1b22ae2b..f0fced92 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mars-v2-frontend", - "version": "2.2.1", + "version": "2.2.2", "private": true, "scripts": { "build": "yarn validate-env && next build", diff --git a/src/components/Modals/AssetAmountSelectActionModal.tsx b/src/components/Modals/AssetAmountSelectActionModal.tsx index a8f1f2c2..dfa41d9d 100644 --- a/src/components/Modals/AssetAmountSelectActionModal.tsx +++ b/src/components/Modals/AssetAmountSelectActionModal.tsx @@ -1,7 +1,7 @@ import { useCallback, useState } from 'react' import Modal from 'components/Modals/Modal' -import CurrentAccountSummary from 'components/account/CurrentAccountSummary' +import AccountSummaryInModal from 'components/account/AccountSummary/AccountSummaryInModal' import Button from 'components/common/Button' import Card from 'components/common/Card' import Divider from 'components/common/Divider' @@ -10,6 +10,7 @@ import Text from 'components/common/Text' import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider' import AssetImage from 'components/common/assets/AssetImage' import { BN_ZERO } from 'constants/math' +import useCurrentAccount from 'hooks/accounts/useCurrentAccount' import { BNCoin } from 'types/classes/BNCoin' import { byDenom } from 'utils/array' import { BN } from 'utils/helpers' @@ -38,7 +39,7 @@ export default function AssetAmountSelectActionModal(props: Props) { } = props const [amount, setAmount] = useState(BN_ZERO) const maxAmount = BN(coinBalances.find(byDenom(asset.denom))?.amount ?? 0) - + const account = useCurrentAccount() const handleAmountChange = useCallback( (value: BigNumber) => { setAmount(value) @@ -51,6 +52,7 @@ export default function AssetAmountSelectActionModal(props: Props) { onAction(amount, amount.isEqualTo(maxAmount)) }, [amount, maxAmount, onAction]) + if (!account) return return ( } /> - + ) diff --git a/src/components/Modals/BorrowModal.tsx b/src/components/Modals/BorrowModal.tsx index a526c0f2..1f943315 100644 --- a/src/components/Modals/BorrowModal.tsx +++ b/src/components/Modals/BorrowModal.tsx @@ -29,6 +29,7 @@ import { byDenom } from 'utils/array' import { formatPercent } from 'utils/formatters' import { BN } from 'utils/helpers' import { getDebtAmountWithInterest } from 'utils/tokens' +import AccountSummaryInModal from 'components/account/AccountSummary/AccountSummaryInModal' interface Props { account: Account @@ -347,7 +348,7 @@ function BorrowModal(props: Props) { rightIcon={} /> - + ) diff --git a/src/components/Modals/HLS/Deposit/SubTitles.tsx b/src/components/Modals/HLS/Deposit/SubTitles.tsx index 987f2bac..550d0fae 100644 --- a/src/components/Modals/HLS/Deposit/SubTitles.tsx +++ b/src/components/Modals/HLS/Deposit/SubTitles.tsx @@ -1,5 +1,4 @@ import classNames from 'classnames' -import React from 'react' import DisplayCurrency from 'components/common/DisplayCurrency' import { ExclamationMarkTriangle } from 'components/common/Icons' @@ -40,8 +39,10 @@ export function CollateralSubTitle(props: CollateralSubTitleProps) { if (!props.isOpen && props.amount.isZero()) { return (
- - +
+ +
+ You have not provided any collateral.
@@ -111,8 +112,10 @@ export function SelectAccountSubTitle(props: SelectAccountSubTitleProps) { if (!props.selectedAccountId && props.isSummaryOpen) { return (
- - +
+ +
+ You need to {props.type} an account
diff --git a/src/components/Modals/ModalContentWithSummary.tsx b/src/components/Modals/ModalContentWithSummary.tsx index c06dfbda..e1df5cbd 100644 --- a/src/components/Modals/ModalContentWithSummary.tsx +++ b/src/components/Modals/ModalContentWithSummary.tsx @@ -1,10 +1,10 @@ import classNames from 'classnames' import React from 'react' -import AccountSummary from 'components/account/AccountSummary' import Card from 'components/common/Card' import { CircularProgress } from 'components/common/CircularProgress' import Modal, { ModalProps } from 'components/Modals/Modal' +import AccountSummaryInModal from 'components/account/AccountSummary/AccountSummaryInModal' interface Props extends ModalProps { isHls?: boolean @@ -46,7 +46,7 @@ export default function ModalContentWithSummary(props: Props) { > {props.subHeader && props.subHeader} {modalContent(props.content, props.isContentCard, props.account)} - {props.account && } + {props.account && } ) } diff --git a/src/components/Modals/Vault/VaultModalContent.tsx b/src/components/Modals/Vault/VaultModalContent.tsx index 4a11fb10..83a003a5 100644 --- a/src/components/Modals/Vault/VaultModalContent.tsx +++ b/src/components/Modals/Vault/VaultModalContent.tsx @@ -1,11 +1,11 @@ import { useCallback, useMemo, useState } from 'react' -import Accordion from 'components/common/Accordion' -import AccountSummary from 'components/account/AccountSummary' import VaultBorrowings from 'components/Modals/Vault/VaultBorrowings' import VaultBorrowingsSubTitle from 'components/Modals/Vault/VaultBorrowingsSubTitle' import VaultDeposit from 'components/Modals/Vault/VaultDeposits' import VaultDepositSubTitle from 'components/Modals/Vault/VaultDepositsSubTitle' +import AccountSummaryInModal from 'components/account/AccountSummary/AccountSummaryInModal' +import Accordion from 'components/common/Accordion' import Text from 'components/common/Text' import { BN_ZERO } from 'constants/math' import useAllAssets from 'hooks/assets/useAllAssets' @@ -177,8 +177,7 @@ export default function VaultModalContent(props: Props) { }, ]} /> - - + ) } diff --git a/src/components/Wallet/WalletConnectButton.tsx b/src/components/Wallet/WalletConnectButton.tsx index 54c71755..08bb00ef 100644 --- a/src/components/Wallet/WalletConnectButton.tsx +++ b/src/components/Wallet/WalletConnectButton.tsx @@ -28,7 +28,7 @@ export default function WalletConnectButton(props: Props) { return (