From 9265d4aa8ff242bf6681bbc382bc0d7113cee53c Mon Sep 17 00:00:00 2001
From: Anukul Pandey <anukul.030601@gmail.com>
Date: Thu, 26 Sep 2024 14:30:02 +0530
Subject: [PATCH] feat: display pools if wallet not connected

---
 src/App.tsx                       |  2 -
 src/common/Nav.tsx                |  6 +--
 src/pages/dashboard/Dashboard.css | 11 ++++
 src/pages/dashboard/Dashboard.tsx | 89 ++++++++++++++++++-------------
 src/pages/pools/Pool/Actions.tsx  | 20 ++++---
 src/pages/pools/Pool/Pool.tsx     |  1 +
 6 files changed, 81 insertions(+), 48 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5f2c6a93..8cbda5f7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -182,8 +182,6 @@ useEffect(()=>{
     }
   }
 
-  const {isAccountSelectorOpen} = useAccountSelector()
-
   // @ts-ignore
   return (
     <>
diff --git a/src/common/Nav.tsx b/src/common/Nav.tsx
index e8b3a5a4..4c950ed7 100644
--- a/src/common/Nav.tsx
+++ b/src/common/Nav.tsx
@@ -57,11 +57,11 @@ const Nav = ({ selectExtension }: Nav): JSX.Element => {
     { title: localizedStrings.bonds, url: BONDS_URL },
   ];
   if (isReefswapUI) {
-    menuItems = [
+    menuItems = selectedSigner?[
       { title: localizedStrings.tokens_pill, url: DASHBOARD_URL },
       { title: localizedStrings.pools, url: POOLS_URL },
       { title: localizedStrings.creator, url: CREATE_ERC20_TOKEN_URL },
-    ];
+    ]:[{ title: localizedStrings.pools, url: POOLS_URL }];
   }
 
   const hideBalance = useContext(HideBalance);
@@ -175,7 +175,7 @@ const Nav = ({ selectExtension }: Nav): JSX.Element => {
         </button>
 
         <nav className="d-flex justify-content-end d-flex-vert-center">
-          {selectedSigner && <ul className="navigation_menu-items ">
+          {<ul className="navigation_menu-items ">
             {menuItemsView}
           </ul>}
 
diff --git a/src/pages/dashboard/Dashboard.css b/src/pages/dashboard/Dashboard.css
index 1d24543d..dd9b9e57 100644
--- a/src/pages/dashboard/Dashboard.css
+++ b/src/pages/dashboard/Dashboard.css
@@ -442,3 +442,14 @@
     padding-bottom: 0.5em;
     padding-top: 0.8em;
 }
+
+.reef-swap-ui-btn-group{
+    margin-top: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mr-1{
+    margin-right: 1rem;
+}
\ No newline at end of file
diff --git a/src/pages/dashboard/Dashboard.tsx b/src/pages/dashboard/Dashboard.tsx
index b6925635..f3974e8f 100644
--- a/src/pages/dashboard/Dashboard.tsx
+++ b/src/pages/dashboard/Dashboard.tsx
@@ -17,12 +17,15 @@ import { localizedStrings } from '../../l10n/l10n';
 import GetReefTestnetButton from './GetReefTestnetButton';
 import ReefSigners from '../../context/ReefSigners';
 import useAccountSelector from '../../hooks/useAccountSelector';
+import { useHistory } from 'react-router-dom';
+import { POOLS_URL } from '../../urls';
 
 const Dashboard = (): JSX.Element => {
+  const history = useHistory();
   const { network } = useContext(ReefSigners);
   const { nfts } = useContext(NftContext);
-  const { selectedSigner} = useContext(ReefSigners);
-  const {setIsAccountSelectorOpen} = useAccountSelector();
+  const { selectedSigner } = useContext(ReefSigners);
+  const { setIsAccountSelectorOpen } = useAccountSelector();
   const tabs = (() => [
     { value: 'tokens', text: localizedStrings.tokens_pill || 'Tokens' },
     { value: 'bonds', text: localizedStrings.bonds || 'Bonds' },
@@ -42,49 +45,63 @@ const Dashboard = (): JSX.Element => {
     ),
     new BigNumber(0),
   ).toNumber(),
-  [tokenPrices, tokens]);
+    [tokenPrices, tokens]);
 
   return (
-    selectedSigner?
-    <div className="dashboard">
-      <div className="dashboard__top">
-        <div className="dashboard__top-left">
-          <Balance balance={totalBalance} loading={loading} />
-          {/* <Rewards rewards={0} /> */}
+    selectedSigner ?
+      <div className="dashboard">
+        <div className="dashboard__top">
+          <div className="dashboard__top-left">
+            <Balance balance={totalBalance} loading={loading} />
+            {/* <Rewards rewards={0} /> */}
+          </div>
+          <div className="dashboard__top-right">
+            {network?.name !== nw.AVAILABLE_NETWORKS.mainnet.name && <GetReefTestnetButton />}
+            {network?.name === nw.AVAILABLE_NETWORKS.mainnet.name && <BuyReefButton />}
+          </div>
         </div>
-        <div className="dashboard__top-right">
-          {network?.name !== nw.AVAILABLE_NETWORKS.mainnet.name && <GetReefTestnetButton />}
-          {network?.name === nw.AVAILABLE_NETWORKS.mainnet.name && <BuyReefButton />}
-        </div>
-      </div>
 
-      <div className="dashboard__main">
-        <div className="dashboard__left">
+        <div className="dashboard__main">
+          <div className="dashboard__left">
 
-          {!isReefswapUI && (
-          <Uik.Tabs
-            className="dashboard__tabs "
-            options={tabs}
-            value={tab}
-            onChange={(e) => setTab(e)}
-          />
-          )}
-          {isReefswapUI && (<Uik.Text type="title" text="Tokens" className="tokens__title" />)}
+            {!isReefswapUI && (
+              <Uik.Tabs
+                className="dashboard__tabs "
+                options={tabs}
+                value={tab}
+                onChange={(e) => setTab(e)}
+              />
+            )}
+            {isReefswapUI && (<Uik.Text type="title" text="Tokens" className="tokens__title" />)}
 
-          { tab === 'tokens' ? <TokenBalances tokens={tokens} /> : '' }
-          { tab === 'bonds' ? <Staking /> : '' }
-          { tab === 'nfts' ? <Nfts nfts={nfts} /> : '' }
-        </div>
+            {tab === 'tokens' ? <TokenBalances tokens={tokens} /> : ''}
+            {tab === 'bonds' ? <Staking /> : ''}
+            {tab === 'nfts' ? <Nfts nfts={nfts} /> : ''}
+          </div>
 
-        <div className="dashboard__right">
-          <Activity />
+          <div className="dashboard__right">
+            <Activity />
+          </div>
         </div>
-      </div>
-    </div>:<div className='no-account-dashboard'>
-    <Uik.Text text="No account selected" type="light" className="mb-2"/>
-<Uik.Button text="Select Account" onClick={()=>setIsAccountSelectorOpen(true)} fill/>
+      </div> : <div className='no-account-dashboard'>
+        {isReefswapUI ?
+          <>
+            <div>
+              <Uik.Text text="Wallet is not connected, Navigate to Pools or Connect Wallet" type="light" className="mb-2" />
+              <div className='reef-swap-ui-btn-group'>
+                <Uik.Button text="Open Pools" className="mr-1" onClick={() => history.push(POOLS_URL)} />
+                <Uik.Button text="Connect Wallet" onClick={() => setIsAccountSelectorOpen(true)} fill />
+              </div>
+            </div>
+          </>
+          :
+          <>
+            <Uik.Text text="No account selected" type="light" className="mb-2" />
+            <Uik.Button text="Select Account" onClick={() => setIsAccountSelectorOpen(true)} fill />
+          </>
+        }
 
-    </div>
+      </div>
   );
 };
 
diff --git a/src/pages/pools/Pool/Actions.tsx b/src/pages/pools/Pool/Actions.tsx
index 8e767c19..2cf5d8de 100644
--- a/src/pages/pools/Pool/Actions.tsx
+++ b/src/pages/pools/Pool/Actions.tsx
@@ -1,5 +1,5 @@
 import {
-  Components, hooks, store, Token,
+  Components, hooks, ReefSigner, store, Token,
 } from '@reef-chain/react-lib';
 import Uik from '@reef-chain/ui-kit';
 import React, {
@@ -205,9 +205,10 @@ const Actions = ({ token1, token2, tab }: ActionsProps): JSX.Element => {
 
 interface ActionsWrapperProps extends ActionsProps {
   poolAddress: string;
+  signer:ReefSigner | undefined
 }
 const ActionsWrapper = ({
-  token1, token2, poolAddress, tab,
+  token1, token2, poolAddress, tab,signer
 }: ActionsWrapperProps): JSX.Element => {
   const history = useHistory();
 
@@ -219,17 +220,22 @@ const ActionsWrapper = ({
     );
   };
 
+  const getOptions = ()=>{
+    if(!signer)return [{ value: 'trade', text: 'Trade' },]
+    return [
+      { value: 'trade', text: 'Trade' },
+      { value: 'stake', text: 'Stake' },
+      { value: 'unstake', text: 'Unstake' },
+    ]
+  }
+
   return (
     <div className="uik-pool-actions pool-actions">
       <div className="uik-pool-actions__top">
         <Uik.Tabs
           value={tab}
           onChange={(value) => selectTab(value)}
-          options={[
-            { value: 'trade', text: 'Trade' },
-            { value: 'stake', text: 'Stake' },
-            { value: 'unstake', text: 'Unstake' },
-          ]}
+          options={getOptions()}
         />
       </div>
       <Actions
diff --git a/src/pages/pools/Pool/Pool.tsx b/src/pages/pools/Pool/Pool.tsx
index 4859bf99..36d49e86 100644
--- a/src/pages/pools/Pool/Pool.tsx
+++ b/src/pages/pools/Pool/Pool.tsx
@@ -109,6 +109,7 @@ const Pool = (): JSX.Element => {
             balance: BigNumber.from(0),
             decimals: decimals2,
           }}
+          signer={signer}
         />
         <Chart
           tokens={{