如何使用 React Native 赞助交易模板

赞助交易使用户无需自行支付 gas 费用即可与区块链应用交互,提升可及性、用户体验和上手门槛 —— 特别是对不熟悉加密的新手而言。本指南将带您使用赞助交易模板,该模板使用 Expo、React Native、Privy 嵌入式钱包和 Pimlico paymaster,在 Monad 上构建具有赞助交易功能的移动应用。您可以开始通过编辑 app 目录中的文件进行开发。本项目使用基于文件的路由。

该仓库还有一个 demo 分支,如果您想先查看应用的完整版本,可以切换到该分支。

前置条件

Node.js
NPM
一个 Privy 账户
一个 Pimlico 账户

Android

Android Studio(API 版本 35 及以上)
- 为 Expo 设置 Android Studio 的指南见此处

iOS

XCode
- 为 Expo 设置 iOS 模拟器的指南见此处

设置 Privy 账户

创建应用:

设置登录方式:

启用邮箱:

启用 “Automatically create embedded wallets on login” 并选择 “EVM Wallets”:

在 Socials 中禁用所有项。
前往 “Advanced” 并确保只启用 “Prioritize options displayed” 下的 “Web2: Email, SMS, and socials”:

您可以启用 “Test Accounts” 用于测试目的

还需要一些其他步骤,我们将在项目依赖安装完成后继续。

开始

该模板还有一个 demo 分支,您可以切换到该分支查看演示项目。您可以使用以下命令切换:

git checkout demo

安装依赖

npm install

设置环境变量

创建 .env.example 的副本:
cp .env.example .env

向其中添加以下环境变量

EXPO_PUBLIC_PRIVY_APP_ID=
EXPO_PUBLIC_PRIVY_CLIENT_ID=
EXPO_PUBLIC_PIMLICO_BUNDLER_URL=

如何获取 EXPO_PUBLIC_PRIVY_APP_ID

前往您的 Privy 仪表盘,点击您 Privy 应用的 Home,然后点击 Retrieve API keys。

您将在 API keys 下找到 App ID。

如何获取 EXPO_PUBLIC_PRIVY_CLIENT_ID

前往您的 Privy 仪表盘,点击您 Privy 应用的 Home,然后点击 Retrieve API keys。

点击顶部的 Clients 标签,然后点击 Edit。

在 Allowed app identifiers 下粘贴应用 bundle 的名称并点击 Add。

You will find the app bundle name in app.json. For Android, it is the package property. For iOS, it is the bundleIdentifier property.

复制 Client ID 并将其用作 EXPO_PUBLIC_PRIVY_CLIENT_ID 的值。

如何获取 EXPO_PUBLIC_PIMLICO_BUNDLER_URL

创建新的 API key:

点击 “RPC URLs”:

搜索 Monad Testnet 并复制该 URL。将其用作 EXPO_PUBLIC_PIMLICO_BUNDLER_URL:

启动应用

在 Expo Go 应用中或本地启动应用。在 Expo Go 应用中:

iOS:
npm run ios
Android:
npm run android

作为原生应用构建:

iOS:
npx expo run:ios
Android:
npx expo run:android

模板文件夹结构

react-native-privy-pimlico-gas-sponsorship-template/
  ├── app/                                   # Expo router entrypoint
  │   ├── _layout.tsx                        # Root layout
  │   └── index.tsx                          # First screen
  ├── assets/
  │   ├── 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
  ├── entrypoint.js
  ├── eslint.config.js
  ├── metro.config.js                        # Configuration for Hermes and Polyfills
  ├── package-lock.json
  ├── package.json
  ├── README.md
  └── tsconfig.json

发送赞助交易

下面是一个使用 useSmartWallet hook 发送赞助交易的示例。您可以修改代码来发送自己的交易,或将其集成到现有项目中。

...

// 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,
});

...

发送批量赞助交易

您也可以发送批量赞助交易:

const txHash = await smartAccountClient?.sendTransaction({
  calls: [
    {
      to: NFT_CONTRACT_ADDRESS,
      data,
    },
    {
      to: NFT_CONTRACT_ADDRESS,
      data,
    },
  ],
});

此示例使用 Kernel 智能账户以及 Entrypoint v7。请参见 useSmartWallet.tsx 了解实现细节。

修改应用名称

iOS	Android

编辑 app.json 中的 name 属性:

app.json

{
   "expo": {
      "name": "wallet-app", <--- Edit this
      ...
   }
}  

修改应用图标和启动画面

应用图标

iOS	Android

您可以通过替换 assets/images/icon.png 来编辑应用图标。推荐的应用图标尺寸为 1024x1024。如果您将图标文件命名为其他名称,请相应地编辑 app.json 中的 icon 属性。

app.json

