# EVM Dapp Integration

Welcome to Ramper Wallet Extension Developer Guide. This documentation contains guides for developers to get started developing Ramper Wallet on EVM networks

## Connect <a href="#connect" id="connect"></a>

### The easiest way to connect to Ramper Wallet <a href="#the-easiest-way-to-connect-to-ramper-wallet" id="the-easiest-way-to-connect-to-ramper-wallet"></a>

Check if the provider is `window.ramper2`, if not, please replace it with the exclusive Ramper Wallet provider `window.ramper2`.

For example, see below:

```
function getProvider() {
  const provider = window.ramper2;
  if (!provider) {
    return window.open('https://https://chrome.google.com/webstore/detail/ramper-wallet/nbdhibgjnjpnkajaghbffjbkcgljfgdi?hl=vi');
  }
  return provider;
}
```

**ChainID:**

| Hex  | Decimal | Network                   |
| ---- | ------- | ------------------------- |
| 0x1  | 1       | Ethereum (Mainnet)        |
| 0x58 | 88      | TomoChain (Mainnet)       |
| 0x38 | 56      | BNB Smart Chain (Mainnet) |
| 0x89 | 137     | Polygon (Mainnet)         |

Use `eth_chainId` or `net_version` to return the current network/chain ID

### To detect Ramper Wallet Extension <a href="#to-detect-ramper-wallet-extension" id="to-detect-ramper-wallet-extension"></a>

&#x20;

```
if(window.ramper2){ console.log('Ramper Extension is installed!'); }
```

### To connect Ramper Wallet Extension <a href="#to-connect-ramper-wallet-extension" id="to-connect-ramper-wallet-extension"></a>

To connect Ramper Extension means to access the user's \[blockchain - like Ethereum] account(s).

***

#### Access a user's accounts <a href="#access-a-users-accounts" id="access-a-users-accounts"></a>

We recommend providing a button to allow users to connect Ramper Wallet to your dapp. Selecting this button should call `eth_requestAccounts` to access the user's accounts.

```
//Alias for connection
window.ramper2.provider.request({method: 'eth_requestAccounts'});​
```

#### Handle accounts[​](https://docs.metamask.io/wallet/how-to/connect/access-accounts/#handle-accounts) <a href="#handle-accounts" id="handle-accounts"></a>

Use the `eth_accounts` RPC method to handle user accounts. Listen to the `accountsChanged` provider event to be notified when the user changes accounts.

```
// Connect & get accounts
window.ramper2.provider.request({method: 'eth_accounts'});
```

#### Switch chain <a href="#switch-chain" id="switch-chain"></a>

Requests that the Ramper Extension switches its active Ethereum chain.

```
window.ramper2.provider.request({
  "method": "wallet_switchEthereumChain",
  "params": [
    {
      "chainId": "0x58"
    }
  ]
});
```

&#x20;

### To disconnect Ramper Wallet Extension  <a href="#to-disconnect-ramper-wallet-extension" id="to-disconnect-ramper-wallet-extension"></a>

To disconnect Ramper Extension, please use:

```
window.ramper2.provider.disconnect()
```

## To experience functions <a href="#to-experience-functions" id="to-experience-functions"></a>

Once your account is connected, let's start experiencing more functions.‌

### Account <a href="#account" id="account"></a>

#### How to get Current Account <a href="#how-to-get-current-account" id="how-to-get-current-account"></a>

return `Promise<Array[String]>`

* If the wallet can not be found, return `[]` instead of `throw Error`

```
window.ramper2.provider.request({ method: 'eth_accounts' }).then(accounts => {
  if (accounts[0]) {
    // Do something with accounts
  } else {
    // Wallet not found
  }
})
```

### Sign Transaction <a href="#sign-transaction" id="sign-transaction"></a>

{% hint style="info" %}
**Important**

`eth_signTypedData_v1`, and `eth_signTypedData_v3` are deprecated. We highly recommend users use `eth_signTypedData_v4` or `personal_sign`.
{% endhint %}

#### Personal\_sign <a href="#personal_sign" id="personal_sign"></a>

`personal_sign` provides a simple means to request signatures that are human-readable and don't require efficient processing on-chain. It's commonly used for signature challenges authenticated on a web server.

Ramper Wallet implements both `personal_sign` and `eth_sign`. You might need to check what method your supported signers use for a given implementation.

```
method: 'personal_sign', params: [msg, from],
```

#### eth\_signTypedData\_v4 <a href="#eth_signtypeddata_v4" id="eth_signtypeddata_v4"></a>

