From 759e9d074cf487ec3e28c946ce787c9eed0cb3db Mon Sep 17 00:00:00 2001 From: vetalcore Date: Wed, 27 Nov 2024 15:20:44 +0200 Subject: [PATCH] fix: [lw-11830]: resolve pr comments --- .../components/Form/CoinInput/CoinInput.tsx | 41 ++-------------- .../send-transaction/components/Form/Form.tsx | 6 +-- .../LockedStakeRewardsBanner.module.scss} | 0 .../LockedStakeRewardsBanner.tsx | 48 +++++++++++++++++++ .../features/send-transaction/helpers.ts | 2 +- 5 files changed, 56 insertions(+), 41 deletions(-) rename apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/{CoinInput/CoinInput.module.scss => LockedStakeRewardsBanner/LockedStakeRewardsBanner.module.scss} (100%) create mode 100644 apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/LockedStakeRewardsBanner/LockedStakeRewardsBanner.tsx diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/CoinInput.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/CoinInput.tsx index 75ceab900..1d8bc97fe 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/CoinInput.tsx +++ b/apps/browser-extension-wallet/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,10 +27,9 @@ 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(); @@ -44,12 +37,6 @@ export const CoinInput = ({ setCoinValues(bundleId, tempOutputs); }, [bundleId, setCoinValues]); - const onGoToStaking = () => { - const path = isPopupView ? walletRoutePaths.earn : walletRoutePaths.staking; - setIsDrawerVisible(); - history.push(path); - }; - return ( <> - {isPopupView ? ( - - {t('general.errors.lockedStakeRewards.description')} - - - ) : ( - } - popupView={isPopupView} - className={cn(styles.banner, { [styles.popupView]: isPopupView })} - message={{t('general.errors.lockedStakeRewards.description')}} - buttonMessage={t('general.errors.lockedStakeRewards.cta')} - onButtonClick={onGoToStaking} - withIcon - /> - )} + {!!lockedStakeRewards && } ); }; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/Form.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/Form.tsx index 2165feef9..6857a8948 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/Form.tsx +++ b/apps/browser-extension-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/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/CoinInput.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/LockedStakeRewardsBanner/LockedStakeRewardsBanner.module.scss similarity index 100% rename from apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/CoinInput.module.scss rename to apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/LockedStakeRewardsBanner/LockedStakeRewardsBanner.module.scss diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/LockedStakeRewardsBanner/LockedStakeRewardsBanner.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/LockedStakeRewardsBanner/LockedStakeRewardsBanner.tsx new file mode 100644 index 000000000..1489fa279 --- /dev/null +++ b/apps/browser-extension-wallet/src/views/browser-view/features/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 ? ( + + {t('general.errors.lockedStakeRewards.description')} + + + ) : ( + } + popupView={isPopupView} + className={cn(styles.banner, { [styles.popupView]: isPopupView })} + message={{t('general.errors.lockedStakeRewards.description')}} + 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 index 04001c0f4..cfd4fec4b 100644 --- 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, cardanoCoin: Wallet.Co }; }; -export const getNextInsuffisientBalanceInputs = +export const getNextInsufficientBalanceInputs = (lastFocusedInput: string, reachedMaxAmountList: Set, id: string) => (prevInputsList: string[]): string[] => { const isInMaxAmountList = reachedMaxAmountList.has(id); // check the if the id exists in reachedMaxAmountList