{
   "expo": {
      "name": "rn-wallet-app",
      ...
      "icon": "./assets/images/icon.png", <--- Change this
      ...
   }
}

启动画面

iOS	Android

编辑 app.json 中的 splash 对象来修改启动画面。

app.json

{
   "expo": {
      "name": "rn-gas-sponsorship-app",
      ...
      "splash": { <--- Edit this object
         "image": "./assets/images/icon.png",
         "backgroundColor": "#ffffff"
      }
   }  
}

修改字体

您可以在 assets 内创建一个 fonts 文件夹来存放您的自定义字体文件。要使用自定义字体,请在 app/_layout.tsx 中加载字体。示例:

app/_layout.tsx

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,
});

修改深度链接方案

编辑 app.json 中的 scheme 属性以选择您的自定义深度链接方案:

app.json

{
  "expo": {
    ...
    "scheme": "rnwalletapp",
    ...
  }
}

例如,如果将其设置为 rnwalletapp,则轻点 rnwalletapp:// URL 时将打开您的应用。这是一个构建时配置,在 Expo Go 中无效。

编辑登录页面

您可以通过编辑 screens/Home.tsx 来编辑登录页面。在 demo 分支中,我们最终添加了更复杂的功能,这就是 Home.tsx 变成一个文件夹的原因。

修改 package/bundle 标识符

将应用发布到应用商店时,您需要拥有唯一的 package/bundle 标识符,可以在 app.json 中设置。

别忘了在 Privy 仪表盘中更改该标识符

app.json

{
  "expo": {
    "name": "rn-gas-sponsorship-app",
    ...
    "ios": {
      "bundleIdentifier": "com.anonymous.rn-wallet-app", <--- Edit this
      ...
    },
    "android": {
      ...
      "package": "com.anonymous.rnwalletapp" <--- Edit this
    },
  }
}

查看演示应用

如果您想在开始开发之前尝试应用的完整版本,请切换到 demo 分支:

git checkout demo

演示应用文件夹结构

react-native-privy-pimlico-gas-sponsorship-template/
  ├── app/
  │   ├── _layout.tsx                        # Root layout of the project
  │   └── 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
  │   └── images/
  │       ├── adaptive-icon.png
  │       ├── favicon.png
  │       ├── icon.png
  │       ├── monad-icon.png
  │       ├── monad-logo-inverted.png
  │       ├── monad-logo.png
  │       ├── partial-react-logo.png
  │       └── splash-icon.png
  ├── components/
  │   └── ui/
  ├── constants/
  │   ├── abi.json                           # NFT smart contract ABI
  ├── context/
  │   ├── AuthContext.tsx
  ├── hooks/
  │   ├── useSmartWallet.tsx                 # Hook with smart wallet related functions
  ├── screens/
  │   ├── Email/                             # Screen that asks for email
  │   ├── Home/                              # NFT minting screen (Authenticated users only)
  │   └── OTP/                               # Screen that asks for the OTP code sent to email
  ├── types/
  ├── utils.ts
  ├── entrypoint.js
  ├── app.json
  ├── babel.config.js
  ├── eas.json
  ├── eslint.config.js
  ├── metro.config.js
  ├── package.json
  ├── package-lock.json
  ├── README.md
  ├── tsconfig.json

了解更多

要了解使用 Expo、Privy 和 Monad 开发项目的更多信息,请查看以下资源:

Expo 文档 | 指南 | 教程
Privy:创建钱包 | 发送交易 | 签署交易
Permissionless:smart wallet client | 发送交易
Monad:支持的工具和基础设施

如遇任何问题,请在此处反馈。

简介

开发者要点

工具和基础设施

JSON-RPC

指南

资源

面向 AI 智能体

如何使用 React Native 赞助交易模板

前置条件

开始

安装依赖

设置环境变量

启动应用

模板文件夹结构

发送赞助交易

发送批量赞助交易

修改应用名称

修改应用图标和启动画面

应用图标

启动画面

修改字体

修改深度链接方案

编辑登录页面

修改 package/bundle 标识符

查看演示应用

演示应用文件夹结构

了解更多

​前置条件

​开始

​安装依赖

​设置环境变量

​启动应用

​模板文件夹结构

​发送赞助交易

​发送批量赞助交易

​修改应用名称

​修改应用图标和启动画面

​应用图标

​启动画面

​修改字体

​修改深度链接方案

​编辑登录页面

​修改 package/bundle 标识符

​查看演示应用

​演示应用文件夹结构

​了解更多

前置条件

开始

安装依赖

设置环境变量

启动应用

模板文件夹结构

发送赞助交易

发送批量赞助交易

修改应用名称

修改应用图标和启动画面

应用图标

启动画面

修改字体

修改深度链接方案

编辑登录页面

修改 package/bundle 标识符

查看演示应用

演示应用文件夹结构

了解更多