# Quickstart with React Native

This guide will walk you through adding support for any **global wallet** into a React Native app by integrating the [Mobile Wallet Protocol Client](https://www.npmjs.com/package/@mobile-wallet-protocol/client).

:::tip
If you need a template or scaffold to start with, you can check out the [Global Wallet Expo Example](https://github.com/openfort-xyz/ecosystem-wallet-expo-example).
:::

## Installation

### Install Mobile Wallet Protocol Client

Add the latest version of Mobile Wallet Protocol Client to your project.

:::code-group
```zsh [npm]
npm i @mobile-wallet-protocol/client@latest
```

```zsh [yarn]
yarn add @mobile-wallet-protocol/client@latest
```
:::

## Prerequisites

### Install peer dependencies

The Mobile Wallet Protocol Client library requires the [Expo WebBrowser](https://docs.expo.dev/versions/latest/sdk/webbrowser/) and [Async Storage](https://github.com/react-native-async-storage/async-storage) packages to be installed.
Follow the instructions on the respective pages for any additional setup.

:::code-group
```zsh [npm]
npm i expo expo-web-browser @react-native-async-storage/async-storage
```

```zsh [yarn]
yarn add expo expo-web-browser @react-native-async-storage/async-storage
```
:::

### Polyfills

Mobile Wallet Protocol Client requires `crypto.randomUUID`, `crypto.getRandomValues`, and `URL` to be polyfilled globally since they are not available in the React Native environment.

Below is an example of how to polyfill these functions in your app using the [expo-crypto](https://docs.expo.dev/versions/latest/sdk/crypto/) and [expo-standard-web-crypto](https://github.com/expo/expo/tree/master/packages/expo-standard-web-crypto/) packages.

:::code-group
```zsh [npm]
npm i expo-crypto expo-standard-web-crypto react-native-url-polyfill
```

```zsh [yarn]
yarn add expo-crypto expo-standard-web-crypto react-native-url-polyfill
```
:::

:::code-group
```js [polyfills.js]
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]
import "./polyfills"; // import before @mobile-wallet-protocol/client

/// ...
```
:::

## Usage

Mobile Wallet Protocol Client provides 2 interfaces for mobile apps to interact with the Global Wallet, an EIP-1193 compliant provider interface and a wagmi connector.

:::tip
If your app is using wallet aggregator, go straight to **Option 2: Wagmi Connector** for 1-line integration.
:::

:::warning
To make these instructions concrete, we have created a sample global wallet called **Rapidfire ID**. To interact with it, you can find its SDK in the NPM package directory: [@rapidfire/id](https://www.npmjs.com/package/@rapidfire/id).

You can check out the GitHub [repository for Rapidfire Wallet](https://github.com/openfort-xyz/ecosystem-sample) to learn how to create your own wallet.
:::

### Option 1: EIP-1193 Provider

Create a new `EIP1193Provider` instance, which is EIP-1193 compliant.

```tsx [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: {
        type: 'web',
        name: "Rapid fire wallet",
        // The scheme should be the target wallet's URL
        scheme: 'https://id.sample.openfort.io',
        iconUrl: 'https://purple-magnificent-bat-958.mypinata.cloud/ipfs/QmfQrh2BiCzugFauYF9Weu9SFddsVh9qV82uw43cxH8UDV',
    },
});

// ...

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

### Option 2: Wagmi Connector

Add the latest version of Mobile Wallet Protocol wagmi-connectors to your project.

::code-group

```zsh [npm]
npm i @mobile-wallet-protocol/wagmi-connectors@latest
```

```zsh [yarn]
yarn add @mobile-wallet-protocol/wagmi-connectors@latest
```

\:::
Import the `createConnectorFromWallet` function and pass in the wallet you want to use to wagmi config.

```ts [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: {
        type: 'web',
        name: "Rapid fire wallet",
        scheme: 'https://id.sample.openfort.io',
        iconUrl: 'https://purple-magnificent-bat-958.mypinata.cloud/ipfs/QmfQrh2BiCzugFauYF9Weu9SFddsVh9qV82uw43cxH8UDV',
      },
    }),
  ],
  transports: {
    [base.id]: http(),
  },
});
```

Then you can use wagmi's react interface to interact with the Smart Wallet.

```tsx [App.tsx]
import { useConnect } from "wagmi";

// ...

const { connect, connectors } = useConnect();

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

## Gas Sponsorship

If you want to sponsor transactions, you need to add `#policy=POLICY_ID` to the wallet scheme.

```text
#policy=POLICY_ID
```

For example:

```ts [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: {
        type: 'web',
        name: "Rapid fire wallet",
        scheme: 'https://id.sample.openfort.io#policy=pol_a909d815-9b6c-40b2-9f6c-e93505281137', // [!code focus] 
        iconUrl: 'https://purple-magnificent-bat-958.mypinata.cloud/ipfs/QmfQrh2BiCzugFauYF9Weu9SFddsVh9qV82uw43cxH8UDV',
      },
    }),
  ],
  transports: {
    [base.id]: http(),
  },
});
```