<template>
    <div>
        <span>Usdc</span>
        <input type="number" v-model="amountUsdc">
        <button @click="quote">quote</button>
        <button @click="swap">swap</button>
        <br/>
        <span>Metadex</span>
        <input type="number" v-model="amountMetadex">
        <button @click="quoteMetadex">quote</button>
        <button @click="swapMetadex">swap</button>
    </div>
</template>

<script>
//import typeActions from '../../store/typeActions';
import { mapGetters } from "vuex";


import liquidityPoolService from '@/services/liquidityPool.service.js';

export default {
    name: "LiquidityPool",
    computed: {
        ...mapGetters("liquidityPool", ["contract"]),
        ...mapGetters("global", ["account"]),
    },
    data() {
        return {
            amountUsdc: 1,
            amountMetadex: 1
        };
    },
    methods: {
        async quote() {
            liquidityPoolService.getQuoteUsdcMetadex(String(this.amountUsdc));
        },
        async swap() {
            liquidityPoolService.swapUsdcMetadex(this.amountUsdc, this.account);
        },
        async quoteMetadex() {
            liquidityPoolService.getQuoteMetadexUsdc(String(this.amountMetadex));
        },
        async swapMetadex() {
            liquidityPoolService.swapMetadexUsdc(this.amountMetadex, this.account);
        }
    }
}
</script>

<style lang="scss" scoped>

</style>