Phantom Redirect
Introduction
This guide will help you use the Phantom redirect-based connect feature on mobile. Instead of deeplinking into the Phantom in-app browser, your users can enjoy a redirect-based connection, where they are automatically redirected between the app and their wallet to faciliate the connect, sign and additional method calls.
Tutorial
mobileExperience
prop
Make sure you set mobileExperience
to redirect
on your DynamicContextProvider:
<DynamicContextProvider
settings={{
mobileExperience: 'redirect'
// ... other settings
}}
>
With just this code, your users will connect with the redirect-based approach. If you want to learn how to make method calls (like signAndSendTransaction
) and access the result, read on
Signer methods
The redirect-based approach makes it a little trickier to access the result, and soon we will offer an easy-to-use hook to do so. For now, you will need this code in your app:
import { useState, useEffect } from 'react';
import {
VersionedTransaction,
Transaction,
} from '@solana/web3.js';
import { useDynamicContext } from '@dynamic-labs/sdk-react-core';
import { ISolana } from '@dynamic-labs/solana-core';
import {
isPhantomRedirectConnector,
SignAndSendTransactionListener,
} from '@dynamic-labs/wallet-connector-core';
const useSignAndSendTransaction = () => {
const { primaryWallet } = useDynamicContext();
const [signature, setSignature] = useState<string | undefined>(undefined);
const [errorCode, setErrorCode] = useState<string | undefined>(undefined);
const [errorMessage, setErrorMessage] = useState<string | undefined>(
undefined,
);
useEffect(() => {
if (!isPhantomRedirectConnector(primaryWallet?.connector)) return;
const handler: SignAndSendTransactionListener = (response) => {
if (response.signature) {
setSignature(response.signature);
} else {
setErrorCode(response.errorCode);
setErrorMessage(response.errorMessage);
}
};
primaryWallet.connector.on('signAndSendTransaction', handler);
return () => {
if (!isPhantomRedirectConnector(primaryWallet?.connector)) return;
primaryWallet.connector.off('signAndSendTransaction', handler);
};
}, [primaryWallet?.connector]);
const execute = async (transaction: Transaction | VersionedTransaction) => {
if (!primaryWallet) return;
const signer = await primaryWallet.getSigner<ISolana>();
await signer.signAndSendTransaction(transaction);
};
return { errorCode, errorMessage, execute, signature };
};
You can render this hook in your app, and call execute
on a button you render. This will trigger a redirect to the user’s wallet for signing, and if they accept the transaction, they will be redirected back to your app. Upon your app re-loading, this hook should be rendered again, and it’s state values will be populated – in this case the signature
will contain the signature of the transcation.
Was this page helpful?