initial websocket setup

src/components/TokenChoice.vue

@@ -79,26 +79,31 @@ import {ethers} from "ethers";
 import wallet from "@/blockchain/wallet.js";
 import {erc20Abi} from "@/blockchain/abi.js";
 import {useStore} from "@/store/store.js";
+import {socket} from "@/socket.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
+  const prom = new Promise((resolve)=>{
+    socket.emit('lookupToken', s.chain.id, addr, (info) => {
+      if( info === null )
+        return resolve(null)
+      s.$patch((state)=>{
+        let extras = state.extraTokens[state.chain.id]
+        if( extras === undefined ) {
+          extras = {}
+          state.extraTokens[state.chain.id] = extras
+        }
+        extras[info.address] = info
+      })
+      resolve(info)
+    })
   })
-  return info
+  return await prom
 }
 </script>
 
+
 <style scoped lang="scss">
 @use "src/styles/vars" as *;
 

src/components/Vault.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-card v-if="s.vault===null">
+    <v-card-title><v-icon color="warning" icon="mdi-alert"/>&nbsp;Setup&nbsp;Vault</v-card-title>
+    <v-card-subtitle>Create Your Own Personal DexOrder Vault</v-card-subtitle>
+    <v-card-text>
+      DexOrder never has access to your tokens. Instead, you create a personal
+      vault which acts like your DexOrder account.
+      Create your own personal asset vault to get started with DexOrder. This vault
+      acts like your DexOrder account. For security, only <i>you</i> can deposit
+      or withdraw tokens from your vault, and no token approvals are ever given to
+      DexOrder. Instead, DexOrder sends trade requests to your vault at the right
+      times, then your vault checks the validity of those trade requests before
+      trading directly from your vault to the dex liquidity pool. DexOrder never
+      has any access to the funds in your vault.
+    </v-card-text>
+    <v-card-text>
+      Creating your personal vault is a one-time setup operation. Your vault address
+      is unique to you and never changes. You may deposit or withdraw funds in your
+      vault at any time, and you may save your vault address in your wallet for
+      easy access.
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import {useStore} from "@/store/store.js";
+
+const s = useStore()
+
+</script>
+
+<style scoped lang="scss">
+@use "../styles/vars" as *;
+
+</style>

src/socket.js

@@ -0,0 +1,16 @@
+import {io} from "socket.io-client";
+
+export const socket = io(import.meta.env.VITE_WS_URL || undefined, { transports: ["websocket"] })
+
+socket.on('connect', ()=>{
+    console.log('ws connected')
+})
+
+socket.on('disconnect', ()=>{
+    console.log('ws disconnected')
+})
+
+socket.on('welcome', (data)=>{
+    console.log('welcome',data)
+})
+

src/store/store.js

@@ -9,6 +9,7 @@ export const useStore = defineStore('app', {
     },
     errors: [],
     extraTokens: {},
+    vault: null,
   }),
   getters: {
     tokens: (s)=>{

src/views/Home.vue

@@ -1,7 +1,9 @@
 <template>
   <TimedOrder/>
+<!--  <Vault/>-->
 </template>
 
 <script setup>
   import TimedOrder from "@/components/TimedOrderEntry.vue";
+  import Vault from "@/components/Vault.vue";
 </script>