diff --git a/src/pages/RFOX/components/ChangeAddress/ChangeAddressInput.tsx b/src/pages/RFOX/components/ChangeAddress/ChangeAddressInput.tsx index 162ac00dfa6..055f736a710 100644 --- a/src/pages/RFOX/components/ChangeAddress/ChangeAddressInput.tsx +++ b/src/pages/RFOX/components/ChangeAddress/ChangeAddressInput.tsx @@ -1,4 +1,14 @@ -import { Box, Button, CardFooter, Collapse, Flex, Input, Skeleton, Stack } from '@chakra-ui/react' +import { + Box, + Button, + CardBody, + CardFooter, + Collapse, + Flex, + Input, + Skeleton, + Stack, +} from '@chakra-ui/react' import { fromAccountId, fromAssetId } from '@shapeshiftoss/caip' import { foxStakingV1Abi } from 'contracts/abis/FoxStakingV1' import { RFOX_PROXY_CONTRACT_ADDRESS } from 'contracts/constants' @@ -30,6 +40,7 @@ import { import { useAppSelector } from 'state/store' import { AddressSelection } from '../AddressSelection' +import { ChainNotSupported } from '../Shared/ChainNotSupported' import type { ChangeAddressInputValues, RfoxChangeAddressQuote } from './types' import { ChangeAddressRoutePaths, type ChangeAddressRouteProps } from './types' @@ -202,6 +213,15 @@ export const ChangeAddressInput: FC + {headerComponent} + + + + + ) if (!stakingAsset) return null return ( diff --git a/src/pages/RFOX/components/Claim/ClaimSelect.tsx b/src/pages/RFOX/components/Claim/ClaimSelect.tsx index 4eb9fe450a0..411e545435f 100644 --- a/src/pages/RFOX/components/Claim/ClaimSelect.tsx +++ b/src/pages/RFOX/components/Claim/ClaimSelect.tsx @@ -1,5 +1,5 @@ import { Button, CardBody, Center, Flex, Skeleton, Stack } from '@chakra-ui/react' -import { type ChainId, foxAssetId, fromAccountId } from '@shapeshiftoss/caip' +import { foxAssetId, fromAccountId } from '@shapeshiftoss/caip' import dayjs from 'dayjs' import { type FC, useCallback, useMemo } from 'react' import { useTranslate } from 'react-polyglot' @@ -7,15 +7,15 @@ import { useHistory } from 'react-router' import { AssetIcon } from 'components/AssetIcon' import { ClaimStatus } from 'components/ClaimRow/types' import { SlideTransition } from 'components/SlideTransition' -import { RawText, Text } from 'components/Text' +import { Text } from 'components/Text' import { fromBaseUnit } from 'lib/math' -import { chainIdToChainDisplayName } from 'lib/utils' import { useGetUnstakingRequestsQuery } from 'pages/RFOX/hooks/useGetUnstakingRequestsQuery' import { useRFOXContext } from 'pages/RFOX/hooks/useRfoxContext' import { RfoxTabIndex } from 'pages/RFOX/Widget' import { selectAssetById } from 'state/slices/selectors' import { useAppSelector } from 'state/store' +import { ChainNotSupported } from '../Shared/ChainNotSupported' import { ClaimRow } from './ClaimRow' import type { RfoxClaimQuote } from './types' import { ClaimRoutePaths, type ClaimRouteProps } from './types' @@ -55,28 +55,6 @@ const NoClaimsAvailable: FC = ({ isError, setStepIndex } ) } -type ChainNotSupportedProps = { - chainId: ChainId | undefined -} - -const ChainNotSupported: FC = ({ chainId }) => { - const translate = useTranslate() - - if (!chainId) return null - - const chainLabel = chainIdToChainDisplayName(chainId) - - return ( -
- - - - {translate('RFOX.noSupportedChainsDescription', { chainLabel })} - -
- ) -} - export const ClaimSelect: FC = ({ headerComponent, setConfirmedQuote, diff --git a/src/pages/RFOX/components/Shared/ChainNotSupported.tsx b/src/pages/RFOX/components/Shared/ChainNotSupported.tsx new file mode 100644 index 00000000000..7018af097a5 --- /dev/null +++ b/src/pages/RFOX/components/Shared/ChainNotSupported.tsx @@ -0,0 +1,30 @@ +import { Center } from '@chakra-ui/react' +import type { ChainId } from '@shapeshiftoss/caip' +import { foxAssetId } from '@shapeshiftoss/caip' +import type { FC } from 'react' +import { useTranslate } from 'react-polyglot' +import { AssetIcon } from 'components/AssetIcon' +import { RawText, Text } from 'components/Text' +import { chainIdToChainDisplayName } from 'lib/utils' + +type ChainNotSupportedProps = { + chainId: ChainId | undefined +} + +export const ChainNotSupported: FC = ({ chainId }) => { + const translate = useTranslate() + + if (!chainId) return null + + const chainLabel = chainIdToChainDisplayName(chainId) + + return ( +
+ + + + {translate('RFOX.noSupportedChainsDescription', { chainLabel })} + +
+ ) +} diff --git a/src/pages/RFOX/components/Unstake/UnstakeInput.tsx b/src/pages/RFOX/components/Unstake/UnstakeInput.tsx index 3720c3f9fc1..1d971b53b6a 100644 --- a/src/pages/RFOX/components/Unstake/UnstakeInput.tsx +++ b/src/pages/RFOX/components/Unstake/UnstakeInput.tsx @@ -1,4 +1,4 @@ -import { CardFooter, Collapse, Flex, Skeleton, Stack } from '@chakra-ui/react' +import { CardBody, CardFooter, Collapse, Flex, Skeleton, Stack } from '@chakra-ui/react' import { fromAccountId, fromAssetId } from '@shapeshiftoss/caip' import { useCallback, useEffect, useMemo, useState } from 'react' import { FormProvider, useForm, useWatch } from 'react-hook-form' @@ -30,6 +30,7 @@ import { } from 'state/slices/selectors' import { useAppSelector } from 'state/store' +import { ChainNotSupported } from '../Shared/ChainNotSupported' import { UnstakeSummary } from './components/UnstakeSummary' import { useRfoxUnstake } from './hooks/useRfoxUnstake' import type { RfoxUnstakingQuote, UnstakeInputValues, UnstakeRouteProps } from './types' @@ -295,6 +296,16 @@ export const UnstakeInput: React.FC = ({ return translate('trade.errors.quoteUnsupportedChain') }, [isChainSupportedByWallet, translate]) + if (!stakingAssetAccountAddress) + return ( + + {headerComponent} + + + + + ) + if (!stakingAsset) return null return (