Merge pull request #1207 from interlay/tom/release/kintsugi/2.31.2

[release] Kintsugi 2.31.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "interbtc-ui",
-  "version": "2.31.1",
+  "version": "2.31.2",
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.1.1",

src/components/FundWallet/FundWallet.tsx

@@ -1,6 +1,9 @@
-import { forwardRef, useState } from 'react';
+import { forwardRef } from 'react';
 import { TFunction, useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
 
+import { showBuyModal } from '@/common/actions/general.actions';
+import { StoreType } from '@/common/types/util.types';
 import { CTAProps, Flex, Modal, ModalBody, ModalHeader, P, TabsItem } from '@/component-library';
 import { GOVERNANCE_TOKEN } from '@/config/relay-chains';
 
@@ -37,15 +40,16 @@ type FundWalletProps = CTAProps;
 const FundWallet = forwardRef<HTMLButtonElement, FundWalletProps>(
   (props, ref): JSX.Element => {
     const { t } = useTranslation();
-    const [isOpen, setOpen] = useState(false);
     const entitiesData = useEntities();
+    const dispatch = useDispatch();
+    const { isBuyModalOpen } = useSelector((state: StoreType) => state.general);
 
     return (
       <>
-        <StyledCTA variant='outlined' ref={ref} onPress={() => setOpen(true)} {...props}>
+        <StyledCTA variant='outlined' ref={ref} onPress={() => dispatch(showBuyModal(true))} {...props}>
           {t('fund_wallet')}
         </StyledCTA>
-        <Modal align='top' isOpen={isOpen} onClose={() => setOpen(false)}>
+        <Modal align='top' isOpen={isBuyModalOpen} onClose={() => dispatch(showBuyModal(false))}>
           <ModalHeader>{t('fund_wallet')}</ModalHeader>
           <ModalBody noPadding>
             <StyledTabs size='large' fullWidth>

src/components/LoanPositionsTable/ApyCell.tsx

@@ -14,7 +14,8 @@ type ApyCellProps = {
   currency: CurrencyExt;
   earnedInterest?: MonetaryAmount<CurrencyExt>;
   accumulatedDebt?: MonetaryAmount<CurrencyExt>;
-  rewards: MonetaryAmount<CurrencyExt> | null;
+  rewardsPerYear: MonetaryAmount<CurrencyExt> | null;
+  accruedRewards: MonetaryAmount<CurrencyExt> | null;
   prices?: Prices;
   isBorrow?: boolean;
   onClick?: () => void;
@@ -23,14 +24,15 @@ type ApyCellProps = {
 const ApyCell = ({
   apy,
   currency,
-  rewards,
+  rewardsPerYear,
+  accruedRewards,
   accumulatedDebt,
   earnedInterest,
   prices,
   isBorrow = false,
   onClick
 }: ApyCellProps): JSX.Element => {
-  const rewardsApy = getSubsidyRewardApy(currency, rewards, prices);
+  const rewardsApy = getSubsidyRewardApy(currency, rewardsPerYear, prices);
 
   const totalApy = isBorrow ? apy.sub(rewardsApy || 0) : apy.add(rewardsApy || 0);
   const totalApyLabel = isBorrow ? `-${getApyLabel(totalApy)}` : getApyLabel(totalApy);
@@ -52,7 +54,7 @@ const ApyCell = ({
         apy={apy}
         currency={currency}
         prices={prices}
-        rewards={rewards}
+        rewards={accruedRewards}
         rewardsApy={rewardsApy}
         isBorrow={isBorrow}
         accumulatedDebt={accumulatedDebt}

src/components/LoanPositionsTable/LoanPositionsTable.tsx

@@ -86,13 +86,18 @@ const LoanPositionsTable = ({
         const { currency } = amountProp;
         const asset = <AssetCell ticker={currency.ticker} />;
 
-        const { borrowApy, lendApy } = assets[currency.ticker];
+        const { borrowApy, lendApy, lendReward, borrowReward } = assets[currency.ticker];
 
         const apyCellProps = isLending
-          ? { apy: lendApy, rewards: subsidyRewards ? subsidyRewards.perMarket[currency.ticker].lend : null }
+          ? {
+              apy: lendApy,
+              rewardsPerYear: lendReward,
+              accruedRewards: subsidyRewards ? subsidyRewards.perMarket[currency.ticker].lend : null
+            }
           : {
               apy: borrowApy,
-              rewards: subsidyRewards ? subsidyRewards.perMarket[currency.ticker].borrow : null,
+              rewardsPerYear: borrowReward,
+              accruedRewards: subsidyRewards ? subsidyRewards.perMarket[currency.ticker].borrow : null,
               accumulatedDebt: (position as BorrowPosition).accumulatedDebt,
               isBorrow: true
             };

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

@@ -52,15 +52,16 @@ const BorrowAssetsTable = ({ assets, onRowAction, ...props }: BorrowAssetsTableP
 
   const rows: BorrowAssetsTableRow[] = useMemo(
     () =>
-      Object.values(assets).map(({ borrowApy, currency, availableCapacity, totalBorrows }) => {
+      Object.values(assets).map(({ borrowApy, currency, availableCapacity, totalBorrows, borrowReward }) => {
         const asset = <StyledAssetCell ticker={currency.ticker} />;
-        const reward = subsidyRewards ? subsidyRewards.perMarket[currency.ticker].borrow : null;
+        const accruedRewards = subsidyRewards ? subsidyRewards.perMarket[currency.ticker].borrow : null;
 
         const apy = (
           <ApyCell
             apy={borrowApy}
             currency={currency}
-            rewards={reward}
+            rewardsPerYear={borrowReward}
+            accruedRewards={accruedRewards}
             prices={prices}
             isBorrow
             // TODO: temporary until we find why row click is being ignored

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

@@ -52,15 +52,16 @@ const LendAssetsTable = ({ assets, onRowAction, ...props }: LendAssetsTableProps
 
   const rows: LendAssetsTableRow[] = useMemo(
     () =>
-      Object.values(assets).map(({ lendApy, currency, totalLiquidity }) => {
+      Object.values(assets).map(({ lendApy, currency, totalLiquidity, lendReward }) => {
         const asset = <AssetCell ticker={currency.ticker} />;
-        const reward = subsidyRewards ? subsidyRewards.perMarket[currency.ticker].lend : null;
+        const accruedRewards = subsidyRewards ? subsidyRewards.perMarket[currency.ticker].lend : null;
 
         const apy = (
           <ApyCell
             apy={lendApy}
             currency={currency}
-            rewards={reward}
+            rewardsPerYear={lendReward}
+            accruedRewards={accruedRewards}
             prices={prices}
             // TODO: temporary until we find why row click is being ignored
             onClick={() => onRowAction?.(currency.ticker as Key)}

src/parts/Topbar/GetGovernanceTokenUI/index.tsx

@@ -96,6 +96,7 @@ const ExchangeLink = ({ href, icon }: ExchangeLinkProps) => {
   );
 };
 
+// TODO: remove when banxa gets into interlay dapp
 const GetGovernanceTokenUI = (props: InterlayDefaultOutlinedButtonProps): JSX.Element => {
   const { isBuyModalOpen } = useSelector((state: StoreType) => state.general);
   const focusRef = React.useRef(null);

src/test/pages/Wallet.test.tsx

@@ -73,7 +73,7 @@ describe('Wallet Page', () => {
     matchMedia.clear();
   });
 
-  // TODO: add tests for Buy and Transfer CTALinks
+  // TODO: add tests for Transfer CTALinks
   describe('Available Assets', () => {
     it('should render table (desktop)', async () => {
       await render(<App />, { path });
@@ -104,8 +104,7 @@ describe('Wallet Page', () => {
       expect(history.location.search).toMatch(`${QUERY_PARAMETERS.TAB}=issue`);
     });
 
-    // TODO: enable when banxa e merged
-    it.skip('should be able to open buy dialog', async () => {
+    it('should be able to open buy dialog', async () => {
       await render(<App />, { path });
 
       const row = withinTableRow(TABLES.AVAILABLE_ASSETS, GOVERNANCE_TOKEN.ticker);