chore: release v1.491.0

package.json

@@ -93,20 +93,20 @@
     "@shapeshiftoss/caip": "workspace:^",
     "@shapeshiftoss/chain-adapters": "workspace:^",
     "@shapeshiftoss/errors": "workspace:^",
-    "@shapeshiftoss/hdwallet-coinbase": "1.52.12",
-    "@shapeshiftoss/hdwallet-core": "1.52.12",
-    "@shapeshiftoss/hdwallet-keepkey": "1.52.12",
-    "@shapeshiftoss/hdwallet-keepkey-webusb": "1.52.12",
-    "@shapeshiftoss/hdwallet-keplr": "1.52.12",
-    "@shapeshiftoss/hdwallet-ledger": "1.52.12",
-    "@shapeshiftoss/hdwallet-ledger-webhid": "1.52.12",
-    "@shapeshiftoss/hdwallet-ledger-webusb": "1.52.12",
-    "@shapeshiftoss/hdwallet-metamask": "1.52.12",
-    "@shapeshiftoss/hdwallet-native": "1.52.12",
-    "@shapeshiftoss/hdwallet-native-vault": "1.52.12",
-    "@shapeshiftoss/hdwallet-shapeshift-multichain": "1.52.12",
-    "@shapeshiftoss/hdwallet-walletconnectv2": "1.52.12",
-    "@shapeshiftoss/hdwallet-xdefi": "1.52.12",
+    "@shapeshiftoss/hdwallet-coinbase": "1.52.13",
+    "@shapeshiftoss/hdwallet-core": "1.52.13",
+    "@shapeshiftoss/hdwallet-keepkey": "1.52.13",
+    "@shapeshiftoss/hdwallet-keepkey-webusb": "1.52.13",
+    "@shapeshiftoss/hdwallet-keplr": "1.52.13",
+    "@shapeshiftoss/hdwallet-ledger": "1.52.13",
+    "@shapeshiftoss/hdwallet-ledger-webhid": "1.52.13",
+    "@shapeshiftoss/hdwallet-ledger-webusb": "1.52.13",
+    "@shapeshiftoss/hdwallet-metamask": "1.52.13",
+    "@shapeshiftoss/hdwallet-native": "1.52.13",
+    "@shapeshiftoss/hdwallet-native-vault": "1.52.13",
+    "@shapeshiftoss/hdwallet-shapeshift-multichain": "1.52.13",
+    "@shapeshiftoss/hdwallet-walletconnectv2": "1.52.13",
+    "@shapeshiftoss/hdwallet-xdefi": "1.52.13",
     "@shapeshiftoss/types": "workspace:^",
     "@shapeshiftoss/unchained-client": "workspace:^",
     "@sniptt/monads": "^0.5.10",

src/assets/translations/en/main.json

