From 22830289cf548fbe7d4f0dff6ea2de39f905fa82 Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Tue, 29 Aug 2023 17:25:11 +0200 Subject: [PATCH] Mp 3328 compare accounts via use updated account for withdraw (#407) * Compare Accounts via useUpdatedAccount for withdraw * fix: onChangeAsset fixed * Mp 3250 update health bars (#403) * [Story] Add HealthBar * Update tooltip * Fixes after rebase * Fixes after rebase * Fixes after rebase * Finish health bar + gauge * Finish health bar + gauge * Finish health bar + gauge * feat: added an svg mask to the HealthBar * fix: added transitions * tidy: value sanity * fix: fixed the AccountStats * tidy: design update * fix: div adjustments * update healthguagepercentage function * make tooltiparrow responsive --------- Co-authored-by: Linkie Link * Compare Accounts via useUpdatedAccount for withdraw * Mp 3250 update health bars (#403) * [Story] Add HealthBar * Update tooltip * Fixes after rebase * Fixes after rebase * Fixes after rebase * Finish health bar + gauge * Finish health bar + gauge * Finish health bar + gauge * feat: added an svg mask to the HealthBar * fix: added transitions * tidy: value sanity * fix: fixed the AccountStats * tidy: design update * fix: div adjustments * update healthguagepercentage function * make tooltiparrow responsive --------- Co-authored-by: Linkie Link * Mp 3250 update health bars (#403) * [Story] Add HealthBar * Update tooltip * Fixes after rebase * Fixes after rebase * Fixes after rebase * Finish health bar + gauge * Finish health bar + gauge * Finish health bar + gauge * feat: added an svg mask to the HealthBar * fix: added transitions * tidy: value sanity * fix: fixed the AccountStats * tidy: design update * fix: div adjustments * update healthguagepercentage function * make tooltiparrow responsive --------- Co-authored-by: Linkie Link * fix: merge error --------- Co-authored-by: Yusuf Seyrek Co-authored-by: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com> --- src/components/Accordion.tsx | 6 +-- .../Account/AccountBalancesTable.tsx | 4 +- src/components/Account/AccountDetails.tsx | 41 ++++++++++------- src/components/Account/AccountFund.tsx | 8 ++-- src/components/Account/AccountList.tsx | 11 +---- src/components/Account/AccountMenuContent.tsx | 4 +- src/components/Account/AccountOverview.tsx | 10 +++-- src/components/Account/AccountSummary.tsx | 7 +-- src/components/Borrow/BorrowTable.tsx | 4 +- src/components/DisplayCurrency.tsx | 7 ++- src/components/Icons/ThreeDots.svg | 20 +++++++++ src/components/Icons/index.ts | 1 + .../Modals/Account/AccountDeleteModal.tsx | 6 +-- src/components/Modals/BorrowModal.tsx | 45 +++++++++++++++---- .../Modals/FundWithdraw/FundAccount.tsx | 8 ++-- .../FundWithdraw/WithdrawFromAccount.tsx | 37 +++++++++++---- src/components/Modals/FundWithdraw/index.tsx | 4 +- src/components/Modals/Vault/VaultDeposits.tsx | 2 +- src/components/Select/Option.tsx | 13 +++--- src/components/Select/index.tsx | 6 +-- src/components/TitleAndSubCell.tsx | 2 +- .../TokenInput/TokenInputWithSlider.tsx | 3 +- src/components/TokenInput/index.tsx | 10 ++--- src/constants/assets.ts | 4 +- src/hooks/useUpdatedAccount/index.ts | 38 ++++++++++------ src/store/slices/broadcast.ts | 17 ++++--- src/types/classes/BNCoin.ts | 3 ++ src/types/interfaces/asset.d.ts | 2 +- src/types/interfaces/select.d.ts | 2 +- src/utils/accounts.ts | 23 ++++++++++ 30 files changed, 237 insertions(+), 111 deletions(-) create mode 100644 src/components/Icons/ThreeDots.svg diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx index 685d1530..f358a925 100644 --- a/src/components/Accordion.tsx +++ b/src/components/Accordion.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames' -import Card from 'components/Card' import AccordionContent, { Item } from 'components/AccordionContent' +import Card from 'components/Card' interface Props { items: Item[] @@ -14,7 +14,7 @@ export default function Accordion(props: Props) { return ( {props.items.map((item, index) => ( - + ))} ) @@ -23,7 +23,7 @@ export default function Accordion(props: Props) { return (
{props.items.map((item, index) => ( - + ))} diff --git a/src/components/Account/AccountBalancesTable.tsx b/src/components/Account/AccountBalancesTable.tsx index 6e8df143..43737354 100644 --- a/src/components/Account/AccountBalancesTable.tsx +++ b/src/components/Account/AccountBalancesTable.tsx @@ -143,7 +143,7 @@ export default function AccountBalancesTable(props: Props) { ) @@ -240,7 +240,7 @@ export default function AccountBalancesTable(props: Props) { {flexRender(header.column.columnDef.header, header.getContext())} diff --git a/src/components/Account/AccountDetails.tsx b/src/components/Account/AccountDetails.tsx index 4de61323..0401fccd 100644 --- a/src/components/Account/AccountDetails.tsx +++ b/src/components/Account/AccountDetails.tsx @@ -3,17 +3,21 @@ import { useMemo } from 'react' import AccountBalancesTable from 'components/Account/AccountBalancesTable' import AccountComposition from 'components/Account/AccountComposition' +import { glowElement } from 'components/Button/utils' import Card from 'components/Card' import DisplayCurrency from 'components/DisplayCurrency' import { FormattedNumber } from 'components/FormattedNumber' import { HealthGauge } from 'components/HealthGauge' -import { ChevronLeft, ChevronRight } from 'components/Icons' +import { Cross, ThreeDots } from 'components/Icons' import Text from 'components/Text' +import { DEFAULT_SETTINGS } from 'constants/defaultSettings' +import { REDUCE_MOTION_KEY } from 'constants/localStore' import { ORACLE_DENOM } from 'constants/oracle' import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData' import useCurrentAccount from 'hooks/useCurrentAccount' import useHealthComputer from 'hooks/useHealthComputer' import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData' +import useLocalStorage from 'hooks/useLocalStorage' import usePrices from 'hooks/usePrices' import useToggle from 'hooks/useToggle' import useStore from 'store' @@ -40,6 +44,7 @@ interface Props { function AccountDetails(props: Props) { const { account } = props + const [reduceMotion] = useLocalStorage(REDUCE_MOTION_KEY, DEFAULT_SETTINGS.reduceMotion) const updatedAccount = useStore((s) => s.updatedAccount) const [isExpanded, setIsExpanded] = useToggle() const { health } = useHealthComputer(account) @@ -75,27 +80,19 @@ function AccountDetails(props: Props) { className={classNames( isExpanded ? 'right-6' : '-right-80', 'w-100 flex items-start gap-6 absolute top-6', - 'transition-all duration-300', + !reduceMotion && 'transition-all duration-300', )} >
setIsExpanded(!isExpanded)} > -
- {isExpanded ? : } -
@@ -130,13 +127,25 @@ function AccountDetails(props: Props) { animate />
+
+ {isExpanded ? : } +
+ + {glowElement(!reduceMotion)}
- + - Balances + Balances diff --git a/src/components/Account/AccountFund.tsx b/src/components/Account/AccountFund.tsx index d9cee9f6..07745ff5 100644 --- a/src/components/Account/AccountFund.tsx +++ b/src/components/Account/AccountFund.tsx @@ -42,6 +42,8 @@ export default function AccountFund() { [walletBalances, baseAsset], ) + const balances = walletBalances.map((coin) => new BNCoin(coin)) + const selectedDenoms = useMemo(() => { return walletAssetModal?.selectedDenoms ?? [] }, [walletAssetModal?.selectedDenoms]) @@ -117,7 +119,7 @@ export default function AccountFund() { {fundingAssets.map((coin) => { const asset = getAssetByDenom(coin.denom) as Asset - const balance = walletBalances.find(byDenom(coin.denom))?.amount ?? '0' + const balance = balances.find(byDenom(coin.denom))?.amount ?? BN_ZERO return (
updateFundingAssets(amount, asset.denom)} amount={coin.amount ?? BN_ZERO} - max={BN(balance)} - balances={walletBalances} + max={balance} + balances={balances} maxText='Max' disabled={isFunding} /> diff --git a/src/components/Account/AccountList.tsx b/src/components/Account/AccountList.tsx index 9c3182a6..715cab97 100644 --- a/src/components/Account/AccountList.tsx +++ b/src/components/Account/AccountList.tsx @@ -6,7 +6,7 @@ import AccountFund from 'components/Account/AccountFund' import AccountStats from 'components/Account/AccountStats' import Button from 'components/Button' import Card from 'components/Card' -import { ArrowCircledTopRight, ArrowDownLine, ArrowUpLine, TrashBin } from 'components/Icons' +import { ArrowDownLine, ArrowUpLine, TrashBin } from 'components/Icons' import Radio from 'components/Radio' import SwitchAutoLend from 'components/Switch/SwitchAutoLend' import Text from 'components/Text' @@ -117,7 +117,7 @@ export default function AccountList(props: Props) { disabled={positionBalance.isLessThanOrEqualTo(0)} /> @@ -114,7 +114,7 @@ export default function AccountMenuContent(props: Props) { )} > - Accounts + Credit Accounts
- Balances + Balances ))} diff --git a/src/components/Account/AccountSummary.tsx b/src/components/Account/AccountSummary.tsx index 35f05cd6..a9f45602 100644 --- a/src/components/Account/AccountSummary.tsx +++ b/src/components/Account/AccountSummary.tsx @@ -15,6 +15,7 @@ import useHealthComputer from 'hooks/useHealthComputer' import useIsOpenArray from 'hooks/useIsOpenArray' import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData' import usePrices from 'hooks/usePrices' +import useStore from 'store' import { BNCoin } from 'types/classes/BNCoin' import { calculateAccountBalanceValue, calculateAccountLeverage } from 'utils/accounts' import { formatLeverage } from 'utils/formatters' @@ -26,6 +27,7 @@ interface Props { export default function AccountSummary(props: Props) { const [isOpen, toggleOpen] = useIsOpenArray(2, true) const { data: prices } = usePrices() + const updatedAccount = useStore((s) => s.updatedAccount) const accountBalance = useMemo( () => (props.account ? calculateAccountBalanceValue(props.account, prices) : BN_ZERO), [props.account, prices], @@ -48,7 +50,6 @@ export default function AccountSummary(props: Props) { [props.account, prices], ) if (!props.account) return null - return (
@@ -68,7 +69,7 @@ export default function AccountSummary(props: Props) { props.account ? : null, isOpen: isOpen[0], @@ -80,7 +81,7 @@ export default function AccountSummary(props: Props) { renderContent: () => props.account ? ( diff --git a/src/components/Borrow/BorrowTable.tsx b/src/components/Borrow/BorrowTable.tsx index 718af06a..85a4434e 100644 --- a/src/components/Borrow/BorrowTable.tsx +++ b/src/components/Borrow/BorrowTable.tsx @@ -50,12 +50,12 @@ export default function BorrowTable(props: Props) { const asset = row.original.asset return ( -
+
) diff --git a/src/components/DisplayCurrency.tsx b/src/components/DisplayCurrency.tsx index 1fd109d9..7b21254c 100644 --- a/src/components/DisplayCurrency.tsx +++ b/src/components/DisplayCurrency.tsx @@ -1,4 +1,5 @@ import { useMemo } from 'react' +import classNames from 'classnames' import { FormattedNumber } from 'components/FormattedNumber' import { DEFAULT_SETTINGS } from 'constants/defaultSettings' @@ -13,6 +14,7 @@ interface Props { coin: BNCoin className?: string isApproximation?: boolean + parantheses?: boolean } export default function DisplayCurrency(props: Props) { @@ -39,7 +41,10 @@ export default function DisplayCurrency(props: Props) { return ( + + + + diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts index ae5dc083..92b1f1e6 100644 --- a/src/components/Icons/index.ts +++ b/src/components/Icons/index.ts @@ -46,6 +46,7 @@ export { default as StarFilled } from 'components/Icons/StarFilled.svg' export { default as StarOutlined } from 'components/Icons/StarOutlined.svg' export { default as Subtract } from 'components/Icons/Subtract.svg' export { default as SwapIcon } from 'components/Icons/SwapIcon.svg' +export { default as ThreeDots } from 'components/Icons/ThreeDots.svg' export { default as TooltipArrow } from 'components/Icons/TooltipArrow.svg' export { default as TrashBin } from 'components/Icons/TrashBin.svg' export { default as VerticalThreeLine } from 'components/Icons/VerticalThreeLine.svg' diff --git a/src/components/Modals/Account/AccountDeleteModal.tsx b/src/components/Modals/Account/AccountDeleteModal.tsx index 51930b87..69b95354 100644 --- a/src/components/Modals/Account/AccountDeleteModal.tsx +++ b/src/components/Modals/Account/AccountDeleteModal.tsx @@ -108,19 +108,19 @@ function AccountDeleteModal(props: Props) { onClose={closeDeleteAccountModal} header={ - {`Delete Account ${modal.id}`} + {`Delete Credit Account ${modal.id}`} } modalClassName='max-w-modal-sm' headerClassName='gradient-header p-4 border-b-white/5 border-b' contentClassName='w-full' > -
+
The following assets within your credit account will be sent to your wallet.
-
+
{depositsAndLends.map((position, index) => { const coin = BNCoin.fromDenomAndBigNumber(position.denom, position.amount) const asset = getAssetByDenom(position.denom) diff --git a/src/components/Modals/BorrowModal.tsx b/src/components/Modals/BorrowModal.tsx index 696b376c..55d6aff4 100644 --- a/src/components/Modals/BorrowModal.tsx +++ b/src/components/Modals/BorrowModal.tsx @@ -5,7 +5,9 @@ import AccountSummary from 'components/Account/AccountSummary' import AssetImage from 'components/AssetImage' import Button from 'components/Button' import Card from 'components/Card' +import DisplayCurrency from 'components/DisplayCurrency' import Divider from 'components/Divider' +import { FormattedNumber } from 'components/FormattedNumber' import { ArrowRight } from 'components/Icons' import Modal from 'components/Modal' import Switch from 'components/Switch' @@ -21,6 +23,7 @@ import { useUpdatedAccount } from 'hooks/useUpdatedAccount' import { getDepositsAndLendsAfterCoinSpent } from 'hooks/useUpdatedAccount/functions' import useStore from 'store' import { BNCoin } from 'types/classes/BNCoin' +import { byDenom } from 'utils/array' import { formatPercent, formatValue } from 'utils/formatters' import { BN } from 'utils/helpers' @@ -127,8 +130,14 @@ function BorrowModal(props: Props) { ) useEffect(() => { + if (!account) return if (isRepay) { - setMax(BN(getDebtAmount(modal))) + const depositBalance = account.deposits.find(byDenom(asset.denom))?.amount ?? BN_ZERO + const lendBalance = account.lends.find(byDenom(asset.denom))?.amount ?? BN_ZERO + const maxBalance = depositBalance.plus(lendBalance) + const totalDebt = BN(getDebtAmount(modal)) + const maxRepayAmount = BigNumber.min(maxBalance, totalDebt) + setMax(maxRepayAmount) return } @@ -138,7 +147,7 @@ function BorrowModal(props: Props) { ) setMax(BigNumber.min(maxBorrowAmount, modal.marketData?.liquidity?.amount || 0)) - }, [isRepay, modal, asset.denom, computeMaxBorrowAmount, borrowToWallet]) + }, [account, isRepay, modal, asset.denom, computeMaxBorrowAmount, borrowToWallet]) useEffect(() => { if (amount.isGreaterThan(max)) { @@ -174,19 +183,37 @@ function BorrowModal(props: Props) { title={formatPercent(modal.marketData.borrowRate || '0')} sub={'Borrow rate'} /> -
+
-
- +
+
+
+ + +
+ + Liquidity available + +
new BNCoin(coin)) + const selectedDenoms = useMemo(() => { return walletAssetModal?.selectedDenoms ?? [] }, [walletAssetModal?.selectedDenoms]) @@ -113,15 +115,15 @@ export default function FundAccount(props: Props) { {fundingAssets.map((coin) => { const asset = getAssetByDenom(coin.denom) as Asset - const balance = walletBalances.find(byDenom(coin.denom))?.amount ?? '0' + const balance = balances.find(byDenom(coin.denom))?.amount ?? BN_ZERO return ( updateFundingAssets(amount, asset.denom)} amount={coin.amount ?? BN_ZERO} - max={BN(balance)} - balances={walletBalances} + max={balance} + balances={balances} maxText='Max' disabled={isFunding} className='w-full mb-4' diff --git a/src/components/Modals/FundWithdraw/WithdrawFromAccount.tsx b/src/components/Modals/FundWithdraw/WithdrawFromAccount.tsx index cced291b..4cbf8151 100644 --- a/src/components/Modals/FundWithdraw/WithdrawFromAccount.tsx +++ b/src/components/Modals/FundWithdraw/WithdrawFromAccount.tsx @@ -1,5 +1,5 @@ import BigNumber from 'bignumber.js' -import { useState } from 'react' +import { useEffect, useState } from 'react' import Button from 'components/Button' import Divider from 'components/Divider' @@ -14,7 +14,9 @@ import useToggle from 'hooks/useToggle' import { useUpdatedAccount } from 'hooks/useUpdatedAccount' import useStore from 'store' import { BNCoin } from 'types/classes/BNCoin' +import { cloneAccount, getMergedBalances, removeDepostisAndLends } from 'utils/accounts' import { byDenom } from 'utils/array' +import { getEnabledMarketAssets } from 'utils/assets' interface Props { account: Account @@ -29,9 +31,12 @@ export default function WithdrawFromAccount(props: Props) { const [isConfirming, setIsConfirming] = useToggle() const [currentAsset, setCurrentAsset] = useState(defaultAsset) const [amount, setAmount] = useState(BN_ZERO) - const { updatedAccount, removeDeposits, removeLends, addDebts } = useUpdatedAccount(account) + const { simulateWithdraw } = useUpdatedAccount(account) const { computeMaxWithdrawAmount } = useHealthComputer(account) - const { computeMaxBorrowAmount } = useHealthComputer(updatedAccount) + const accountClone = cloneAccount(account) + const borrowAccount = removeDepostisAndLends(accountClone, currentAsset.denom) + const { computeMaxBorrowAmount } = useHealthComputer(borrowAccount) + const balances = getMergedBalances(account, getEnabledMarketAssets()) const maxWithdrawAmount = computeMaxWithdrawAmount(currentAsset.denom) const maxWithdrawWithBorrowAmount = computeMaxBorrowAmount(currentAsset.denom, 'wallet').plus( maxWithdrawAmount, @@ -49,14 +54,12 @@ export default function WithdrawFromAccount(props: Props) { function onChangeAmount(val: BigNumber) { setAmount(val) - removeDeposits([BNCoin.fromDenomAndBigNumber(currentAsset.denom, withdrawAmount)]) - addDebts([BNCoin.fromDenomAndBigNumber(currentAsset.denom, debtAmount)]) - removeLends([BNCoin.fromDenomAndBigNumber(currentAsset.denom, reclaimAmount)]) } function resetState() { setCurrentAsset(defaultAsset) setAmount(BN_ZERO) + onChangeAmount(BN_ZERO) } async function onConfirm() { @@ -88,19 +91,35 @@ export default function WithdrawFromAccount(props: Props) { } } + useEffect(() => { + const coin = BNCoin.fromDenomAndBigNumber(currentAsset.denom, withdrawAmount.plus(debtAmount)) + simulateWithdraw(withdrawWithBorrowing, coin) + }, [ + amount, + withdrawWithBorrowing, + currentAsset.denom, + debtAmount, + simulateWithdraw, + withdrawAmount, + ]) + return ( <>
{ + setAmount(BN_ZERO) + setWithdrawWithBorrowing(false) + setCurrentAsset(asset) + }} amount={amount} max={max} className='w-full' - balances={account.deposits} + balances={balances} accountId={account.id} - hasSelect={account.deposits.length > 1} + hasSelect maxText='Max' disabled={isConfirming} /> diff --git a/src/components/Modals/FundWithdraw/index.tsx b/src/components/Modals/FundWithdraw/index.tsx index bd82ce70..f581146b 100644 --- a/src/components/Modals/FundWithdraw/index.tsx +++ b/src/components/Modals/FundWithdraw/index.tsx @@ -22,8 +22,8 @@ export default function FundAndWithdrawModal() { {isFunding - ? `Fund Account ${currentAccount?.id ?? '0'}` - : `Withdraw from Account ${currentAccount?.id ?? '0'}`} + ? `Fund Credit Account ${currentAccount?.id ?? '0'}` + : `Withdraw from Credit Account ${currentAccount?.id ?? '0'}`} } diff --git a/src/components/Modals/Vault/VaultDeposits.tsx b/src/components/Modals/Vault/VaultDeposits.tsx index 8d3a4618..0aaa2aa8 100644 --- a/src/components/Modals/Vault/VaultDeposits.tsx +++ b/src/components/Modals/Vault/VaultDeposits.tsx @@ -178,7 +178,7 @@ export default function VaultDeposit(props: Props) { strokeWidth={3} />
-
+
asset.denom === props.denom) ?? ASSETS[0] - const balance = props.amount ?? '0' + const balance = props.amount ?? BN_ZERO if (props.isDisplay) { return ( @@ -60,12 +61,12 @@ export default function Option(props: Props) { )} onClick={() => handleOnClick(asset.denom)} > -
+
{asset.symbol} - - {formatValue(balance, { + + {formatValue(balance.toString(), { decimals: asset.decimals, maxDecimals: 4, minDecimals: 0, @@ -76,8 +77,8 @@ export default function Option(props: Props) { {formatValue(5, { maxDecimals: 2, minDecimals: 0, prefix: 'APY ', suffix: '%' })}
) diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx index ab55b373..1b204bb1 100644 --- a/src/components/Select/index.tsx +++ b/src/components/Select/index.tsx @@ -53,7 +53,7 @@ export default function Select(props: Props) { return (
{props.label && ( - + {props.label} )} @@ -98,9 +98,9 @@ export default function Select(props: Props) { setShow={setShowDropdown} hasBackdropIsolation > -
+
{props.title && ( - + {props.title} )} diff --git a/src/components/TitleAndSubCell.tsx b/src/components/TitleAndSubCell.tsx index b4e93756..49cfc0b3 100644 --- a/src/components/TitleAndSubCell.tsx +++ b/src/components/TitleAndSubCell.tsx @@ -11,7 +11,7 @@ interface Props { export default function TitleAndSubCell(props: Props) { return ( -
+
{props.title} diff --git a/src/components/TokenInput/TokenInputWithSlider.tsx b/src/components/TokenInput/TokenInputWithSlider.tsx index d74fe484..a7526368 100644 --- a/src/components/TokenInput/TokenInputWithSlider.tsx +++ b/src/components/TokenInput/TokenInputWithSlider.tsx @@ -4,6 +4,7 @@ import { useEffect, useState } from 'react' import Slider from 'components/Slider' import TokenInput from 'components/TokenInput' import { BN_ZERO } from 'constants/math' +import { BNCoin } from 'types/classes/BNCoin' import { BN } from 'utils/helpers' interface Props { @@ -12,7 +13,7 @@ interface Props { max: BigNumber onChange: (amount: BigNumber) => void accountId?: string - balances?: Coin[] + balances?: BNCoin[] className?: string disabled?: boolean hasSelect?: boolean diff --git a/src/components/TokenInput/index.tsx b/src/components/TokenInput/index.tsx index f77a6d0f..27697718 100644 --- a/src/components/TokenInput/index.tsx +++ b/src/components/TokenInput/index.tsx @@ -21,7 +21,7 @@ interface Props { max: BigNumber onChange: (amount: BigNumber) => void accountId?: string - balances?: Coin[] + balances?: BNCoin[] className?: string disabled?: boolean hasSelect?: boolean @@ -63,12 +63,12 @@ export default function TokenInput(props: Props) { options={props.balances} defaultValue={props.asset.denom} onChange={onChangeAsset} - title={props.accountId ? `Account ${props.accountId}` : 'Your Wallet'} + title={props.accountId ? `Credit Account ${props.accountId}` : 'Your Wallet'} className='h-full border-r border-white/20 bg-white/5' displayClassName='rounded-l-sm' /> ) : ( -
+
{props.asset.symbol}
@@ -80,7 +80,7 @@ export default function TokenInput(props: Props) { onChange={props.onChange} amount={props.amount} max={props.max} - className='flex-1 border-none p-3' + className='flex-1 p-3 border-none' /> {props.onDelete && (
@@ -101,7 +101,7 @@ export default function TokenInput(props: Props) {
-
+
{props.maxText && ( <> diff --git a/src/constants/assets.ts b/src/constants/assets.ts index bf13b69a..a415c9c8 100644 --- a/src/constants/assets.ts +++ b/src/constants/assets.ts @@ -131,8 +131,8 @@ export const ASSETS: Asset[] = [ forceFetchPrice: false, }, { - symbol: 'gamm/pool/12', - name: 'gamm/pool/12', + symbol: 'OSMO-ATOM', + name: 'OSMO-ATOM LP', id: 'gamm/pool/12', denom: 'gamm/pool/12', color: '', diff --git a/src/hooks/useUpdatedAccount/index.ts b/src/hooks/useUpdatedAccount/index.ts index ce78c188..250f2bd8 100644 --- a/src/hooks/useUpdatedAccount/index.ts +++ b/src/hooks/useUpdatedAccount/index.ts @@ -55,7 +55,8 @@ export function useUpdatedAccount(account?: Account) { const simulateBorrow = useCallback( (target: 'wallet' | 'deposit' | 'lend', coin: BNCoin) => { if (!account) return - resetAccount() + removeDeposits([]) + removeLends([]) addDebts([coin]) if (target === 'deposit') addDeposits([coin]) if (target === 'lend') addLends([coin]) @@ -67,8 +68,6 @@ export function useUpdatedAccount(account?: Account) { (isLendAction: boolean, coin: BNCoin) => { if (!account) return - resetAccount() - if (isLendAction) { addLends([coin]) removeDeposits([coin]) @@ -84,8 +83,8 @@ export function useUpdatedAccount(account?: Account) { const simulateRepay = useCallback( (coin: BNCoin) => { if (!account) return - removeDebts([coin]) const { deposits, lends } = getDepositsAndLendsAfterCoinSpent(coin, account) + removeDebts([coin]) removeDeposits([deposits]) removeLends([lends]) }, @@ -95,22 +94,32 @@ export function useUpdatedAccount(account?: Account) { const simulateDeposits = useCallback( (target: 'deposit' | 'lend', coins: BNCoin[]) => { if (!account) return - resetAccount() + addDeposits([]) + addLends([]) if (target === 'deposit') addDeposits(coins) if (target === 'lend') addLends(coins) }, [account, addDeposits, addLends], ) - const resetAccount = () => { - addDeposits([]) - removeDeposits([]) - addDebts([]) - removeDebts([]) - addVaultValues([]) - addLends([]) - removeLends([]) - } + const simulateWithdraw = useCallback( + (withdrawWithBorrowing: boolean, coin: BNCoin) => { + if (!account) return + removeDeposits([]) + removeLends([]) + addDebts([]) + + const { deposits, lends } = getDepositsAndLendsAfterCoinSpent(coin, account) + const totalBalance = deposits.amount.plus(lends.amount) + removeDeposits([deposits]) + removeLends([lends]) + if (withdrawWithBorrowing) { + addDebts([BNCoin.fromDenomAndBigNumber(coin.denom, coin.amount.minus(totalBalance))]) + } + }, + [account, removeDeposits, removeLends, addDebts], + ) + useEffect(() => { if (!account) return @@ -157,5 +166,6 @@ export function useUpdatedAccount(account?: Account) { simulateDeposits, simulateLending, simulateRepay, + simulateWithdraw, } } diff --git a/src/store/slices/broadcast.ts b/src/store/slices/broadcast.ts index 634dae71..bdee7144 100644 --- a/src/store/slices/broadcast.ts +++ b/src/store/slices/broadcast.ts @@ -118,7 +118,7 @@ export default function createBroadcastSlice( handleResponseMessages( response, `Borrowed ${formatAmountWithSymbol(options.coin)} to ${ - options.borrowToWallet ? 'Wallet' : `Account ${options.accountId}` + options.borrowToWallet ? 'Wallet' : `Credit Account ${options.accountId}` }`, ) return !!response.result @@ -135,7 +135,7 @@ export default function createBroadcastSlice( if (response.result) { set({ createAccountModal: false }) const id = getSingleValueFromBroadcastResult(response.result, 'wasm', 'token_id') - set({ fundAccountModal: true, toast: { message: `Account ${id} created` } }) + set({ fundAccountModal: true, toast: { message: `Credit Account ${id} created` } }) return id } else { set({ @@ -175,7 +175,7 @@ export default function createBroadcastSlice( ], }) - handleResponseMessages(response, `Account ${options.accountId} deleted`) + handleResponseMessages(response, `Credit Account ${options.accountId} deleted`) return !!response.result }, @@ -236,7 +236,10 @@ export default function createBroadcastSlice( const depositString = options.coins .map((coin) => formatAmountWithSymbol(coin.toCoin())) .join(' and ') - handleResponseMessages(response, `Deposited ${depositString} to Account ${options.accountId}`) + handleResponseMessages( + response, + `Deposited ${depositString} to Credit Credit Account ${options.accountId}`, + ) return !!response.result }, unlock: async (options: { accountId: string; vault: DepositedVault; amount: string }) => { @@ -351,7 +354,7 @@ export default function createBroadcastSlice( .join('and ') handleResponseMessages( response, - `Withdrew ${withdrawString} from Account ${options.accountId}`, + `Withdrew ${withdrawString} from Credit Account ${options.accountId}`, ) return !!response.result }, @@ -385,7 +388,9 @@ export default function createBroadcastSlice( handleResponseMessages( response, - `Repayed ${formatAmountWithSymbol(options.coin.toCoin())} to Account ${options.accountId}`, + `Repayed ${formatAmountWithSymbol(options.coin.toCoin())} to Credit Account ${ + options.accountId + }`, ) return !!response.result }, diff --git a/src/types/classes/BNCoin.ts b/src/types/classes/BNCoin.ts index cecca3a3..73e477cd 100644 --- a/src/types/classes/BNCoin.ts +++ b/src/types/classes/BNCoin.ts @@ -2,6 +2,9 @@ import { ActionCoin } from 'types/generated/mars-credit-manager/MarsCreditManage import { BN } from 'utils/helpers' export class BNCoin { + static fromDenom(denom: string, arg1: string): BNCoin { + throw new Error('Method not implemented.') + } public denom: string public amount: BigNumber diff --git a/src/types/interfaces/asset.d.ts b/src/types/interfaces/asset.d.ts index aa6a6927..2763f1a0 100644 --- a/src/types/interfaces/asset.d.ts +++ b/src/types/interfaces/asset.d.ts @@ -13,7 +13,7 @@ interface Asset { | 'WETH.axl' | 'OSMO-USDC.n' | '$' - | 'gamm/pool/12' + | 'OSMO-ATOM' id: | 'OSMO' | 'ATOM' diff --git a/src/types/interfaces/select.d.ts b/src/types/interfaces/select.d.ts index 0eb37176..f9f2da1b 100644 --- a/src/types/interfaces/select.d.ts +++ b/src/types/interfaces/select.d.ts @@ -2,5 +2,5 @@ interface SelectOption { value?: string label?: string | ReactNode denom?: string - amount?: string + amount?: BigNumber } diff --git a/src/utils/accounts.ts b/src/utils/accounts.ts index 0ed2c298..3e4c995a 100644 --- a/src/utils/accounts.ts +++ b/src/utils/accounts.ts @@ -205,6 +205,29 @@ export function cloneAccount(account: Account): Account { } } +export function removeDepostisAndLends(account: Account, denom: string) { + const deposits = account.deposits.filter((deposit) => deposit.denom !== denom) + const lends = account.lends.filter((lend) => lend.denom !== denom) + + deposits.push(BNCoin.fromDenomAndBigNumber(denom, BN_ZERO)) + lends.push(BNCoin.fromDenomAndBigNumber(denom, BN_ZERO)) + + return { + ...account, + deposits, + lends, + } +} + +export function getMergedBalances(account: Account, assets: Asset[]) { + const balances: BNCoin[] = [] + assets.forEach((asset) => { + const balance = accumulateAmounts(asset.denom, [...account.deposits, ...account.lends]) + balances.push(BNCoin.fromDenomAndBigNumber(asset.denom, balance)) + }) + return balances +} + export function computeHealthGaugePercentage(health: number) { const ATTENTION_CUTOFF = 10 const HEALTHY_CUTOFF = 30