Using useWeb3ModalState in nuxt 3 to track the state of wallet connection

Question

I created a connectedButton.vue component to create a we3modal button, it works fine, but my attempts to track the state of the wallet connection, i.e. weather the wallet is connects or not has not been successful.

here's the code of the component, I'm hoping someone can point me in the right direction.

Thanks

<script setup>
import { createWeb3Modal, defaultConfig, useWeb3ModalState } from "@web3modal/ethers5/vue";
import { computed } from 'vue';
import { ref, watch, onMounted } from 'vue';


const projectId = "737c1a9a3cd995ca3f5a235c87f78103";

const mainnet = {
  chainId: 80001,
  name: "Mumbai",
  currency: "MATIC",
  explorerUrl: "https://mumbai.polygonscan.com/",
  rpcUrl: "https://rpc-mumbai.maticvigil.com/",
};

const metadata = {
  name: "My Website",
  description: "My Website description",
  url: "https://mywebsite.com", 
  icons: ["https://avatars.mywebsite.com/"],
};


createWeb3Modal({
  ethersConfig: defaultConfig({ metadata }),
  chains: [mainnet],
  projectId,
  enableAnalytics: true, 
});

// Accessing Web3Modal state
const { open, selectedNetworkId } = useWeb3ModalState();


// Computed property to determine if the wallet is connected
const isConnected = computed(() => open.value && selectedNetworkId.value !== null);
console.log(open.open)


</script>

<template>
  <div>
    <!-- Web3Modal Button -->
    <w3m-button />
    <!-- Optionally display connection status -->
    <p v-if="isConnected">Wallet Connected (Chain ID: {{ selectedNetworkId }})</p>
    <p v-else>Wallet Not Connected</p>
  </div>
</template>

I also tried this, which worked temporarily but once i refreshed the page it stopped working

<script setup>
import { createWeb3Modal, defaultConfig, useWeb3ModalState } from "@web3modal/ethers5/vue";
import { computed } from 'vue';
import { ref, watch, onMounted } from 'vue';


const projectId = "737c1a9a3cd995ca3f5a235c87f78103";

const mainnet = {
  chainId: 80001,
  name: "Mumbai",
  currency: "MATIC",
  explorerUrl: "https://mumbai.polygonscan.com/",
  rpcUrl: "https://rpc-mumbai.maticvigil.com/",
};

const metadata = {
  name: "My Website",
  description: "My Website description",
  url: "https://mywebsite.com", // origin must match your domain & subdomain
  icons: ["https://avatars.mywebsite.com/"],
};


createWeb3Modal({
  ethersConfig: defaultConfig({ metadata }),
  chains: [mainnet],
  projectId,
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
});

const { selectedNetworkId } = useWeb3ModalState();
const isConnected = ref(false); 

// Watch for changes in selectedNetworkId to determine connection status
watch(selectedNetworkId, (newValue, oldValue) => {
  isConnected.value = newValue !== null;
}, { immediate: true });



</script>

<template>
  <div>
    <!-- Web3Modal Button -->
    <w3m-button />
    <!-- Optionally display connection status -->
    <p v-if="isConnected">Wallet Connected (Chain ID: {{ selectedNetworkId }})</p>
    <p v-else>Wallet Not Connected</p>
  </div>
</template>

Answer 1

I found the solution with useWeb3ModalAccount