[release] kintsugi 2.31.1

.eslintignore

@@ -1,4 +1,4 @@
 node_modules
 build
 src/react-app-env.d.ts
-api
+/api

package.json

@@ -7,7 +7,7 @@
     "@headlessui/react": "^1.1.1",
     "@heroicons/react": "^2.0.0",
     "@interlay/bridge": "0.2.7",
-    "@interlay/interbtc-api": "2.1.1",
+    "@interlay/interbtc-api": "2.2.2",
     "@interlay/monetary-js": "0.7.2",
     "@polkadot/api": "9.14.2",
     "@polkadot/extension-dapp": "0.44.1",

src/assets/locales/en/translation.json

@@ -514,7 +514,7 @@
     }
   },
   "staking_page": {
-    "the_estimated_amount_of_governance_token_you_will_receive_as_rewards": "The estimated amount of {{governanceTokenSymbol}} per year you will receive as rewards. Depends on your proportion of the total {{voteGovernanceTokenSymbol}}.",
+    "the_estimated_amount_of_governance_token_you_will_receive_as_rewards": "The estimated amount of {{governanceTokenSymbol}} you will receive as rewards. Depends on your proportion of the total {{voteGovernanceTokenSymbol}}.",
     "new_vote_governance_token_gained": "New {{voteGovernanceTokenSymbol}} Gained",
     "the_increase_in_your_vote_governance_token_balance": "The increase in your {{voteGovernanceTokenSymbol}} balance",
     "total_vote_governance_token_in_the_network": "Total {{voteGovernanceTokenSymbol}} in the network",

src/components/FundWallet/FundWallet.tsx

@@ -58,7 +58,12 @@ const FundWallet = forwardRef<HTMLButtonElement, FundWalletProps>(
                       {description}
                       <StyledEntities>
                         {entities.map((entity, key) => (
-                          <StyledEntitiesItem key={key} target='_blank' rel='noopener noreferrer' to={entity.link}>
+                          <StyledEntitiesItem
+                            key={key}
+                            target='_blank'
+                            rel='noopener noreferrer'
+                            to={{ pathname: entity.pathname, search: entity.search }}
+                          >
                             {entity.icon}
                           </StyledEntitiesItem>
                         ))}

src/components/FundWallet/use-entities.tsx

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { LinkProps } from 'react-router-dom';
 
 import BANXA_INTERLAY from '@/assets/img/banxa-dark.png';
 import BANXA_KITNSUGI from '@/assets/img/banxa-white.png';
@@ -11,14 +10,14 @@ import { ReactComponent as MexcLogoForInterlayIcon } from '@/assets/img/exchange
 import { ReactComponent as MexcLogoForKintsugiIcon } from '@/assets/img/exchanges/mexc-logo-for-kintsugi.svg';
 import { ReactComponent as StellaSwapLogoIcon } from '@/assets/img/exchanges/stellaswap-logo.svg';
 import { ReactComponent as ZenlinkLogoIcon } from '@/assets/img/exchanges/zenlink-logo.svg';
-import { BANXA_LINK, LINK_QUERY_PARAMETERS } from '@/config/links';
 import { GOVERNANCE_TOKEN } from '@/config/relay-chains';
+import { EXTERNAL_PAGES, EXTERNAL_QUERY_PARAMETERS } from '@/utils/constants/links';
 import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names';
 import { useWallet } from '@/utils/hooks/use-wallet';
 
 const queryString = require('query-string');
 
-type FundWalletEntities = { link: LinkProps['to']; icon: ReactNode };
+type FundWalletEntities = { pathname: string; search?: string; icon: ReactNode };
 
 type UseEntitiesResult = {
   exchanges: FundWalletEntities[];
@@ -29,43 +28,48 @@ const useEntities = (): UseEntitiesResult => {
   const wallet = useWallet();
 
   const banxaLink = {
-    pathname: BANXA_LINK,
+    pathname: EXTERNAL_PAGES.BANXA,
     search: queryString.stringify({
-      [LINK_QUERY_PARAMETERS.BANXA.WALLET_ADDRESS]: wallet.getRelayChainAddress(),
-      [LINK_QUERY_PARAMETERS.BANXA.FIAT_TYPE]: 'EUR',
-      [LINK_QUERY_PARAMETERS.BANXA.COIN_TYPE]: GOVERNANCE_TOKEN.ticker
+      [EXTERNAL_QUERY_PARAMETERS.BANXA.WALLET_ADDRESS]: wallet.account?.toString(),
+      [EXTERNAL_QUERY_PARAMETERS.BANXA.FIAT_TYPE]: 'EUR',
+      [EXTERNAL_QUERY_PARAMETERS.BANXA.COIN_TYPE]: GOVERNANCE_TOKEN.ticker
     })
   };
 
   if (process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT) {
     const exchanges = [
       {
-        link: 'https://acala.network/',
+        pathname: 'https://acala.network/',
         icon: <AcalaLogoIcon width={122} height={48} />
       },
       {
-        link: 'https://stellaswap.com/',
+        pathname: 'https://stellaswap.com/',
         icon: <StellaSwapLogoIcon width={122} height={25} />
       },
       {
-        link: 'https://trade.kraken.com/charts/KRAKEN:INTR-USD',
+        pathname: 'https://trade.kraken.com/charts/KRAKEN:INTR-USD',
         icon: <KrakenLogoIcon width={122} height={20} />
       },
       {
-        link: 'https://www.gate.io/trade/INTR_USDT',
+        pathname: 'https://www.gate.io/trade/INTR_USDT',
         icon: <GateLogoIcon width={122} height={37} />
       },
       {
-        link: 'https://www.mexc.com/exchange/INTR_USDT',
+        pathname: 'https://www.mexc.com/exchange/INTR_USDT',
         icon: <MexcLogoForInterlayIcon width={148} height={18} />
       },
       {
-        link: 'https://www.lbank.info/exchange/intr/usdt',
+        pathname: 'https://www.lbank.info/exchange/intr/usdt',
         icon: <LbankLogoIcon width={117} height={22} />
       }
     ];
 
-    const payments = [{ link: banxaLink, icon: <img src={BANXA_INTERLAY} alt='banxa' /> }];
+    const payments = [
+      {
+        ...banxaLink,
+        icon: <img src={BANXA_INTERLAY} alt='banxa' />
+      }
+    ];
 
     return {
       exchanges,
@@ -74,24 +78,24 @@ const useEntities = (): UseEntitiesResult => {
   } else if (process.env.REACT_APP_RELAY_CHAIN_NAME === KUSAMA) {
     const exchanges = [
       {
-        link: 'https://www.kraken.com/en-gb/prices/kint-kintsugi-price-chart/usd-us-dollar?interval=1m',
+        pathname: 'https://www.kraken.com/en-gb/prices/kint-kintsugi-price-chart/usd-us-dollar?interval=1m',
         icon: <KrakenLogoIcon width={122} height={20} />
       },
       {
-        link: 'https://www.gate.io/de/trade/kint_usdt',
+        pathname: 'https://www.gate.io/de/trade/kint_usdt',
         icon: <GateLogoIcon width={122} height={37} />
       },
       {
-        link: 'https://dex.zenlink.pro/#/swap',
+        pathname: 'https://dex.zenlink.pro/#/swap',
         icon: <ZenlinkLogoIcon width={119} height={35} />
       },
       {
-        link: 'https://www.mexc.com/de-DE/exchange/KINT_USDT',
+        pathname: 'https://www.mexc.com/de-DE/exchange/KINT_USDT',
         icon: <MexcLogoForKintsugiIcon width={167} height={21} />
       }
     ];
 
-    const payments = [{ link: banxaLink, icon: <img src={BANXA_KITNSUGI} alt='banxa' /> }];
+    const payments = [{ ...banxaLink, icon: <img src={BANXA_KITNSUGI} alt='banxa' /> }];
 
     return {
       exchanges,

src/components/LoanPositionsTable/LoanPositionsTable.tsx

@@ -7,6 +7,7 @@ import { convertMonetaryAmountToValueInUSD } from '@/common/utils/utils';
 import { Switch } from '@/component-library';
 import { LoanType } from '@/types/loans';
 import { getTokenPrice } from '@/utils/helpers/prices';
+import { useGetAccountSubsidyRewards } from '@/utils/hooks/api/loans/use-get-account-subsidy-rewards';
 import { useGetPrices } from '@/utils/hooks/api/use-get-prices';
 
 import { AssetCell, BalanceCell, Table, TableProps } from '../DataGrid';
@@ -52,6 +53,7 @@ const LoanPositionsTable = ({
   const titleId = useId();
   const { t } = useTranslation();
   const prices = useGetPrices();
+  const { data: subsidyRewards } = useGetAccountSubsidyRewards();
 
   const isLending = variant === 'lend';
   const showCollateral = !!onPressCollateralSwitch && isLending;
@@ -84,13 +86,13 @@ const LoanPositionsTable = ({
         const { currency } = amountProp;
         const asset = <AssetCell ticker={currency.ticker} />;
 
-        const { borrowApy, borrowReward, lendApy, lendReward } = assets[currency.ticker];
+        const { borrowApy, lendApy } = assets[currency.ticker];
 
         const apyCellProps = isLending
-          ? { apy: lendApy, rewards: lendReward }
+          ? { apy: lendApy, rewards: subsidyRewards ? subsidyRewards.perMarket[currency.ticker].lend : null }
           : {
               apy: borrowApy,
-              rewards: borrowReward,
+              rewards: subsidyRewards ? subsidyRewards.perMarket[currency.ticker].borrow : null,
               accumulatedDebt: (position as BorrowPosition).accumulatedDebt,
               isBorrow: true
             };
@@ -133,7 +135,7 @@ const LoanPositionsTable = ({
           collateral
         };
       }),
-    [assets, isLending, onPressCollateralSwitch, onRowAction, positions, prices, showCollateral]
+    [assets, isLending, onPressCollateralSwitch, onRowAction, positions, prices, showCollateral, subsidyRewards]
   );
 
   return (

src/config/links.ts

@@ -19,14 +19,6 @@ const KINTSUGI_SUBSCAN_LINK = 'https://kintsugi.subscan.io';
 const INTERLAY_VAULT_DOCS_LINK = 'https://docs.interlay.io/#/vault/overview';
 const INTERLAY_DOS_AND_DONTS_DOCS_LINK = 'https://docs.interlay.io/#/vault/installation?id=dos-and-donts';
 
-const LINK_QUERY_PARAMETERS = {
-  BANXA: {
-    WALLET_ADDRESS: 'walletAddress',
-    FIAT_TYPE: 'fiatType',
-    COIN_TYPE: 'coinType'
-  }
-};
-
 const BANXA_LINK = 'http://talisman.banxa.com/';
 
 export {
@@ -48,6 +40,5 @@ export {
   KINTSUGI_GOVERNANCE_LINK,
   KINTSUGI_SUBSCAN_LINK,
   KINTSUGI_TERMS_AND_CONDITIONS_LINK,
-  KINTSUGI_USE_WRAPPED_CURRENCY_LINK,
-  LINK_QUERY_PARAMETERS
+  KINTSUGI_USE_WRAPPED_CURRENCY_LINK
 };

src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx

@@ -5,8 +5,8 @@ import { useMutation } from 'react-query';
 import { toast } from 'react-toastify';
 
 import { formatUSD } from '@/common/utils/utils';
-import { Card, CTA, Dl, DlGroup } from '@/component-library';
-import { IsAuthenticated } from '@/components';
+import { Card, Dl, DlGroup } from '@/component-library';
+import { AuthCTA } from '@/components';
 import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils';
 import { submitExtrinsic } from '@/utils/helpers/extrinsic';
 import { AccountPoolsData } from '@/utils/hooks/api/amm/use-get-account-pools';
@@ -87,13 +87,11 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps)
           <StyledDt color='primary'>{t('rewards')}</StyledDt>
           <StyledDd color='secondary'>{formatUSD(totalClaimableRewardUSD, { compact: true })}</StyledDd>
         </DlGroup>
-        <IsAuthenticated>
-          {hasClaimableRewards && (
-            <CTA onClick={handleClickClaimRewards} loading={claimRewardsMutation.isLoading}>
-              Claim
-            </CTA>
-          )}
-        </IsAuthenticated>
+        {hasClaimableRewards && (
+          <AuthCTA onPress={handleClickClaimRewards} loading={claimRewardsMutation.isLoading}>
+            Claim
+          </AuthCTA>
+        )}
       </Card>
     </Dl>
   );

src/pages/Loans/LoansOverview/components/BorrowAssetsTable/BorrowAssetsTable.tsx

@@ -8,6 +8,7 @@ import { Cell, Table, TableProps } from '@/components';
 import { ApyCell } from '@/components/LoanPositionsTable/ApyCell';
 import { LoanTablePlaceholder } from '@/components/LoanPositionsTable/LoanTablePlaceholder';
 import { getTokenPrice } from '@/utils/helpers/prices';
+import { useGetAccountSubsidyRewards } from '@/utils/hooks/api/loans/use-get-account-subsidy-rewards';
 import { useGetPrices } from '@/utils/hooks/api/use-get-prices';
 
 import { StyledAssetCell } from './BorrowAssetsTable.style';
@@ -47,17 +48,19 @@ const BorrowAssetsTable = ({ assets, onRowAction, ...props }: BorrowAssetsTableP
   const titleId = useId();
   const { t } = useTranslation();
   const prices = useGetPrices();
+  const { data: subsidyRewards } = useGetAccountSubsidyRewards();
 
   const rows: BorrowAssetsTableRow[] = useMemo(
     () =>
-      Object.values(assets).map(({ borrowApy, currency, availableCapacity, borrowReward, totalBorrows }) => {
+      Object.values(assets).map(({ borrowApy, currency, availableCapacity, totalBorrows }) => {
         const asset = <StyledAssetCell ticker={currency.ticker} />;
+        const reward = subsidyRewards ? subsidyRewards.perMarket[currency.ticker].borrow : null;
 
         const apy = (
           <ApyCell
             apy={borrowApy}
             currency={currency}
-            rewards={borrowReward}
+            rewards={reward}
             prices={prices}
             isBorrow
             // TODO: temporary until we find why row click is being ignored
@@ -85,7 +88,7 @@ const BorrowAssetsTable = ({ assets, onRowAction, ...props }: BorrowAssetsTableP
           totalBorrowed
         };
       }),
-    [assets, prices, onRowAction]
+    [assets, prices, onRowAction, subsidyRewards]
   );
 
   return (

src/pages/Loans/LoansOverview/components/LendAssetsTable/LendAssetsTable.tsx

@@ -8,6 +8,7 @@ import { AssetCell, BalanceCell, Cell, Table, TableProps } from '@/components';
 import { ApyCell } from '@/components/LoanPositionsTable/ApyCell';
 import { LoanTablePlaceholder } from '@/components/LoanPositionsTable/LoanTablePlaceholder';
 import { getTokenPrice } from '@/utils/helpers/prices';
+import { useGetAccountSubsidyRewards } from '@/utils/hooks/api/loans/use-get-account-subsidy-rewards';
 import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances';
 import { useGetPrices } from '@/utils/hooks/api/use-get-prices';
 
@@ -47,17 +48,19 @@ const LendAssetsTable = ({ assets, onRowAction, ...props }: LendAssetsTableProps
   const { t } = useTranslation();
   const prices = useGetPrices();
   const { data: balances } = useGetBalances();
+  const { data: subsidyRewards } = useGetAccountSubsidyRewards();
 
   const rows: LendAssetsTableRow[] = useMemo(
     () =>
-      Object.values(assets).map(({ lendApy, lendReward, currency, totalLiquidity }) => {
+      Object.values(assets).map(({ lendApy, currency, totalLiquidity }) => {
         const asset = <AssetCell ticker={currency.ticker} />;
+        const reward = subsidyRewards ? subsidyRewards.perMarket[currency.ticker].lend : null;
 
         const apy = (
           <ApyCell
             apy={lendApy}
             currency={currency}
-            rewards={lendReward}
+            rewards={reward}
             prices={prices}
             // TODO: temporary until we find why row click is being ignored
             onClick={() => onRowAction?.(currency.ticker as Key)}
@@ -83,7 +86,7 @@ const LendAssetsTable = ({ assets, onRowAction, ...props }: LendAssetsTableProps
           totalSupply
         };
       }),
-    [assets, balances, onRowAction, prices]
+    [assets, balances, onRowAction, prices, subsidyRewards]
   );
 
   return (

src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx

@@ -4,8 +4,8 @@ import { useMutation } from 'react-query';
 import { toast } from 'react-toastify';
 
 import { formatNumber, formatPercentage, formatUSD } from '@/common/utils/utils';
-import { Card, CTA, Dl, DlGroup } from '@/component-library';
-import { IsAuthenticated } from '@/components';
+import { Card, Dl, DlGroup } from '@/component-library';
+import { AuthCTA } from '@/components';
 import ErrorModal from '@/legacy-components/ErrorModal';
 import { submitExtrinsic } from '@/utils/helpers/extrinsic';
 import { AccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics';
@@ -42,11 +42,11 @@ const LoansInsights = ({ statistics }: LoansInsightsProps): JSX.Element => {
   const netPercentage = formatPercentage(netAPY?.toNumber() || 0);
   const netPercentageLabel = `${netAPY?.gt(0) ? '+' : ''}${netPercentage}`;
 
-  const subsidyRewardsAmount = formatNumber(subsidyRewards?.toBig().toNumber() || 0, {
-    maximumFractionDigits: subsidyRewards?.currency.humanDecimals || 5
+  const subsidyRewardsAmount = formatNumber(subsidyRewards?.total.toBig().toNumber() || 0, {
+    maximumFractionDigits: subsidyRewards?.total.currency.humanDecimals || 5
   });
-  const subsidyRewardsAmountLabel = `${subsidyRewardsAmount} ${subsidyRewards?.currency.ticker || ''}`;
-  const hasSubsidyRewards = !!subsidyRewards && !subsidyRewards?.isZero();
+  const subsidyRewardsAmountLabel = `${subsidyRewardsAmount} ${subsidyRewards?.total.currency.ticker || ''}`;
+  const hasSubsidyRewards = !!subsidyRewards && !subsidyRewards?.total.isZero();
 
   return (
     <>
@@ -75,13 +75,11 @@ const LoansInsights = ({ statistics }: LoansInsightsProps): JSX.Element => {
             <StyledDt color='primary'>Rewards</StyledDt>
             <StyledDd color='secondary'>{subsidyRewardsAmountLabel}</StyledDd>
           </DlGroup>
-          <IsAuthenticated>
-            {hasSubsidyRewards && (
-              <CTA onClick={handleClickClaimRewards} loading={claimRewardsMutation.isLoading}>
-                Claim
-              </CTA>
-            )}
-          </IsAuthenticated>
+          {hasSubsidyRewards && (
+            <AuthCTA onPress={handleClickClaimRewards} loading={claimRewardsMutation.isLoading}>
+              Claim
+            </AuthCTA>
+          )}
         </Card>
       </Dl>
       {claimRewardsMutation.isError && (

src/pages/Staking/BalancesUI/index.tsx

@@ -92,7 +92,7 @@ const BalancesUI = ({ stakedAmount, voteStakedAmount, projectedRewardAmount }: P
         tokenSymbol={VOTE_GOVERNANCE_TOKEN_SYMBOL}
       />
       <BalanceItem
-        label={`Projected Rewards p.a.`}
+        label={`Projected ${GOVERNANCE_TOKEN_SYMBOL} Rewards`}
         value={projectedRewardAmount}
         tokenSymbol={GOVERNANCE_TOKEN_SYMBOL}
         tooltip={t('staking_page.the_estimated_amount_of_governance_token_you_will_receive_as_rewards', {

src/pages/Staking/index.tsx

@@ -844,7 +844,7 @@ const Staking = (): JSX.Element => {
               tooltip={`The APR may change as the amount of total ${VOTE_GOVERNANCE_TOKEN_SYMBOL} changes.`}
             />
             <InformationUI
-              label={`Projected Rewards p.a.`}
+              label={`Projected ${GOVERNANCE_TOKEN_SYMBOL} Rewards`}
               value={renderEstimatedRewardAmountLabel()}
               tooltip={t('staking_page.the_estimated_amount_of_governance_token_you_will_receive_as_rewards', {
                 governanceTokenSymbol: GOVERNANCE_TOKEN_SYMBOL,