react-embed-kup-test
v1.0.5
Published
React component to easily embed an Ultrade application to your page
Downloads
222
Readme
ULTRADE REACT EMBED
Easiest way to ebmbed the Ultrade in a react application
Installation
npm i @ultrade/react-embed
Usage
Basic implementation
import { Ultrade } from '@ultrade/react-embed';
const YourApp = () => {
return (
<>
<YourAppTag/>
<Ultrade/>
</>
);
}
Widget mode
By default the tag will render the full Ultrade exchange interface. Putting the following attribute will render a widget - a simple buy/sell interface.
<Ultrade mode='widget'/>
Connection to testnet
<Ultrade src={'https://testnet.ultrade.org'}/>
Note:
src='<URL_TO_ULTRADE_APPLICATION>'
is needed only for TestNet not for MainNet.
Styles
Ultrade component will fill it's container size. You can controll the size by it's container size like shown below. The widget mode is optimized for this sizes "width: '380px' height: '625px".
<div width='100%' height='80%'>
<Ultrade/>
<div/>
Wallet inheritance
Optional: you can inherit wallet connection from your application. Use "useProvideWallet" hook and a walletInheritance property:
The
setSignFunction
is used to enable the aplication to send transactions to your wallet provider. The function accepts 2 parameters: first an identifier for your wallet provider, second is passing a sign function from your wallet provider.
import { useProvideWallet } from "@ultrade/react-embed";
const { setSignFunction } = useProvideWallet();
setSignFunction('<Key from WalletKeys specifying your wallet provider>', signFunction)
<Ultrade walletInheritance={true}/>
WalletKeys
is a TypeScript enum. For JavaScript you can provide any key directly without using enum. Examples:
//js
setSignFunction('txnlab-use-wallet', signTransactions);
setSignFunction('PeraWallet.Wallet', (tx) => peraWallet.signTransaction(tx));
setSignFunction('DeflyWallet.Wallet', (tx) => deflyWallet.signTransaction(tx));
setSignFunction('MyAlgoWallet', (tx) => myAlgoSign(tx));
//ts
import { WalletKeys } from "@ultrade/react-embed";
setSignFunction(WalletKeys.UseWallet, signTransactions);
setSignFunction(WalletKeys.Pera, (tx) => peraWallet.signTransaction(tx));
setSignFunction(WalletKeys.Defly, (tx) => deflyWallet.signTransaction(tx));
setSignFunction(WalletKeys.MyAlgo, (tx) => myAlgoSign(tx));
clearSignFunction
is used to remove a provided signFunction.
Use it if you want to switch from one wallet provider to another one.
Usage example
import { WalletKeys, useProvideWallet, Ultrade } from "@ultrade/react-embed"; //import Ultrade
import { useEffect, useMemo } from "react"; //import React
const YourApp = () => {
const peraWallet = useMemo(() => new PeraWalletConnect({...}), []); //create wallet provider
const { setSignFunction, clearSignFunction } = useProvideWallet(); //use Ultrade hook
useEffect(() => {
setSignFunction(WalletKeys.Pera, (tx) => peraWallet.signTransaction(tx)); //provide sign function to Ultrade App
return () => clearSignFunction(WalletKeys.Pera); //remove sign function in case if your component was unmounted
}, [peraWallet, setSignFunction, clearSignFunction]);
return (
<>
<YourAppTag/>
<div width='100%' height='80%'>
<Ultrade //render Ultrade application
mode='widget'
src={'https://testnet.ultrade.org'}
walletInheritance={true}
/>
<div/>
</>
);
}
License
MIT