draft: swap example

Author: boosik-sol

examples/ts-sdk/next/app/components/ConnectWalletButton.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useState } from "react";
+import { useWallets } from "@wallet-standard/react";
+import { useWallet } from "../contexts/WalletContext";
+import { Button } from "./ui/button";
+import { WalletListModal } from "./WalletListModal";
+
+export function ConnectWalletButton() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const wallets = useWallets();
+  const { account, isConnected } = useWallet();
+
+  const solanaWallets = wallets.filter((wallet) =>
+    wallet.chains.some((chain) => chain.startsWith("solana:"))
+  );
+
+  if (isConnected && account) {
+    return (
+      <div className="wallet-connected">
+        <div className="status-dot"></div>
+        <span className="wallet-address">
+          {account.address.slice(0, 4)}...{account.address.slice(-4)}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Button onClick={() => setIsModalOpen(true)}>Connect Wallet</Button>
+      <WalletListModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        wallets={solanaWallets}
+      />
+    </>
+  );
+}

examples/ts-sdk/next/app/components/WalletListModal.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import {
+  useConnect,
+  useDisconnect,
+  type UiWallet,
+} from "@wallet-standard/react";
+import { useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { useWallet } from "../contexts/WalletContext";
+  
+  interface WalletListModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    wallets: UiWallet[];
+  }
+  
+  export function WalletListModal({
+    isOpen,
+    onClose,
+    wallets,
+  }: WalletListModalProps) {
+    return (
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Connect Wallet</DialogTitle>
+          </DialogHeader>
+          <DialogDescription>Select a wallet to connect to.</DialogDescription>
+          <div className="flex flex-col gap-2">
+            {wallets.map((wallet) => (
+              <WalletListItem
+                key={wallet.name}
+                wallet={wallet}
+                onConnect={onClose}
+              />
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+  
+  interface WalletItemProps {
+    wallet: UiWallet;
+    onConnect?: () => void;
+  }
+  
+export const WalletListItem = ({ wallet, onConnect }: WalletItemProps) => {
+  const [isConnecting, connect] = useConnect(wallet);
+  const [isDisconnecting, disconnect] = useDisconnect(wallet);
+  const { setConnectedWallet, isConnected } = useWallet();
+
+  useEffect(() => {
+    if (isDisconnecting) {
+      setConnectedWallet(null);
+    }
+  }, [isDisconnecting, setConnectedWallet]);
+
+  const handleConnect = async () => {
+    try {
+      const connectedAccount = await connect();
+      if (!connectedAccount.length) {
+        console.warn(`Connect to ${wallet.name} but there are no accounts.`);
+        return connectedAccount;
+      }
+
+      const first = connectedAccount[0];
+      setConnectedWallet({ account: first, wallet });
+      onConnect?.(); // Close modal after successful connection
+      return connectedAccount;
+    } catch (error) {
+      console.error("Failed to connect wallet:", error);
+    }
+  };
+
+  return (
+    <button
+      className="wallet-item"
+      onClick={isConnected ? disconnect : handleConnect}
+      disabled={isConnecting}
+    >
+      {wallet.icon ? (
+        <img
+          src={wallet.icon}
+          alt={wallet.name}
+          className="wallet-icon"
+        />
+      ) : (
+        <div className="wallet-icon-fallback">
+          <span>
+            {wallet.name.charAt(0).toUpperCase()}
+          </span>
+        </div>
+      )}
+      <div className="wallet-info">
+        <div className="wallet-name">
+          {isConnecting ? "Connecting..." : wallet.name}
+        </div>
+        <div className="wallet-status">
+          {isConnecting ? "Please wait..." : "Click to connect"}
+        </div>
+      </div>
+      {isConnecting && (
+        <div className="spinner" />
+      )}
+    </button>
+  );
+};

examples/ts-sdk/next/app/components/ui/button.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "outline" | "ghost";
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className = "", variant = "default", ...props }, ref) => {
+    const baseClass = "btn";
+    const variantClass = variant === "outline" ? "btn-outline" : "btn-primary";
+    const finalClassName = `${baseClass} ${variantClass} ${className}`.trim();
+
+    return (
+      <button
+        className={finalClassName}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export { Button };

examples/ts-sdk/next/app/components/ui/dialog.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect } from "react";
+
+const DialogContext = createContext<{
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}>({
+  open: false,
+  setOpen: () => {},
+});
+
+interface DialogProps {
+  children: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function Dialog({ children, open, onOpenChange }: DialogProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = open !== undefined;
+  const dialogOpen = isControlled ? open : internalOpen;
+
+  const setOpen = (newOpen: boolean) => {
+    if (isControlled) {
+      onOpenChange?.(newOpen);
+    } else {
+      setInternalOpen(newOpen);
+    }
+  };
+
+  return (
+    <DialogContext.Provider value={{ open: dialogOpen, setOpen }}>
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+interface DialogContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DialogContent({ children, className = "" }: DialogContentProps) {
+  const { open, setOpen } = useContext(DialogContext);
+
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="modal-overlay"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) {
+          setOpen(false);
+        }
+      }}
+    >
+      <div
+        className={`modal-content ${className}`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+interface DialogHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DialogHeader({ children, className = "" }: DialogHeaderProps) {
+  return (
+    <div className={className} style={{ marginBottom: '16px' }}>
+      {children}
+    </div>
+  );
+}
+
+interface DialogTitleProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DialogTitle({ children, className = "" }: DialogTitleProps) {
+  return (
+    <h2 className={`modal-title ${className}`}>
+      {children}
+    </h2>
+  );
+}
+
+interface DialogDescriptionProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DialogDescription({ children, className = "" }: DialogDescriptionProps) {
+  return (
+    <p className={`modal-description ${className}`}>
+      {children}
+    </p>
+  );
+}

examples/ts-sdk/next/app/contexts/WalletContext.tsx

@@ -0,0 +1,83 @@
+import { createContext, useContext, useState, useMemo } from "react";
+import type { ReactNode } from "react";
+import type { UiWalletAccount, UiWallet } from "@wallet-standard/react";
+import { useWalletAccountTransactionSendingSigner } from "@solana/react";
+import type { TransactionSendingSigner } from "@solana/kit";
+
+interface ConnectedWallet {
+  account: UiWalletAccount;
+  wallet: UiWallet;
+}
+
+interface WalletContextType {
+  account: UiWalletAccount | null;
+  wallet: UiWallet | null;
+  connectedWallet: ConnectedWallet | null;
+  setConnectedWallet: (wallet: ConnectedWallet | null) => void;
+  isConnected: boolean;
+  signer: TransactionSendingSigner | null;
+}
+
+const WalletContext = createContext<WalletContextType | undefined>(undefined);
+
+function WalletProviderInner({
+  children,
+  connectedWallet,
+  setConnectedWallet
+}: {
+  children: ReactNode;
+  connectedWallet: ConnectedWallet;
+  setConnectedWallet: (wallet: ConnectedWallet | null) => void;
+}) {
+  const signer = useWalletAccountTransactionSendingSigner(connectedWallet.account, "solana:mainnet");
+
+  return (
+    <WalletContext.Provider value={{
+      account: connectedWallet.account,
+      wallet: connectedWallet.wallet,
+      connectedWallet,
+      setConnectedWallet,
+      isConnected: true,
+      signer,
+    }}>
+      {children}
+    </WalletContext.Provider>
+  );
+}
+
+export function WalletProvider({ children }: { children: ReactNode }) {
+  const [connectedWallet, setConnectedWallet] =
+    useState<ConnectedWallet | null>(null);
+
+  if (connectedWallet) {
+    return (
+      <WalletProviderInner
+        connectedWallet={connectedWallet}
+        setConnectedWallet={setConnectedWallet}
+      >
+        {children}
+      </WalletProviderInner>
+    );
+  }
+
+  const value = {
+    account: null,
+    wallet: null,
+    connectedWallet: null,
+    setConnectedWallet,
+    isConnected: false,
+    signer: null,
+  };
+
+  return (
+    <WalletContext.Provider value={value}>{children}</WalletContext.Provider>
+  );
+}
+
+export function useWallet() {
+  const context = useContext(WalletContext);
+  if (context === undefined) {
+    throw new Error("useWallet must be used within a WalletProvider");
+  }
+  return context;
+}