svelte-web3-provider
v0.0.1-setprovider
Published
Detects whether the user is using MetaMask or Ethereum wallet-enabled browser. If not, it will access the Ethereum network through a given Web3 fallback provider (e.g. INFURA node).
Downloads
9
Maintainers
Readme
Svelte Web3 Provider
svelte web3 is provider for web3.js for handle request network to metamask or other provider. Example see here.
Contribute
Need Contribution For Better Docs
Instalation
Use any package manager do you want.
// Using Yarn to install
yarn add --dev svelte-web3-provider
// or if you prefer NPM
npm install --save-dev svelte-web3-provider
Basic Usage
You must add Web3Provider
to root layout and Web3Provider will detect if browser support etehreum or not. if not, you can set fallback provider.So, it will use the provider you have set.
<script>
// routes/+layout.svelte
import Web3Provider from 'svelte-web3-provider';
import net from 'net'
import Web3 from 'web3'
</script>
<!-- No Fallback Provider -->
<Web3Provider />
<!-- With Fallback Provider -->
<Web3Provider fallbackProvider="http://localhost:8545" />
<Web3Provider fallbackProvider={new Web3.providers.WebsocketProvider('ws://localhost:8546')} />
<Web3Provider fallbackProvider={new Web3.providers.IpcProvider('/Users/myuser/Library/Ethereum/geth.ipc', net)} />
<slot/>
Then, you can do everything u need with web3.js. like this
<script>
// routes/auto/+layout.svelte
import Web3Provider from '$lib';
</script>
<Web3Provider/>
<main>
<slot />
</main>
<script>
// routes/auto/+page.svelte
import { connected, isLoading, isSupportEthereum, selectedAccount, web3 } from 'svelte-web3-provider';
let balance = '';
$: if ($web3 && $selectedAccount) {
$web3.eth.getBalance($selectedAccount).then(value => {
balance=value
});
}
</script>
<p>{$selectedAccount || 'no address'}</p>
<p>Balance: {balance}</p>
{#if $connected}
Connected wallet
{:else}
wallet not connected
{/if}
{#if $isLoading}
<p>Loading...</p>
{/if}
{#if !$isSupportEthereum}
<p>not support ethereum network</p>
{/if}
Change provider on the fly
you can change your provider on the fly(example: change provider after 2 seconds). use setProvider
<script>
// routes/onthefly/+layout.svelte
import Web3Provider from '$lib';
</script>
<Web3Provider/>
<main>
<slot />
</main>
<script>
// routes/onthefly/+page.svelte
import { browser } from '$app/environment';
import {
connected,
isLoading,
isSupportEthereum,
selectedAccount,
setProvider,
web3
} from '$lib';
let balance = '';
$: if (browser) {
setTimeout(() => {
// do like this
setProvider('http://127.0.0.1:8545');
}, 2000);
}
$: if ($web3 && $selectedAccount) {
$web3.eth.getBalance($selectedAccount).then((value) => {
balance = value;
});
}
</script>
<p>{$selectedAccount || 'no address'}</p>
<p>Balance: {balance}</p>
{#if $connected}
Connected wallet
{:else}
wallet not connected
{/if}
{#if $isLoading}
<p>Loading...</p>
{/if}
{#if !$isSupportEthereum}
<p>not support ethereum network</p>
{/if}
Manual Setup Provider
you have to set manual props in Web3Provider
to disable detect automatically browser and do what you want
<script>
// routes/manual/+layout.svelte
import Web3Provider from '$lib';
</script>
<Web3Provider manual/>
<main>
<slot />
</main>
<script>
// routes/manual/+page.svelte
import { browser } from '$app/environment';
import {
connected,
isLoading,
isSupportEthereum,
selectedAccount,
setProvider,
web3
} from '$lib';
let balance = '';
$: if (browser) {
// set your provider like this
// then, all store will reactivy automatically
setProvider('http://127.0.0.1:8545');
}
$: if ($web3 && $selectedAccount) {
$web3.eth.getBalance($selectedAccount).then((value) => {
balance = value;
});
}
</script>
<p>{$selectedAccount || 'no address'}</p>
<p>Balance: {balance}</p>
{#if $connected}
Connected wallet
{:else}
wallet not connected
{/if}
{#if $isLoading}
<p>Loading...</p>
{/if}
{#if !$isSupportEthereum}
<p>not support ethereum network</p>
{/if}
Store
u can see available store in this file