feat

package.json

@@ -10,10 +10,12 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
+    "clipboard": "^2.0.11",
     "dayjs": "^1.11.5",
     "element-plus": "^2.2.14",
     "qrcode": "^1.5.1",
     "vue": "^3.2.37",
+    "vue-clipboard3": "^2.0.0",
     "vue-router": "4"
   },
   "devDependencies": {

src/components/table/dBase/bkRow.vue

@@ -46,27 +46,24 @@
   />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import type { PropType } from 'vue'
 import TableTypes from '../table'
 import Icons from '@src/components/icons/index.vue'
-export default defineComponent({
-  props: {
-    sequence: Array as PropType<TableTypes.tRow['sequence']>,
-    values: Object as PropType<TableTypes.tRow['values']>,
-    colorSequence: Array as PropType<TableTypes.tRow['colorSequence']>,
-    last: Boolean,
+const props = defineProps({
+  sequence: {
+    type: Array as PropType<TableTypes.tRow['sequence']>,
+    required: true,
   },
-  setup(props) {
-    return {
-      sequence: props.sequence,
-      colorSequence: props.colorSequence || [],
-      values: props.values || {},
-      last: props.last,
-    }
+  values: {
+    type: Object as PropType<TableTypes.tRow['values']>,
+    required: true,
   },
-  components: { Icons },
+  colorSequence: {
+    type: Array as PropType<TableTypes.tRow['colorSequence']>,
+    required: true,
+  },
+  last: Boolean,
 })
 </script>
 

src/components/table/dBase/detailsRow.vue

@@ -15,7 +15,14 @@
       >
         {{ value }}
       </p>
-      <Icons v-if="isCopy" url="filter_none" :size="24" class="ml-[10px]" />
+      <div @click="handleCopy">
+        <Icons
+          v-if="isCopy"
+          url="filter_none"
+          :size="24"
+          class="ml-[10px] cursor-pointer"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -26,6 +33,8 @@
 
 <script setup lang="ts">
 import Icons from '@src/components/icons/index.vue'
+import useClipboard from 'vue-clipboard3'
+
 const props = defineProps({
   title: [String, Number],
   value: [String, Number] as any,
@@ -33,6 +42,16 @@ const props = defineProps({
   isCopy: Boolean,
   isLast: Boolean,
 })
+
+const { toClipboard } = useClipboard()
+
+const handleCopy = async () => {
+  try {
+    await toClipboard(props.value)
+  } catch (error) {
+    console.log(error)
+  }
+}
 </script>
 
 <style scoped></style>

src/components/table/dBase/tokensDetailsRow.vue

@@ -59,9 +59,8 @@
 </template>
 
 <script setup lang="ts">
-import { ElSelect, ElOption } from 'element-plus'
 import Icons from '@src/components/icons/index.vue'
-import { onMounted, ref, watchEffect } from 'vue'
+import { ref, watchEffect } from 'vue'
 const props = defineProps({
   title: String,
   value: [Number, String, Array] as any,

src/components/table/dBase/transactDetailsRow.vue

@@ -76,7 +76,14 @@
       >
         {{ value }}
       </p>
-      <Icons v-if="isCopy" url="filter_none" :size="24" class="ml-[10px]" />
+      <div @click="handleCopy">
+        <Icons
+          v-if="isCopy"
+          url="filter_none"
+          :size="24"
+          class="ml-[10px] cursor-pointer"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -87,7 +94,9 @@
 
 <script setup lang="ts">
 import Icons from '@src/components/icons/index.vue'
-import { onMounted, ref, watchEffect } from 'vue'
+import { ref, watchEffect } from 'vue'
+import useClipboard from 'vue-clipboard3'
+
 const props = defineProps({
   title: String,
   value: [String, Object] as any,
@@ -97,6 +106,17 @@ const props = defineProps({
 })
 const list = ref<string[]>([])
 const listData = ref<any>({})
+
+const { toClipboard } = useClipboard()
+
+const handleCopy = async () => {
+  try {
+    await toClipboard(props.value)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
 watchEffect(() => {
   if (typeof props.value === 'object') {
     list.value = ['Form', 'To', 'For']

src/components/table/desktop/bkTable.vue

@@ -52,6 +52,10 @@ import { useRouter } from 'vue-router'
 import { getfindBlockList } from '@src/api/BlockController'
 import { timeConvert } from '@src/utils/string'
 
+const props = defineProps({
+  isBlockWs: Boolean as any,
+})
+
 const invariable = {
   ...bkTableCollocate,
   pageSize: 10, // 每一页的数量
@@ -65,6 +69,8 @@ const paginationState = reactive({
 let currentPage = ref(1) // 当前页
 let currentData = ref() // 当前页的数据
 let loading = ref(true) // 骨架屏加载
+let ws = ref<WebSocket>() // websocket
+
 // 请求数据
 const initBlock = async (page: number) => {
   const params = {
@@ -84,6 +90,31 @@ const initBlock = async (page: number) => {
   // 骨架屏隐藏
   loading.value = false
 }
+
+// 初始化websocket连接
+const initWebSocket = () => {
+  ws.value = new WebSocket('ws://wallet-chaindata-api.weirui0755.com/websocket')
+  ws.value.addEventListener('open', () => {
+    ws.value?.send(JSON.stringify({ type: 'add_block' }))
+  })
+
+  ws.value.onmessage = (e: any) => {
+    try {
+      const res = JSON.parse(e.data)
+      const item = {
+        ...res.value[0],
+        timestamp: timeConvert(res.value[0]?.timestamp),
+      }
+      currentData.value = [item, ...currentData.value]
+      currentData.value.length = 10
+    } catch (error) {}
+  }
+
+  ws.value.onclose = () => {
+    console.log('ws 已关闭')
+  }
+}
+
 // 监听分页更新 -> 请求数据
 watchEffect(() => {
   // 如果屏幕尺寸小于1440px 则不执行
@@ -92,6 +123,13 @@ watchEffect(() => {
   }
   loading.value = true
   initBlock(currentPage.value)
+  if (props?.isBlockWs && currentPage.value == 1) {
+    console.log('start ws')
+    initWebSocket()
+  } else {
+    console.log('close ws')
+    ws.value?.close()
+  }
 })
 // 路由跳转
 const routerLink = (id: string | number) => router.push(`/blocks/${id}`)

src/components/table/desktop/transactTable.vue

@@ -53,6 +53,10 @@ import { useRouter } from 'vue-router'
 import { getFindTransactionListPage } from '@src/api/TransactionsController'
 import { middleDecimal, timeConvert } from '@src/utils/string'
 
+const props = defineProps({
+  isBlockWs: Boolean as any,
+})
+
 const invariable = {
   ...transactTableCollocate,
   pageSize: 10, // 每一页的数量
@@ -66,6 +70,7 @@ const paginationState = reactive({
 let currentPage = ref(1) // 当前页
 let currentData = ref() // 当前页的数据
 let loading = ref(true) // 骨架屏加载
+let ws = ref<WebSocket>() // websocket
 // 请求数据
 const initBlock = async (page: number) => {
   const params = {
@@ -86,12 +91,45 @@ const initBlock = async (page: number) => {
     gasPrice: middleDecimal(item?.gasPrice),
     isSuccess: item?.status === '0x1',
     result: item?.status === '0x1' ? 'Success' : 'Faild',
-    // middleDecimal
     timestamp: timeConvert(item?.timestamp),
   }))
   // 骨架屏隐藏
   loading.value = false
 }
+
+// 初始化websocket连接
+const initWebSocket = () => {
+  ws.value = new WebSocket('ws://wallet-chaindata-api.weirui0755.com/websocket')
+
+  ws.value.addEventListener('open', () => {
+    ws.value?.send(JSON.stringify({ type: 'add_transaction' }))
+  })
+
+  ws.value.onmessage = (e: any) => {
+    try {
+      const res = JSON.parse(e.data)
+      const item = res.value[0]
+      const value = {
+        ...item,
+        hash: middleDecimal(item?.hash),
+        txnHash: item.hash,
+        from: middleDecimal(item?.from),
+        to: middleDecimal(item?.to),
+        gasPrice: middleDecimal(item?.gasPrice),
+        isSuccess: item?.status === '0x1',
+        result: item?.status === '0x1' ? 'Success' : 'Faild',
+        timestamp: timeConvert(item?.timestamp),
+      }
+      currentData.value = [value, ...currentData.value]
+      currentData.value.length = 10
+    } catch (error) {}
+  }
+
+  ws.value.onclose = () => {
+    console.log('ws 已关闭')
+  }
+}
+
 // 监听分页更新 -> 请求数据
 watchEffect(() => {
   // 如果屏幕尺寸小于1440px 则不执行
@@ -100,6 +138,13 @@ watchEffect(() => {
   }
   loading.value = true
   initBlock(currentPage.value)
+  if (props?.isBlockWs && currentPage.value === 1) {
+    console.log('start ws')
+    initWebSocket()
+  } else {
+    console.log('close ws')
+    ws.value?.close()
+  }
 })
 // 路由跳转
 const routerLink = (id: string | number) => id && router.push(`/tx/${id}`)

src/components/table/mBase/detailsRow.vue

@@ -9,8 +9,11 @@
         :class="valueColor || 'text-white'"
         class="text-[15px] font-normal break-all"
       >
-        <span>{{ value }}</span
-        ><Icons v-if="isCopy" url="filter_none" :size="24" class="ml-[10px]" />
+        <span>{{ value }}</span>
+        <div @click="handleCopy">
+          <Icons v-if="isCopy" url="filter_none" :size="24" class="ml-[10px]" />
+        </div>
+
       </p>
     </div>
   </div>
@@ -19,12 +22,24 @@
 
 <script setup lang="ts">
 import Icons from '@src/components/icons/index.vue'
+import useClipboard from 'vue-clipboard3'
+
 const props = defineProps({
   title: [String, Number],
   value: [String, Number],
   valueColor: String,
   isCopy: Boolean,
 })
+const { toClipboard } = useClipboard()
+
+const handleCopy = async () => {
+  const value = props.value?.toString() || ''
+  try {
+    await toClipboard(value)
+  } catch (error) {
+    console.log(error)
+  }
+}
 </script>
 
 <style scoped></style>

src/components/table/mBase/mobileCard.vue

@@ -21,7 +21,6 @@
 
 <script setup lang="ts">
 import { defineProps } from 'vue'
-import { useRouter } from 'vue-router'
 import { bkTableCollocate } from '../constant'
 import nowrapRow from './nowrapRow.vue'
 defineProps({

src/components/table/mBase/tokensDetailsRow.vue

@@ -68,7 +68,6 @@ const props = defineProps({
   title: [String, Number] as any,
   value: [Number, String, Array] as any,
   valueColor: String,
-  isCopy: Boolean,
   isLast: Boolean,
 })
 const list = ref<any>([])

src/components/table/mBase/transactDetailsRow.vue

@@ -48,12 +48,14 @@
         </div>
         <span v-if="title !== 'Result' && title !== 'Tokens Transferred'">
           {{ value }}
-          <Icons
-            v-if="isCopy"
-            url="filter_none"
-            :size="24"
-            class="ml-[10px] inline"
-          />
+          <div @click="handleCopy">
+            <Icons
+              v-if="isCopy"
+              url="filter_none"
+              :size="24"
+              class="ml-[10px] inline"
+            />
+          </div>
         </span>
       </div>
     </div>
@@ -64,6 +66,8 @@
 <script setup lang="ts">
 import Icons from '@src/components/icons/index.vue'
 import { ref, watchEffect } from 'vue'
+import useClipboard from 'vue-clipboard3'
+
 const props = defineProps({
   title: String,
   value: [String, Object] as any,
@@ -72,6 +76,18 @@ const props = defineProps({
 })
 const list = ref<string[]>([])
 const listData = ref<any>({})
+
+const { toClipboard } = useClipboard()
+
+const handleCopy = async () => {
+  const value = props.value?.toString() || ''
+  try {
+    await toClipboard(value)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
 watchEffect(() => {
   if (typeof props.value === 'object') {
     list.value = ['Form', 'To', 'For']

src/components/table/mobile/bkTable.vue

@@ -30,6 +30,10 @@ import { timeConvert } from '@src/utils/string'
 import { bkTableCollocate } from '../constant'
 import { useRouter } from 'vue-router'
 
+const props = defineProps({
+  isBlockWs: Boolean as any,
+})
+
 const invariable = {
   ...bkTableCollocate,
   pageSize: 5, // 每一页的数量
@@ -44,6 +48,7 @@ const router = useRouter()
 let currentPage = ref(1) // 当前页
 let currentData = ref() // 当前页的数据
 let loading = ref(true) // 骨架屏加载
+let ws = ref<WebSocket>() // websocket
 
 // 请求数据
 const initBlock = async (page: number) => {
@@ -63,6 +68,31 @@ const initBlock = async (page: number) => {
   // 骨架屏隐藏
   loading.value = false
 }
+
+// 初始化websocket连接
+const initWebSocket = () => {
+  ws.value = new WebSocket('ws://wallet-chaindata-api.weirui0755.com/websocket')
+  ws.value.addEventListener('open', () => {
+    ws.value?.send(JSON.stringify({ type: 'add_block' }))
+  })
+
+  ws.value.onmessage = (e: any) => {
+    try {
+      const res = JSON.parse(e.data)
+      const item = {
+        ...res.value[0],
+        timestamp: timeConvert(res.value[0]?.timestamp),
+      }
+      currentData.value = [item, ...currentData.value]
+      currentData.value.length = 5
+    } catch (error) {}
+  }
+
+  ws.value.onclose = () => {
+    console.log('ws 已关闭')
+  }
+}
+
 // 监听分页更新 -> 请求数据
 watchEffect(() => {
   // 如果屏幕尺寸大于1440px 则不执行
@@ -71,6 +101,13 @@ watchEffect(() => {
   }
   loading.value = true
   initBlock(currentPage.value)
+  if (props?.isBlockWs && currentPage.value == 1) {
+    console.log('start ws')
+    initWebSocket()
+  } else {
+    console.log('close ws')
+    ws.value?.close()
+  }
 })
 // 路由跳转
 const routerLink = (id: string | number) => router.push(`/blocks/${id}`)

src/components/table/mobile/transactTable.vue

@@ -29,6 +29,10 @@ import { useRouter } from 'vue-router'
 import { transactTableCollocate } from '../constant'
 import TransactCard from '../mBase/transactCard.vue'
 
+const props = defineProps({
+  isBlockWs: Boolean as any,
+})
+
 const invariable = {
   ...transactTableCollocate,
   pageSize: 5, // 每一页的数量
@@ -42,6 +46,8 @@ const paginationState = reactive({
 let currentPage = ref(1) // 当前页
 let currentData = ref() // 当前页的数据
 let loading = ref(true) // 骨架屏加载
+let ws = ref<WebSocket>() // websocket
+
 // 请求数据
 const initBlock = async (page: number) => {
   const params = {
@@ -68,6 +74,40 @@ const initBlock = async (page: number) => {
   // 骨架屏隐藏
   loading.value = false
 }
+
+// 初始化websocket连接
+const initWebSocket = () => {
+  ws.value = new WebSocket('ws://wallet-chaindata-api.weirui0755.com/websocket')
+
+  ws.value.addEventListener('open', () => {
+    ws.value?.send(JSON.stringify({ type: 'add_transaction' }))
+  })
+
+  ws.value.onmessage = (e: any) => {
+    try {
+      const res = JSON.parse(e.data)
+      const item = res.value[0]
+      const value = {
+        ...item,
+        hash: middleDecimal(item?.hash),
+        txnHash: item.hash,
+        from: middleDecimal(item?.from),
+        to: middleDecimal(item?.to),
+        gasPrice: middleDecimal(item?.gasPrice),
+        isSuccess: item?.status === '0x1',
+        result: item?.status === '0x1' ? 'Success' : 'Faild',
+        timestamp: timeConvert(item?.timestamp),
+      }
+      currentData.value = [value, ...currentData.value]
+      currentData.value.length = 5
+    } catch (error) {}
+  }
+
+  ws.value.onclose = () => {
+    console.log('ws 已关闭')
+  }
+}
+
 // 监听分页更新 -> 请求数据
 watchEffect(() => {
   // 如果屏幕尺寸大于1440px 则不执行
@@ -76,6 +116,13 @@ watchEffect(() => {
   }
   loading.value = true
   initBlock(currentPage.value)
+  if (props?.isBlockWs && currentPage.value === 1) {
+    console.log('start ws')
+    initWebSocket()
+  } else {
+    console.log('close ws')
+    ws.value?.close()
+  }
 })
 // 路由跳转
 const routerLink = (id: string | number) => router.push(`/tx/${id}`)

src/pages/HomePage/index.vue

@@ -143,7 +143,7 @@ const initRequist = async () => {
 }
 // 初始化websocket连接
 const initWebSocket = () => {
-  ws.value = new WebSocket('wss://apiasia.mbc.network/websocket')
+  ws.value = new WebSocket('ws://wallet-chaindata-api.weirui0755.com/websocket')
 
   ws.value.addEventListener('open', () => {
     ws.value?.send(JSON.stringify({ type: 'add_block' }))

src/pages/TableBlock/Block/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="w-full desktop:pt-[23px] mobile:pt-[13px]">
     <div class="mobile:hidden">
-      <desktop-bk-table />
+      <desktop-bk-table :isBlockWs="isWs" />
     </div>
     <div class="desktop:hidden">
-      <mobile-bk-table />
+      <mobile-bk-table :isBlockWs="isWs" />
     </div>
   </div>
 </template>
@@ -12,8 +12,19 @@
 <script setup lang="ts">
 import DesktopBkTable from '@src/components/table/desktop/bkTable.vue'
 import MobileBkTable from '@src/components/table/mobile/bkTable.vue'
-// w > d : m
-// window
+import { ref, watchEffect } from 'vue-demi'
+const props = defineProps({
+  isWebs: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const isWs = ref()
+
+watchEffect(() => {
+  isWs.value = props.isWebs
+})
 </script>
 
 <style scoped></style>

src/pages/TableBlock/Tabs.vue

@@ -4,10 +4,10 @@
   >
     <el-tabs v-model="active" class="demo-tabs" @tab-change="handleClick">
       <el-tab-pane label="Block" name="/blocks">
-        <Block />
+        <Block :isWebs="isBlockWs" />
       </el-tab-pane>
       <el-tab-pane label="Transactions" name="/tx">
-        <Transactions />
+        <Transactions :isWebs="isTxWs" />
       </el-tab-pane>
       <el-tab-pane label="Tokens" name="/tokens">
         <Tokens />
@@ -24,10 +24,15 @@ import Tokens from './Tokens/index.vue'
 import { useRoute, useRouter } from 'vue-router'
 
 const active = ref('')
+const isBlockWs = ref(false)
+const isTxWs = ref(false)
+
 const route = useRoute()
 const router = useRouter()
 watchEffect(() => {
   active.value = route.path
+  isBlockWs.value = route.path == '/blocks' ? true : false
+  isTxWs.value = route.path == '/tx' ? true : false
 })
 const handleClick = (tabs: string) => {
   router.replace(tabs)

src/pages/TableBlock/Transactions/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="w-full desktop:pt-[23px] mobile:pt-[13px]">
     <div class="mobile:hidden">
-      <desktop-transact-table />
+      <desktop-transact-table :isBlockWs="isWs" />
     </div>
     <div class="desktop:hidden">
-      <mobile-transact-table />
+      <mobile-transact-table :isBlockWs="isWs" />
     </div>
   </div>
 </template>
@@ -12,6 +12,19 @@
 <script setup lang="ts">
 import DesktopTransactTable from '@src/components/table/desktop/transactTable.vue'
 import MobileTransactTable from '@src/components/table/mobile/transactTable.vue'
+import { ref, watchEffect } from 'vue'
+const props = defineProps({
+  isWebs: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const isWs = ref()
+
+watchEffect(() => {
+  isWs.value = props.isWebs
+})
 </script>
 
 <style scoped></style>