<template>
  <v-card elevation="0" class="how">
    <v-card-title><v-icon icon="mdi-information-outline"/>&nbsp;How&nbsp;It&nbsp;Works</v-card-title>
    <v-card-item><v-img src="/howitworks.png" class="my-6"/></v-card-item>
    <v-card-text>
      <h4>Personal Trading Vaults</h4>
      <p>
        Dexorder provides advanced order management for your favorite <uniswap-logo/> DeFi pools by providing you with
        a personal trading vault smart contract that can hold orders as well as tokens. When you create an order in
        the Dexorder app, you save it in your on-chain vault, and then your smart trading vault will follow those
        order instructions to trade any coins that are in the vault.
      </p>
    </v-card-text>
    <v-card-text>
      <h4>Funds are Never Locked</h4>
      <p>
        Tokens deposited into your vault may always be withdrawn at any time by only you. Funds are <i>never</i> locked
        by the vault. If active orders in the vault need funds that you withdrew, those orders are simply unable to
        trade, and the orders will stay open without being able to execute. If you put tokens back into your vault,
        the orders will automatically resume and trade the newly deposited funds.
      </p>
    </v-card-text>
    <v-card-text>
      <h4>Prepaid Gas</h4>
      <p>
        Orders like Limit Orders and DCA Orders do not execute right away but wait until time or price conditions are
        met. Activating a swap order against the DeFi pool requires a well-timed execution of your trading vault's
        execute() method along with the necessary gas. Dexorder charges you up-front at order placement time for an
        estimated future amount of gas. Then when the market conditions for your orders are met, Dexorder supplies
        your trading vault with that gas along with information about which order to execute. Your vault will check the
        order conditions against the current price and time, and perform the swap with the DeFi pool only if everything
        looks correct.
      </p>
      <p>
        See our open source smart contracts on <a href="https://github.com/dexorder-trade/contract">GitHub</a>.
      </p>
    </v-card-text>
    <v-card-text>
      <h4 id="Charts">Charts</h4>
        Creating dexorders couldn't be easier using the charts you know and love by
        <a href="https://tradingview.com/" target="TradingView">TradingView</a>. What you see on the chart is the order
        you get on-chain.
    </v-card-text>
    <v-card-text>
      <h4>Power Up</h4>
      <p>
        Use Dexorder trading vaults for sophisticated order management when trading with your favorite <uniswap-logo/> DeFi pool!
      </p>
    </v-card-text>
    <v-card-actions class="justify-center my-6 actions">
      <app-btn/>
      <v-btn prepend-icon="mdi-home-outline" variant="flat" text="Home" @click="// noinspection JSIgnoredPromiseFromCall
    router.push({name: 'Home'})"/>
    </v-card-actions>
  </v-card>
</template>

<script setup>

import UniswapLogo from "@/corp/UniswapLogo.vue";
import AppBtn from "@/corp/AppBtn.vue";
import {router} from "@/router/router.js";
</script>

<style scoped lang="scss">
p {
  margin-top: 0.5em;
}
.how {
  .v-card-text {
    max-width: 40em;
  }
}
</style>