Build your own Ecosystem

Build a public or permissioned ecosystem by allowing third party apps and games to connect to the same accounts.

Connect Embed

Connect to your ecosystem with a prebuilt UI. All settings are controlled in your dashboard.

Code

import { ecosystemWallet } from "thirdweb/wallets";
import { ConnectEmbed } from "thirdweb/react";

const wallets = [
  // all settings are controlled in your dashboard
  // including permissions, auth options, etc.
  ecosystemWallet("ecosystem.your-ecosystem-name"),
];

function App() {
  return <ConnectEmbed client={client} wallets={wallets} />;
}

Preview

View Linked Profiles

View all web2 and web3 linked profiles for a user along with specific details for each profile type, including name, email, profile picture and more.

Code

import { useProfiles, useActiveAccount, ConnectButton } from "thirdweb/react";

function App() {
  const account = useActiveAccount();
  const { data: profiles } = useProfiles({
    client,
  });

  if (!account) {
    return <ConnectButton client={client} />;
  }

  return <code> {JSON.stringify(profiles || [], null, 2)}</code>;
}

Preview

Link a Profile

Link a web2 or web3 profile to the connected account.
You can do this with hooks like shown here or from the prebuilt connect UI.

Code

import {
  useLinkProfile,
  useActiveAccount,
  ConnectButton,
} from "thirdweb/react";

function App() {
  const { mutate: linkProfile, isPending, error } = useLinkProfile();

  const linkMetamask = () => {
    // link any external wallet
    linkProfile({
      client: THIRDWEB_CLIENT,
      strategy: "wallet",
      wallet: createWallet("io.metamask"), // or any other wallet
      chain: baseSepolia,
    });
  };

  const linkPasskey = () => {
    // link any web2 identity provider
    linkProfile({
      client: THIRDWEB_CLIENT,
      strategy: "passkey", // or "email", "phone", etc.
      type: "sign-up",
    });
  };

  if (!account) {
    return <ConnectButton client={client} />;
  }

  return (
    <div>
      <button onClick={linkMetamask}>Link Metamask</button>
      <button onClick={linkPasskey}>Link Passkey</button>
    </div>
  );
}

Preview