@phantom/react-native-wallet-sdk

Phantom React Native SDK

Phantom React Native SDK allows you to seamlessly onboard users to your application, without requiring them to have previously installed a wallet. With Phantom React Native SDK, users can create a self-custodial wallet with just their Google account and a 4-digit pin. Once created, this wallet will automatically sync with Phantom's mobile and extension apps without the user needing to know their seed phrase or manage any private keys.

Features

• Create self custodial wallets without leaving your application
• Onboard users via Sign in with Google and a 4-digit pin (no seed phrases)
• Sync embedded wallets with Phantom's mobile and extension apps
• Sign transactions and messages on Solana (more chains coming soon)
• View, send, and receive tokens on Solana, Ethereum, Bitcoin, Base, and Polygon
• Pricing: FREE

Quickstart

1. Install the Phantom React Native SDK

yarn | npm | pnpm add @phantom/react-native-wallet-sdk

2. Load the Phantom Embedded wallet in your mobile application and start signing transactions and messages

import { PhantomProvider, usePhantom } from "@phantom/react-native-wallet-sdk";
import { PublicKey, VersionedTransaction } from "@solana/web3.js";
import React, { useMemo } from "react";
import { Alert, Button, View } from "react-native";

// Configure Phantom wallet
const phantomConfig = {
  redirectURI: "my-app://",
  sdkKey: "my-sdk-key",
  autoShowLoginIfNeeded: true, // Optional: shows login modal automatically when needed
};

// Main app component
export default function App() {
  return (
    <PhantomProvider config={phantomConfig}>
      <WalletContent />
    </PhantomProvider>
  );
}

// Component that uses the Phantom wallet
function WalletContent() {
  // Get access to the wallet state and methods
  const { phantom, isLoggedIn, addresses, showLoginOptions, logout } = usePhantom();

  // Extract Solana public key if available
  const solanaPublicKey = useMemo(() => {
    if (addresses && addresses.length > 0 && addresses[0].solana) {
      return new PublicKey(addresses[0].solana);
    }
    return null;
  }, [addresses]);

  // If not logged in, show login button
  if (!isLoggedIn) {
    return (
      <View>
        <Button title="Login with Phantom" onPress={showLoginOptions} />
      </View>
    );
  }

  // Sign a message or transaction with the Phantom Embedded wallet
  const handleSignMessage = async () => {
    if (!phantom) return;

    const { signature } = await phantom.providers.solana.signMessage(new TextEncoder().encode("Hello, world!"));
    Alert.alert("Signature", JSON.stringify(signature));
  };

  const handleSignTransaction = async () => {
    if (!phantom || !solanaPublicKey) return;

    const transaction = new VersionedTransaction(/* Create your transaction here */);
    const signedTransaction = await phantom.providers.solana.signTransaction(transaction);
    Alert.alert("Signature", JSON.stringify(signedTransaction.serialize()));
  };

  return (
    <View>
      {/* Show connected wallet address */}
      {solanaPublicKey && (
        <Text>
          Connected: {solanaPublicKey.toString().slice(0, 4)}...{solanaPublicKey.toString().slice(-4)}
        </Text>
      )}

      <Button title="Sign Message" onPress={handleSignMessage} />
      <Button title="Sign Transaction" onPress={handleSignTransaction} />
      <Button title="Logout" onPress={logout} />
    </View>
  );
}

Configuration

The following parameters can be passed to the PhantomProvider to customize the Phantom Embedded wallet experience.

Parameter	Type	Description
sdkKey	string	Contact Phantom for your SDK key
redirectURI	string	A base URI that will redirect to your app. Can be a custom scheme (e.g. my-app://) or a universal link (e.g. https://my-app.com).
autoShowLoginIfNeeded	boolean	(Optional) If true, automatically shows login options when user is not logged in. Defaults to true.

See It In Action

Try out Phantom Embedded via our demo app:

Give Feedback

Phantom React Native SDK is in active development and will be prioritizing features requested by early adopters. If you are interested in working with us, please email us at [e-mail] or message @brianfriel on Telegram.

Frequently Asked Questions

How does the embedded wallet work with the Phantom extension?

If the user has a social account linked to their Phantom extension - the same Phantom account will be used in the Phantom React Native SDK.

What does the PhantomProvider do?

The PhantomProvider creates a context that manages the authentication state and provides a convenient interface to interact with the Phantom wallet. It also handles showing the login UI when needed and persists the login state between app sessions automatically.

How do I interact with the embedded wallet?

Use the `usePhantom` hook inside a component that's wrapped with `PhantomProvider` to access the wallet functionality.
This gives you access to the wallet state (isLoggedIn, addresses) and methods for interacting with the wallet.

How much does this cost?

It's free!

Disclaimers

We are providing early access to beta software for testing purposes only. Embedded wallet should be used in a non-production environment only. Phantom will not be liable for any losses or damages suffered by you or your end users if you push the early access version of embedded wallets to a production environment.

All suggestions, enhancement requests, recommendations or other feedback provided by you relating to the embedded wallet will be the sole and exclusive property of Phantom and by using the early access version of embedded wallets and providing feedback to Phantom you agree to assign any rights in that feedback to Phantom.