diagonal line support

src/components/PairPrice.vue

@@ -0,0 +1,45 @@
+<template>
+  <span>{{adjValue}}</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";
+
+const props = defineProps(['value','tokenA','tokenB','addrA','addrB',])
+
+const s = useStore()
+const prefs = usePrefStore()
+
+const adjValue = computed(()=>{
+  const a = props.tokenA ? props.tokenA : token(s.chainId,props.addrA)
+  const b = props.tokenB ? props.tokenB : token(s.chainId,props.addrB)
+  if( !a || !b )
+    return ''
+  let price = props.value
+  const decimals = b.decimals-a.decimals
+  if( decimals > 0 )
+    price /= 10 ** decimals
+  else
+    price *= 10 ** -decimals
+  const token0 = a.address < b.address ? a.address : b.address
+  const token1 = a.address > b.address ? a.address : b.address
+  const invertedKey = [token0, token1];
+  if( !(invertedKey in prefs.inverted) ) {
+    // todo prefer stablecoins as the quote asset
+    prefs.inverted[invertedKey] = false
+  }
+  if( prefs.inverted[invertedKey] )
+    price = 1/price
+  return price.toPrecision(5)
+})
+
+
+</script>
+
+<style scoped lang="scss">
+@use "src/styles/vars" as *;
+
+</style>