feat: added 'network statuses' section on dashboard page

package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@astar-network/astar-sdk-core": "^0.2.5",
-    "@astar-network/astar-ui": "^0.0.93",
+    "@astar-network/astar-ui": "^0.0.94",
     "@ethersproject/bignumber": "^5.5.0",
     "@polkadot/api": "^10.9.1",
     "@polkadot/api-contract": "^10.9.1",

src/components/assets/transfer/Transfer.vue

@@ -12,6 +12,7 @@
           :is-local-transfer="isLocalTransfer"
           :set-is-local-transfer="handleSetIsLocalTransfer"
           :is-disabled-xcm="isDisabledXcm"
+          :token="token"
           :class="isHighlightRightUi && 'half-opacity'"
         />
         <div v-if="token" class="wrapper-containers">

src/components/assets/transfer/TransferModeTab.vue

@@ -8,24 +8,39 @@
       >
         <span class="text--title-tab"> {{ $t('assets.transfer') }} </span>
       </div>
-      <div
-        :class="[
-          !isLocalTransfer ? 'selected-tab text--selected' : 'unselected-tab',
-          isDisabledXcm && 'option--disabled',
-          isDisabledXcm && 'text-color--disabled',
-        ]"
-        class="box--tab"
-        @click="!isDisabledXcm && setIsLocalTransfer(false)"
-      >
-        <span class="text--title-tab"> {{ $t('assets.transferPage.crossChainTransfer') }} </span>
-        <span class="text--xcm"> {{ $t('assets.transferPage.xcm') }} </span>
+      <div @click="!isDisabledXcm && setIsLocalTransfer(false)">
+        <div
+          v-click-away="setIsMobileDisplayTooltip"
+          :class="[
+            !isLocalTransfer ? 'selected-tab text--selected' : 'unselected-tab',
+            isDisabledXcm && 'option--disabled',
+            isDisabledXcm && 'text-color--disabled',
+          ]"
+          class="box--tab"
+          @click="setIsMobileDisplayTooltip"
+        >
+          <span class="text--title-tab"> {{ $t('assets.transferPage.crossChainTransfer') }} </span>
+          <span class="text--xcm"> {{ $t('assets.transferPage.xcm') }} </span>
+          <q-tooltip
+            v-if="disabledXcmMemo"
+            v-model="isDisplayTooltip"
+            anchor="top middle"
+            :self="`bottom ${$q.platform.is.mobile ? 'end' : 'middle'}`"
+            class="box--tooltip box--tooltip-warning"
+          >
+            <span class="text--tooltip">{{ disabledXcmMemo }}</span>
+          </q-tooltip>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
-
+import { useNetworkInfo, useTooltip } from 'src/hooks';
+import { defineComponent, computed } from 'vue';
+import { Asset } from 'src/v2/models';
+import { restrictedXcmNetwork } from 'src/modules/xcm';
+import { useI18n } from 'vue-i18n';
 export default defineComponent({
   props: {
     isLocalTransfer: {
@@ -40,6 +55,28 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    token: {
+      type: Asset,
+      required: false,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const { isDisplayTooltip, setIsMobileDisplayTooltip } = useTooltip('icon');
+    const { currentNetworkChain } = useNetworkInfo();
+    const { t } = useI18n();
+
+    const disabledXcmMemo = computed<string>(() => {
+      if (!props.isDisabledXcm) return '';
+      const restrictedNetworksArray = restrictedXcmNetwork[currentNetworkChain.value] || [];
+      const network =
+        restrictedNetworksArray.length > 0 &&
+        restrictedNetworksArray.find((it) => it.chain === props.token?.originChain);
+      if (!network) return '';
+      const text = network.isRestrictedFromNative ? 'xcmIsDisabled' : 'xcmEvmIsDisabled';
+      return t(`assets.transferPage.${text}`, { network: network.chain });
+    });
+    return { isDisplayTooltip, disabledXcmMemo, setIsMobileDisplayTooltip };
   },
 });
 </script>

src/components/common/LocaleChanger.vue

@@ -29,7 +29,6 @@ export default defineComponent({
       () => {
         selectedLang.value =
           languagesSelector.find((lang) => lang.code === locale.value) || languagesSelector[0];
-        console.log(selectedLang.value);
       },
       { immediate: true }
     );

src/components/common/ModalConnectionTrouble.vue

@@ -45,7 +45,7 @@
         <div class="container--tips">
           <div class="row--tips-title">
             <a
-              :href="polkadotJsLink"
+              :href="`${polkadotJsLink}/settings`"
               target="_blank"
               rel="noopener noreferrer"
               class="link--tips-title"
@@ -140,18 +140,9 @@ export default defineComponent({
 
     const store = useStore();
     const { t } = useI18n();
-    const { currentNetworkIdx } = useNetworkInfo();
+    const { polkadotJsLink } = useNetworkInfo();
     const { width, screenSize } = useBreakpoints();
 
-    const polkadotJsLink = computed<string>(() => {
-      const { astar, shiden, shibuya } = polkadotJsUrl.settings;
-      return currentNetworkIdx.value === endpointKey.ASTAR
-        ? astar
-        : currentNetworkIdx.value === endpointKey.SHIDEN
-        ? shiden
-        : shibuya;
-    });
-
     const clearLocalStorage = async (): Promise<void> => {
       localStorage.clear();
       store.dispatch('general/showAlertMsg', {

src/components/dashboard/Collators.vue

@@ -0,0 +1,71 @@
+<template>
+  <div v-if="!collators">
+    <q-skeleton class="skeleton--value-panel" />
+  </div>
+  <div v-else class="wrapper--value" data-testid="collators-panel">
+    <div class="container container--value">
+      <div class="row">
+        <span class="text--accent container--title--color">{{ $t('dashboard.collators') }}</span>
+      </div>
+      <div class="row--value-icon">
+        <div class="align-right text--xlg">
+          <span class="text--value text-color--neon">
+            {{ collators.length }}
+          </span>
+        </div>
+        <div>
+          <a
+            :href="`${polkadotJsLink}/collators`"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link--tips-title"
+          >
+            <button class="icon--primary">
+              <astar-icon-external-link />
+            </button>
+
+            <q-tooltip>
+              <span class="text--tooltip">{{ $t('polkadot.js') }}</span>
+            </q-tooltip>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { $api } from 'src/boot/api';
+import { defineComponent, ref, watchEffect } from 'vue';
+import { useNetworkInfo } from 'src/hooks';
+export default defineComponent({
+  setup() {
+    const { polkadotJsLink } = useNetworkInfo();
+    const collators = ref<string[]>();
+    const isLoadingCollators = ref<boolean>(false);
+
+    const handleFetchCollators = async (): Promise<void> => {
+      try {
+        isLoadingCollators.value = true;
+        const collatorsRaw = (await $api!.query.collatorSelection.candidates()) as any;
+        collators.value = collatorsRaw.map(async (it: any) => {
+          const item = it.toJSON();
+          return item.who.toString();
+        });
+      } catch (error) {
+        collators.value = [];
+      } finally {
+        isLoadingCollators.value = false;
+      }
+    };
+
+    watchEffect(handleFetchCollators);
+
+    return { collators, isLoadingCollators, polkadotJsLink };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use 'src/components/dashboard/styles/dashboard.scss';
+</style>

src/components/dashboard/Dashboard.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="wrapper--charts">
     <div class="container--chart-panels">
-      <div class="container--value-panel">
-        <div class="container--panel">
-          <circulating-panel :symbol="nativeTokenSymbol" :network="currentNetworkName" />
+      <div class="container--value-panels-row">
+        <div class="container--network-status">
+          <network-status />
         </div>
-        <div class="container--panel">
-          <value-panel title="Holders" :value="holders" />
+        <div class="container--value-panel">
+          <div class="container--panel">
+            <circulating-panel :symbol="nativeTokenSymbol" :network="currentNetworkName" />
+          </div>
+          <div class="container--panel">
+            <value-panel title="Holders" :value="holders" />
+          </div>
+          <div class="container--panel">
+            <collators />
+          </div>
         </div>
       </div>
       <div class="container--panel">
@@ -52,6 +60,8 @@
 import BlockPanel from 'src/components/dashboard/BlockPanel.vue';
 import CirculatingPanel from 'src/components/dashboard/CirculatingPanel.vue';
 import ValuePanel from 'src/components/dashboard/ValuePanel.vue';
+import Collators from 'src/components/dashboard/Collators.vue';
+import NetworkStatus from 'src/components/dashboard/NetworkStatus.vue';
 import TokenPriceChart from 'src/components/dashboard/TokenPriceChart.vue';
 // import TotalTransactionsChart from 'src/components/dashboard/TotalTransactionsChart.vue';
 import TvlChart from 'src/components/dashboard/TvlChart.vue';
@@ -67,6 +77,8 @@ export default defineComponent({
     BlockPanel,
     CirculatingPanel,
     ValuePanel,
+    NetworkStatus,
+    Collators,
     // TotalTransactionsChart,
   },
   setup() {