From 274e1dfd7eaaf54c34dd2f59ff748f43a9072722 Mon Sep 17 00:00:00 2001
From: Tim Olson <>
Date: Mon, 28 Aug 2023 20:29:56 -0400
Subject: [PATCH] initial websocket setup

---
 .env                           |  3 +-
 package.json                   |  1 +
 src/components/TokenChoice.vue | 29 +++++++++++--------
 src/components/Vault.vue       | 35 +++++++++++++++++++++++
 src/socket.js                  | 16 +++++++++++
 src/store/store.js             |  1 +
 src/views/Home.vue             |  2 ++
 yarn.lock                      | 51 +++++++++++++++++++++++++++++++++-
 8 files changed, 123 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Vault.vue
 create mode 100644 src/socket.js

diff --git a/.env b/.env
index 4280751..ce2d550 100644
--- a/.env
+++ b/.env
@@ -1,2 +1 @@
-VITE_WS_URL=ws://localhost:4334
-VITE_GENERATED_URL=
+VITE_WS_URL=ws://localhost:3001
diff --git a/package.json b/package.json
index f7b7c1b..026a1a3 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "ethers": "^6.7.1",
     "pinia": "^2.0.0",
     "roboto-fontface": "*",
+    "socket.io-client": "^4.7.2",
     "vue": "^3.2.0",
     "vue-router": "^4.0.0",
     "vuetify": "^3.0.0",
diff --git a/src/components/TokenChoice.vue b/src/components/TokenChoice.vue
index 81a9b8f..9104f25 100644
--- a/src/components/TokenChoice.vue
+++ b/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 *;
 
diff --git a/src/components/Vault.vue b/src/components/Vault.vue
new file mode 100644
index 0000000..72bb1d7
--- /dev/null
+++ b/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>
diff --git a/src/socket.js b/src/socket.js
new file mode 100644
index 0000000..bc64f4b
--- /dev/null
+++ b/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)
+})
+
diff --git a/src/store/store.js b/src/store/store.js
index 1768295..aa35c9e 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -9,6 +9,7 @@ export const useStore = defineStore('app', {
     },
     errors: [],
     extraTokens: {},
+    vault: null,
   }),
   getters: {
     tokens: (s)=>{
diff --git a/src/views/Home.vue b/src/views/Home.vue
index cd4a117..8e65cfd 100644
--- a/src/views/Home.vue
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 71b5e60..0e82714 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -219,6 +219,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
+  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
+
 "@types/node@18.15.13":
   version "18.15.13"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.13.tgz#f64277c341150c979e42b00e4ac289290c9df469"
@@ -486,7 +491,7 @@ csstype@^3.1.1:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
-debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
+debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -505,6 +510,22 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+engine.io-client@~6.5.2:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.5.2.tgz#8709e22c291d4297ae80318d3c8baeae71f0e002"
+  integrity sha512-CQZqbrpEYnrpGqC07a9dJDz4gePZUgTPMU3NKJPSeQOyw27Tst4Pl3FemKoFGAlHzgZmKjoRmiJvbWfhCXUlIg==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.2.1"
+    ws "~8.11.0"
+    xmlhttprequest-ssl "~2.0.0"
+
+engine.io-parser@~5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.1.tgz#9f213c77512ff1a6cc0c7a86108a7ffceb16fcfb"
+  integrity sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==
+
 esbuild@^0.18.10:
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
@@ -1166,6 +1187,24 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+socket.io-client@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.7.2.tgz#f2f13f68058bd4e40f94f2a1541f275157ff2c08"
+  integrity sha512-vtA0uD4ibrYD793SOIAwlo8cj6haOeMHrGvwPxJsxH7CeIksqJ+3Zc06RvWTIFgiSqx4A3sOnTXpfAEE2Zyz6w==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.5.2"
+    socket.io-parser "~4.2.4"
+
+socket.io-parser@~4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz#c806966cf7270601e47469ddeec30fbdfda44c83"
+  integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
@@ -1319,11 +1358,21 @@ ws@8.5.0:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f"
   integrity sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==
 
+ws@~8.11.0:
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
+  integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
+
 xml-name-validator@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
   integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
 
+xmlhttprequest-ssl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
+  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"