SDK
Integrating DCA API, it will need to utilize the limit order SDK, which 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).
Create DCA Orders:
For DCA SDK, you would need to add a param of mode:'Dca' (Capitalized the D) when create the DCA orders.
// you have to import OpenoceanSdk before you call features:
const function putOrder(wallet, order) {
const {
provider, // wallet provider
chainKey, // chain key, pleaze refer to supported chains
chainId，// chian id
account, // user's wallet address
mode:'Dca'
} = wallet
const {
makerTokenAddress, // maker token address
makerTokenDecimals, // maker token decimals
takerTokenAddress, // taker token address
takerTokenDecimals, // taker token decimals
makerAmount, // maker amount with decimals
takerAmount, // taker amount with decimals
gasPrice, // gas price
expire, // time difference counted by millisecond
receiver, // receiver(Optional)
receiverInputData, // receiver input data(Optional)
} = order
// You need to upload the result "Create limit order"
// to finalize the limit order implementation.
let result = await openoceanLimitOrderSdk.createLimitOrder(wallet, order)
}Cancel DCA Orders:
// You have to use Openocean API to get your limit order information to cancel order.
const function cancelOrder(wallet, order){
const {
provider, // wallet provider
chainKey, // chain key, pleaze refer to supported chains
chainId，// chian id
account, // user's wallet address
} = wallet
const {
orderData, // order data
gasPrice, // gas price
} = order
const result = await openoceanLimitOrderSdk.cancelLimitOrder(wallet, order)
}Load Chart
await openoceanLimitOrderSdk.loadChart({
chain: "base", // chain code,
fromTokenSymbol: "WETH", // 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);
}
})Demo
<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>ConnectWallet</h3>
<button @click="connectWallet()" style="margin-right:10px">connectWallet</button>
</div>
<div>
<h3>createDcaOrder</h3>
<button @click="createDcaOrder">createDcaOrder</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 { tryWalletConnect, Wallets, Chains } from '@openocean.finance/wallet';
import { openoceanLimitOrderSdk } from '@openocean.finance/limitorder-sdk';
import axios from 'axios';
// import VConsole from 'vconsole';
// const vConsole = new VConsole({ theme: 'dark' });
export default {
name: 'App',
components: {
},
data () {
return {
chainName: 'base',
walletName: 'MetaMask',
inToken: {
"address": "0x4200000000000000000000000000000000000006",
"decimals": 18,
"symbol": "WETH",
},
outToken: {
"address": "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
"decimals": 18,
"symbol": "USDC"
},
gasPrice: 3000000000,
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 createDcaOrder () {
let order = await openoceanLimitOrderSdk.createLimitOrder(
{
provider: this.provider,
chainKey: this.chainName,
account: this.myWallet.address,
chainId: this.chain.chainId,
mode: 'dca'
},
{
makerTokenAddress: this.inToken.address,
makerTokenDecimals: this.inToken.decimals,
takerTokenAddress: this.outToken.address,
takerTokenDecimals: this.outToken.decimals,
makerAmount: 1 * (10 ** this.inToken.decimals) + '',
takerAmount: 2 * (10 ** this.outToken.decimals) + '',
gasPrice: this.gasPrice,
expire: this.limitOrderExpireOptions[1].value,
}
);
let json = {
...order,
expireTime: 180,
time: 60, // 1 Minute
times: 2,
// minPrice:1,
// maxPrice:2,
}
const result = await axios.post(
`https://open-api.openocean.finance/v1/${this.chain.chainId}/dca/swap`,
json,
{
headers: { 'Content-Type': 'application/json' },
}
);
this.getLimitOrder()
},
async getLimitOrder () {
let url = `https://open-api.openocean.finance/v1/${this.chain.chainId}/dca/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 result = await axios.post(
`https://open-api.openocean.finance/v1/${this.chain.chainId}/dca/cancel`,
{ orderHash }
);
const { status } = (result && result.data) || {};
if (!(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: this.gasPrice,
}
);
}
this.getLimitOrder()
},
async connectWallet () {
try {
let data = await tryWalletConnect({
chainName: this.chainName,
walletName: this.walletName
})
if (data) {
this.provider = data.wallet.sdk
this.myWallet = data.wallet
this.chain = data.chain
this.getLimitOrder()
}
} catch (error) {
this.myWallet = null
this.chain = null
}
},
async loadChart () {
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);
}
})
}
}
}
</script>
<style></style>
Last updated