fix: [lw-11830]: resolve pr comments

input-output-hk · Nov 27, 2024 · 759e9d0 · 759e9d0
1 parent dba4245
commit 759e9d0
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 41 deletions.
diff --git a/.../src/views/browser-view/features/send-transaction/components/Form/CoinInput/CoinInput.tsx b/.../src/views/browser-view/features/send-transaction/components/Form/CoinInput/CoinInput.tsx
@@ -1,18 +1,12 @@
 import { AssetInputList } from '@lace/core';
-import cn from 'classnames';
-import { useHistory } from 'react-router-dom';
 import { useCoinStateSelector } from '../../../store';
 import { Wallet } from '@lace/cardano';
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getTemporaryTxDataFromStorage } from '../../../helpers';
 import { UseSelectedCoinsProps, useSelectedCoins } from './useSelectedCoins';
-import { Banner } from '@lace/common';
-import { walletRoutePaths } from '@routes';
-import styles from './CoinInput.module.scss';
-import { Box, Button, Flex, Text } from '@input-output-hk/lace-ui-toolkit';
-import { useDrawer } from '@src/views/browser-view/stores';
-import ExclamationCircleOutline from '@src/assets/icons/red-exclamation-circle.component.svg';
+import { useRewardAccountsData } from '@src/views/browser-view/features/staking/hooks';
+import { LockedStakeRewardsBanner } from '../LockedStakeRewardsBanner/LockedStakeRewardsBanner';
 
 export type CoinInputProps = {
   bundleId: string;
@@ -33,23 +27,16 @@ export const CoinInput = ({
   ...selectedCoinsProps
 }: CoinInputProps): React.ReactElement => {
   const { t } = useTranslation();
-  const history = useHistory();
   const { setCoinValues } = useCoinStateSelector(bundleId);
   const { selectedCoins } = useSelectedCoins({ bundleId, assetBalances, spendableCoin, ...selectedCoinsProps });
-  const [, setIsDrawerVisible] = useDrawer();
+  const { lockedStakeRewards } = useRewardAccountsData();
 
   useEffect(() => {
     const { tempOutputs } = getTemporaryTxDataFromStorage();
     if (!tempOutputs || tempOutputs.length === 0) return;
     setCoinValues(bundleId, tempOutputs);
   }, [bundleId, setCoinValues]);
 
-  const onGoToStaking = () => {
-    const path = isPopupView ? walletRoutePaths.earn : walletRoutePaths.staking;
-    setIsDrawerVisible();
-    history.push(path);
-  };
-
   return (
     <>
       <AssetInputList
@@ -59,27 +46,7 @@ export const CoinInput = ({
         translations={{ addAsset: t('browserView.transaction.send.advanced.asset') }}
         isPopupView={isPopupView}
       />
-      {isPopupView ? (
-        <Flex className={styles.bannerPopup} flexDirection="column" py="$16" px="$24" gap="$24">
-          <Text.Button>{t('general.errors.lockedStakeRewards.description')}</Text.Button>
-          <Button.CallToAction
-            w="$fill"
-            onClick={onGoToStaking}
-            data-testid="stats-register-as-drep-cta"
-            label={t('general.errors.lockedStakeRewards.cta')}
-          />
-        </Flex>
-      ) : (
-        <Banner
-          customIcon={<ExclamationCircleOutline />}
-          popupView={isPopupView}
-          className={cn(styles.banner, { [styles.popupView]: isPopupView })}
-          message={<Box className={styles.bannerDescription}>{t('general.errors.lockedStakeRewards.description')}</Box>}
-          buttonMessage={t('general.errors.lockedStakeRewards.cta')}
-          onButtonClick={onGoToStaking}
-          withIcon
-        />
-      )}
+      {!!lockedStakeRewards && <LockedStakeRewardsBanner isPopupView={isPopupView} />}
     </>
   );
 };
diff --git a/...xtension-wallet/src/views/browser-view/features/send-transaction/components/Form/Form.tsx b/...xtension-wallet/src/views/browser-view/features/send-transaction/components/Form/Form.tsx
@@ -12,7 +12,7 @@ import { useMaxAda } from '@hooks/useMaxAda';
 import BundleIcon from '../../../../../../assets/icons/bundle-icon.component.svg';
 import { getFee } from '../SendTransactionSummary';
 import { useBuiltTxState, useSpentBalances, useLastFocusedInput, useOutputs } from '../../store';
-import { getNextInsuffisientBalanceInputs, getReachedMaxAmountList, hasReachedMaxAmountAda } from '../../helpers';
+import { getNextInsufficientBalanceInputs, getReachedMaxAmountList, hasReachedMaxAmountAda } from '../../helpers';
 import { MetadataInput } from './MetadataInput';
 import { BundlesList } from './BundlesList';
 import { formatAdaAllocation, getNextBundleCoinId } from './util';
@@ -90,10 +90,10 @@ export const Form = ({
   useEffect(() => {
     if (lastFocusedInput) {
       const id = lastFocusedInput.split('.')[1]; // we get the coin id (cardano id or asset id) to check if it is in the reachedMaxAmountList
-      setInsufficientBalanceInputs(getNextInsuffisientBalanceInputs(lastFocusedInput, reachedMaxAmountList, id));
+      setInsufficientBalanceInputs(getNextInsufficientBalanceInputs(lastFocusedInput, reachedMaxAmountList, id));
 
       setInsufficientAvailableBalanceInputs(
-        getNextInsuffisientBalanceInputs(
+        getNextInsufficientBalanceInputs(
           lastFocusedInput,
           new Set(reachedMaxAvailableAmount ? [cardanoCoin.id] : []),
           id

diff --git a/...ents/Form/CoinInput/CoinInput.module.scss → ...nner/LockedStakeRewardsBanner.module.scss b/...ents/Form/CoinInput/CoinInput.module.scss → ...nner/LockedStakeRewardsBanner.module.scss
diff --git a/...es/send-transaction/components/Form/LockedStakeRewardsBanner/LockedStakeRewardsBanner.tsx b/...es/send-transaction/components/Form/LockedStakeRewardsBanner/LockedStakeRewardsBanner.tsx
@@ -0,0 +1,48 @@
+import cn from 'classnames';
+import { useHistory } from 'react-router-dom';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Banner } from '@lace/common';
+import { walletRoutePaths } from '@routes';
+import styles from './LockedStakeRewardsBanner.module.scss';
+import { Box, Button, Flex, Text } from '@input-output-hk/lace-ui-toolkit';
+import { useDrawer } from '@src/views/browser-view/stores';
+import ExclamationCircleOutline from '@src/assets/icons/red-exclamation-circle.component.svg';
+
+export type LockedStakeRewardsBannerProps = {
+  isPopupView?: boolean;
+};
+
+export const LockedStakeRewardsBanner = ({ isPopupView }: LockedStakeRewardsBannerProps): React.ReactElement => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const [, setIsDrawerVisible] = useDrawer();
+
+  const onGoToStaking = () => {
+    const path = isPopupView ? walletRoutePaths.earn : walletRoutePaths.staking;
+    setIsDrawerVisible();
+    history.push(path);
+  };
+
+  return isPopupView ? (
+    <Flex className={styles.bannerPopup} flexDirection="column" py="$16" px="$24" gap="$24">
+      <Text.Button>{t('general.errors.lockedStakeRewards.description')}</Text.Button>
+      <Button.CallToAction
+        w="$fill"
+        onClick={onGoToStaking}
+        data-testid="stats-register-as-drep-cta"
+        label={t('general.errors.lockedStakeRewards.cta')}
+      />
+    </Flex>
+  ) : (
+    <Banner
+      customIcon={<ExclamationCircleOutline />}
+      popupView={isPopupView}
+      className={cn(styles.banner, { [styles.popupView]: isPopupView })}
+      message={<Box className={styles.bannerDescription}>{t('general.errors.lockedStakeRewards.description')}</Box>}
+      buttonMessage={t('general.errors.lockedStakeRewards.cta')}
+      onButtonClick={onGoToStaking}
+      withIcon
+    />
+  );
+};
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/helpers.ts b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/helpers.ts
@@ -61,7 +61,7 @@ export const getOutputValues = (assets: Array<AssetInfo>, cardanoCoin: Wallet.Co
   };
 };
 
-export const getNextInsuffisientBalanceInputs =
+export const getNextInsufficientBalanceInputs =
   (lastFocusedInput: string, reachedMaxAmountList: Set<string | Wallet.Cardano.AssetId>, id: string) =>
   (prevInputsList: string[]): string[] => {
     const isInMaxAmountList = reachedMaxAmountList.has(id); // check the if the id exists in reachedMaxAmountList