feat: incremental tweaks to new swapper (#8408)

shapeshift · Dec 20, 2024 · 0cb7aa8 · 0cb7aa8
1 parent 31baf7b
commit 0cb7aa8
Show file tree

Hide file tree

Showing 8 changed files with 207 additions and 110 deletions.
diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
@@ -1011,17 +1011,19 @@
     },
     "hopTitle": {
       "bridge": "Bridge via %{swapperName}",
-      "swap": "Swap via %{swapperName}"
+      "swap": "Swap via %{swapperName}",
+      "swapEta": "Swap via %{swapperName} in ~%{eta}"
     },
     "transactionFailed": {
       "bridge": "A problem occurred executing the bridge",
       "swap": "A problem occurred executing the swap"
     },
     "transactionTitle": {
-      "bridge": "Bridge from %{sellChainName} to %{buyChainName} via %{swapperName}",
+      "bridge": "Swap from %{sellChainName} to %{buyChainName} via %{swapperName}",
       "swap": "Swap on %{sellChainName} via %{swapperName}"
     },
     "approvalTitle": "Token allowance approval",
+    "permit2Title": "Permit token transfer",
     "resetTitle": "Token allowance reset",
     "fiatAmountOnChain": "%{amountFiatFormatted} on %{chainName}",
     "quote": {

diff --git a/src/components/Amount/Amount.tsx b/src/components/Amount/Amount.tsx
@@ -14,6 +14,7 @@ export type AmountProps = {
   abbreviated?: boolean
   truncateLargeNumbers?: boolean
   maximumFractionDigits?: number
+  noSpace?: boolean
 } & TextProps
 
 export function Amount({
@@ -23,6 +24,7 @@ export function Amount({
   maximumFractionDigits,
   omitDecimalTrailingZeros = false,
   abbreviated = false,
+  noSpace = false,
   ...props
 }: any): React.ReactElement {
   const {
@@ -31,9 +33,9 @@ export function Amount({
 
   return (
     <RawText {...props}>
-      {prefix}
+      {prefix && `${prefix}${noSpace ? '' : ' '}`}
       {toString(value, { maximumFractionDigits, omitDecimalTrailingZeros, abbreviated })}
-      {suffix}
+      {suffix && `${noSpace ? '' : ' '}${suffix}`}
     </RawText>
   )
 }
@@ -62,6 +64,7 @@ const Crypto = ({
   omitDecimalTrailingZeros = false,
   abbreviated = false,
   truncateLargeNumbers = false,
+  noSpace = false,
   ...props
 }: CryptoAmountProps) => {
   const {
@@ -77,9 +80,9 @@ const Crypto = ({
 
   return (
     <RawText {...props}>
-      {prefix && `${prefix} `}
+      {prefix && `${prefix}${noSpace ? '' : ' '}`}
       {crypto}
-      {suffix && ` ${suffix}`}
+      {suffix && `${noSpace ? '' : ' '}${suffix}`}
     </RawText>
   )
 }
@@ -92,6 +95,7 @@ const Fiat = ({
   maximumFractionDigits,
   omitDecimalTrailingZeros = false,
   abbreviated = false,
+  noSpace = false,
   ...props
 }: FiatAmountProps) => {
   const {
@@ -107,9 +111,9 @@ const Fiat = ({
 
   return (
     <RawText {...props}>
-      {prefix && `${prefix} `}
+      {prefix && `${prefix}${noSpace ? '' : ' '}`}
       {fiat}
-      {suffix && ` ${suffix}`}
+      {suffix && `${noSpace ? '' : ' '}${suffix}`}
     </RawText>
   )
 }

diff --git a/src/components/MultiHopTrade/components/TradeConfirm/EtaStep.tsx b/src/components/MultiHopTrade/components/TradeConfirm/EtaStep.tsx
@@ -1,6 +1,7 @@
 import { ArrowDownIcon } from '@chakra-ui/icons'
 import prettyMilliseconds from 'pretty-ms'
 import { useMemo } from 'react'
+import { useTranslate } from 'react-polyglot'
 import { selectIsActiveQuoteMultiHop } from 'state/slices/tradeInputSlice/selectors'
 import { selectFirstHop, selectLastHop } from 'state/slices/tradeQuoteSlice/selectors'
 import { useAppSelector } from 'state/store'
@@ -10,6 +11,7 @@ import { StepperStep } from '../MultiHopTradeConfirm/components/StepperStep'
 const etaStepProps = { alignItems: 'center', py: 2 }
 
 export const EtaStep = () => {
+  const translate = useTranslate()
   const tradeQuoteFirstHop = useAppSelector(selectFirstHop)
   const tradeQuoteLastHop = useAppSelector(selectLastHop)
   const isMultiHopTrade = useAppSelector(selectIsActiveQuoteMultiHop)
@@ -21,15 +23,19 @@ export const EtaStep = () => {
       ? tradeQuoteFirstHop.estimatedExecutionTimeMs + tradeQuoteLastHop.estimatedExecutionTimeMs
       : tradeQuoteFirstHop.estimatedExecutionTimeMs
   }, [isMultiHopTrade, tradeQuoteFirstHop, tradeQuoteLastHop])
+  const swapperName = tradeQuoteFirstHop?.source
 
   const stepIndicator = useMemo(() => {
     return <ArrowDownIcon color='gray.500' boxSize={5} />
   }, [])
   const title = useMemo(() => {
     return totalEstimatedExecutionTimeMs
-      ? `Estimated completion ${prettyMilliseconds(totalEstimatedExecutionTimeMs)}`
-      : 'Estimated completion time unknown'
-  }, [totalEstimatedExecutionTimeMs])
+      ? translate('trade.hopTitle.swapEta', {
+          swapperName,
+          eta: prettyMilliseconds(totalEstimatedExecutionTimeMs),
+        })
+      : translate('trade.hopTitle.swap', { swapperName })
+  }, [totalEstimatedExecutionTimeMs, swapperName, translate])
   return (
     <StepperStep
       title={title}

diff --git a/src/components/MultiHopTrade/components/TradeConfirm/ExpandableTradeSteps.tsx b/src/components/MultiHopTrade/components/TradeConfirm/ExpandableTradeSteps.tsx
@@ -6,7 +6,6 @@ import { Text } from 'components/Text'
 import {
   selectActiveQuote,
   selectActiveQuoteErrors,
-  selectActiveSwapperName,
   selectConfirmedTradeExecutionState,
   selectHopExecutionMetadata,
 } from 'state/slices/tradeQuoteSlice/selectors'
@@ -44,7 +43,7 @@ export const ExpandableTradeSteps = () => {
       hopIndex: currentHopIndex ?? 0,
     }
   }, [activeTradeId, currentHopIndex])
-  const swapperName = useAppSelector(selectActiveSwapperName)
+  const swapperName = activeTradeQuote?.steps[0].source
   const { state: hopExecutionState } = useSelectorWithArgs(
     selectHopExecutionMetadata,
     hopExecutionMetadataFilter,

diff --git a/src/components/MultiHopTrade/components/TradeConfirm/ExpandedTradeSteps.tsx b/src/components/MultiHopTrade/components/TradeConfirm/ExpandedTradeSteps.tsx
@@ -1,18 +1,27 @@
 import { CheckCircleIcon, WarningIcon } from '@chakra-ui/icons'
-import { Flex, HStack, Stepper, StepStatus, Tag, VStack } from '@chakra-ui/react'
+import {
+  Box,
+  Flex,
+  HStack,
+  Icon,
+  Stepper,
+  StepStatus,
+  Tag,
+  Tooltip,
+  VStack,
+} from '@chakra-ui/react'
 import type { TradeQuote, TradeRate } from '@shapeshiftoss/swapper'
 import { useMemo } from 'react'
+import { FaInfoCircle } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'
 import { RawText, Text } from 'components/Text'
 import { getChainAdapterManager } from 'context/PluginProvider/chainAdapterSingleton'
 import {
   selectFirstHopSellAccountId,
-  selectIsActiveQuoteMultiHop,
   selectSecondHopSellAccountId,
 } from 'state/slices/tradeInputSlice/selectors'
 import {
   selectActiveQuoteErrors,
-  selectActiveSwapperName,
   selectHopExecutionMetadata,
 } from 'state/slices/tradeQuoteSlice/selectors'
 import { useAppSelector, useSelectorWithArgs } from 'state/store'
@@ -34,14 +43,13 @@ type ExpandedTradeStepsProps = {
 
 export const ExpandedTradeSteps = ({ activeTradeQuote }: ExpandedTradeStepsProps) => {
   const translate = useTranslate()
-  const swapperName = useAppSelector(selectActiveSwapperName)
   // this is the account we're selling from - assume this is the AccountId of the approval Tx
   const firstHopSellAccountId = useAppSelector(selectFirstHopSellAccountId)
   const lastHopSellAccountId = useAppSelector(selectSecondHopSellAccountId)
-  const isMultiHopTrade = useAppSelector(selectIsActiveQuoteMultiHop)
   const tradeQuoteFirstHop = activeTradeQuote.steps[0]
   const tradeQuoteLastHop = activeTradeQuote.steps[1]
   const activeTradeId = activeTradeQuote.id
+  const swapperName = tradeQuoteFirstHop?.source
 
   const firstHopStreamingProgress = useStreamingProgress({
     hopIndex: 0,
@@ -160,8 +168,14 @@ export const ExpandedTradeSteps = ({ activeTradeQuote }: ExpandedTradeStepsProps
     return (
       <Flex alignItems='center' justifyContent='space-between' flex={1}>
         {firstHopPermit2.isRequired === true ? (
-          // TODO: Add permit2 tooltip
-          <Text translation='trade.permit2.title' />
+          <>
+            <Text translation='trade.permit2Title' />
+            <Tooltip label={translate('trade.permit2.tooltip')}>
+              <Box ml={1}>
+                <Icon as={FaInfoCircle} color='text.subtle' fontSize='0.8em' />
+              </Box>
+            </Tooltip>
+          </>
         ) : (
           <>
             <Text translation='trade.approvalTitle' />
@@ -181,6 +195,7 @@ export const ExpandedTradeSteps = ({ activeTradeQuote }: ExpandedTradeStepsProps
     firstHopPermit2.isRequired,
     firstHopSellAccountId,
     tradeQuoteFirstHop,
+    translate,
   ])
 
   const firstHopActionTitle = useMemo(() => {
@@ -242,8 +257,14 @@ export const ExpandedTradeSteps = ({ activeTradeQuote }: ExpandedTradeStepsProps
     return (
       <Flex alignItems='center' justifyContent='space-between' flex={1}>
         {lastHopPermit2.isRequired === true ? (
-          // TODO: Add permit2 tooltip
-          <Text translation='trade.permit2.title' />
+          <>
+            <Text translation='trade.permit2Title' />
+            <Tooltip label={translate('trade.permit2.tooltip')}>
+              <Box ml={1}>
+                <Icon as={FaInfoCircle} color='text.subtle' fontSize='0.8em' />
+              </Box>
+            </Tooltip>
+          </>
         ) : (
           <>
             <Text translation='trade.approvalTitle' />
@@ -263,6 +284,7 @@ export const ExpandedTradeSteps = ({ activeTradeQuote }: ExpandedTradeStepsProps
     lastHopPermit2.isRequired,
     lastHopSellAccountId,
     tradeQuoteLastHop,
+    translate,
   ])
 
   const lastHopActionTitle = useMemo(() => {
@@ -337,38 +359,36 @@ export const ExpandedTradeSteps = ({ activeTradeQuote }: ExpandedTradeStepsProps
         isError={activeQuoteError && currentTradeStep === TradeStep.FirstHopSwap}
         stepIndicatorVariant='innerSteps'
       />
-      {isMultiHopTrade && (
-        <>
-          {tradeSteps[TradeStep.LastHopReset] ? (
-            <StepperStep
-              title={lastHopAllowanceResetTitle}
-              stepIndicator={stepIndicator}
-              stepProps={stepProps}
-              useSpacer={false}
-              isError={activeQuoteError && currentTradeStep === TradeStep.LastHopReset}
-              stepIndicatorVariant='innerSteps'
-            />
-          ) : null}
-          {tradeSteps[TradeStep.LastHopApproval] ? (
-            <StepperStep
-              title={lastHopAllowanceApprovalTitle}
-              stepIndicator={stepIndicator}
-              stepProps={stepProps}
-              useSpacer={false}
-              isError={activeQuoteError && currentTradeStep === TradeStep.LastHopApproval}
-              stepIndicatorVariant='innerSteps'
-            />
-          ) : null}
-          <StepperStep
-            title={lastHopActionTitle}
-            stepIndicator={stepIndicator}
-            stepProps={stepProps}
-            useSpacer={false}
-            isError={activeQuoteError && currentTradeStep === TradeStep.LastHopSwap}
-            stepIndicatorVariant='innerSteps'
-          />
-        </>
-      )}
+      {tradeSteps[TradeStep.LastHopReset] ? (
+        <StepperStep
+          title={lastHopAllowanceResetTitle}
+          stepIndicator={stepIndicator}
+          stepProps={stepProps}
+          useSpacer={false}
+          isError={activeQuoteError && currentTradeStep === TradeStep.LastHopReset}
+          stepIndicatorVariant='innerSteps'
+        />
+      ) : null}
+      {tradeSteps[TradeStep.LastHopApproval] ? (
+        <StepperStep
+          title={lastHopAllowanceApprovalTitle}
+          stepIndicator={stepIndicator}
+          stepProps={stepProps}
+          useSpacer={false}
+          isError={activeQuoteError && currentTradeStep === TradeStep.LastHopApproval}
+          stepIndicatorVariant='innerSteps'
+        />
+      ) : null}
+      {tradeSteps[TradeStep.LastHopSwap] ? (
+        <StepperStep
+          title={lastHopActionTitle}
+          stepIndicator={stepIndicator}
+          stepProps={stepProps}
+          useSpacer={false}
+          isError={activeQuoteError && currentTradeStep === TradeStep.LastHopSwap}
+          stepIndicatorVariant='innerSteps'
+        />
+      ) : null}
     </Stepper>
   )
 }