web3-stores v0.0.7

web3-stores

This package is still in alpha and constantly changes.

Installation

yarn add web3-stores

# or

npm install web3-stores

Provider Store

Currently, only injected providers are supported.

<script lang="ts">
	import { providerStore } from 'web3-stores';

	// Connect an injected provider.
	providerStore.connect();

	// Disconnect from the injected provider.
	providerStore.disconnect();

	// Subscribe to store values.
	$providerStore.provider;
	$providerStore.accounts;
	$providerStore.chainId;
	$providerStore.connected;

	// Latest error message.
	$providerStore.error;
</script>

Contract Store

It is possible to create a contract instance based on the provider store.

<script lang="ts">
	import { createContractStore } from 'web3-stores';

	// Optionally, you can use the natspec comments provided in the user doc to
	// automatically generated custom error messages.
	const userDoc = {
		'TestError(uint256,uint256)': [
			{
				notice: '`a` is greater than `b`.'
			}
		]
	};

	// Create a contract store.
	const erc20 = createContractStore(contractAddress, contractAbi, userDoc);

	// Ethers.js contract instance.
	$erc20.contract;

	// Write / Read calls that automatically handle errors.
	erc20.call('<methodName>' /*[<param1>, <...>]*/);

	// Latest error message.
	$erc20.error;
</script>

Sign-In-with Ethereum

This package provides a helper method to create a siwe message and sign it with the provider store.

<script lang="ts">
	import { createSiweStore } from 'web3-stores';

	// Get a siwe store that contains an object with the message & the signature.
	// This store automatically updates once the provider has changed
	// and can therefore be used to trigger an authentication request
	// as shown below.

	/// @dev Pass in a siwe object if you want to overwrite the default settings.
	const siwe = await createSiweStore();

	$: fetch(`${BACKEND_ADDR}`, {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json'
		},
		body: JSON.stringify($siwe.object),
		credentials: 'include'
	});

	// Latest error message.
	$siwe.error;
</script>

Development

Once you've downloaded the project and installed dependencies with yarn install, start a development server:

yarn dev

# or start the server and open the app in a new browser tab
yarn dev --open

Build

Before creating a production version of your app, install an adapter for your target environment.

yarn build

You can preview the built app with yarn preview, regardless of whether you installed an adapter. This should not be used to serve your app in production.