feat: show change address when selling utxo (#10386)

* feat: show change address for UTXO transactions in the swapper

* polish design

* rework to pull in change address directly where needed

* ditch that idea and pull in in verify instead

* Update src/assets/translations/en/main.json

Co-authored-by: Apotheosis <[email protected]>

---------

Co-authored-by: Apotheosis <[email protected]>

Author: premiumjibles

src/assets/translations/en/main.json

@@ -966,6 +966,8 @@
     "intoAssetSymbolBody": "You can proceed with this trade, but transaction history for receiving %{assetSymbol} is temporarily unavailable",
     "manualReceiveAddress": "Receive address",
     "recipientAddress": "Recipient address",
+    "changeAddress": "Change address",
+    "changeAddressExplainer": "When sending cryptocurrencies on UTXO-based networks, any leftover funds from your transaction are sent back to you at this address.",
     "customRecipientAddress": "Custom recipient address",
     "customRecipientAddressDescription": "Enter a custom recipient address for this trade",
     "thisIsYourCustomRecipientAddress": "This is your custom recipient address",
@@ -1772,6 +1774,7 @@
       "failure": {
         "body": "Unable to connect Ledger wallet"
       },
+      "gettingChangeAddress": "Getting change address...",
       "connectWarning": "Before connecting a chain, make sure you have the app open on your device.",
       "signWarning": "Before signing, make sure you have the %{chain} app open on your device."
     },

src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx

@@ -1,8 +1,11 @@
-import { HStack, Skeleton, Stack, Switch } from '@chakra-ui/react'
+import { ExternalLinkIcon } from '@chakra-ui/icons'
+import { HStack, Icon, Link, Skeleton, Stack, Switch } from '@chakra-ui/react'
 import type { TradeQuoteStep } from '@shapeshiftoss/swapper'
 import { TransactionExecutionState } from '@shapeshiftoss/swapper'
 import type { FC } from 'react'
 import { useMemo } from 'react'
+import { TbArrowsSplit2 } from 'react-icons/tb'
+import { useTranslate } from 'react-polyglot'
 
 import { SharedConfirmFooter } from '../SharedConfirm/SharedConfirmFooter'
 import { TradeConfirmSummary } from './components/TradeConfirmSummary'
@@ -14,15 +17,21 @@ import { useTradeNetworkFeeCryptoBaseUnit } from './hooks/useTradeNetworkFeeCryp
 import { TradeFooterButton } from './TradeFooterButton'
 
 import { Amount } from '@/components/Amount/Amount'
+import { HelperTooltip } from '@/components/HelperTooltip/HelperTooltip'
 import { RecipientAddressRow } from '@/components/RecipientAddressRow'
 import { Row } from '@/components/Row/Row'
-import { Text } from '@/components/Text/Text'
+import { RawText, Text } from '@/components/Text'
+import { TooltipWithTouch } from '@/components/TooltipWithTouch'
 import { useToggle } from '@/hooks/useToggle/useToggle'
 import { bnOrZero } from '@/lib/bignumber/bignumber'
 import { fromBaseUnit } from '@/lib/math'
-import { selectFeeAssetById } from '@/state/slices/assetsSlice/selectors'
+import { middleEllipsis } from '@/lib/utils'
+import { selectAssetById, selectFeeAssetById } from '@/state/slices/assetsSlice/selectors'
 import { selectMarketDataByAssetIdUserCurrency } from '@/state/slices/marketDataSlice/selectors'
