Curiosity led projects/OS contributions

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 -

Initialize a next app

npx create-next-app@latest

Add wallet adapter dependencies

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

Create a WalletProvider

"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");

Update layout.tsx

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>
  );
}

Create the connect button

"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>
  );
}

Try making the user sign a message

"use client";

import { useConnection, useWallet } from "@solana/wallet-adapter-react";
import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
import { useState } from "react";

export default function Home() {
  const [message, setMessage] = useState("");
  const { connection } = useConnection();
  const wallet = useWallet();

  return (
    <main className="flex items-center justify-center min-h-screen">
      <div className="rounded">
        <WalletMultiButton style={{}} />
        <br />
        <br />
        <input className="p-4" type="text" placeholder="Message" onChange={(e) => setMessage(e.target.value)} />
        <br /><br />
        <button className="p-4 border rounded-full" onClick={() => {
          if (!wallet || !connection) return;
          wallet?.signMessage?.(new Uint8Array(message.split("").map(c => c.charCodeAt(0))));
        }}>Sign Message</button>
      </div>
    </main>
  );
}