> ## Documentation Index
> Fetch the complete documentation index at: https://docs.monad.xyz/llms.txt
> Use this file to discover all available pages before exploring further.
# 如何使用 React Native 赞助交易模板
赞助交易使用户无需自行支付 gas 费用即可与区块链应用交互,提升可及性、用户体验和上手门槛 —— 特别是对不熟悉加密的新手而言。
本指南将带您使用 [赞助交易模板](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template),该模板使用 [Expo](https://docs.expo.dev/)、[React Native](https://reactnative.dev/)、[Privy 嵌入式钱包](https://docs.privy.io/wallets/wallets/create/create-a-wallet) 和 [Pimlico paymaster](https://docs.pimlico.io/references/permissionless/reference/clients/smartAccountClient),在 Monad 上构建具有赞助交易功能的移动应用。
您可以开始通过编辑 `app` 目录中的文件进行开发。本项目使用 [基于文件的路由](https://docs.expo.dev/router/introduction)。
该仓库还有一个 `demo` 分支,如果您想先查看应用的完整版本,可以切换到该分支。
## 前置条件
* Node.js
* NPM
* 一个 [Privy 账户](https://dashboard.privy.io/)
* 一个 [Pimlico 账户](https://dashboard.pimlico.io/)
- [Android Studio](https://developer.android.com/studio)(API 版本 35 及以上)
* 为 Expo 设置 Android Studio 的指南见 [此处](https://docs.expo.dev/workflow/android-studio-emulator/)
* [XCode](https://apps.apple.com/in/app/xcode/id497799835?mt=12)
* 为 Expo 设置 iOS 模拟器的指南见 [此处](https://docs.expo.dev/workflow/ios-simulator/)
1. 创建应用:
1. 设置登录方式:
3. 启用邮箱:
4. 启用 "Automatically create embedded wallets on login" 并选择 "EVM Wallets":
5. 在 Socials 中禁用所有项。
6. 前往 "Advanced" 并确保只启用 "Prioritize options displayed" 下的 "Web2: Email, SMS, and socials":
您可以启用 "Test Accounts" 用于测试目的
还需要一些其他步骤,我们将在项目依赖安装完成后继续。
## 开始
该模板还有一个 `demo` 分支,您可以切换到该分支查看演示项目。
您可以使用以下命令切换:
```
git checkout demo
```
### 安装依赖
```bash theme={null}
npm install
```
### 设置环境变量
* 创建 `.env.example` 的副本:
```bash theme={null}
cp .env.example .env
```
* 向其中添加以下环境变量
```
EXPO_PUBLIC_PRIVY_APP_ID=
EXPO_PUBLIC_PRIVY_CLIENT_ID=
EXPO_PUBLIC_PIMLICO_BUNDLER_URL=
```
1. 前往您的 Privy 仪表盘,点击您 Privy 应用的 `Home`,然后点击 `Retrieve API keys`。
2. 您将在 `API keys` 下找到 `App ID`。
1. 前往您的 Privy 仪表盘,点击您 Privy 应用的 `Home`,然后点击 `Retrieve API keys`。
2. 点击顶部的 `Clients` 标签,然后点击 `Edit`。
3. 在 `Allowed app identifiers` 下粘贴应用 bundle 的名称并点击 `Add`。
You will find the app bundle name in [`app.json`](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template/blob/main/app.json). For Android, it is the `package` property. For iOS, it is the `bundleIdentifier` property.
4. 复制 `Client ID` 并将其用作 `EXPO_PUBLIC_PRIVY_CLIENT_ID` 的值。
1. 注册 Pimlico 并前往 "API Keys":
2. 创建新的 API key:
3. 点击 "RPC URLs":
4. 搜索 Monad Testnet 并复制该 URL。将其用作 `EXPO_PUBLIC_PIMLICO_BUNDLER_URL`:
### 启动应用
在 Expo Go 应用中或本地启动应用。
在 Expo Go 应用中:
* iOS:
```bash theme={null}
npm run ios
```
* Android:
```bash theme={null}
npm run android
```
作为原生应用构建:
* iOS:
```bash theme={null}
npx expo run:ios
```
* Android:
```bash theme={null}
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](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template/blob/main/hooks/useSmartWallet.tsx) hook 发送赞助交易的示例。您可以修改代码来发送自己的交易,或将其集成到现有项目中。
```ts theme={null}
...
// 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,
});
...
```
### 发送批量赞助交易
您也可以发送批量赞助交易:
```ts theme={null}
const txHash = await smartAccountClient?.sendTransaction({
calls: [
{
to: NFT_CONTRACT_ADDRESS,
data,
},
{
to: NFT_CONTRACT_ADDRESS,
data,
},
],
});
```
此示例使用 Kernel 智能账户以及 Entrypoint v7。请参见 [`useSmartWallet.tsx`](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template/blob/main/hooks/useSmartWallet.tsx) 了解实现细节。
## 修改应用名称
| iOS |
Android |
|
|
编辑 [`app.json`](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template/blob/main/app.json) 中的 `name` 属性:
```js title="app.json" theme={null}
{
"expo": {
"name": "wallet-app", <--- Edit this
...
}
}
```
## 修改应用图标和启动画面
### 应用图标
| iOS |
Android |
|
|
|
您可以通过替换 `assets/images/icon.png` 来编辑应用图标。
推荐的应用图标尺寸为 `1024x1024`。
如果您将图标文件命名为其他名称,请相应地编辑 [`app.json`](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template/blob/main/app.json) 中的 `icon` 属性。
```json title="app.json" theme={null}
{
"expo": {
"name": "rn-wallet-app",
...
"icon": "./assets/images/icon.png", <--- Change this
...
}
}
```
### 启动画面
| iOS |
Android |
|
|
编辑 [`app.json`](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template/blob/main/app.json) 中的 `splash` 对象来修改启动画面。
```json title="app.json" theme={null}
{
"expo": {
"name": "rn-gas-sponsorship-app",
...
"splash": { <--- Edit this object
"image": "./assets/images/icon.png",
"backgroundColor": "#ffffff"
}
}
}
```
## 修改字体
您可以在 [`assets`](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template/tree/main/assets) 内创建一个 `fonts` 文件夹来存放您的自定义字体文件。
要使用自定义字体,请在 [`app/_layout.tsx`](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template/blob/main/app/_layout.tsx) 中加载字体。
示例:
```ts title="app/_layout.tsx" theme={null}
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`](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template/blob/main/app.json) 中的 `scheme` 属性以选择您的自定义深度链接方案:
```json title="app.json" theme={null}
{
"expo": {
...
"scheme": "rnwalletapp",
...
}
}
```
例如,如果将其设置为 `rnwalletapp`,则轻点 `rnwalletapp://` URL 时将打开您的应用。
这是一个构建时配置,在 Expo Go 中无效。
## 编辑登录页面
您可以通过编辑 [`screens/Home.tsx`](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template/blob/main/screens/Home.tsx) 来编辑登录页面。
在 `demo` 分支中,我们最终添加了更复杂的功能,这就是 `Home.tsx` 变成一个 [文件夹](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template/tree/demo/screens/Home) 的原因。
## 修改 package/bundle 标识符
将应用发布到应用商店时,您需要拥有唯一的 package/bundle 标识符,可以在 [`app.json`](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template/blob/main/app.json) 中设置。
别忘了在 Privy 仪表盘中更改该标识符
```json title="app.json" theme={null}
{
"expo": {
"name": "rn-gas-sponsorship-app",
...
"ios": {
"bundleIdentifier": "com.anonymous.rn-wallet-app", <--- Edit this
...
},
"android": {
...
"package": "com.anonymous.rnwalletapp" <--- Edit this
},
}
}
```
## 查看演示应用
如果您想在开始开发之前尝试应用的完整版本,请切换到 `demo` 分支:
```bash theme={null}
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 [文档](https://docs.expo.dev/) | [指南](https://docs.expo.dev/guides) | [教程](https://docs.expo.dev/tutorial/introduction/)
* Privy:[创建钱包](https://docs.privy.io/wallets/wallets/create/create-a-wallet) | [发送交易](https://docs.privy.io/wallets/using-wallets/ethereum/send-a-transaction) | [签署交易](https://docs.privy.io/wallets/using-wallets/ethereum/sign-a-transaction)
* Permissionless:[smart wallet client](https://docs.pimlico.io/references/permissionless/reference/clients/smartAccountClient) | [发送交易](https://docs.pimlico.io/references/permissionless/reference/smart-account-actions/sendTransaction)
* Monad:[支持的工具和基础设施](/zh/tooling-and-infra)
如遇任何问题,请在 [此处](https://github.com/monad-developers/react-native-privy-pimlico-gas-sponsorship-template/issues) 反馈。