Merge pull request #12 from liquality/feature-unlock-ui-changes

Feature unlock UI changes
liquality · Dec 7, 2020 · ccb323b · ccb323b
2 parents a072f7f + e07d311
commit ccb323b
Show file tree

Hide file tree

Showing 15 changed files with 89 additions and 51 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "liquality-wallet",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "private": true,
   "license": "MIT",
   "author": "Liquality <[email protected]>",

diff --git a/src/assets/scss/_overrides.scss b/src/assets/scss/_overrides.scss
@@ -12,7 +12,7 @@ $color-text-primary: #1D1E21;
 $color-text-secondary: #FFFFFF;
 $color-text-muted: #747E8D;
 
-$font-size-base:              0.875rem; // Assumes the browse, typically `16px`
+$font-size-base:              0.75rem; // Assumes the browse, typically `16px`
 $font-size-lg:                1rem;
 $font-size-sm:                0.8125rem;
 $font-size-tiny:              0.75rem;

diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
@@ -47,14 +47,25 @@ textarea {
 
 .login-wrapper {
   display: flex;
-
   flex: 1;
-  justify-content: space-between;
   text-align: center;
   padding: 70px $wrapper-padding 0 $wrapper-padding;
   flex-direction: column;
   background: $brand-gradient-secondary;
   color: $color-text-secondary;
+  height: 600px;
+
+  .login-footer {
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: column; 
+    flex: 1;
+    padding-bottom: 1.25rem;
+    .footer-content {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
 
   .form input {
     color: $color-text-secondary;
@@ -75,7 +86,7 @@ textarea {
 }
 
 .login-header {
-  padding-bottom: 40px;
+  padding-bottom: 50px;
 
   svg {
     height: 75px;
@@ -370,4 +381,19 @@ textarea {
 
 .icon-btn {
   cursor: pointer;
+}
+
+svg.copy-icon {
+  cursor: pointer;
+  width: 12px;
+  margin-left: 4px;
+}
+
+svg.qr-icon {
+  cursor: pointer;
+  width: 21px;
+}
+
+.btn-footer {
+ width: 9.5rem;
 }
diff --git a/src/components/DetailsContainer.vue b/src/components/DetailsContainer.vue
@@ -42,8 +42,8 @@ export default {
     align-items: center;
     flex-wrap: wrap;
     align-content: space-between;
-    font-size: $font-size-sm;
-    line-height: $font-size-sm;
+    font-size: $font-size-tiny;
+    line-height: $font-size-tiny;
 
     svg {
       height: 5px;
@@ -63,6 +63,7 @@ export default {
 
   .details-content {
     padding: 0;
+    font-size: $font-size-tiny;
     ul {
     list-style-type: none;
     background: #ffffff;

diff --git a/src/components/FeeSelector.vue b/src/components/FeeSelector.vue
@@ -21,15 +21,15 @@ export default {
     getTooltip (name) {
       let content = '<div class="text-right">'
       if (this.fees[name].wait) {
-        content += `${this.fees[name].wait} sec`
+        content += `${this.fees[name].wait} sec<br />`
       }
 
       if (this.txTypes) {
         const total = this.txTypes.reduce((accum, tx) => {
           return accum.plus(getTxFee(this.asset, tx, this.fees[name].fee))
         }, BN(0))
         const totalFiat = prettyFiatBalance(total, this.fiatRates[this.asset])
-        content += `<br />${total} ${this.asset}`
+        content += `${total} ${this.asset}`
         content += `<br />${totalFiat} USD`
       }
 

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -4,7 +4,7 @@
       <router-link v-if="showBack" class="navbar_prev" v-bind:to="backPath">
         <div><ChevronLeftIcon class="navbar_prev_icon" />{{ backLabel }}</div>
       </router-link>
-      <a v-if="showBackButton" class="navbar_prev" href="" @click="backClick">
+      <a v-else-if="showBackButton" class="navbar_prev" href="#" @click="backClick">
         <div><ChevronLeftIcon class="navbar_prev_icon" />{{ backLabel }}</div>
       </a>
       <div class="navbar_title">

diff --git a/src/manifest.json b/src/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "0.8.6",
+  "version": "0.8.7",
   "name": "Liquality Wallet",
   "description": "Secure multi-crypto wallet with built-in Atomic Swaps!",
   "homepage_url": "https://liquality.io",

diff --git a/src/views/ImportWallet.vue b/src/views/ImportWallet.vue
@@ -12,8 +12,12 @@
       <form class="form import-wallet_seed" autocomplete="off">
         <div v-for="(e, n) in numWords" :key="n"><input type="text" class="form-control form-control-sm" v-model="wordList[n]" autocomplete="off" required /></div>
       </form>
-      <p><button class="btn btn-primary btn-lg btn-block" :disabled="disableNext" @click="next">Continue</button></p>
-      <p><button class="btn btn-light btn-outline-primary btn-lg btn-block btn-icon" @click="$router.go(-1)">Cancel</button></p>
+    </div>
+    <div class="login-footer bg-white">
+        <div class="footer-content">
+          <button class="btn btn-light btn-outline-primary btn-lg btn-footer btn-icon" @click="$router.go(-1)">Cancel</button>
+          <button class="btn btn-primary btn-lg btn-footer" :disabled="disableNext" @click="next">Continue</button>
+        </div>
     </div>
   </div>
 </template>

diff --git a/src/views/Onboarding/OnboardingPassword.vue b/src/views/Onboarding/OnboardingPassword.vue
@@ -21,14 +21,16 @@
         <small v-show="passwordMatch" class="form-text hidden" >Passwords don't match.</small>
         <small class="form-text">Password must be at least 8 characters.</small>
       </div>
-      <p>
-        <button class="btn btn-primary btn-lg btn-block btn-icon" :disabled="loading || disableNext" @click="next">
+    </form>
+    <div class="login-footer">
+      <div class="footer-content">
+        <button class="btn btn-light btn-lg btn-footer btn-icon" @click="$router.go(-1)">Cancel</button>
+        <button class="btn btn-primary btn-lg btn-footer btn-icon" :disabled="loading || disableNext" @click="next">
           <SpinnerIcon class="btn-loading" v-if="loading" />
           <template v-else>Continue</template>
         </button>
-      </p>
-      <p><button class="btn btn-light btn-lg btn-block btn-icon" @click="$router.go(-1)">Cancel</button></p>
-    </form>
+      </div>
+    </div>
   </div>
 </template>
 

diff --git a/src/views/Receive.vue b/src/views/Receive.vue
@@ -8,7 +8,16 @@
         <div class="form-group">
           <div class="receive_asset"><img :src="getAssetIcon(asset)" class="asset-icon" /></div>
           <label>Your Current {{chainName}} Address</label>
-          <p class="receive_address">{{address}}</p>
+          <p class="receive_address">{{address}}
+            <CopyIcon
+                  class="copy-icon"
+                  @click="copy"
+                  v-tooltip.bottom="{
+                    content: copied ? 'Copied!' : 'Copy',
+                    hideOnTargetClick: false,
+                  }"
+                />
+          </p>
           <p class="receive_message">Scan this QR code with a mobile wallet to send funds to this address.</p>
           <div v-if="qrcode" v-html="qrcode" class="receive_qr"></div>
         </div>
@@ -30,7 +39,7 @@
 <script>
 import { mapActions, mapState } from 'vuex'
 import QRCode from 'qrcode'
-import { getChainFromAsset, getAssetIcon } from '@/utils/asset'
+import { getAssetIcon } from '@/utils/asset'
 import NavBar from '@/components/NavBar'
 import CopyIcon from '@/assets/icons/copy.svg'
 import TickIcon from '@/assets/icons/tick.svg'
@@ -58,12 +67,13 @@ export default {
       return address && cryptoassets[this.asset].formatAddress(address)
     },
     chainName () {
-      const chain = getChainFromAsset(this.asset)
       return ({
         BTC: 'bitcoin',
         ETH: 'ethereum',
-        RBTC: 'ethereum'
-      })[chain]
+        RBTC: 'rbtc/rsk',
+        DAI: 'dai/ethereum',
+        UNI: 'uni/ethereum'
+      })[this.asset]
     }
 
   },
@@ -109,7 +119,8 @@ export default {
     width: 196px;
   }
   &_address {
-    font-size: $font-size-sm;
+    font-size: $font-size-tiny;
+    font-weight: lighter;
   }
 }
 </style>
diff --git a/src/views/Send.vue b/src/views/Send.vue
@@ -155,7 +155,7 @@
           </label>
           <div class="d-flex align-items-center justify-content-between mt-0">
             <div>
-            {{ totalFee }} {{ feeType }}
+            ~{{ totalFee }} {{ feeType }}
           </div>
           <div class="details-text">${{ totalFeeInFiat }}</div>
           </div>

diff --git a/src/views/Swap.vue b/src/views/Swap.vue
@@ -167,8 +167,10 @@
               <span class="details-title">Network Speed/Fee</span>
               <span class="text-muted">
                 {{ assetChain }}
-                {{ getSelectedFeeLabel(selectedFee[assetChain]) }} /
-                {{ toAssetChain }}
+                {{ getSelectedFeeLabel(selectedFee[assetChain]) }}
+              </span>
+              <span class="text-muted" v-if="assetChain != toAssetChain">
+                /{{ toAssetChain }}
                 {{ getSelectedFeeLabel(selectedFee[toAssetChain]) }}
               </span>
             </template>
@@ -224,7 +226,7 @@
           <div class="detail-group">
             <label class="text-muted"> Network Fee </label>
             <div class="d-flex align-items-center justify-content-between mt-0">
-              <div>{{ totalFees[assetChain] }} {{ sendFeeType }}</div>
+              <div>~{{ totalFees[assetChain] }} {{ sendFeeType }}</div>
               <div class="details-text">
                 ${{
                   prettyFiatBalance(totalFees[assetChain], fiatRates[asset])
@@ -699,15 +701,4 @@ export default {
     }
   }
 }
-
-svg.copy-icon {
-  cursor: pointer;
-  width: 14px;
-  margin-left: 6px;
-}
-
-svg.qr-icon {
-  cursor: pointer;
-  width: 21px;
-}
 </style>
diff --git a/src/views/SwapDetails.vue b/src/views/SwapDetails.vue
@@ -21,7 +21,8 @@
             <p>{{prettyBalance(item.fromAmount, item.from)}} {{item.from}}</p>
           </div>
           <div class="col">
-            <h2>Received</h2>
+            <h2 v-if="['SUCCESS', 'REFUNDED'].includes(item.status)">Received</h2>
+            <h2 v-else>Pending Receipt</h2>
             <p>{{prettyBalance(item.toAmount, item.to)}} {{item.to}}</p>
           </div>
         </div>

diff --git a/src/views/UnlockWallet.vue b/src/views/UnlockWallet.vue
@@ -6,7 +6,7 @@
     <div>
       <h2>Open your wallet</h2>
     </div>
-    <form class="form" autocomplete="off" v-on:submit.prevent="unlock">
+    <form class="form" autocomplete="off">
       <div class="form-group">
         <label for="password">Password</label>
         <div class="input-group">
@@ -19,14 +19,18 @@
           </ul>
         </p>
       </div>
-      <p><router-link to="/onboarding/import">Forgot password? Import with seed phrase</router-link></p>
-      <p>
-        <button class="btn btn-light btn-lg btn-block btn-icon" type="submit" :disabled="loading">
-          <SpinnerIcon v-if="loading" />
-          <template v-else>Unlock</template>
-        </button>
-      </p>
     </form>
+     <div class="login-footer">
+        <p><router-link to="/onboarding/import">Forgot password? Import with seed phrase</router-link></p>
+        <div class="footer-content">
+          <button class="btn btn-light btn-lg btn-block btn-icon"
+                  :disabled="loading"
+                  @click="unlock">
+            <SpinnerIcon v-if="loading" />
+            <template v-else>Unlock</template>
+          </button>
+        </div>
+      </div>
   </div>
 </template>
 
@@ -67,7 +71,5 @@ export default {
 </script>
 
 <style lang="scss">
-.unlock-wallet {
 
-}
 </style>