@svelte-on-solana/wallet-adapter-ui
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.20-alpha.0 • Public • Published

    @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](https://github.com/svelte-on-solana/wallet-adapter/blob/master/packages/anchor/README.md) 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.

    Install

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

    DownloadsWeekly Downloads

    28

    Version

    1.0.20-alpha.0

    License

    none

    Unpacked Size

    50.8 kB

    Total Files

    20

    Last publish

    Collaborators

    • silvestrevivo
    • c_ogoo