Merge pull request #121 from enkryptcom/ui/bug-fix-1.0.0

UI/bug fix 1.0.0
enkryptcom · Aug 16, 2022 · 4be6131 · 4be6131 · github-actions · Aug 16, 2022
2 parents b680317 + e2c2a10
commit 4be6131
Show file tree

Hide file tree

Showing 54 changed files with 404 additions and 278 deletions.
diff --git a/packages/extension/src/providers/ethereum/ui/eth-connect-dapp.vue b/packages/extension/src/providers/ethereum/ui/eth-connect-dapp.vue
@@ -9,14 +9,13 @@
     </template>
 
     <template #content>
-      <h2>Connect to {{ Options.title }}</h2>
+      <h2>Connect with Enkrypt</h2>
 
       <div class="common-popup__block no-inset">
         <div class="common-popup__account">
           <img :src="Options.faviconURL" />
           <div class="common-popup__account-info">
-            <h4>{{ Options.title }}</h4>
-            <p>{{ Options.domain }}</p>
+            <h4>{{ Options.domain }}</h4>
           </div>
         </div>
       </div>

diff --git a/packages/extension/src/providers/ethereum/ui/eth-decrypt.vue b/packages/extension/src/providers/ethereum/ui/eth-decrypt.vue
@@ -22,8 +22,7 @@
         <div class="common-popup__info">
           <img :src="Options.faviconURL" />
           <div class="common-popup__info-info">
-            <h4>{{ Options.title }}</h4>
-            <p>{{ Options.domain }}</p>
+            <h4>{{ Options.domain }}</h4>
           </div>
         </div>
 

diff --git a/packages/extension/src/providers/ethereum/ui/eth-get-encryption-key.vue b/packages/extension/src/providers/ethereum/ui/eth-get-encryption-key.vue
@@ -22,8 +22,7 @@
         <div class="common-popup__info">
           <img :src="Options.faviconURL" />
           <div class="common-popup__info-info">
-            <h4>{{ Options.title }}</h4>
-            <p>{{ Options.domain }}</p>
+            <h4>{{ Options.domain }}</h4>
           </div>
         </div>
 

diff --git a/packages/extension/src/providers/ethereum/ui/eth-sign-message.vue b/packages/extension/src/providers/ethereum/ui/eth-sign-message.vue
@@ -22,8 +22,7 @@
         <div class="common-popup__info">
           <img :src="Options.faviconURL" />
           <div class="common-popup__info-info">
-            <h4>{{ Options.title }}</h4>
-            <p>{{ Options.domain }}</p>
+            <h4>{{ Options.domain }}</h4>
           </div>
         </div>
 

diff --git a/packages/extension/src/providers/ethereum/ui/eth-sign-typedata.vue b/packages/extension/src/providers/ethereum/ui/eth-sign-typedata.vue
@@ -22,8 +22,7 @@
         <div class="common-popup__info">
           <img :src="Options.faviconURL" />
           <div class="common-popup__info-info">
-            <h4>{{ Options.title }}</h4>
-            <p>{{ Options.domain }}</p>
+            <h4>{{ Options.domain }}</h4>
           </div>
         </div>
 

diff --git a/packages/extension/src/providers/ethereum/ui/eth-verify-transaction.vue b/packages/extension/src/providers/ethereum/ui/eth-verify-transaction.vue
@@ -36,8 +36,7 @@
         <div class="provider-verify-transaction__info">
           <img :src="Options.faviconURL" />
           <div class="provider-verify-transaction__info-info">
-            <h4>{{ Options.title }}</h4>
-            <p>{{ Options.domain }}</p>
+            <h4>{{ Options.domain }}</h4>
           </div>
         </div>
 
@@ -82,8 +81,6 @@
         @open-popup="toggleSelectFee"
       />
 
-      <!-- <best-offer-error :not-enough-verify="true"></best-offer-error> -->
-
       <div class="provider-verify-transaction__data">
         <a
           class="provider-verify-transaction__data-link"

diff --git a/...ges/extension/src/providers/ethereum/ui/send-transaction/components/send-input-amount.vue b/...ges/extension/src/providers/ethereum/ui/send-transaction/components/send-input-amount.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="send-input-amount" :class="{ focus: isFocus }">
     <input
+      ref="inputRef"
       v-model="amount"
       type="number"
-      placeholder="0.0"
+      placeholder="0"
       :style="{ color: !hasEnoughBalance ? 'red' : 'black' }"
       @focus="changeFocus"
       @blur="changeFocus"
