update dependency for ethereum ledger

src/@core/layouts/components/app-navbar/components/Locale.vue

@@ -39,12 +39,6 @@ export default {
     BDropdownItem,
     BImg,
   },
-  // ! Need to move this computed property to comp function once we get to Vue 3
-  computed: {
-    currentLocale() {
-      return this.locales.find(l => l.locale === this.$i18n.locale)
-    },
-  },
   setup() {
     /* eslint-disable global-require */
     const locales = [
@@ -75,6 +69,12 @@ export default {
       locales,
     }
   },
+  // ! Need to move this computed property to comp function once we get to Vue 3
+  computed: {
+    currentLocale() {
+      return this.locales.find(l => l.locale === this.$i18n.locale)
+    },
+  },
 }
 </script>
 

src/@core/layouts/components/app-navbar/components/SearchBar.vue

@@ -28,7 +28,6 @@
         v-if="showSearchBar"
         v-model="searchQuery"
         placeholder="Search Height/Transaction/Account Address"
-        autofocus
         :state="false"
         autocomplete="off"
         @keyup.enter="doQuery"

src/@core/layouts/layout-vertical/LayoutVertical.vue

@@ -13,9 +13,9 @@
     >
       <slot
         name="navbar"
-        :toggleVerticalMenuActive="toggleVerticalMenuActive"
-        :navbarBackgroundColor="navbarBackgroundColor"
-        :navbarTypeClass="[...navbarTypeClass, 'header-navbar navbar navbar-shadow align-items-center']"
+        :toggle-vertical-menu-active="toggleVerticalMenuActive"
+        :navbar-background-color="navbarBackgroundColor"
+        :navbar-type-class="[...navbarTypeClass, 'header-navbar navbar navbar-shadow align-items-center']"
       >
         <app-navbar-vertical-layout :toggle-vertical-menu-active="toggleVerticalMenuActive" />
       </slot>
@@ -109,14 +109,6 @@ export default {
     LayoutContentRendererDefault,
   },
   mixins: [mixinVerticalLayout],
-  computed: {
-    layoutContentRenderer() {
-      const rendererType = this.$route.meta.contentRenderer
-      if (rendererType === 'sidebar-left') return 'layout-content-renderer-left'
-      if (rendererType === 'sidebar-left-detached') return 'layout-content-renderer-left-detached'
-      return 'layout-content-renderer-default'
-    },
-  },
   setup() {
     const {
       routerTransition, navbarBackgroundColor, navbarType, footerType, isNavMenuHidden,
@@ -155,6 +147,14 @@ export default {
       isNavMenuHidden,
     }
   },
+  computed: {
+    layoutContentRenderer() {
+      const rendererType = this.$route.meta.contentRenderer
+      if (rendererType === 'sidebar-left') return 'layout-content-renderer-left'
+      if (rendererType === 'sidebar-left-detached') return 'layout-content-renderer-left-detached'
+      return 'layout-content-renderer-default'
+    },
+  },
 }
 </script>
 

src/@core/layouts/layout-vertical/components/vertical-nav-menu/VerticalNavMenu.vue

@@ -12,9 +12,9 @@
     <div class="navbar-header expanded">
       <slot
         name="header"
-        :toggleVerticalMenuActive="toggleVerticalMenuActive"
-        :toggleCollapsed="toggleCollapsed"
-        :collapseTogglerIcon="collapseTogglerIcon"
+        :toggle-vertical-menu-active="toggleVerticalMenuActive"
+        :toggle-collapsed="toggleCollapsed"
+        :collapse-toggler-icon="collapseTogglerIcon"
       >
         <ul class="nav navbar-nav flex-row">
 

src/App.vue

@@ -30,7 +30,35 @@ export default {
     LayoutVertical,
     LayoutFull,
   },
