added wallet type to account info

Author: kolirt

README.md

@@ -147,7 +147,19 @@ app.use(createWeb3Auth({
 
 ## Basic usage
 
-### Connect wallet button
+### Info about the user's connected wallet and wallet type
+
+```ts
+import { account } from '@kolirt/vue-web3-auth'
+
+account.connected // if connected
+account.address // current account address
+account.shortAddress // current account address with 3 dots
+account.wallet.id // current wallet id
+account.wallet.name // current wallet name
+```
+
+### Connect wallet button````
 
 ```vue
 <script setup lang="ts">
@@ -159,11 +171,11 @@ import { account, accountDetails, connect, disconnect } from '@kolirt/vue-web3-a
     <button @click="accountDetails()">
       {{ account.address }}
     </button>
-    <button @click="disconnect()">Disconnect</button>
+    <button @click="disconnect()">Disconnect from {{ account.wallet.name }}</button>
   </div>
   <button v-else @click="connect()">Connect wallet</button>
 </template>
-```
+```````
 
 ### Switch chain
 To switch the chain, you need to add it during [configuration](#configuration). 

lib/account.ts

@@ -1,5 +1,5 @@
 import { disconnect as masterDisconnect } from '@wagmi/core'
-import { reactive, watchEffect } from 'vue'
+import { reactive, readonly, watchEffect } from 'vue'
 
 import { state as optionsState } from './options'
 import type { AccountState, Chain, ConnectedAccount } from './types'
@@ -11,12 +11,18 @@ export const state = reactive<AccountState>({
   currentAccount: null
 })
 
-export const account = reactive<ConnectedAccount>({
+ const accountState = reactive<ConnectedAccount>({
   connected: false,
   address: undefined,
-  shortAddress: undefined
+  shortAddress: undefined,
+  wallet: {
+    id: undefined,
+    name: undefined
+  }
 })
 
+export const account = readonly(accountState)
+
 export async function disconnect() {
   await masterDisconnect()
 }
@@ -46,12 +52,16 @@ export function shortAddressFilter(value = '') {
 
 watchEffect(() => {
   if (state.currentAccount) {
-    account.connected = true
-    account.address = state.currentAccount.address
-    account.shortAddress = shortAddressFilter(state.currentAccount.address)
+    accountState.connected = true
+    accountState.address = state.currentAccount.address
+    accountState.shortAddress = shortAddressFilter(state.currentAccount.address)
+    accountState.wallet.id = state.currentAccount.connector?.id
+    accountState.wallet.name = state.currentAccount.connector?.name
   } else {
-    account.connected = false
-    account.address = undefined
-    account.shortAddress = undefined
+    accountState.connected = false
+    accountState.address = undefined
+    accountState.shortAddress = undefined
+    accountState.wallet.id = undefined
+    accountState.wallet.name = undefined
   }
 })

lib/types.ts

@@ -1,4 +1,4 @@
-import type { Chain, Unit } from '@wagmi/core'
+import type { Chain, GetAccountResult, Unit } from '@wagmi/core'
 import type { ThemeCtrlState } from '@web3modal/core'
 import type { EthereumClient } from '@web3modal/ethereum'
 import type { WatchAssetParams } from 'viem/src/types/eip1193'
@@ -41,6 +41,10 @@ export type ConnectedAccount = {
   connected: boolean
   address?: `0x${string}`
   shortAddress?: string
+  wallet: {
+    id?: string
+    name?: string
+  }
 }
 
 export type BufferChain = Chain & { unsupported?: boolean }
@@ -55,8 +59,8 @@ export type WcState = {
 }
 
 export type AccountState = {
-  bufferAccount: any
-  currentAccount: any
+  bufferAccount: GetAccountResult | null
+  currentAccount: GetAccountResult | null
 }
 
 export type MulticallContract = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolirt/vue-web3-auth",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Web3 authentication for Vue3 apps based on WalletConnect Web3Modal v2",
   "author": "kolirt",
   "license": "MIT",