[#3]feat: add balance viewer to navbar

damla · Apr 24, 2022 · 3560692 · 3560692
1 parent fb6eb0c
commit 3560692
Showing 1 changed file with 33 additions and 20 deletions.
diff --git a/src/components/layouts/Dashboard/modules/Nav/Nav.tsx b/src/components/layouts/Dashboard/modules/Nav/Nav.tsx
@@ -2,8 +2,7 @@ import { Disclosure } from '@headlessui/react';
 import Image from 'next/image';
 import { LogoutIcon, MenuIcon, XIcon } from '@heroicons/react/outline';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useMoralis } from 'react-moralis';
 import { useEthBalance } from '../../../../../hooks/useEthBalance';
 import { APP_NAME } from '../../../../../utils/constants';
@@ -12,14 +11,16 @@ import { Icon } from '../../../../common';
 import { Icons } from '../../../../common/Icon/Icon';
 
 const Nav = () => {
-  const { isAuthenticated, logout, user } = useMoralis();
+  const { logout, user } = useMoralis();
   const { formattedBalance, loading } = useEthBalance();
-  const router = useRouter();
   const ethAddress = user?.get('ethAddress');
 
-  const navigation = [
-    { name: '🧾 Transactions', href: '#' },
-    { name: '💰 Balance', href: '#' },
+  const infoBar = [
+    {
+      name: `💰 Balance: ${loading ? 'Loading...' : formattedBalance}`,
+      href: `https://rinkeby.etherscan.io/address/${ethAddress}`,
+      type: 'balance',
+    },
   ];
 
   // TODO: implement menu
@@ -29,11 +30,6 @@ const Nav = () => {
   //   { name: 'Sign out', href: '#' },
   // ];
 
-  useEffect(() => {
-    if (!isAuthenticated) router.replace('/');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isAuthenticated]);
-
   const ellipsedUserName = useMemo(
     () => ethAddress && getEllipsesText(ethAddress),
     [ethAddress]
@@ -58,14 +54,13 @@ const Nav = () => {
                     </a>
                   </Link>
                 </div>
-                {!loading && formattedBalance}
                 <div className="hidden md:block">
                   <div className="ml-10 flex items-baseline space-x-4">
-                    {navigation.map((item) => (
+                    {infoBar.map((item) => (
                       <a
                         key={item.name}
                         href={item.href}
-                        className="text-white hover:bg-blue-500 hover:text-gray px-3 py-2 rounded-md text-sm font-medium"
+                        className="bg-lime-400 text-green-800 px-3 py-2 rounded-md text-sm font-medium"
                       >
                         {item.name}
                       </a>
@@ -115,12 +110,12 @@ const Nav = () => {
 
           <Disclosure.Panel className="md:hidden">
             <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-              {navigation.map((item) => (
+              {infoBar.map((item) => (
                 <Disclosure.Button
                   key={item.name}
                   as="a"
                   href={item.href}
-                  className="text-white hover:bg-blue-600 hover:text-gray block px-3 py-2 rounded-md text-base font-medium"
+                  className="hover:bg-blue-600 text-white block px-3 py-2 rounded-md text-base font-medium"
                 >
                   {item.name}
                 </Disclosure.Button>
@@ -129,9 +124,27 @@ const Nav = () => {
             <div className="pt-4 pb-3 ">
               <div className="flex items-center px-5"></div>
               <div className="mt-3 px-2 space-y-1">
-                <Disclosure.Button className="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-blue-600">
-                  {user && getEllipsesText(user?.get('ethAddress'))}
-                </Disclosure.Button>
+                {user && (
+                  <button
+                    type="button"
+                    onClick={logout}
+                    className="flex text-white hover:bg-blue-600 hover:text-gray px-3 py-2 rounded-md items-center"
+                  >
+                    <Image
+                      width={40}
+                      height={40}
+                      className="w-10 h-10 rounded-full"
+                      src="https://avatars.githubusercontent.com/u/24878421?s=48&v=4"
+                      alt="Rounded avatar"
+                    />
+                    <div className="flex items-center">
+                      <span className="px-4 text-sm font-medium inline-flex items-center">
+                        {ellipsedUserName}
+                      </span>
+                      <LogoutIcon className="w-6 h-6 text-white" />
+                    </div>
+                  </button>
+                )}
               </div>
             </div>
           </Disclosure.Panel>