From 4f1e5eef7d589ba4a462fdc33619c1d9529ea5c1 Mon Sep 17 00:00:00 2001
From: MickWang <1244134672@qq.com>
Date: Wed, 1 May 2024 17:09:23 +0800
Subject: [PATCH 1/3] add thried party bridge for deposit

---
 .../transaction/DepositThirdPartyBridge.vue   | 179 ++++++++++++++++++
 views/transactions/Deposit.vue                |   3 +
 2 files changed, 182 insertions(+)
 create mode 100644 components/transaction/DepositThirdPartyBridge.vue

diff --git a/components/transaction/DepositThirdPartyBridge.vue b/components/transaction/DepositThirdPartyBridge.vue
new file mode 100644
index 00000000..e582f5ca
--- /dev/null
+++ b/components/transaction/DepositThirdPartyBridge.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="deposit-thrid-bridge">
+    <p class="title">Earn Extra Nova Points by deposit from third-party bridges!</p>
+    <div
+      class="deposit-thrid-bridge-item"
+      v-for="(item, index) in bridgePoints"
+      :key="index"
+      @click="handleLink(item.url)"
+    >
+      <div class="left">
+        <img :src="item.logo" alt="" class="logo" />
+        <div>
+          <p class="name">{{ item.name }}</p>
+          <p class="desc">
+            <span>Bridge more than 0.1 ETH/ 500USDT /500 USDC to Nova to earn Nova Points.</span>
+            <CommonButtonLabel as="span" class="showTip relative text-left">
+              <img src="/img/Shape.svg" class="ml-1 inline-block h-3 w-3" alt="" />
+              <div class="tooltip">
+                You can earn Nova Points for each transaction of bridging to Nova over 0.1 ETH/ 500USDT /500 USDC
+                (qualified transactions). Every day beginning at UTC+10:00, users who bridge to Nova early will receive
+                more points. You'll accumulate Nova points as follows: 5 points for the initial 200 qualified
+                transactions, 4 points for qualified transactions 201-400, 3 points for qualified transactions 401-600,
+                2 points for qualified transactions 601-800, and 1 point for any qualified transactions beyond that.
+              </div>
+            </CommonButtonLabel>
+          </p>
+        </div>
+      </div>
+      <div class="right">
+        <span>{{ item.points }} Nova Points</span>
+        <ArrowTopRightOnSquareIcon class="line-button-with-img-icon" />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+
+import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
+import { $fetch } from "ofetch";
+
+import { useOnboardStore } from "@/store/onboard";
+
+const onboardStore = useOnboardStore();
+
+const handleLink = (link: string) => {
+  window.open(link, "_blank");
+};
+
+const ThirdPartyBridges = [
+  {
+    name: "Owlto Finance",
+    logo: "/img/owlto.svg",
+    bannerImg: "owlto.jpeg",
+    url: "https://owlto.finance/?to=zkLinkNova",
+  },
+  {
+    name: "Symbiosis",
+    logo: "/img/Symbiosys.svg",
+    bannerImg: "Symbiosys.jpg",
+    url: "https://app.symbiosis.finance/swap?chainIn=Ethereum&chainOut=ZkLink&tokenIn=ETH&tokenOut=ETH",
+  },
+  {
+    name: "Meson Finance",
+    logo: "/img/Meson.svg",
+    bannerImg: "Meson.jpg",
+    url: "https://meson.fi/zklink",
+  },
+];
+const bridgePoints = ref(ThirdPartyBridges.map((item) => ({ ...item, points: 0 })));
+const API_URL = "https://app-api.zklink.io/lrt-points/nova/points/project";
+const fetchBridgePoints = async () => {
+  if (!onboardStore.account) return;
+
+  const points = (await Promise.all([
+    $fetch(API_URL, { params: { address: onboardStore.account.address, project: "owlet" } }),
+    $fetch(API_URL, { params: { address: onboardStore.account.address, project: "symbiosis" } }),
+    $fetch(API_URL, { params: { address: onboardStore.account.address, project: "meson" } }),
+  ])) as any[];
+  console.log(points, "points");
+  const _bridgePoints = bridgePoints.value;
+  for (let i = 0; i < points.length; i++) {
+    const { data } = points[i];
+    const novaPoints = data.reduce((prev, item) => prev + Number(item.points), 0);
+    _bridgePoints[i].points = novaPoints.toFixed(2);
+  }
+  bridgePoints.value = _bridgePoints;
+};
+
+fetchBridgePoints();
+</script>
+<style lang="scss" scoped>
+.deposit-thrid-bridge {
+  margin-top: 1rem;
+  .title {
+    color: #fff;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 120% */
+    letter-spacing: -0.5px;
+    margin-bottom: 1rem;
+  }
+  .deposit-thrid-bridge-item:hover {
+    background: #032e3f;
+  }
+  .deposit-thrid-bridge-item {
+    cursor: pointer;
+    border-radius: 16px;
+    background: #011c26;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1rem;
+    margin-bottom: 1rem;
+    .left {
+      display: flex;
+      align-items: center;
+      .logo {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        margin-right: 7px;
+      }
+      .name {
+        color: #fff;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        letter-spacing: -0.5px;
+      }
+      .desc {
+        display: flex;
+        align-items: center;
+        color: #a0a5ad;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        letter-spacing: -0.5px;
+      }
+    }
+    .right {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      font-size: 14px;
+    }
+  }
+}
+.showTip:hover {
+  .tooltip {
+    display: block;
+    z-index: 100;
+  }
+}
+.tooltip {
+  display: none;
+  position: absolute;
+  padding: 12px 20px 12px 24px;
+  /* top: -7.5rem; */
+  width: 35rem;
+  left: -16rem;
+  bottom: 100%;
+  border-radius: 8px;
+  background: #1f2127;
+  color: #fff;
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: -0.07px;
+}
+.line-button-with-img-icon {
+  @apply ml-1  h-5 w-5 flex-none text-neutral-500 dark:text-neutral-400;
+}
+</style>
diff --git a/views/transactions/Deposit.vue b/views/transactions/Deposit.vue
index 15a7c380..fcb1268d 100644
--- a/views/transactions/Deposit.vue
+++ b/views/transactions/Deposit.vue
@@ -425,6 +425,7 @@
             </template>
           </template>
         </EthereumTransactionFooter>
