zhereh-frontend

NetworkForm.svelte (6169B)

---

 <script lang="ts">
 	import { numberToHex } from 'viem'
 	import type { Chain } from '@wagmi/chains'
 	import { configuredChain, votingConfig } from '../store'
 	$configuredChain
 	$votingConfig
 
 	type ConfigFormData = {
 		rpcEndpoint: string
 		chainName: string
 		currencyName: string
 		currencySymbol: string
 		chainId: number
 		decimals: number
 		contractAddress: string
 		erc20ContractAddress: string
 	}
 
 	let configData: ConfigFormData = {
 		rpcEndpoint: $configuredChain.rpcUrls.default.http[0],
 		chainName: $configuredChain.name,
 		currencyName: $configuredChain.nativeCurrency.name,
 		currencySymbol: $configuredChain.nativeCurrency.symbol,
 		chainId: $configuredChain.id,
 		decimals: $configuredChain.nativeCurrency.decimals,
 		contractAddress: $votingConfig.contractAddress,
 		erc20ContractAddress: $votingConfig.erc20ContractAddress
 	}
   
 	const onSubmit = async () => {
 		await addNetworkToWallet(configData)
 	}
 
 	async function addNetworkToWallet(configData: ConfigFormData) {
 		if (!window.ethereum) alert('Please install a wallet to continue')
 		try {
 			updateConfiguredChain()
 			votingConfig.updateVotingConfig({
 				contractAddress: configData.contractAddress,
 				erc20ContractAddress: configData.erc20ContractAddress
 			})
 
 			await window.ethereum.request({
 				method: 'wallet_addEthereumChain',
 				params: [
 					{
 						chainId: numberToHex(configData.chainId),
 						rpcUrls: [configData.rpcEndpoint],
 						chainName: configData.chainName,
 						nativeCurrency: {
 							name: configData.currencyName,
 							symbol: configData.currencySymbol,
 							decimals: configData.decimals
 						},
 						blockExplorerUrls: ['https://example.com']
 					}
 				]
 			})
 		} catch (error) {
 			console.log(error)
 		}
 	}
 
 	const updateConfiguredChain = () => {
 		const updatedChain: Chain = {
 			id: configData.chainId,
 			name: configData.chainName,
 			rpcUrls: {
 				default: {
 					http: [configData.rpcEndpoint],
 					webSocket: undefined
 				},
 				public: {
 					http: [],
 					webSocket: undefined
 				}
 			},
 			nativeCurrency: {
 				name: configData.currencyName,
 				symbol: configData.currencySymbol,
 				decimals: configData.decimals
 			},
 			network: $configuredChain.name
 		}
 		configuredChain.updateChain(updatedChain)
 	}
 </script>
 
 <div class="flex justify-center items-center w-full py-10">
 	<div class="flex w-full items-center justify-center">
 		<div class="card w-full sm:mx-2 md:w-4/5 lg:w-3/5 xl:w-2/5 m-2 md:m-0 shadow-xl bg-white">
 			<div class="card-body">
 				<h2 class="text-gray-900 text-center w-full font-semibold text-xl">Network Details</h2>
 				<form
 					on:submit|preventDefault={onSubmit}
 					class="flex flex-col justify-center w-full flex-1"
 				>
 					<div class="form-control w-full">
 						<label for="rpcUrl" class="label">
 							<span class="label-text text-gray-800">RPC endpoint</span>
 						</label>
 						<input
 							name="rpcUrl"
 							type="url"
 							placeholder="Enter RPC endpoint"
 							class="input input-bordered w-full"
 							bind:value={configData.rpcEndpoint}
 						/>
 					</div>
 
 					<div class="flex flex-col md:flex-row w-full gap-3 mt-3">
 						<div class="form-control w-full">
 							<label for="chainName" class="label">
 								<span class="label-text text-gray-800">Chain Name</span>
 							</label>
 							<input
 								name="chainName"
 								type="text"
 								placeholder="Enter chain name"
 								class="input input-bordered w-full"
 								bind:value={configData.chainName}
 							/>
 						</div>
 
 						<div class="form-control w-full">
 							<label for="currencyName" class="label">
 								<span class="label-text text-gray-800">Currency Name</span>
 							</label>
 							<input
 								name="currencyName"
 								type="text"
 								placeholder="Enter currency name"
 								class="input input-bordered w-full"
 								bind:value={configData.currencyName}
 							/>
 						</div>
 					</div>
 
 					<div class="flex flex-col md:flex-row w-full gap-3 mt-3">
 						<div class="form-control w-full">
 							<label for="currencySymbol" class="label">
 								<span class="label-text text-gray-800">Currency symbol</span>
 							</label>
 							<input
 								name="currencySymbol"
 								type="text"
 								placeholder="Enter currency symbol(2-6 characters)"
 								class="input input-bordered w-full"
 								minlength="2"
 								maxlength="6"
 								bind:value={configData.currencySymbol}
 							/>
 						</div>
 
 						<div class="form-control w-full">
 							<label for="chainId" class="label">
 								<span class="label-text text-gray-800">Chain ID</span>
 							</label>
 							<input
 								name="chainId"
 								type="number"
 								placeholder="Enter chainId"
 								class="input input-bordered w-full"
 								bind:value={configData.chainId}
 							/>
 						</div>
 						<div class="form-control w-full">
 							<label for="chainId" class="label">
 								<span class="label-text text-gray-800">Decimals</span>
 							</label>
 							<input
 								name="chainId"
 								type="number"
 								placeholder="Enter decimals"
 								class="input input-bordered w-full"
 								bind:value={configData.decimals}
 							/>
 						</div>
 					</div>
 
 					<div class="form-control w-full mt-3">
 						<label for="contractAddress" class="label">
 							<span class="label-text text-gray-800">Contract address</span>
 						</label>
 						<input
 							name="contractAddress"
 							type="text"
 							placeholder="Enter voting contract address"
 							class="input input-bordered w-full"
 							bind:value={configData.contractAddress}
 						/>
 					</div>
 
 					<div class="form-control w-full mt-3">
 						<label for="erc20ContractAddress" class="label">
 							<span class="label-text text-gray-800">ERC-20 Contract address</span>
 						</label>
 						<input
 							name="erc20ContractAddress"
 							type="text"
 							placeholder="Enter ERC-20 contract address"
 							class="input input-bordered w-full"
 							bind:value={configData.erc20ContractAddress}
 						/>
 					</div>
 					<button type="submit" class="btn btn-primary w-40 self-center mt-6 normal-case text-white"
 						>Add to wallet</button
 					>
 				</form>
 			</div>
 		</div>
 	</div>
 </div>