From 7b8c2463d1f19532c794f86f1aa3885de187d414 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Tue, 28 Nov 2023 10:14:26 +0800
Subject: [PATCH] dynamic load state sync block

---
 src/modules/[chain]/statesync/index.vue | 72 +++++++++++++------------
 1 file changed, 39 insertions(+), 33 deletions(-)

diff --git a/src/modules/[chain]/statesync/index.vue b/src/modules/[chain]/statesync/index.vue
index 69cc5cb3..3878ede2 100644
--- a/src/modules/[chain]/statesync/index.vue
+++ b/src/modules/[chain]/statesync/index.vue
@@ -10,15 +10,20 @@ const blockchain = useBlockchain();
 const base = useBaseStore();
 const nodeInfo = ref({} as NodeInfo);
 
-const height = ref(Number(base.latest.block?.header?.height|| 2001))
+const height = ref(0)
 const hash = ref("")
 
-if(height.value > 2000) {
-  height.value = Math.round((height.value - 2000) / 1000) * 1000
-  base.fetchBlock(height.value).then(res => {
-    hash.value = toHex(fromBase64(res.block_id.hash)).toUpperCase()
-  })
-}
+base.$subscribe((m, { latest }) => {
+  let h = Number(latest.block?.header?.height)
+  h = Math.round((h - 2000) / 1000) * 1000
+  if (h > height.value) {
+    height.value = h
+    base.fetchBlock(h).then(res => {
+      hash.value = toHex(fromBase64(res.block_id.hash)).toUpperCase()
+    })
+  }
+})
+
 const rpcs = computed(() => {
   return blockchain.current?.endpoints?.rpc
     ?.map((x) => x.address)
@@ -41,14 +46,10 @@ onMounted(() => {
       <h2 class="card-title truncate mb-2">{{ $t('statesync.title') }}</h2>
       <div class="text-sm">
         {{ $t('statesync.description') }}
-        <a
-          class="text-primary lowercase"
-          href="https://blog.cosmos.network/cosmos-sdk-state-sync-guide-99e4cf43be2f"
-          >{{ $t('statesync.here') }}&nbsp;</a
-        >
-        <a
-        class="lowercase">
-        {{ $t('statesync.for_more_info') }}.</a>
+        <a class="text-primary lowercase" href="https://blog.cosmos.network/cosmos-sdk-state-sync-guide-99e4cf43be2f">{{
+          $t('statesync.here') }}&nbsp;</a>
+        <a class="lowercase">
+          {{ $t('statesync.for_more_info') }}.</a>
       </div>
     </div>
 
@@ -67,22 +68,24 @@ onMounted(() => {
         {{ $t('statesync.text_2_1') }}.
         <br /><br />
         <div class="mockup-code bg-base-200 my-2">
-            <pre data-prefix=">"><code class="text-gray-800 dark:invert">[state-sync]</code></pre>
-            <pre data-prefix=">"><code class="text-gray-800 dark:invert">enable = true</code></pre>
-            <pre data-prefix=">"><code class="text-gray-800"></code></pre>
-            <pre data-prefix=">"><code class="text-gray-800 dark:invert">rpc_servers = "{{ rpcs }}"</code></pre>
-            <pre data-prefix=">"><code class="text-gray-800 dark:invert">trust_height = {{ height }} </code></pre>
-            <pre data-prefix=">"><code class="text-gray-800 dark:invert">trust_hash = "{{hash}}"</code></pre>
-            <pre data-prefix=">"><code class="text-gray-800 dark:invert"></code></pre>
-            <pre data-prefix=">"><code class="text-green-400"># 2/3 of unbonding time</code></pre>
-            <pre data-prefix=">"><code class="text-gray-800 dark:invert">trust_period = "168h"</code></pre>
+          <pre data-prefix=">"><code class="text-gray-800 dark:invert">[state-sync]</code></pre>
+          <pre data-prefix=">"><code class="text-gray-800 dark:invert">enable = true</code></pre>
+          <pre data-prefix=">"><code class="text-gray-800"></code></pre>
+          <pre data-prefix=">"><code class="text-gray-800 dark:invert">rpc_servers = "{{ rpcs }}"</code></pre>
+          <pre data-prefix=">"><code class="text-gray-800 dark:invert">trust_height = {{ height }} </code></pre>
+          <pre data-prefix=">"><code class="text-gray-800 dark:invert">trust_hash = "{{ hash }}"</code></pre>
+          <pre data-prefix=">"><code class="text-gray-800 dark:invert"></code></pre>
+          <pre data-prefix=">"><code class="text-green-400"># 2/3 of unbonding time</code></pre>
+          <pre data-prefix=">"><code class="text-gray-800 dark:invert">trust_period = "168h"</code></pre>
         </div>
         <br />
-        3. {{ $t('statesync.text_3') }}: <code class="bg-base-200 text-gray-600 px-2 py-px mx-1 rounded shadow">{{ appName }} start</code>
+        3. {{ $t('statesync.text_3') }}: <code
+          class="bg-base-200 text-gray-600 px-2 py-px mx-1 rounded shadow">{{ appName }} start</code>
         <br />
         {{ $t('statesync.text_3_1') }}
         <code class="bg-base-200 text-gray-600 px-2 py-px mx-1 rounded shadow">{{ appName }} unsafe-reset-all</code> or
-        <code class="bg-base-200 text-gray-600 px-2 py-px mx-1 rounded shadow">{{ appName }} tendermint unsafe-reset-all --home ~/.HOME</code>
+        <code
+          class="bg-base-200 text-gray-600 px-2 py-px mx-1 rounded shadow">{{ appName }} tendermint unsafe-reset-all --home ~/.HOME</code>
         {{ $t('statesync.text_3_2') }}.
       </div>
     </div>
@@ -93,13 +96,16 @@ onMounted(() => {
         {{ $t('statesync.text_title_3') }}
         <br /><br />
         <div class="mockup-code bg-base-200 my-2">
-            <pre data-prefix=">"><code class="text-gray-800 dark:invert">[state-sync]</code></pre>
-            <pre data-prefix=">"><code class="text-green-400"># snapshot-interval specifies the block interval at which local state sync snapshots are</code></pre>
-            <pre data-prefix=">"><code class="text-green-400"># taken (0 to disable). Must be a multiple of pruning-keep-every.</code></pre>
-            <pre data-prefix=">"><code class="text-gray-800 dark:invert">snapshot-interval = 1000</code></pre>
-            <pre data-prefix=">"><code class="text-gray-800 dark:invert"></code></pre>
-            <pre data-prefix=">"><code class="text-green-400"># snapshot-keep-recent specifies the number of recent snapshots to keep and serve (0 to keep all). Each snapshot is about 500MiB</code></pre>
-            <pre data-prefix=">"><code class="text-gray-800 dark:invert">snapshot-keep-recent = 2</code></pre>
+          <pre data-prefix=">"><code class="text-gray-800 dark:invert">[state-sync]</code></pre>
+          <pre
+            data-prefix=">"><code class="text-green-400"># snapshot-interval specifies the block interval at which local state sync snapshots are</code></pre>
+          <pre
+            data-prefix=">"><code class="text-green-400"># taken (0 to disable). Must be a multiple of pruning-keep-every.</code></pre>
+          <pre data-prefix=">"><code class="text-gray-800 dark:invert">snapshot-interval = 1000</code></pre>
+          <pre data-prefix=">"><code class="text-gray-800 dark:invert"></code></pre>
+          <pre
+            data-prefix=">"><code class="text-green-400"># snapshot-keep-recent specifies the number of recent snapshots to keep and serve (0 to keep all). Each snapshot is about 500MiB</code></pre>
+          <pre data-prefix=">"><code class="text-gray-800 dark:invert">snapshot-keep-recent = 2</code></pre>
         </div>
       </div>
     </div>