Browser Wallet SDK
The SDK combines creating and canceling limit order functions.
How to Install the sdk in your project
npm i @openocean.finance/limitorder-sdkHow to use the sdk in your project
import { openoceanLimitOrderSdk } from '@openocean.finance/limitorder-sdk';You can then use all the functions explored by the SDK (API and swapSdk).
Supported Provider Types
Type
Example
Description
Web3 provider
new Web3(window.ethereum)
Traditional MetaMask-style Web3.js
Ethers provider
new ethers.providers.Web3Provider(...) (v5) / new ethers.BrowserProvider(...) (v6)
Modern Ethers.js integration
Initialize Wallet Provider
Using Web3.js (web3-provider)
web3-provider)import Web3 from 'web3';
await window.ethereum.request({ method: 'eth_requestAccounts' });
const provider = new Web3(window.ethereum);
const address = await provider.eth.getAccounts();
Pass the provider to the SDK like this:
const sdkParams = {
provider, // Web3 instance
chainKey: 'base', // Supported: base, arbitrum, etc.
account: address[0], // Wallet address
chainId: 8453, // Chain ID
};
Using Ethers.js (ethers-provider)
ethers-provider)Ethers v5
import { ethers } from 'ethers';
const provider = new ethers.providers.Web3Provider(window.ethereum); // v5
const signer = provider.getSigner();
const address = await signer.getAddress();
Ethers v6 (Recommended)
import { ethers } from 'ethers';
const provider = new ethers.BrowserProvider(window.ethereum); // v6
const signer = await provider.getSigner();
const address = await signer.getAddress();
Usage in SDK:
const sdkParams = {
provider, // Ethers provider (v5 or v6)
chainKey: 'base',
account: address,
chainId: 8453,
};
Create a Limit Order
const order = await openoceanLimitOrderSdk.createLimitOrder(
sdkParams,
{
makerTokenAddress: '0xabc...',
takerTokenAddress: '0xdef...',
makerTokenDecimals: 6,
takerTokenDecimals: 6,
makerAmount: '1000000', // 1.0 USDC
takerAmount: '2000000', // 2.0 USDT
gasPrice: parseInt(gasPrice * 1.2),
expire: '1H', // Expiration time (e.g., "1H")
}
);
Cancel a Limit Order
await openoceanLimitOrderSdk.cancelLimitOrder(
sdkParams,
{
orderData: order.data,
gasPrice: parseInt(gasPrice * 1.2),
}
);
Load Chart (Optional)
await openoceanLimitOrderSdk.loadChart({
chain: "bsc", // chain code,
fromTokenSymbol: "BNB", // from token symbol
toTokenSymbol: "BUSD", // to token symbol
container: document.getElementById('chart'), // chart's container
timeLimit: "1d", // 1d、1w、1m、1y、all
theme: "dark", // dark、light
type: "line", // line、bar
setPoint: ({ label, des }) => { // setPoint callback
console.log('setPoint', label, des);
}
})Expiration Options
[
{ value: "10M", label: "10 Mins" },
{ value: "1H", label: "1 Hour" },
{ value: "1D", label: "1 Day" },
{ value: "3D", label: "3 Days" },
{ value: "7D", label: "7 Days" },
{ value: "30D", label: "1 Month" },
{ value: "3Month", label: "3 Months" },
{ value: "6Month", label: "6 Months" },
{ value: "1Y", label: "1 Year" }
]
Full Demo (Vue.js + @openocean.finance/limitorder-sdk)
This is a minimal working demo using Vue.js, Web3 or Ethers v6, and OpenOcean's limit order SDK:
<template>
<div id="app">
<div style="color:blue">
<div v-if="chain">chain:{{ chain.chainName }}</div>
<div v-if="myWallet"> walletName:{{ myWallet.name }}</div>
<div v-if="myWallet">address:{{ myWallet.address }}</div>
</div>
<div>
<div>
<h3>Connect Wallet Web3</h3>
<button @click="ConnectWalletWeb3()" style="margin-right:10px">ConnectWalletWeb3</button>
</div>
<div>
<h3>Connect Wallet Ethers</h3>
<button @click="ConnectWalletEthers()" style="margin-right:10px">ConnectWalletEthers</button>
</div>
<div>
<h3>createLimitOrder</h3>
<button @click="createLimitOrder">createLimitOrder</button>
</div>
<div>
<h3>Orders</h3>
</div>
<div v-for="(item, i) in orders" :key="i">
<!-- {{ item.data }} -->
<span>{{ item.data.makerAssetSymbol }}</span>
<span>-></span>
<span>{{ item.data.takerAssetSymbol }}</span>
<button v-if="item.statuses === 5 || item.statuses === 1" @click="cancelOrder(item)">cancelOrder</button>
</div>
<div id="chart" style="width: 100%; height: 400px; border: 1px solid #c00;">
</div>
</div>
</div>
</template>
<script>
import { openoceanLimitOrderSdk } from '@openocean.finance/limitorder-sdk';
import axios from 'axios';
import { ethers } from 'ethers';
import Web3 from 'web3';
export default {
name: 'App',
components: {
},
data () {
return {
chainName: 'base',
outToken: {
"address": "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
"decimals": 6,
"symbol": "USDC",
},
inToken: {
"address": "0xfde4c96c8593536e31f229ea8f37b2ada2699bb2",
"decimals": 6,
"symbol": "USDT"
},
// chainName: 'arbitrum',
// inToken: {
// "address": "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
// "decimals": 6,
// "symbol": "USDC",
// },
// outToken: {
// "address": "0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9",
// "decimals": 6,
// "symbol": "USDT"
// },
gasPrice:0,
walletName: 'MetaMask',
inTokenBalance: null,
outTokenBalance: null,
inAmount: 1,
outAmount: null,
myWallet: null,
chain: null,
provider: null,
limitOrderExpireOptions: [
{
value: "10M",
label: "10 Mins",
},
{
value: "1H",
label: "1 Hour",
},
{
value: "1D",
label: "1 Day",
},
{
value: "3D",
label: "3 Days",
},
{
value: "7D",
label: "7 Days",
},
{
value: "30D",
label: "1 Month",
},
{
value: "3Month",
label: "3 Month",
},
{
value: "6Month",
label: "6 Month",
},
{
value: "1Y",
label: "1 Year",
}
],
orders: []
}
},
async created () {
},
mounted () {
this.loadChart()
},
methods: {
async createLimitOrder () {
if(!this.provider) {
alert('Please connect wallet first')
return
}
const p = {
provider: this.provider,
chainKey: this.chainName,
account: this.myWallet.address,
chainId: this.chain.chainId
}
let order = await openoceanLimitOrderSdk.createLimitOrder(
p,
{
makerTokenAddress: this.inToken.address,
makerTokenDecimals: this.inToken.decimals,
takerTokenAddress: this.outToken.address,
takerTokenDecimals: this.outToken.decimals,
makerAmount: 0.01 * (10 ** this.inToken.decimals) + '',
takerAmount: 0.02 * (10 ** this.outToken.decimals) + '',
gasPrice: parseInt(this.gasPrice*1.2),
expire: this.limitOrderExpireOptions[1].value,
}
);
const result = await axios.post(
`https://open-api.openocean.finance/v1/${this.chain.chainId}/limit-order`,
order,
{
headers: { 'Content-Type': 'application/json' },
}
);
this.getLimitOrder()
},
async getLimitOrder () {
let url = `https://open-api.openocean.finance/v1/${this.chain.chainId}/limit-order/address/${this.myWallet.address}?page=1&limit=100&statuses=[1,2,5]&sortBy=createDateTime&exclude=0`
const res = await axios.get(url);
this.orders = res.data.data
},
async cancelOrder (order) {
const { orderHash } = order;
const { data } = await axios.post(
`https://open-api.openocean.finance/v1/${this.chain.chainId}/limit-order/cancelLimitOrder`,
{ orderHash }
);
const { status } = (data && data.data) || {};
if (status && !(status === 3 || status === 4)) {
let res = await openoceanLimitOrderSdk.cancelLimitOrder(
{
provider: this.provider,
chainKey: this.chainName,
account: this.myWallet.address,
chainId: this.chain.chainId
},
{
orderData: order.data,
gasPrice: parseInt(this.gasPrice*1.2),
}
);
}
this.getLimitOrder()
},
async ConnectWalletWeb3 () {
try {
await window.ethereum.request({ method: 'eth_requestAccounts' });
this.provider = new Web3(window.ethereum);
const address = await this.provider.eth.getAccounts();
const gasPrice = await this.provider.eth.getGasPrice();
this.gasPrice = Number(gasPrice);
console.log(this.gasPrice);
this.myWallet = {
address: address[0],
name: 'metamask'
}
this.chain = {
chainId: this.chainName === 'base' ? 8453 : 42161,
chainName: this.chainName
}
this.getLimitOrder()
} catch (error) {
this.myWallet = null
this.chain = null
}
},
async ConnectWalletEthers () {
await window.ethereum.request({ method: 'eth_requestAccounts' });
// this.provider = new ethers.providers.Web3Provider(window.ethereum); //ethers v5
this.provider = new ethers.BrowserProvider(window.ethereum); //ethers v6
let gasData = await this.provider.getFeeData();
this.gasPrice = Number(gasData.gasPrice);
console.log(this.gasPrice);
const signer = await this.provider.getSigner();
const address = await signer.getAddress();
this.myWallet = {
address: address,
name: 'metamask'
}
this.chain = {
chainId: this.chainName === 'base' ? 8453 : 42161,
chainName: this.chainName
}
this.getLimitOrder()
console.log(address);
},
async loadChart () {
await openoceanLimitOrderSdk.loadChart({
chain: this.chainName, // chain code,
fromTokenSymbol: this.inToken.symbol, // from token symbol
toTokenSymbol: this.outToken.symbol, // to token symbol
container: document.getElementById('chart'), // chart's container
timeLimit: "1d", // 1d、1w、1m、1y、all
theme: "dark", // dark、light
type: "line", // line、bar
setPoint: ({ label, des }) => { // setPoint callback
console.log('setPoint', label, des);
}
})
}
}
}
</script>
<style></style>
Last updated