我建立了联系 Button。 用于建立三轮modal子的部件,是不起作用的,但我试图跟踪隔离墙连接状况,即隔离墙连接的天气,还是没有成功。
here s the code of the component, I m hoping someone can point me in the right direction.
增 编
<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>