Quickstart

Learn how to add Connect SDK to your application, log in your users, and allow them to interact with your application.

The following guide is in Typescript. You can also learn how to integrate Connect with our Unity SDK.

---

npm i thirdweb

Log in to the thirdweb dashboard. Navigate to the Settings page and create an API key to get your Client ID.

import { createThirdwebClient } from "thirdweb";
import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
 
export const client = createThirdwebClient({ clientId: <your_client_id> });
 
export default function App() {
  return (
    <ThirdwebProvider>
      <ConnectButton client={client} />
    </ThirdwebProvider>
  );
}

Once your user has logged in, interact with the application using different functions such as fetching balances, wallet addresses and sending transactions.

import { useActiveAccount, useWalletBalance } from "thirdweb/react";
 
export default function MyComponent() {
  // get wallet address
  const account = useActiveAccount();
  console.log("wallet address", account?.address);
 
  // get balance
  const { data: balance, isLoading } = useWalletBalance({
    client,
    chain,
    address: account?.address,
  });
  console.log(
    "wallet balance",
    balance?.displayValue,
    balance?.symbol,
  );
}

import { getContract } from "thirdweb";
import { sepolia } from "thirdweb/chains";
import { useActiveAccount, useSendTransaction } from "thirdweb/react";
import { transfer } from "thirdweb/extensions/erc20";
 
const USDC = getContract({
  client,
  address: USDC_ADDRESS,
  chain: sepolia,
});
 
export default function MyComponent() {
  const account = useActiveAccount();
  const { mutate: sendTransaction, isPending } = useSendTransaction();
 
  const onClick = () => {
    // send 15 USDC to the target address
    const transaction = transfer({
      contract: USDC,
      amount: 15,
      to: "0x...",
    });
    sendTransaction(transaction);
  };
}

View the full reference.

With Connect instantiated and your user logged in, you can now access all the powerful features your app needs to succeed!