Master updates (#286)

* feat: update metadata (#282)
* feat: update og image
* fix: cypress test

cypress/integration/basic_functionality.spec.ts

@@ -5,6 +5,8 @@ const NETWORK_SWITCHER_BUTTON = '[data-cy="network-switcher"]'
 describe('Basic Functionality', () => {
     before(() => {
         cy.visit('/')
+        // Disable banner
+        cy.get('[data-cy="dismiss_banner"]').click()
     })
 
     it('has access/create wallet options', () => {

package.json

@@ -93,6 +93,7 @@
         "vue-country-flag": "2.0.2",
         "vue-datetime": "1.0.0-beta.14",
         "vue-i18n": "8.15.4",
+        "vue-meta": "2.4.0",
         "vue-property-decorator": "8.4.2",
         "vue-router": "3.1.3",
         "vue-virtual-scroll-list": "^2.3.2",

public/index.html

@@ -4,12 +4,12 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>Avalanche Wallet: Store Your Avalanche Assets</title>
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">    
+    <title>Fastest Performing and Secure DeFi Wallet | Avalanche Wallet</title>
+    <meta property="og:title" content="Fastest Performing and Secure DeFi Wallet | Avalanche Wallet" data-vmid="og:title" />
 
-    <meta name="description" content="Avalanche Wallet is a simple, secure, non-custodial wallet for storing Avalanche assets.">
-    <meta property="og:title" content="Avalanche Wallet: Store Your Avalanche Assets" />
-    <meta property="og:description" content="Avalanche Wallet is a simple, secure, non-custodial wallet for storing Avalanche assets." />
+    <meta name="description" content="Avalanche wallet is a simple, highly secure, non-custodial crypto wallet for storing AVAX." data-vmid="description">
+    <meta property="og:description" content="Avalanche wallet is a simple, highly secure, non-custodial crypto wallet for storing AVAX." data-vmid="og:description" />
     <meta property="og:image" content="<%= BASE_URL %>wallet_og.png" />
     <meta property="og:url" content="<%= BASE_URL %>" />
     <meta property="og:type" content="website" />

src/App.vue

@@ -70,6 +70,29 @@ export default {
             return true
         },
     },
+    metaInfo: {
+        meta: [
+            {
+                vmid: 'description',
+                name: 'description',
+                content:
+                    'Avalanche wallet is a simple, highly secure, non-custodial crypto wallet for storing AVAX.',
+            },
+            {
+                vmid: 'og:description',
+                name: 'description',
+                content:
+                    'Avalanche wallet is a simple, highly secure, non-custodial crypto wallet for storing AVAX.',
+            },
+            {
+                vmid: 'og:title',
+                name: 'og:title',
+                content: 'Fastest Performing and Secure DeFi Wallet | Avalanche Wallet',
+            },
+        ],
+        title: 'Fastest Performing and Secure DeFi Wallet',
+        titleTemplate: '%s | Avalanche Wallet',
+    },
 }
 </script>
 

src/components/misc/UrlBanner.vue

@@ -4,7 +4,9 @@
             <fa icon="exclamation-triangle"></fa>
             Make sure the URL is
             <b>wallet.avax.network</b>
-            <button @click="dismiss" class="dismiss_but"><fa icon="times"></fa></button>
+            <button @click="dismiss" class="dismiss_but" data-cy="dismiss_banner">
+                <fa icon="times"></fa>
+            </button>
         </template>
     </v-banner>
 </template>

src/main.ts

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import VueMeta from 'vue-meta'
 import App from './App.vue'
 import router from './router'
 import store from './store'
@@ -11,6 +12,8 @@ import { BootstrapVue } from 'bootstrap-vue'
 // Install BootstrapVue
 Vue.use(BootstrapVue)
 
+Vue.use(VueMeta)
+
 Vue.component('datetime', Datetime)
 
 import vuetify from './plugins/vuetify'

src/shims-vue.d.ts

@@ -1,4 +1,9 @@
 declare module '*.vue' {
     import Vue from 'vue'
+
+    interface ComponentOptions<V extends Vue> {
+        metaInfo?: any
+    }
+
     export default Vue
 }

src/views/Create.vue

@@ -13,6 +13,30 @@ import CreateWallet from '@/components/CreateWalletWorkflow/CreateWallet.vue'
     components: {
         CreateWallet,
     },
+    metaInfo: () => {
+        const description =
+            "Here at Avalanche, we've made storing digital assets easy. Create an Avalanche wallet today is see what the buzz is all about!"
+        return {
+            meta: [
+                {
+                    vmid: 'description',
+                    name: 'description',
+                    content: description,
+                },
+                {
+                    vmid: 'og:description',
+                    name: 'description',
+                    content: description,
+                },
+                {
+                    vmid: 'og:title',
+                    name: 'og:title',
+                    content: 'Create | Avalanche Wallet',
+                },
+            ],
+            title: 'Create',
+        }
+    },
 })
 export default class Create extends Vue {}
 </script>

src/views/access/Access.vue

@@ -11,6 +11,36 @@
         </b-container>
     </div>
 </template>
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
+@Component({
+    metaInfo: () => {
+        const description =
+            'Access your stored crypto assets in a simple fashion, yet highly secure, and non-custodial fashion. Your Avalanche wallet is a few clicks away!'
+        return {
+            meta: [
+                {
+                    vmid: 'description',
+                    name: 'description',
+                    content: description,
+                },
+                {
+                    vmid: 'og:description',
+                    name: 'description',
+                    content: description,
+                },
+                {
+                    vmid: 'og:title',
+                    name: 'og:title',
+                    content: 'Access Stored Crypto Assets | Avalanche Wallet',
+                },
+            ],
+            title: 'Access Stored Crypto Assets',
+        }
+    },
+})
+export default class Access extends Vue {}
+</script>
 <style scoped lang="scss">
 @use "../../main";
 

yarn.lock

@@ -16048,6 +16048,13 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+[email protected]:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-2.4.0.tgz#a419fb4b4135ce965dab32ec641d1989c2ee4845"
+  integrity sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==
+  dependencies:
+    deepmerge "^4.2.2"
+
 [email protected]:
   version "8.4.2"
   resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.4.2.tgz#016e17f259f73bc547e77a50ce282ba18db4ee41"