npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@svelte-on-solana/wallet-adapter-ui

v1.0.21-alpha.0

Published

Pre-built components for integrating with Solana wallets using Svelte

Downloads

711

Readme

@svelte-on-solana/wallet-adapter-ui

Pre-built components for integrating with Solana wallets using Svelte

Getting Started

The UI components need to be installed into a project that is already set up with @solana/web3.js and the base wallet adapters. Therefore, it cannot work standalone.

During this process, you will:

  • 📦 Install the base wallet adapters
  • 📦 Install the svelte adapter and svelte UI
  • 🔨 Add the ConnectionProvider (AnchorConnectionProvider if you're using Anchor)
  • 🔨 Add the WalletProvider component
  • 🔨 Add the WalletMultiButton component

Installing

You have already installed the core package to run the wallet Svelte Store @svelte-on-solana/wallet-adapter-core. Then install the UI components contained in this package

npm i @svelte-on-solana/wallet-adapter-ui

Set Up

There are three components that you need to get set up:

  • WalletProvider
  • ConnectionProvider ([AnchorConnectionProvider](https://github.com/svelte-on-solana/wallet-adapter/blob/master/packages/anchor/README.md) if you're using Anchor)
  • WalletMultiButton

WalletProvider is a component used to initialize the wallet stores and add event listeners

| prop | type | default | | ---------------- | ----------- | ----------------- | | localStorageKey? | string | 'walletAdapter' | | wallets | Wallets[] | | | autoConnect? | boolean | false |

ConnectionProvider is a component used to establish a connection with the network.

| prop | type | default | | ------- | -------- | ------- | | network | string | |

Alternatively you can use AnchorConnectionProvider for Anchor Dapps.

| prop | type | default | | ------- | -------- | ------- | | network | string | | | idl | Idl | |

WalletMultiButton is a component used as the entry point to connect/disconnect a wallet.

| prop | type | default | | ------------------ | -------- | ------- | | maxNumberOfWallets | number | 3 |

SvelteKit

First you need to install some additional packages to make the Torus implementation compatible with SvelteKit.

npm install -D @esbuild-plugins/node-globals-polyfill @rollup/plugin-inject rollup-plugin-node-polyfills

Then you have to adjust the vite.config.js file to prepare the project for all the Solana packages previously installed.

import { sveltekit } from '@sveltejs/kit/vite'

const config = {
	plugins: [sveltekit()],
	optimizeDeps: {
		include: ['@solana/web3.js', 'buffer'],
		esbuildOptions: {
				target: 'esnext',
				plugins: [NodeGlobalsPolyfillPlugin({ buffer: true })],
		},
	},
	resolve: {
		alias: {
			$utils: path.resolve('src/utils/'),
			stream: 'rollup-plugin-node-polyfills/polyfills/stream',
		},
	},
	define: {
		'process.env.BROWSER': true,
		'process.env.NODE_DEBUG': JSON.stringify(''),
	},
	build: {
		target: 'esnext',
		commonjsOptions: {
			transformMixedEsModules: true
		},
		rollupOptions: {
			plugins: [inject({ Buffer: ['buffer', 'Buffer'] }), nodePolyfills({ crypto: true })],
		},
	}
}

export default config

And then in the __layout.svelte component you can import the wallets and setup the UI components.

<script lang="ts">
	import { onMount } from 'svelte';
	import { clusterApiUrl } from '@solana/web3.js';
	import {
		workSpace,
		WalletProvider,
		WalletMultiButton,
		ConnectionProvider
	} from '@svelte-on-solana/wallet-adapter-ui';

	const localStorageKey = 'walletAdapter';
	const network = clusterApiUrl('devnet'); // localhost or mainnet

	let wallets;

	onMount(async () => {
		const {
		PhantomWalletAdapter,
		SlopeWalletAdapter,
		SolflareWalletAdapter,
		SolletExtensionWalletAdapter,
		TorusWalletAdapter,
		} = await import('@solana/wallet-adapter-wallets');

		const walletsMap = [
			new PhantomWalletAdapter(),
			new SlopeWalletAdapter(),
			new SolflareWalletAdapter(),
			new SolletExtensionWalletAdapter(),
			new TorusWalletAdapter(),
		];

		wallets = walletsMap;
	});
</script>

<WalletProvider {localStorageKey} {wallets} autoConnect />
<ConnectionProvider {network} />
<div>
	<slot />
</div>
<WalletMultiButton />

Svelte Template

You have to adjust some stuff in the configuration in your project.

Enable JSON module resolving in app/tsconfig.json

{
	"extends": "@tsconfig/svelte/tsconfig.json",
	"compilerOptions": {
		"resolveJsonModule": true
	},

	"include": ["src/**/*"],
	"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}

Install a few plugins to take care about JSON imports and built-on Node.js modules not available in the browser.

npm install -D @rollup/plugin-json rollup-plugin-node-builtins rollup-plugin-node-globals

Adjust rollup.config.js to import those plugins

// ... other imports
import json from '@rollup/plugin-json';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';

export default {
	// ... other configs
	plugins: [
		// ... other rollup plugins
		resolve({
			browser: true,
			dedupe: ['svelte'],
			preferBuiltins: false
		}),
		// ... more rollup plugins
		json(),
		globals(),
		builtins()
	]
};

Then in App.svelte or the entry point of your SPA, you can setup the wallet and components like this.

<script lang="ts">
	import { walletStore } from '@svelte-on-solana/wallet-adapter-core';
	import {
		workSpace,
		WalletProvider,
		WalletMultiButton,
		ConnectionProvider
	} from '@svelte-on-solana/wallet-adapter-ui';
	import { clusterApiUrl } from '@solana/web3.js';
	import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';

	const localStorageKey = 'walletAdapter';
	const network = clusterApiUrl('devnet'); // localhost or mainnet

	let wallets = [new PhantomWalletAdapter(), new SolflareWalletAdapter()];
</script>

<WalletProvider {localStorageKey} {wallets} autoConnect />
<ConnectionProvider {network} />
<WalletMultiButton />

{#if $walletStore?.connected}
<div>My wallet is connected</div>
{/if}

Working with Anchor

If you work with Anchor you will need the AnchorConnectionProvider component and its workSpace @svelte-on-solana/wallet-adapter-anchor

Example Implementation

See example implementations of the @svelte-on-solana/wallet-adapter-ui library.