fix: custom rfox reward address display (#7734)

src/pages/RFOX/Widget.tsx

@@ -97,7 +97,7 @@ export const Widget: React.FC = () => {
       <Tabs variant='unstyled' index={stepIndex} isLazy>
         <TabPanels>
           <TabPanel px={0} py={0}>
-            <Stake headerComponent={TabHeader} />
+            <Stake headerComponent={TabHeader} setStepIndex={setStepIndex} />
           </TabPanel>
           <TabPanel px={0} py={0}>
             <Unstake headerComponent={TabHeader} />

src/pages/RFOX/components/AddressSelection.tsx

@@ -7,27 +7,33 @@ import {
   FormLabel,
   Input,
   Stack,
+  Tag,
 } from '@chakra-ui/react'
 import { fromAccountId, thorchainAssetId, thorchainChainId, toAccountId } from '@shapeshiftoss/caip'
 import type { FC } from 'react'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useForm, useFormContext } from 'react-hook-form'
 import { useTranslate } from 'react-polyglot'
 import { AccountDropdown } from 'components/AccountDropdown/AccountDropdown'
 import { InlineCopyButton } from 'components/InlineCopyButton'
+import { MiddleEllipsis } from 'components/MiddleEllipsis/MiddleEllipsis'
+import { Text } from 'components/Text'
 import { validateAddress } from 'lib/address/address'
 import {
   selectAccountIdByAccountNumberAndChainId,
   selectAccountNumberByAccountId,
+  selectPortfolioAccountIdsByAssetIdFilter,
 } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
 
 import { selectRuneAddress } from '../helpers'
 import { useRFOXContext } from '../hooks/useRfoxContext'
 import { useStakingInfoQuery } from '../hooks/useStakingInfoQuery'
 import type { AddressSelectionValues } from '../types'
+import { RfoxTabIndex } from '../Widget'
 
 type AddressSelectionProps = {
+  setStepIndex: ((index: number) => void) | undefined
   onRuneAddressChange: (address: string | undefined) => void
   selectedAddress: string | undefined
 } & (
@@ -58,6 +64,7 @@ export const AddressSelection: FC<AddressSelectionProps> = ({
   isNewAddress,
   selectedAddress,
   validateIsNewAddress,
+  setStepIndex,
 }) => {
   const translate = useTranslate()
 
@@ -77,6 +84,15 @@ export const AddressSelection: FC<AddressSelectionProps> = ({
     select: selectRuneAddress,
   })
 
+  useEffect(() => {
+    handleRuneAddressChange(undefined)
+    setIsManualAddress(false)
+  }, [stakingAssetAccountId, handleRuneAddressChange])
+
+  const shouldDisableAccountDropdown = useMemo(() => {
+    return Boolean(currentRuneAddress && setStepIndex)
+  }, [currentRuneAddress, setStepIndex])
+
   const [isManualAddress, setIsManualAddress] = useState(false)
 
   const handleAccountIdChange = useCallback(
@@ -91,6 +107,10 @@ export const AddressSelection: FC<AddressSelectionProps> = ({
     setIsManualAddress(!isManualAddress)
   }, [isManualAddress, handleRuneAddressChange])
 
+  const handleChangeAddressClick = useCallback(() => {
+    setStepIndex?.(RfoxTabIndex.ChangeAddress)
+  }, [setStepIndex])
+
   const manualAddressSelection = useMemo(() => {
     if (!isManualAddress) return null
     return (
@@ -177,18 +197,44 @@ export const AddressSelection: FC<AddressSelectionProps> = ({
   }, [accountIdsByAccountNumberAndChainId, stakingAssetAccountNumber])
 
   const maybeRuneAccountId = useMemo(() => {
-    if (selectedAddress) return toAccountId({ account: selectedAddress, chainId: thorchainChainId })
+    if (selectedAddress && !shouldDisableAccountDropdown)
+      return toAccountId({ account: selectedAddress, chainId: thorchainChainId })
     if (currentRuneAddress)
       return toAccountId({ account: currentRuneAddress, chainId: thorchainChainId })
     if (maybeMatchingRuneAccountId) return maybeMatchingRuneAccountId
+
     return undefined
-  }, [currentRuneAddress, maybeMatchingRuneAccountId, selectedAddress])
+  }, [
+    currentRuneAddress,
+    maybeMatchingRuneAccountId,
+    selectedAddress,
+    shouldDisableAccountDropdown,
+  ])
 
   const maybeSelectedRuneAddress = useMemo(() => {
     if (!maybeRuneAccountId) return
     return fromAccountId(maybeRuneAccountId).account
   }, [maybeRuneAccountId])
 
+  const filter = useMemo(() => ({ accountId: maybeRuneAccountId }), [maybeRuneAccountId])
+  const accountNumber = useAppSelector(state => selectAccountNumberByAccountId(state, filter))
+
+  const accountsFilter = useMemo(() => ({ assetId: thorchainAssetId }), [])
+  const runeAccounts = useAppSelector(state =>
+    selectPortfolioAccountIdsByAssetIdFilter(state, accountsFilter),
+  )
+
+  const CustomAddress = useCallback(() => {
+    if (!maybeSelectedRuneAddress)
+      return <Text translation='RFOX.noAddressFound' color='text.subtle' fontSize='sm' />
+
+    return (
+      <Tag colorScheme='gray'>
+        <MiddleEllipsis value={maybeSelectedRuneAddress} />
+      </Tag>
+    )
+  }, [maybeSelectedRuneAddress])
+
   const accountSelection = useMemo(() => {
     if (isManualAddress) return null
 
@@ -197,16 +243,34 @@ export const AddressSelection: FC<AddressSelectionProps> = ({
         isDisabled={!maybeSelectedRuneAddress}
         value={maybeSelectedRuneAddress ?? ''}
       >
-        <AccountDropdown
-          defaultAccountId={maybeRuneAccountId}
-          assetId={thorchainAssetId}
-          onChange={handleAccountIdChange}
-          boxProps={boxProps}
-          buttonProps={buttonProps}
-        />
+        {(!Boolean(currentRuneAddress) && maybeRuneAccountId && setStepIndex) ||
+        accountNumber !== undefined ||
+        (!setStepIndex && runeAccounts.length) ? (
+          <AccountDropdown
+            defaultAccountId={maybeRuneAccountId}
+            assetId={thorchainAssetId}
+            onChange={handleAccountIdChange}
+            boxProps={boxProps}
+            buttonProps={buttonProps}
+            disabled={Boolean(shouldDisableAccountDropdown)}
+          />
+        ) : (
+          <CustomAddress />
+        )}
       </InlineCopyButton>
     )
-  }, [handleAccountIdChange, isManualAddress, maybeRuneAccountId, maybeSelectedRuneAddress])
+  }, [
+    handleAccountIdChange,
+    isManualAddress,
+    maybeRuneAccountId,
+    maybeSelectedRuneAddress,
+    CustomAddress,
+    currentRuneAddress,
+    setStepIndex,
+    shouldDisableAccountDropdown,
+    accountNumber,
+    runeAccounts,
+  ])
 
   const addressSelectionLabel = useMemo(
     () =>
@@ -220,23 +284,47 @@ export const AddressSelection: FC<AddressSelectionProps> = ({
     [isNewAddress, translate],
   )
 
+  const TopRightButton = useCallback(() => {
+    if (Boolean(currentRuneAddress && setStepIndex)) {
+      return (
+        <Button
+          variant='link'
+          colorScheme='blue'
+          size='sm-multiline'
+          onClick={handleChangeAddressClick}
+        >
+          {translate('RFOX.changeAddress')}
+        </Button>
+      )
+    }
+
+    return (
+      <Button
+        variant='link'
+        colorScheme='blue'
+        size='sm-multiline'
+        onClick={handleToggleInputMethod}
+      >
+        {isManualAddress ? translate('RFOX.useWalletAddress') : translate('RFOX.useCustomAddress')}
+      </Button>
+    )
+  }, [
+    currentRuneAddress,
+    handleToggleInputMethod,
+    handleChangeAddressClick,
+    isManualAddress,
+    translate,
+    setStepIndex,
+  ])
+
   return (
     <FormControl isInvalid={Boolean(isManualAddress && errors.manualRuneAddress)}>
       <Stack px={6} py={4}>
         <Flex alignItems='center' justifyContent='space-between' mb={2}>
           <FormLabel fontSize='sm' mb={0}>
             {addressSelectionLabel}
           </FormLabel>
-          <Button
-            variant='link'
-            colorScheme='blue'
-            size='sm-multiline'
-            onClick={handleToggleInputMethod}
-          >
-            {isManualAddress
-              ? translate('RFOX.useWalletAddress')
-              : translate('RFOX.useCustomAddress')}
-          </Button>
+          <TopRightButton />
         </Flex>
         <Box width='full'>{accountSelection || manualAddressSelection}</Box>
         <FormHelperText>{addressSelectionDescription}</FormHelperText>

src/pages/RFOX/components/ChangeAddress/ChangeAddressInput.tsx

@@ -17,6 +17,7 @@ import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router'
 import { encodeFunctionData } from 'viem'
 import { Amount } from 'components/Amount/Amount'
+import { InlineCopyButton } from 'components/InlineCopyButton'
 import { Row } from 'components/Row/Row'
 import { SlideTransition } from 'components/SlideTransition'
 import { RawText, Text } from 'components/Text'
@@ -233,9 +234,13 @@ export const ChangeAddressInput: FC<ChangeAddressRouteProps & ChangeAddressInput
               <Text translation={'RFOX.currentRewardAddress'} fontWeight={'bold'} mb={2} />
               <Skeleton isLoaded={isCurrentRuneAddressSuccess}>
                 <RawText fontSize='xl' color={currentRuneAddress ? 'text.base' : 'text.warning'}>
-                  {currentRuneAddress
-                    ? middleEllipsis(currentRuneAddress)
-                    : translate('RFOX.noAddressFound')}
+                  {currentRuneAddress ? (
+                    <InlineCopyButton value={currentRuneAddress}>
+                      {middleEllipsis(currentRuneAddress)}
+                    </InlineCopyButton>
+                  ) : (
+                    translate('RFOX.noAddressFound')
+                  )}
                 </RawText>
               </Skeleton>
             </Flex>
@@ -268,6 +273,7 @@ export const ChangeAddressInput: FC<ChangeAddressRouteProps & ChangeAddressInput
                 onRuneAddressChange={handleRuneAddressChange}
                 validateIsNewAddress={validateIsNewAddress}
                 selectedAddress={newRuneAddress}
+                setStepIndex={undefined}
               />
             </Skeleton>
           </Box>

src/pages/RFOX/components/Stake/Stake.tsx

@@ -57,15 +57,15 @@ const BridgeStatus = makeSuspenseful(
 
 const StakeEntries = [StakeRoutePaths.Input, StakeRoutePaths.Confirm, StakeRoutePaths.Status]
 
-export const Stake: React.FC<StakeRouteProps> = ({ headerComponent }) => {
+export const Stake: React.FC<StakeRouteProps> = ({ headerComponent, setStepIndex }) => {
   return (
     <MemoryRouter initialEntries={StakeEntries} initialIndex={0}>
-      <StakeRoutes headerComponent={headerComponent} />
+      <StakeRoutes headerComponent={headerComponent} setStepIndex={setStepIndex} />
     </MemoryRouter>
   )
 }
 
-export const StakeRoutes: React.FC<StakeRouteProps> = ({ headerComponent }) => {
+export const StakeRoutes: React.FC<StakeRouteProps> = ({ headerComponent, setStepIndex }) => {
   const location = useLocation<RfoxBridgeQuote | undefined>()
   const { state: maybeBridgeQuote } = location
 
@@ -102,11 +102,12 @@ export const StakeRoutes: React.FC<StakeRouteProps> = ({ headerComponent }) => {
         stakingAssetId={stakingAssetId}
         runeAddress={runeAddress}
         headerComponent={headerComponent}
+        setStepIndex={setStepIndex}
         onRuneAddressChange={setRuneAddress}
         setConfirmedQuote={setConfirmedQuote}
       />
     )
-  }, [headerComponent, runeAddress])
+  }, [headerComponent, runeAddress, setStepIndex])
 
   const renderStakeConfirm = useCallback(() => {
     if (!confirmedQuote) return null
@@ -115,11 +116,12 @@ export const StakeRoutes: React.FC<StakeRouteProps> = ({ headerComponent }) => {
       <StakeConfirm
         stakeTxid={stakeTxid}
         setStakeTxid={setStakeTxid}
+        setStepIndex={setStepIndex}
         confirmedQuote={confirmedQuote}
         headerComponent={headerComponent}
       />
     )
-  }, [confirmedQuote, headerComponent, stakeTxid])
+  }, [confirmedQuote, headerComponent, stakeTxid, setStepIndex])
 
   const renderStakeStatus = useCallback(() => {
     if (!confirmedQuote) return null
@@ -130,11 +132,12 @@ export const StakeRoutes: React.FC<StakeRouteProps> = ({ headerComponent }) => {
         txId={stakeTxid}
         setStakeTxid={setStakeTxid}
         confirmedQuote={confirmedQuote}
+        setStepIndex={setStepIndex}
         onTxConfirmed={handleTxConfirmed}
         headerComponent={headerComponent}
       />
     )
-  }, [confirmedQuote, handleTxConfirmed, headerComponent, stakeTxid])
+  }, [confirmedQuote, handleTxConfirmed, headerComponent, stakeTxid, setStepIndex])
 
   const renderBridgeConfirm = useCallback(() => {
     if (!maybeBridgeQuote) return null