Merge pull request #57 from capt-nemo429/hide-balances

Add 'Hide balance' feature
nautls · Sep 18, 2022 · 8a0a917 · 8a0a917
2 parents 9019385 + 372015d
commit 8a0a917
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 70 deletions.
diff --git a/src/components/AssetInfoModal.vue b/src/components/AssetInfoModal.vue
@@ -36,7 +36,10 @@
           </div>
           <div class="w-1/2">
             <small class="uppercase text-gray-500">Balance</small>
-            <p class="text-sm font-bold">{{ $filters.formatBigNumber(confirmedBalance) ?? 0 }}</p>
+            <p v-if="hideBalances" class="skeleton animate-none h-4.5 w-2/4 block rounded"></p>
+            <p v-else class="text-sm font-bold">
+              {{ $filters.formatBigNumber(confirmedBalance) ?? 0 }}
+            </p>
           </div>
         </div>
         <div class="flex flex-row gap-4">
@@ -106,6 +109,9 @@ export default defineComponent({
       }
 
       return this.asset.artworkUrl ?? this.asset.artworkCover;
+    },
+    hideBalances(): boolean {
+      return this.$store.state.settings.hideBalances;
     }
   },
   data() {

diff --git a/src/components/ToolTip.vue b/src/components/ToolTip.vue
@@ -2,7 +2,7 @@
   <span class="inline-flex group justify-center relative">
     <slot />
     <span
-      class="w-max rounded font-normal font-sans tracking-wide shadow-lg text-center text-xs my-1 w-auto opacity-0 py-2 px-3 transition-all ease-linear z-10 duration-150 absolute pointer-events-none group-hover:opacity-95"
+      class="w-max rounded select-none font-normal font-sans tracking-wide shadow-lg text-center text-xs my-1 w-auto opacity-0 py-2 px-3 transition-all ease-linear z-10 duration-150 absolute pointer-events-none group-hover:opacity-95"
       :class="customClass"
     >
       <slot name="label" v-if="$slots.label" />

diff --git a/src/constants/store/actions.ts b/src/constants/store/actions.ts
@@ -23,5 +23,6 @@ export enum ACTIONS {
   CHECK_PENDING_BOXES = "CHECK_PENDING_BOXES",
   LOAD_ASSETS_INFO = "LOAD_ASSETS_INFO",
   FETCH_FULL_ASSETS_INFO = "FETCH_FULL_ASSETS_INFO",
-  SIGN_EIP28_MESSAGE = "SIGN_EIP28_MESSAGE"
+  SIGN_EIP28_MESSAGE = "SIGN_EIP28_MESSAGE",
+  TOGGLE_HIDE_BALANCES = "TOGGLE_HIDE_BALANCES"
 }
diff --git a/src/main.ts b/src/main.ts
@@ -27,7 +27,9 @@ import {
   mdiWalletPlus,
   mdiWalletOutline,
   mdiBackupRestore,
-  mdiCheckAll
+  mdiCheckAll,
+  mdiEye,
+  mdiEyeOff
 } from "@mdi/js";
 import { hasBrowserContext } from "./utils/browserApi";
 
@@ -56,7 +58,9 @@ const mdiSettings = {
     mdiWalletPlus,
     mdiWalletOutline,
     mdiBackupRestore,
-    mdiCheckAll
+    mdiCheckAll,
+    mdiEye,
+    mdiEyeOff
   }
 };
 

