You are reading this tutorial because you probably want to do one or both of these things:
Enable users who don’t have a wallet to login with email to your app (“Embedded Wallets”)
Sponsor transactions for your users so they don’t have to pay gas (“Smart Wallets”)
Here is how Privy describes both of these things:
Embedded wallets are self-custodial wallets provisioned by Privy itself for a wallet experience that is directly embedded in your application. Embedded wallets do not require a separate wallet client, like a browser extension or a mobile app, and can be accessed directly from your product. These are primarily designed for users of your app who may not already have an external wallet, or don’t want to connect their external wallet.
Smart wallets are programmable, onchain accounts that incorporate the features of account abstraction. With just a few lines of code, you can create smart wallets for your users to sponsor gas payments, send batched transactions, and more.
We will be implementing both using Privy + Pimlico.
Copy your “App ID” under “App settings > API keys”. In your local project, make a .env file and add your App ID:
.env
NEXT_PUBLIC_PRIVY_APP_ID=
On your project dashboard, enable Smart Wallets under “Wallet Configuration > Smart wallets” and select “Kernel (ZeroDev)” as shown below:
Once you enable Smart wallets, right underneath make sure to put a “Custom chain” with the following values:
Name: Story Aeneid Testnet
ID number: 1315
RPC URL: https://aeneid.storyrpc.io
For the Bundler URL and Paymaster URL, go to Pimlico’s Dashboard and create a new app. Then click on “API Keys”, create a new API Key, click “RPC URLs” as shown below, and then select “Story Aeneid Testnet” as the network:
This is for testing. In a real scenario, you would have to set up proper sponsorship policies and billing info on Pimlico to automatically sponsor the transactions on behalf of your app. We don’t have to do this on testnet.
You can read Privy’s tutorial
here that
describes setting up Embedded Wallets, which is a fancy way of saying email
login for your users. In the below example, we simply create an embedded
wallet for every user, but you may want more customization by reading their
tutorial.
You must wrap any component that will be using embedded/smart wallets with the PrivyProvider and SmartWalletsProvider. In a providers.tsx (or whatever you want to call it) file, add the following code:
providers.tsx
"use client";import { PrivyProvider } from "@privy-io/react-auth";import { SmartWalletsProvider } from "@privy-io/react-auth/smart-wallets";import { aeneid } from "@story-protocol/core-sdk";export default function Providers({ children }: { children: React.ReactNode }) { return ( <PrivyProvider appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID as string} config={{ // Customize Privy's appearance in your app appearance: { theme: "light", accentColor: "#676FFF", logo: "/story-logo.jpg", }, // Create embedded wallets for users who don't have a wallet // when they sign in with email embeddedWallets: { createOnLogin: "all-users", }, defaultChain: aeneid, supportedChains: [aeneid], }} > <SmartWalletsProvider>{children}</SmartWalletsProvider> </PrivyProvider> );}
Then you can simply add it to yourlayout.tsx like so:
layout.tsx
import Providers from "@/providers/providers";/* other code here... */export default function RootLayout({ children,}: Readonly<{ children: React.ReactNode,}>) { return ( <html lang="en"> <body className={`${geistSans.variable} ${geistMono.variable} antialiased`} > <Providers>{children}</Providers> </body> </html> );}
We can also use the generated smart wallet to send transactions from the 🛠️ TypeScript SDK. Some of the functions have an option to return the encodedTxData, which we can use to pass into Privy’s smart wallet. You can see which functions support this in the SDK Reference.
page.tsx
import { useSmartWallets } from "@privy-io/react-auth/smart-wallets";import { EncodedTxData, StoryClient, StoryConfig,} from "@story-protocol/core-sdk";import { http } from "viem";export default function Home() { const { client: smartWalletClient } = useSmartWallets(); /* previous code here */ async function setupStoryClient() { const config: StoryConfig = { account: smartWalletClient!.account, transport: http("https://aeneid.storyrpc.io"), chainId: "aeneid", }; const client = StoryClient.newClient(config); return client; } async function registerIp() { const storyClient = await setupStoryClient(); const response = await storyClient.ipAsset.mintAndRegisterIp({ spgNftContract: "0xc32A8a0FF3beDDDa58393d022aF433e78739FAbc", // public spg contract for testing txOptions: { encodedTxDataOnly: true }, }); const uiOptions = { title: "Register IP", description: "This is an example transaction that registers an IP.", buttonText: "Register", }; const txHash = await smartWalletClient?.sendTransaction( response.encodedTxData as EncodedTxData, { uiOptions } ); console.log(`View Tx: https://aeneid.storyscan.io/tx/${txHash}`); } return ( <div> {/* previous code here */} <button onClick={registerIp}>Register IP</button> </div> );}