Update the icon for eth/one switch

harmony-one · Jan 28, 2021 · b9ab85c · b9ab85c
1 parent 738f1bd
commit b9ab85c
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "@ledgerhq/hw-transport-webusb": "4.74.1",
     "@vue/babel-preset-app": "^4.4.1",
     "aes-js": "^3.1.2",
-    "axios": "^0.20.0",
+    "axios": "^0.21.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",

diff --git a/src/popup/pages/Account.vue b/src/popup/pages/Account.vue
@@ -8,7 +8,13 @@
     <main class="main">
       <div class="relative">
         <div class="main-logo">
-          <img src="images/harmony-big.png" class="logo-img" alt="Harmony" />
+          <img
+            :src="
+              displayMode ? 'images/ethereum.svg' : 'images/harmony-big.png'
+            "
+            class="logo-img"
+            alt="Harmony"
+          />
         </div>
         <span
           v-if="wallets.active.isLedger"
@@ -17,13 +23,38 @@
         >
       </div>
       <div class="container">
-        <div
-          class="account-box"
-          @click="onClickAccount()"
-          v-tooltip.top="'Click to copy'"
-        >
-          <h2 class="name-label">{{ compressName(wallets.active.name) }}</h2>
-          <div class="box-address">{{ compressAddress(address, 20, 5) }}</div>
+        <div class="account-container">
+          <div
+            class="account-box"
+            @click="onClickAccount()"
+            v-tooltip.top="'Click to copy'"
+          >
+            <h2 class="name-label">{{ compressName(wallets.active.name) }}</h2>
+            <div class="box-address">
+              {{
+                compressAddress(
+                  displayMode ? switchToHexAddress(this.address) : this.address,
+                  20,
+                  5
+                )
+              }}
+            </div>
+          </div>
+          <div
+            class="switch-box"
+            @click="switchAddress"
+            v-tooltip.top="
+              displayMode
+                ? 'Switch to ONE Address'
+                : 'Switch to Ethereum Address'
+            "
+          >
+            <img
+              :src="!displayMode ? 'images/ethereum.svg' : 'images/harmony.png'"
+              height="20px"
+              alt="Harmony"
+            />
+          </div>
         </div>
 
         <div class="box-label">Account Balance</div>
@@ -101,7 +132,7 @@ import account from "mixins/account";
 import MainTab from "components/MainTab.vue";
 import { mapState } from "vuex";
 import BigNumber from "bignumber.js";
-
+import { oneToHexAddress } from "services/Hrc20Service";
 import axios from "axios";
 
 export default {
@@ -113,11 +144,15 @@ export default {
 
   data: () => ({
     shard: 0,
+    switchToHexAddress: oneToHexAddress,
     tokenPrice: null,
   }),
 
   computed: {
-    ...mapState(["wallets"]),
+    ...mapState({
+      wallets: (state) => state.wallets,
+      displayMode: (state) => state.settings.displayMode,
+    }),
     getUSDBalance() {
       return new BigNumber(this.account.balance)
         .multipliedBy(this.tokenPrice["one"])
@@ -149,6 +184,9 @@ export default {
   },
 
   methods: {
+    switchAddress() {
+      this.$store.commit("settings/setDisplayMode", 1 - this.displayMode);
+    },
     async fetchTokenPrice() {
       const {
         data: {
@@ -167,7 +205,9 @@ export default {
       else this.$router.push("/send");
     },
     onClickAccount() {
-      this.$copyText(this.address).then(() => {
+      this.$copyText(
+        this.displayMode ? oneToHexAddress(this.address) : this.address
+      ).then(() => {
         this.$notify({
           group: "copied",
           type: "info",
@@ -185,7 +225,7 @@ export default {
   },
 };
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .shard-box {
   display: flex;
   flex-direction: row;
@@ -201,12 +241,23 @@ export default {
 .name-label {
   margin: 0.5rem;
 }
-.account-box {
-  border-radius: 10px;
-  padding: 0.5rem;
-  margin: 0 3rem 0.5rem 3rem;
-  word-wrap: break-word;
-  transition: box-shadow 0.5s ease;
+.account-container {
+  position: relative;
+  .account-box {
+    border-radius: 10px;
+    padding: 0.5rem;
+    margin: 0 3rem 0.5rem 3rem;
+    word-wrap: break-word;
+    transition: box-shadow 0.5s ease;
+  }
+  .switch-box {
+    position: absolute;
+    right: 15px;
+    bottom: 10px;
+    width: 20px;
+    align-items: center;
+    cursor: pointer;
+  }
 }
 .account-box:hover {
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

diff --git a/src/popup/pages/Token/HRC721/Gallery.vue b/src/popup/pages/Token/HRC721/Gallery.vue
@@ -121,10 +121,17 @@ export default {
           address.substr(address.length - 30, address.length)
         );
     },
+    IsValidJson(str) {
+      try {
+        JSON.parse(str);
+      } catch (e) {
+        return false;
+      }
+      return true;
+    },
     async refreshData() {
       try {
         this.$store.commit("loading", true);
-
         this.contractAddress = this.$route.params.address;
         const bnBalance = await getTokenBalance(
           this.address,
@@ -161,34 +168,32 @@ export default {
               );
               if (uri) {
                 const response = await fetch(uri, { mode: "cors" });
-                const {
-                  image,
-                  name,
-                  description,
-                  attributes,
-                } = await response.json();
-                Vue.set(this.nfts, index, {
-                  uri: true,
-                  image,
-                  name,
-                  description,
-                  attributes,
-                  loading: false,
-                });
-              } else {
-                if (id) {
+                const jsonResponse = await response.json();
+                if (this.IsValidJson(jsonResponse)) {
+                  const { image, name, description, attributes } = jsonResponse;
                   Vue.set(this.nfts, index, {
-                    id: new BigNumber(id).toString(),
-                    uri: false,
-                    loading: false,
-                  });
-                } else {
-                  Vue.set(this.nfts, index, {
-                    uri: false,
+                    uri: true,
+                    image,
+                    name,
+                    description,
+                    attributes,
                     loading: false,
                   });
+                  return;
                 }
               }
+              if (id) {
+                Vue.set(this.nfts, index, {
+                  id: new BigNumber(id).toString(),
+                  uri: false,
+                  loading: false,
+                });
+              } else {
+                Vue.set(this.nfts, index, {
+                  uri: false,
+                  loading: false,
+                });
+              }
             } catch (error) {
               console.error(error);
               this.$notify({

diff --git a/src/popup/store/modules/settings.js b/src/popup/store/modules/settings.js
@@ -17,6 +17,7 @@ export default {
       countdown: 60, //sec, delay 1min when auth fails
     },
     hideLowBalance: false,
+    displayMode: 0,
     contacts: [],
   },
   mutations: {
@@ -29,6 +30,9 @@ export default {
     setPindigits(state, payload) {
       state.auth.pindigits = payload;
     },
+    setDisplayMode(state, payload) {
+      state.displayMode = payload;
+    },
     setLockState(state, payload) {
       state.auth.lockState = { ...payload };
     },

diff --git a/static/images/ethereum.svg b/static/images/ethereum.svg