+  setup() {
+    const { skin, skinClasses } = useAppConfig()
 
+    // If skin is dark when initialized => Add class to body
+    if (skin.value === 'dark') document.body.classList.add('dark-layout')
+
+    // Provide toast for Composition API usage
+    // This for those apps/components which uses composition API
+    // Demos will still use Options API for ease
+    provideToast({
+      hideProgressBar: true,
+      closeOnClick: false,
+      closeButton: false,
+      icon: false,
+      timeout: 3000,
+      transition: 'Vue-Toastification__fade',
+    })
+
+    // Set Window Width in store
+    store.commit('app/UPDATE_WINDOW_WIDTH', window.innerWidth)
+    const { width: windowWidth } = useWindowSize()
+    watch(windowWidth, val => {
+      store.commit('app/UPDATE_WINDOW_WIDTH', val)
+    })
+
+    return {
+      skinClasses,
+    }
+  },
   // ! We can move this computed: layout & contentLayoutType once we get to use Vue 3
   // Currently, router.currentRoute is not reactive and doesn't trigger any change
   computed: {
@@ -65,35 +93,6 @@ export default {
     const { isRTL } = $themeConfig.layout
     document.documentElement.setAttribute('dir', isRTL ? 'rtl' : 'ltr')
   },
-  setup() {
-    const { skin, skinClasses } = useAppConfig()
-
-    // If skin is dark when initialized => Add class to body
-    if (skin.value === 'dark') document.body.classList.add('dark-layout')
-
-    // Provide toast for Composition API usage
-    // This for those apps/components which uses composition API
-    // Demos will still use Options API for ease
-    provideToast({
-      hideProgressBar: true,
-      closeOnClick: false,
-      closeButton: false,
-      icon: false,
-      timeout: 3000,
-      transition: 'Vue-Toastification__fade',
-    })
-
-    // Set Window Width in store
-    store.commit('app/UPDATE_WINDOW_WIDTH', window.innerWidth)
-    const { width: windowWidth } = useWindowSize()
-    watch(windowWidth, val => {
-      store.commit('app/UPDATE_WINDOW_WIDTH', val)
-    })
-
-    return {
-      skinClasses,
-    }
-  },
   created() {
     store.dispatch('chains/getQuotes')
     store.dispatch('chains/getAllIBCDenoms', this)

src/libs/client/EthereumLedgerSigner.ts

@@ -0,0 +1,48 @@
+
+import { AccountData, AminoSignResponse, encodeSecp256k1Signature, OfflineAminoSigner, StdSignature, StdSignDoc } from "@cosmjs/amino";
+import Transport from "@ledgerhq/hw-transport";
+
+import Eth from "@ledgerhq/hw-app-eth";
+import { LedgerEthTransactionResolution, LoadConfig } from "@ledgerhq/hw-app-eth/lib/services/types";
+import { toHex } from "@cosmjs/encoding";
+
+class EthereumLedgerSigner implements OfflineAminoSigner {
+  app: Eth
+  hdpath: string
+  constructor(trasport: Transport, hdpath: string, scrambleKey?: string, loadConfig?: LoadConfig) {
+    this.app = new Eth(trasport, scrambleKey, loadConfig)
+  }
+  async getAccounts(): Promise<readonly AccountData[]> {
+    return this.app.getAddress(this.hdpath).then(x => {
+      const x2: AccountData = {
+        pubkey: new TextEncoder().encode(x.publicKey),
+        address: x.address,
+        algo: "secp256k1"
+      }
+      return [x2]
+    })
+  };
+
+  async signAmino(signerAddress: string, signDoc: StdSignDoc): Promise<AminoSignResponse> {
+    return this.getAccounts().then(list => {
+      const acc = list.find(x => x.address === signerAddress)
+      if (acc) {
+      const messageHex: string = toHex(new TextEncoder().encode(JSON.stringify(signDoc)))
+      this.app.signPersonalMessage(this.hdpath, messageHex).then(r => {
+        const signature: StdSignature = encodeSecp256k1Signature(acc.pubkey, new TextEncoder().encode(r['s']))
+        const output: AminoSignResponse = {
+          signed: signDoc,
+          signature
+        } 
+        console.log(r)
+        return output
+      })
+      }
+      throw new Error('Account Does not exists!')
+    })
+  };
+
+  signTransaction(rawTxHex: string, resolution: LedgerEthTransactionResolution) {
+    return this.app.signTransaction(this.hdpath, rawTxHex, resolution )
+  }
+}

src/libs/data/signing.js

@@ -26,23 +26,19 @@ export default class PingWalletClient extends SigningStargateClient {
   }
 
   async signAmino2(signerAddress, messages, fee, memo, { accountNumber, sequence, chainId }) {
-    // utils_1.assert(!proto_signing_1.isOfflineDirectSigner(this.signer))
     const accountFromSigner = (await this.signer.getAccounts()).find(account => account.address === signerAddress)
     if (!accountFromSigner) {
       throw new Error('Failed to retrieve account from signer')
     }
     const pubkey = proto_signing_1.encodePubkey(amino_1.encodeSecp256k1Pubkey(accountFromSigner.pubkey))
     const signMode = signing_1.SignMode.SIGN_MODE_LEGACY_AMINO_JSON
-    // console.log('messages:', messages)
     const msgs = messages.map(msg => this.aminoTypes.toAmino(msg))
-    // console.log('msgs:', msgs)
     const signDoc = amino_1.makeSignDoc(msgs, fee, chainId, memo, accountNumber, sequence)
     const { signature, signed } = await this.signer.signAmino(signerAddress, signDoc)
     const signedTxBody = {
       messages: signed.msgs.map(msg => this.aminoTypes.fromAmino(msg)),
       memo: signed.memo,
     }
-    // console.log(signedTxBody)
     const signedTxBodyEncodeObject = {
       typeUrl: '/cosmos.tx.v1beta1.TxBody',
       value: signedTxBody,

src/views/Block.vue

@@ -57,6 +57,13 @@ export default {
     ObjectFieldComponent,
     ArrayFieldComponent,
   },
+  beforeRouteUpdate(to, from, next) {
+    const { height } = to.params
+    if (height > 0 && height !== from.params.height) {
+      this.initData(height)
+      next()
+    }
+  },
   data() {
     return {
       block: { block: { header: {}, data: {}, evidence: {} } },
@@ -69,13 +76,6 @@ export default {
       ],
     }
   },
-  beforeRouteUpdate(to, from, next) {
-    const { height } = to.params
-    if (height > 0 && height !== from.params.height) {
-      this.initData(height)
-      next()
-    }
-  },
   created() {
     const { height } = this.$route.params
     this.initData(height)

src/views/OsmosisTrade.vue

@@ -133,6 +133,12 @@ export default {
     SummaryPriceChart,
     FeatherIcon,
   },
+  beforeRouteUpdate(to, from, next) {
+    const { poolid } = to.params
+    this.init(poolid)
+    next()
+    // }
+  },
   data() {
     return {
       loading: true,
@@ -206,12 +212,6 @@ export default {
       })
     })
   },
-  beforeRouteUpdate(to, from, next) {
-    const { poolid } = to.params
-    this.init(poolid)
-    next()
-    // }
-  },
   methods: {
     getPrice(symbol) {
       const p1 = this.$store.state.chains.quotes[symbol[0]]

src/views/Transaction.vue

@@ -120,12 +120,6 @@ export default {
     BBadge,
     ObjectFieldComponent,
   },
-  data() {
-    return {
-      error: null,
-      tx: { tx: {} },
-    }
-  },
   beforeRouteUpdate(to, from, next) {
     const { hash } = to.params
     if (hash !== from.params.hash) {
@@ -138,6 +132,12 @@ export default {
       next()
     }
   },
+  data() {
+    return {
+      error: null,
+      tx: { tx: {} },
+    }
+  },
   created() {
     const { hash } = this.$route.params
     this.$http.getTxs(hash).then(res => {

src/views/WalletAccountDetail.vue

@@ -464,6 +464,23 @@ export default {
     'b-tooltip': VBTooltip,
     Ripple,
   },
+  beforeRouteUpdate(to, from, next) {
+    // const { address } = this.$route.params
+    const { address } = to.params
+    if (address !== from.params.hash) {
+      this.address = address
+      this.$http.getAuthAccount(this.address).then(acc => {
+        this.account = acc
+        this.initial()
+        this.$http.getTxsBySender(this.address).then(res => {
+          this.transactions = res
+        })
+      }).catch(err => {
+        this.error = err
+      })
+      next()
+    }
+  },
   data() {
     const { address } = this.$route.params
     return {
@@ -646,23 +663,6 @@ export default {
       this.error = err
     })
   },
-  beforeRouteUpdate(to, from, next) {
-    // const { address } = this.$route.params
-    const { address } = to.params
-    if (address !== from.params.hash) {
-      this.address = address
-      this.$http.getAuthAccount(this.address).then(acc => {
-        this.account = acc
-        this.initial()
-        this.$http.getTxsBySender(this.address).then(res => {
-          this.transactions = res
-        })
-      }).catch(err => {
-        this.error = err
-      })
-      next()
-    }
-  },
   mounted() {
     const elem = document.getElementById('txevent')
     elem.addEventListener('txcompleted', () => {

src/views/components/KlineTrade/Place.vue

@@ -18,7 +18,7 @@
     </b-tabs>
     <PlaceForm
       :type="tabIndex"
-      :pool.sync="pool"
+      :pool="pool"
       :denom-trace="denomTrace"
     />
   </div>

src/views/components/KlineTrade/PlaceForm.vue

@@ -95,10 +95,10 @@
       class="px-0"
     >
       <b-form-group>
-        <label>
+        <label for="slip">
           Slippage Tolerance
         </label>
-        <div>
+        <div id="slip">
           <b-form-radio
             v-model="slippage"
             value="0.01"

src/views/components/charts/EchartScatter.vue

@@ -32,15 +32,15 @@ export default {
   components: {
     VChart,
   },
+  provide: {
+    [THEME_KEY]: 'light',
+  },
   props: {
     items: {
       type: Array,
       default: () => [],
     },
   },
-  provide: {
-    [THEME_KEY]: 'light',
-  },
   computed: {
     option() {
       const colors = chartColors()