Merge pull request #32 from rairprotocol/update-burger-menu

Add Pop-up for User balance | Desktop and Mobile
rairprotocol · May 24, 2024 · 3f558a1 · 3f558a1
2 parents 4efb1e0 + f6567e7
commit 3f558a1
Show file tree

Hide file tree

Showing 4 changed files with 332 additions and 82 deletions.
diff --git a/rair-front/src/components/Navigation/Menu.tsx b/rair-front/src/components/Navigation/Menu.tsx
@@ -14,6 +14,8 @@ import {
   BellIcon,
   CloseIconMobile,
   MenuIcon,
+  RairFavicon,
+  RairTokenLogo,
   VerifiedIcon
 } from '../../images';
 import {
@@ -270,6 +272,10 @@ const MenuNavigation: React.FC<IMenuNavigation> = ({
                       )}
                     </>
                     <div
+                      onClick={() => {
+                        handleMessageAlert('profileEdit');
+                        toggleMenu('nav');
+                      }}
                       className="mobileAikonWidget"
                       style={{
                         backgroundColor:
@@ -281,13 +287,9 @@ const MenuNavigation: React.FC<IMenuNavigation> = ({
                         className={`profile-user-balance ${
                           primaryColor === 'rhyno' ? 'rhyno' : ''
                         }`}>
-                        <div>
-                          {isLoadingBalance ? (
-                            <LoadingComponent size={12} />
-                          ) : (
-                            userBalance
-                          )}
-                        </div>
+                         <img style={{
+              marginRight: "5px"
+            }} src={primaryColor === '#dedede' ?  RairFavicon : RairTokenLogo} alt="logo" />
                         {currentChain && chainData[currentChain] && (
                           <img
                             src={chainData[currentChain]?.image}

diff --git a/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx b/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx
@@ -1,12 +1,19 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { NavLink } from 'react-router-dom';
 
-import MobileEditProfile from './MobileEditProfile';
-
 import useConnectUser from '../../../hooks/useConnectUser';
 import { NavFooter, NavFooterBox } from '../../Footer/FooterItems/FooterItems';
-import TalkSalesComponent from '../../Header/HeaderItems/TalkToSalesComponent/TalkSalesComponent';
 import { BackBtnMobileNav } from '../NavigationItems/NavigationItems';
+import chainData from '../../../utils/blockchainData';
+import { RairFavicon, RairTokenLogo } from '../../../images';
+import { TooltipBox } from '../../common/Tooltip/TooltipBox';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../../ducks';
+import { ContractsInitialType } from '../../../ducks/contracts/contracts.types';
+import { BigNumber, utils } from 'ethers';
+import useWeb3Tx from '../../../hooks/useWeb3Tx';
+import { formatEther } from 'ethers/lib/utils';
+import { TUsersInitialState } from '../../../ducks/users/users.types';
 
 interface IMobileNavigationList {
   messageAlert: string | null;
@@ -29,10 +36,58 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
 }) => {
   const hotDropsVar = import.meta.env.VITE_TESTNET;
 
+  const [userBalance, setUserBalance] = useState<string>('');
+  const [userRairBalance, setUserRairBalance] = useState<any>(
+    BigNumber.from(0)
+  );
+  const { userData } = useSelector<RootState, TUsersInitialState>((store) => store.userStore);
+
+  const { web3TxHandler } = useWeb3Tx();
+
+  const { erc777Instance, currentChain } = useSelector<
+  RootState,
+  ContractsInitialType
+>((store) => store.contractStore);
+
+const getBalance = useCallback(async () => {
+  if (currentUserAddress && erc777Instance?.provider) {
+    const balance =
+      await erc777Instance.provider.getBalance(currentUserAddress);
+
+    if (balance) {
+      const result = utils.formatEther(balance);
+      const final = Number(result.toString())?.toFixed(2)?.toString();
+
+      setUserBalance(final);
+    }
+  }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+}, [currentUserAddress, erc777Instance, userData]);
+
+  const getUserRairBalance = useCallback(async () => {
+    if (!erc777Instance || userRairBalance?.gt(0)) {
+      return;
+    }
+    const result = await web3TxHandler(erc777Instance, 'balanceOf', [
+      currentUserAddress
+    ]);
+    if (result?._isBigNumber) {
+      setUserRairBalance(result);
+    }
+  }, [erc777Instance, currentUserAddress, userRairBalance, web3TxHandler]);
+
   const [copyEth, setCopyEth] = useState<boolean>(false);
 
   const { logoutUser } = useConnectUser();
 
+  useEffect(() => {
+    getBalance();
+  }, [getBalance])
+
+  useEffect(() => {
+    getUserRairBalance();
+  }, [getUserRairBalance]);
+
   useEffect(() => {
     setCopyEth(false);
 
@@ -80,71 +135,101 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
           className="nav-header-box-mobile"
           primaryColor={primaryColor}
           messageAlert={messageAlert}>
-          <BackBtnMobileNav onClick={() => setMessageAlert('profile')}>
-            <i className="fas fa-chevron-left"></i>
-          </BackBtnMobileNav>
-          <li>
-            Personal Profile <i className="fal fa-edit" />
-          </li>
-          <MobileEditProfile />
+          <div>
+          <div style={{
+              padding: "10px",
+              width: "90vw",
+              height: "150px",
+              color: `${primaryColor === '#dedede' ? "#000" : "#fff"}`,
+              display: "flex",
+              justifyContent: "space-around",
+              alignItems: 'center',
+              borderRadius: "12px",
+              border: "1px solid #000",
+              marginBottom: '10px'
+            }}> 
+              <div style={{
+                display: 'flex',
+                flexDirection: "column",
+                justifyContent: 'space-evenly'
+              }}>
+              <div style={{
+                display: "flex",
+                marginBottom: "15px"
+              }}>
+                <div>
+                  {userBalance ? userBalance : 0.00}
+                {/* {isLoadingBalance ? <LoadingComponent size={18} /> : userBalance} */}
+                </div>
+                <div>
+                {currentChain && chainData[currentChain] && (
+            <img style={{
+              height: "25px",
+              marginLeft: "15px"
+            }} src={chainData[currentChain]?.image} alt="logo" />
+          )}
+                </div>
+              </div>
+              <div style={{
+                display: "flex"
+              }}>
+                <div>
+                  {userRairBalance ? formatEther(userRairBalance) : 0.00}
+                {/* {isLoadingBalance ? <LoadingComponent size={18} /> : userBalance} */}
+                </div>
+                <div>
+                <img style={{
+              height: "25px",
+              marginLeft: "15px"
+            }} src={primaryColor === '#dedede' ?  RairFavicon : RairTokenLogo} alt="logo" />
+                </div>
+              </div>
+              </div>
+              <div style={{
+                marginLeft: "25px",
+                display: "flex",
+                flexDirection: "column",
+
+              }}>
+                <div style={{
+                  marginBottom: "10px"
+                }} className="user-new-balance-title-text">
+                <div style={{
+                  fontWeight: 'bold',
+                  fontSize: '12px'
+                }}>Exchange rate</div>
+                <div style={{
+                  fontSize: '14px'
+                }}>50K RAIR/bETH</div>
+                </div>
+                <div>
+                <TooltipBox position={'bottom'} title="Coming soon!">
+                  <button style={{
+                    background: "#7762D7",
+                    color: "#fff",
+                    border: "1px solid #000",
+                    borderRadius: "12px",
+                    width: "120px",
+                    height: '50px',
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                  }}>Top up</button>
+                  </TooltipBox>
+                </div>
+              </div>
+            </div>
+          </div>
+          {currentUserAddress && (
+            <li className="logout" onClick={logoutUser}>
+              <i className="fas fa-sign-out-alt"></i>Logout
+            </li>
+          )}
         </NavFooterBox>
       ) : (
         <NavFooterBox
           className="nav-header-box-mobile"
           primaryColor={primaryColor}>
-          {hotDropsVar !== 'true' && (
-            <li>
-              <a
-                href="https://etherscan.io/token/0xc76c3ebea0ac6ac78d9c0b324f72ca59da36b9df"
-                target={'_blank'}
-                rel="noreferrer">
-                Token
-              </a>
-            </li>
-          )}
-          {hotDropsVar !== 'true' ? (
-            <li>
-              <TalkSalesComponent
-                text={'Inquiries'}
-                classes={'inquiries-sales'}
-              />
-            </li>
-          ) : (
-            <>
-              <li>
-                <a
-                  target="_blank"
-                  href="https://www.myhotdrops.com/info"
-                  rel="noreferrer">
-                  Info
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://www.myhotdrops.com/collections"
-                  target="_blank"
-                  rel="noreferrer">
-                  Collections
-                </a>
-              </li>
-              <li>
-                <a
-                  target="_blank"
-                  href="https://www.myhotdrops.com/hotties"
-                  rel="noreferrer">
-                  Hotties
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://myhotdrops.shop/"
-                  target="_blank"
-                  rel="noreferrer">
-                  Shop
-                </a>
-              </li>
-            </>
-          )}
           {currentUserAddress && (
             <li className="logout" onClick={logoutUser}>
               <i className="fas fa-sign-out-alt"></i>Logout