diff --git a/src/app/a11y/FadeTransition.tsx b/src/app/a11y/FadeTransition.tsx index bf6ab5da6..d8d9dee2f 100644 --- a/src/app/a11y/FadeTransition.tsx +++ b/src/app/a11y/FadeTransition.tsx @@ -7,19 +7,20 @@ export const FadeTransition: FC = ({ children }) => { const [booted, setBooted] = useState(false); - useLayoutEffect(() => { - setBooted(true); - }, [setBooted]); + useLayoutEffect(() => void setBooted(true), [setBooted]); return (
diff --git a/src/app/atoms/FormField.tsx b/src/app/atoms/FormField.tsx index 0a1fdad6f..ac82591b7 100644 --- a/src/app/atoms/FormField.tsx +++ b/src/app/atoms/FormField.tsx @@ -249,7 +249,7 @@ export const FormField = forwardRef( FORM_FIELD_CLASS_NAME, readOnly && '!placeholder-grey-1', smallPaddings ? 'py-2 pl-2' : 'p-3', - errorCaption ? 'border-error' : warning ? 'border-warning' : 'border-none', + errorCaption ? 'border-error' : warning ? 'border-warning' : 'border-input-low', className )} style={fieldStyle} diff --git a/src/app/pages/Market/crypto-exchange/components/ExchangeCountdown.tsx b/src/app/pages/Market/crypto-exchange/components/ExchangeCountdown.tsx index a642085b3..3f15bd27c 100644 --- a/src/app/pages/Market/crypto-exchange/components/ExchangeCountdown.tsx +++ b/src/app/pages/Market/crypto-exchange/components/ExchangeCountdown.tsx @@ -21,7 +21,7 @@ export const ExchangeCountdown = memo(({ className }) => { ( - {props.minutes}:{props.seconds < 10 ? '0' + props.seconds : props.seconds} + {props.minutes}:{String(props.seconds).padStart(2, '0')} )} date={new Date(exchangeData.createdAt).getTime() + ORDER_EXPIRATION_TIMEOUT} diff --git a/src/app/pages/Market/crypto-exchange/components/Stepper.tsx b/src/app/pages/Market/crypto-exchange/components/Stepper.tsx index 65e1dd253..4fd0ea532 100644 --- a/src/app/pages/Market/crypto-exchange/components/Stepper.tsx +++ b/src/app/pages/Market/crypto-exchange/components/Stepper.tsx @@ -1,6 +1,7 @@ -import React, { FC, memo } from 'react'; +import React, { FC, memo, useMemo } from 'react'; import clsx from 'clsx'; +import { range } from 'lodash'; import { Steps } from '../context'; @@ -11,21 +12,24 @@ interface Props { } export const Stepper = memo(({ currentStep }) => { - const first: Status = currentStep === 0 ? 'next' : 'active'; - const second: Status = currentStep > 1 ? 'active' : currentStep === 1 ? 'next' : 'default'; - const third: Status = currentStep > 2 ? 'active' : currentStep === 2 ? 'next' : 'default'; - + const stepsStatuses = useMemo( + () => + range(0, 3).map(stepIndex => + currentStep > stepIndex ? 'active' : currentStep === stepIndex ? 'next' : 'default' + ), + [currentStep] + ); return (
- - - + {stepsStatuses.map((status, index) => ( + + ))}
); }); interface StepProps { - status?: Status; + status: Status; } const bgColorRecord = { diff --git a/src/app/pages/Market/crypto-exchange/config.ts b/src/app/pages/Market/crypto-exchange/config.ts index 06b7841b2..09db9597f 100644 --- a/src/app/pages/Market/crypto-exchange/config.ts +++ b/src/app/pages/Market/crypto-exchange/config.ts @@ -8,6 +8,8 @@ export const EXOLIX_PRIVICY_LINK = 'https://exolix.com/privacy'; export const TEZOS_EXOLIX_NETWORK_CODE = 'XTZ'; +export const VALUE_PLACEHOLDER = '---'; + export const INITIAL_INPUT_CURRENCY: StoredExolixCurrency = { code: 'ETH', name: 'Ethereum', diff --git a/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/CompletedStatusInfoBlocks.tsx b/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/CompletedStatusInfoBlocks.tsx index 684913c88..e7ebbacd7 100644 --- a/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/CompletedStatusInfoBlocks.tsx +++ b/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/CompletedStatusInfoBlocks.tsx @@ -1,15 +1,16 @@ import React, { memo, useCallback, useMemo } from 'react'; -import { Anchor, HashShortView, IconBase } from 'app/atoms'; +import { Anchor, HashShortView, IconBase, Money } from 'app/atoms'; import { HashChip } from 'app/atoms/HashChip'; -import Money from 'app/atoms/Money'; import { ReactComponent as CopyIcon } from 'app/icons/base/copy.svg'; import { ReactComponent as OutLinkIcon } from 'app/icons/base/outLink.svg'; import { toastSuccess } from 'app/toaster'; import { ExchangeHash } from 'lib/apis/exolix/types'; +import { t } from 'lib/i18n'; import { CurrencyIcon } from '../../../components/CurrencyIcon'; import { InfoContainer, InfoRaw } from '../../../components/InfoBlock'; +import { VALUE_PLACEHOLDER } from '../../../config'; import { useCryptoExchangeDataState } from '../../../context'; export const CompletedStatusInfoBlocks = memo(() => { @@ -17,7 +18,7 @@ export const CompletedStatusInfoBlocks = memo(() => { const handleCopyTxId = useCallback(() => { window.navigator.clipboard.writeText(exchangeData!.id); - toastSuccess('Copied'); + toastSuccess(t('copiedHash')); }, [exchangeData]); const sendTime = useMemo(() => { @@ -126,5 +127,5 @@ const TxHash = memo(({ exchangeHash }) => { ); } - return ---; + return {VALUE_PLACEHOLDER}; }); diff --git a/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/InProgressStatusInfoBlocks.tsx b/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/InProgressStatusInfoBlocks.tsx index 763a7ce55..67c7d5cb0 100644 --- a/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/InProgressStatusInfoBlocks.tsx +++ b/src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/InProgressStatusInfoBlocks.tsx @@ -5,6 +5,7 @@ import { HashChip } from 'app/atoms/HashChip'; import Money from 'app/atoms/Money'; import { ReactComponent as CopyIcon } from 'app/icons/base/copy.svg'; import { toastSuccess } from 'app/toaster'; +import { t } from 'lib/i18n'; import { CurrencyIcon } from '../../../components/CurrencyIcon'; import { InfoContainer, InfoRaw } from '../../../components/InfoBlock'; @@ -15,7 +16,7 @@ export const InProgressStatusInfoBlocks = memo(() => { const handleCopyTxId = useCallback(() => { window.navigator.clipboard.writeText(exchangeData!.id); - toastSuccess('Copied'); + toastSuccess(t('copiedHash')); }, [exchangeData]); if (!exchangeData) return null; diff --git a/src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositAddressBlock.tsx b/src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositAddressBlock.tsx index 08f73a647..14721e7d0 100644 --- a/src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositAddressBlock.tsx +++ b/src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositAddressBlock.tsx @@ -6,7 +6,7 @@ import { IconButton } from 'app/atoms/IconButton'; import { ReactComponent as CopyIcon } from 'app/icons/base/copy.svg'; import { ReactComponent as QrCodeIcon } from 'app/icons/base/qr_code.svg'; import { toastSuccess } from 'app/toaster'; -import { T } from 'lib/i18n'; +import { t, T } from 'lib/i18n'; import { useBooleanState } from 'lib/ui/hooks'; import { useCryptoExchangeDataState } from '../../../context'; @@ -24,7 +24,7 @@ export const DepositAddressBlock = memo(({ className }) => { const handleCopyButtonClick = useCallback(() => { window.navigator.clipboard.writeText(exchangeData!.depositAddress); - toastSuccess('Address Copied'); + toastSuccess(t('copiedAddress')); }, [exchangeData]); if (!exchangeData) return null; diff --git a/src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositQrCodeModal.tsx b/src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositQrCodeModal.tsx index 9e401bc76..30c79ec6a 100644 --- a/src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositQrCodeModal.tsx +++ b/src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositQrCodeModal.tsx @@ -1,10 +1,9 @@ import React, { memo } from 'react'; -import { QRCode } from 'app/atoms'; +import { Money, QRCode } from 'app/atoms'; import { ActionModal, ActionModalBodyContainer } from 'app/atoms/action-modal'; import { T } from 'lib/i18n'; -import Money from '../../../../../../atoms/Money'; import { CurrencyIcon } from '../../../components/CurrencyIcon'; import { useCryptoExchangeDataState } from '../../../context'; diff --git a/src/app/pages/Market/crypto-exchange/steps/Deposit/components/ExpiresInBlock.tsx b/src/app/pages/Market/crypto-exchange/steps/Deposit/components/ExpiresInBlock.tsx index 8b17c5e4f..89ee1386a 100644 --- a/src/app/pages/Market/crypto-exchange/steps/Deposit/components/ExpiresInBlock.tsx +++ b/src/app/pages/Market/crypto-exchange/steps/Deposit/components/ExpiresInBlock.tsx @@ -2,9 +2,9 @@ import React, { memo } from 'react'; import clsx from 'clsx'; +import Money from 'app/atoms/Money'; import { T } from 'lib/i18n'; -import Money from '../../../../../../atoms/Money'; import { CurrencyIcon } from '../../../components/CurrencyIcon'; import { ExchangeCountdown } from '../../../components/ExchangeCountdown'; import { useCryptoExchangeDataState } from '../../../context'; diff --git a/src/app/pages/Market/crypto-exchange/steps/Deposit/index.tsx b/src/app/pages/Market/crypto-exchange/steps/Deposit/index.tsx index 46d48749a..61ba42092 100644 --- a/src/app/pages/Market/crypto-exchange/steps/Deposit/index.tsx +++ b/src/app/pages/Market/crypto-exchange/steps/Deposit/index.tsx @@ -1,8 +1,7 @@ import React, { memo, useCallback, useEffect, useState } from 'react'; import { FadeTransition } from 'app/a11y/FadeTransition'; -import { CaptionAlert, IconBase } from 'app/atoms'; -import Money from 'app/atoms/Money'; +import { CaptionAlert, IconBase, Money } from 'app/atoms'; import { ActionsButtonsBox } from 'app/atoms/PageModal'; import { StyledButton } from 'app/atoms/StyledButton'; import { ReactComponent as CopyIcon } from 'app/icons/base/copy.svg'; diff --git a/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/FormContent.tsx b/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/FormContent.tsx index 71fbaabde..7a572b4d7 100644 --- a/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/FormContent.tsx +++ b/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/FormContent.tsx @@ -1,6 +1,5 @@ import React, { FC, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react'; -import BigNumber from 'bignumber.js'; import clsx from 'clsx'; import { isEmpty } from 'lodash'; import { Controller, useFormContext, SubmitHandler, FieldError } from 'react-hook-form-v7'; @@ -19,7 +18,12 @@ import { useAccountAddressForEvm, useAccountAddressForTezos } from 'temple/front import { StepLabel } from '../../../components/StepLabel'; import { Stepper } from '../../../components/Stepper'; -import { defaultModalHeaderConfig, ModalHeaderConfig, TEZOS_EXOLIX_NETWORK_CODE } from '../../../config'; +import { + defaultModalHeaderConfig, + ModalHeaderConfig, + TEZOS_EXOLIX_NETWORK_CODE, + VALUE_PLACEHOLDER +} from '../../../config'; import { useCryptoExchangeDataState } from '../../../context'; import { getCurrencyDisplayCode } from '../../../utils'; import { CryptoExchangeFormData } from '../types'; @@ -31,7 +35,6 @@ import { SelectTokenContent } from './SelectCurrencyContent'; const MIN_ERROR = 'min'; const MAX_ERROR = 'max'; const EXOLIX_DECIMALS = 8; -const VALUE_PLACEHOLDER = '---'; const DEFAULT_SWR_CONGIG = { shouldRetryOnError: false, @@ -114,14 +117,6 @@ export const FormContent: FC = ({ setModalHeaderConfig, setModalContent } [ratesData] ); - const displayRate = useMemo( - () => - rate - ? `1 ${inputCurrency.code} ≈ ${new BigNumber(rate).decimalPlaces(2).toFixed()} ${outputCurrency.code}` - : VALUE_PLACEHOLDER, - [inputCurrency.code, outputCurrency.code, rate] - ); - const withdrawalAddress = useMemo(() => { if (outputCurrency.network.code === TEZOS_EXOLIX_NETWORK_CODE) { return tezosAddress; @@ -232,7 +227,7 @@ export const FormContent: FC = ({ setModalHeaderConfig, setModalContent } containerClassName="pb-5" /> - + diff --git a/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/InfoCard.tsx b/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/InfoCard.tsx index 78532e47e..d332bc1f9 100644 --- a/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/InfoCard.tsx +++ b/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/InfoCard.tsx @@ -1,18 +1,33 @@ import React, { memo } from 'react'; +import Money from 'app/atoms/Money'; import { T } from 'lib/i18n'; import { InfoContainer, InfoRaw } from '../../../components/InfoBlock'; -import { EXOLIX_PRIVICY_LINK, EXOLIX_TERMS_LINK } from '../../../config'; +import { EXOLIX_PRIVICY_LINK, EXOLIX_TERMS_LINK, VALUE_PLACEHOLDER } from '../../../config'; interface Props { - exchangeRate: string; + rate: number | nullish; + inputCurrencyCode: string; + outputCurrencyCode: string; } -export const InfoCard = memo(({ exchangeRate }) => ( +export const InfoCard = memo(({ rate, inputCurrencyCode, outputCurrencyCode }) => ( - {exchangeRate} + + {rate ? ( + <> + {`1 ${inputCurrencyCode} ≈ `} + + {rate} + {' '} + {outputCurrencyCode} + + ) : ( + VALUE_PLACEHOLDER + )} +
diff --git a/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/SelectCurrencyButton.tsx b/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/SelectCurrencyButton.tsx index c982ee5ab..51162f981 100644 --- a/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/SelectCurrencyButton.tsx +++ b/src/app/pages/Market/crypto-exchange/steps/OrderCreation/components/SelectCurrencyButton.tsx @@ -14,7 +14,7 @@ interface Props { export const SelectCurrencyButton = memo(({ currency, onClick }) => (