diff --git a/src/store.ts b/src/store.ts
@@ -101,7 +101,8 @@ export default createStore({
       isKyaAccepted: false,
       conversionCurrency: "usd",
       devMode: !MAINNET,
-      graphQLServer: getDefaultServerUrl()
+      graphQLServer: getDefaultServerUrl(),
+      hideBalances: false
     },
     loading: {
       settings: true,
@@ -388,7 +389,9 @@ export default createStore({
       if (newSettings) {
         commit(MUTATIONS.SET_SETTINGS, newSettings);
       }
+
       localStorage.setItem("settings", JSON.stringify(state.settings));
+
       graphQLService.updateServerUrl(state.settings.graphQLServer);
       if (rpcHandler.connected) {
         rpcHandler.sendEvent("updated:graphql-url", state.settings.graphQLServer);
@@ -813,6 +816,9 @@ export default createStore({
     ) {
       await walletsDbService.updateUsedAddressFilter(command.walletId, command.filter);
       commit(MUTATIONS.SET_USED_ADDRESSES_FILTER, command);
+    },
+    async [ACTIONS.TOGGLE_HIDE_BALANCES]({ dispatch, state }) {
+      dispatch(ACTIONS.SAVE_SETTINGS, { hideBalances: !state.settings.hideBalances });
     }
   }
 });
diff --git a/src/views/AssetsView.vue b/src/views/AssetsView.vue
@@ -14,26 +14,41 @@
         <thead>
           <tr>
             <th colspan="2">Asset</th>
-            <th class="text-right">Balance</th>
+            <th>
+              <div class="flex-row justify-end flex gap-2 align-middle">
+                <tool-tip
+                  :label="hideBalances ? 'Show' : 'Hide'"
+                  tip-class="normal-case"
+                  class="align-middle"
+                >
+                  <a class="cursor-pointer inline-flex" @click="toggleHideBalance()">
+                    <mdi-icon :name="hideBalances ? 'eye-off' : 'eye'" size="16" />
+                  </a>
+                </tool-tip>
+                Balance
+              </div>
+            </th>
           </tr>
         </thead>
         <tbody>
-          <tr v-if="loading" v-for="i in prevCount" :key="i">
-            <td class="w-14 align-middle">
-              <empty-logo class="h-8 w-8 animate-pulse fill-gray-300" />
-            </td>
-            <td class="align-middle">
-              <div class="skeleton h-3 w-2/3 rounded"></div>
-            </td>
-            <td class="text-right w-50 align-middle">
-              <div class="skeleton h-3 w-3/5 rounded"></div>
-              <template v-if="i === 1">
-                <br />
-                <div class="skeleton h-3 w-2/5 rounded"></div>
-              </template>
-            </td>
-          </tr>
-          <tr v-else v-for="asset in assets" :key="asset.tokenId">
+          <template v-if="loading">
+            <tr v-for="i in prevCount" :key="i">
+              <td class="w-14 align-middle">
+                <empty-logo class="h-8 w-8 animate-pulse fill-gray-300" />
+              </td>
+              <td class="align-middle">
+                <div class="skeleton h-3 w-2/3 rounded"></div>
+              </td>
+              <td class="text-right w-50 align-middle">
+                <div class="skeleton h-3 w-3/5 rounded"></div>
+                <template v-if="i === 1">
+                  <br />
+                  <div class="skeleton h-3 w-2/5 rounded"></div>
+                </template>
+              </td>
+            </tr>
+          </template>
+          <tr v-else v-for="asset in assets" :key="asset.tokenId" class="h-19">
             <td class="w-14 min-w-14 align-middle">
               <asset-icon
                 class="h-8 w-8 align-middle"
@@ -53,27 +68,33 @@
               </a>
             </td>
             <td class="text-right align-middle whitespace-nowrap">
-              <p>
-                {{ $filters.formatBigNumber(asset.confirmedAmount) }}
-              </p>
-              <tool-tip
-                v-if="!asset.confirmedAmount.isZero() && ergPrice && rate(asset.tokenId)"
-                :label="`1 ${asset.info?.name} <br /> ≈ ${$filters.formatBigNumber(
-                  price(asset.tokenId),
-                  2
-                )} ${$filters.uppercase(conversionCurrency)}`"
-              >
-                <p class="text-xs text-gray-500">
-                  ≈
-                  {{
-                    $filters.formatBigNumber(
-                      asset.confirmedAmount.multipliedBy(price(asset.tokenId)),
-                      2
-                    )
-                  }}
-                  {{ $filters.uppercase(conversionCurrency) }}
+              <div v-if="hideBalances" class="flex flex-col gap-1 items-end">
+                <div class="skeleton animate-none h-4.5 w-full rounded"></div>
+                <div class="skeleton animate-none h-3 w-3/4 rounded"></div>
+              </div>
+              <template v-else>
+                <p>
+                  {{ $filters.formatBigNumber(asset.confirmedAmount) }}
                 </p>
-              </tool-tip>
+                <tool-tip
+                  v-if="!asset.confirmedAmount.isZero() && ergPrice && rate(asset.tokenId)"
+                  :label="`1 ${asset.info?.name} <br /> ≈ ${$filters.formatBigNumber(
+                    price(asset.tokenId),
+                    2
+                  )} ${$filters.uppercase(conversionCurrency)}`"
+                >
+                  <p class="text-xs text-gray-500">
+                    ≈
+                    {{
+                      $filters.formatBigNumber(
+                        asset.confirmedAmount.multipliedBy(price(asset.tokenId)),
+                        2
+                      )
+                    }}
+                    {{ $filters.uppercase(conversionCurrency) }}
+                  </p>
+                </tool-tip>
+              </template>
             </td>
           </tr>
         </tbody>
@@ -95,6 +116,7 @@ import { StateAsset } from "@/types/internal";
 import BigNumber from "bignumber.js";
 import EmptyLogo from "@/assets/images/tokens/asset-nft-picture.svg";
 import AssetInfoModal from "@/components/AssetInfoModal.vue";
+import { ACTIONS } from "@/constants/store";
 
 export default defineComponent({
   name: "AssetsView",
@@ -131,6 +153,9 @@ export default defineComponent({
       }
 
       return assetList;
+    },
+    hideBalances(): boolean {
+      return this.$store.state.settings.hideBalances;
     }
   },
   watch: {
@@ -162,6 +187,9 @@ export default defineComponent({
     },
     isErg(tokenId: string): boolean {
       return tokenId === ERG_TOKEN_ID;
+    },
+    toggleHideBalance(): void {
+      this.$store.dispatch(ACTIONS.TOGGLE_HIDE_BALANCES);
     }
   }
 });

diff --git a/src/views/ReceiveView.vue b/src/views/ReceiveView.vue
@@ -49,35 +49,47 @@
         <thead>
           <tr>
             <th>
-              Address ({{ addresses.length
-              }}<template v-if="hideUsed">/{{ stateAddresses.length }}</template
-              >)
-              <tool-tip
-                :label="hideUsed ? 'Show all addresses' : 'Hide empty used addresses'"
-                tip-class="normal-case"
-                class="pl-1"
-              >
-                <a class="cursor-pointer" @click="updateUsedAddressesFilter()">
-                  <mdi-icon
-                    class="align-middle"
-                    :name="hideUsed ? 'filter-off' : 'filter'"
-                    size="16"
-                  />
-                </a>
-              </tool-tip>
+              <div class="flex-row justify-start flex gap-2 align-middle">
+                Address ({{ addresses.length
+                }}<template v-if="hideUsed">/{{ stateAddresses.length }}</template
+                >)
+                <tool-tip
+                  :label="hideUsed ? 'Show all addresses' : 'Hide empty used addresses'"
+                  tip-class="normal-case"
+                >
+                  <a class="cursor-pointer inline-flex" @click="updateUsedAddressesFilter()">
+                    <mdi-icon :name="hideUsed ? 'filter-off' : 'filter'" size="16" />
+                  </a>
+                </tool-tip>
+              </div>
+            </th>
+            <th>
+              <div class="flex-row justify-end flex gap-2 align-middle">
+                <tool-tip
+                  :label="hideBalances ? 'Show' : 'Hide'"
+                  tip-class="normal-case"
+                  class="align-middle"
+                >
+                  <a class="cursor-pointer inline-flex" @click="toggleHideBalance()">
+                    <mdi-icon :name="hideBalances ? 'eye-off' : 'eye'" size="16" />
+                  </a>
+                </tool-tip>
+                Balance
+              </div>
             </th>
-            <th class="text-right">Balance</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-if="loading" v-for="i in prevCount" :key="i">
-            <td>
-              <div class="skeleton inline-block h-3 w-2/3 rounded"></div>
-            </td>
-            <td class="text-right">
-              <div class="skeleton inline-block h-3 w-1/3 rounded"></div>
-            </td>
-          </tr>
+          <template v-if="loading">
+            <tr v-for="i in prevCount" :key="i">
+              <td>
+                <div class="skeleton inline-block h-3 w-2/3 rounded"></div>
+              </td>
+              <td class="text-right">
+                <div class="skeleton inline-block h-3 w-1/3 rounded"></div>
+              </td>
+            </tr>
+          </template>
           <tr v-else v-for="address in addresses.slice().reverse()" :key="address.script">
             <td class="font-mono" :class="{ 'text-gray-400': isUsed(address) }">
               <a :href="urlFor(address.script)" target="_blank">{{
@@ -109,8 +121,14 @@
               </div>
             </td>
             <td class="text-right">
-              <span class="float-left">Σ</span>
-              <span> {{ ergBalanceFor(address) }}</span>
+              <div
+                v-if="hideBalances"
+                class="skeleton animate-none h-4.5 w-2/4 rounded align-middle"
+              ></div>
+              <template v-else>
+                <span class="float-left">Σ</span>
+                <span> {{ ergBalanceFor(address) }}</span>
+              </template>
             </td>
           </tr>
         </tbody>
@@ -174,6 +192,9 @@ export default defineComponent({
       return this.avoidingReuse
         ? last(this.addresses)?.script
         : find(this.addresses, (a) => a.index === settings.defaultChangeIndex)?.script;
+    },
+    hideBalances(): boolean {
+      return this.$store.state.settings.hideBalances;
     }
   },
   watch: {
@@ -239,6 +260,9 @@ export default defineComponent({
     },
     urlFor(address: string | undefined): string {
       return `${ADDRESS_URL}${address}`;
+    },
+    toggleHideBalance(): void {
+      this.$store.dispatch(ACTIONS.TOGGLE_HIDE_BALANCES);
     }
   },
   components: { MdiIcon }