`eth_signTypedData_v4` offers highly legible signatures that can be processed efficiently on-chain. Adheres to the [EIP-712 ](https://eips.ethereum.org/EIPS/eip-712)standard, enabling users to sign typed structured data that can be confirmed on-chain.

```
const msgParams = JSON.stringify({
    domain: {
      chainId: 0x,
      name: 'Ether Mail',
      verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
      version: '1',
    },

    message: {
      contents: 'Hello, Bob!',
      attachedMoneyInEth: 4.2,
      from: {
        name: 'Cow',
        wallets: [
          '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
          '0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF',
        ],
      },
      to: [
        {
          name: 'Bob',
          wallets: [
            '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
            '0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57',
            '0xB0B0b0b0b0b0B000000000000000000000000000',
          ],
        },
      ],
    },
    
    primaryType: 'Mail',
    types: {
      EIP712Domain: [
        { name: 'name', type: 'string' },
        { name: 'version', type: 'string' },
        { name: 'chainId', type: 'uint256' },
        { name: 'verifyingContract', type: 'address' },
      ],
      Group: [
        { name: 'name', type: 'string' },
        { name: 'members', type: 'Person[]' },
      ],
      Mail: [
        { name: 'from', type: 'Person' },
        { name: 'to', type: 'Person[]' },
        { name: 'contents', type: 'string' },
      ],
      Person: [
        { name: 'name', type: 'string' },
        { name: 'wallets', type: 'address[]' },
      ],
    },
  ;

```

**Note:**

`Gas limit​` : is an optional parameter, since Ramper Wallet automatically calculates a reasonable gas price.

`chainid`: The chain ID is derived from the user's current selected network at `window.ramper2.provider.net_version`.

#### personal\_ecRecover <a href="#personal_ecrecover" id="personal_ecrecover"></a>

`personal_ecRecover` returns the address associated with the private key that was used to calculate a signature.

`method: 'personal_ecRecover', params: [message, signature],`

&#x20;

### Transfer <a href="#transfer" id="transfer"></a>

This method requires that the user has granted permission to interact with their account first, so please make sure to call `eth_requestAccounts` or `wallet_requestPermissions` first.

#### eth\_sendTransaction <a href="#eth_sendtransaction" id="eth_sendtransaction"></a>

return `Promise<hash>`

```
window.ramper2.provider.request({
  method: 'eth_sendTransaction',
  params: [
    {
      from: 'string',
      to: 'string',
      gas: 'string',
      gasPrice: 'string',
      value: 'string',
      data: 'string',
      nonce: 'string'
    }
  ]
})
```

### Decrypt & Encrypt <a href="#decrypt-and-encrypt" id="decrypt-and-encrypt"></a>

#### eth\_decrypt <a href="#eth_decrypt" id="eth_decrypt"></a>

Requests that Ramper Wallet decrypt the specified encrypted message.

* The message must have been encrypted using the public encryption key of the specified Ethereum address.

return `Promise<string>`

```
window.ramper2.provider.request({
  method: 'eth_decrypt',
  params: [encryptedMessage, accounts[0]],
  })
   .then((decryptedMessage) =>
    console.log('The decrypted message is:', decryptedMessage)
  )
  .catch((error) => console.log(error.message));
})
```

#### eth\_getEncryptionPublicKey <a href="#eth_getencryptionpublickey" id="eth_getencryptionpublickey"></a>

Requests that the user share their public encryption key. Returns a public encryption key, or rejects if the user denies the request.

return `Promise<string>`- The public encryption key of the Ethereum account whose encryption key should be retrieved

```
let encryptionPublicKey
window.ramper2.provider.request({
  method: 'eth_getEncryptionPublicKey',
  params: [accounts[0]], // you must have access to the specified account
  })
  .then((result) => {
    encryptionPublicKey = result;
  })
  .catch((error) => {
    if (error.code === 4001) {
     
      // EIP-1193 userRejectedRequest error
      console.log("We can't encrypt anything without the key.");
    } else {
      console.error(error);
    }
  });
```

#### Encrypt <a href="#encrypt" id="encrypt"></a>

```
const ethUtil = require('ethereumjs-util');
const encryptedMessage = ethUtil.bufferToHex(

  Buffer.from(
    JSON.stringify(
      sigUtil.encrypt(
        {
          publicKey: encryptionPublicKey,
          data: 'hello world!,
          version: 'x25519-xsalsa20-poly1305',
        }
      )
    ),
    'utf8'
  )
);
```

#### List of events <a href="#list-of-events" id="list-of-events"></a>

Currently, we only support some action events from the wallet extension

```
window.ethereum.on('event_name', callback);

​//Example

window.ramper2.provider.on('close', () => window.location.reload());

window.ramper2.provider.on('accountsChanged', () => window.location.reload());
```

| Events          | Trigger                                          |
| --------------- | ------------------------------------------------ |
| accountsChanged | Receive when active account changed in Extension |
| chainChanged    | Receive when active chain changed in Extension   |

| Method               | Description           |
| -------------------- | --------------------- |
| on(event, callback)  | Add event listener    |
| off(event, callback) | Remove event listener |

<br>


---

# 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/ramper-wallet/ramper-wallet-extension-integration/evm-dapp-integration.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.