add Wallet Dialog

package.json

@@ -21,6 +21,7 @@
     "@cosmjs/encoding": "^0.29.5",
     "@floating-ui/dom": "^1.2.0",
     "@iconify/vue": "^4.1.0",
+    "@injectivelabs/wallet-ts": "^1.10.69",
     "@intlify/unplugin-vue-i18n": "^0.8.2",
     "@osmonauts/lcd": "^0.8.0",
     "@ping-pub/chain-registry-client": "^0.0.25",
@@ -31,6 +32,7 @@
     "apexcharts": "^3.37.1",
     "autoprefixer": "^10.4.14",
     "axios": "^1.3.2",
+    "buffer": "^6.0.3",
     "cross-fetch": "^3.1.5",
     "dayjs": "^1.11.7",
     "long": "^5.2.1",

src/components/dialogs/ConnectWallet.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { Wallet } from '@injectivelabs/wallet-ts';
+import { useWalletStore } from '@/stores'
+
+import MetaLogo from '@/assets/wallet/metamask.png';
+import KeplrLogo from '@/assets/wallet/keplr.png';
+import LedgerLogo from '@/assets/wallet/ledger.png';
+
+const isDialogVisible = ref(false)
+
+
+interface WalletItem {
+  logo: string;
+  name: string;
+  wallet: Wallet;
+  discription: string;
+}
+
+const wallets: WalletItem[] = [
+  {
+    logo: MetaLogo,
+    name: 'Metamask',
+    wallet: Wallet.Metamask,
+    discription: '',
+  },
+  {
+    logo: KeplrLogo,
+    name: 'Keplr',
+    wallet: Wallet.Keplr,
+    discription: '',
+  },
+  {
+    logo: LedgerLogo,
+    name: 'Ledger',
+    wallet: Wallet.Ledger,
+    discription: '',
+  },
+];
+
+const store = useWalletStore();
+</script>
+
+<template>
+  <VDialog
+    v-model="isDialogVisible"
+    persistent
+    class="v-dialog-sm"
+  >
+    <!-- Dialog Activator -->
+    <template #activator="{ props }">
+      <VBtn v-bind="props">
+        Connect Wallet
+      </VBtn>
+    </template>
+
+    <!-- Dialog Content -->
+    <VCard title="Connect Wallet">
+      <DialogCloseBtn
+        variant="text"
+        size="small"
+        @click="isDialogVisible = false"
+      />
+
+      <VCardText>
+
+      </VCardText>
+
+      <VCardActions>
+        <VSpacer />
+        <VBtn
+          color="error"
+          @click="isDialogVisible = false"
+        >
+          Disagree
+        </VBtn>
+        <VBtn
+          color="success"
+          @click="isDialogVisible = false"
+        >
+          Agree
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/layouts/components/DefaultLayout.vue

@@ -15,6 +15,7 @@ import NavSearchBar from './NavSearchBar.vue';
 import NavBarNotifications from './NavBarNotifications.vue';
 import TheCustomizer from '@/plugins/vuetify/@core/components/TheCustomizer.vue';
 import Breadcrumbs from './Breadcrumbs.vue';
+import ConnectWallet from '@/components/dialogs/ConnectWallet.vue'
 import { useBlockchain } from '@/stores';
 
 const {
@@ -66,6 +67,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"/>
       </div>
     </template>
 

src/stores/index.ts

@@ -9,3 +9,4 @@ export * from './useMintStore'
 export * from './useStakingStore'
 export * from './useDistributionStore'
 export * from './useParamsStore'
+export * from './useWalletStore'

src/stores/useWalletStore.ts

@@ -0,0 +1,13 @@
+import { defineStore } from "pinia";
+
+export const useWalletStore = defineStore('walletStore', {
+    state: () => {
+        return {
+        }
+    },
+    getters: {
+
+    },
+    actions: {
+    }
+})