@portal-payments/wallet-adapter-anchor

AnchorConnectionProvider component and workSpace for Solana wallets using Svelte

Installing

You have already installed the core package to run the wallet Svelte Store @portal-payments/wallet-adapter-core and the UI components to use the wallet @portal-payments/wallet-adapter-ui. Then install the AnchorConnectionProvider component and workSpace file contained in this package.

npm i @portal-payments/wallet-adapter-anchor

Set Up

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).

SvelteKit

In the __layout.svelte component you can import the wallets and setup the UI components.

<script lang="ts">
  import { walletStore } from "@portal-payments/wallet-adapter-core";
  import { WalletProvider, WalletMultiButton } from "@portal-payments/wallet-adapter-ui";
  import { AnchorConnectionProvider, workSpace } from "@portal-payments/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 />

Svelte Template

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 "@portal-payments/wallet-adapter-core";
  import { WalletProvider, WalletMultiButton } from "@portal-payments/wallet-adapter-ui";
  import { AnchorConnectionProvider, workSpace } from "@portal-payments/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}

Example Implementation

See example implementations of the @portal-payments/wallet-adapter-ui library.

• Demo site