SDK

npm i @openocean.finance/limitorder-sdk

import { openoceanLimitOrderSdk } from '@openocean.finance/limitorder-sdk';

// 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
  } = 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)
}

// 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)
}

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);
  }
})

// Some code
<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>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 { 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: 'bsc',
      walletName: 'MetaMask',
      inToken: {
        "address": "0x55d398326f99059ff775485246999027b3197955",
        "decimals": 18,
        "symbol": "USDT",
      },
      outToken: {
        "address": "0xe9e7cea3dedca5984780bafc599bd69add087d56",
        "decimals": 18,
        "symbol": "BUSD"
      },
      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 createLimitOrder () {

      let order = await openoceanLimitOrderSdk.createLimitOrder(
        {
          provider: this.provider,
          chainKey: this.chainName,
          account: this.myWallet.address,
          chainId: this.chain.chainId
        },
        {
          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,
        }
      );
     
      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 result = await axios.post(
        `https://open-api.openocean.finance/v1/${this.chain.chainId}/limit-order/cancelLimitOrder`,
        { 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>