Merge pull request #8 from Staketab/dev

disable stake button if selected mainnet tab
Staketab · Jan 5, 2024 · c327d76 · c327d76
2 parents 819a861 + 4809108
commit c327d76
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 14 deletions.
diff --git a/apps/ui/src/components/molecules/connectWalletButton/connectWalletButton.tsx b/apps/ui/src/components/molecules/connectWalletButton/connectWalletButton.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import classNames from 'classnames';
 
 import style from './index.module.css';
@@ -24,8 +24,9 @@ const ConnectWalletButton = ({ handleAddress }: { handleAddress: (value: boolean
     };
 
     const address = accountId?.[0];
-
-    handleAddress(!address);
+    useEffect(() => {
+        handleAddress(!address);
+    });
 
     const handleConnect = () => {
         setShowPopup(true);

diff --git a/apps/ui/src/components/molecules/imageSuspense/index.tsx b/apps/ui/src/components/molecules/imageSuspense/index.tsx
@@ -55,13 +55,7 @@ const ImgSuspense = ({
             />
             {((!isLoaded && fallback) || !isLoaded || isLoading) && (
                 <div className={styles.loader} style={loaderStyle ?? { width: '42px', height: '42px' }}>
-                    <Image
-                        src={loader}
-                        alt="preloader"
-                        style={{ width: '42px', height: '32px' }}
-                        width={32}
-                        height={32}
-                    />
+                    <Image src={loader} alt="preloader" width={32} height={32} />
                 </div>
             )}
         </>

diff --git a/apps/ui/src/components/organisms/pageHeader/pageHeader.tsx b/apps/ui/src/components/organisms/pageHeader/pageHeader.tsx
@@ -10,7 +10,7 @@ import style from './index.module.css';
 import { formatNum } from '../../../comman/helpers';
 import { useBalances } from '../../../store/hooks/useBalances';
 
-const PageHeader = () => {
+const PageHeader = ({ isStakeAvailable }: { isStakeAvailable: boolean }): JSX.Element => {
     const [openStakeModul, setOpenStaekeModul] = useState<boolean>(false);
     const [isDisableStakeButton, setIsDisableStakeButton] = useState<boolean>(true);
     const { accountId, balance: balanceByWallet } = useWallet();
@@ -32,7 +32,7 @@ const PageHeader = () => {
                 text="Stake"
                 variant={Variant.blue}
                 onClick={() => setOpenStaekeModul(true)}
-                disabled={isDisableStakeButton}
+                disabled={isDisableStakeButton || !isStakeAvailable}
             />
             <StakeModalController open={openStakeModul} closeModal={() => setOpenStaekeModul(false)} />
         </div>

diff --git a/apps/ui/src/pages/index.tsx b/apps/ui/src/pages/index.tsx
@@ -30,6 +30,8 @@ export default function Home(): JSX.Element {
     useObserveBalance();
     usePollBlockHeight();
 
+    const isStakeAvailable = activTab === tabSwitcherOptions[1];
+
     useEffect(() => {
         if (window.localStorage.getItem('isConnectedAuro') === 'true') {
             initAccount();
@@ -45,7 +47,7 @@ export default function Home(): JSX.Element {
                 <link rel="icon" href="/assets/favicon.ico" />
             </Head>
             <div className={styles.content}>
-                <PageHeader />
+                <PageHeader isStakeAvailable={isStakeAvailable} />
                 <Header title="Leaderboard" />
                 <TabSwitcher options={tabSwitcherOptions} onClick={handleTabSwitcher} />
                 <LeaderboardTables activeTab={activTab} />

diff --git a/apps/ui/src/store/wallet/walletSlice.ts b/apps/ui/src/store/wallet/walletSlice.ts
@@ -42,7 +42,7 @@ export const walletSlice = createSlice({
             };
         },
         addPendingTransaction: (state, action: PayloadAction<PendingTransactions>) => {
-            state.pendingTransactions.push(action.payload);
+            state.pendingTransactions?.push(action.payload);
         },
         removePendingTransaction: (state, action: PayloadAction<PendingTransactions>) => {
             state.pendingTransactions = state.pendingTransactions.filter((tx) => {