From f4457e01c59a981c67ef4f543705f0b80a1e7d53 Mon Sep 17 00:00:00 2001 From: Juanma Hidalgo Date: Mon, 4 Mar 2024 16:40:33 +0100 Subject: [PATCH] feat: add logic to show cross chain tx link in activity and success toast (#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-lock.json | 8 ++--- webapp/package.json | 2 +- .../ActivityPage/Transaction/Transaction.tsx | 1 + .../TransactionDetail/TransactionDetail.tsx | 17 ++++++++-- .../TransactionDetail.types.ts | 1 + .../BuyWithCryptoModal.spec.tsx | 2 +- webapp/src/modules/item/sagas.spec.ts | 11 ++++++- webapp/src/modules/item/sagas.ts | 12 +++++-- webapp/src/modules/toast/toasts.tsx | 31 +++++++++++++++++++ .../src/modules/translation/locales/en.json | 4 +++ .../src/modules/translation/locales/es.json | 4 +++ .../src/modules/translation/locales/zh.json | 4 +++ 12 files changed, 85 insertions(+), 12 deletions(-) diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 3eda3b72fb..c1dbf8ca76 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -28,7 +28,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", @@ -11343,9 +11343,9 @@ } }, "node_modules/decentraland-transactions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/decentraland-transactions/-/decentraland-transactions-2.2.0.tgz", - "integrity": "sha512-+QYkvg4UvFmoE90upJY4WRhHKSmp5gKNIaTEHWQhk/5jJ/Gv40bLAEaaQxA2uWS9n/lt2q4rKlR/1tf07f/ibA==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/decentraland-transactions/-/decentraland-transactions-2.3.0.tgz", + "integrity": "sha512-wAmNcb2VZQgpV+Mz+IzzU3R4pMrrW5Ns5XfSgGRC0B1rqZTV8elmgSgKqSF1FfR/V/bVxP4FlEM/XziFb/RWEw==", "dependencies": { "@0xsquid/sdk": "^2.8.9", "@0xsquid/squid-types": "^0.1.51", diff --git a/webapp/package.json b/webapp/package.json index c046b8c533..e11ca0d268 100644 --- a/webapp/package.json +++ b/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", diff --git a/webapp/src/components/ActivityPage/Transaction/Transaction.tsx b/webapp/src/components/ActivityPage/Transaction/Transaction.tsx index 9fcf8c25cd..125bb14b52 100644 --- a/webapp/src/components/ActivityPage/Transaction/Transaction.tsx +++ b/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} /> )} diff --git a/webapp/src/components/ActivityPage/Transaction/TransactionDetail/TransactionDetail.tsx b/webapp/src/components/ActivityPage/Transaction/TransactionDetail/TransactionDetail.tsx index 2adca60afd..e22654fe28 100644 --- a/webapp/src/components/ActivityPage/Transaction/TransactionDetail/TransactionDetail.tsx +++ b/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 ( @@ -58,7 +69,7 @@ const TransactionDetail = (props: Props) => { { 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 = { diff --git a/webapp/src/modules/item/sagas.spec.ts b/webapp/src/modules/item/sagas.spec.ts index b28520c0ff..c9232f4089 100644 --- a/webapp/src/modules/item/sagas.spec.ts +++ b/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({ diff --git a/webapp/src/modules/item/sagas.ts b/webapp/src/modules/item/sagas.ts index ff2d0fe24b..a95dff3552 100644 --- a/webapp/src/modules/item/sagas.ts +++ b/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 = yield crossChainModule - const crossChainProvider = new AxelarProvider( config.get('SQUID_API_URL') ) diff --git a/webapp/src/modules/toast/toasts.tsx b/webapp/src/modules/toast/toasts.tsx index ed10b36618..ac82550563 100644 --- a/webapp/src/modules/toast/toasts.tsx +++ b/webapp/src/modules/toast/toasts.tsx @@ -352,3 +352,34 @@ export function getBulkPickItemFailureToast( icon: } } + +export function getCrossChainTransactionSuccessToast( + txLink: string +): Omit { + return { + type: ToastType.INFO, + title: '', + body: ( +
+

+ {t('toast.cross_chain_tx.body', { + br: () =>
, + highlight: (text: string) => {text}, + link: (text: string) => ( + {text} + ) + })} +

+ + +
+ ), + closable: false + } +} diff --git a/webapp/src/modules/translation/locales/en.json b/webapp/src/modules/translation/locales/en.json index ff2bc63794..7507b606b4 100644 --- a/webapp/src/modules/translation/locales/en.json +++ b/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 3 minutes to be processed.

You can also track its progress in the links below:", + "view_transaction": "View transaction" } }, "maintainance": { diff --git a/webapp/src/modules/translation/locales/es.json b/webapp/src/modules/translation/locales/es.json index 636b4af311..fb6f3e8002 100644 --- a/webapp/src/modules/translation/locales/es.json +++ b/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 3 miuntos para ser procesada.

Puedes seguir su progreso en los siguientes enlaces:", + "view_transaction": "Ver transacción" } }, "maintainance": { diff --git a/webapp/src/modules/translation/locales/zh.json b/webapp/src/modules/translation/locales/zh.json index 7cde4a27b1..7f9623538e 100644 --- a/webapp/src/modules/translation/locales/zh.json +++ b/webapp/src/modules/translation/locales/zh.json @@ -1185,6 +1185,10 @@ "title": "你获得了进入一个世界的机会", "body": "在虚拟宇宙中建立您的个人空间。", "cta": "查看我的世界" + }, + "cross_chain_tx": { + "body": "处理该交易最多可能需要 3 分钟。

您还可以在以下链接中跟踪其进度：", + "view_transaction": "查看交易" } }, "maintainance": {