Files
web/src/components/Amount.vue
2024-01-03 18:32:47 -04:00

42 lines
1.3 KiB
Vue

<template>
<v-text-field label='Amount' type="number" step="1" variant="outlined" aria-valuemin="0" min="0"
v-model="os.amount" :rules="[validateRequired,validateAmount]" v-auto-select>
<template v-slot:prepend-inner>
<v-btn @click="os.amount = maxAmount">max {{maxAmount.toPrecision(5)}}</v-btn>
</template>
<template v-slot:append-inner>
<v-btn @click="os.amountIsTokenA=!os.amountIsTokenA" variant="outlined" class="mr-2">
{{ os.amountToken.symbol }}
</v-btn>
<v-btn :text="os.amountIsTotal ? 'total' : 'per tranche'" variant="outlined"
@click="os.amountIsTotal=!os.amountIsTotal" class="total"/>
</template>
</v-text-field>
</template>
<script setup>
import {useOrderStore, useStore} from "@/store/store";
// noinspection ES6UnusedImports
import {vAutoSelect} from "@/misc.js";
import {validateAmount, validateRequired} from "@/validate.js";
import {computed} from "vue";
const s = useStore()
const os = useOrderStore()
const inToken = computed( ()=>os.buy ? os.tokenB : os.tokenA )
const maxAmount = computed(()=>{
const balance = s.balances[inToken]
if( !balance )
return 0
const divisor = os.amountIsTotal ? 1 : os.tranches
return balance / 10**inToken.value.decimals / divisor
})
</script>
<style scoped lang="scss">
@use "src/styles/vars" as *;
</style>