improvements

Author: aggre

package.json

@@ -125,6 +125,7 @@
 		"js-base64": "^3.7.2",
 		"lit": "^2.3.1",
 		"ramda": "^0.29.0",
+		"rxjs": "^7.8.1",
 		"web3modal": "^1.9.9",
 		"yaml": "2.3.1"
 	},
@@ -166,7 +167,6 @@
 		"rimraf": "5.0.1",
 		"rollup": "3.26.2",
 		"rollup-plugin-dts": "5.3.0",
-		"rxjs": "^7.8.1",
 		"sass": "1.63.6",
 		"svelte": "4.0.5",
 		"tailwindcss": "3.3.3",

src/components/ConnectButton.vue

@@ -64,6 +64,7 @@ import { clientsDev } from '@devprotocol/dev-kit/agent'
 import { whenDefined } from '@devprotocol/util-ts'
 import { onMountClient } from '../events'
 import HSButton from './Primitives/Hashi/HSButton.vue'
+import { combineLatest } from 'rxjs'
 
 type Data = {
 	modalProvider?: Web3Modal
@@ -78,6 +79,9 @@ export default defineComponent({
 	components: {
 		HSButton,
 	},
+	props: {
+		chainId: Number,
+	},
 	data(): Data {
 		return {
 			modalProvider: undefined,
@@ -96,9 +100,12 @@ export default defineComponent({
 				])
 			this.connection = connection
 			this.modalProvider = GetModalProvider()
-			connection().account.subscribe((acc?: string) => {
-				this.truncateWalletAddress = acc ? this.truncateEthAddress(acc) : ''
-			})
+			combineLatest([connection().chain, connection().account]).subscribe(
+				([chainId, acc]) => {
+					this.supportedNetwork = chainId === this.chainId
+					this.truncateWalletAddress = acc ? this.truncateEthAddress(acc) : ''
+				}
+			)
 			const { currentAddress, connectedProvider, provider } =
 				await ReConnectWallet(this.modalProvider as Web3Modal)
 			if (currentAddress) {
@@ -114,7 +121,7 @@ export default defineComponent({
 	},
 	methods: {
 		setSigner(provider: Eip1193Provider) {
-			this.connection!().setEip1193Provider(provider)
+			this.connection!().setEip1193Provider(provider, BrowserProvider)
 		},
 		async connect() {
 			const connectedProvider = await this.modalProvider!.connect()
@@ -124,7 +131,7 @@ export default defineComponent({
 		},
 		async fetchUserBalance(currentAddress: string, provider: ContractRunner) {
 			const [l1, l2] = await clientsDev(provider)
-			this.supportedNetwork = l1 || l2 ? true : false
+			// this.supportedNetwork = l1 || l2 ? true : false
 			const balance = await (l1 || l2)?.balanceOf(currentAddress)
 			const formatted = formatUnits(balance ?? 0)
 			const rounded = Math.round((+formatted + Number.EPSILON) * 100) / 100

src/layouts/Aside.vue

@@ -4,6 +4,7 @@
 			id="clubs_connect_button"
 			v-if="showConnectButton"
 			class="w-full"
+			:chainId="config.chainId"
 		/>
 		<div class="relative">
 			<ActionButton