fix: update trade complete screen

src/assets/translations/de/main.json

@@ -993,7 +993,7 @@
     "allowanceApprovalTxName": "Genehmigung der Zulage tx:",
     "tradeComplete": "Sie haben jetzt %{cryptoAmountFormatted} in Ihrer Wallet auf %{chainName}.",
     "doAnotherTrade": "Einen weiteren Handel tätigen",
-    "showDetails": "Zeige Details",
+    "summary": "Zeige Details",
     "transactionSuccessful": "Transaktion erfolgreich, Warte auf Bestätigungen",
     "temp": {
       "tradeSuccess": "Handel abgeschlossen",

src/assets/translations/en/main.json

@@ -994,7 +994,7 @@
     "allowanceApprovalTxName": "Allowance approval tx:",
     "tradeComplete": "You now have %{cryptoAmountFormatted} in your wallet on %{chainName}.",
     "doAnotherTrade": "Do another trade",
-    "showDetails": "Show Details",
+    "summary": "Trade Summary",
     "transactionSuccessful": "Transaction successful, waiting for confirmations",
     "temp": {
       "tradeSuccess": "Trade complete",

src/assets/translations/es/main.json

@@ -993,7 +993,7 @@
     "allowanceApprovalTxName": "Aprobación de asignación tx:",
     "tradeComplete": "Ahora tienes %{cryptoAmountFormatted} en tu billetera en %{chainName}.",
     "doAnotherTrade": "Hacer otro intercambio",
-    "showDetails": "Mostrar Detalles",
+    "summary": "Mostrar Detalles",
     "transactionSuccessful": "Transacción exitosa, esperando confirmaciones",
     "temp": {
       "tradeSuccess": "Intercambio completado",

src/assets/translations/fr/main.json

@@ -993,7 +993,7 @@
     "allowanceApprovalTxName": "Tx. d'autorisation d'allocation :",
     "tradeComplete": "Vous disposez maintenant de %{cryptoAmountFormatted} dans votre porte-monnaie sur %{chainName}.",
     "doAnotherTrade": "Faire un autre échange",
-    "showDetails": "Afficher les détails",
+    "summary": "Afficher le sommaire",
     "transactionSuccessful": "Transaction réussie, en attente de confirmations",
     "temp": {
       "tradeSuccess": "Échange terminé",

src/assets/translations/ja/main.json

@@ -993,7 +993,7 @@
     "allowanceApprovalTxName": "手当承認トランザクション:",
     "tradeComplete": "%{chainName} のウォレットに %{cryptoAmountFormatted} が追加されました。",
     "doAnotherTrade": "別の取引をする",
-    "showDetails": "詳細",
+    "summary": "詳細",
     "transactionSuccessful": "トランザクションが成功しました。確認を待っています",
     "temp": {
       "tradeSuccess": "取引完了",

src/assets/translations/pt/main.json

@@ -993,7 +993,7 @@
     "allowanceApprovalTxName": "Tx da permissão de aprovação:",
     "tradeComplete": "Agora você tem %{cryptoAmountFormatted} em sua carteira na %{chainName}.",
     "doAnotherTrade": "Faça outra negociação",
-    "showDetails": "Mostrar detalhes",
+    "summary": "Mostrar detalhes",
     "transactionSuccessful": "Transação bem-sucedida, aguardando confirmações",
     "temp": {
       "tradeSuccess": "Negociação concluída",

src/assets/translations/ru/main.json

@@ -993,7 +993,7 @@
     "allowanceApprovalTxName": "Утверждение разрешения tx:",
     "tradeComplete": "Теперь у вас есть %{cryptoAmountFormatted} в кошельке на %{chainName}.",
     "doAnotherTrade": "Совершите еще одну сделку",
-    "showDetails": "Показать детали",
+    "summary": "Показать детали",
     "transactionSuccessful": "Транзакция прошла успешно, ожидаем подтверждений",
     "temp": {
       "tradeSuccess": "Трейд завершен",

src/assets/translations/tr/main.json

@@ -993,7 +993,7 @@
     "allowanceApprovalTxName": "Tahsisat onayı tx:",
     "tradeComplete": "Artık cüzdanınızda %{chainname} üzerinde %{cryptoamountFormatted} var.",
     "doAnotherTrade": "Başka bir takas yap",
-    "showDetails": "Detayları göster",
+    "summary": "Detayları göster",
     "transactionSuccessful": "İşlem başarılı, onay bekleniyor",
     "temp": {
       "tradeSuccess": "Takas tamamlandı",

src/assets/translations/uk/main.json

@@ -993,7 +993,7 @@
     "allowanceApprovalTxName": "Затвердження дозволу tx:",
     "tradeComplete": "Тепер у вас є %{cryptoAmountFormated} у вашому гаманці на %{chainName}.",
     "doAnotherTrade": "Зробіть іншу угоду",
-    "showDetails": "Показати деталі",
+    "summary": "Показати деталі",
     "transactionSuccessful": "Транзакція успішна, чекаємо на підтвердження",
     "temp": {
       "tradeSuccess": "Обмін завершено",

src/assets/translations/zh/main.json

@@ -986,7 +986,7 @@
     "allowanceApprovalTxName": "津贴批准tx：",
     "tradeComplete": "你现在在 %{chainName} 上的钱包中有 {cryptoAmountFormatted} 。",
     "doAnotherTrade": "进行另一笔交易",
-    "showDetails": "显示详细资料",
+    "summary": "显示详细资料",
     "transactionSuccessful": "交易成功，等待确认",
     "temp": {
       "tradeSuccess": "交易完成",

src/components/AnimatedCheck.tsx

@@ -0,0 +1,76 @@
+import type { BoxProps } from '@chakra-ui/react'
+import { Box } from '@chakra-ui/react'
+import { motion } from 'framer-motion'
+import { useMemo } from 'react'
+
+export const AnimatedCheck = ({
+  defaultDuration = 1000,
+  boxSize = 24,
+  color = 'green.500',
+}: {
+  defaultDuration?: number
+  boxSize?: BoxProps['boxSize']
+  color?: BoxProps['color']
+}) => {
+  const placeholderDuration = useMemo(() => defaultDuration / 1000 + 2, [defaultDuration])
+
+  const draw = useMemo(() => {
+    const drawDelay = placeholderDuration / 1.5 > 10 ? 5 : placeholderDuration / 1.5
+    return {
+      hidden: { pathLength: 0, opacity: 0 },
+      visible: () => ({
+        pathLength: 1,
+        opacity: 1,
+        transition: {
+          pathLength: {
+            delay: drawDelay,
+            type: 'spring',
+            duration: 2,
+            bounce: 0,
+          },
+          opacity: { delay: drawDelay, duration: 2 },
+        },
+      }),
+    }
+  }, [placeholderDuration])
+
+  const border = useMemo(() => {
+    return {
+      hidden: { pathLength: 0 },
+      visible: () => ({
+        pathLength: 1,
+        transition: {
+          pathLength: {
+            type: 'spring',
+            duration: placeholderDuration > 10 ? 10 : placeholderDuration,
+            bounce: 0,
+          },
+        },
+      }),
+    }
+  }, [placeholderDuration])
+
+  return (
+    <Box boxSize={boxSize} color={color}>
+      <motion.svg
+        xmlns='http://www.w3.org/2000/svg'
+        width='100%'
+        height='100%'
+        viewBox='0 0 24 24'
+        fill='none'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        initial='hidden'
+        animate='visible'
+      >
+        {/* Outer circle */}
+        <motion.path d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' variants={border} />
+
+        {/* Checkmark */}
+        <motion.path d='M9 12l2 2l4 -4' variants={draw} />
+      </motion.svg>
+    </Box>
+  )
+}

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

@@ -10,6 +10,7 @@ import { TradeSlideTransition } from 'components/MultiHopTrade/TradeSlideTransit
 import { TradeRoutePaths } from 'components/MultiHopTrade/types'
 import { Text } from 'components/Text'
 import { bnOrZero } from 'lib/bignumber/bignumber'
+import { fromBaseUnit } from 'lib/math'
 import {
   selectActiveQuote,
   selectConfirmedTradeExecutionState,
@@ -142,9 +143,16 @@ export const MultiHopTradeConfirm = memo(() => {
             titleTranslation={
               isArbitrumBridgeWithdraw ? 'bridge.arbitrum.success.tradeSuccess' : undefined
             }
-            descriptionTranslation={
-              isArbitrumBridgeWithdraw ? 'bridge.arbitrum.success.withdrawComplete' : undefined
-            }
+            sellAsset={activeQuote?.steps[0].sellAsset}
+            buyAsset={activeQuote?.steps[0].buyAsset}
+            sellAmountCryptoPrecision={fromBaseUnit(
+              activeQuote?.steps[0].sellAmountIncludingProtocolFeesCryptoBaseUnit,
+              activeQuote?.steps[0].sellAsset.precision ?? 0,
+            )}
+            buyAmountCryptoPrecision={fromBaseUnit(
+              activeQuote?.steps[activeQuote.steps.length - 1].buyAmountAfterFeesCryptoBaseUnit,
+              activeQuote?.steps[activeQuote.steps.length - 1].buyAsset.precision ?? 0,
+            )}
           >
             <Hops
               initialActiveTradeId={initialActiveTradeIdRef.current}

src/components/MultiHopTrade/components/TradeSuccess/TradeSuccess.tsx

@@ -1,19 +1,25 @@
+import { ArrowForwardIcon } from '@chakra-ui/icons'
 import {
   Box,
   Button,
   CardBody,
   CardFooter,
   Collapse,
+  Flex,
   HStack,
+  Icon,
+  Stack,
   useDisclosure,
 } from '@chakra-ui/react'
+import type { Asset } from '@shapeshiftoss/types'
 import type { InterpolationOptions } from 'node-polyglot'
-import { useMemo } from 'react'
+import { useCallback } from 'react'
 import { useTranslate } from 'react-polyglot'
+import { Amount } from 'components/Amount/Amount'
+import { AnimatedCheck } from 'components/AnimatedCheck'
 import { AssetIcon } from 'components/AssetIcon'
 import { SlideTransition } from 'components/SlideTransition'
-import { RawText, Text } from 'components/Text'
-import { getChainAdapterManager } from 'context/PluginProvider/chainAdapterSingleton'
+import { Text } from 'components/Text'
 import { selectLastHop } from 'state/slices/tradeQuoteSlice/selectors'
 import { useAppSelector } from 'state/store'
 
@@ -23,16 +29,29 @@ export type TradeSuccessProps = {
   handleBack: () => void
   children: JSX.Element
   titleTranslation?: string | [string, InterpolationOptions]
-  descriptionTranslation?: string | [string, InterpolationOptions]
-}
-
-const pairProps = { showFirst: true }
+} & (
+  | {
+      sellAsset: never
+      buyAsset: never
+      sellAmountCryptoPrecision: never
+      buyAmountCryptoPrecision: never
+    }
+  | {
+      sellAsset?: Asset
+      buyAsset?: Asset
+      sellAmountCryptoPrecision?: string
+      buyAmountCryptoPrecision?: string
+    }
+)
 
 export const TradeSuccess = ({
   handleBack,
   titleTranslation,
-  descriptionTranslation,
   children,
+  sellAmountCryptoPrecision,
+  sellAsset,
+  buyAsset,
+  buyAmountCryptoPrecision,
 }: TradeSuccessProps) => {
   const translate = useTranslate()
 
@@ -42,43 +61,46 @@ export const TradeSuccess = ({
 
   const lastHop = useAppSelector(selectLastHop)
 
-  const subText = useMemo(() => {
-    if (!lastHop) return ''
-
-    const manager = getChainAdapterManager()
-    const adapter = manager.get(lastHop.buyAsset.chainId)
-
-    if (!adapter) return ''
+  const AmountsLine = useCallback(() => {
+    if (!(sellAsset && buyAsset)) return null
+    if (!(sellAmountCryptoPrecision && buyAmountCryptoPrecision)) return null
 
-    const chainName = adapter.getDisplayName()
-
-    if (descriptionTranslation)
-      return typeof descriptionTranslation === 'string'
-        ? translate(descriptionTranslation, {
-            symbol: lastHop.buyAsset.symbol,
-            chainName,
-          })
-        : translate(...descriptionTranslation)
-
-    return translate('trade.temp.tradeComplete', {
-      symbol: lastHop.buyAsset.symbol,
-      chainName,
-    })
-  }, [lastHop, translate, descriptionTranslation])
+    return (
+      <Flex justifyContent='center' alignItems='center' flexWrap='wrap' gap={2} px={4}>
+        <Flex alignItems='center' gap={2}>
+          <AssetIcon size='xs' assetId={sellAsset?.assetId} />
+          <Amount.Crypto
+            whiteSpace='nowrap'
+            value={sellAmountCryptoPrecision}
+            symbol={sellAsset.symbol}
+          />
+        </Flex>
+        <Icon as={ArrowForwardIcon} boxSize={4} color='text.subtle' />
+        <Flex alignItems='center' gap={2}>
+          <AssetIcon size='xs' assetId={buyAsset?.assetId} />
+          <Amount.Crypto
+            whiteSpace='nowrap'
+            value={buyAmountCryptoPrecision}
+            symbol={buyAsset.symbol}
+          />
+        </Flex>
+      </Flex>
+    )
+  }, [sellAsset, buyAsset, sellAmountCryptoPrecision, buyAmountCryptoPrecision])
 
   if (!lastHop) return null
 
   return (
     <>
       <CardBody pb={0} px={0}>
         <SlideTransition>
-          <Box textAlign='center' py={4}>
-            <AssetIcon assetId={lastHop.buyAsset.assetId} mb={2} pairProps={pairProps} />
-            <Text translation={titleTranslation ?? 'trade.temp.tradeSuccess'} />
-            <RawText fontSize='md' color='gray.500' mt={2}>
-              {subText}
-            </RawText>
-          </Box>
+          <Flex flexDir='column' alignItems='center' textAlign='center' py={8} gap={6}>
+            <Stack alignItems='center'>
+              <AnimatedCheck boxSize={12} />
+              <Text translation={titleTranslation ?? 'trade.temp.tradeSuccess'} fontWeight='bold' />
+            </Stack>
+            <AmountsLine />
+          </Flex>
         </SlideTransition>
       </CardBody>
       <CardFooter flexDir='column' gap={2} px={4}>
@@ -88,7 +110,7 @@ export const TradeSuccess = ({
           </Button>
           <HStack width='full' justifyContent='space-between' mt={4}>
             <Button variant='link' onClick={handleToggle} px={2}>
-              {translate('trade.showDetails')}
+              {translate('trade.summary')}
             </Button>
             <TwirlyToggle isOpen={isOpen} onToggle={handleToggle} />
           </HStack>