Use self-hosted AMB Live Explorer for crosschain transactions

modals/ConfirmationModal.vue

@@ -5,11 +5,7 @@
       <p :class="$style.confirm__text">Processing...</p>
 
       <ul :class="$style.confirm__list">
-        <li
+        <li v-for="{ name, text, progress } in stepsData" :key="name" :class="[$style.confirm__listItem, $style[processingStatuses[name]]]">
-          v-for="{ name, text, progress } in stepsData"
-          :key="name"
-          :class="[$style.confirm__listItem, $style[processingStatuses[name]]]"
-        >
           <span :class="$style.confirm__listItemStatus">
             <base-icon v-if="processingStatuses[name] === 'success'" name="tick" size="medium" />
             <base-icon v-if="processingStatuses[name] === 'fail'" name="cross" size="medium" />
@@ -27,13 +23,7 @@
           <span v-if="transactionOptions.from" :class="$style.confirm__linksItemTitle">
             {{ transactionOptions.from }} transaction:&nbsp;
           </span>
-          <a
+          <a v-if="!!txHash" :class="$style.confirm__linksItemValue" :href="explorerLink" target="_blank" rel="noopener noreferrer">
-            v-if="!!txHash"
-            :class="$style.confirm__linksItemValue"
-            :href="explorerLink"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
             {{ shortenLink }}
           </a>
           <span v-else :class="$style.confirm__linksItemValue_none">—</span>
@@ -58,9 +48,9 @@
 <script>
 import { mapGetters, mapMutations, mapState } from 'vuex'
 
-import { ApplicationMutation } from '@/types'
+import { ApplicationMutation, ChainId } from '@/types'
 import { SuccessModal } from '@/modals'
-import { createModalArgs, getEtherscanLink } from '@/utilities'
+import { createModalArgs, getEtherscanLink, getAmbBridgeTxLink } from '@/utilities'
 import { numbers, confirmationStatus, confirmationStep, transactionMethods, CHAINS } from '@/constants'
 
 export default {
@@ -136,14 +126,14 @@ export default {
       }
     },
     l2Link() {
-      return getEtherscanLink(this.modal.chainId, this.txHash, 'transaction')
+      return getAmbBridgeTxLink(this.modal.chainId, this.txHash)
     },
     explorerLink() {
       return getEtherscanLink(this.modal.chainId, this.txHash, 'transaction')
     },
     shortenLink() {
       return `${this.txHash.substring(numbers.ZERO, Number('8') + numbers.OX_LENGTH)}...${this.txHash.substring(
-        Number('60') - Number('8'),
+        Number('60') - Number('8')
       )}`
     },
     symbol() {

utilities/crypto.ts

@@ -70,6 +70,16 @@ const ETHERSCAN_PREFIXES: { [chainId in ChainId]: string } = {
   100: '',
 }
 
+const AMB_EXPLORER_SUFFIXES: { [chainId in ChainId]: string } = {
+  1: 'xdai',
+  56: 'bsc',
+  100: 'xdai',
+}
+
+export function getAmbBridgeTxLink(chainId: ChainId, data: string): string {
+  return `https://alm-${AMB_EXPLORER_SUFFIXES[chainId]}.tornado.ws/${chainId}/${data}`
+}
+
 export function getEtherscanLink(chainId: ChainId, data: string, type: 'transaction' | 'token' | 'address' | 'block'): string {
   let prefix = `https://${ETHERSCAN_PREFIXES[chainId]}etherscan.io`
 
@@ -215,7 +225,7 @@ export function encodeTransactData({ args, extData }: { args: ArgsProof; extData
       'tuple(bytes proof,bytes32 root,bytes32[] inputNullifiers,bytes32[2] outputCommitments,uint256 publicAmount,bytes32 extDataHash)',
       'tuple(address recipient,int256 extAmount,address relayer,uint256 fee,bytes encryptedOutput1,bytes encryptedOutput2,bool isL1Withdrawal,uint256 l1Fee)',
     ],
-    [args, extData],
+    [args, extData]
   )
 }
 
@@ -268,7 +278,7 @@ export const getMessageIdFromTransaction = (type: 'withdrawal' | 'deposit', rece
 // eslint-disable-next-line
 export const onStaticMulticall = async <C extends BaseContract, A extends any[]>(
   chainId: ChainId,
-  calls: Array<{ contract: C; methodName: string; args: A }>,
+  calls: Array<{ contract: C; methodName: string; args: A }>
 ) => {
   const multicall = getMulticall(chainId)