+        <DepositThirdPartyBridge />
       </template>
     </form>
   </div>
@@ -482,6 +483,8 @@ import { TransitionAlertScaleInOutTransition, TransitionOpacity } from "@/utils/
 import DepositSubmitted from "@/views/transactions/DepositSubmitted.vue";
 import { ETH_ADDRESS, WMNT_CONTRACT } from "@/zksync-web3-nova/src/utils";
 
+import DepositThirdPartyBridge from "@/components/transaction/DepositThirdPartyBridge.vue";
+
 // const okxIcon = "/img/okx-cryptopedia.svg";
 const launchIcon = "/img/launch.svg";
 const { zkSyncNetworks } = useNetworks();

From a2955fe713e4627e86f22b68651480bced80f0b9 Mon Sep 17 00:00:00 2001
From: MickWang <1244134672@qq.com>
Date: Wed, 1 May 2024 18:00:31 +0800
Subject: [PATCH 2/3] update ui

---
 .../transaction/DepositThirdPartyBridge.vue   | 37 ++++++++-----------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/components/transaction/DepositThirdPartyBridge.vue b/components/transaction/DepositThirdPartyBridge.vue
index e582f5ca..d34a5e16 100644
--- a/components/transaction/DepositThirdPartyBridge.vue
+++ b/components/transaction/DepositThirdPartyBridge.vue
@@ -39,15 +39,17 @@ import { ref } from "vue";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
 import { $fetch } from "ofetch";
 
