Deploy Version 1.1.0

src/App.vue

@@ -2,21 +2,9 @@
   <router-view />
 </template>
 <script lang="ts">
-import { defineComponent, onMounted } from 'vue';
-import { useStore } from 'src/store';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'App',
-  setup() {
-    const store = useStore();
-
-    window.addEventListener('keplr_keystorechange', async () => {
-      await store.dispatch('authentication/init');
-    });
-
-    onMounted(() => {
-      store.dispatch('authentication/init').catch(err => console.error(err));
-    });
-  }
 })
 </script>

src/common/b64.ts

@@ -1,3 +1,3 @@
 export const urlSafeEncode = (value: string) => {
-  return value.replace('+/gi', '_').replace('\//gi', '-');
+  return value.replace(/\+/gi, '_').replace(/\//g, '-');
 }

src/common/chart.ts

@@ -36,10 +36,12 @@ export const getMappedVotes = (details: DetailedVote) => {
 export const getMappedTimeline = (details: DetailedVote): TimelineData[] => {
   const timeline = details.timeline.map((el) => {
     if (el) {
+      const postfix = el.time && !compareNow(el.time) ? 'ago' : 'left';
+
       return ({
         label: el.title,
         active: el.time ? !compareNow(el.time) : false,
-        subtitle: el.time ? `${fromNow(el.time)} ago` : '--'
+        subtitle: el.time ? `${fromNow(el.time)} ${postfix}` : 'N/A'
       });
     }
   });

src/common/cosmos-reducer.ts

@@ -390,7 +390,7 @@ const proposalStatusMap = (status: ProposalRawStatus) => {
   }
 }
 
-export const proposalReducer = (proposal: ProposalRaw, totalBondedTokens: string, detailedVotes: DetailedVote): Proposal => {
+export const proposalReducer = (proposal: ProposalRaw, totalBondedTokens: string, detailedVotes: DetailedVote | null): Proposal => {
   const typeStringArray = proposal.content['@type'].split('.')
   const typeString = typeStringArray[typeStringArray.length - 1];
   const type = proposalTypeEnumDictionary[typeString] as ProposalType;
@@ -405,10 +405,10 @@ export const proposalReducer = (proposal: ProposalRaw, totalBondedTokens: string
     status: proposalStatusMap(proposal.status),
     statusBeginTime: proposalBeginTime(proposal),
     statusEndTime: proposalEndTime(proposal),
-    tally: tallyReducer(proposal, detailedVotes.tally, totalBondedTokens),
+    tally: detailedVotes ? tallyReducer(proposal, detailedVotes.tally, totalBondedTokens) : null,
     deposit: getDeposit(proposal),
     summary: getProposalSummary(type),
-    detailedVotes,
+    detailedVotes: detailedVotes ? detailedVotes : null,
   }
 }
 

src/components/BalanceSummary.vue

@@ -7,12 +7,12 @@
       <div class="row col-12 col-md-8 justify-between q-mr-auto">
         <div class="balance-section column no-wrap col-12 col-md-auto">
           <h3 class="balance-title q-my-none text-half-transparent-white text-body4 text-weight-medium text-center">
-            APR
+            TOTAL ({{ network.stakingDenom }})
           </h3>
 
-          <template v-if="!loadingApr">
+          <template v-if="!loadingBalance && !loading">
             <p class="balance-subtitle text-body-extra-large text-white q-my-none">
-              {{ apr }}
+              {{ balance ? balance.total : 0 }}
             </p>
           </template>
           <q-skeleton class="q-mx-auto" width="80px" height="36px" animation-speed="700" dark v-else></q-skeleton>
@@ -22,7 +22,7 @@
             REWARDS ({{ network.stakingDenom }})
           </h3>
 
-          <template v-if="!loadingBalance">
+          <template v-if="!loadingBalance && !loading">
             <p class="balance-subtitle text-body-extra-large text-white q-my-none">
               {{ rewards }}
             </p>
@@ -34,14 +34,14 @@
             AVAILABLE ({{ network.stakingDenom }})
           </h3>
 
-          <p class="balance-subtitle text-body-extra-large text-white q-my-none" v-if="!loadingBalance">
+          <p class="balance-subtitle text-body-extra-large text-white q-my-none" v-if="!loadingBalance && !loading">
             {{ balance && balance.type === 'STAKE' ? balance.available : 0 }}
           </p>
           <q-skeleton class="q-mx-auto" width="80px" height="36px" animation-speed="700" dark v-else></q-skeleton>
         </div>
       </div>
 
-      <q-btn v-if="session && session.sessionType !== 'explore'" @click="openSendDialog" class="send-btn btn-medium text-h6 col-12 col-md-3" rounded unelevated color="accent-2" text-color="white" padding="12px 24px 10px 26px">
+      <q-btn :disable="!session || (session && session.sessionType !== 'keplr')" @click="openSendDialog" class="send-btn btn-medium text-h6 col-12 col-md-3" rounded unelevated color="accent-2" text-color="white" padding="12px 24px 10px 26px">
         SEND <q-icon class="balance-icon rotate-270" name="svguse:icons.svg#arrow-right|0 0 14 14" size="12px" color="half-transparent-white" />
       </q-btn>
     </div>
@@ -64,9 +64,7 @@ export default defineComponent({
     const quasar = useQuasar();
 
     const session = computed(() => store.state.authentication.session);
-
-    const apr = computed(() => store.getters['data/getAprInfo'] as string);
-    const loadingApr = computed(() => store.state.data.loadingApr || store.state.data.loading);
+    const loading = computed(() => store.state.authentication.loading || store.state.authentication.changing);
 
     const balance = computed(() => store.getters['data/currentBalance'] as Balance | undefined);
     const loadingBalance = computed(() => !store.state.data.balancesLoaded || store.state.data.loading);
@@ -102,9 +100,8 @@ export default defineComponent({
 
     return {
       session,
-      apr,
-      loadingApr,
       loadingBalance,
+      loading,
       network,
       rewards,
       balance,

src/components/BalancesTable.vue

@@ -0,0 +1,204 @@
+<template>
+  <q-table
+    :rows="rows"
+    :columns="columns"
+    :visible-columns="visibleColumns"
+    :loading="loading"
+    :pagination="pagination"
+    row-key="id"
+    class="balances-table"
+    flat
+    square
+    :rows-per-page-options="[0]"
+    :bordered="false"
+    hide-pagination
+    virtual-scroll
+  >
+    <template v-slot:no-data>
+      <h5 class="text-half-transparent-white text-weight-medium">No assets available</h5>
+    </template>
+    <template v-slot:header="props">
+      <q-tr :props="props" class="balances-table-head-row">
+        <q-th
+          v-for="col in columns"
+          :key="col.name"
+          :props="props"
+          class="text-body4 text-uppercase text-half-transparent-white text-weight-medium balances-table-head-col"
+        >
+          {{ col.label }}
+        </q-th>
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr class="balances-table-row cursor-pointer" :props="props">
+        <q-td key="name" class="text-subtitle2 text-white" :props="props">
+          <div class="row no-wrap items-center">
+            <p class="balance-name q-my-none text-subtitle2">
+              {{ props.row.denom }}
+            </p>
+          </div>
+        </q-td>
+        <q-td key="total" class="text-subtitle2 text-white" :props="props">
+          <p class="text-subtitle2 q-my-none">
+            {{ props.row.total }}
+          </p>
+        </q-td>
+        <q-td key="available" class="text-subtitle2 text-white" :props="props">
+          <p class="text-subtitle2 q-my-none">
+            {{ props.row.available }}
+          </p>
+        </q-td>
+        <q-td key="actions" :props="props">
+          <q-btn flat unelevated padding="2px" @click.stop="">
+            <q-icon name="svguse:icons.svg#vertical-dots|0 0 4 16" size="16px" color="primary" />
+
+            <q-menu class="menu-list" anchor="center left" self="center middle" :offset="[90, 0]">
+              <q-item class="menu-item" active-class="active" disable v-close-popup>
+                <q-item-section class="text-center text-subtitle2">Send</q-item-section>
+              </q-item>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, PropType } from 'vue';
+import { Balance } from 'src/models';
+import { useQuasar } from 'quasar';
+import SendDialog from './SendDialog.vue';
+import { useStore } from 'src/store';
+
+export default defineComponent({
+  name: 'BalancesTable',
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    rows: {
+      type: Array as PropType<Balance[]>,
+      default: () => [],
+    },
+  },
+  setup() {
+    const store = useStore();
+    const quasar = useQuasar();
+
+    const network = computed(() => store.state.authentication.network);
+
+    const pagination = {
+      descending: true,
+      rowsPerPage: 0
+    };
+
+    const columns = computed(() => [
+      {
+        name: 'name',
+        label: 'Name',
+        align: 'left',
+        field: 'name',
+      },
+      {
+        name: 'total',
+        label: 'Total',
+        align: 'center',
+        field: 'total',
+      },
+      {
+        name: 'available',
+        label: 'Available',
+        align: 'center',
+        field: 'available',
+      },
+      {
+        name: 'actions',
+        align: 'center'
+      },
+    ]);
+
+    const visibleColumns = computed<string[]>(() => ['name', 'total', 'available', 'actions']);
+
+    const openSendDialog = (balance: Balance) => {
+      quasar.dialog({
+        component: SendDialog,
+        componentProps: {
+          denom: balance.denom === network.value.stakingDenom ? undefined : balance.denom,
+        },
+        fullWidth: true,
+        maximized: true
+      });
+    }
+
+    return {
+      pagination,
+      columns,
+      visibleColumns,
+      openSendDialog
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.balances-table {
+  background: transparent;
+
+  &::v-deep(.q-table) {
+    border-spacing: 0 6px;
+    padding-bottom: 20px;
+  }
+}
+
+.balances-table-head-col {
+  padding-top: 21px;
+  padding-bottom: 21px;
+  border: none;
+
+  &:first-of-type {
+    width: 60px;
+  }
+}
+
+.id-cell {
+  width: 60px;
+}
+
+.balances-table-row {
+  background: none;
+  backdrop-filter: blur(60px);
+
+  & .q-td {
+    background: $transparent-gray2;
+    border-bottom: none;
+    height: 60px;
+
+    &:first-child {
+      border-top-left-radius: 10px;
+      border-bottom-left-radius: 10px;
+    }
+
+    &:last-child {
+      border-top-right-radius: 10px;
+      border-bottom-right-radius: 10px;
+    }
+  }
+}
+
+.balance-name {
+  margin-left: 17px;
+  margin-right: 12px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box !important;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  white-space: normal;
+}
+
+.info-icon {
+  min-width: 13px;
+}
+</style>

src/components/ClaimDialog.vue

@@ -85,7 +85,7 @@
 
         <h3 class="text-body-extra-large text-white text-weight-medium q-mt-none q-mb-sm text-center">Error!</h3>
 
-        <p class="text-h4 text-half-transparent-white text-center">{{ error }}</p>
+        <p class="text-h4 text-half-transparent-white word-break-break-word text-center">{{ error }}</p>
       </div>
     </q-card>
   </q-dialog>

src/components/DelegationDialog.vue

@@ -179,7 +179,7 @@
 
         <h3 class="text-body-extra-large text-white text-weight-medium q-mt-none q-mb-sm text-center">Error!</h3>
 
-        <p class="text-h4 text-half-transparent-white text-center">{{ error }}</p>
+        <p class="text-h4 text-half-transparent-white text-center word-break-break-word">{{ error }}</p>
       </div>
     </q-card>
   </q-dialog>

src/components/DepositDialog.vue

@@ -87,7 +87,7 @@
 
         <h3 class="text-body-extra-large text-white text-weight-medium q-mt-none q-mb-sm text-center">Error!</h3>
 
-        <p class="text-h4 text-half-transparent-white text-center">{{ error }}</p>
+        <p class="text-h4 text-half-transparent-white text-center word-break-break-word">{{ error }}</p>
       </div>
     </q-card>
   </q-dialog>