devop: 🔧 setup pages

Author: kvhnuke

builds/liveConfig.js

@@ -13,7 +13,8 @@ const exportObj = {
       importWorkboxFrom: 'local',
       skipWaiting: true,
       clientsClaim: true,
-      navigateFallback: '/index.html'
+      navigateFallback: '/index.html',
+      navigateFallbackDenylist: [/^\/pages/]
     }
   },
   chainWebpack: config => {

connections.js

@@ -86,5 +86,6 @@ module.exports = [
   'https://eth-mainnet.alchemyapi.io:443', // Unstoppable domains
   'https://polygon-mainnet.g.alchemy.com:443', // Unstoppable domains
   'https://unstoppabledomains.g.alchemy.com:443', // Unstoppable domains
-  'https://metadata.unstoppabledomains.com:443' // Unstoppable domains
+  'https://metadata.unstoppabledomains.com:443', // Unstoppable domains
+  'https://mew-seo-pages.pages.dev:443' //pages
 ];

package-lock.json

@@ -20,16 +20,16 @@
             is-block
           >
             <template #tabContent1>
-              <home-features-send class="mt-16 mb-10" />
+              <home-features-tokens class="mt-16 mb-10" />
             </template>
             <template #tabContent2>
-              <home-features-swap class="mt-16 mb-10" />
+              <home-features-send class="mt-16 mb-10" />
             </template>
             <template #tabContent3>
-              <home-features-dapps class="mt-16 mb-10" />
+              <home-features-swap class="mt-16 mb-10" />
             </template>
             <template #tabContent4>
-              <home-features-tokens class="mt-16 mb-10" />
+              <home-features-dapps class="mt-16 mb-10" />
             </template>
           </mew-tabs>
         </v-container>
@@ -79,6 +79,10 @@ export default {
   data: () => ({
     mobileTab: null,
     mobileItems: [
+      {
+        tab: 'Tokens',
+        img: require('@/assets/images/snippets/mobile/mobile-features-tokens.svg')
+      },
       {
         tab: 'ETH',
         img: require('@/assets/images/snippets/mobile/mobile-features-send.svg')
@@ -90,13 +94,12 @@ export default {
       {
         tab: 'DApps',
         img: require('@/assets/images/snippets/mobile/mobile-features-dapps.svg')
-      },
-      {
-        tab: 'Tokens',
-        img: require('@/assets/images/snippets/mobile/mobile-features-tokens.svg')
       }
     ],
     mewTabs: [
+      {
+        name: 'Tokens'
+      },
       {
         name: 'ETH'
       },
@@ -105,9 +108,6 @@ export default {
       },
       {
         name: 'DApps'
-      },
-      {
-        name: 'Tokens'
       }
     ]
   })

src/views/components-default/HomeFeatures.vue

@@ -9,10 +9,12 @@
     <div class="mt-10">
       <v-row>
         <v-col v-for="(t, k) in tokens" :key="k" cols="12" lg="4" sm="6">
-          <div class="d-flex align-center">
-            <img :src="t.icon" :alt="t.label" height="20" class="mr-2" />
-            <div>{{ t.label }}</div>
-          </div>
+          <a :href="t.link">
+            <div class="d-flex align-center no-link-colors">
+              <img :src="t.icon" :alt="t.label" height="20" class="mr-2" />
+              <div>{{ t.label }}</div>
+            </div>
+          </a>
         </v-col>
       </v-row>
       <mew-button
@@ -29,7 +31,7 @@
 
 <script>
 import { ROUTES_HOME } from '@/core/configs/configRoutes';
-
+import { knuthShuffle } from '@/modules/create-wallet/handlers/helpers';
 export default {
   name: 'HomeFeaturesTokens',
   components: {},
@@ -97,8 +99,27 @@ export default {
       }
     ],
     ROUTES_HOME: ROUTES_HOME
-  })
+  }),
+  created() {
+    fetch(`https://mew-seo-pages.pages.dev/best-wallet-for.json`)
+      .then(res => res.json())
+      .then(json => {
+        const tokenData = json.map(token => {
+          return {
+            label: `${token.name} (${token.symbol.toUpperCase()})`,
+            icon: `https://img.mewapi.io/?image=${token.icon}`,
+            link: `https://www.myetherwallet.com/pages${token.path}`
+          };
+        });
+        this.tokens = knuthShuffle(tokenData).slice(0, 15);
+      })
+      .catch(() => {});
+  }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.no-link-colors {
+  color: #1f242f;
+}
+</style>