phantom/phantom-agent-kit/setup-browser-app

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

import { BrowserSDK, AddressType } from "@phantom/browser-sdk";
const sdk = new BrowserSDK({
  appId: "your-app-id-from-phantom-portal",
  providers: ["google", "apple"],
  addressTypes: [AddressType.Solana, AddressType.Ethereum],
});

async function connectWallet() {
  try {
    const accounts = await sdk.connect();
    console.log("Connected accounts:", accounts);
    const solanaAccount = accounts.find((a) => a.chain === "solana");
    if (solanaAccount) {
      console.log("Solana address:", solanaAccount.address);
    }
  } catch (error) {
    console.error("Connection failed:", error);
  }
}
async function disconnectWallet() {
  try {
    await sdk.disconnect();
    console.log("Disconnected");
  } catch (error) {
    console.error("Disconnect failed:", error);
  }
}

// Solana operations
const solana = sdk.solana;
// Sign and send a transaction
const { signature } = await solana.signAndSendTransaction(transaction);
// Sign a message
const { signature: msgSig } = await solana.signMessage(
  new TextEncoder().encode("Hello from Phantom!")
);

function isWalletConnected(): boolean {
  return sdk.isConnected;
}
function getAccounts() {
  return sdk.accounts;
}

<!DOCTYPE html>
<html>
  <body>
    <button id="connect">Connect Wallet</button>
    <button id="disconnect" style="display:none">Disconnect</button>
    <p id="address"></p>
    <script type="module" src="./main.ts"></script>
  </body>
</html>