add basic framework

src/layouts/components/DefaultLayout.vue

@@ -15,6 +15,7 @@ import { VerticalNavLayout } from '@layouts';
 import NavBarI18n from './NavBarI18n.vue';
 import NavSearchBar from './NavSearchBar.vue';
 import NavBarNotifications from './NavBarNotifications.vue';
+import NavBarWallet from './NavBarWallet.vue';
 import TheCustomizer from '@/plugins/vuetify/@core/components/TheCustomizer.vue';
 import Breadcrumbs from './Breadcrumbs.vue';
 import { useBlockchain } from '@/stores';
@@ -68,7 +69,7 @@ blockchain.$subscribe((m, s) => {
         <NavBarNotifications class="hidden md:inline-block" />
         <NavBarI18n class="hidden md:inline-block" />
         <NavbarThemeSwitcher class="hidden md:inline-block" />
-        <ConnectWallet class="md:inline-block" />
+        <NavBarWallet class="md:inline-block" />
       </div>
     </template>
 

src/layouts/components/NavBarWallet.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useBlockchain, useWalletStore } from '@/stores';
+
+const walletStore = useWalletStore()
+
+</script>
+
+<template>
+  <div>
+    <span v-if="walletStore.currentAddress">{{ walletStore.currentAddress }}</span>
+    <ping-connect-wallet v-else class="mt-5" :chain-id="'juno-1'" :hd-path="`m/44'/118/0'/0/0`" />
+  </div>
+</template>

src/modules/[chain]/index.vue

@@ -3,7 +3,7 @@ import MdEditor from 'md-editor-v3';
 import PriceMarketChart from '@/components/charts/PriceMarketChart.vue';
 
 import { Icon } from '@iconify/vue';
-import { useBlockchain, useFormatter } from '@/stores';
+import { useBlockchain, useFormatter, useWalletStore } from '@/stores';
 import { onMounted, ref } from 'vue';
 import { useIndexModule } from './indexStore';
 import { computed } from '@vue/reactivity';
@@ -13,6 +13,7 @@ import ProposalListItem from '@/components/ProposalListItem.vue';
 
 const blockchain = useBlockchain();
 const store = useIndexModule();
+const walletStore = useWalletStore()
 
 const coinInfo = computed(() => {
   return store.coinInfo;
@@ -62,6 +63,9 @@ const comLinks = [
     href: store.github,
   },
 ];
+
+// wallet box
+
 </script>
 
 <template>
@@ -216,12 +220,24 @@ const comLinks = [
       </div>
     </div>
 
-    <ping-connect-wallet class="mt-5" :chain-id="'juno-1'" :hd-path="`m/44'/118/0'/0/0`" />
-    <div
-      class="btn btn-primary w-full mt-5 flex items-center bg-transparent text-primary hover:bg-gray-100 hover:bg-transparent"
-    >
-      Connect Wallet
+    <div class="bg-transparent rounded mt-4 border-2 border-primary">
+      <div class="px-4 pt-4 pb-2 text-lg font-semibold text-secondary">
+        {{ walletStore.currentAddress || "Not Connected" }}
+        <span v-if="walletStore.currentAddress" class="float-right font-light text-sm">More</span>
       </div>
+      <div class="grid grid-cols-1 md:grid-cols-4 auto-cols-auto gap-4 px-4 pb-8 py-4">
+        <div class="bg-base-100">1</div>
+        <div class="bg-base-100">2</div>
+        <div class="bg-base-100">1</div>
+        <div class="bg-base-100">2</div>
+      </div>
+
+      <div>
+
+      </div>
+    </div>
+
+
   </div>
 </template>
 

src/stores/useBlockchain.ts

@@ -39,6 +39,14 @@ export const useBlockchain = defineStore('blockchain', {
     logo(): string {
       return this.current?.logo || '';
     },
+    defaultHDPath(): string {
+      const cointype = this.current?.coinType || "118"
+      // if(cointype === "60") {
+      //   return `m/44'/${cointype}`
+      // }
+      // return `m/44'/${cointype}/0'/0/0`
+      return "connected-wallet"
+    },
     dashboard() {
       return useDashboard();
     },

src/stores/useDashboard.ts

@@ -58,6 +58,7 @@ export interface ChainConfig {
   prettyName: string;
   bech32Prefix: string;
   chainId: string;
+  coinType: string;
   assets: Asset[];
   themeColor?: string;
   endpoints: {
@@ -127,6 +128,7 @@ export function fromLocal(lc: LocalConfig): ChainConfig {
   }));
   conf.bech32Prefix = lc.addr_prefix;
   conf.chainName = lc.chain_name;
+  conf.coinType = lc.coin_type;
   conf.prettyName = lc.chain_name;
   conf.endpoints = {
     rest: apiConverter(lc.api),

src/stores/useWalletStore.ts

@@ -1,9 +1,37 @@
 import { defineStore } from 'pinia';
+import { useBlockchain } from './useBlockchain';
+import { fromBech32, toBech32 } from '@cosmjs/encoding';
 
 export const useWalletStore = defineStore('walletStore', {
   state: () => {
     return {};
   },
-  getters: {},
-  actions: {},
+  getters: {
+    blockchain() {
+      return useBlockchain();
+    },
+    connectedWallet() {
+      const chainStore = useBlockchain()
+      const key = chainStore.defaultHDPath
+
+      const connected = JSON.parse(localStorage.getItem(key)||"{}")
+      return connected
+    },
+    currentAddress() {
+      const {prefix, data} = fromBech32(this.connectedWallet.cosmosAddress);
+      const chainStore = useBlockchain()
+      return toBech32(chainStore.current?.bech32Prefix || prefix, data)
+    }
+  },
+  actions: {
+    myBalance() {
+      return this.blockchain.rpc.getBankBalances(this.currentAddress)
+    },
+    myDelegations() {
+      return this.blockchain.rpc.getStakingDelegations(this.currentAddress)
+    },
+    myUnbonding() {
+      return this.blockchain.rpc.getStakingDelegatorUnbonding(this.currentAddress)
+    }
+  },
 });