Add Web3Modal paths in readme + Svelte demo link (#450)
* update lock * update next & react lock * add demo in readme * fix link
This commit is contained in:
Glitch
GitHub
parent
f3c04d33a5
commit
8133fb05be
@ -9,9 +9,6 @@
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #fff #141414;
|
||||
}
|
||||
|
||||
body, html{
|
||||
@ -22,11 +19,6 @@ body, html{
|
||||
font-family: 'montserrat';
|
||||
}
|
||||
|
||||
*::selection{
|
||||
background-color: rgb(255, 255, 255);
|
||||
color: #141414;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background: #141414;
|
||||
width: 9px;
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
import { defaultWagmiConfig, createWeb3Modal } from '@web3modal/wagmi'
|
||||
|
||||
import { getAccount, getChainId, reconnect, watchAccount, watchChainId } from '@wagmi/core'
|
||||
import {
|
||||
getAccount,
|
||||
getChainId,
|
||||
reconnect,
|
||||
watchAccount,
|
||||
watchChainId,
|
||||
} from '@wagmi/core'
|
||||
import { readable, writable } from 'svelte/store'
|
||||
|
||||
import {
|
||||
@ -64,20 +70,24 @@ createWeb3Modal({
|
||||
projectId,
|
||||
themeMode: 'dark',
|
||||
featuredWalletIds: [],
|
||||
enableAnalytics: true
|
||||
enableAnalytics: true,
|
||||
})
|
||||
|
||||
export const chainId = readable(getChainId(wagmiConfig), (set) => watchChainId(wagmiConfig, { onChange: set }))
|
||||
export const account = readable(getAccount(wagmiConfig), (set) => watchAccount(wagmiConfig, { onChange: set }))
|
||||
export const chainId = readable(getChainId(wagmiConfig), (set) =>
|
||||
watchChainId(wagmiConfig, { onChange: set }),
|
||||
)
|
||||
export const account = readable(getAccount(wagmiConfig), (set) =>
|
||||
watchAccount(wagmiConfig, { onChange: set }),
|
||||
)
|
||||
export const provider = readable<ExtendedProvider | undefined>(
|
||||
undefined,
|
||||
(set) =>
|
||||
watchAccount(wagmiConfig, {
|
||||
onChange: async (account) => {
|
||||
if (!account.connector) return set(undefined)
|
||||
set(await account.connector?.getProvider())
|
||||
}
|
||||
}),
|
||||
onChange: async (account) => {
|
||||
if (!account.connector) return set(undefined)
|
||||
set(await account.connector?.getProvider())
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
export const supported_chains = writable<string[]>([])
|
||||
|
||||
@ -9,20 +9,20 @@
|
||||
<span id="title">Chain ID:</span>
|
||||
{$chainId}
|
||||
</span>
|
||||
{#if $account.chain}
|
||||
<span>
|
||||
<span id="title">Network:</span>
|
||||
{$account.chain?.name}
|
||||
</span>
|
||||
<span>
|
||||
<span id="title">Decimals:</span>
|
||||
{$account.chain?.nativeCurrency.decimals}
|
||||
</span>
|
||||
<span>
|
||||
<span id="title">Currency:</span>
|
||||
{$account.chain?.nativeCurrency.name}
|
||||
</span>
|
||||
{/if}
|
||||
{#if $account.chain}
|
||||
<span>
|
||||
<span id="title">Network:</span>
|
||||
{$account.chain?.name}
|
||||
</span>
|
||||
<span>
|
||||
<span id="title">Decimals:</span>
|
||||
{$account.chain?.nativeCurrency.decimals}
|
||||
</span>
|
||||
<span>
|
||||
<span id="title">Currency:</span>
|
||||
{$account.chain?.nativeCurrency.name}
|
||||
</span>
|
||||
{/if}
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
|
||||
@ -1,68 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { switchChain } from '@wagmi/core'
|
||||
import { wagmiConfig, provider, supported_chains } from '$lib/web3modal'
|
||||
import toast from 'svelte-french-toast'
|
||||
import Card from '../components/Card.svelte'
|
||||
import Button from '../components/Button.svelte'
|
||||
|
||||
let selected_chain: string
|
||||
|
||||
async function handleSwitch() {
|
||||
try {
|
||||
await switchChain(wagmiConfig, {
|
||||
chainId: Number(selected_chain),
|
||||
})
|
||||
} catch (error) {
|
||||
toast.error((error as Error).message)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $provider?.session}
|
||||
<Card>
|
||||
<div class="main">
|
||||
Switch Chain
|
||||
<div class="action">
|
||||
<select bind:value={selected_chain}>
|
||||
<option value="" disabled selected> Select a chain ID </option>
|
||||
{#each $supported_chains as chain}
|
||||
<option value={chain.slice(7)}>
|
||||
{chain.slice(7)}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
<Button on:click={handleSwitch}>Switch Chain</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.main {
|
||||
width: 230px;
|
||||
word-wrap: break-word;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.action {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
select {
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
option[value=''][disabled] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -14,7 +14,7 @@
|
||||
<span class="btn">
|
||||
<w3m-button />
|
||||
<a
|
||||
href="https://github.com/WalletConnect/evm-e2e-dapp"
|
||||
href="https://github.com/WalletConnect/web-examples/tree/main/dapps/web3modal/svelte"
|
||||
target="_blank"
|
||||
rel="noreferrer nofollow"
|
||||
>
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
import Network from '../partials/Network.svelte'
|
||||
import SignMessage from '../partials/SignMessage.svelte'
|
||||
import SignTypeData from '../partials/SignTypeData.svelte'
|
||||
import SwitchChain from '../partials/SwitchChain.svelte'
|
||||
import Transaction from '../partials/Transaction.svelte'
|
||||
import Wallet from '../partials/Wallet.svelte'
|
||||
</script>
|
||||
@ -15,7 +14,6 @@
|
||||
{#if $account.isConnected}
|
||||
<SignMessage />
|
||||
<SignTypeData />
|
||||
<SwitchChain />
|
||||
<Transaction />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user