@@ -14,14 +15,14 @@
       <span>${{ $filters.formatFiatValue(fiatEquivalent).value }}</span>
     </div>
 
-    <a class="send-input-amount__max" @click="emit('update:inputSetMax')"
-      >Max</a
-    >
+    <a class="send-input-amount__max" @click="emit('update:inputSetMax')">
+      Max
+    </a>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, ComponentPublicInstance } from "vue";
 import SwitchArrowIcon from "@action/icons/send/switch-arrow-icon.vue";
 import BigNumber from "bignumber.js";
 
@@ -31,6 +32,9 @@ const emit = defineEmits<{
 }>();
 
 const isFocus = ref(false);
+const inputRef = ref<ComponentPublicInstance<HTMLInputElement>>();
+
+defineExpose({ inputRef });
 
 const props = defineProps({
   hasEnoughBalance: {
@@ -51,7 +55,9 @@ const fiatEquivalent = computed(() => {
 });
 const amount = computed({
   get: () => props.amount,
-  set: (value) => emit("update:inputAmount", value.toString()),
+  set: (value) => {
+    emit("update:inputAmount", value.toString());
+  },
 });
 
 const changeFocus = () => {

diff --git a/packages/extension/src/providers/ethereum/ui/styles/common-popup.less b/packages/extension/src/providers/ethereum/ui/styles/common-popup.less
@@ -9,7 +9,7 @@
     }
 
     &__content {
-        height: calc(~"100% - 52px");
+        height: calc(~"100% - 55px");
         box-sizing: border-box;
         display: flex;
         flex-direction: row;
@@ -56,6 +56,7 @@
         letter-spacing: 0.25px;
         color: @primaryLabel;
         margin: 0 0 16px 0;
+        word-break: break-all;
     }
 
     &__block {
@@ -65,7 +66,7 @@
         border-radius: 12px;
         padding: 10px 16px;
         width: 100%;
-        margin: 0 0 16px 0;
+        margin: 0 0 12px 0;
 
         &.no-inset {
             margin: 0;
@@ -112,6 +113,7 @@
                 letter-spacing: 0.25px;
                 color: @primaryLabel;
                 margin: 0;
+                word-break: break-all;
             }
 
             p {

diff --git a/packages/extension/src/providers/ethereum/ui/styles/verify-transaction.less b/packages/extension/src/providers/ethereum/ui/styles/verify-transaction.less
@@ -41,6 +41,7 @@
     letter-spacing: 0.25px;
     color: @primaryLabel;
     margin: 0 0 16px 0;
+    word-break: break-all;
   }
   &__block {
     background: @lightBg;
@@ -73,6 +74,7 @@
         line-height: 32px;
         color: @primaryLabel;
         margin: 0;
+        word-break: break-all;
 
         span {
           font-variant: small-caps;
@@ -115,6 +117,7 @@
         letter-spacing: 0.25px;
         color: @primaryLabel;
         margin: 0;
+        word-break: break-all;
       }
 
       h6 {
@@ -125,6 +128,7 @@
         letter-spacing: 0.5px;
         color: @secondaryLabel;
         margin: 0;
+        word-break: break-all;
       }
 
       div {
@@ -219,6 +223,7 @@
         letter-spacing: 0.25px;
         color: @primaryLabel;
         margin: 0;
+        word-break: break-all;
       }
 
       p {
@@ -230,6 +235,7 @@
         color: @tertiaryLabel;
         margin: 0;
         word-break: break-all;
+        word-break: break-all;
       }
     }
   }
@@ -251,6 +257,7 @@
       line-height: 16px;
       letter-spacing: 0.8px;
       color: @primaryLabel;
+      word-break: break-all;
 
       &:hover {
         background: rgba(0, 0, 0, 0.04);
@@ -296,6 +303,7 @@
       line-height: 16px;          
       letter-spacing: 0.5px;
       color: @secondaryLabel;
+      word-break: break-all;
 
       p {
         font-family: 'SF Mono', 'Segoe UI Mono', 'Menlo', 'Consolas';
@@ -306,6 +314,7 @@
         letter-spacing: 0.5px;
         color: @secondaryLabel;
         margin: 0;
+        word-break: break-all;
 
         a {
           color: @secondaryLabel;

diff --git a/packages/extension/src/providers/polkadot/ui/dot-accounts.vue b/packages/extension/src/providers/polkadot/ui/dot-accounts.vue
@@ -9,14 +9,13 @@
     </template>
 
     <template #content>
-      <h2>Connect to {{ Options.title }}</h2>
+      <h2>Connect with Enkrypt</h2>
 
       <div class="common-popup__block no-inset">
         <div class="common-popup__account">
           <img :src="Options.faviconURL" />
           <div class="common-popup__account-info">
-            <h4>{{ Options.title }}</h4>
-            <p>{{ Options.domain }}</p>
+            <h4>{{ Options.domain }}</h4>
           </div>
         </div>
       </div>
@@ -25,6 +24,15 @@
         <link-icon />
       </div>
 
+      <div class="common-popup__block no-inset">
+        <div class="common-popup__account">
+          <img :src="require('@/ui/action/icons/raw/account.png')" />
+          <div class="common-popup__account-info">
+            <h4>All accounts</h4>
+          </div>
+        </div>
+      </div>
+
       <div class="provider-connect-dapp__info">
         <info-icon-gray />
         <p>

diff --git a/packages/extension/src/providers/polkadot/ui/dot-approvetx.vue b/packages/extension/src/providers/polkadot/ui/dot-approvetx.vue
diff --git a/packages/extension/src/providers/polkadot/ui/dot-sign-message.vue b/packages/extension/src/providers/polkadot/ui/dot-sign-message.vue
@@ -22,8 +22,7 @@
         <div class="common-popup__info">
           <img :src="Options.faviconURL" />
           <div class="common-popup__info-info">
-            <h4>{{ Options.title }}</h4>
-            <p>{{ Options.domain }}</p>
+            <h4>{{ Options.domain }}</h4>
           </div>
         </div>
 

diff --git a/packages/extension/src/providers/polkadot/ui/dot-update-metadata.vue b/packages/extension/src/providers/polkadot/ui/dot-update-metadata.vue
@@ -4,11 +4,16 @@
       <sign-logo
         :color="metadata ? metadata.color : '#E6007A'"
         class="common-popup__logo"
-      />
+      ></sign-logo>
+      <div class="common-popup__network">
+        <img :src="networks.polkadot.icon" />
+        <p>{{ metadata ? metadata.chain : networks.polkadot.name_long }}</p>
+      </div>
     </template>
 
     <template #content>
       <h2>Update metadata</h2>
+
       <div class="update-metadata__block">
         <div class="update-metadata__block-row">
           <div class="update-metadata__block-row-left">From</div>
@@ -73,6 +78,7 @@ import { onBeforeMount, ref, watch } from "vue";
 import { MetadataDef } from "@polkadot/extension-inject/types";
 import MetadataStorage from "@/providers/polkadot/libs/metadata-storage";
 import { ProviderRequestOptions } from "@/types/provider";
+import networks from "../networks";
 
 const windowPromise = WindowPromiseHandler(0);
 

diff --git a/packages/extension/src/providers/polkadot/ui/routes/index.ts b/packages/extension/src/providers/polkadot/ui/routes/index.ts
@@ -1,5 +1,4 @@
 import dotAccounts from "../dot-accounts.vue";
-//import dotTxApprove from "../dot-approvetx.vue";
 import dotSignMessage from "../dot-sign-message.vue";
 import dotUpdateMetadata from "../dot-update-metadata.vue";
 import dotVerifyTransaction from "../dot-verify-transaction.vue";
@@ -11,7 +10,6 @@ routes.dotAccounts.component = dotAccounts;
 routes.dotTxApprove.component = dotVerifyTransaction;
 routes.dotSignMessage.component = dotSignMessage;
 routes.dotUpdateMetadata.component = dotUpdateMetadata;
-routes.dotVerifyTransaction.component = dotVerifyTransaction;
 routes.dotHWVerify.component = dotHWVerify;
 export default (namespace: string): RouteRecordRaw[] => {
   return Object.values(routes).map((route) => {

diff --git a/packages/extension/src/providers/polkadot/ui/routes/names.ts b/packages/extension/src/providers/polkadot/ui/routes/names.ts
@@ -19,11 +19,6 @@ export default {
     component: {},
     name: "dotUpdateMetadata",
   },
-  dotVerifyTransaction: {
-    path: "dot-verify-transaction",
-    component: {},
-    name: "dotVerifyTransaction",
-  },
   dotHWVerify: {
     path: "dot-hw-verify",
     name: "dotHWVerify",