feat: added layerzero bridge (#1267)

* wip: layerzero bridge * feat: updated logic * fix: updated logic for dot * fix: added lzBridgeService * feat: updated bridge logic * fix: clean up * feat: updated fee decimals * wip * feat: added history logic * fix: refactor * fix: clean up * fix: clean up * fix: words * fix: BridgeSelection * fix: clean up * fix: words * fix: updated Information.vue * fix: words * fix: updates addressToBytes32 function
AstarNetwork · May 15, 2024 · 4256401 · 4256401
1 parent d121a9c
commit 4256401
Show file tree

Hide file tree

Showing 42 changed files with 7,132 additions and 116 deletions.
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@astar-network/metamask-astar-adapter": "^0.5.4",
     "@astar-network/metamask-astar-types": "^0.6.1",
     "@ethersproject/bignumber": "^5.5.0",
+    "@layerzerolabs/scan-client": "^0.0.8",
     "@polkadot/api": "^10.9.1",
     "@polkadot/api-contract": "^10.9.1",
     "@polkadot/extension-dapp": "0.46.5",

diff --git a/src/components/assets/EvmNativeToken.vue b/src/components/assets/EvmNativeToken.vue
@@ -43,15 +43,15 @@
           </q-tooltip>
         </router-link>
 
-        <a v-if="isAstar" :href="stargateUrl" target="_blank" rel="noopener noreferrer">
+        <router-link v-if="isAstar" :to="buildLzBridgePageLink()">
           <button class="btn btn--icon">
             <astar-icon-bridge />
           </button>
           <span class="text--mobile-menu">{{ $t('assets.bridge') }}</span>
           <q-tooltip>
             <span class="text--tooltip">{{ $t('assets.bridge') }}</span>
           </q-tooltip>
-        </a>
+        </router-link>
 
         <router-link v-if="isZkEvm" :to="buildEthereumBridgePageLink()">
           <button class="btn btn--icon">
@@ -113,9 +113,12 @@ import ModalFaucet from 'src/components/assets/modals/ModalFaucet.vue';
 import { useAccount, useBreakpoints, useFaucet, useNetworkInfo } from 'src/hooks';
 import { faucetSethLink } from 'src/links';
 import { getTokenImage } from 'src/modules/token';
-import { buildEthereumBridgePageLink, buildTransferPageLink } from 'src/router/routes';
+import {
+  buildEthereumBridgePageLink,
+  buildTransferPageLink,
+  buildLzBridgePageLink,
+} from 'src/router/routes';
 import { useStore } from 'src/store';
-import { stargateUrl } from '../../modules/zk-evm-bridge';
 import { computed, defineComponent, ref, watchEffect } from 'vue';
 
 export default defineComponent({
@@ -195,12 +198,12 @@ export default defineComponent({
       width,
       screenSize,
       isTruncate,
-      stargateUrl,
       isAstar,
       truncate,
       handleModalFaucet,
       buildTransferPageLink,
       buildEthereumBridgePageLink,
+      buildLzBridgePageLink,
     };
   },
 });

diff --git a/src/components/assets/ZkAstr.vue b/src/components/assets/ZkAstr.vue
@@ -42,21 +42,15 @@
           </q-tooltip>
         </router-link>
 
-        <a
-          v-if="t.symbol === 'ASTR'"
-          :href="stargateUrl"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="box--icon"
-        >
+        <router-link v-if="t.symbol === 'ASTR'" :to="buildLzBridgePageLink()" class="box--icon">
           <button class="btn btn--icon">
             <astar-icon-bridge />
           </button>
           <span class="text--mobile-menu">{{ $t('assets.bridge') }}</span>
           <q-tooltip>
             <span class="text--tooltip">{{ $t('assets.bridge') }}</span>
           </q-tooltip>
-        </a>
+        </router-link>
 
         <a v-else :href="vAstrOmniLink" target="_blank" rel="noopener noreferrer" class="box--icon">
           <button class="btn btn--icon">
@@ -118,9 +112,9 @@ import { useNetworkInfo } from 'src/hooks';
 import { useEthProvider } from 'src/hooks/custom-signature/useEthProvider';
 import { addToEvmProvider } from 'src/hooks/helper/wallet';
 import { Erc20Token, getErc20Explorer } from 'src/modules/token';
-import { buildTransferPageLink } from 'src/router/routes';
+import { buildTransferPageLink, buildLzBridgePageLink } from 'src/router/routes';
 import { PropType, defineComponent } from 'vue';
-import { stargateUrl, vAstrOmniLink } from '../../modules/zk-evm-bridge';
+import { vAstrOmniLink } from '../../modules/zk-evm-bridge';
 
 export default defineComponent({
   components: {},
@@ -140,7 +134,7 @@ export default defineComponent({
 
     return {
       ethProvider,
-      stargateUrl,
+      buildLzBridgePageLink,
       vAstrOmniLink,
       truncate,
       addToEvmProvider,

diff --git a/src/components/assets/transfer/Information.vue b/src/components/assets/transfer/Information.vue
@@ -43,6 +43,11 @@
             <transaction-history :tx="tx" />
           </div>
         </div>
+        <div v-else-if="lztTxHistories.length > 0" class="box--histories">
+          <div v-for="tx in lztTxHistories" :key="tx.timestamp">
+            <lz-history :tx="tx" />
+          </div>
+        </div>
         <div v-else>
           <span> {{ $t('assets.transferPage.noTxRecords') }} </span>
         </div>
@@ -75,6 +80,7 @@
 </template>
 <script lang="ts">
 import TransactionHistory from 'src/components/common/TransactionHistory.vue';
+import LzHistory from 'src/components/common/LzHistory.vue';
 import { useAccount, useNetworkInfo } from 'src/hooks';
 import { socialUrl } from 'src/links';
 import { HistoryTxType } from 'src/modules/account';
@@ -92,10 +98,14 @@ import {
 } from 'src/modules/information';
 import { getXvmAssetsTransferHistories } from 'src/modules/information/recent-history';
 import { useStore } from 'src/store';
-import { computed, defineComponent, PropType, ref, watchEffect } from 'vue';
+import { computed, defineComponent, PropType, ref, watchEffect, onUnmounted } from 'vue';
+import { RecentLzHistory } from '../../../modules/information/index';
+import { getLzTxHistories } from '../../../modules/information/recent-history/transfer/index';
+import { LOCAL_STORAGE } from '../../../config/localStorage';
+import { endpointKey, providerEndpoints } from '../../../config/chainEndpoints';
 
 export default defineComponent({
-  components: { TransactionHistory },
+  components: { TransactionHistory, LzHistory },
   props: {
     transferType: {
       type: String as PropType<HistoryTxType>,
@@ -110,9 +120,10 @@ export default defineComponent({
   setup(props) {
     const store = useStore();
     const txHistories = ref<RecentHistory[]>([]);
+    const lztTxHistories = ref<RecentLzHistory[]>([]);
     const isLoadingTxHistories = ref<boolean>(true);
-    const { senderSs58Account, isMultisig } = useAccount();
-    const { currentNetworkName } = useNetworkInfo();
+    const { senderSs58Account, isMultisig, currentAccount } = useAccount();
+    const { currentNetworkName, isAstarZkEvm } = useNetworkInfo();
 
     const isH160 = computed<boolean>(() => store.getters['general/isH160Formatted']);
     const faqs = computed<Faq[]>(() => {
@@ -125,35 +136,70 @@ export default defineComponent({
       if (props.transferType === HistoryTxType.ZK_ETHEREUM_BRIDGE) {
         return faqZkEthereumBridge;
       }
+      if (props.transferType === HistoryTxType.LZ_BRIDGE) {
+        return faqZkEthereumBridge;
+      }
       return faqSs58XvmTransfer;
     });
 
     const setTxHistories = async (): Promise<void> => {
       if (!senderSs58Account.value || !currentNetworkName.value) return;
+      const network = isAstarZkEvm.value
+        ? providerEndpoints[endpointKey.ASTAR_ZKEVM].networkAlias
+        : currentNetworkName.value.toLowerCase();
+
+      if (props.transferType === HistoryTxType.Xvm) {
+        txHistories.value = await getXvmAssetsTransferHistories({
+          address: senderSs58Account.value,
+          network,
+        });
+      } else if (props.transferType === HistoryTxType.LZ_BRIDGE) {
+        lztTxHistories.value = await getLzTxHistories({
+          address: currentAccount.value,
+          network,
+        });
+      } else {
+        txHistories.value = await getTxHistories({
+          address: isH160.value ? currentAccount.value : senderSs58Account.value,
+          network,
+        });
+      }
+    };
+
+    watchEffect(async () => {
       try {
         isLoadingTxHistories.value = true;
-        const network = currentNetworkName.value.toLowerCase();
-        if (props.transferType === HistoryTxType.Xvm) {
-          txHistories.value = await getXvmAssetsTransferHistories({
-            address: senderSs58Account.value,
-            network,
-          });
-        } else {
-          txHistories.value = await getTxHistories({
-            address: senderSs58Account.value,
-            network,
-          });
-        }
+        await setTxHistories();
       } catch (error) {
         console.error(error);
       } finally {
         isLoadingTxHistories.value = false;
       }
-    };
+    });
+
+    const autoFetchHistoryHandler = setInterval(async () => {
+      if (props.transferType === HistoryTxType.LZ_BRIDGE) {
+        try {
+          await setTxHistories();
+        } catch (error) {
+          console.error(error);
+        }
+      }
+    }, 10 * 1000);
 
-    watchEffect(setTxHistories);
+    onUnmounted(() => {
+      clearInterval(autoFetchHistoryHandler);
+    });
 
-    return { faqs, hotTopics, txHistories, isLoadingTxHistories, socialUrl, isMultisig };
+    return {
+      faqs,
+      hotTopics,
+      txHistories,
+      isLoadingTxHistories,
+      socialUrl,
+      isMultisig,
+      lztTxHistories,
+    };
   },
 });
 </script>

diff --git a/src/components/bridge/BridgeSelection.vue b/src/components/bridge/BridgeSelection.vue
@@ -42,8 +42,12 @@
         </div>
 
         <div class="column--selection">
-          <button>
-            <a :href="stargateUrl" target="_blank" rel="noopener noreferrer" class="button--bridge">
+          <button :disabled="!isEnableLzBridge">
+            <component
+              :is="isEnableLzBridge ? 'router-link' : 'div'"
+              :to="buildLzBridgePageLink()"
+              class="button--bridge"
+            >
               <div class="row--logo-bg">
                 <div class="img--logo-bg">
                   <img
@@ -66,8 +70,11 @@
                   </span>
                 </div>
               </div>
-            </a>
+            </component>
           </button>
+          <p v-if="!isEnableLzBridge" class="text--bridge-details">
+            {{ $t('bridge.astarBridge.text2') }}
+          </p>
         </div>
         <div v-if="isZkyoto" class="column--selection">
           <button :disabled="!isEnableEthBridge">
@@ -182,15 +189,20 @@
 import { cbridgeAppLink } from 'src/c-bridge';
 import { useAccount, useNetworkInfo } from 'src/hooks';
 import { EthBridgeNetworkName } from 'src/modules/zk-evm-bridge';
-import { Path as RoutePath, buildEthereumBridgePageLink } from 'src/router/routes';
+import {
+  Path as RoutePath,
+  buildEthereumBridgePageLink,
+  buildLzBridgePageLink,
+} from 'src/router/routes';
 import { computed, defineComponent } from 'vue';
-import { stargateUrl, layerSwapLink, zKatanaBridgeUrl } from 'src/modules/zk-evm-bridge/index';
+import { layerSwapLink, zKatanaBridgeUrl } from 'src/modules/zk-evm-bridge/index';
 
 export default defineComponent({
   components: {},
   setup() {
     const { currentAccount } = useAccount();
-    const { isZkEvm, networkNameSubstrate, isMainnet, isZkyoto } = useNetworkInfo();
+    const { isZkEvm, networkNameSubstrate, isMainnet, isZkyoto, isAstarZkEvm, isAstar, isH160 } =
+      useNetworkInfo();
 
     const l1Name = computed<string>(() => {
       return isZkyoto.value ? EthBridgeNetworkName.Sepolia : EthBridgeNetworkName.Ethereum;
@@ -211,6 +223,10 @@ export default defineComponent({
       return true;
     });
 
+    const isEnableLzBridge = computed<boolean>(() => {
+      return isH160.value && (isAstar.value || isAstarZkEvm.value);
+    });
+
     return {
       currentAccount,
       cbridgeAppLink,
@@ -220,10 +236,11 @@ export default defineComponent({
       l2Name,
       cbridgeNetworkName,
       buildEthereumBridgePageLink,
-      stargateUrl,
+      buildLzBridgePageLink,
       layerSwapLink,
       zKatanaBridgeUrl,
       isZkyoto,
+      isEnableLzBridge,
     };
   },
 });