Ramper SDK for React Native

Note: We are migrating this SDK to @ramer/react-native-core, @ramper/react-native-evm and @ramper/react-native-terra

Installation

npm

$ npm install @ramper/react-native-terra

yarn

$ yarn add @ramper/react-native-terra

Step 1

Installing peer dependencies

$ yarn add query-string react-native-keychain react-native-inappbrowser-reborn react-native-get-random-values

Note: follow the further installation steps of react-native-inappbrowser-reborn

Step 1.1

You will need to register Node.js native modules in an entry point of your application, such as index.tsx:

import 'node-libs-react-native/globals';
import 'react-native-get-random-values';

Also, add resolvers to your metro.config.js

module.exports {
  // ...
  resolver: {
    // ...
    extraNodeModules: require('node-libs-react-native'),
  },
  // ...
}

Step 2

$ cd ios && pod install

Step 3

In order to Configure Deep Links you will need to get the app id and follow the next steps.

iOS

Add the below code in your AppDelegate.m file

// Add the header at the top of the file:
#import <React/RCTLinkingManager.h>

// Add this above `@end`:
- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

Copy your bundle id as shown in the below screenshot:

Paste your bundle id in identifier section and add ramper<appId> in the URI Scheme section: Make sure to not include the brackets <> in the URLScheme

Android

Add the following in your project/adnroid/app/src/main/AndroidManifest.xml file under Activity Tag

      <intent-filter>
      <!--  Make sure to not include the brackets <> in the scheme -->
        <data android:scheme="ramper<appId>" />
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
      </intent-filter>

Run your app

iOS

$ npx react-native run-ios

Android

$ npx react-native run-android

Usage

In your starting file import Ramper as below

import { Ramper } from '@ramper/react-native-terra';

call configure passing your appId (required), apiKey (required), locale (default: en) and authUrl (optional)

Ramper.configure({
  appId: 'appId',
  locale: 'kr' | 'en',
  authUrl: 'https://example.com',
  apiKey: 'apiKey',
});

Authentication

import { Auth } from '@ramper/react-native-terra';

Auth.signin accecpts three parameters Provider (google | facebook | twitter), browserProps (optional): check supported browser props for iOS and Android and customClientId (optional)

try {
  let response = await Auth.signin(
    'google' | 'facebook' | 'twitter',
    browserProps //optional,
    customClientId //optional
  );
  // handle response
} catch (error) {
  // handle error
}

Sign Out

try {
  const signout = await Auth.signOut(
    browserProps //optional
  );
  // handle signout
} catch (error) {
  // handle error
}

Example Transactions

import { Transactions } from '@ramper/react-native-terra';

create a function for the example:

const txOptionsTest = async (txOptions) => {
  try {
    let txData = await Transactions.postTransactions(
      txOptions,
      'testnet' | 'mainnet',
      browserProps //optional
    );
    // handle transactions
  } catch (error) {
    // handle error
  }
};

import { Coin, Fee, MsgSend, MsgSwap, MsgVote } from '@terra-money/terra.js';

Call the above created function as below

To transfer

txOptionsTest({
  msgs: [
    new MsgSend(from_address, to_address, {
      uusd: 1,
    }),
  ],
});

To swap

txOptionsTest({
  msgs: [new MsgSwap(from_address, new Coin('uusd', 1000000), 'ukrw')],
  memo: 'Swapping USD for KRW',
});

To Vote

txOptionsTest({
  msgs: [new MsgVote(5, from_adress, MsgVote.Option.VOTE_OPTION_NO_WITH_VETO)],
  memo: 'Voting No With Veto',
  fee: new Fee(1000000, '500000uusd'),
});