@@ -2185,6 +2185,9 @@
   },
   "lending": {
     "lending": "Lending",
+    "repaymentAvailable": "Repayment available",
+    "daysUntilRepayment": "%{numDays} days until repayment",
+    "repaymentDays": "%{numDays} days",
     "lendingBody": "A listing of all pools that can be borrowed at zero-interest and zero liquidations.",
     "collateralValue": "Collateral Value",
     "collateralValueDescription": "Current value of your asset used as collateral",
@@ -2232,6 +2235,7 @@
     "repayNoticeCta": "I understand",
     "repayNotice": "To get back your collateral you will need to repay 100% of your debt.",
     "feesNotice": "Fees occurred on the collateral you will receive back after repaying 100% of your debt",
+    "refetchQuote": "Refetch Quote",
     "faq": {
       "title": "FAQ",
       "lending": {
@@ -2258,14 +2262,14 @@
   "foxDiscounts": {
     "currentFoxPower": "Your FOX Power",
     "foxPower": "FOX Power",
-    "simulateTitle": "Simulate your FOX Savings",
+    "simulateTitle": "Simulate your FOX power discounts",
     "simulateBody": "Use this handy calculator to determine your total fees and the discount you'll receive on your trade. Simply adjust the sliders below to indicate your FOX holder amount and the trade size in fiat, and watch your potential savings unfold!",
     "tradeSize": "Trade Size",
     "totalFee": "Total Fee",
     "foxPowerDiscount": "FOX Power Discount",
     "basedOnFee": "Based on a fee of: %{fee}",
     "feeSummary": "Fee Summary",
-    "simulateFee": "Simulate Fee",
+    "simulateFee": "Simulate Discount",
     "freeUnderThreshold": "Trades under %{threshold} are always FREE",
     "breakdownHeader": "Your FOX Power Discount",
     "breakdownBody": "Below is a breakdown of your trade fees and the corresponding FOX Power Discount applied. Learn how much more you can save on the simulate tab.",

src/components/MultiHopTrade/components/MultiHopTradeConfirm/MultiHopTradeConfirm.tsx

@@ -8,7 +8,7 @@ import { Text } from 'components/Text'
 import { swappers as swappersSlice } from 'state/slices/swappersSlice/swappersSlice'
 import { selectTradeExecutionState } from 'state/slices/tradeQuoteSlice/selectors'
 import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
-import { MultiHopExecutionState } from 'state/slices/tradeQuoteSlice/types'
+import { TradeExecutionState } from 'state/slices/tradeQuoteSlice/types'
 import { useAppDispatch, useAppSelector } from 'state/store'
 
 import { TradeSuccess } from '../TradeSuccess/TradeSuccess'
@@ -50,7 +50,7 @@ export const MultiHopTradeConfirm = memo(() => {
   useEffect(() => {
     if (
       previousTradeExecutionState !== tradeExecutionState &&
-      previousTradeExecutionState === MultiHopExecutionState.FirstHopAwaitingTradeExecution
+      previousTradeExecutionState === TradeExecutionState.FirstHop
     ) {
       if (isFirstHopOpen) onToggleFirstHop()
       if (!isSecondHopOpen) onToggleSecondHop()
@@ -65,7 +65,7 @@ export const MultiHopTradeConfirm = memo(() => {
   ])
 
   const isTradeComplete = useMemo(
-    () => tradeExecutionState === MultiHopExecutionState.TradeComplete,
+    () => tradeExecutionState === TradeExecutionState.TradeComplete,
     [tradeExecutionState],
   )
 
@@ -77,7 +77,7 @@ export const MultiHopTradeConfirm = memo(() => {
             <Heading textAlign='center' fontSize='md'>
               <Text
                 translation={
-                  tradeExecutionState === MultiHopExecutionState.Previewing
+                  tradeExecutionState === TradeExecutionState.Previewing
                     ? 'trade.confirmDetails'
                     : 'trade.trade'
                 }

src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep.tsx

@@ -1,7 +1,7 @@
 import { CheckCircleIcon } from '@chakra-ui/icons'
-import { Box, Button, Card, Center, Icon, Link, Switch, Tooltip, VStack } from '@chakra-ui/react'
+import { Box, Button, Card, Icon, Link, Switch, Tooltip, VStack } from '@chakra-ui/react'
 import { TxStatus } from '@shapeshiftoss/unchained-client'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo } from 'react'
 import { FaInfoCircle, FaThumbsUp } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'
 import { MiddleEllipsis } from 'components/MiddleEllipsis/MiddleEllipsis'
@@ -15,7 +15,7 @@ import type { TradeQuoteStep } from 'lib/swapper/types'
 import { selectFeeAssetById } from 'state/slices/selectors'
 import { selectHopExecutionMetadata } from 'state/slices/tradeQuoteSlice/selectors'
 import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
-import { HOP_EXECUTION_STATE_ORDERED, HopExecutionState } from 'state/slices/tradeQuoteSlice/types'
+import { TransactionExecutionState } from 'state/slices/tradeQuoteSlice/types'
 import { store, useAppDispatch, useAppSelector } from 'state/store'
 
 import { useMockAllowanceApproval } from '../hooks/mockHooks'
@@ -28,7 +28,6 @@ export type ApprovalStepProps = {
   isActive: boolean
   isLastStep?: boolean
   isLoading?: boolean
-  onError: () => void
 }
 
 export const ApprovalStep = ({
@@ -37,42 +36,45 @@ export const ApprovalStep = ({
   isActive,
   isLastStep,
   isLoading,
-  onError: handleError,
 }: ApprovalStepProps) => {
   const {
     number: { toCrypto },
   } = useLocaleFormatter()
   const dispatch = useAppDispatch()
   const [isExactAllowance, toggleIsExactAllowance] = useToggle(false)
-  const [isError, setIsError] = useState<boolean>(false)
 
   const {
-    state: hopExecutionState,
-    approvalTxHash: txHash,
-    approvalState,
+    approval: { txHash, state: approvalTxState },
   } = useAppSelector(selectHopExecutionMetadata)[hopIndex]
 
+  const isError = useMemo(
+    () => approvalTxState === TransactionExecutionState.Failed,
+    [approvalTxState],
+  )
+
   const { executeAllowanceApproval, approvalNetworkFeeCryptoBaseUnit } = useMockAllowanceApproval(
     tradeQuoteStep,
-    hopIndex === 0,
+    hopIndex,
     isExactAllowance,
   ) // TODO: use the real hook here
 
   const handleSignAllowanceApproval = useCallback(async () => {
-    // next state
-    dispatch(tradeQuoteSlice.actions.incrementTradeExecutionState())
+    if (approvalTxState !== TransactionExecutionState.AwaitingConfirmation) {
+      console.error('attempted to execute in-progress allowance approval')
+      return
+    }
+
+    dispatch(tradeQuoteSlice.actions.setApprovalTxPending({ hopIndex }))
 
     // execute the allowance approval
     const finalTxStatus = await executeAllowanceApproval()
 
-    // next state if trade was successful
     if (finalTxStatus === TxStatus.Confirmed) {
-      dispatch(tradeQuoteSlice.actions.incrementTradeExecutionState())
+      dispatch(tradeQuoteSlice.actions.setApprovalTxComplete({ hopIndex }))
     } else if (finalTxStatus === TxStatus.Failed) {
-      setIsError(true)
-      handleError()
+      dispatch(tradeQuoteSlice.actions.setApprovalTxFailed({ hopIndex }))
     }
-  }, [dispatch, executeAllowanceApproval, handleError])
+  }, [approvalTxState, dispatch, executeAllowanceApproval, hopIndex])
 
   const feeAsset = selectFeeAssetById(store.getState(), tradeQuoteStep.sellAsset.assetId)
   const approvalNetworkFeeCryptoFormatted =
@@ -83,24 +85,12 @@ export const ApprovalStep = ({
         )
       : ''
 
-  // the txStatus needs to be undefined before the tx is executed to handle "ready" but not "executing" status
-  const txStatus =
-    HOP_EXECUTION_STATE_ORDERED.indexOf(hopExecutionState) >=
-    HOP_EXECUTION_STATE_ORDERED.indexOf(HopExecutionState.AwaitingApprovalExecution)
-      ? approvalState
-      : undefined
-
-  const stepIndicator = useMemo(
-    () =>
-      txStatus !== undefined ? (
-        <StatusIcon txStatus={txStatus} />
-      ) : (
-        <Center fontSize='sm'>
-          <FaThumbsUp />
-        </Center>
-      ),
-    [txStatus],
-  )
+  const stepIndicator = useMemo(() => {
+    const defaultIcon = <FaThumbsUp />
+    // eslint too stoopid to realize this is inside the context of useMemo already
+    // eslint-disable-next-line react-memo/require-usememo
+    return <StatusIcon txStatus={approvalTxState} defaultIcon={defaultIcon} />
+  }, [approvalTxState])
 
   const translate = useTranslate()
 
@@ -183,7 +173,7 @@ export const ApprovalStep = ({
             size='sm'
             leftIcon={leftIcon}
             colorScheme='blue'
-            isLoading={hopExecutionState === HopExecutionState.AwaitingApprovalExecution}
+            isLoading={approvalTxState === TransactionExecutionState.Pending}
             onClick={handleSignAllowanceApproval}
           >
             {translate('common.approve')}
@@ -192,8 +182,8 @@ export const ApprovalStep = ({
       </Card>
     )
   }, [
+    approvalTxState,
     handleSignAllowanceApproval,
-    hopExecutionState,
     isActive,
     isExactAllowance,
     leftIcon,
@@ -210,7 +200,7 @@ export const ApprovalStep = ({
       content={content}
       isLastStep={isLastStep}
       isLoading={isLoading}
-      isError={txStatus === TxStatus.Failed}
+      isError={approvalTxState === TransactionExecutionState.Failed}
     />
   )
 }

src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Footer.tsx

@@ -24,7 +24,7 @@ import {
   selectTradeExecutionState,
 } from 'state/slices/tradeQuoteSlice/selectors'
 import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
-import { MultiHopExecutionState } from 'state/slices/tradeQuoteSlice/types'
+import { TradeExecutionState } from 'state/slices/tradeQuoteSlice/types'
 import { useAppDispatch, useAppSelector } from 'state/store'
 
 export const Footer = () => {
@@ -38,7 +38,7 @@ export const Footer = () => {
   const { isModeratePriceImpact } = usePriceImpact()
 
   const handleConfirm = useCallback(() => {
-    dispatch(tradeQuoteSlice.actions.incrementTradeExecutionState())
+    dispatch(tradeQuoteSlice.actions.confirmTrade())
   }, [dispatch])
 
   const networkFeeToTradeRatioPercentage = useMemo(
@@ -105,7 +105,7 @@ export const Footer = () => {
     )
   }, [swapperName, lastHopBuyAsset, translate])
 
-  return tradeExecutionState === MultiHopExecutionState.Previewing ? (
+  return tradeExecutionState === TradeExecutionState.Previewing ? (
     <CardFooter
       flexDir='column'
       gap={2}