Abstract global wallet

This recipe assumes you have already created an app on the Privy Dashboard and configured your Privy Provider. Refer to our React SDK Setup or React Native SDK Setup documentation to get started.

Enable Abstract integration

From the Privy dashboard, navigate to Global Wallet > Integrations.

Scroll down to find Abstract and toggle the switch to enable the integration.

Note the provider app id, you will need it in the next step.

To prompt users to log into your app with their Abstract Global Wallet, use the loginWithCrossAppAccount method from the useCrossAppAccounts hook:

import {usePrivy, useCrossAppAccounts} from '@privy-io/react-auth';

function LoginButton() {
  const {ready, authenticated} = usePrivy();
  const {loginWithCrossAppAccount} = useCrossAppAccounts();

  return (
    <button
      onClick={() => loginWithCrossAppAccount({appId: 'insert-abstract-provider-app-id'})}
      disabled={!ready || !authenticated}
    >
      Log in with Abstract Global Wallet
    </button>
  );
}

To prompt users to log into your app with their Abstract Global Wallet, use the loginWithCrossAppAccount method from the useCrossAppAccounts hook:

import {usePrivy, useCrossAppAccounts} from '@privy-io/react-auth';

function LoginButton() {
  const {ready, authenticated} = usePrivy();
  const {loginWithCrossAppAccount} = useCrossAppAccounts();

  return (
    <button
      onClick={() => loginWithCrossAppAccount({appId: 'insert-abstract-provider-app-id'})}
      disabled={!ready || !authenticated}
    >
      Log in with Abstract Global Wallet
    </button>
  );
}

To prompt users to log into your app with an account from a provider app, use the loginWithCrossApp method from the useLoginWithCrossApp hook:

import {usePrivy, useLoginWithCrossApp} from '@privy-io/expo';

function LoginButton() {
  const {ready, user} = usePrivy();
  const {loginWithCrossApp} = useLoginWithCrossApp();

  return (
    <Button
      onPress={() => loginWithCrossApp({appId: 'insert-provider-app-id'})}
      disabled={!ready || !!user}
    >
      Log in with Abstract Global Wallet
    </Button>
  );
}

Sign a message with the user's Abstract Global Wallet

To prompt users to sign a message with their Abstract Global Wallet, use the signMessage method from the useCrossAppAccounts hook:

import {usePrivy, useCrossAppAccounts} from '@privy-io/react-auth';

function SignMessageButton() {
  const {user} = usePrivy();
  const {signMessage} = useCrossAppAccounts();
  const crossAppAccount = user.linkedAccounts.find((account) => account.type === 'cross_app');
  const address = crossAppAccount.embeddedWallets[0].address;

  return (
    <button onClick={() => signMessage('Hello world', {address: address})} disabled={!address}>
      Sign a message with your Abstract Global Wallet
    </button>
  );
}

Refer to Using Global Wallets for more details.

To prompt users to sign a message with their Abstract Global Wallet, use the signMessage method from the useCrossAppAccounts hook:

import {usePrivy, useCrossAppAccounts} from '@privy-io/react-auth';

function SignMessageButton() {
  const {user} = usePrivy();
  const {signMessage} = useCrossAppAccounts();
  const crossAppAccount = user.linkedAccounts.find((account) => account.type === 'cross_app');
  const address = crossAppAccount.embeddedWallets[0].address;

  return (
    <button onClick={() => signMessage('Hello world', {address: address})} disabled={!address}>
      Sign a message with your Abstract Global Wallet
    </button>
  );
}

Refer to Using Global Wallets for more details.

To prompt users to sign a message with their Abstract Global Wallet, use the signMessage method from the useSignMessageWithCrossApp hook:

import {usePrivy, useSignMessageWithCrossApp} from '@privy-io/expo';

function SignMessageButton() {
  const {user} = usePrivy();
  const {signMessage} = useSignMessageWithCrossApp();
  const crossAppAccount = user.linked_accounts.find((account) => account.type === 'cross_app');
  const address = crossAppAccount.embedded_wallets[0].address;

  return (
    <button onClick={() => signMessage({address, message: 'Hello world'})} disabled={!address}>
      Sign a message with your cross-app wallet
    </button>
  );
}

Refer to Using Global Wallets for more details.

Recipes