Merge branch 'dev' into backup-wallet-selection

.env

@@ -0,0 +1,2 @@
+
+  VUE_APP_LEDGER_BRIDGE_URL=https://liquality-ledger-web-bridge.web.app

README.md

@@ -1,8 +1,12 @@
 # Liquality Wallet <img align="right" src="https://raw.githubusercontent.com/liquality/chainabstractionlayer/master/liquality-logo.png" height="80px" />
 
+## Getting started
+- Install NVM [https://github.com/nvm-sh/nvm#installing-and-updating]()
+- Go to this folder repo and run `nvm use` to takes the right version for node (install if you need it)
+
 ## Project setup
 ```
-npm install
+npm ci
 ```
 
 ### Compiles and hot-reloads for development

package.json

@@ -1,6 +1,6 @@
 {
   "name": "liquality-wallet",
-  "version": "0.21.1",
+  "version": "0.21.4",
   "private": true,
   "license": "MIT",
   "author": "Liquality <[email protected]>",

src/assets/scss/style.scss

@@ -587,4 +587,287 @@ svg.qr-icon {
     flex-direction: column;
     flex: 1;
   }
+}
+
+.account-container {
+  .dropdown-toggle.lg {
+    padding-left: 13px !important;
+    padding-right: 0 !important;
+    font-weight: 300;
+    display: flex;
+    align-items: center;
+
+    &::after {
+      display: none;
+    }
+
+    .input-group-text {
+      margin-left: 5px;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .text-description {
+      font-size: 14px;
+      line-height: 14px;
+    }
+
+    svg {
+      margin-left: 4px;
+      height: 16px;
+       &.open {
+          transform: rotate(90deg);
+        }
+    }
+  }
+
+  .dropdown-menu.lg {
+    width: 125px !important;
+    min-width: 0;
+    margin: 0;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    overflow: auto;
+    border-radius: 0;
+    padding-bottom: 0;
+    padding-top: 0;
+    border: 1px solid #d9dfe5;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+
+    .dropdown-item {
+      padding-left: 15px !important;
+      padding-right: 0 !important;
+      font-weight: 300;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid $hr-border-color;
+      .input-group-text {
+        margin-left: 5px;
+      }
+
+      &:hover,
+      &.active {
+        background-color: #f0f7f9;
+        color: $color-text-primary;
+      }
+    }
+  }
+
+  .progress-container {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .circle-progress {
+      width: 175px;
+    }
+
+    .loading-message {
+      z-index: 999;
+      text-align: center;
+      position: absolute;
+
+      .loading-message-title {
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 18px;
+        text-align: center;
+        color: #000D35;
+      }
+
+      .loading-message-text {
+        font-weight: 500;
+        font-size: 11px;
+        line-height: 16px;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        color: #646F85;
+      }
+    }
+  }
+
+  .no-accounts {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 18px;
+    text-align: center;
+  }
+
+  .step-detail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .step-number {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 13px;
+      line-height: 13px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border-radius: 28px;
+      border: solid 1px #000d35;
+    }
+
+    .step-name {
+      font-weight: bold;
+      font-size: 12px;
+      line-height: 24px;
+      text-align: center;
+      text-transform: uppercase;
+      margin-top: 10px;
+    }
+
+    .step-icon {
+      margin-top: 15px;
+      svg {
+        width: 179px;
+      }
+    }
+
+    .step-text {
+      margin-top: 15px;
+      font-style: normal;
+      font-weight: 300;
+      font-size: 12px;
+      line-height: 27px;
+    }
+  }
+
+  .step-instructions {
+    margin-top: 15px;
+    font-style: normal;
+    font-weight: 300;
+    font-size: 16px;
+    padding-left: 20px;
+    line-height: 18px;
+    margin-bottom: 30px;
+  }
+
+  .options {
+    position: absolute;
+    padding: 26px 20px;
+    left: 0;
+    border-top: 1px solid $hr-border-color;
+    border-bottom: 1px solid $hr-border-color;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 80px;
+    justify-content: space-between;
+
+    .options-text {
+      max-width: 210px;
+      font-style: normal;
+      font-weight: bold;
+      font-size: 12px;
+      line-height: 16px;
+      display: flex;
+      align-items: center;
+      text-transform: uppercase;
+      color: #3D4767;
+
+      span {
+        width: 120px;
+      }
+    }
+  }
+
+  .indications {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+    text-transform: uppercase;
+    color: #3d4767;
+    margin-top: 10px;
+  }
+}
+
+
+.custom-dropdown-toggle {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  font-weight: 300;
+  display: flex;
+  align-items: center;
+
+  &::after {
+    display: none;
+  }
+
+  .input-group-text {
+    margin-left: 5px;
+  }
+
+  svg {
+      width: 8px;
+      margin-left: 4px;
+  }
+}
+
+.custom-dropdown-menu {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 14px;
+  max-width: 215px;
+  min-width: 8rem;
+  max-height: 185px;
+  overflow: auto;
+  border-radius: 0;
+  padding-bottom: 0;
+  padding-top: 0;
+  margin: 0;
+  border: 1px solid #D9DFE5;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+
+  .custom-dropdown-header {
+    margin-top: 10px;
+    padding-left: 15px;
+    padding-right: 15px;
+
+    .input-group {
+      align-items: center;
+
+      input {
+        padding-left: 20px;
+      }
+      svg {
+        position: absolute;
+        left: 0;
+        top: 5px;
+        width: 16px;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .custom-dropdown-item {
+    padding: 0.438rem;
+    height: 30px;
+    border-bottom: 1px solid $hr-border-color;
+
+    &:hover, &.active {
+      background-color: #F0F7F9;
+      color: $color-text-primary;
+    }
+  }
+}
+
+.dropdown-menu-end {
+  right: 0;
+  left: auto;
 }

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "0.21.1",
+  "version": "0.21.4",
   "name": "Liquality Wallet",
   "description": "Secure multi-crypto wallet with built-in Atomic Swaps!",
   "homepage_url": "https://liquality.io",
@@ -47,8 +47,5 @@
       "512": "icons/512x512.png",
       "1024": "icons/1024x1024.png"
     }
-  },
-  "externally_connectable": {
-    "matches": ["https://liquality-ledger-web-bridge.web.app/"]
   }
 }

src/store/actions/getUnusedAddresses.js

@@ -6,7 +6,7 @@ export const getUnusedAddresses = async ({ state, commit, getters }, { network,
     const index = accounts.findIndex(a => a.id === accountId)
     if (index >= 0) {
       const account = accounts[index]
-      const result = await getters.client(network, walletId, asset).wallet.getUnusedAddress()
+      const result = await getters.client(network, walletId, asset, account.type).wallet.getUnusedAddress()
       const address = result.address
       if (!account.addresses.includes(address)) {
         const addresses = [

src/store/actions/hardware-wallet/getLedgerAccounts.js

@@ -0,0 +1,7 @@
+export const getLedgerAccounts = async (
+  { commit, getters },
+  { network, walletId, asset, walletType, startingIndex, numAddresses }
+) => {
+  const client = getters.client(network, walletId, asset, walletType)
+  return await client.wallet.getAddresses(startingIndex, numAddresses)
+}

src/store/actions/hardware-wallet/index.js

@@ -1 +1 @@
-export * from './getLedgerAddresses'
+export * from './getLedgerAccounts'