-import { useOnboardStore } from "@/store/onboard";
-
-const onboardStore = useOnboardStore();
-
 const handleLink = (link: string) => {
   window.open(link, "_blank");
 };
 
 const ThirdPartyBridges = [
+  {
+    name: "Meson Finance",
+    logo: "/img/Meson.svg",
+    bannerImg: "Meson.jpg",
+    url: "https://meson.fi/zklink",
+  },
   {
     name: "Owlto Finance",
     logo: "/img/owlto.svg",
@@ -60,29 +62,20 @@ const ThirdPartyBridges = [
     bannerImg: "Symbiosys.jpg",
     url: "https://app.symbiosis.finance/swap?chainIn=Ethereum&chainOut=ZkLink&tokenIn=ETH&tokenOut=ETH",
   },
-  {
-    name: "Meson Finance",
-    logo: "/img/Meson.svg",
-    bannerImg: "Meson.jpg",
-    url: "https://meson.fi/zklink",
-  },
 ];
 const bridgePoints = ref(ThirdPartyBridges.map((item) => ({ ...item, points: 0 })));
-const API_URL = "https://app-api.zklink.io/lrt-points/nova/points/project";
+const API_URL = "https://app-api.zklink.io/lrt-points/cache/bridge/latest/points";
 const fetchBridgePoints = async () => {
-  if (!onboardStore.account) return;
-
   const points = (await Promise.all([
-    $fetch(API_URL, { params: { address: onboardStore.account.address, project: "owlet" } }),
-    $fetch(API_URL, { params: { address: onboardStore.account.address, project: "symbiosis" } }),
-    $fetch(API_URL, { params: { address: onboardStore.account.address, project: "meson" } }),
+    $fetch(API_URL, { params: { name: "meson" } }),
+    $fetch(API_URL, { params: { name: "owlet" } }),
+    $fetch(API_URL, { params: { name: "symbiosis" } }),
   ])) as any[];
   console.log(points, "points");
   const _bridgePoints = bridgePoints.value;
   for (let i = 0; i < points.length; i++) {
     const { data } = points[i];
-    const novaPoints = data.reduce((prev, item) => prev + Number(item.points), 0);
-    _bridgePoints[i].points = novaPoints.toFixed(2);
+    _bridgePoints[i].points = data;
   }
   bridgePoints.value = _bridgePoints;
 };
@@ -102,17 +95,17 @@ fetchBridgePoints();
     margin-bottom: 1rem;
   }
   .deposit-thrid-bridge-item:hover {
-    background: #032e3f;
+    background: #343a44;
   }
   .deposit-thrid-bridge-item {
     cursor: pointer;
     border-radius: 16px;
-    background: #011c26;
+    background: #262b33;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem 1rem;
-    margin-bottom: 1rem;
+    margin-bottom: 24px;
     .left {
       display: flex;
       align-items: center;
@@ -145,7 +138,7 @@ fetchBridgePoints();
       display: flex;
       align-items: center;
       justify-content: flex-end;
-      font-size: 14px;
+      font-size: 16px;
     }
   }
 }

From b38f26a7331a3f4a5b183250649e3cb020a231e4 Mon Sep 17 00:00:00 2001
From: MickWang <1244134672@qq.com>
Date: Wed, 1 May 2024 22:36:36 +0800
Subject: [PATCH 3/3] update ui for mobile

---
 components/transaction/DepositThirdPartyBridge.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/transaction/DepositThirdPartyBridge.vue b/components/transaction/DepositThirdPartyBridge.vue
index d34a5e16..6eb20fdf 100644
--- a/components/transaction/DepositThirdPartyBridge.vue
+++ b/components/transaction/DepositThirdPartyBridge.vue
@@ -13,7 +13,7 @@
           <p class="name">{{ item.name }}</p>
           <p class="desc">
             <span>Bridge more than 0.1 ETH/ 500USDT /500 USDC to Nova to earn Nova Points.</span>
-            <CommonButtonLabel as="span" class="showTip relative text-left">
+            <CommonButtonLabel as="span" class="showTip relative hidden text-left md:block">
               <img src="/img/Shape.svg" class="ml-1 inline-block h-3 w-3" alt="" />
               <div class="tooltip">
                 You can earn Nova Points for each transaction of bridging to Nova over 0.1 ETH/ 500USDT /500 USDC
@@ -27,7 +27,7 @@
         </div>
       </div>
       <div class="right">
-        <span>{{ item.points }} Nova Points</span>
+        <span class="text-sm">{{ item.points }} Nova Points</span>
         <ArrowTopRightOnSquareIcon class="line-button-with-img-icon" />
       </div>
     </div>
@@ -132,13 +132,13 @@ fetchBridgePoints();
         font-weight: 400;
         line-height: normal;
         letter-spacing: -0.5px;
+        margin-right: 20px;
       }
     }
     .right {
       display: flex;
       align-items: center;
       justify-content: flex-end;
-      font-size: 16px;
     }
   }
 }