Wallet Integration

Overview

Ramper supports many standardized methods, including: signMessage signTransaction sendTransaction sendToken connect

Get all dapps function from useRamperService

container.tsx

import { useRamperService } from '@ramper/react-native-core'
const {
  network,
  userWallet,
  convertBalanceToWei,
  onOpenWallet,
  onLogout,
  signMessage,
  signTypedData,
  signTransaction,
  sendTransaction,
  approve,
} = useRamperService();

Sign Message

container.tsx

import { useRamperService } from '@ramper/react-native-core';
const { signMessage } = useRamperService();
 
/*
  signMessage(message: string)
*/
signMessage('Hello, world!');

Sign Transaction

container.tsx

import { useRamperService } from '@ramper/react-native-core';
const { signTransaction, userWallet } = useRamperService();
 
function handleSignTransaction() {
  const value = {
    from: userWallet?.wallets[0].address,
    to: transactionReceive,
    value: transactionAmount,
  };
  // Using serailized transaction as params
  const result = await signTransaction(JSON.stringify(value));
};

Send Transaction

container.tsx

import { useRamperService } from '@ramper/react-native-core';
const { sendTransaction } = useRamperService();
 
const transaction = {
  from: '0x1234567890123456789012345678901234567890',
  to: '0x1234567890123456789012345678901234567890',
  contractAddress: '0x0Fd0288AAAE91eaF935e2eC14b23486f86516c8C', // C98 token contract address
  amount: '100.0001',
};
const result = await sendTransaction(transaction);

Send transaction params:

Param	Type	Description
from	string	the sender address
to	string	the recipient address
contractAddress	string	the token contract address, if not provided, it will be considered as send native token action
amount	string	the amount of token to send, please using . to separate the integer and decimal

Approve NFTs

container.tsx

import { Web3 } from 'web3';
import { RPCS_DEFAULT } from '@ramper/react-native-core';
 
const { approve } = useRamperService();
 
function onApproveNFTs() {
  const client = new Web3(
    new Web3.providers.HttpProvider(network?.rpcURL),
  );
    const contract = new client.eth.Contract(
      ERC721FullABI,
      approveNFTContactAddress,
    );
 
    const rawData = contract.methods.approve(
      approveNFTSpender,
      approveNFTTokenId,
    );
    const value: ApproveTransaction = {
      data: rawData.encodeABI(),
      to: approveNFTContactAddress,
      type: 'nft',
    };
    const result = await approve(value);
}

Approve NFT Collection

container.tsx

import {useRamperService } from '@ramper/react-native-core';
const { approve, network } = useRamperService();
 
function onApproveNFTCollection() {
  const client = new Web3(
      new Web3.providers.HttpProvider(network?.rpcURL),
    );
    const contract = new client.eth.Contract(
      ERC721FullABI,
      approveNFTContactAddress,
    );
 
    const rawData = contract.methods.setApprovalForAll(approveNFTSpender, true);
    const value: ApproveTransaction = {
      data: rawData.encodeABI(),
      to: approveNFTContactAddress,
      type: 'nftCollection',
    };
  const result = await approve(value);
}