monad-developers · therealharpaljadeja · Aug 1, 2025 · Aug 1, 2025 · Dec 4, 2025
diff --git a/.env.example b/.env.example
@@ -1,2 +1,3 @@
 EXPO_PUBLIC_PRIVY_APP_ID=
-EXPO_PUBLIC_PRIVY_CLIENT_ID=
+EXPO_PUBLIC_PRIVY_CLIENT_ID=
+EXPO_PUBLIC_PIMLICO_BUNDLER_URL=
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,5 +3,6 @@
     "source.fixAll": "explicit",
     "source.organizeImports": "explicit",
     "source.sortMembers": "explicit"
-  }
+  },
+  "censitive.enable": true
 }
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# React Native Privy Embedded Wallet Template
+# React Native Sponsored Transaction Template
 
-This is a wallet template which uses Expo, React Native, Monad and Privy Embedded Wallet.
+This is a wallet template which uses Expo, React Native, Monad, Privy Embedded Wallet and Pimlico Paymaster.
 
 You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
 
@@ -13,6 +13,7 @@ You can start developing by editing the files inside the **app** directory. This
 - NPM
 - Expo CLI (Install using the following command: `npm i -g expo-cli`)
 - Privy Account
+- Pimlico Account
 
 For Android:
 - [Android Studio](https://developer.android.com/studio) (API version 35 and above)
@@ -82,6 +83,7 @@ cp .env.example .env
 ```
 EXPO_PUBLIC_PRIVY_APP_ID=
 EXPO_PUBLIC_PRIVY_CLIENT_ID=
+EXPO_PUBLIC_PIMLICO_BUNDLER_URL=
 ```
 
 #### `EXPO_PUBLIC_PRIVY_APP_ID`
@@ -114,6 +116,24 @@ You can find the app bundle name in `app.json` for Android it is `package` prope
 
 ![client_id](/assets/readme/client_id.png)
 
+#### `EXPO_PUBLIC_PIMLICO_BUNDLER_URL`
+
+1. Sign up on Pimlico and go to "API Keys"
+
+![pimlico_dashboard](/assets/readme/pimlico_dashboard.png)
+
+2. Create a new API key
+
+![create_api_key](/assets/readme/create_api_key.png)
+
+3. Click on "RPC URLs"
+
+![rpc_urls](/assets/readme/rpc_urls.png)
+
+4. Search for Monad Testnet and copy the URL, this is the value for `EXPO_PUBLIC_PIMLICO_BUNDLER_URL` environment variable
+
+![monad_testnet_rpc_url](/assets/readme/monad_testnet_rpc_url.png)
+
 ### Start the app
 
 The below commands will start the app in Expo Go app on respective devices.
@@ -147,21 +167,26 @@ npx expo run:android
 ## Folder structure of the template
 
 ```
-react-native-privy-embedded-wallet-template/
+react-native-privy-pimlico-gas-sponsorship-template/
   ├── app/                                   # Expo router entrypoint
   │   ├── _layout.tsx                        # Root Layout
   │   └── index.tsx                          # First screen
   ├── assets/
-  │   ├── fonts/                             # Custom fonts go here
-  │   └── images/ 
-  │       ├── adaptive-icon.png
-  │       ├── favicon.png
-  │       ├── icon.png
-  │       ├── monad-logo-inverted.png
-  │       └── monad-logo.png
-  │   └── readme/                            # images for the readme, you can delete this
+  │   ├── images/ 
+  │   │   ├── adaptive-icon.png
+  │   │   ├── favicon.png
+  │   │   ├── icon.png
+  │   │   ├── monad-logo-inverted.png
+  │   │   └── monad-logo.png
+  │   └── readme/                            
   ├── constants/
   │   └── Colors.ts
+  ├── hooks/
+  │   └── useSmartWallet.tsx                 # Smart Wallet utilities
+  ├── screens/
+  │   └── Home.tsx                     # Start here
+  ├── types/
+  │   └── react-native-qrcode-styled.d.ts
   ├── app.json                               # App properties
   ├── babel.config.js
   ├── eas.json
@@ -171,11 +196,52 @@ react-native-privy-embedded-wallet-template/
   ├── package-lock.json
   ├── package.json
   ├── README.md
-  ├── tsconfig.json
-  ├── types/
-  │   └── react-native-qrcode-styled.d.ts
+  └── tsconfig.json
 ```
 
+## Sending sponsored transactions
+
+Feel free to edit the code to send transactions of choice or copy the code it into your project.
+
+```ts
+...
+
+// Use `useSmartWallets` hook
+const { smartAccountAddress, smartAccountClient, smartAccountReady } = useSmartWallet();
+
+...
+
+// Send sponsored transaction
+const txHash = await smartAccountClient?.sendTransaction({
+  account: smartAccountClient?.account,
+  chain: monadTestnet,
+  to: NFT_CONTRACT_ADDRESS,
+  data,
+});
+
+...
+```
+
+### Sending multiple sponsored transactions at once
+
+```ts
+const txHash = await smartAccountClient?.sendTransaction({
+  calls: [
+    {
+      to: NFT_CONTRACT_ADDRESS,
+      data,
+    },
+    {
+      to: NFT_CONTRACT_ADDRESS,
+      data,
+    },
+  ],
+});
+```
+
+This example uses Kernel smart account with Entrypoint v7, feel free to deep dive into the [code](https://github.com/monad-developers/privy-gas-sponsorship-example/blob/main/src/hooks/useSmartWallet.tsx)
+
+
 ## Modifying the app name
 
 <table width="100%">
@@ -262,7 +328,7 @@ Edit the `splash` object in `app.json` to modify the splash screen.
 ```json
 {
    "expo": {
-      "name": "rn-wallet-app",
+      "name": "rn-gas-sponsorship-app",
       ...
       "splash": { <--- Edit this object
          "image": "./assets/images/icon.png",
@@ -274,6 +340,26 @@ Edit the `splash` object in `app.json` to modify the splash screen.
 
 ## Modifying fonts for the app
 
+You can create a `fonts` folder inside `assets` folder and keep your custom font files in the `fonts` folder.
+
+To use the custom font, load the font in the `app/_layout.tsx` file.
+
+Example:
+
+```ts
+const [loaded] = useFonts({
+  "SF-Pro-Rounded-Black": require("../assets/fonts/SF_Pro_Rounded/SF-Pro-Rounded-Black.otf"),
+  "SF-Pro-Rounded-Bold": require("../assets/fonts/SF_Pro_Rounded/SF-Pro-Rounded-Bold.otf"),
+  "SF-Pro-Rounded-Heavy": require("../assets/fonts/SF_Pro_Rounded/SF-Pro-Rounded-Heavy.otf"),
+  "SF-Pro-Rounded-Medium": require("../assets/fonts/SF_Pro_Rounded/SF-Pro-Rounded-Medium.otf"),
+  "SF-Pro-Rounded-Regular": require("../assets/fonts/SF_Pro_Rounded/SF-Pro-Rounded-Regular.otf"),
+  "SF-Pro-Rounded-Semibold": require("../assets/fonts/SF_Pro_Rounded/SF-Pro-Rounded-Semibold.otf"),
+  Inter_400Regular,
+  Inter_500Medium,
+  Inter_600SemiBold,
+});
+```
+
 ## Modifying the deeplinking scheme
 
 Edit the `scheme` property in `app.json` file, for your custom deeplinking scheme.
@@ -294,30 +380,7 @@ This is a build-time configuration, it has no effect in Expo Go.
 
 ## Editing the landing screen
 
-<table width="100%">
-  <tr>
-    <th width="50%">iOS</th>
-    <th width="50%">Android</th>
-  </tr>
-  <tr>
-    <td align="center">
-      <img src="/assets/readme/landing_screen_ios.png" width="300"/>
-    </td>
-    <td align="center">
-      <img src="/assets/readme/landing_screen_android.png" width="300"/>
-    </td>
-  </tr>
-</table>
-
-You can edit the landing page by editing the code in the file `app/index.tsx`.
-
-## Wallet Actions
-
-The template has example code for the following Wallet Actions:
-
-- [Send USDC](https://github.com/monad-developers/react-native-privy-embedded-wallet-template/blob/main/components/sheets/SendSheet.tsx) 
-- [Sign Message](https://github.com/monad-developers/react-native-privy-embedded-wallet-template/blob/main/components/sheets/SignSheet.tsx)
-
+You can edit the landing page by editing the code in the file `screens/Home.tsx`.
 
 ## Modifying the package/bundle identifier
 
@@ -329,7 +392,7 @@ When publishing app to the app store you need to have a unique package/bundle id
 ```json
 {
   "expo": {
-    "name": "rn-wallet-app",
+    "name": "rn-gas-sponsorship-app",
     ...
     "ios": {
       "bundleIdentifier": "com.anonymous.rn-wallet-app", <--- Edit this
@@ -354,17 +417,11 @@ git checkout demo
 ### Folder structure of the demo project (Change to `demo` branch to view this)
 
 ```
-react-native-privy-embedded-wallet-template/
+react-native-privy-pimlico-gas-sponsorship-template/
   ├── app/
   │   ├── _layout.tsx                        # Root layout of the project
-  │   ├── +not-found.tsx
-  │   ├── demo/                              # This is entrypoint for the Wallet related code.
-  │   │   ├── _layout.tsx
-  │   │   ├── app/                           # If Authenticated the user can access route /app
-  │   │   │   ├── _layout.tsx
-  │   │   │   └── index.tsx
-  │   │   └── sign-in/                       # Unauthenticated user gets redirected to /sign-in
   │   └── index.tsx                          # This is the landing page
+  │   └── sign-in/                           # Unauthenticated user gets redirected to /sign-in
   ├── assets/
   │   ├── fonts/                             # Custom fonts go here
   │   │   └── SF_Pro_Rounded/                # Custom Font example
@@ -378,21 +435,16 @@ react-native-privy-embedded-wallet-template/
   │       ├── partial-react-logo.png
   │       └── splash-icon.png
   ├── components/
-  │   ├── sheets/                            # All the bottom sheets are here
   │   └── ui/
-  ├── config/
-  │   ├── privyConfig.ts                     # Privy related config
-  │   ├── providers.tsx 
-  │   └── wagmiConfig.ts                     # Monad Testnet related config
   ├── constants/
+  │   ├── abi.json                           # NFT Smart Contract ABI
   ├── context/
   │   ├── AuthContext.tsx
-  │   └── WalletContext.tsx                  # Wallet actions implementations are here
   ├── hooks/
+  │   ├── useSmartWallet.tsx                 # Hook with Smart Wallet related functions
   ├── screens/
   │   ├── Email/                             # Screen that asks for Email
-  │   ├── Home/                              # Wallet Home screen (Authenticated users only)
-  │   ├── Landing/                           # Screen with info on how to use the template
+  │   ├── Home/                              # NFT Minting Screen (Authenticated users only)
   │   └── OTP/                               # Screen that asks for the OTP code sent to email
   ├── types/
   ├── utils.ts
@@ -412,16 +464,13 @@ react-native-privy-embedded-wallet-template/
 
 To learn more about developing your project with Expo, Privy, and Monad look at the following resources:
 
-- [Expo documentation](https://docs.expo.dev/)
-- [Expo guides](https://docs.expo.dev/guides)
-- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/)
-- [Creating embedded wallet on the client side](https://docs.privy.io/wallets/wallets/create/from-my-client)
-- [Sending transactions using embedded wallet](https://docs.privy.io/wallets/using-wallets/ethereum/send-a-transaction)
-- [Signing transactions using embedded wallet](https://docs.privy.io/wallets/using-wallets/ethereum/sign-a-transaction)
-- [Tooling and infra options on Monad](https://docs.monad.xyz/tooling-and-infra/)
+- Expo: [documentation](https://docs.expo.dev/) | [guides](https://docs.expo.dev/guides) | [learn](https://docs.expo.dev/tutorial/introduction/)
+- Privy: [creating an embedded wallet](https://docs.privy.io/wallets/wallets/create/from-my-client)
+- Permissionless: [smart wallet client](https://docs.pimlico.io/references/permissionless/reference/clients/smartAccountClient) | [sending sponsored transactions](https://docs.pimlico.io/references/permissionless/reference/smart-account-actions/sendTransaction)
+- Monad: [docs](https://docs.monad.xyz) | [tooling and infra](https://docs.monad.xyz/tooling-and-infra/)
 
 ## Join the community
 
 - [Discord community](https://discord.com/invite/monaddev): Chat with fellow Monad developers and ask questions.
 
-Facing issues? report [here](https://github.com/monad-developers/react-native-privy-embedded-wallet-template/issues).
+Facing issues? report [here](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template/issues).
diff --git a/app.json b/app.json
@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "rn-wallet-app",
-    "slug": "rn-wallet-app",
+    "name": "rn-gas-sponsorship-app",
+    "slug": "rn-gas-sponsorship-app",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
@@ -12,7 +12,7 @@
     "scheme": "rnwalletapp",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
-    "githubUrl": "https://github.com/monad-developers/react-native-privy-embedded-wallet-template",
+    "githubUrl": "https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template",
     "ios": {
       "bundleIdentifier": "com.anonymous.rn-wallet-app",
       "icon": "./assets/images/icon.png",