Sveeeth NPM | npm.io

sveeeth

A @wagmi/core wrapper built for Svelte that provides helpful store and utility functions.

Reactive stores to access useful connected wallet data.

import { connect, disconnect, account, network, contract } from "sveeeth";
import { Metamask, Walletconnect, ... } from "sveeeth/connectors";
import { mainnet, goerli, ... } from "sveeeth/chains";

For examples and code snippets, check out the example project.

Installation

Install sveeeth and its @wagmi/core dependency.

yarn add sveeeth @wagmi/core

npm install sveeeth @wagmi/core

🚗 Roadmap

connect: Connect to wallet
disconnect: Disconnect from wallet
switchNetwork: Switch network
account: The connected account details
network: The connected network details
contract: Create a contract instance
- Allow ENS to be passed in place of address
- Read/write function calls
- Listen for events
- Automatic transaction simulation
chains: re-exports everything from wagmi/core
connectors: re-exports everything from wagmi/core
ens: adding ens fetching and support
- Add edge case support for functions where the ENS should be sent raw (unfetched)
- Reactive fetching of connected account ens data
multicall: Add multicall support
signing: Add message signing
- Support for signing typed data

📕 Docs

Functions

`connect(args: ConnectArgs)`

Connect to wallet, Accepts connector argument which is a Connector type which could be MetaMask, WalletConnect, Safe etc.

<script>
  import { connect } from "sveeeth";
  import { InjectedConnector } from "sveeeth/connectors";
</script>
<button on:click={() => connect({ connector: new InjectedConnector() })}>Connect</button>

`disconnect()`

<script>
  import { disconnect } from "sveeeth";
</script>
<button on:click={() => connect({ connector: Metamask })}>Connect</button>

`contract({ address: Address, abi: Abi })`

The contract function returns a store representing the state and the contract functions

<script>
  import { contract, account } from "sveeeth";
  import { daiAddress, daiAbi } from "...";

  $: dai = contract(daiAddress, daiAbi);
  $: balance = dai.balanceOf($account.address);
  $: console.log($dai.isLoading);
</script>

An ENS name can be passed to a function in place of an address and it will be automatically fetched before the function is called.

<script>
  // instead of this
  const balance = dai.balanceOf("0x360EF498A774998900da14E81b86E9200A400ecf");
  
  // we can do this
  const balance = dai.balanceOf("bbque.eth");
</script>

`switchNetwork({ chain: Chain })`

Switch to the specified network.

Global stores

`account`

Account store that returns an object with the account details. Object contains:

{ address: Address, isConnected: boolean, isDisconnected: boolean, isConnecting: boolean, connector: Connector }

<script>
  import { account, connect } from "sveeeth";
</script>

{#if $account.isConnected}
  <p>Account: $account.address</p>
{:else}
  <button on:click={() => connect({ connector })}>Connect</button>
{/if}

`network`

Store that has the network details in it.

<script>
  import { network } from "sveeeth";
  $: ({ chain, chains } = $network);
</script>

Utility stores

`createSigner`

Signer store that can be used to sign messages with the connected account. Object contains:

{ data: string | null, error: any, isLoading: boolean }

<script>
  import { createSigner } from "sveeeth";
  
  const signer = createSigner();
  
  const signMessage = async () => {
    await signer.sign({ message: "test message" });
  }
</script>

{#if $signer.isLoading}
  <p>Loading...</p>
{:else if $signer.data}
  <p>Signed data: {$signer.data}</p>
{:else}
  <button on:click={signMessage}>Sign</button>
{/if}