Skip to content

Latest commit

 

History

History
99 lines (78 loc) · 3.44 KB

notes.md

File metadata and controls

99 lines (78 loc) · 3.44 KB

Notes for Solana Client Development

Next.js Solana Wallet Adapter Integration

Connecting your Next.js application to Solana involves integrating a Solana wallet adapter, which allows users to interact with their Solana wallets directly from your app. Here's a step-by-step guide:

  1. Create a Next.js Project
npx create-next-app@latest my-solana-app
  1. Install Solana Wallet Adapter Dependencies
cd my-solana-app
npm install @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/web3.js
  1. Set up Solana Wallet Adapter

• Create a Wallet Context: Create a file like _app.js or context/WalletContext.js to wrap your application with the necessary providers.

// _app.js
import { WalletProvider } from '@solana/wallet-adapter-react';
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
import { ConnectionProvider, WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { PhantomWalletAdapter } from '@solana/wallet-adapter-wallets';
import { clusterApiUrl } from '@solana/web3.js';

const network = WalletAdapterNetwork.Devnet;
const endpoint = clusterApiUrl(network);
const wallets = [new PhantomWalletAdapter()];

function MyApp({ Component, pageProps }) {
  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>
          <Component {...pageProps} />
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
}

export default MyApp;
  1. Add a Connect Wallet Button
// pages/index.js
import { useWallet } from '@solana/wallet-adapter-react';

export default function Home() {
  const { connect, publicKey } = useWallet();

  return (
    <div>
      {publicKey ? (
        <p>Connected: {publicKey.toString()}</p>
      ) : (
        <button onClick={() => connect()}>Connect Wallet</button>
      )}
    </div>
  );
}
  1. Utilize Wallet Context
// pages/profile.js
import { useConnection, useWallet } from '@solana/wallet-adapter-react';

export default function Profile() {
  const { connection } = useConnection();
  const { publicKey } = useWallet();

  // Use connection and publicKey to interact with the Solana blockchain
  // ...
}
  1. Customize Wallet Adapter UI You can customize the look and feel of the wallet modal and other UI elements provided by @solana/wallet-adapter-react-ui.

Generative AI is experimental.

[-] https://solana.stackexchange.com/questions/1657/solana-wallet-adaptor-autoconnecting-after-reload-change-page[-] https://solana.stackexchange.com/questions/1657/solana-wallet-adaptor-autoconnecting-after-reload-change-page[-] https://solana.stackexchange.com/questions/1657/solana-wallet-adaptor-autoconnecting-after-reload-change-page[-] https://solana.stackexchange.com/questions/1657/solana-wallet-adaptor-autoconnecting-after-reload-change-page

MISC