@portal-payments/wallet-adapter-anchor
TypeScript icon, indicating that this package has built-in type declarations

2.0.3 • Public • Published

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

Package Sidebar

Install

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

Weekly Downloads

1

Version

2.0.3

License

none

Unpacked Size

10.8 kB

Total Files

12

Last publish

Collaborators

  • mikemaccana