Full Vue Example

1
<template>
2
  <div id="app">
3
    <div v-if="chain">chain: {{ chain.chainName }}</div>
4
    <div v-if="myWallet">walletName: {{ myWallet.name }}, address: {{ myWallet.address }}</div>
5
    <div v-if="inToken">inToken: {{ inToken.symbol }} Balance: {{ inTokenBalance }}</div>
6
    <div v-if="outToken">outToken: {{ outToken.symbol }} Balance: {{ outTokenBalance }}</div>
7
    <div>
8
      <h3>ConnectWallet</h3>
9
      <button @click="connectWallet('eth')">connectWallet eth</button>
10
      <button @click="connectWallet('bsc')">connectWallet bsc</button>
11
      <button @click="connectWallet('polygon')">connectWallet polygon</button>
12
    </div>
13
    <div>
14
      <h3>Quote</h3>
15
      <div v-if="inToken && outToken">{{ inAmount }} {{ inToken.symbol }} swap to {{ outAmount }} {{ outToken.symbol }}</div>
16
      <button @click="quote">quote</button>
17
    </div>
18
    <div><h3>Swap</h3><button @click="swap">swap</button></div>
19
    <div><h3>GetBalance</h3><button @click="getBalance">GetBalance</button></div>
20
  </div>
21
</template>
22

23
<script>
24
import { OpenoceanSdk } from '@openocean.finance/openocean-sdk';
25
import BigNumber from 'bignumber.js';
26
const genSdk = new OpenoceanSdk()
27
const { api, swapSdk, config } = genSdk
28

29
export default {
30
  data() {
31
    return {
32
      chainName: 'bsc', walletName: 'MetaMask',
33
      inToken: null, outToken: null, gasPrice: 5,
34
      inTokenBalance: null, outTokenBalance: null, inAmount: 1, outAmount: null,
35
      myWallet: null, chain: null,
36
    }
37
  },
38
  methods: {
39
    async getGasPrice() { this.gasPrice = await api.getGasPrice({ chain: this.chainName }) },
40
    async getTokenList() {
41
      let { data } = await api.getTokenList({ chain: this.chainName })
42
      this.inToken = data.find(item => item.symbol == 'USDC')
43
      this.outToken = data.find(item => item.symbol == 'BUSD')
44
      this.getBalance()
45
    },
46
    async quote() {
47
      let response = await api.quote({
48
        chain: this.chainName, inTokenAddress: this.inToken.address,
49
        outTokenAddress: this.outToken.address, amount: this.inAmount, gasPrice: this.gasPrice
50
      })
51
      if (response.code == 200)
52
        this.outAmount = new BigNumber(response.data.outAmount).div(10 ** this.outToken.decimals).toFixed(4)
53
      else alert('Error:' + response.message)
54
    },
55
    async swap() {
56
      if (!this.myWallet) { alert('Please connect the wallet.'); return }
57
      if (this.inTokenBalance < this.inAmount) { alert(this.inToken.symbol + ' Insufficient balance.'); return }
58
      let { data } = await api.exchange({ chain: this.chainName })
59
      let allowance = await this.getAllowance(data.approveContract)
60
      if (new BigNumber(allowance).lt(this.inAmount)) { await this.approve(data.approveContract); return }
61
      let response = await swapSdk.swapQuote({
62
        chain: this.chainName, inTokenAddress: this.inToken.address, outTokenAddress: this.outToken.address,
63
        amount: this.inAmount, gasPrice: this.gasPrice, slippage: 1, account: this.myWallet.address,
64
      })
65
      if (response.code == 200) {
66
        swapSdk.swap(response.data)
67
          .on('error', (error) => {})
68
          .on('transactionHash', (hash) => {})
69
          .on('receipt', (data) => { this.getBalance() })
70
          .on('success', (data) => {})
71
      } else alert('Error:' + response.message)
72
    },
73
    async connectWallet(chainName) {
74
      try {
75
        if (chainName) this.chainName = chainName
76
        let data = await swapSdk.connectWallet({ chainName: this.chainName, walletName: this.walletName })
77
        if (data) { this.myWallet = data.wallet; this.chain = data.chain; this.getTokenList(); this.getGasPrice() }
78
      } catch (error) { this.myWallet = null; this.chain = null }
79
    },
80
    async getBalance() {
81
      if (!this.myWallet) { alert('Please connect the wallet.'); return }
82
      this.inTokenBalance = (await swapSdk.getBalance({ account: this.myWallet.address, chain: this.chainName, tokenAddressOrSymbol: this.inToken.address, decimals: this.inToken.decimals })).short
83
      this.outTokenBalance = (await swapSdk.getBalance({ account: this.myWallet.address, chain: this.chainName, tokenAddressOrSymbol: this.outToken.address, decimals: this.outToken.decimals })).short
84
    },
85
    async getAllowance(approveContract) {
86
      return await swapSdk.getAllowance({ chain: this.chainName, decimals: this.inToken.decimals, tokenAddress: this.inToken.address, approveContract, account: this.myWallet.address })
87
    },
88
    async approve(approveContract) {
89
      let approve = await swapSdk.approve({ chain: this.chainName, tokenAddress: this.inToken.address, approveContract, gasPrice: this.gasPrice, decimals: this.inToken.decimals, amount: this.inAmount })
90
      if (!approve.code) approve.on('error', () => {}).on('transactionHash', () => {}).on('receipt', () => {}).on('success', () => {})
91
    }
92
  }
93
}
94
</script>