-import { selectInputBuyAsset } from '@/state/slices/tradeInputSlice/selectors'
+import {
+  selectInputBuyAsset,
+  selectSellAssetUtxoChangeAddress,
+} from '@/state/slices/tradeInputSlice/selectors'
 import {
   selectActiveQuote,
   selectHopExecutionMetadata,
@@ -42,10 +51,12 @@ export const TradeConfirmFooter: FC<TradeConfirmFooterProps> = ({
   activeTradeId,
 }) => {
   const [isExactAllowance, toggleIsExactAllowance] = useToggle(true)
+  const translate = useTranslate()
   const { currentTradeStep } = useStepperSteps()
   const currentHopIndex = useCurrentHopIndex()
   const quoteNetworkFeeCryptoBaseUnit = tradeQuoteStep.feeData.networkFeeCryptoBaseUnit
   const feeAsset = useSelectorWithArgs(selectFeeAssetById, tradeQuoteStep.sellAsset.assetId)
+  const sellAsset = useSelectorWithArgs(selectAssetById, tradeQuoteStep.sellAsset.assetId)
   const quoteNetworkFeeCryptoPrecision = fromBaseUnit(
     quoteNetworkFeeCryptoBaseUnit,
     feeAsset?.precision ?? 0,
@@ -89,6 +100,8 @@ export const TradeConfirmFooter: FC<TradeConfirmFooterProps> = ({
       : undefined,
   )
 
+  const maybeUtxoChangeAddress = useAppSelector(selectSellAssetUtxoChangeAddress)
+
   const {
     isLoading: isNetworkFeeCryptoBaseUnitLoading,
     isRefetching: isNetworkFeeCryptoBaseUnitRefetching,
@@ -264,17 +277,46 @@ export const TradeConfirmFooter: FC<TradeConfirmFooterProps> = ({
           explorerAddressLink={buyAsset.explorerAddressLink}
           recipientAddress={receiveAddress ?? ''}
         />
+        {maybeUtxoChangeAddress && (
+          <Row>
+            <Row.Label>
+              <HelperTooltip label={translate('trade.changeAddressExplainer')}>
+                <HStack spacing={2}>
+                  <Icon as={TbArrowsSplit2} />
+                  <Text translation='trade.changeAddress' />
+                </HStack>
+              </HelperTooltip>
+            </Row.Label>
+            <Row.Value>
+              <HStack>
+                <TooltipWithTouch label={maybeUtxoChangeAddress}>
+                  <RawText>{middleEllipsis(maybeUtxoChangeAddress)}</RawText>
+                </TooltipWithTouch>
+                <Link
+                  href={`${sellAsset?.explorerAddressLink}${maybeUtxoChangeAddress}`}
+                  isExternal
+                  aria-label={translate('common.viewOnExplorer')}
+                >
+                  <Icon as={ExternalLinkIcon} />
+                </Link>
+              </HStack>
+            </Row.Value>
+          </Row>
+        )}
       </Stack>
     )
   }, [
-    buyAsset,
-    feeAsset?.symbol,
     isActiveSwapperQuoteLoading,
     isNetworkFeeCryptoBaseUnitLoading,
     isNetworkFeeCryptoBaseUnitRefetching,
+    feeAsset?.symbol,
     networkFeeCryptoPrecision,
     networkFeeUserCurrency,
+    buyAsset.explorerAddressLink,
     receiveAddress,
+    maybeUtxoChangeAddress,
+    translate,
+    sellAsset?.explorerAddressLink,
   ])
 
   const tradeDetail = useMemo(() => {

src/components/MultiHopTrade/components/VerifyAddresses/VerifyAddresses.tsx

@@ -40,7 +40,8 @@ import {
   selectInputSellAsset,
   selectManualReceiveAddress,
 } from '@/state/slices/tradeInputSlice/selectors'
-import { useAppSelector } from '@/state/store'
+import { tradeInput } from '@/state/slices/tradeInputSlice/tradeInputSlice'
+import { useAppDispatch, useAppSelector } from '@/state/store'
 
 enum AddressVerificationType {
   Sell = 'sell',
@@ -56,13 +57,15 @@ enum AddressVerificationStatus {
 
 export const VerifyAddresses = () => {
   const wallet = useWallet().state.wallet
+  const dispatch = useAppDispatch()
   const navigate = useNavigate()
   const translate = useTranslate()
 
   const [sellAddress, setSellAddress] = useState<string | undefined>()
   const [buyAddress, setBuyAddress] = useState<string | undefined>()
   const [isSellVerifying, setIsSellVerifying] = useState(false)
   const [isBuyVerifying, setIsBuyVerifying] = useState(false)
+  const [isFetchingChangeAddress, setIsFetchingChangeAddress] = useState(false)
 
   const [buyAddressVerificationStatus, setBuyAddressVerificationStatus] =
     useState<AddressVerificationStatus>(AddressVerificationStatus.Pending)
@@ -266,15 +269,35 @@ export const VerifyAddresses = () => {
         })
 
         if (deviceAddress && deviceAddress.toLowerCase() === _address.toLowerCase()) {
-          setStatus(type, AddressVerificationStatus.Verified)
+          setIsVerifying(type, false)
+
+          // If we're verifying a UTXO sell asset, fetch the change address
+          if (type === AddressVerificationType.Sell && chainNamespace === CHAIN_NAMESPACE.Utxo) {
+            setIsFetchingChangeAddress(true)
+            setStatus(type, AddressVerificationStatus.Verified)
+            try {
+              const changeAddress = await adapter.getAddress({
+                wallet,
+                showOnDevice: false,
+                accountType: accountMetadata.accountType,
+                accountNumber: bip44Params.accountNumber,
+                isChange: true,
+              })
+              dispatch(tradeInput.actions.setSellAssetUtxoChangeAddress(changeAddress))
+            } catch (e) {
+              console.error('Failed to fetch change address:', e)
+            } finally {
+              setIsFetchingChangeAddress(false)
+            }
+          } else {
+            setStatus(type, AddressVerificationStatus.Verified)
+          }
         } else {
           setStatus(type, AddressVerificationStatus.Error)
           setErrorMessage(type, translate('walletProvider.ledger.verify.addressMismatch'))
         }
       } catch (e) {
         console.error(e)
-      } finally {
-        setIsVerifying(type, false)
       }
     },
     [
@@ -291,6 +314,7 @@ export const VerifyAddresses = () => {
       setStatus,
       setErrorMessage,
       translate,
+      dispatch,
     ],
   )
 
@@ -358,6 +382,23 @@ export const VerifyAddresses = () => {
       )
     }
 
+    if (
+      sellAddressVerificationStatus === AddressVerificationStatus.Verified &&
+      isFetchingChangeAddress
+    ) {
+      return (
+        <Button
+          size='lg'
+          colorScheme='blue'
+          width='full'
+          isLoading
+          loadingText={translate('walletProvider.ledger.gettingChangeAddress')}
+        >
+          <Text translation='walletProvider.ledger.gettingChangeAddress' />
+        </Button>
+      )
+    }
+
     return (
       <Button onClick={handleContinue} size='lg' colorScheme='blue' width='full'>
         <Text translation='common.continue' />
@@ -366,6 +407,7 @@ export const VerifyAddresses = () => {
   }, [
     buyAddressVerificationStatus,
     sellAddressVerificationStatus,
+    isFetchingChangeAddress,
     handleContinue,
     handleBuyVerify,
     isBuyVerifying,
@@ -432,10 +474,10 @@ export const VerifyAddresses = () => {
                     </Skeleton>
                   </Flex>
                   {isSellVerifying && <Spinner boxSize={5} />}
-                  {sellAddressVerificationStatus === 'verified' && (
+                  {sellAddressVerificationStatus === AddressVerificationStatus.Verified && (
                     <CheckCircleIcon ml='auto' boxSize={5} color='text.success' />
                   )}
-                  {sellAddressVerificationStatus === 'error' && (
+                  {sellAddressVerificationStatus === AddressVerificationStatus.Error && (
                     <WarningIcon ml='auto' boxSize={5} color='text.error' />
                   )}
                 </Flex>

src/state/slices/tradeInputSlice/selectors.ts

@@ -141,3 +141,8 @@ export const selectSecondHopSellAccountId = createSelector(
     return chainIdAccountNumbers?.[secondHopSellAssetChainId]
   },
 )
+
+export const selectSellAssetUtxoChangeAddress = createSelector(
+  selectBaseSlice,
+  tradeInput => tradeInput.sellAssetUtxoChangeAddress,
+)

src/state/slices/tradeInputSlice/tradeInputSlice.ts

@@ -12,6 +12,7 @@ import { localAssetData } from '@/lib/asset-service'
 
 export type TradeInputState = {
   slippagePreferencePercentage: string | undefined
+  sellAssetUtxoChangeAddress: string | undefined
 } & TradeInputBaseState
 
 const initialState: TradeInputState = {
@@ -26,6 +27,7 @@ const initialState: TradeInputState = {
   isManualReceiveAddressValid: undefined,
   isManualReceiveAddressEditing: false,
   slippagePreferencePercentage: undefined,
+  sellAssetUtxoChangeAddress: undefined,
   selectedSellAssetChainId: 'All',
   selectedBuyAssetChainId: 'All',
 }
@@ -41,5 +43,11 @@ export const tradeInput = createTradeInputBaseSlice({
     ) => {
       state.slippagePreferencePercentage = action.payload
     },
+    setSellAssetUtxoChangeAddress: (
+      state: TradeInputState,
+      action: PayloadAction<string | undefined>,
+    ) => {
+      state.sellAssetUtxoChangeAddress = action.payload
+    },
   }),
 })

src/test/mocks/store.ts

@@ -276,6 +276,7 @@ export const mockStore: ReduxState = {
     isManualReceiveAddressEditing: false,
     isManualReceiveAddressValid: undefined,
     slippagePreferencePercentage: undefined,
+    sellAssetUtxoChangeAddress: undefined,
     selectedBuyAssetChainId: 'All',
     selectedSellAssetChainId: 'All',
   },