# React Native EVM

The `@ramper/react-native-evm` package works in conjunction with the `@ramper/react-native-core` package. This package works with `ethers.js` and is responsible for handling all EVM-related peculiarities in order to interact with an Ethereum-based wallet.

#### npm

```shell
$ npm install @ramper/react-native-evm react-native-get-random-values
```

#### yarn

```shell
$ yarn add @ramper/react-native-evm react-native-get-random-values
```

### Step 1

```shell
$ cd ios && pod install
```

### Step 2

You will need to register react-native-get-random-values and @ethersproject/shims in the entry file of your application, such as index.js:

```jsx
// Import the crypto getRandomValues shim (**BEFORE** the shims)
import 'react-native-get-random-values';

// Import the ethers shims (**BEFORE** ethers)
import '@ethersproject/shims';
```

## Usage

```jsx
import { ethers } from 'ethers';
import { EtherTx } from '@ramper/react-native-evm';
```

### Transactions

```typescript
import { Transactions } from '@ramper/react-native-core';
```

Before you can do transactions you need to create an ethers provider

```typescript
const provider = ethers.getDefaultProvider(
  `https://polygon-mumbai.g.alchemy.com/v2/${yourApiKey}`
);
```

#### Sign Transaction

```typescript
const value = ethers.utils.parseEther('0.0000001');
try {
  const transaction = await Transactions.signTransaction({
    serializedTx: await EtherTx.serializeTransactionRequest(
      {
        from: 'fromAddress',
        to: 'toAddress',
        value,
      },
      provider
    ),
    network: SUPPORTED_ETHEREUM_NETWORKS.MATICMUM,
    theme: 'light',
  });
  const deserializedTransaction = EtherTx.deserializeTransaction(transaction);=
  
  // broadcast the Signed Transaction to the network:
  const transaction = await provider.sendTransaction(
    deserializedTransaction.transaction
  );
} catch (error) {
  // handle error
}
```

#### Sign Typed Data

```typescript
try {
  const signTypedDataResponse = await Transactions.signTypedData({
    serializedTx: await EtherTx.serializeSignTypedDataRequest(
      {
        name: 'Ether Mail',
        version: '1',
        chainId: 1,
        verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
      },
      {
        Person: [
          { name: 'name', type: 'string' },
          { name: 'wallet', type: 'address' },
        ],
        Mail: [
          { name: 'from', type: 'Person' },
          { name: 'to', type: 'Person' },
          { name: 'contents', type: 'string' },
        ],
      },
      {
        from: {
          name: 'Cow',
          wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
        },
        to: {
          name: 'Bob',
          wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
        },
        contents: 'Hello, Bob!',
      }
    ),
    network: SUPPORTED_ETHEREUM_NETWORKS.MATICMUM,
  });
  const deserializedTypedData = EtherTx.deserializeTransaction(signResponse);
  // handle response
} catch (error) {
  // handle error
}
```

#### Sign Message

```typescript
try {
  const signMessageResponse = await Transactions.signMessage({
    serializedTx: EtherTx.serializeMessage({
      message: 'Hello World',
      method: 'eth_sign',
    }),
    network: SUPPORTED_ETHEREUM_NETWORKS.MATICMUM,
    theme: 'light',
  });
  const deserializedRespone =
    EtherTx.deserializeTransaction(signMessageResponse);
  // handle response
} catch (error) {
  // handle error
}
```

#### Personal Sign

```typescript
try {
  const signPersonalMessageResponse = await Transactions.signMessage({
    serializedTx: EtherTx.serializeMessage({
      message: 'My email is john@doe.com - Thu, 22 Sep 2022 22:45:02 GMT',
      method: 'personal_sign',
    }),
    network: SUPPORTED_ETHEREUM_NETWORKS.MATICMUM,
    theme: 'light',
  });
  const deserializedResponse = EtherTx.deserializeTransaction(
    signPersonalMessageResponse
  );
  // handle response
} catch (error) {
  // handle error
}
```

### Deserialize Transaction

```jsx
const deserializedTx = EtherTx.deserializeTransaction(serializedTx);
```

Method Signature:

<pre class="language-typescript"><code class="lang-typescript">type DeserializedTx = {
   transaction: string // Signed Transaction
<strong>   msgs: any[]
</strong>}
</code></pre>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ramper.xyz/embedded-wallet-sdk/quickstart/for-web-apps/version-1/connect-mobile-sdk/react-native-evm.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.