store: add store for render web (#12)

Signed-off-by: Lu Ken <[email protected]>

src/GenTradeAgent/package.json

@@ -22,7 +22,8 @@
   },
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.0",
-    "@electron-toolkit/utils": "^3.0.0"
+    "@electron-toolkit/utils": "^3.0.0",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@electron-toolkit/eslint-config": "^1.0.2",

src/GenTradeAgent/src/renderer/src/components/StatusBar.vue

@@ -20,6 +20,7 @@
 </template>
 <script setup lang="ts">
 import { PlugConnected20Filled, Clock20Regular } from '@vicons/fluent'
+import { NIcon } from 'naive-ui';
 </script>
 <style lang="scss" scoped>
 .status-main {

src/GenTradeAgent/src/renderer/src/components/TradingChatAgent.vue

@@ -38,12 +38,7 @@ adoption and acceptance of digital assets worldwide.`)
 const prompt = ref('')
 
 onMounted(() => {
-  // window.electron.ipcRenderer.invoke('getCryptoAssets').then((response) => {
-  //   //console.log(response)
-  //   //console.log(Object.keys(response))
-  //   //placeholder_output.value = Object.keys(response).toString
-  //   //placeholder_output.value = JSON.stringify(response)
-  // })
+
 })
 
 const handleInput = (v: string) => {

src/GenTradeAgent/src/renderer/src/components/TradingDashboard.vue

@@ -6,40 +6,22 @@
 
 <script setup lang="ts">
 import { vResizeObserver } from '@vueuse/components'
-import { onMounted, inject, Ref, watch, ref } from 'vue'
+import { onMounted } from 'vue'
 import { createChart, IChartApi, TickMarkType } from 'lightweight-charts'
-import type { ohlcvData } from '@renderer/const';
+import { useStore } from '@renderer/store'
+
+const store = useStore()
 
 let chartObj: IChartApi | null = null
 let chartElement: HTMLElement | null = null
 let candlestickSeries
-let ohlcvDb:{ [assetName: string]: { [timeFrame: string]: ohlcvData[] } } | null = null
-
-const currentAsset = inject<Ref<string>>('currentAsset', ref('btc'))
-const currentTimeFrame = inject<Ref<string>>('currentTimeFrame', ref('1h'))
-
-window.electron.ipcRenderer.invoke('getOhlcvDB').then((response) => {
-  ohlcvDb = response
-  if (ohlcvDb) {
-    candlestickSeries.setData(ohlcvDb[currentAsset.value][currentTimeFrame.value])
-  }
-})
 
-watch(currentAsset, (newValue, oldValue) => {
-  console.log(`The state changed from ${oldValue} to ${newValue}`)
-  console.log(ohlcvDb)
-  if (ohlcvDb) {
-    candlestickSeries.setData(ohlcvDb[newValue][currentTimeFrame.value])
+store.watch(
+  (state) => state.currentOhlcv,
+  (value) => {
+    candlestickSeries.setData(value)
   }
-})
-
-watch(currentTimeFrame, (newValue, oldValue) => {
-  console.log(`The state changed from ${oldValue} to ${newValue}`)
-  console.log(ohlcvDb)
-  if (ohlcvDb) {
-    candlestickSeries.setData(ohlcvDb[currentAsset.value][newValue])
-  }
-})
+)
 
 const resizeHandler = () => {
   if (chartElement) {
@@ -108,7 +90,6 @@ onMounted(() => {
       wickUpColor: '#26a69a',
       wickDownColor: '#ef5350'
     })
-    console.log(candlestickSeries)
 
     chartObj.timeScale().fitContent()
     window.addEventListener('resize', () => resizeHandler())

src/GenTradeAgent/src/renderer/src/components/TradingMain.vue

@@ -14,15 +14,17 @@
                 menu-size="tiny"
                 class="title-item"
                 style="width: 100px"
+                @update:value="handleUpdateCurrentAsset"
               />
               <n-select
-                v-model:value="currentTimeFrame"
+                v-model:value="currentInterval"
                 filterable
-                :options="optionsTimeFrame"
+                :options="optionsInterval"
                 size="tiny"
                 menu-size="tiny"
                 class="title-item"
                 style="width: 70px"
+                @update:value="handleUpdateCurrentInterval"
               />
             </n-space>
           </div>
@@ -46,18 +48,24 @@
 </template>
 
 <script setup lang="ts">
+import { NSpace, NSelect, NLayout, NLayoutContent, NLayoutSider } from 'naive-ui'
+import { ref } from 'vue'
+
 import TradingDashboard from './TradingDashboard.vue'
 import TradingChatAgent from './TradingChatAgent.vue'
-import { NSpace, NSelect, NLayout, NLayoutContent, NLayoutSider } from 'naive-ui'
-import { ref, provide } from 'vue'
+import { useStore } from '../store'
+
+interface IOption {
+  label: string
+  value: string
+}
 
-const currentAsset = ref('')
-provide('currentAsset', currentAsset)
-const currentTimeFrame = ref('1h')
-provide('currentTimeFrame', currentTimeFrame)
+const store = useStore()
 
-const optionsAsset = ref([{}])
-const optionsTimeFrame = ref([
+const optionsAsset = ref<IOption[]>([])
+const currentAsset = ref(store.state.currentAsset)
+const currentInterval = ref('1h')
+const optionsInterval = ref([
   {
     label: '1h',
     value: '1h'
@@ -75,18 +83,32 @@ const optionsTimeFrame = ref([
     value: '1M'
   }
 ])
-window.electron.ipcRenderer.invoke('getOhlcvDB').then((response) => {
-  Object.keys(response).forEach((item) =>
-    optionsAsset.value.push({
-      label: item,
-      value: item
+
+store.watch(
+  (state) => state.ohlcvDB,
+  (value) => {
+    Object.keys(value).forEach((item) => {
+      optionsAsset.value.push({
+        label: item,
+        value: item
+      })
     })
-  )
-  optionsAsset.value.splice(0, 1)
+  }
+)
+
+const handleUpdateCurrentAsset = (value: string) => {
+  store.commit('updateCurrentAsset', value)
+}
+
+const handleUpdateCurrentInterval = (value: string) => {
+  store.commit('updateCurrentInterval', value)
+}
+
+
+
+
+
 
-  currentAsset.value = Object.keys(response)[0]
-  console.log(currentAsset.value)
-})
 </script>
 
 <style lang="scss" scoped>

src/GenTradeAgent/src/renderer/src/main.ts

@@ -1,7 +1,14 @@
 import './assets/main.css'
 
 import { createApp } from 'vue'
+import { store, keyStore } from './store'
+
 import App from './App.vue'
 
 const app = createApp(App)
+app.use(store, keyStore)
 app.mount('#app')
+
+window.electron.ipcRenderer.invoke('getOhlcvDB').then((response) => {
+  store.commit('updateOhlcvDB', response)
+})

src/GenTradeAgent/src/renderer/src/store.ts

@@ -0,0 +1,52 @@
+import { InjectionKey } from 'vue'
+import { createStore, Store, useStore as baseUseStore } from 'vuex'
+
+export interface ohlcvData {
+  time: number
+  open: number
+  high: number
+  low: number
+  close: number
+  vol: number
+}
+
+export interface State {
+  ohlcvDB: { [asset: string]: { [interval: string]: ohlcvData[] } }
+  currentAsset: string
+  currentOhlcv: ohlcvData[]
+  currentInterval: string
+}
+
+export const keyStore: InjectionKey<Store<State>> = Symbol()
+
+export const store = createStore<State>({
+  state: () => ({
+    ohlcvDB: { btc: { '1h': [] } },
+    currentAsset: 'btc',
+    currentOhlcv: [],
+    currentInterval: '1h'
+  }),
+  mutations: {
+    updateOhlcvDB(state, newOhlcvDB) {
+      console.log('updateOhlcvDB')
+      state.ohlcvDB = newOhlcvDB
+      state.currentAsset = Object.keys(newOhlcvDB)[0]
+      state.currentOhlcv = state.ohlcvDB[state.currentAsset][state.currentInterval]
+    },
+    updateCurrentAsset(state, newAsset: string) {
+      console.log('updateCurrentAsset')
+      state.currentAsset = newAsset
+      state.currentOhlcv = state.ohlcvDB[state.currentAsset][state.currentInterval]
+    },
+    updateCurrentInterval(state, newInterval: string) {
+      console.log('updateCurrentInterval')
+      state.currentInterval = newInterval
+      state.currentOhlcv = state.ohlcvDB[state.currentAsset][state.currentInterval]
+    }
+  }
+})
+
+// define your own `useStore` composition function
+export function useStore() {
+  return baseUseStore(keyStore)
+}