feat: add logic to show cross chain tx link in activity and success t…

…oast (#2164)

* feat: add logic to show cross chain tx link in activity and success toast

* feat: load AxelarProvider async

* feat: bump dcl-txs

* test: fix test issue

webapp/package.json

@@ -23,7 +23,7 @@
     "decentraland-connect": "^6.2.0",
     "decentraland-crypto-fetch": "^1.0.3",
     "decentraland-dapps": "^18.5.0",
-    "decentraland-transactions": "^2.2.0",
+    "decentraland-transactions": "^2.3.0",
     "decentraland-ui": "^5.8.0",
     "ethers": "^5.6.8",
     "graphql": "^14.7.0",

webapp/src/components/ActivityPage/Transaction/Transaction.tsx

@@ -219,6 +219,7 @@ const Transaction = (props: Props) => {
                 />
               }
               tx={tx}
+              isCrossChain={tx.actionType === BUY_ITEM_CROSS_CHAIN_SUCCESS}
             />
           )}
         </AssetProvider>

webapp/src/components/ActivityPage/Transaction/TransactionDetail/TransactionDetail.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { Loader, Icon } from 'decentraland-ui'
 import { Network } from '@dcl/schemas'
@@ -29,7 +29,18 @@ const getHref = (tx: Transaction) => {
 }
 
 const TransactionDetail = (props: Props) => {
-  const { asset, text, tx } = props
+  const { asset, text, tx, isCrossChain = false } = props
+  const [txLink, setTxLink] = useState(getHref(tx))
+  useEffect(() => {
+    ;(async () => {
+      if (isCrossChain) {
+        const { AxelarProvider } = await import(
+          'decentraland-transactions/crossChain'
+        )
+        setTxLink(await AxelarProvider.getTxLink(tx.hash))
+      }
+    })()
+  })
   return (
     <Row className="TransactionDetail">
       <Column align="left" grow={true}>
@@ -58,7 +69,7 @@ const TransactionDetail = (props: Props) => {
       </Column>
       <Column align="right">
         <a
-          href={getHref(tx)}
+          href={txLink}
           className={tx.status ? 'status ' + tx.status : 'status'}
           target="_blank"
           rel="noopener noreferrer"

webapp/src/components/ActivityPage/Transaction/TransactionDetail/TransactionDetail.types.ts

@@ -6,6 +6,7 @@ export type Props = {
   asset?: Asset | null
   text: React.ReactNode
   tx: Transaction
+  isCrossChain?: boolean
 }
 
 export type MapStateProps = {}

webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.spec.tsx

@@ -527,7 +527,7 @@ describe('BuyWithCryptoModal', () => {
       getSupportedChains: () => MOCK_SUPPORTED_CHAIN,
       getSupportedTokens: () => MOCKED_PROVIDER_TOKENS
     } as unknown) as AxelarProvider
-    ;(AxelarProvider as jest.Mock).mockImplementation(() => crossChainProvider)
+    ;(AxelarProvider as unknown as jest.Mock).mockImplementation(() => crossChainProvider)
     ;(mockConfigIs as jest.Mock).mockReturnValue(false) // so it returns prod  values
     marketplaceAPI.fetchWalletTokenBalances = jest.fn().mockResolvedValue([])
     modalProps = {

webapp/src/modules/item/sagas.spec.ts

@@ -64,6 +64,8 @@ import { ItemBrowseOptions } from './types'
 import { getIsMarketplaceServerEnabled } from '../features/selectors'
 import { waitForFeatureFlagsToBeLoaded } from '../features/utils'
 import { AssetType } from '../asset/types'
+import { showToast } from 'decentraland-dapps/dist/modules/toast/actions'
+import { getCrossChainTransactionSuccessToast } from '../toast/toasts'
 
 const item = {
   itemId: 'anItemId',
@@ -796,7 +798,7 @@ describe('when handling the buy item cross chain success action', () => {
         }
       } as StatusResponse
     })
-    it('should get the status of the transaction and put the trackCrossChainTx action alongisde the put location success', () => {
+    it('should get the status of the transaction and put the trackCrossChainTx action, put location success and put the cross chain success toast', () => {
       return expectSaga(itemSaga, getIdentity)
         .provide([
           [
@@ -811,6 +813,13 @@ describe('when handling the buy item cross chain success action', () => {
             statusResponse.toChain!.transactionId
           )
         )
+        .put(
+          showToast(
+            getCrossChainTransactionSuccessToast(
+              AxelarProvider.getTxLink(txHash)
+            )
+          )
+        )
         .put(
           push(
             locations.success({

webapp/src/modules/item/sagas.ts

@@ -27,7 +27,9 @@ import {
 import { isNFTPurchase } from 'decentraland-dapps/dist/modules/gateway/utils'
 import { PurchaseStatus } from 'decentraland-dapps/dist/modules/gateway/types'
 import { isErrorWithMessage } from '../../lib/error'
-import type { StatusResponse } from 'decentraland-transactions/crossChain'
+import { StatusResponse } from 'decentraland-transactions/crossChain'
+import { showToast } from 'decentraland-dapps/dist/modules/toast/actions'
+import { getCrossChainTransactionSuccessToast } from '../toast/toasts'
 import { config } from '../../config'
 import { ItemAPI } from '../vendor/decentraland/item/api'
 import { getWallet } from '../wallet/selectors'
@@ -341,6 +343,13 @@ export function* itemSaga(getIdentity: () => AuthIdentity | undefined) {
             })
           )
         )
+        yield put(
+          showToast(
+            getCrossChainTransactionSuccessToast(
+              AxelarProvider.getTxLink(txHash)
+            )
+          )
+        )
       }
     }
   }
@@ -361,7 +370,6 @@ export function* itemSaga(getIdentity: () => AuthIdentity | undefined) {
         const {
           AxelarProvider
         }: Awaited<typeof crossChainModule> = yield crossChainModule
-
         const crossChainProvider = new AxelarProvider(
           config.get('SQUID_API_URL')
         )

webapp/src/modules/toast/toasts.tsx

@@ -352,3 +352,34 @@ export function getBulkPickItemFailureToast(
     icon: <Icon size="big" name="exclamation circle" />
   }
 }
+
+export function getCrossChainTransactionSuccessToast(
+  txLink: string
+): Omit<Toast, 'id'> {
+  return {
+    type: ToastType.INFO,
+    title: '',
+    body: (
+      <div>
+        <p>
+          {t('toast.cross_chain_tx.body', {
+            br: () => <br />,
+            highlight: (text: string) => <span>{text}</span>,
+            link: (text: string) => (
+              <Link to={locations.activity()}>{text}</Link>
+            )
+          })}
+        </p>
+        <Button as="a" href={locations.activity()} target="_blank">
+          {t('navigation.activity')}
+          <Icon style={{ marginLeft: 6 }} name="clock outline" />
+        </Button>
+        <Button as="a" href={txLink} target="_blank">
+          {t('toast.cross_chain_tx.view_transaction')}
+          <Icon style={{ marginLeft: 6 }} name="external" />
+        </Button>
+      </div>
+    ),
+    closable: false
+  }
+}

webapp/src/modules/translation/locales/en.json

@@ -1196,6 +1196,10 @@
       "title": "You gained access to a World!",
       "body": "Build your personal space in the metaverse.",
       "cta": "View my worlds"
+    },
+    "cross_chain_tx": {
+      "body": "The transaction can take up to <highlight>3 minutes</highlight> to be processed.<br></br>You can also track its progress in the links below:",
+      "view_transaction": "View transaction"
     }
   },
   "maintainance": {

webapp/src/modules/translation/locales/es.json

@@ -1180,6 +1180,10 @@
       "title": "Ganaste acceso a Worlds!",
       "body": "Construí tu espacio personal en el metaverso.",
       "cta": "Ver mis worlds"
+    },
+    "cross_chain_tx": {
+      "body": "La transacción puede tardar hasta <highlight>3 miuntos</highlight> para ser procesada.<br></br>Puedes seguir su progreso en los siguientes enlaces:",
+      "view_transaction": "Ver transacción"
     }
   },
   "maintainance": {

webapp/src/modules/translation/locales/zh.json

@@ -1185,6 +1185,10 @@
       "title": "你获得了进入一个世界的机会",
       "body": "在虚拟宇宙中建立您的个人空间。",
       "cta": "查看我的世界"
+    },
+    "cross_chain_tx": {
+      "body": "处理该交易最多可能需要 <highlight>3 分钟</highlight>。<br></br>您还可以在以下链接中跟踪其进度：",
+      "view_transaction": "查看交易"
     }
   },
   "maintainance": {