Merge pull request #1 from lay2dev/rc

v0.3.0 release

package.json

@@ -10,7 +10,7 @@
     "test": "echo \"No test specified\" && exit 0"
   },
   "dependencies": {
-    "@lay2/pw-core": "^0.3.0",
+    "@lay2/pw-core": "^0.3.5",
     "@quasar/extras": "^1.0.0",
     "@vue/composition-api": "^0.6.4",
     "abcwallet": "^1.4.1",
@@ -24,7 +24,8 @@
     "vconsole": "^3.3.4",
     "vue-i18n": "^8.0.0",
     "vue-jazzicon": "^0.1.3",
-    "vue-qrcode": "^0.3.3"
+    "vue-qrcode": "^0.3.3",
+    "vue-router": "3.0.1"
   },
   "devDependencies": {
     "@quasar/app": "^2.0.0",

quasar.conf.js

@@ -24,7 +24,7 @@ module.exports = configure(function(ctx) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://quasar.dev/quasar-cli/boot-files
-    boot: ['composition-api', 'i18n', 'axios'],
+    boot: ['composition-api', 'i18n', 'gtm', 'axios'],
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
     css: ['app.scss'],
@@ -46,7 +46,12 @@ module.exports = configure(function(ctx) {
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
     build: {
       vueRouterMode: 'hash', // available values: 'hash', 'history'
+      publicPath: process.env.PUBLIC_PATH,
 
+      env: {
+        RC: process.env.RC,
+        VUE_ROUTER_BASE: process.env.VUE_ROUTER_BASE
+      },
       // transpile: false,
 
       // Add dependencies for transpiling with Babel (Array of string/regex)

src/boot/gtm.js

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import GTM from '../compositions/gtm';
+
+export default ({ router }) => {
+  router.afterEach(to => {
+    GTM.logPage(to.path);
+  });
+};

src/components/CardInfo.vue

@@ -7,7 +7,18 @@
         <div class="text-positive">{{$t('cardInfo.label.validBefore')}}: {{validBefore}}</div>
         <q-separator spaced />
         <vue-qrcode v-if="!!card.uniqueCode" :value="card.uniqueCode" :margin="1" :width="200" />
-        <div v-if="!!card.cardPwd" class="text-h6 text-accent bg-grey-2 q-pa-lg">{{ card.cardPwd}}</div>
+        <div v-if="!!card.cardPwd" class="text-h6 text-accent bg-grey-2 q-pa-lg">
+          {{ card.cardPwd}}
+          <q-btn
+            color="grey"
+            icon="content_copy"
+            size="xs"
+            round
+            dense
+            flat
+            @click="copy(card.cardPwd)"
+          />
+        </div>
         <q-separator spaced />
         <div class="text-left q-px-sm" style="white-space: pre-line;">{{ card.description }}</div>
       </q-card-section>
@@ -19,6 +30,7 @@
 import { defineComponent, computed } from '@vue/composition-api';
 import { useSelectedCard } from '../compositions/shop/order';
 import VueQrcode from 'vue-qrcode';
+import { copy } from '../compositions/api';
 
 export default defineComponent({
   name: 'CardInfo',
@@ -30,7 +42,7 @@ export default defineComponent({
       card.value ? new Date(card.value.expiresTime).toLocaleString() : '-'
     );
 
-    return { card, validBefore };
+    return { card, validBefore, copy };
   },
 });
 </script>

src/components/CardItem.vue

@@ -5,14 +5,15 @@
         <div class="row justify-start items-center">
           <q-img :src="card.img" :ratio="8/5" width="90px" contain />
           <div class="column q-px-sm justify-center">
-            <div class="text-accent q-pb-xs">{{card.productName}}</div>
+            <div class="q-pb-xs" :class="used ? 'text-grey' : 'text-accent'">{{card.productName}}</div>
             <div class="q-gutter-xs">
-              <span>{{fiatPrice}}</span>
+              <span :class="used && 'text-grey'">{{fiatPrice}}</span>
               <span class="text-grey">{{tokenPrice}}</span>
             </div>
             <div
               v-if="card.buyTime"
-              class="text-positive text-caption"
+              class="text-caption"
+              :class="used ? 'text-grey' : 'text-positive'"
             >{{$t('cardItem.label.validBefore')}}: {{validBefore}}</div>
           </div>
         </div>
@@ -33,6 +34,7 @@ import {
   Card,
   useSelectedCard,
   useShowCardinfo,
+  CardStatus,
 } from 'src/compositions/shop/order';
 import { AmountUnit, Amount } from '@lay2/pw-core';
 export default defineComponent({
@@ -59,6 +61,7 @@ export default defineComponent({
         fixed: 4,
       })} ${card.payToken})`;
     });
+    const used = computed(() => card.status === CardStatus.FINISHED);
 
     const onClick = () => {
       if (!card.buyTime) return;
@@ -70,6 +73,7 @@ export default defineComponent({
       fiatPrice,
       tokenPrice,
       validBefore,
+      used,
       boughtAt,
       onClick,
     };

src/components/ContactSelect.vue

@@ -1,34 +1,15 @@
 <template>
   <q-card style="border-top-left-radius: 7%;border-top-right-radius: 7%">
     <q-toolbar class="bg-accent text-white">
-      <q-btn
-        flat
-        round
-        dense
-        icon="close"
-        v-close-popup
-      />
+      <q-btn flat round dense icon="close" v-close-popup />
       <q-toolbar-title>
-        <center class="text-subtitle1"> {{$t('contacts.title')}} </center>
+        <center class="text-subtitle1">{{$t('contacts.title')}}</center>
       </q-toolbar-title>
-      <q-btn
-        flat
-        round
-        dense
-        icon="add"
-        to="contacts/0"
-      />
+      <q-btn flat round dense icon="add" to="contacts/0" />
     </q-toolbar>
     <q-card-section v-if="contacts && contacts.length">
-      <div
-        v-for="contact in contacts"
-        :key="contact.id"
-      >
-        <q-item
-          clickable
-          v-close-popup
-          @click="onSelect(contact)"
-        >
+      <div v-for="contact in contacts" :key="contact.id">
+        <q-item clickable v-close-popup @click="onSelect(contact)">
           <q-item-section>
             <div class="text-body1 text-accent">{{contact.name}}</div>
             <div
@@ -44,39 +25,40 @@
         <q-separator />
       </div>
     </q-card-section>
-    <q-card-section
-      class="text-center text-grey"
-      v-else
-    >
-      <div class="text-subtitle2"> {{$t('contacts.msg.empty')}} </div>
-      <q-icon
-        name="space_bar"
-        size="5em"
-      />
+    <q-card-section class="text-center text-grey" v-else>
+      <div class="text-subtitle2">{{$t('contacts.msg.empty')}}</div>
+      <q-icon name="space_bar" size="5em" />
     </q-card-section>
   </q-card>
 </template>
 
 <script lang="ts">
-  import { defineComponent, onMounted } from '@vue/composition-api';
-  import { useContacts, loadContacts, Contact } from '../compositions/account';
+import { defineComponent, onMounted } from '@vue/composition-api';
+import { useContacts, loadContacts, Contact } from '../compositions/account';
+import GTM from '../compositions/gtm';
 
-  export default defineComponent({
-    name: 'ContactSelect',
-    setup(props, ctx) {
-      onMounted(() => {
-        void loadContacts();
+export default defineComponent({
+  name: 'ContactSelect',
+  setup(props, ctx) {
+    onMounted(() => {
+      void loadContacts();
+      GTM.logEvent({
+        category: 'Actions',
+        action: 'show-dialog',
+        label: 'contact-select',
+        value: new Date().getTime(),
       });
+    });
 
-      const contacts = useContacts();
+    const contacts = useContacts();
 
-      const onSelect = (contact: Contact) =>
-        ctx.emit('onSelect', contact.address.trim());
+    const onSelect = (contact: Contact) =>
+      ctx.emit('onSelect', contact.address.trim());
 
-      return {
-        contacts,
-        onSelect,
-      };
-    },
-  });
+    return {
+      contacts,
+      onSelect,
+    };
+  },
+});
 </script>

src/components/DaoCard.vue

@@ -6,27 +6,27 @@
           <q-avatar size="lg" icon="img:dao.svg" />
           <div class="q-ml-xs text-center text-subtitle">{{$t('daoCard.label.dao')}}</div>
         </div>
-        <q-icon size="sm" color="grey" name="chevron_right" />
+        <q-icon size="sm" color="grey-4" name="chevron_right" />
       </div>
     </q-card-section>
-    <q-separator />
+    <q-separator color="grey-2" />
     <q-card-section class="row justify-between items-center q-py-sm">
       <div class="q-ml-xs text-center text-subtitle">{{$t('daoCard.label.deposited')}}:</div>
       <div class="text-subtitle1 text-accent">{{lockedAmount}} CKB</div>
     </q-card-section>
-    <q-separator />
+    <q-separator color="grey-2" />
     <q-card-section class="q-pa-sm">
       <div class="row justify-evenly items-center">
         <div class="column items-start">
           <div class="text-caption text-accent">{{$t('daoCard.label.yesterday')}}:</div>
           <div class="text-caption text-bold text-primary">+ {{yesterdayAmount}} CKB</div>
         </div>
-        <q-separator spaced inset vertical />
+        <q-separator color="grey-2" spaced inset vertical />
         <div class="column items-start">
           <div class="text-caption text-accent">{{$t('daoCard.label.cumulative')}}:</div>
           <div class="text-caption text-bold text-primary">+ {{cumulativeAmount}} CKB</div>
         </div>
-        <q-separator spaced inset vertical />
+        <q-separator color="grey-2" spaced inset vertical />
         <div class="column items-start">
           <div class="text-caption text-accent">APC:</div>
           <div class="text-caption text-bold text-accent">{{apc}}</div>