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