45 lines
1.5 KiB
Vue
45 lines
1.5 KiB
Vue
<template>
|
|
<span>
|
|
{{adjValue}}
|
|
<btn v-if="showBtn && adjValue!==null" size="small" variant="plain" @click="invert()">{{pair}}</btn>
|
|
</span>
|
|
<!-- todo optional pair label and inversion button -->
|
|
</template>
|
|
|
|
<script setup>
|
|
import {usePrefStore, useStore} from "@/store/store";
|
|
import {computed} from "vue";
|
|
import {token} from "@/blockchain/token.js";
|
|
import {pairKey, pairPrice} from "@/misc.js";
|
|
import Btn from "@/components/Btn.vue";
|
|
|
|
const props = defineProps(['value', 'baseToken', 'quoteToken', 'baseAddr', 'quoteAddr', 'showBtn', 'decimals'])
|
|
|
|
const s = useStore()
|
|
const prefs = usePrefStore()
|
|
|
|
const base = computed(() => props.baseToken ? props.baseToken : token(props.baseAddr))
|
|
const quote = computed(() => props.quoteToken ? props.quoteToken : token(props.quoteAddr))
|
|
|
|
function invert() {
|
|
const k = pairKey(base.value,quote.value)
|
|
prefs.inverted[k] = !prefs.inverted[k]
|
|
}
|
|
|
|
const adjValue = computed(() => !base.value || !quote.value ? null : pairPrice(base.value, quote.value, props.value, props.decimals).toPrecision(5))
|
|
|
|
const pair = computed(() => {
|
|
const inToken = props.baseToken ? props.baseToken : token(props.baseAddr)
|
|
const outToken = props.quoteToken ? props.quoteToken : token(props.quoteAddr)
|
|
return !inToken || !outToken ? '___\\___' : prefs.inverted[pairKey(inToken, outToken)] ?
|
|
outToken.symbol + '\\' + inToken.symbol : inToken.symbol + '\\' + outToken.symbol
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "src/styles/vars" as *;
|
|
|
|
</style>
|