모바일 (React Native)

React Native 앱에 Base Account를 연동하는 방법을 안내합니다.

이 가이드는 Mobile Wallet Protocol Client를 연동하여 React Native 앱에 Base Account 지원을 추가하는 방법을 안내합니다.

이 문서는 Mobile Wallet Protocol Client v1.0.0 기준으로 업데이트되었습니다.

시작하기 전에

이 가이드는 기존 React Native 앱 또는 스타터 프로젝트에 Base Account 지원을 추가하는 방법을 안내합니다.

작동하는 예시부터 시작하고 싶다면 아래 리포지토리로 이동하세요:

기존 React Native 앱 또는 스타터 프로젝트에 Base Account를 연동하려면 아래 지침을 따르세요.

1단계: Mobile Wallet Protocol Client 설치

프로젝트에 최신 버전의 Mobile Wallet Protocol Client를 추가합니다.

npm

npm i @mobile-wallet-protocol/client@latest

2단계: 폴리필 추가

피어 의존성 설치

Mobile Wallet Protocol Client 라이브러리는 Expo WebBrowser와 Async Storage 패키지가 설치되어 있어야 합니다. 추가 설정이 필요한 경우 각 페이지의 지침을 따르세요.

npm

npm i expo expo-web-browser @react-native-async-storage/async-storage

폴리필

Mobile Wallet Protocol Client는 React Native 환경에서 기본적으로 사용할 수 없는 crypto.randomUUID, crypto.getRandomValues, URL의 전역 폴리필이 필요합니다.

아래는 expo-crypto와 expo-standard-web-crypto 패키지를 사용하여 앱에서 이 함수들을 폴리필하는 예시입니다.

npm

npm i expo-crypto expo-standard-web-crypto react-native-url-polyfill

polyfills.js

import "react-native-url-polyfill/auto";
import { polyfillWebCrypto } from "expo-standard-web-crypto";
import { randomUUID } from "expo-crypto";

polyfillWebCrypto();
crypto.randomUUID = randomUUID;

3단계: 사용법

Mobile Wallet Protocol Client는 모바일 앱이 Base Account와 상호작용하는 두 가지 인터페이스를 제공합니다: EIP-1193 호환 프로바이더 인터페이스와 wagmi 커넥터입니다.

앱에서 지갑 집합기(wallet aggregator)를 사용하고 있다면 옵션 2: Wagmi 커넥터로 바로 이동하여 1줄로 연동하세요.

옵션 1: EIP-1193 프로바이더

SDK 설정 파라미터의 app 접두사가 v1.0.0에서 제거되었습니다.

EIP-1193 호환 EIP1193Provider 인스턴스를 생성합니다.

App.tsx

import { EIP1193Provider } from "@mobile-wallet-protocol/client";

// Step 1. Initialize provider with your dapp's metadata and target wallet
const metadata = {
  name: "My App Name",
  customScheme: "myapp://", // only custom scheme (e.g. `myapp://`) is supported in v1.0.0
  chainIds: [8453],
  logoUrl: "https://example.com/logo.png",
};
const provider = new EIP1193Provider({
  metadata,
  wallet: Wallets.CoinbaseSmartWallet,
});

// ...

// 2. Use the provider
const addresses = await provider.request({ method: "eth_requestAccounts" });
const signedData = await provider.request({
  method: "personal_sign",
  params: ["0x48656c6c6f20776f726c6421", addresses[0]],
});

옵션 2: Wagmi 커넥터

프로젝트에 최신 버전의 Mobile Wallet Protocol wagmi-connectors를 추가합니다.

npm

npm i @mobile-wallet-protocol/wagmi-connectors@latest

createConnectorFromWallet 함수를 가져와 사용하려는 지갑을 wagmi 설정에 전달하면 됩니다.

config.ts

import {
  createConnectorFromWallet,
  Wallets,
} from "@mobile-wallet-protocol/wagmi-connectors";

const metadata = {
  name: "My App Name",
  customScheme: "myapp://", // only custom scheme (e.g. `myapp://`) is supported in v1.0.0
  chainIds: [8453],
  logoUrl: "https://example.com/logo.png",
};

export const config = createConfig({
  chains: [base],
  connectors: [
    createConnectorFromWallet({
      metadata,
      wallet: Wallets.CoinbaseSmartWallet,
    }),
  ],
  transports: {
    [base.id]: http(),
  },
});

그런 다음 wagmi의 React 인터페이스를 사용하여 Base Account와 상호작용할 수 있습니다.

App.tsx

import { useConnect } from "wagmi";

// ...

const { connect, connectors } = useConnect();

return (
  <Button
    title={"Connect"}
    onPress={() => {
      connect({ connector: connectors[0] });
    }}
  />
);

피드백을 보내주세요!

Base Discord에서 피드백을 보내거나 MobileWalletProtocol/react-native-client 리포지토리에 새 이슈를 생성해 주세요.