fix: use chain not supported component rfox unstake and change address (

#7600)

Co-authored-by: Apotheosis <0xapotheosis@gmail.com>

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<ChangeAddressRouteProps & ChangeAddressInput
     trigger('newRuneAddress')
   }, [trigger, currentRuneAddress])
 
+  if (!stakingAssetAccountAddress)
+    return (
+      <SlideTransition>
+        <Stack>{headerComponent}</Stack>
+        <CardBody py={12}>
+          <ChainNotSupported chainId={stakingAsset?.chainId} />
+        </CardBody>
+      </SlideTransition>
+    )
   if (!stakingAsset) return null
 
   return (

src/pages/RFOX/components/Claim/ClaimSelect.tsx

@@ -1,21 +1,21 @@
 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'
 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<NoClaimsAvailableProps> = ({ isError, setStepIndex }
   )
 }
 
-type ChainNotSupportedProps = {
-  chainId: ChainId | undefined
-}
-
-const ChainNotSupported: FC<ChainNotSupportedProps> = ({ chainId }) => {
-  const translate = useTranslate()
-
-  if (!chainId) return null
-
-  const chainLabel = chainIdToChainDisplayName(chainId)
-
-  return (
-    <Center flexDir={'column'}>
-      <AssetIcon size='lg' assetId={foxAssetId} showNetworkIcon={false} mb={4} />
-      <Text translation='RFOX.noSupportedChains' fontSize='xl' fontWeight={'bold'} mb={4} />
-      <RawText fontSize='md' color='gray.400' mb={4} textAlign={'center'}>
-        {translate('RFOX.noSupportedChainsDescription', { chainLabel })}
-      </RawText>
-    </Center>
-  )
-}
-
 export const ClaimSelect: FC<ClaimSelectProps & ClaimRouteProps> = ({
   headerComponent,
   setConfirmedQuote,

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<ChainNotSupportedProps> = ({ chainId }) => {
+  const translate = useTranslate()
+
+  if (!chainId) return null
+
+  const chainLabel = chainIdToChainDisplayName(chainId)
+
+  return (
+    <Center flexDir={'column'}>
+      <AssetIcon size='lg' assetId={foxAssetId} showNetworkIcon={false} mb={4} />
+      <Text translation='RFOX.noSupportedChains' fontSize='xl' fontWeight={'bold'} mb={4} />
+      <RawText fontSize='md' color='gray.400' mb={4} textAlign={'center'}>
+        {translate('RFOX.noSupportedChainsDescription', { chainLabel })}
+      </RawText>
+    </Center>
+  )
+}

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<UnstakeRouteProps & UnstakeInputProps> = ({
     return translate('trade.errors.quoteUnsupportedChain')
   }, [isChainSupportedByWallet, translate])
 
+  if (!stakingAssetAccountAddress)
+    return (
+      <SlideTransition>
+        <Stack>{headerComponent}</Stack>
+        <CardBody py={12}>
+          <ChainNotSupported chainId={stakingAsset?.chainId} />
+        </CardBody>
+      </SlideTransition>
+    )
+
   if (!stakingAsset) return null
 
   return (