npm package: @ramper/react-native-terra
Description: Ramper's React Native SDK helps developers provide access to the Terra Blockchain through SSO for non-native crypto users.
Author: ramper
Latest version: 0.1.2

# Ramper SDK for React Native

<b>Note: </b>We are migrating this SDK to [@ramer/react-native-core](https://www.npmjs.com/package/@ramper/react-native-core), [@ramper/react-native-evm](https://www.npmjs.com/package/@ramper/react-native-evm) and [@ramper/react-native-terra](https://www.npmjs.com/package/@ramper/react-native-terra)

# Installation

### npm

```sh
$ npm install @ramper/react-native-terra
```

### yarn

```sh
$ yarn add @ramper/react-native-terra
```

## Step 1

## Installing peer dependencies

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

<b>Note:</b> follow the further installation steps of [react-native-inappbrowser-reborn](https://github.com/proyecto26/react-native-inappbrowser#mostly-automatic-installation)

## Step 1.1

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

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

Also, add resolvers to your `metro.config.js`

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

## Step 2

```sh
$ 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

```objc
// 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:
![Alt text](https://i.ibb.co/bRPzW40/deep-link-ios-1.jpg '5.2')

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
![Alt text](https://i.ibb.co/0Z5tgwr/deep-link-ios-2.jpg '5.3')

# Android

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

```xml
      <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

```sh
$ npx react-native run-ios
```

### Android

```sh
$ npx react-native run-android
```

# Usage

In your starting file import Ramper as below

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

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

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

## Authentication

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

Auth.signin accecpts three parameters <b>Provider (google | facebook | twitter)</b>, <b>browserProps (optional): check supported browser props for [iOS](https://github.com/proyecto26/react-native-inappbrowser/#ios-options) and [Android](https://github.com/proyecto26/react-native-inappbrowser/#android-options)</b> and <b> customClientId (optional)</b>

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

## Sign Out

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

## Example Transactions

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

create a function for the example:

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

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

#### Call the above created function as below

### To transfer

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

### To swap

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

### To Vote

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