React (Vite)

npm install @phantom/react-sdk @solana/web3.js

// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { PhantomProvider, darkTheme } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <PhantomProvider
      config={{
        providers: ["google", "apple", "injected"],
        appId: "your-app-id", // Get from phantom.com/portal
        addressTypes: [AddressType.solana],
        authOptions: {
          redirectUrl: "https://yourapp.com/callback",
        },
      }}
      theme={darkTheme}
      appName="Your App"
    >
      <App />
    </PhantomProvider>
  </React.StrictMode>
);

// src/App.tsx
import { useModal, usePhantom, useAccounts, useDisconnect, useSolana } from "@phantom/react-sdk";

function App() {
  const { open } = useModal();
  const { isConnected, isLoading } = usePhantom();
  const addresses = useAccounts();
  const { disconnect } = useDisconnect();
  const { solana } = useSolana();

  if (isLoading) return <p>Loading...</p>;

  if (isConnected && addresses) {
    return (
      <div>
        <p>Connected: {addresses[0]?.address}</p>
        <button onClick={() => solana.signMessage("Hello!")}>Sign Message</button>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    );
  }

  return (
    <div>
      <h1>Welcome</h1>
      <button onClick={open}>Connect Wallet</button>
    </div>
  );
}

export default App;

// src/Callback.tsx
import { ConnectBox } from "@phantom/react-sdk";

function Callback() {
  return (
    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh" }}>
      <ConnectBox />
    </div>
  );
}

export default Callback;

// src/main.tsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import Callback from "./Callback";

// Inside your PhantomProvider:
<BrowserRouter>
  <Routes>
    <Route path="/" element={<App />} />
    <Route path="/callback" element={<Callback />} />
  </Routes>
</BrowserRouter>