Most of my OS contributions/projects have been led by curiosity.

Today, we’ll be trying to debug one such recent experiment I ran -

Q: How many of you understand the solana wallet adapter?

https://anza-xyz.github.io/wallet-adapter/example/

https://solana.com/developers/cookbook/wallets/connect-wallet-react

https://solana.com/developers/guides/wallets/add-solana-wallet-adapter-to-nextjs

Wallet standard - https://github.com/wallet-standard/wallet-standard

Creating a quick nextjs app -

npx create-next-app@latest

yarn add @solana/web3.js \\
    @solana/wallet-adapter-base \\
    @solana/wallet-adapter-react \\
    @solana/wallet-adapter-react-ui \\
    @solana/wallet-adapter-wallets

"use client";
import React, { useMemo } from "react";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import { clusterApiUrl } from "@solana/web3.js";
 
export default function AppWalletProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const network = WalletAdapterNetwork.Devnet;
  const endpoint = useMemo(() => clusterApiUrl(network), [network]);
  const wallets = useMemo(
    () => [
      // manually add any legacy wallet adapters here
      // new UnsafeBurnerWalletAdapter(),
    ],
    [network],
  );
 
  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>{children}</WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
}

// Default styles that can be overridden by your app
require("@solana/wallet-adapter-react-ui/styles.css");

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import AppWalletProvider from "./components/AppWalletProvider";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppWalletProvider>{children}</AppWalletProvider>
      </body>
    </html>
  );
}

"use client";
 
import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
 
export default function Home() {
  return (
    <main className="flex items-center justify-center min-h-screen">
      <div className="border hover:border-slate-900 rounded">
        <WalletMultiButton style={{}} />
      </div>
    </main>
  );
}