@crossmint/client-sdk-resact-native-ui (英语)

反应原生 SDK 集成 十字薄荷钱包 输入您的移动应用程序。 提供供应商、钩子和内置UI,用于钱包的创建、签名和检察官办公室的核查.

先决条件

获取一个 客户端 API 密钥从 Crossmint 开发器控制台。确保您的键有 钱包 API 启用范围,包括 wallets.fund 页:1 stagingFund。 。 。 .

安装

npx expo install @crossmint/client-sdk-react-native-ui expo-constants expo-device expo-secure-store expo-web-browser react-native-get-random-values react-native-webview

SDK需要Expo SDK 58(反应原生地0.88,iOS 16.4或更后). 本地模块是同伴依赖,以及 npx expo install 选择匹配您的 Expo SDK 的版本.

Xcode 27 和 iOS 27 代码

使用Xcode 27 (iOS 27 SDK)构建的App必须使用UIKit场景生命周期. 如果他们不这样做,它们就会以"用这个SDK制造的应用软件需要UIScene生命周期"来停止发射. Expo SDK 58生成: npx expo prebuild 添加a SceneDelegate.swift 和场景显示 Info.plist。不需要配置, Crossmint 配置插件也与之配合.

升级到世博会SDK 58后,再生原生项目. 如果你的应用程序生成 ios/ 财务报告和审定财务报表 android/ (连续土著一代),运行 npx expo prebuild --clean如果你手持这些文件夹, --clean 删除您的修改; 将场景生命周期的修改应用到您的 AppDelegate 和 Info.plist 中, 如您所描述的那样 博览会iOS场景生命周期指南。 。 。 .

如果你的应用程序配置仍然设置 ios.enableSceneSupport 内 expo-build-properties,你可以删除它。 它对世博会SDK 58.

快速启动

1. 设置供应商

带有 Crossmint Auth( 运行中的默认)

import {
  CrossmintProvider,
  CrossmintAuthProvider,
  CrossmintWalletProvider,
} from "@crossmint/client-sdk-react-native-ui";

export default function App() {
  return (
    <CrossmintProvider apiKey={process.env.EXPO_PUBLIC_CROSSMINT_API_KEY}>
      <CrossmintAuthProvider>
        <CrossmintWalletProvider
          createOnLogin={{
            chain: "base-sepolia",
            recoveryMethods: [{ type: "email" }],
          }}
        >
          <MainApp />
        </CrossmintWalletProvider>
      </CrossmintAuthProvider>
    </CrossmintProvider>
  );
}

带来您自己的认证

当您的应用程序已经拥有认证提供者时使用, 并在生产中: 连接您的提供者并配置 JWT 认证 在 Crossmint 控制台(参见 移动到生产) (中文(简体) ). 那就跳过 CrossmintAuthProvider 把你的供应商的JWT传给钱包SDK 见 自定义认证指南 详细情况.

import {
  CrossmintProvider,
  CrossmintWalletProvider,
} from "@crossmint/client-sdk-react-native-ui";

export default function App() {
  return (
    <CrossmintProvider apiKey={process.env.EXPO_PUBLIC_CROSSMINT_API_KEY}>
      <CrossmintWalletProvider
        createOnLogin={{
          chain: "base-sepolia",
          recoveryMethods: [
            {
              type: "email",
              email: "[email protected]",
            },
          ],
        }}
      >
        <MainApp />
      </CrossmintWalletProvider>
    </CrossmintProvider>
  );
}

2. 使用钱包

import { useWallet } from "@crossmint/client-sdk-react-native-ui";
import { View, Text, TouchableOpacity } from "react-native";

function WalletActions() {
  const { wallet, status } = useWallet();

  if (status === "in-progress") return <Text>Loading wallet...</Text>;
  if (!wallet) return <Text>No wallet</Text>;

  // Staging only: mints USDXM, Crossmint's test stablecoin, into the wallet
  const handleFund = async () => {
    await wallet.stagingFund(10);
  };

  const handleSend = async () => {
    const tx = await wallet.send("0xRecipient", "usdxm", "10");
    console.log("Transaction:", tx.explorerLink);
  };

  return (
    <View>
      <Text>Wallet: {wallet.address}</Text>
      <TouchableOpacity onPress={handleFund}>
        <Text>Get 10 USDXM</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={handleSend}>
        <Text>Send 10 USDXM</Text>
      </TouchableOpacity>
    </View>
  );
}

供应商

CrossmintWalletProvider 道具

钩子

useWallet()

返回钱包实例和管理功能 :

const {
  wallet,              // Wallet | undefined
  status,              // "not-loaded" | "in-progress" | "loaded" | "error"
  getWallet,           // (props: { chain, alias? }) => Promise<Wallet | undefined>
  createWallet,        // (props: ClientSideWalletCreateArgs) => Promise<Wallet | undefined>
  createDeviceSigner,  // () => Promise<DeviceSignerDescriptor> | undefined
  createPasskeySigner, // (name: string) => Promise<RegisterSignerPasskeyParams>
} = useWallet();

useWalletOtpSigner()

在使用电子邮件/电话检索方法时,为自定义的OTP UI。 何时 showOtpSignerPrompt 设置为 false,使用这个钩子手动处理 OTP 流量 :

const { needsAuth, sendOtp, verifyOtp, reject } = useWalletOtpSigner();

useCrossmintAuth()

认证状态和 OAuth 登录 :

const { loginWithOAuth, logout, user } = useCrossmintAuth();

// OAuth providers
loginWithOAuth("google");
loginWithOAuth("twitter");

构成部分

ExportPrivateKeyButton

通过TEE对钱包的私钥导出按钮 。 只为电子邮件/手机签名人制作 .

import { ExportPrivateKeyButton } from "@crossmint/client-sdk-react-native-ui";

<ExportPrivateKeyButton appearance={{ borderRadius: "12px" }} />

与反应 SDK 的区别

钱包 SDK

这个 wallet 对象返回 useWallet() 是一个 Wallet 举个例子 钱包方法文档(端出、余额、符号等)见 @crossmint/wallets-sdk 读取。 。 。 .

环境设置

1. 获取您的 API 密钥 十字薄荷控制台

2. 添加到您的 .env数字 :

EXPO_PUBLIC_CROSSMINT_API_KEY=your_api_key_here

3. 配置深层链接 app.json数字 :

{
  "expo": {
    "scheme": "your-app-scheme"
  }
}

文档

• 交叉薄荷钱包文档
• SDK 参考
• 钱包博览会快速启动
• 自定义认证指南( 反应原生)

许可证

阿帕奇 - 2.0