From 09a499a678eb82e6310d7753172727afdee54ca6 Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Tue, 4 Feb 2025 15:16:15 -0800
Subject: [PATCH 1/2] feat: add error message for network fail

---
 .../components/network-activity-total.vue     | 37 ++++++++++++++-
 .../components/network-assets-error.vue       | 45 +++++++++++++++++++
 .../ui/action/views/network-assets/index.vue  | 13 ++++++
 3 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 packages/extension/src/ui/action/views/network-assets/components/network-assets-error.vue

diff --git a/packages/extension/src/ui/action/views/network-activity/components/network-activity-total.vue b/packages/extension/src/ui/action/views/network-activity/components/network-activity-total.vue
index e42e2b05e..62528d385 100644
--- a/packages/extension/src/ui/action/views/network-activity/components/network-activity-total.vue
+++ b/packages/extension/src/ui/action/views/network-activity/components/network-activity-total.vue
@@ -1,8 +1,16 @@
 <template>
-  <div v-if="cryptoAmount == '~'" class="network-activity__total">
+  <div
+    v-if="cryptoAmount == '~' && !assumedError"
+    class="network-activity__total"
+  >
     <balance-loader class="network-activity__loader-one" />
     <balance-loader class="network-activity__loader-two" />
   </div>
+  <div v-else-if="assumedError" class="network-activity__total-error">
+    <h3>
+      <span>Loading balance error. Please try again later</span>
+    </h3>
+  </div>
   <div v-else class="network-activity__total">
     <h3>
       {{ cryptoAmount }} <span>{{ symbol }}</span>
@@ -16,8 +24,9 @@
 
 <script setup lang="ts">
 import BalanceLoader from '@action/icons/common/balance-loader.vue';
+import { ref, watchEffect } from 'vue';
 
-defineProps({
+const props = defineProps({
   cryptoAmount: {
     type: String,
     default: '0',
@@ -35,12 +44,36 @@ defineProps({
     default: '',
   },
 });
+
+let timer: NodeJS.Timeout | null = null;
+const assumedError = ref(false);
+
+watchEffect(() => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+  // set the timer on initial change to blank
+  if (props.cryptoAmount == '~') {
+    timer = setTimeout(() => {
+      assumedError.value = true;
+    }, 30000);
+  }
+});
 </script>
 
 <style lang="less">
 @import '@action/styles/theme.less';
 
 .network-activity {
+  &__total-error {
+    padding: 0 20px 12px 20px;
+
+    h3 {
+      span {
+        color: @error;
+      }
+    }
+  }
   &__total {
     padding: 0 20px 12px 20px;
 
diff --git a/packages/extension/src/ui/action/views/network-assets/components/network-assets-error.vue b/packages/extension/src/ui/action/views/network-assets/components/network-assets-error.vue
new file mode 100644
index 000000000..29c5ca3f1
--- /dev/null
+++ b/packages/extension/src/ui/action/views/network-assets/components/network-assets-error.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="network-assets__error">
+    <h3>Loading assets failed. Please try again later.</h3>
+
+    <base-button
+      class="network-assetss__error-button"
+      title="Try again"
+      :click="updateAssets"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import BaseButton from '@action/components/base-button/index.vue';
+
+defineProps({
+  updateAssets: Function,
+});
+</script>
+
+<style lang="less">
+@import '@action/styles/theme.less';
+
+.network-assets {
+  &__error {
+    width: 100%;
+    height: calc(100% - 150px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    box-sizing: border-box;
+    position: absolute;
+    top: 150px;
+
+    h3 {
+      color: @error;
+    }
+
+    a {
+      width: 150px;
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/network-assets/index.vue b/packages/extension/src/ui/action/views/network-assets/index.vue
index db42d690c..e75a87546 100644
--- a/packages/extension/src/ui/action/views/network-assets/index.vue
+++ b/packages/extension/src/ui/action/views/network-assets/index.vue
@@ -15,6 +15,10 @@
 
           <network-activity-action v-bind="$attrs" />
           <network-assets-header v-if="!isLoading && assets.length > 0" />
+          <network-assets-error
+            v-if="isFetchError"
+            :update-assets="updateAssets"
+          />
           <network-assets-item
             v-for="(item, index) in assets"
             :key="index"
@@ -65,6 +69,7 @@ import NetworkActivityAction from '../network-activity/components/network-activi
 import NetworkAssetsItem from './components/network-assets-item.vue';
 import NetworkAssetsHeader from './components/network-assets-header.vue';
 import NetworkAssetsLoading from './components/network-assets-loading.vue';
+import NetworkAssetsError from './components/network-assets-error.vue';
 import CustomScrollbar from '@action/components/custom-scrollbar/index.vue';
 import { computed, onMounted, type PropType, ref, toRef, watch } from 'vue';
 import type { AssetsType } from '@/types/provider';
@@ -96,6 +101,7 @@ const props = defineProps({
 });
 const assets = ref<AssetsType[]>([]);
 const isLoading = ref(false);
+const isFetchError = ref(false);
 
 const { cryptoAmount, fiatAmount } = accountInfoComposable(
   toRef(props, 'network'),
@@ -104,6 +110,7 @@ const { cryptoAmount, fiatAmount } = accountInfoComposable(
 const selected: string = route.params.id as string;
 
 const updateAssets = () => {
+  isFetchError.value = false;
   isLoading.value = true;
   assets.value = [];
   const currentNetwork = selectedNetworkName.value;
@@ -114,6 +121,12 @@ const updateAssets = () => {
         if (selectedNetworkName.value !== currentNetwork) return;
         assets.value = _assets;
         isLoading.value = false;
+      })
+      .catch(() => {
+        if (selectedNetworkName.value !== currentNetwork) return;
+        isFetchError.value = true;
+        isLoading.value = false;
+        assets.value = [];
       });
   }
 };

From ae60c1287b5e561233ac6f74b68d538a1f5a6e3a Mon Sep 17 00:00:00 2001
From: Gamaliel Padillo <gamalielgad1234@gmail.com>
Date: Tue, 18 Feb 2025 11:12:17 -0800
Subject: [PATCH 2/2] fix: clear timer on beforeunmount

---
 .../components/network-activity-total.vue                 | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/extension/src/ui/action/views/network-activity/components/network-activity-total.vue b/packages/extension/src/ui/action/views/network-activity/components/network-activity-total.vue
index 62528d385..8a84dd815 100644
--- a/packages/extension/src/ui/action/views/network-activity/components/network-activity-total.vue
+++ b/packages/extension/src/ui/action/views/network-activity/components/network-activity-total.vue
@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 import BalanceLoader from '@action/icons/common/balance-loader.vue';
-import { ref, watchEffect } from 'vue';
+import { onBeforeMount, ref, watchEffect } from 'vue';
 
 const props = defineProps({
   cryptoAmount: {
@@ -59,6 +59,12 @@ watchEffect(() => {
     }, 30000);
   }
 });
+
+onBeforeMount(() => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+});
 </script>
 
 <style lang="less">