From b43bba56ace8c9c098f380e5e4fba35d00ce6ac7 Mon Sep 17 00:00:00 2001
From: hemanthghs <ghshemanth@gmail.com>
Date: Thu, 16 May 2024 20:13:29 +0530
Subject: [PATCH] chore(staking): add select network option in staking overview

---
 .../staking/components/StakingOverview.tsx    | 28 ++++++++++++-------
 frontend/src/utils/constants.ts               |  1 +
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/(routes)/staking/components/StakingOverview.tsx b/frontend/src/app/(routes)/staking/components/StakingOverview.tsx
index 4f220c0dc..bb8502e70 100644
--- a/frontend/src/app/(routes)/staking/components/StakingOverview.tsx
+++ b/frontend/src/app/(routes)/staking/components/StakingOverview.tsx
@@ -17,8 +17,8 @@ import { getBalances } from '@/store/features/bank/bankSlice';
 import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
 import Image from 'next/image';
 import {
-  NO_DELEGATIONS_MSG,
   NO_MESSAGES_ILLUSTRATION,
+  OVERVIEW_NO_DELEGATIONS,
 } from '@/utils/constants';
 import { CircularProgress } from '@mui/material';
 import MainTopNav from '@/components/MainTopNav';
@@ -161,15 +161,23 @@ const StakingOverview = () => {
       {(!isAuthzMode && delegationsLoading === 0 && !hasDelegations) ||
       (isAuthzMode && authzDelegationsLoading && !hasAuthzDelegations) ? (
         <div className="no-data">
-          <Image
-            src={NO_MESSAGES_ILLUSTRATION}
-            width={200}
-            height={177}
-            alt={'No Transactions'}
-            draggable={false}
-          />
-          <div className="text-[16px] opacity-50 mt-2 mb-6 leading-normal italic font-extralight text-center">
-            {NO_DELEGATIONS_MSG}
+          <div className="flex-1 flex flex-col justify-center items-center gap-4">
+            <Image
+              src={NO_MESSAGES_ILLUSTRATION}
+              width={400}
+              height={235}
+              alt={'No Transactions'}
+              draggable={false}
+            />
+            <p>{OVERVIEW_NO_DELEGATIONS}</p>
+            <button
+              className="primary-custom-btn"
+              onClick={() => {
+                document.getElementById('select-network')!.click();
+              }}
+            >
+              Select Network
+            </button>
           </div>
         </div>
       ) : null}
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 1a5880d5a..d1bc5c0ba 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -218,6 +218,7 @@ export const LOGOUT_ICON = '/logout-icon.svg';
 export const TRANSFERS_CARDS_COUNT = 5;
 export const NO_MESSAGES_ILLUSTRATION = '/no-messages-illustration.png';
 export const NO_DELEGATIONS_MSG = `Looks like you haven't staked anything yet, go ahead and explore !`;
+export const OVERVIEW_NO_DELEGATIONS = "Looks like you haven't staked anything yet, Select a network to delegate your tokens!"
 export const VOTE_OPTIONS = ['Yes', 'Abstain', 'No', 'No With Veto'];
 export const MAP_TXN_TYPES: Record<string, string[]> = {
   '/cosmos.staking.v1beta1.MsgDelegate': ['delegated', 'delegating'],