> ## Documentation Index
> Fetch the complete documentation index at: https://daehan-base.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 모바일 (React Native)

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

export const GithubRepoCard = ({title, githubUrl}) => {
  return <a href={githubUrl} target="_blank" rel="noopener noreferrer" className="mb-4 flex items-center rounded-lg bg-zinc-900 p-4 text-white transition-all hover:bg-zinc-800">
      <div className="flex w-full items-center gap-3">
        <svg height="24" width="24" className="flex-shrink-0 dark:fill-white" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <path fill="currentColor" fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
        </svg>

        <div className="flex min-w-0 flex-grow flex-col">
          <span className="truncate text-base font-medium">{title}</span>
          <span className="truncate text-xs text-zinc-400">{githubUrl}</span>
        </div>

        <svg className="h-5 w-5 flex-shrink-0 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </div>
    </a>;
};

export const Danger = ({children}) => {
  return <div class="my-4 px-5 py-4 overflow-hidden rounded-2xl flex gap-3 border danger-admonition dark:danger-admonition">
      <div class="mt-0.5 w-4">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="rgb(239, 68, 68)" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-sky-500" aria-label="Danger">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M7 1.3C10.14 1.3 12.7 3.86 12.7 7C12.7 10.14 10.14 12.7 7 12.7C5.48908 12.6974 4.0408 12.096 2.97241 11.0276C1.90403 9.9592 1.30264 8.51092 1.3 7C1.3 3.86 3.86 1.3 7 1.3ZM7 0C3.14 0 0 3.14 0 7C0 10.86 3.14 14 7 14C10.86 14 14 10.86 14 7C14 3.14 10.86 0 7 0ZM8 3H6V8H8V3ZM8 9H6V11H8V9Z"></path>
        </svg>
      </div>
      <div class="text-sm prose min-w-0">
        {children}
      </div>
    </div>;
};

이 가이드는 [Mobile Wallet Protocol Client](https://www.npmjs.com/package/@mobile-wallet-protocol/client)를 연동하여 React Native 앱에 Base Account 지원을 추가하는 방법을 안내합니다.

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

<Danger>
  **딥 링크 처리**

  v1.0.0의 브레이킹 체인지: Universal Links 및 App Links 요구 사항이 제거되고 커스텀 스킴(예: `myapp://`)을 사용합니다.
</Danger>

## 시작하기 전에

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

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

<GithubRepoCard title="Mobile Wallet Protocol Expo Example" githubUrl="https://github.com/MobileWalletProtocol/smart-wallet-expo-example" />

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

## 1단계: Mobile Wallet Protocol Client 설치

프로젝트에 최신 버전의 [Mobile Wallet Protocol Client](https://mobilewalletprotocol.github.io/wallet-mobile-sdk/)를 추가합니다.

<CodeGroup>
  ```zsh npm theme={null}
  npm i @mobile-wallet-protocol/client@latest
  ```

  ```zsh yarn theme={null}
  yarn add @mobile-wallet-protocol/client@latest
  ```
</CodeGroup>

## 2단계: 폴리필 추가

### 피어 의존성 설치

Mobile Wallet Protocol Client 라이브러리는 [Expo WebBrowser](https://docs.expo.dev/versions/latest/sdk/webbrowser/)와 [Async Storage](https://react-native-async-storage.github.io/async-storage/docs/install) 패키지가 설치되어 있어야 합니다.
추가 설정이 필요한 경우 각 페이지의 지침을 따르세요.

<CodeGroup>
  ```zsh npm theme={null}
  npm i expo expo-web-browser @react-native-async-storage/async-storage
  ```

  ```zsh yarn theme={null}
  yarn add expo expo-web-browser @react-native-async-storage/async-storage
  ```
</CodeGroup>

### 폴리필

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

아래는 [expo-crypto](https://docs.expo.dev/versions/latest/sdk/crypto/)와 [expo-standard-web-crypto](https://github.com/expo/expo/tree/master/packages/expo-standard-web-crypto/) 패키지를 사용하여 앱에서 이 함수들을 폴리필하는 예시입니다.

<CodeGroup>
  ```zsh npm theme={null}
  npm i expo-crypto expo-standard-web-crypto react-native-url-polyfill
  ```

  ```zsh yarn theme={null}
  yarn add expo-crypto expo-standard-web-crypto react-native-url-polyfill
  ```
</CodeGroup>

<CodeGroup>
  ```js polyfills.js theme={null}
  import "react-native-url-polyfill/auto";
  import { polyfillWebCrypto } from "expo-standard-web-crypto";
  import { randomUUID } from "expo-crypto";

  polyfillWebCrypto();
  crypto.randomUUID = randomUUID;
  ```

  ```tsx App.tsx theme={null}
  import "./polyfills"; // import before @mobile-wallet-protocol/client

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

  /// ...
  ```
</CodeGroup>

## 3단계: 사용법

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

<Check>
  앱에서 지갑 집합기(wallet aggregator)를 사용하고 있다면 [**옵션 2: Wagmi
  커넥터**](#option-2-wagmi-connector)로 바로 이동하여 1줄로 연동하세요.
</Check>

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

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

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

```tsx App.tsx theme={null}
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를 추가합니다.

<CodeGroup>
  ```zsh npm theme={null}
  npm i @mobile-wallet-protocol/wagmi-connectors@latest
  ```

  ```zsh yarn theme={null}
  yarn add @mobile-wallet-protocol/wagmi-connectors@latest
  ```
</CodeGroup>

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

```ts config.ts theme={null}
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와 상호작용할 수 있습니다.

```tsx App.tsx theme={null}
import { useConnect } from "wagmi";

// ...

const { connect, connectors } = useConnect();

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

## 피드백을 보내주세요!

[Base Discord](https://discord.com/invite/buildonbase/)에서 피드백을 보내거나 [MobileWalletProtocol/react-native-client](https://github.com/MobileWalletProtocol/react-native-client/issues) 리포지토리에 새 이슈를 생성해 주세요.