If you are using Privy to sign transactions, you can import the useWallets method to get the signer. This signer can then be used to sign the user operation via the builder.

Configuring Privy

First, see how to configure Privy at https://docs.privy.io/guide/quickstart.

Integration

Here's a code snippet showing how to use the useWallets method to get the signer. This example uses the SimpleAccount preset, but you can use any userop.js builder.

import {useWallets} from '@privy-io/react-auth';

// Initialize the builder
const {wallets} = useWallets();
const embeddedWallet = wallets.find((wallet) => (wallet.walletClientType === 'privy'));
const eip1193provider = await embeddedWallet.getEthersProvider();
const signer = eip1193provider.getSigner();

// Create a builder with the signer
var builder = await Presets.Builder.SimpleAccount.init(signer, rpcUrl);
const address = builder.getSender();
console.log(Account address: ${address});

To access the privy wallet you will need to add the PrivyProvider component to your front end. In React, this may look like this:

<PrivyProvider
    appId='insert-your-privy-app-id'
    config={{
        /* Replace this with your desired login methods */
        loginMethods: ['email', 'wallet'],
        /* Replace this with your desired appearance configuration */
        appearance: {
            theme: 'light',
            accentColor: '#676FFF',
            logo: 'your-logo-url'
        }
        embeddedWallets: {
            createOnLogin: 'users-without-wallets',
            noPromptOnSignature: true
        }
    }}
>
    {/* Your app's components */}
</PrivyProvider>