@dewicats/connect-button NPM

@dewicats/connect-button

Description

The @dewicats/connect-button package provides a simple and efficient way to integrate Solana wallet connectivity into Next.js applications. It offers components and hooks that facilitate connecting to Solana wallets like Phantom or Solflare and using MagicLink for email-based user authentication.

Installation

You can install the package using either npm or Yarn:

npm i @dewicats/connect-button
# or
yarn add @dewicats/connect-button

DEMO

Link to StackBlitz Starter Project

Usage

This package is designed to be used with Next.js and requires dynamic imports to function properly.

Connect Button Provider

Wrap your application with the ConnectButtonProvider to set up the necessary context for the connect button and hooks.

import dynamic from "next/dynamic";

const ConnectButtonProvider = dynamic(
  async () => (await import("@dewicats/connect-button")).ConnectButtonProvider,
  { ssr: false }
);

const ProviderWrapper = ({ children }) => {
  const rpcHost = process.env.NEXT_PUBLIC_REACT_APP_SOLANA_RPC_HOST ?? "";
  const magicKey = process.env.NEXT_PUBLIC_MAGIC_KEY;

  return (
    <ConnectButtonProvider magicKey={magicKey} solanaRpcHost={rpcHost}>
      {children}
    </ConnectButtonProvider>
  );
};

Connect Button and useSolana Hook

Use the ConnectButton component to render a button that allows users to connect their Solana wallet.
The useSolana hook provides information about the wallet connection status.

import dynamic from "next/dynamic";
import { useSolana } from "@dewicats/connect-button";

const ConnectButton = dynamic(
  async () => await import("@dewicats/connect-button"),
  { ssr: false }
);

export default function Home() {
  const { publicKey } = useSolana();

  return (
    <main>
      <h1>Wallet Connect Button</h1>
      <h2>publicAddress: {publicKey?.toBase58()}</h2>
      <ConnectButton compresedView />
    </main>
  );
}

Next Config

Add the following to your next.config.js file to ensure that the @dewicats/connect-button package is properly bundled.

export default transpileModules([
  "mui-one-time-password-input",
  "@dewicats/connect-button",
])(nextConfig);

Attributes

Connect Button

Attribute	Type	Description
`compresedView`	`boolean`	Turn on compresed view for small screens
`disableMagicLink`	`boolean`	Disable Magic Link login option
`logo`	`JSX.Element`	Change the logIn logo
`connectLabel`	`string`	Change the connect button label

Connect Button Provider

Attribute	Type	Description
`solanaRpcHost`	`string`	Solana RPC host key
`magicKey`	`string`	Magic Link publishable API key

useSolana

Attribute	Type	Description
`publicKey`	`PublicKey` \| `undefined`	Solana public key when connected.
`connecting`	`boolean`	Loading indicator when connecting.
`connected`	`boolean`	True when successfully connected.
`magicAuthenticationStatus`	`MagicAuthenticationStatus`*	Current status of Magic Link connection.
`magic`	`InstanceWithExtensions<SDKBase, SolanaExtension[]>` \| `undefined`	Instance of Magic SDK with Solana extensions, or `undefined` if not available.
`wallet`	`Wallet` \| `null`	The current wallet instance or `null` if no wallet is connected.
`disconnecting`	`boolean`	Indicates whether the wallet is currently in the process of disconnecting.
`select`	Function	Function to select a specific wallet by name, or `null` to deselect.
`connect`	Function	Function to initiate a connection with specified wallet parameters.
`disconnect`	Function	Function to disconnect the current wallet; returns a promise.
`signAllTransactions`	Function \| `undefined`	Function to sign an array of transactions, or `undefined` if not available.
`signMessage`	Function \| `undefined`	Function to sign a message, or `undefined` if not available.
`signIn`	Function \| `undefined`	Function for signing in, optionally with specific input; returns a promise.
`sendTransaction`	Function	Function to send a transaction through the provided connection with optional transaction options.