Fix/UI freezing

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 { onBeforeMount, ref, watchEffect } from 'vue';
 
-defineProps({
+const props = defineProps({
   cryptoAmount: {
     type: String,
     default: '0',
@@ -35,12 +44,42 @@ 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);
+  }
+});
+
+onBeforeMount(() => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+});
 </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;
 

packages/extension/src/ui/action/views/network-activity/components/network-activity-transaction.vue

@@ -10,9 +10,7 @@
     >
       <div class="network-activity__transaction-info">
         <img
-          :src="
-            network.identicon(activity.isIncoming ? activity.from : activity.to)
-          "
+          :src="network.identicon(network.displayAddress((activity.isIncoming ? activity.from : activity.to)))"
           @error="imageLoadError"
         />
 

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>

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 = [];
       });
   }
 };