Importing and initializing the signer:
Copy import { useFutureverseSigner } from '@futureverse/auth-react';
...
const { signer } = useFutureverseSigner();
You can use the signer to sign a simple message, as shown in the following example:
Copy import { useCallback } from 'react';
import { useFutureverseSigner } from './useFutureverseSigner';
function MessageSignerDemo() {
const { signer } = useFutureverseSigner();
const signExtrinsic = useCallback(async () => {
if (!signer) return;
const message = 'message to sign';
return await signer.signMessage(message);
}, [signer]);
// Your UI code to call signExtrinsic
return <></>;
}
Signing a Root Network extrinsic:
This example demonstrates how to use the signer for signing a TRN extrinsic, such as minting an NFT:
Copy import { useFutureverse, useTrnApi } from '@futureverse/react';
import { useCallback } from 'react';
import { useFutureverseSigner } from './useFutureverseSigner';
function ExtrinsicSignerDemo() {
const { userSession } = useFutureverse();
const { trnApi } = useTrnApi();
const { signer } = useFutureverseSigner();
const signExtrinsic = useCallback(async () => {
if (!trnApi || !signer || !userSession) {
return;
}
const collectionId = '<your collection id>';
const numberOfTokens = 1; // How many tokens to mint
const address = 'FuturePass or address to mint to';
const extrinsic = trnApi.tx.nft.mint(collectionId, numberOfTokens, address);
return await signer.signExtrinsic(trnApi, extrinsic, userSession.eoa);
}, [signer]);
// Your UI code to call signExtrinsic
return <></>;
}