diff --git a/src/app/components/UserAssets/components/UserAssetsTableRow.tsx b/src/app/components/UserAssets/components/UserAssetsTableRow.tsx index dbe594b8b6..b7236936da 100644 --- a/src/app/components/UserAssets/components/UserAssetsTableRow.tsx +++ b/src/app/components/UserAssets/components/UserAssetsTableRow.tsx @@ -26,7 +26,6 @@ import daiIcon from 'app/pages/BridgeDepositPage/dictionaries/assets/icons/dai.s interface IUserAssetsTableRow { item: AssetDetails; - onTransack: () => void; onConvert: (asset: Asset) => void; onUnWrap: () => void; } @@ -44,7 +43,6 @@ const XUSD_ASSETS: { export const UserAssetsTableRow: React.FC = ({ item, onConvert, - onTransack, onUnWrap, }) => { const { t } = useTranslation(); @@ -58,7 +56,8 @@ export const UserAssetsTableRow: React.FC = ({ }, [item.asset]); const { checkMaintenance, States } = useMaintenance(); - const fastBtcLocked = checkMaintenance(States.FASTBTC); + const fastBtcSendLocked = checkMaintenance(States.FASTBTC_SEND); + const fastBtcReceiveLocked = checkMaintenance(States.FASTBTC_RECEIVE); useEffect(() => { const get = async () => { @@ -147,13 +146,14 @@ export const UserAssetsTableRow: React.FC = ({ interactionKind="hover" content={ <> - {fastBtcLocked + {fastBtcSendLocked ? t(translations.maintenance.fastBTCPortfolio) : t(translations.userAssets.sendMessage, { asset })} } + className="tw-flex tw-items-center" > - {fastBtcLocked ? ( + {fastBtcSendLocked ? (
{t(translations.common.send)}
@@ -175,13 +175,14 @@ export const UserAssetsTableRow: React.FC = ({ interactionKind="hover" content={ <> - {fastBtcLocked + {fastBtcReceiveLocked ? t(translations.maintenance.fastBTCPortfolio) : t(translations.userAssets.receiveMessage, { asset })} } + className="tw-flex tw-items-center" > - {fastBtcLocked ? ( + {fastBtcReceiveLocked ? (
{t(translations.common.receive)}
diff --git a/src/app/components/UserAssets/index.tsx b/src/app/components/UserAssets/index.tsx index eda5020f7b..ca6167b077 100644 --- a/src/app/components/UserAssets/index.tsx +++ b/src/app/components/UserAssets/index.tsx @@ -1,28 +1,18 @@ import React, { useCallback, useMemo, useState } from 'react'; -import { Trans, useTranslation } from 'react-i18next'; +import { useTranslation } from 'react-i18next'; import { translations } from 'locales/i18n'; import { AssetsDictionary } from 'utils/dictionaries/assets-dictionary'; import { Asset } from 'types'; import { Skeleton } from '../PageSkeleton'; import { useAccount, useIsConnected } from 'app/hooks/useAccount'; -import { useMaintenance } from 'app/hooks/useMaintenance'; -import { Dialog } from 'app/containers/Dialog'; -import { Button, ButtonSize, ButtonStyle } from '../Button'; -import { discordInvite } from 'utils/classifiers'; import { ConversionDialog } from './components/ConversionDialog'; import { UnWrapDialog } from './components/UnWrapDialog'; -import { TransakDialog } from '../TransakDialog/TransakDialog'; import { UserAssetsTableRow } from './components/UserAssetsTableRow'; export const UserAssets: React.FC = () => { const { t } = useTranslation(); const connected = useIsConnected(); const account = useAccount(); - const { checkMaintenances, States } = useMaintenance(); - const { - [States.FASTBTC]: fastBtcLocked, - [States.TRANSACK]: transackLocked, - } = checkMaintenances(); const assets = useMemo( () => @@ -32,7 +22,6 @@ export const UserAssets: React.FC = () => { [], ); - const [transack, setTransack] = useState(false); const [conversionDialog, setConversionDialog] = useState(false); const [unwrapDialog, setUnwrapDialog] = useState(false); const [conversionToken, setConversionToken] = useState(null!); @@ -86,7 +75,6 @@ export const UserAssets: React.FC = () => { setTransack(true)} onConvert={onConvertOpen} onUnWrap={() => setUnwrapDialog(true)} /> @@ -94,7 +82,6 @@ export const UserAssets: React.FC = () => { - setTransack(false)} /> { isOpen={unwrapDialog} onClose={() => setUnwrapDialog(false)} /> - setTransack(false)} - > -
-

- {t(translations.common.maintenance)} -

-
- - x - , - ]} - /> -
-
-
-
- ); }; diff --git a/src/app/hooks/useMaintenance.ts b/src/app/hooks/useMaintenance.ts index 8ac7959431..4ae270d854 100644 --- a/src/app/hooks/useMaintenance.ts +++ b/src/app/hooks/useMaintenance.ts @@ -21,8 +21,9 @@ enum States { STOP_BORROW = 'stopBorrow', ADD_LIQUIDITY = 'addLiquidity', REMOVE_LIQUIDITY = 'removeLiquidity', - FASTBTC = 'fastBTC', - TRANSACK = 'transack', + FASTBTC_SEND = 'fastBTCSend', + FASTBTC_RECEIVE = 'fastBTCReceive', + TRANSAK = 'transak', BRIDGE = 'bridge', ETH_BRIDGE = 'ethBridge', diff --git a/src/app/pages/FastBtcPage/components/Deposit/MainScreen.tsx b/src/app/pages/FastBtcPage/components/Deposit/MainScreen.tsx index 266e9af4e5..feacca221d 100644 --- a/src/app/pages/FastBtcPage/components/Deposit/MainScreen.tsx +++ b/src/app/pages/FastBtcPage/components/Deposit/MainScreen.tsx @@ -8,15 +8,17 @@ import { DepositInstructions } from './DepositInstructions'; import { FastBtcButton } from '../FastBtcButton'; import { useAccount } from 'app/hooks/useAccount'; import { ErrorBadge } from 'app/components/Form/ErrorBadge'; -import { NetworkAwareComponentProps } from '../../types'; +import { FastBtcDirectionType, NetworkAwareComponentProps } from '../../types'; import { currentNetwork } from 'utils/classifiers'; import { useMaintenance } from 'app/hooks/useMaintenance'; import { discordInvite } from 'utils/classifiers'; import { WalletContext } from '@sovryn/react-wallet'; -export const MainScreen: React.FC = ({ - network, -}) => { +type MainScreenProps = NetworkAwareComponentProps & { + type: FastBtcDirectionType; +}; + +export const MainScreen: React.FC = ({ network, type }) => { const account = useAccount(); const { ready, @@ -25,9 +27,13 @@ export const MainScreen: React.FC = ({ addressError, } = useContext(DepositContext); const { t } = useTranslation(); - const { checkMaintenance, States } = useMaintenance(); - const fastBtcLocked = checkMaintenance(States.FASTBTC); + const fastBtcReceiveLocked = checkMaintenance(States.FASTBTC_RECEIVE); + const transakLocked = checkMaintenance(States.TRANSAK); + const shouldDisableTransak = useMemo( + () => type === FastBtcDirectionType.TRANSAK && transakLocked, + [type, transakLocked], + ); const { connect, connected, connecting } = useContext(WalletContext); @@ -43,6 +49,13 @@ export const MainScreen: React.FC = ({ [requestDepositAddress, account, prefix], ); + const isDisabled = useMemo(() => { + if (fastBtcReceiveLocked || !ready || addressLoading) { + return true; + } + return shouldDisableTransak; + }, [addressLoading, fastBtcReceiveLocked, ready, shouldDisableTransak]); + return ( <>
@@ -56,7 +69,7 @@ export const MainScreen: React.FC = ({ {connected ? ( @@ -69,11 +82,15 @@ export const MainScreen: React.FC = ({ /> )} - {fastBtcLocked && ( + {(fastBtcReceiveLocked || shouldDisableTransak) && ( { const { address, set } = useContext(WithdrawContext); const { t } = useTranslation(); const { checkMaintenance, States } = useMaintenance(); - const fastBtcLocked = checkMaintenance(States.FASTBTC); + const fastBtcLocked = checkMaintenance(States.FASTBTC_SEND); const [addressValidationState, setAddressValidationState] = useState( AddressValidationState.NONE, diff --git a/src/app/pages/FastBtcPage/components/Withdraw/AmountForm.tsx b/src/app/pages/FastBtcPage/components/Withdraw/AmountForm.tsx index dc9d673bc8..21525bed31 100644 --- a/src/app/pages/FastBtcPage/components/Withdraw/AmountForm.tsx +++ b/src/app/pages/FastBtcPage/components/Withdraw/AmountForm.tsx @@ -27,7 +27,7 @@ export const AmountForm: React.FC = ({ const { amount, limits, set } = useContext(WithdrawContext); const { t } = useTranslation(); const { checkMaintenance, States } = useMaintenance(); - const fastBtcLocked = checkMaintenance(States.FASTBTC); + const fastBtcLocked = checkMaintenance(States.FASTBTC_SEND); const balance = useBalance(); diff --git a/src/app/pages/FastBtcPage/components/Withdraw/MainScreen.tsx b/src/app/pages/FastBtcPage/components/Withdraw/MainScreen.tsx index d37f25c55a..011fb67618 100644 --- a/src/app/pages/FastBtcPage/components/Withdraw/MainScreen.tsx +++ b/src/app/pages/FastBtcPage/components/Withdraw/MainScreen.tsx @@ -17,7 +17,7 @@ export const MainScreen: React.FC = ({ const { set } = useContext(WithdrawContext); const { t } = useTranslation(); const { checkMaintenance, States } = useMaintenance(); - const fastBtcLocked = checkMaintenance(States.FASTBTC); + const fastBtcLocked = checkMaintenance(States.FASTBTC_SEND); const { connect, connected, connecting } = useContext(WalletContext); diff --git a/src/app/pages/FastBtcPage/components/Withdraw/ReviewScreen.tsx b/src/app/pages/FastBtcPage/components/Withdraw/ReviewScreen.tsx index 2d8249984e..fa63610d31 100644 --- a/src/app/pages/FastBtcPage/components/Withdraw/ReviewScreen.tsx +++ b/src/app/pages/FastBtcPage/components/Withdraw/ReviewScreen.tsx @@ -30,7 +30,7 @@ export const ReviewScreen: React.FC = ({ const { amount, address, aggregatorLimits } = useContext(WithdrawContext); const { t } = useTranslation(); const { checkMaintenance, States } = useMaintenance(); - const fastBtcLocked = checkMaintenance(States.FASTBTC); + const fastBtcLocked = checkMaintenance(States.FASTBTC_SEND); const weiAmount = useWeiAmount(amount); const { value: calculateCurrentFeeWei, loading } = useCacheCallWithValue( diff --git a/src/app/pages/FastBtcPage/containers/DepositContainer.tsx b/src/app/pages/FastBtcPage/containers/DepositContainer.tsx index 3750bd5fb5..7a81897ab4 100644 --- a/src/app/pages/FastBtcPage/containers/DepositContainer.tsx +++ b/src/app/pages/FastBtcPage/containers/DepositContainer.tsx @@ -237,7 +237,9 @@ export const DepositContainer: React.FC = ({ )} >
- {step === DepositStep.MAIN && } + {step === DepositStep.MAIN && ( + + )} {step === DepositStep.VALIDATION && ( )} diff --git a/src/app/pages/ReceiveRBTCPage/index.tsx b/src/app/pages/ReceiveRBTCPage/index.tsx index 5422e9bfdd..99a2d96ca1 100644 --- a/src/app/pages/ReceiveRBTCPage/index.tsx +++ b/src/app/pages/ReceiveRBTCPage/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback, useMemo } from 'react'; import { Helmet } from 'react-helmet-async'; import { CrossChainLayout } from 'app/components/CrossChain/CrossChainLayout'; @@ -9,12 +9,68 @@ import dollarIcon from 'assets/images/fiat/dollar.svg'; import eruoIcon from 'assets/images/fiat/euro.svg'; import poundIcon from 'assets/images/fiat/pound.svg'; import { Link } from 'react-router-dom'; -import { useTranslation } from 'react-i18next'; +import { Trans, useTranslation } from 'react-i18next'; import { translations } from 'locales/i18n'; import { Tooltip } from '@blueprintjs/core'; +import { useMaintenance } from 'app/hooks/useMaintenance'; +import { discordInvite } from 'utils/classifiers'; export const ReceiveRBTCPage: React.FC = () => { const { t } = useTranslation(); + const { checkMaintenance, States } = useMaintenance(); + const fastBtcReceiveLocked = checkMaintenance(States.FASTBTC_RECEIVE); + const transakLocked = checkMaintenance(States.TRANSAK); + + const onBtcClicked = useCallback( + e => { + if (fastBtcReceiveLocked) { + e.preventDefault(); + } + }, + [fastBtcReceiveLocked], + ); + + const btcButton = useMemo( + () => ( + + + btc + + + ), + [fastBtcReceiveLocked, onBtcClicked], + ); + + const onBankClicked = useCallback( + e => { + if (fastBtcReceiveLocked || transakLocked) { + e.preventDefault(); + } + }, + [fastBtcReceiveLocked, transakLocked], + ); + + const bankButton = useMemo( + () => ( + + +
+
+ dollar +
+
+ pound +
+
+ euro +
+
+ + + ), + [fastBtcReceiveLocked, transakLocked, onBankClicked], + ); + return ( <> @@ -42,32 +98,87 @@ export const ReceiveRBTCPage: React.FC = () => {
- - - btc - - + {fastBtcReceiveLocked ? ( + + + x + , + ]} + /> + + } + > + {btcButton} + + ) : ( + btcButton + )}

{t(translations.receiveRBTCPage.bitcoinNetwork)}

- - -
-
- dollar -
-
- pound -
-
- euro -
-
- - + {fastBtcReceiveLocked || transakLocked ? ( + + {fastBtcReceiveLocked ? ( + + x + , + ]} + /> + ) : ( + + x + , + ]} + /> + )} + + } + > + {bankButton} + + ) : ( + bankButton + )} +