commit 4c0ddde83d652c0fa578976c0292b5a66c3b894b
parent 4738e61f88bb928c048d15e07ddd074838b3fde7
Author: William Muli <willi.wambu@gmail.com>
Date: Sat, 17 Jun 2023 13:25:59 +0300
Network configuration
Diffstat:
5 files changed, 97 insertions(+), 18 deletions(-)
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
@@ -1,5 +1,41 @@
<script lang="ts">
+ import { onMount } from "svelte"
+ import { connectionDetails, configuredChain } from "../store";
+ import { walletClient } from "../client"
import { NavOptions } from "../options/nav-options";
+ import { reduceAddress } from "../utils/reduce-address"
+ import type { RequestAddressesReturnType } from "viem"
+
+ let networkModalOpen: boolean = false
+
+ const connectWallet = async () => {
+ if (window.ethereum) {
+ const accounts = await walletClient().requestAddresses()
+
+ if (accounts.length > 0) {
+ updateConnectionDetails(true, accounts)
+ }
+
+ window.ethereum.on('accountsChanged', () => {
+ window.location.reload()
+ })
+ }
+ }
+
+ onMount(async () => {
+ if (window.ethereum) {
+ const accounts = await walletClient().getAddresses()
+
+ if (accounts.length > 0) {
+ updateConnectionDetails(true, accounts)
+ }
+ }
+ })
+
+ const updateConnectionDetails = (isConnected: true, accounts: RequestAddressesReturnType) => {
+ connectionDetails.update(() => ({ isConnected , userAddress: accounts[0] }))
+ }
+
</script>
<nav class="flex items-center justify-between flex-wrap bg-black p-6">
@@ -37,14 +73,44 @@
{/each}
</div>
<div>
+ <button class="btn btn-primary btn-md normal-case text-white" on:click={() => networkModalOpen = true}>Network Details</button>
<button
- class="inline-block text-sm px-4 py-2 leading-none rounded text-white bg-emerald-500 hover:text-teal-500 hover:bg-emerald-600 mt-4 lg:mt-0"
- on:click
- on:keydown
+ class="btn btn-md btn-primary text-white"
+ on:click={connectWallet}
>
- Connect wallet
+ {$connectionDetails.isConnected ? reduceAddress($connectionDetails.userAddress) : 'Connect wallet'}
</button
>
</div>
</div>
+
+ <!-- You can open the modal using ID.showModal() method -->
+ <dialog id="networkDetails" class="modal" open={networkModalOpen}>
+ <div class="modal-box ">
+ <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" on:click={() => networkModalOpen = false}>✕</button>
+ <h3 class="font-semibold text-lg">Network Details</h3>
+ <div class="divider my-1"></div>
+ <div class="flex flex-row items-start gap-5 ">
+ <div class="">
+ <p class="py-2 font-normal">Network Name</p>
+ <p class="py-2 font-normal">RPC Endpoint</p>
+ <p class="py-2 font-normal">Chain ID</p>
+ <p class="py-2 font-normal">Currency</p>
+ <p class="py-2 font-normal">Symbol</p>
+ <p class="py-2 font-normal">Decimals</p>
+ </div>
+
+ <div class="">
+ <p class="py-2 font-light">{$configuredChain.name}</p>
+ <p class="py-2 font-light">{$configuredChain.rpcUrls.default.http[0]}</p>
+ <p class="py-2 font-light">{$configuredChain.id}</p>
+ <p class="py-2 font-light">{$configuredChain.nativeCurrency.name}</p>
+ <p class="py-2 font-light">{$configuredChain.nativeCurrency.symbol}</p>
+ <p class="py-2 font-light">{$configuredChain.nativeCurrency.decimals}</p>
+
+ </div>
+ </div>
+
+ </div>
+ </dialog>
</nav>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -26,9 +26,7 @@
})
isConnected = true
- window.ethereum.on('accountsChanged', () => {
- window.location.reload()
- })
+
} catch (error) {
console.error(error)
}
@@ -98,16 +96,6 @@
const result = await contract.read.getProposal([BigInt(1)])
console.log(result)
}
-
- onMount(async () => {
- if (window.ethereum) {
- const accounts = await walletClient().getAddresses()
-
- if (accounts.length > 0) {
- await setup(accounts)
- }
- }
- })
</script>
<Nav on:click={connectWallet} />
diff --git a/src/shared/types.ts b/src/shared/types.ts
@@ -1,4 +1,9 @@
export interface VotingConfig {
contractAddress: string
erc20ContractAddress: string
+}
+
+export interface ConnectionDetails {
+ isConnected: boolean
+ userAddress: string
}
\ No newline at end of file
diff --git a/src/store.ts b/src/store.ts
@@ -11,7 +11,7 @@ import {
PUBLIC_VOTE_CONTRACT_ADDRESS,
PUBLIC_ERC20_CONTRACT_ADDRESS
} from '$env/static/public'
-import type { VotingConfig } from './shared/types'
+import type { ConnectionDetails, VotingConfig } from './shared/types'
import { LOCAL_STORAGE_KEYS } from './shared/localstorage-keys'
const createChain = () => {
@@ -73,5 +73,18 @@ export const createVotingConfig = () => {
}
}
+export const createConnectionDetails = () => {
+ const { subscribe, update } = writable<ConnectionDetails>({
+ isConnected: false,
+ userAddress: ''
+ })
+
+ return {
+ subscribe,
+ update
+ }
+}
+
export const configuredChain = createChain()
export const votingConfig = createVotingConfig()
+export const connectionDetails = createConnectionDetails()
diff --git a/src/utils/reduce-address.ts b/src/utils/reduce-address.ts
@@ -0,0 +1,6 @@
+export const reduceAddress = (address: string, fillerChars?: string) => {
+ const firstHalf = address.slice(0, 6)
+ const secondHalf = address.slice(-4)
+ const reduced = firstHalf.concat(fillerChars || '***', secondHalf)
+ return reduced
+}
+\ No newline at end of file
