Tom/release/kintsugi/2.29.2 (#1116)

* chore: add resolutions for various polkadot packages (#1089)

* Fix input field width issue (#1090)

* fix: input field width

* fix: rename max weeks to total weeks

* chore: bump ui version

* chore: bump XCM bridge (#1093)

* feat(Wallet): add page (#1001)

* feat(Wallet): add page

* feat: add WalletIcon

* feat: copy address

* wip

* feat: staking table

* feat: refactor and add lending

* refactor: clean up code

* wip

* feat: add List card

* continue

* fix: continue

* feat: continue

* feat(CTALink): improve

* feat: add responsiveness and swap handling

* feat: final

* feat: add responsive prop

* fix: clean up List and Divider

* feat: add tests

* feat: add final tests

* fix: code review

* feat: add vesting and tests

* fix: code review

* Tom/bug/burn form collateral tokens (#1042)

* refactor: loop collateral to get burnable tokens

* refactor: revert previous change and simplify

* refactor: add function to filter tokens

* refactor: fetch collateral currencies and render token values

* wip: form layout and translation

* wip: set data and selected collateral

* chore: remove console log

* refactor: remove single collateral code

* chore: comment

* fix: incorrect USD value

* chore: remove testing code

* refactor: remove native token import

* refactor: add BurnableCollateral type

* refactor: add fullWidth prop and label to token selector

* refactor: collateral icon

* chore: add dictionary item

* chore: remove unnecessary conditional operators

* refactor: handle callback

* refactor: fix failing test

* chore: remove unused code

* refactor: add success notification to burn form

* Add CORS to market data (#1096)

* chore: add env variables to config

* chore: add cors to market data api

---------

Co-authored-by: ns212 <nikolai@interlay.io>

* fix: revert to using 0.2.x version of the bridge (#1095)

* chore: improve price impact warning copy

* chore: release v2.29.0

* fix(amm): use correct hooks dependencies (#1105)

* fix: update useGetCurrencies callbacks dependency arrays (#1108)

* chore: release v2.29.1

* [wallet] improve wallet balance (#1109)

* wip: correct wallet balance

* refactor: account for borrow and lend positions when calculating total balance

* refactor: add total liquidity balance

* fix: typo

* chore: add TODO

* refactor: remove unnecessary toString call

* refactor: redirect home route to wallet if enabled, defaulting to bridge if not

* refactor: remove duplicated calculations

* refactor: return liquidity pools calculation from hook

* chore: release v2.29.2

---------

Co-authored-by: Brendon Votteler <bvotteler@users.noreply.github.com>
Co-authored-by: Chanakya888 <samuraichanakya1@gmail.com>
Co-authored-by: Daniel Simão <rui.daniel.simao@gmail.com>
Co-authored-by: ns212 <nikolai@interlay.io>
Co-authored-by: Dominik Harz <dominik.harz@gmail.com>
Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com>

package.json

@@ -1,12 +1,12 @@
 {
   "name": "interbtc-ui",
-  "version": "2.29.1",
+  "version": "2.29.2",
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.1.1",
     "@headlessui/react": "^1.1.1",
     "@heroicons/react": "^2.0.0",
-    "@interlay/bridge": "^0.2.7",
+    "@interlay/bridge": "0.2.7",
     "@interlay/interbtc-api": "2.0.3",
     "@interlay/monetary-js": "0.7.2",
     "@polkadot/api": "9.14.2",

src/App.tsx

@@ -215,7 +215,7 @@ const App = (): JSX.Element => {
                   <Route path={PAGES.ACTIONS}>
                     <Actions />
                   </Route>
-                  <Redirect exact from={PAGES.HOME} to={PAGES.BRIDGE} />
+                  <Redirect exact from={PAGES.HOME} to={isWalletEnabled ? PAGES.WALLET : PAGES.BRIDGE} />
                   <Route path='*'>
                     <NoMatch />
                   </Route>

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')}
           </Dt>
           <Dd weight='bold' color='secondary'>
-            {transfarableBalanceLabel}
+            {transferableBalanceLabel}
           </Dd>
         </DlGroup>
       </Card>

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<LpCurr
 interface AccountPoolsData {
   positions: AccountLiquidityPool[];
   claimableRewards: Map<LpCurrency, MonetaryAmount<CurrencyExt>[]>;
+  accountLiquidityUSD: Big;
 }
 
-const getAccountLiqudityPools = async (accountId: AccountId, pools: LiquidityPool[]): Promise<AccountPoolsData> => {
+const getAccountLiqudityPools = async (
+  accountId: AccountId,
+  pools: LiquidityPool[],
+  prices: Prices
+): Promise<AccountPoolsData> => {
   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
   });

yarn.lock

@@ -2542,7 +2542,7 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
   integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==
 
-"@interlay/bridge@^0.2.7":
+"@interlay/bridge@0.2.7":
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.2.7.tgz#06b5e4bf531f5aad55e9258ee606b1dfb62e8b5a"
   integrity sha512-kpdqBw+AFPx41nsnfEpBbfkQRbt+x1dyKq7zoEfm4a4vHQMgl15BK6UCvpO8LN4o6iRpIYP4xTOcfYytC7BzhQ==