feat: add layer zero tx links

balancer · Jul 4, 2023 · 2177c90 · 2177c90
1 parent 37e0d9d
commit 2177c90
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -159,7 +159,8 @@
     "wait-for-expect": "^3.0.2",
     "walletlink": "^2.1.5",
     "web3-utils": "^1.3.1",
-    "worker-loader": "^3.0.8"
+    "worker-loader": "^3.0.8",
+    "@layerzerolabs/scan-client": "^0.0.5"
   },
   "lint-staged": {
     "*.{js,ts,vue}": "eslint --cache --fix --max-warnings 0",

diff --git a/src/components/contextual/pages/vebal/cross-chain-boost/CrossChainBoostCards.vue b/src/components/contextual/pages/vebal/cross-chain-boost/CrossChainBoostCards.vue
@@ -31,6 +31,8 @@ const {
   infoMessage,
   hasError,
   showingUnsyncedNetworks,
+  getLayerZeroTxLink,
+  syncLayerZeroTxLinks,
 } = useCrossChainSync();
 const { fNum } = useNumbers();
 const { veBalBalance } = useVeBal();
@@ -39,7 +41,6 @@ const { veBalBalance } = useVeBal();
  * STATE
  */
 const isSyncModalOpen = ref(false);
-
 /**
  * COMPUTED
  */
@@ -67,6 +68,7 @@ function checkIfNetworkSyncing(network: Network) {
 }
 function onCloseModal() {
   isSyncModalOpen.value = false;
+  void getLayerZeroTxLink('');
 }
 </script>
 
@@ -136,19 +138,35 @@ function onCloseModal() {
               >
                 <BalTooltip width="44" textAlign="center">
                   <template #activator>
-                    <IconLoaderWrapper
-                      :isLoading="checkIfNetworkSyncing(network)"
+                    <BalLink
+                      :href="syncLayerZeroTxLinks[network]"
+                      external
+                      noStyle
+                      class="group flex items-center"
                     >
-                      <img
-                        :src="buildNetworkIconURL(network)"
-                        alt=""
-                        class="p-0.5 rounded-full w-[32px]"
-                      />
-                    </IconLoaderWrapper>
+                      <IconLoaderWrapper
+                        :isLoading="checkIfNetworkSyncing(network)"
+                      >
+                        <img
+                          :src="buildNetworkIconURL(network)"
+                          alt=""
+                          class="p-0.5 rounded-full w-[32px]"
+                        />
+                      </IconLoaderWrapper>
+                    </BalLink>
                   </template>
 
-                  <div v-if="checkIfNetworkSyncing(network)">
-                    {{ getLoadingTooltipText(network) }}
+                  <div
+                    v-if="checkIfNetworkSyncing(network)"
+                    class="flex flex-col"
+                  >
+                    <span class="mb-1">
+                      {{ getLoadingTooltipText(network) }}
+                    </span>
+
+                    <span class="font-bold">
+                      Click this icon to view Layerzero transaction
+                    </span>
                   </div>
                   <div v-else>
                     <div class="flex mb-2">

diff --git a/src/components/contextual/pages/vebal/cross-chain-boost/SyncFinalState.vue b/src/components/contextual/pages/vebal/cross-chain-boost/SyncFinalState.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import configs, { Network } from '@/lib/config';
+import { useCrossChainSync } from '@/providers/cross-chain-sync.provider';
 
 type Props = {
   chosenNetworks: Set<Network>;
   veBalBalance: string;
 };
 
+const { syncLayerZeroTxLinks } = useCrossChainSync();
+
 defineProps<Props>();
 defineEmits(['close']);
 </script>
@@ -23,7 +26,9 @@ defineEmits(['close']);
     <div class="mb-6 text-sm text-gray-600 dark:text-gray-300">
       {{ $t('crossChainBoost.syncInitiatedModal.description') }}
     </div>
-    <div class="overflow-hidden mb-5 rounded-lg border-2 border-gray-200">
+    <div
+      class="overflow-hidden mb-5 rounded-lg border-2 border-gray-200 dark:border-gray-800"
+    >
       <div
         class="flex border-b-2 last:border-b-0 border-gray-200 dark:border-gray-800 bg-slate-100 dark:bg-slate-800"
       >
@@ -39,14 +44,32 @@ defineEmits(['close']);
       <div
         v-for="network in chosenNetworks.values()"
         :key="network"
-        class="flex border-b-2 last:border-b-0"
+        class="flex border-b-2 last:border-b-0 dark:border-gray-800"
       >
         <div class="p-4 font-semibold text-black dark:text-gray-300 grow">
           {{ configs[network].chainName }}
         </div>
-        <div class="p-4 text-sm font-medium text-gray-600">
+        <div class="p-4 pr-0 text-sm font-medium text-gray-600">
           {{ veBalBalance }} veBAL
         </div>
+
+        <div
+          v-if="syncLayerZeroTxLinks[network]"
+          class="flex pr-2 pl-1 align-center"
+        >
+          <BalLink
+            :href="syncLayerZeroTxLinks[network]"
+            external
+            noStyle
+            class="group flex items-center"
+          >
+            <BalIcon
+              name="arrow-up-right"
+              size="sm"
+              class="mb-1 ml-px group-hover:text-pink-500 transition-colors text-dark-grey"
+            />
+          </BalLink>
+        </div>
       </div>
     </div>
 

diff --git a/src/components/contextual/pages/vebal/cross-chain-boost/SyncNetworkAction.vue b/src/components/contextual/pages/vebal/cross-chain-boost/SyncNetworkAction.vue
@@ -32,8 +32,13 @@ const emit = defineEmits(['update:activeTabIdx']);
 const { t } = useI18n();
 const { addTransaction } = useTransactions();
 const { txListener } = useEthers();
-const { l2VeBalBalances, sync, setTempSyncingNetworks, tempSyncingNetworks } =
-  useCrossChainSync();
+const {
+  l2VeBalBalances,
+  sync,
+  setTempSyncingNetworks,
+  tempSyncingNetworks,
+  setSyncTxHashes,
+} = useCrossChainSync();
 
 /**
  * STATE
@@ -57,6 +62,7 @@ async function handleTransaction(
   txListener(tx, {
     onTxConfirmed: (receipt: TransactionReceipt) => {
       console.log('Receipt', receipt);
+      setSyncTxHashes(network, tx.hash);
     },
     onTxFailed: () => {
       //
@@ -75,7 +81,7 @@ async function handleAction(network: Network) {
       'tempSyncingNetworks',
       JSON.stringify(tempSyncingNetworks.value)
     );
-
+    setSyncTxHashes(network, tx.hash);
     return tx;
   } catch (error) {
     console.error(error);

diff --git a/src/providers/cross-chain-sync.provider.ts b/src/providers/cross-chain-sync.provider.ts
@@ -14,6 +14,8 @@ import configs from '@/lib/config';
 import { GaugeWorkingBalanceHelper } from '@/services/balancer/contracts/contracts/gauge-working-balance-helper';
 import { LiquidityGauge } from '@/services/balancer/contracts/contracts/liquidity-gauge';
 import { useI18n } from 'vue-i18n';
+import { getMessagesBySrcTxHash } from '@layerzerolabs/scan-client';
+import { retryPromiseWithDelay } from '@/lib/utils/promise';
 
 export enum NetworkSyncState {
   Unsynced = 'Unsynced',
@@ -34,6 +36,10 @@ export interface TempSyncingNetworks {
   syncTimestamp?: number;
 }
 
+export interface SyncTxHashes {
+  [key: string]: string;
+}
+
 // all networks that are supported by cross-chain sync feature
 export const veBalSyncSupportedNetworks = Object.keys(configs)
   .filter(key => configs[Number(key)].supportsVeBalSync)
@@ -54,6 +60,14 @@ export const crossChainSyncProvider = () => {
     syncingNetworksFromStorage ? JSON.parse(syncingNetworksFromStorage) : {}
   );
 
+  const syncTxHashesFromStorage = localStorage.getItem('syncTxHashes');
+
+  const syncTxHashes = ref<Record<string, SyncTxHashes>>(
+    syncTxHashesFromStorage ? JSON.parse(syncTxHashesFromStorage) : {}
+  );
+
+  const syncLayerZeroTxLinks = ref<Record<string, string>>({});
+
   /**
    * omniVotingEscrowLocks contains the user's veBAL data that is known by the bridge contract
    * it is used to determine sync status to l2 networks
@@ -270,6 +284,15 @@ export const crossChainSyncProvider = () => {
     return tempSyncingNetworks.value;
   }
 
+  async function setSyncTxHashes(network: Network, txHash: string) {
+    syncTxHashes.value[account.value] = {
+      ...syncTxHashes.value[account.value],
+      [network]: txHash,
+    };
+
+    localStorage.setItem('syncTxHashes', JSON.stringify(syncTxHashes.value));
+  }
+
   function clearTempSyncingNetworksFromSynced() {
     if (!tempSyncingNetworks.value[account.value]) return;
 
@@ -313,6 +336,20 @@ export const crossChainSyncProvider = () => {
     });
   }
 
+  async function getLayerZeroTxLink(txHash: string) {
+    const { messages } = await getMessagesBySrcTxHash(101, txHash);
+    const message = messages[0];
+
+    if (!message) {
+      throw new Error('No message found in Layer Zero');
+    }
+
+    const { srcUaAddress, dstUaAddress, dstChainId, srcUaNonce } = message;
+    const link = `https://layerzeroscan.com/101/address/${srcUaAddress}/message/${dstChainId}/address/${dstUaAddress}/nonce/${srcUaNonce}`;
+
+    return link;
+  }
+
   watch(
     () => networksBySyncState.value,
     newVal => {
@@ -335,6 +372,24 @@ export const crossChainSyncProvider = () => {
     }
   );
 
+  watch(
+    () => [syncTxHashes.value, account.value],
+    async values => {
+      const val = values[0];
+      if (!val || !val[account.value]) return;
+
+      for (const network of Object.keys(val[account.value])) {
+        const hash = syncTxHashes.value[account.value][network];
+        syncLayerZeroTxLinks.value[network] = await retryPromiseWithDelay(
+          getLayerZeroTxLink(hash),
+          3,
+          2000
+        );
+      }
+    },
+    { immediate: true, deep: true }
+  );
+
   return {
     showingUnsyncedNetworks,
     hasError,
@@ -352,6 +407,10 @@ export const crossChainSyncProvider = () => {
     infoMessage,
     getGaugeWorkingBalance,
     triggerGaugeUpdate,
+    getLayerZeroTxLink,
+    syncTxHashes,
+    setSyncTxHashes,
+    syncLayerZeroTxLinks,
   };
 };