initial checkin with timed order ui

src/components/TokenChoice.vue

@@ -0,0 +1,105 @@
+<template>
+  <v-combobox :items="s.tokens" :auto-select-first="true"
+              item-title="symbol"
+              :filter-keys="['raw.name','raw.symbol','raw.address']"
+              :model-value="modelValue"
+              :error-messages="errors"
+              :loading="loading"
+              :hide-selected="true"
+              :label="label"
+              v-bind="modelValue" @update:modelValue="updateValue"
+              variant="outlined"
+  >
+    <template v-slot:prepend><slot name="prepend"/></template>
+    <template v-slot:item="{props,item}">
+      <v-list-item v-bind="props" :prepend-avatar="item.raw.image===null?'':item.raw.image" :title="item.raw.symbol" :subtitle="item.raw.name"/>
+    </template>
+  </v-combobox>
+</template>
+
+<script setup>
+import {useStore as useStore2} from "@/store/store";
+import {ref} from "vue";
+import {ethers} from "ethers";
+
+const s = useStore2()
+const props = defineProps(['modelValue', 'label'])
+const emit = defineEmits(['update:modelValue'])
+const loading = ref(false)
+const errors = ref([])
+
+function good() {
+  errors.value = []
+  loading.value = false;
+}
+
+function error(msg) {
+  errors.value = [msg]
+  loading.value = false;
+}
+
+function updateValue(v) {
+  if( v === null ) {
+    error('Type a token name, symbol, or address')
+  }
+  else if( typeof v !== 'string' ) {
+    emit('update:modelValue', v);
+    good()
+  }
+  else {
+    try {
+      const addr = ethers.getAddress(v);
+      const found = s.tokens[addr]
+      if(found !== undefined ) {
+        good()
+        emit('update:modelValue', found)
+        return
+      }
+      errors.value = []
+      loading.value = true;
+      addExtraToken(addr).then((info)=>{
+        if(loading.value && errors.value.length===0) {
+          good()
+          emit('update:modelValue', info)
+        }
+      }).catch((e)=>{
+        console.log(e)
+        error(`${addr} is not a valid ERC20 token`)
+      })
+    }
+    catch {
+      error('Invalid token or address')
+    }
+  }
+}
+</script>
+
+<script>
+import {ethers} from "ethers";
+import wallet from "@/blockchain/wallet.js";
+import {erc20Abi} from "@/blockchain/abi.js";
+import {useStore} from "@/store/store.js";
+
+const s = useStore()
+
+async function addExtraToken(addr) {
+  const token = new ethers.Contract(addr, erc20Abi, await wallet.provider())
+  const symbol = await token.symbol()
+  const decimals = Number(await token.decimals())
+  const info = {name:`${symbol} (${addr})`, symbol, decimals, address:addr}
+  s.$patch((state)=>{
+    let extras = state.extraTokens[state.chain.id]
+    if( extras === undefined ) {
+      extras = {}
+      state.extraTokens[state.chain.id] = extras
+    }
+    extras[info.address] = info
+  })
+  return info
+}
+</script>
+
+<style scoped lang="scss">
+@use "src/styles/vars" as *;
+
+</style>