SocketFi React SDK — Embedded Smart Wallet Overview

import { SocketFi } from "@socketfi/react";
import { useState } from "react";

const socketfi = new SocketFi({
  clientId: import.meta.env.VITE_SOCKETFI_CLIENT_ID,
  network: "TESTNET",
  brand: {
    appName: "My App",
    primaryColor: "#4F46E5",
  },
});

export default function App() {
  const [session, setSession] = useState<{
    userProfile: { id: string };
    socketfiAccessToken: string;
  } | null>(null);

  async function handleLogin() {
    try {
      const result = await socketfi.authenticate();
      setSession(result);
    } catch (error) {
      console.error("Authentication failed:", error);
    }
  }

  async function handleTransfer() {
    try {
      const result = await socketfi.requestTransaction({
        contractId: "CBXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        method: "transfer",
        args: [
          "AAAA...", // recipient address as XDR
          "AAAA...", // amount as XDR i128
        ],
      });
      console.log("Transaction hash:", result.transactionHash);
    } catch (error) {
      console.error("Transaction failed:", error);
    }
  }

  return (
    <main>
      {!session ? (
        <button onClick={handleLogin}>Continue with SocketFi</button>
      ) : (
        <>
          <p>Signed in as {session.userProfile.id}</p>
          <button onClick={handleTransfer}>Send Transfer</button>
        </>
      )}
    </main>
  );
}