react-native-mtp-onofframp
v1.0.3
Published
Mt Pelerin On-Off Ramp Widget integration using react-native-webview
Downloads
21
Maintainers
Readme
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)
See https://developers.mtpelerin.com/integration-guides/parameters-and-customization
A full list of supported networks and cryptocurrencies can be found here: https://api.mtpelerin.com/currencies/tokens
Supported fiat currencies: https://developers.mtpelerin.com/service-information/chains-and-currencies