AnchorConnectionProvider
component and workSpace
for Solana wallets using Svelte
You have already installed the core package to run the wallet Svelte Store @svelte-on-solana/wallet-adapter-core and the UI components to use the wallet @svelte-on-solana/wallet-adapter-ui. Then install the AnchorConnectionProvider
component and workSpace
file contained in this package.
npm i @svelte-on-solana/wallet-adapter-anchor
Add @project-serum/anchor
to optimizeDeps
inside vite.config.js
. This pre-bundles the @project-serum/anchor
package. This steps converts CommonJS dependencies into ESM ( Vite's dev server serves all code as native ESM ).
import { sveltekit } from '@sveltejs/kit/vite'
/** @type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()],
// ... use the same implementation from the SvelteKit ui
optimizeDeps: {
include: ['@project-serum/anchor', '@solana/web3.js', 'buffer'],
// ... use the same implementation from the SvelteKit ui
}
// ... use the same implementation from the SvelteKit ui
}
export default config
The AnchorConnectionProvider
for Anchor Dapps accepts the next props.
prop | type | default |
---|---|---|
network | string |
|
idl | Idl |
It is automatically connected to the workSpace
defining all the parameters to share among the components in your Anchor Dapp (baseAccount, connection, provider, program, systemProgram and network).
In the __layout.svelte component you can import the wallets and setup the UI components.
<script lang="ts">
import { walletStore } from '@svelte-on-solana/wallet-adapter-core';
import { WalletProvider, WalletMultiButton } from '@svelte-on-solana/wallet-adapter-ui';
import { AnchorConnectionProvider, workSpace } from '@svelte-on-solana/wallet-adapter-anchor';
import { clusterApiUrl } from '@solana/web3.js';
import idl from '../../../target/idl/<my-anchor-project>.json';
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 />
<AnchorConnectionProvider {network} {idl} />
<div>
<slot />
</div>
<WalletMultiButton />
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 { WalletProvider, WalletMultiButton } from '@svelte-on-solana/wallet-adapter-ui';
import { AnchorConnectionProvider, workSpace } from '@svelte-on-solana/wallet-adapter-anchor';
import { clusterApiUrl } from '@solana/web3.js';
import idl from '../../../target/idl/<my-anchor-project>.json';
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 />
<AnchorConnectionProvider {network} {idl} />
<WalletMultiButton />
{#if $walletStore?.connected}
<div>My wallet is connected</div>
{/if}
See example implementations of the @svelte-on-solana/wallet-adapter-ui
library.