feat: feedback messages in user nodes tables

aleph-im · Dec 11, 2023 · c6cdd8f · c6cdd8f
1 parent 418baec
commit c6cdd8f
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 42 deletions.
diff --git a/src/components/pages/earn/ComputeResourceNodesPage/cmp.tsx b/src/components/pages/earn/ComputeResourceNodesPage/cmp.tsx
@@ -142,18 +142,27 @@ export const ComputeResourceNodesPage = memo((props) => {
             {selectedTab === 'user' ? (
               <>
                 {nodes && filteredUserNodes && (
-                  <ComputeResourceNodesTable
-                    {...{
-                      nodes,
-                      filteredNodes: filteredUserNodes,
-                      nodesIssues: userNodesIssues,
-                      userNode,
-                      account,
-                      lastVersion,
-                      handleLink,
-                      handleUnlink,
-                    }}
-                  />
+                  <>
+                    <ComputeResourceNodesTable
+                      {...{
+                        nodes,
+                        filteredNodes: filteredUserNodes,
+                        nodesIssues: userNodesIssues,
+                        userNode,
+                        account,
+                        lastVersion,
+                        handleLink,
+                        handleUnlink,
+                      }}
+                    />
+                    <div tw="my-10 mx-4 text-center opacity-60">
+                      {!account
+                        ? 'Connect your wallet to see your compute node running.'
+                        : !userNodes?.length
+                        ? 'You have no compute node running.'
+                        : ''}
+                    </div>
+                  </>
                 )}
               </>
             ) : (

diff --git a/src/components/pages/earn/CoreChannelNodesPage/cmp.tsx b/src/components/pages/earn/CoreChannelNodesPage/cmp.tsx
@@ -119,14 +119,23 @@ export const CoreChannelNodesPage = memo((props) => {
             {selectedTab === 'user' ? (
               <>
                 {nodes && filteredUserNodes && (
-                  <CoreChannelNodesTable
-                    {...{
-                      nodes,
-                      filteredNodes: filteredUserNodes,
-                      nodesIssues: userNodesIssues,
-                      lastVersion,
-                    }}
-                  />
+                  <>
+                    <CoreChannelNodesTable
+                      {...{
+                        nodes,
+                        filteredNodes: filteredUserNodes,
+                        nodesIssues: userNodesIssues,
+                        lastVersion,
+                      }}
+                    />
+                    <div tw="my-10 mx-4 text-center opacity-60">
+                      {!account
+                        ? 'Connect your wallet to see your core node running.'
+                        : !userNodes?.length
+                        ? 'You have no core node running.'
+                        : ''}
+                    </div>
+                  </>
                 )}
               </>
             ) : (

diff --git a/src/components/pages/earn/StakingPage/cmp.tsx b/src/components/pages/earn/StakingPage/cmp.tsx
@@ -15,6 +15,7 @@ export const StakingPage = memo((props) => {
     accountBalance,
     nodes,
     filteredNodes,
+    stakeNodes,
     filteredStakeNodes,
     tabs,
     selectedTab,
@@ -110,19 +111,30 @@ export const StakingPage = memo((props) => {
           <>
             {selectedTab === 'user' ? (
               <>
-                {nodes && filteredStakeNodes && (
-                  <StakingNodesTable
-                    {...{
-                      nodes,
-                      filteredNodes: filteredStakeNodes,
-                      accountBalance,
-                      account,
-                      handleStake,
-                      handleUnstake,
-                      showStakedAmount: true,
-                      nodesIssues,
-                    }}
-                  />
+                {nodes && filteredStakeNodes ? (
+                  <>
+                    <StakingNodesTable
+                      {...{
+                        nodes,
+                        filteredNodes: filteredStakeNodes,
+                        accountBalance,
+                        account,
+                        handleStake,
+                        handleUnstake,
+                        showStakedAmount: true,
+                        nodesIssues,
+                      }}
+                    />
+                    <div tw="my-10 mx-4 text-center opacity-60">
+                      {!account
+                        ? 'Connect your wallet to see your stakes.'
+                        : !stakeNodes?.length
+                        ? 'You are not staking.'
+                        : ''}
+                    </div>
+                  </>
+                ) : (
+                  <>No data</>
                 )}
               </>
             ) : (

diff --git a/src/hooks/pages/earn/useComputeResourceNodesPage.tsx b/src/hooks/pages/earn/useComputeResourceNodesPage.tsx
@@ -94,10 +94,10 @@ export function useComputeResourceNodesPage(
 
   const tabs = useMemo(() => {
     const tabs: TabsProps['tabs'] = [
+      { id: 'nodes', name: 'All compute nodes' },
       {
         id: 'user',
         name: 'My compute nodes',
-        disabled: !userNodes?.length,
         label: userNodesWarningFlag
           ? {
               label: (
@@ -107,11 +107,10 @@ export function useComputeResourceNodesPage(
             }
           : undefined,
       },
-      { id: 'nodes', name: 'All compute nodes' },
     ]
 
     return tabs
-  }, [userNodes, userNodesWarningFlag])
+  }, [userNodesWarningFlag])
 
   // ----------------------------- FILTERED NODES
 

diff --git a/src/hooks/pages/earn/useCoreChannelNodesPage.tsx b/src/hooks/pages/earn/useCoreChannelNodesPage.tsx
@@ -62,10 +62,10 @@ export function useCoreChannelNodesPage(
 
   const tabs = useMemo(() => {
     const tabs: TabsProps['tabs'] = [
+      { id: 'nodes', name: 'All core nodes' },
       {
         id: 'user',
         name: 'My core nodes',
-        disabled: !userNodes?.length,
         label: userNodesWarningFlag
           ? {
               label: (
@@ -75,11 +75,10 @@ export function useCoreChannelNodesPage(
             }
           : undefined,
       },
-      { id: 'nodes', name: 'All core nodes' },
     ]
 
     return tabs
-  }, [userNodes, userNodesWarningFlag])
+  }, [userNodesWarningFlag])
 
   // -----------------------------
 

diff --git a/src/hooks/pages/earn/useStakingPage.tsx b/src/hooks/pages/earn/useStakingPage.tsx
@@ -17,6 +17,7 @@ export type UseStakingPageProps = {
 }
 
 export type UseStakingPageReturn = UseCoreChannelNodesReturn & {
+  stakeNodes?: CCN[]
   filteredStakeNodes?: CCN[]
   selectedTab: string
   tabs: TabsProps['tabs']
@@ -89,22 +90,21 @@ export function useStakingPage(
 
   const tabs = useMemo(() => {
     const tabs: TabsProps['tabs'] = [
+      { id: 'nodes', name: 'All core nodes' },
       {
         id: 'user',
         name: 'My stakes',
-        disabled: !stakeNodes?.length,
         label: warningFlag
           ? {
               label: <NotificationBadge>{warningFlag}</NotificationBadge>,
               position: 'top',
             }
           : undefined,
       },
-      { id: 'nodes', name: 'All core nodes' },
     ]
 
     return tabs
-  }, [stakeNodes, warningFlag])
+  }, [warningFlag])
 
   // -----------------------------
 
@@ -173,6 +173,7 @@ export function useStakingPage(
     accountBalance,
     nodes,
     filteredNodes,
+    stakeNodes,
     filteredStakeNodes,
     selectedTab,
     tabs,