react-native-mtp-onofframp

Getting started

React Native library to quickly integrate Mt Pelerin On/Off Ramp platform

Installation

npm install --save react-native-mtp-onofframp

Dependencies

• react
• react-native
• react-native-webview

Simple integration

Simple integration provides a way to quickly provide on/off ramp capabilities with Mt Pelerin from your app but does not include any custom signing capabilities

import React, { Component } from 'react';
import { Dimensions, TouchableOpacity, View, Text, Platform } from 'react-native';
import MtPelerinOnOfframp from 'react-native-mtp-onofframp';

const deviceHeight = Dimensions.get('window').height;

const overlay = {
  position: 'absolute',
  padding: 16,
  right: 0,
  left: 0,
  alignItems: 'center',
  zIndex: 10,
};

const topOverlay = {
  top: 0,
  padding: 6,
  paddingTop: (Platform.OS === 'ios' && deviceHeight >= 812) ? 40 : 20,
  backgroundColor: 'rgba(0,0,0,0.4)',
  flexDirection: 'row',
  justifyContent: 'flex-start',
  alignItems: 'center',
};

const whiteText = {
  color: 'white',
};

class OnOffRamp extends Component {
  render() {
    return (
      <MtPelerinOnOfframp
        onGetAddresses={() => this.onGetAddresses()}
        onSignPersonalMessage={params => this.onSignPersonalMessage(params)}
        onSendTransaction={params => this.onSendTransaction(params)}
        onOffRampOptions={{
          tab: 'sell',
          ssc: 'MATIC',
          sdc: 'CHF',
          type: 'web'
        }}
      >
        <View style={[overlay, topOverlay]}>
          <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
            <Text style={whiteText}>Close</Text>
          </TouchableOpacity>
        </View>
      </MtPelerinOnOfframp>
    );
  }
}

export default OnOffRamp;

Advanced integration

Advanced integration provides a way to quickly provide on/off ramp capabilities with Mt Pelerin from your app with custom signing capabilities

import React, { Component } from 'react';
import { Dimensions, Platform, TouchableOpacity, View, Text } from 'react-native';
import MtPelerinOnOfframp from 'react-native-mtp-onofframp';

const deviceHeight = Dimensions.get('window').height;

const overlay = {
  position: 'absolute',
  padding: 16,
  right: 0,
  left: 0,
  alignItems: 'center',
  zIndex: 10,
};

const topOverlay = {
  top: 0,
  padding: 6,
  paddingTop: (Platform.OS === 'ios' && deviceHeight >= 812) ? 40 : 20,
  backgroundColor: 'rgba(0,0,0,0.4)',
  flexDirection: 'row',
  justifyContent: 'flex-start',
  alignItems: 'center',
};

const whiteText = {
  color: 'white',
};

class OnOffRamp extends Component {
  onGetAddresses() {
    /* Returns a promise that resolves with an array of addresses (eg. ['0x270402aeB8f4dAc8203915fC26F0768feA61b532'] or ['bc1qnshsvhrfl28g03k0vxdez6vua56r0c72xy9e93']) */

  }

  onSignPersonalMessage(params) {
    /* Receives an array (params) of type [UTF8 message to be signed, address for signing] (eg. ['hello', '0x270402aeB8f4dAc8203915fC26F0768feA61b532'] or ['hello', 'bc1qnshsvhrfl28g03k0vxdez6vua56r0c72xy9e93'] )
       Returns a promise that resolves with the signature (eg. '0xbdbcae773ecf33fb547558e52f4c04b429ef9f73d562ff1e0aa09ffda2de563f09c00b1456ec8c3306c82275c08fb12d999214c257a6ec0387d1d6bcca05e6401b' or '1f5a185660da5b16413c4936a2ee26ca7d52442db4c9c0543cf0f97cb4be4a64357b4e018b527d9882797cd85ede48438494545f67d4f951c62a525d023608bc15')
     */
  }

  onSendTransaction(rawTx) {
    /* Receives a raw transaction object or string (rawTx) (eg. {
  nonce: '0x00',
  gasPrice: '0x09184e72a000',
  gasLimit: '0x2710',
  to: '0x0000000000000000000000000000000000000000',
  value: '0x00',
  data: '0x7f7465737432000000000000000000000000000000000000000000000000000000600057',
} or '0100000001fc6a5bbbb20f827c6f0a589d85fbca2b4c99090173ce91ca29e0c346298d6816010000008a47304402207772d91e633259fb0cbd35427c4d24806877c5f52e8a8d032505ce3f8b73aa2302201731382284469f8bad48ad2457e1cf445b23c158922f26fb3e3c4fad6298cb5d0141044739edd9fc850cf5db037ecd839ba09f699765d0b13fe8c949688ed3b7ef9291a038729e0c70d6802e3adf1458550922012ebd1e9a979775578eefa867557506ffffffff0160ea0000000000001976a91437383464376cccaf2ae4c8a121805f45bf544e4488ac00000000')
      Returns a promise that resolves the hex hash of the transaction (eg. '0x65e40dfe71d3d83b4393ff173023b792fc912c6c03ba07233a7ea3f379d9a59e' or 'a8fcadb08f6a47c6ca2131511d0b4c34c2a30000f24ee7d84f9e54755ac27902')
      Please note that onSendTransaction is also responsible for broadcasting the transaction to the blockchain network
    */
  }

  render() {
    return (
      <MtPelerinOnOfframp
        onGetAddresses={() => this.onGetAddresses()}
        onSignPersonalMessage={params => this.onSignPersonalMessage(params)}
        onSendTransaction={rawTx => this.onSendTransaction(rawTx)}
        onOffRampOptions={{
          tab: 'sell',
          ssc: 'MATIC',
          sdc: 'CHF',
          type: 'webview',
        }}
      >
        <View style={[overlay, topOverlay]}>
          <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
            <Text style={whiteText}>Close</Text>
          </TouchableOpacity>
        </View>
      </MtPelerinOnOfframp>
    );
  }
}

export default OnOffRamp;

Options (onOffRampOptions)

• lang: 2 characters language code ('fr'|'en')
• primary: Primary color (hexadecimal encoded)
• tab: Tab displayed by default ('buy'|'sell)
• bsc: Default buy tab source currency
• bdc: Default buy tab destination currency
• ssc: Default sell tab source currency
• sdc: Default sell tab destination currency
• net: Default network
• type: Integration type ('web'|'popup'|'webview')

A full list of supported networks and cryptocurrencies can be found here: https://api.mtpelerin.com/currencies/tokens

Supported fiat currencies: CHF, EUR, USD, GBP, CAD and SGD