diff --git a/package.json b/package.json index 3ac202d6d1..db175d0d7d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.29.1", + "version": "2.29.3", "private": true, "dependencies": { "@craco/craco": "^6.1.1", diff --git a/src/App.tsx b/src/App.tsx index fc2f89f241..3a16fbf509 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -215,7 +215,7 @@ const App = (): JSX.Element => { - + diff --git a/src/pages/Staking/index.tsx b/src/pages/Staking/index.tsx index d56075801e..15914d27ff 100644 --- a/src/pages/Staking/index.tsx +++ b/src/pages/Staking/index.tsx @@ -319,10 +319,11 @@ const Staking = (): JSX.Element => { React.useEffect(() => { if (!lockTime) return; + if (!currentBlockNumber) return; const lockTimeValue = Number(lockTime); - setBlockLockTimeExtension(convertWeeksToBlockNumbers(lockTimeValue)); - }, [lockTime]); + setBlockLockTimeExtension(currentBlockNumber + convertWeeksToBlockNumbers(lockTimeValue)); + }, [currentBlockNumber, lockTime]); React.useEffect(() => { reset({ diff --git a/src/pages/Transfer/CrossChainTransferForm/index.tsx b/src/pages/Transfer/CrossChainTransferForm/index.tsx index c5f88a6cda..16dbf590aa 100644 --- a/src/pages/Transfer/CrossChainTransferForm/index.tsx +++ b/src/pages/Transfer/CrossChainTransferForm/index.tsx @@ -131,7 +131,7 @@ const CrossChainTransferForm = (): JSX.Element => { const availableFromChains: Array = XCMBridge.adapters.map((adapter: any) => { return { type: adapter.chain.id, - name: adapter.chain.id, + name: adapter.chain.display, icon: }; }); @@ -149,7 +149,7 @@ const CrossChainTransferForm = (): JSX.Element => { const availableToChains = destinationChains.map((chain: any) => { return { type: chain.id, - name: chain.id, + name: chain.display, icon: }; }); diff --git a/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx b/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx index 234b4368db..ddbfbe04d3 100644 --- a/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx +++ b/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx @@ -5,6 +5,8 @@ import { convertMonetaryAmountToValueInUSD, formatUSD } from '@/common/utils/uti import { Card, Dd, Dl, DlGroup, Dt, theme } from '@/component-library'; import { useMediaQuery } from '@/component-library/utils/use-media-query'; import { getTokenPrice } from '@/utils/helpers/prices'; +import { useGetAccountPools } from '@/utils/hooks/api/amm/use-get-account-pools'; +import { useGetAccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; import { BalanceData } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; @@ -18,9 +20,12 @@ const WalletInsights = ({ balances }: WalletInsightsProps): JSX.Element => { const { t } = useTranslation(); const prices = useGetPrices(); + const { data: accountLendingStatistics } = useGetAccountLendingStatistics(); + const { data: accountPools } = useGetAccountPools(); + const isMobile = useMediaQuery(theme.breakpoints.down('md')); - const totalBalance = + const rawBalance = balances && Object.values(balances).reduce( (total, balance) => @@ -33,9 +38,14 @@ const WalletInsights = ({ balances }: WalletInsightsProps): JSX.Element => { new Big(0) ); + const totalBalance = rawBalance + ?.add(accountLendingStatistics?.supplyAmountUSD || 0) + .sub(accountLendingStatistics?.borrowAmountUSD || 0) + .add(accountPools?.accountLiquidityUSD || 0); + const totalBalanceLabel = totalBalance ? formatUSD(totalBalance.toNumber(), { compact: true }) : '-'; - const transfarableBalance = + const transferableBalance = balances && Object.values(balances).reduce( (total, balance) => @@ -48,8 +58,8 @@ const WalletInsights = ({ balances }: WalletInsightsProps): JSX.Element => { new Big(0) ); - const transfarableBalanceLabel = transfarableBalance - ? formatUSD(transfarableBalance.toNumber(), { compact: true }) + const transferableBalanceLabel = transferableBalance + ? formatUSD(transferableBalance.toNumber(), { compact: true }) : '-'; return ( @@ -73,7 +83,7 @@ const WalletInsights = ({ balances }: WalletInsightsProps): JSX.Element => { {t('transferable_balance')}
- {transfarableBalanceLabel} + {transferableBalanceLabel}
diff --git a/src/utils/hooks/api/amm/use-get-account-pools.tsx b/src/utils/hooks/api/amm/use-get-account-pools.tsx index 4c38e495db..2d440ddbae 100644 --- a/src/utils/hooks/api/amm/use-get-account-pools.tsx +++ b/src/utils/hooks/api/amm/use-get-account-pools.tsx @@ -1,10 +1,13 @@ import { CurrencyExt, isCurrencyEqual, LiquidityPool, LpCurrency } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; import { AccountId } from '@polkadot/types/interfaces'; +import Big from 'big.js'; import { useErrorHandler } from 'react-error-boundary'; import { useQuery } from 'react-query'; +import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils'; import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; +import { Prices, useGetPrices } from '@/utils/hooks/api/use-get-prices'; import useAccountId from '../../use-account-id'; import { useGetLiquidityPools } from './use-get-liquidity-pools'; @@ -14,9 +17,14 @@ type AccountLiquidityPool = { data: LiquidityPool; amount: MonetaryAmount[]>; + accountLiquidityUSD: Big; } -const getAccountLiqudityPools = async (accountId: AccountId, pools: LiquidityPool[]): Promise => { +const getAccountLiqudityPools = async ( + accountId: AccountId, + pools: LiquidityPool[], + prices: Prices +): Promise => { const accountLiquidityPools = await window.bridge.amm.getLiquidityProvidedByAccount(accountId); const claimableRewards = await window.bridge.amm.getClaimableFarmingRewards(accountId, accountLiquidityPools, pools); const filteredPools = accountLiquidityPools.filter((lpToken) => !lpToken.isZero()); @@ -31,7 +39,18 @@ const getAccountLiqudityPools = async (accountId: AccountId, pools: LiquidityPoo return [...acc, data]; }, []); - return { positions, claimableRewards }; + const accountLiquidityUSD = positions + .map(({ data, amount: accountLPTokenAmount }) => { + const { pooledCurrencies, totalSupply } = data; + const totalLiquidityUSD = calculateTotalLiquidityUSD(pooledCurrencies, prices); + + return accountLPTokenAmount + ? calculateAccountLiquidityUSD(accountLPTokenAmount, totalLiquidityUSD, totalSupply) + : 0; + }) + .reduce((total, accountLPTokenAmount) => total.add(accountLPTokenAmount), new Big(0)); + + return { positions, claimableRewards, accountLiquidityUSD }; }; interface UseGetAccountProvidedLiquidity { @@ -42,12 +61,13 @@ interface UseGetAccountProvidedLiquidity { // Mixes current pools with liquidity provided by the account const useGetAccountPools = (): UseGetAccountProvidedLiquidity => { const accountId = useAccountId(); + const prices = useGetPrices(); const { data: liquidityPools, refetch: refetchLiquidityPools } = useGetLiquidityPools(); const queryKey = ['account-pools', accountId]; const { data, error, refetch: refetchQuery } = useQuery({ queryKey: ['account-pools', accountId], - queryFn: () => accountId && liquidityPools && getAccountLiqudityPools(accountId, liquidityPools), + queryFn: () => accountId && liquidityPools && prices && getAccountLiqudityPools(accountId, liquidityPools, prices), enabled: !!liquidityPools, refetchInterval: BLOCKTIME_REFETCH_INTERVAL });