feat: added bridge link for vASTR and added Stargate in the Bridge page (#1443)

* feat: updated styling of the bridge select page

* feat: added placeholder links

* feat: added vASTR link

* fix: updated bridge card title to Stargate

Author: impelcrypto

src/assets/img/logo-stargate.webp

@@ -92,6 +92,20 @@
             </custom-router-link>
           </div>
 
+          <div v-else>
+            <custom-router-link
+              v-if="token.bridgeUrl"
+              :to="token.bridgeUrl"
+              :is-disabled="!isBridgeEnabled(token.bridgeUrl)"
+            >
+              <button class="btn btn--icon"><astar-icon-bridge class="icon--bridge" /></button>
+              <span class="text--expand-menu">{{ $t('assets.bridge') }}</span>
+              <q-tooltip>
+                <span class="text--tooltip">{{ $t('assets.bridge') }}</span>
+              </q-tooltip>
+            </custom-router-link>
+          </div>
+
           <a :href="explorerLink" target="_blank" rel="noopener noreferrer">
             <button class="btn btn--icon">
               <astar-icon-external-link class="icon--external-link" />

src/components/assets/Erc20Currency.vue

@@ -4,7 +4,7 @@
       <div class="container--title">
         <span>{{ $t('bridge.selectBridge') }}</span>
       </div>
-      <div class="container--selection">
+      <div class="container--bridges">
         <div class="column--selection">
           <button :disabled="!isEnableCcipBridge">
             <component
@@ -92,6 +92,37 @@
           </button>
         </div>
 
+        <div class="column--selection">
+          <button
+            :disabled="!stargateBridgeEnabled"
+            class="button--bridge"
+            @click="navigateInNewTab(stargateBridgeLink)"
+          >
+            <div class="row--logo-bg">
+              <div class="img--logo-bg">
+                <img
+                  class="img--logo-stargate"
+                  :src="require('src/assets/img/logo-stargate.webp')"
+                  alt="stargate"
+                />
+              </div>
+            </div>
+            <div class="row--bridge-title">
+              <div class="text--bridge-tag">
+                <q-chip outline>
+                  {{ $t('bridge.stargateBridge.tag') }}
+                </q-chip>
+              </div>
+              <span class="text--bridge-title">{{ $t('bridge.stargateBridge.title') }}</span>
+              <div class="box--text-bridge">
+                <span class="text--bridge">
+                  {{ $t('bridge.stargateBridge.text') }}
+                </span>
+              </div>
+            </div>
+          </button>
+        </div>
+
         <div class="column--selection">
           <button
             :disabled="!celerBridgeEnabled"
@@ -129,8 +160,6 @@
             {{ $t('bridge.celerBridge.warning') }}
           </p>
         </div>
-      </div>
-      <div class="container--selection">
         <div class="column--selection">
           <button :disabled="!isEnableEthBridge">
             <component
@@ -252,10 +281,12 @@ import {
   layerZeroBridgeEnabled,
   ccipSoneiumBridgeEnabled,
   nativeBridgeEnabled,
+  stargateBridgeEnabled,
 } from 'src/features';
 import { useAccount, useNetworkInfo } from 'src/hooks';
 import { EthBridgeNetworkName } from 'src/modules/zk-evm-bridge';
 import { layerSwapLink, zKatanaBridgeUrl } from 'src/modules/zk-evm-bridge/index';
+import { stargateBridgeLink } from 'src/links/index';
 import {
   Path as RoutePath,
   buildCcipBridgePageLink,
@@ -323,9 +354,11 @@ export default defineComponent({
       layerSwapBridgeEnabled,
       nativeBridgeEnabled,
       layerZeroBridgeEnabled,
+      stargateBridgeEnabled,
       isEnableCcipBridge,
       isShibuyaEvm,
       isAstarEvm,
+      stargateBridgeLink,
       buildEthereumBridgePageLink,
       buildLzBridgePageLink,
       navigateInNewTab,

src/components/bridge/BridgeSelection.vue

@@ -17,6 +17,9 @@
   @media (min-width: $xl) {
     margin-top: 0px;
     margin-bottom: 0px;
+    align-items: end;
+    margin-right: -40px;
+    margin-top: -36px;
   }
 }
 
@@ -31,17 +34,26 @@
 
 .container--box {
   @media (min-width: $xl) {
-    position: absolute;
-    right: -40px;
-    top: -36px;
-    height: calc(100vh - 98px);
-    padding-right: 168px;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 36px;
+    padding-right: 130px;
     padding-left: 48px;
-    padding-top: 58px;
+    padding-top: 24px;
     box-shadow: 0px 2px 8px 0px #00000014;
   }
 }
 
+.container--bridges {
+  @media (min-width: $md) {
+    display: grid;
+    column-gap: 20px;
+    grid-template-columns: repeat(3, 1fr);
+    justify-content: center;
+    align-items: center;
+  }
+}
+
 .container--selection {
   display: flex;
   flex-direction: column;
@@ -61,6 +73,8 @@
   }
   @media (min-width: $sm) {
     width: 240px;
+    // Memo: to adjust the height to line up the buttons
+    min-height: 300px;
   }
 }
 
@@ -117,6 +131,11 @@
   height: 32px;
 }
 
+.img--logo-stargate {
+  width: 40px;
+  height: 40px;
+}
+
 .img--logo-astr {
   height: 48px;
 }

src/components/bridge/styles/bridge-selection.scss

@@ -6,7 +6,7 @@ export const celerBridgeEnabled = true;
 export const omniBridgeEnabled = true;
 export const ccipMinatoBridgeEnabled = true;
 export const ccipSoneiumBridgeEnabled = true;
-const stargateBridgeEnabled = true;
+export const stargateBridgeEnabled = true;
 const stakeStoneBridgeEnabled = true;
 const arthSwapBridgeEnabled = true;
 

src/features.ts

@@ -1105,6 +1105,11 @@ export default {
       text: 'Transfer assets between Astar EVM and Astar zkEVM.',
       remark: 'Available on Astar zkEVM and Astar EVM. Switch the network to use it.',
     },
+    stargateBridge: {
+      title: 'Stargate Bridge',
+      tag: 'ERC20',
+      text: '3rd Party Bridge. Transfer assets between Soneium and Astar EVM.',
+    },
     celerBridge: {
       title: 'Celer Bridge',
       tag: 'ERC20',

src/i18n/en-US/index.ts

@@ -81,3 +81,8 @@ export const getEvmExplorerUrl = async (hash: string, web3: Web3): Promise<strin
   const blockExplorerUrl = blockExplorerUrls[connectedChainId];
   return `${blockExplorerUrl}/tx/${hash}`;
 };
+
+export const vastrBridgeLink =
+  'https://stargate.finance/bridge?srcChain=astar&srcToken=0xfffFffff00000000000000010000000000000010&dstChain=soneium&dstToken=0x60336f9296C79dA4294A19153eC87F8E52158e5F';
+
+export const stargateBridgeLink = 'https://stargate.finance/bridge';

src/links/index.ts

@@ -6,6 +6,7 @@ import { Erc20Token, registeredErc20Tokens, tokenImageMap } from 'src/modules/to
 import { xcmToken } from 'src/modules/xcm';
 import { Asset } from 'src/v2/models';
 import { hasProperty } from '@astar-network/astar-sdk-core';
+import { vastrBridgeLink } from 'src/links';
 
 export const getTokenImage = ({
   isNativeToken,
@@ -171,6 +172,11 @@ export const getRegisteredErc20Tokens = ({
   const xc20Tokens = xcmToken[network].map((it) => {
     try {
       const asset = assets.find((that) => that.id === it.assetId) as Asset;
+      let bridgeUrl = null;
+      if (it.symbol === 'vASTR') {
+        bridgeUrl = vastrBridgeLink;
+      }
+
       return {
         srcChainId: Number(providerEndpoints[network].evmChainId),
         address: asset.mappedERC20Addr,
@@ -180,7 +186,7 @@ export const getRegisteredErc20Tokens = ({
         image: it.logo,
         isWrappedToken: false,
         isXC20: true,
-        bridgeUrl: null,
+        bridgeUrl,
       };
     } catch (error) {
       console.error(error);