Connect Users to your Ecosystem

If you're building a React website, React Native app, or Unity game you can use the prebuilt connect UI components to authenticate users and connect their wallets accross your ecosystem.

import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
 
const client = createThirdwebClient({ clientId });
const wallets = [ecosystemWallet("ecosystem.your-ecosystem-id")];
 
export default function App() {
  return (
    <ThirdwebProvider>
      <ConnectButton client={client} wallets={wallets} />
    </ThirdwebProvider>
  );
}

You can also build your own UI using the low-level hooks and functions. Remember to wrap your app in a ThirdwebProvider to ensure that the wallet is available to all components in your app.

import { ecosystemWallet } from "thirdweb/wallets";
 
const wallet = ecosystemWallet("ecosystem.your-ecosystem-id");
 
const LoginComponent = () => {
  const { connect, isLoading } = useConnect();
 
  return (
    <button
      onClick={() =>
        connect(async () => {
          await wallet.connect({
            client,
            strategy: "discord", // or any supported auth strategy
          });
          return wallet;
        })
      }
    >
      Connect
    </button>
  );
};

For closed ecosystems, you can pass a valid partnerId to the ecosystemWallet provided by the ecosystem owner.

const wallet = ecosystemWallet("ecosystem.your-ecosystem-id", {
  partnerId: "your-partner-id",
});