Skip to content

Commit

Permalink
fix: [lw-11830]: resolve pr comments
Browse files Browse the repository at this point in the history
  • Loading branch information
vetalcore committed Nov 27, 2024
1 parent 99fdc9e commit 43bcc48
Show file tree
Hide file tree
Showing 5 changed files with 56 additions and 41 deletions.
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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
Expand All @@ -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} />}
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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
/>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 43bcc48

Please sign in to comment.