Feat/superhero swap integration

src/constants/common.ts

@@ -497,6 +497,12 @@ export const TRUSTED_DAPPS: {
     image: 'Governance.webp',
     isFeatured: true,
   },
+  {
+    name: 'Superhero Swap',
+    url: 'https://swap.superhero.com',
+    image: 'bridgeswap.svg',
+    isFeatured: true,
+  },
   {
     name: 'Graffiti Aepp',
     url: 'https://graffiti.aeternity.com',

src/popup/components/Card.vue

@@ -143,7 +143,7 @@ export default defineComponent({
   }
 
   .description {
-    @extend %face-sans-13-regular;
+    @extend %face-sans-13-medium;
 
     opacity: 0.7;
     margin-top: 4px;

src/popup/components/buttons/BtnBase.vue

@@ -36,6 +36,7 @@ export const BTN_VARIANT = [
   'muted',
   'danger',
   'purple',
+  'teal',
   'dark',
   'outlined',
 ] as const;
@@ -197,6 +198,10 @@ export default defineComponent({
       --bg-color: #{$color-purple};
     }
 
+    &-teal {
+      --bg-color: #{$color-teal};
+    }
+
     &-dark {
       --bg-color: #{$color-bg-6};
     }

src/popup/locales/en.json

@@ -149,6 +149,11 @@
       "description": "Explore æpps from within your wallet with the new built-in browser.",
       "button": "Browse"
     },
+    "bridgeSwapBrowserCard": {
+      "title": "Exchange With Superhero Swap",
+      "description": "Exchange ETH to AE or aeETH to AE in just a few easy steps.",
+      "button": "Exchange"
+    },
     "buyCard": {
       "title": "Buy AE",
       "description": "Use Simplex to buy æternity coins with your credit card or bank account.",

src/popup/pages/Assets/AssetDetails.vue

@@ -56,6 +56,12 @@
               :icon="SwapIcon"
               :href="AE_DEX_URL"
             />
+            <BtnBox
+              v-if="isEthCoin"
+              :text="$t('common.swap')"
+              :icon="BridgeSwapIcon"
+              @click="onSwapClick"
+            />
           </div>
 
           <div
@@ -106,7 +112,7 @@ import {
   nextTick,
   watch,
 } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { Contract, Encoded } from '@aeternity/aepp-sdk';
 
@@ -115,12 +121,15 @@ import {
   ICON_SIZES,
   IS_FIREFOX,
   IS_IOS,
+  IS_MOBILE_APP,
   IS_TRANSITIONS_DISABLED,
   PROTOCOLS,
+  TRUSTED_DAPPS,
   UNFINISHED_FEATURES,
 } from '@/constants';
-import { excludeFalsy } from '@/utils';
+import { excludeFalsy, setLocalStorageItem } from '@/utils';
 import {
+  ROUTE_APPS_BROWSER,
   ROUTE_COIN,
   ROUTE_COIN_DETAILS,
   ROUTE_MULTISIG_COIN,
@@ -143,6 +152,7 @@ import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
 import { fadeAnimation } from '@/popup/animations';
 import AedexV2PairACI from '@/protocols/aeternity/aci/AedexV2PairACI.json';
 import { AE_CONTRACT_ID, AE_DEX_URL } from '@/protocols/aeternity/config';
+import { ETH_CONTRACT_ID } from '@/protocols/ethereum/config';
 import {
   buildAeFaucetUrl,
   buildSimplexLink,
@@ -162,6 +172,7 @@ import TransactionAndTokenFilter from '../../components/TransactionAndTokenFilte
 import SwapIcon from '../../../icons/swap.svg?vue-component';
 import BuyIcon from '../../../icons/credit-card.svg?vue-component';
 import FaucetIcon from '../../../icons/faucet.svg?vue-component';
+import BridgeSwapIcon from '../../../icons/bridgeswap.svg?vue-component';
 
 export default defineComponent({
   name: 'AssetDetails',
@@ -180,6 +191,7 @@ export default defineComponent({
   },
   setup() {
     const route = useRoute();
+    const router = useRouter();
     const { t } = useI18n();
     const { setSharedAssetDetails, resetSharedAssetDetails } = useAssetDetails();
     const { setLoaderVisible } = useUi();
@@ -209,7 +221,7 @@ export default defineComponent({
     const currentActiveProtocol = computed(
       () => isMultisig.value
         ? PROTOCOLS.aeternity
-        : activeAccount.value.protocol,
+        : activeAccount.value?.protocol,
     );
 
     const isCoin: boolean = !!route.matched.find(
@@ -222,6 +234,7 @@ export default defineComponent({
     );
     const contractId = route.params.id as AssetContractId;
     const isAeCoin = contractId === AE_CONTRACT_ID;
+    const isEthCoin = contractId === ETH_CONTRACT_ID;
 
     const detailsRouteName = isCoin ? ROUTE_COIN_DETAILS : ROUTE_TOKEN_DETAILS;
     const transactionRouteName = isCoin ? ROUTE_COIN : ROUTE_TOKEN;
@@ -360,6 +373,20 @@ export default defineComponent({
       }
     }
 
+    function onSwapClick() {
+      const superheroSwapDapp = TRUSTED_DAPPS.filter(({ isFeatured, name }) => (
+        isFeatured && name === 'Superhero Swap'
+      ))[0];
+      if (superheroSwapDapp) {
+        if (IS_MOBILE_APP || UNFINISHED_FEATURES) {
+          setLocalStorageItem(['selected-app'], superheroSwapDapp);
+          router.push({ name: ROUTE_APPS_BROWSER });
+        } else {
+          window.open(superheroSwapDapp.url, '_blank');
+        }
+      }
+    }
+
     onMounted(async () => {
       if (isContract(contractId) && !isAeCoin) {
         setLoaderVisible(true);
@@ -396,10 +423,12 @@ export default defineComponent({
       IS_IOS,
       IS_TRANSITIONS_DISABLED,
       AE_DEX_URL,
+      ROUTE_APPS_BROWSER,
 
       BuyIcon,
       FaucetIcon,
       SwapIcon,
+      BridgeSwapIcon,
 
       assetBalance,
       assetData,
@@ -410,6 +439,7 @@ export default defineComponent({
       stickyTabsWrapperEl,
       fungibleToken,
       isAeCoin,
+      isEthCoin,
       isCoin,
       isNodeMainnet,
       isNodeTestnet,
@@ -425,6 +455,8 @@ export default defineComponent({
       route,
       routerHeight,
       fadeAnimation,
+
+      onSwapClick,
     };
   },
 });

src/popup/pages/Dashboard.vue

@@ -46,6 +46,17 @@
             :to="{ name: ROUTE_APPS_BROWSER }"
             :card-id="DASHBOARD_CARD_ID.daeppBrowser!"
           />
+          <DashboardCard
+            :title="$t('dashboard.bridgeSwapBrowserCard.title')"
+            :description="$t('dashboard.bridgeSwapBrowserCard.description')"
+            :btn-text="$t('dashboard.bridgeSwapBrowserCard.button')"
+            :background="bridgeSwapBackground"
+            :icon="BridgeSwapIcon"
+            :card-id="DASHBOARD_CARD_ID.daeppBrowser!"
+            style="background-blend-mode: soft-light"
+            variant="teal"
+            @click="onSwapClick"
+          />
           <DashboardCard
             v-if="isNodeMainnet && UNFINISHED_FEATURES"
             :title="$t('dashboard.buyCard.title')"
@@ -90,12 +101,13 @@ import {
   onIonViewWillEnter,
   onIonViewDidLeave,
 } from '@ionic/vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import {
   DASHBOARD_CARD_ID,
   IS_MOBILE_APP,
   PROTOCOLS,
+  TRUSTED_DAPPS,
   UNFINISHED_FEATURES,
 } from '@/constants';
 import {
@@ -125,11 +137,14 @@ import ArrowSendIcon from '@/icons/arrow-send.svg?vue-component';
 import CardIcon from '@/icons/credit-card.svg?vue-component';
 import GlobeIcon from '@/icons/globe-small.svg?vue-component';
 import ActionIcon from '@/icons/action.svg?vue-component';
+import BridgeSwapIcon from '@/icons/bridgeswap.svg?vue-component';
 
 import buyBackground from '@/image/dashboard/buy-ae.webp';
 import chainNameBackground from '@/image/dashboard/chain-name.webp';
 import daeppBrowserBackground from '@/image/dashboard/aepp-browser.webp';
+import bridgeSwapBackground from '@/image/dashboard/bridge-swap.png';
 import OpenTransferReceiveModalBtn from '@/popup/components/OpenTransferReceiveModalBtn.vue';
+import { setLocalStorageItem } from '../../utils';
 
 export default defineComponent({
   name: 'Dashboard',
@@ -148,6 +163,7 @@ export default defineComponent({
     const pageIsActive = ref(true);
 
     const route = useRoute();
+    const router = useRouter();
 
     const {
       accounts,
@@ -172,6 +188,20 @@ export default defineComponent({
       (+accountsTotalBalance.value + +accountsTotalTokenBalance.value).toString()
     ));
 
+    function onSwapClick() {
+      const superheroSwapDapp = TRUSTED_DAPPS.filter(({ isFeatured, name }) => (
+        isFeatured && name === 'Superhero Swap'
+      ))[0];
+      if (superheroSwapDapp) {
+        if (IS_MOBILE_APP || UNFINISHED_FEATURES) {
+          setLocalStorageItem(['selected-app'], superheroSwapDapp);
+          router.push({ name: ROUTE_APPS_BROWSER });
+        } else {
+          window.open(superheroSwapDapp.url, '_blank');
+        }
+      }
+    }
+
     watch(
       () => route.query,
       () => checkIfOpenTransferSendModal(route),
@@ -203,6 +233,7 @@ export default defineComponent({
       CardIcon,
       GlobeIcon,
       ActionIcon,
+      BridgeSwapIcon,
 
       multisigAccounts,
       accounts,
@@ -215,12 +246,15 @@ export default defineComponent({
       buyBackground,
       chainNameBackground,
       daeppBrowserBackground,
+      bridgeSwapBackground,
       isNodeMainnet,
       isNodeTestnet,
       pageIsActive,
       totalBalance,
       setActiveAccountByGlobalIdx,
       setActiveAccountByAddress,
+
+      onSwapClick,
     };
   },
 });

src/styles/variables.scss

@@ -32,6 +32,7 @@ $color-grey-dark: #787878;
 $color-grey-border: #444;
 $color-grey-border-avatar: #9e9e9e;
 $color-purple: #8f00ff;
+$color-teal: #53B6BF;
 
 $color-dialog: #2b2b2b;