Merge pull request #42 from soaresa/feat/top-liquid-list

feat(ui): Improve UI on Community Wallets, Validators, and Stats pages

web-app/src/modules/core/routes/CommunityWallets/CommunityWallets.tsx

@@ -35,7 +35,8 @@ const CommunityWallets: FC = () => {
             <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
               <a
                 className="text-gray-900 hover:underline hover:text-primary-500"
-                href="https://github.com/0LNetworkCommunity/explorer/edit/main/api/src/ol/community-wallets.ts"
+                href="https://github.com/0LNetworkCommunity/explorer/edit/main/api/src/ol/community-wallets/community-wallets.ts"
+                target="_blank"
               >
                 Edit this page
               </a>
@@ -46,7 +47,7 @@ const CommunityWallets: FC = () => {
             <table className="min-w-full divide-y divide-gray-300">
               <thead className="bg-gray-50 text-left text-sm text-gray-900">
                 <tr>
-                  <th scope="col" className="px-3 py-2 font-normal">
+                  <th scope="col" className="px-3 py-2 font-normal text-center">
                     Wallet
                   </th>
                   <th scope="col" className="px-3 py-2 font-normal">
@@ -55,7 +56,7 @@ const CommunityWallets: FC = () => {
                   <th scope="col" className="px-3 py-2 font-normal">
                     Description
                   </th>
-                  <th scope="col" className="px-3 py-2 font-normal">
+                  <th scope="col" className="px-3 py-2 font-normal text-right">
                     Balance
                   </th>
                 </tr>

web-app/src/modules/core/routes/Stats/Stats.tsx

@@ -233,7 +233,7 @@ const Coinstats = () => {
           </div>
 
           <div className="mt-5">
-            <h3 className="text-base font-semibold text-gray-900">Top 100 Liquid accounts</h3>
+            <h3 className="text-base font-semibold text-gray-900">Top 100 Liquid Accounts</h3>
 
             <div className="relative overflow-hidden rounded-lg bg-white shadow mt-2">
               <div className="overflow-x-auto">
@@ -248,7 +248,7 @@ const Coinstats = () => {
                       </th>
                       <th
                         scope="col"
-                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                        className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                       >
                         Liquid Balance
                       </th>
@@ -281,7 +281,7 @@ const Coinstats = () => {
                               {account.address}
                             </a>
                           </td>
-                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-right text-gray-500">
                             <Money>{account.unlockedBalance}</Money>
                           </td>
                           <td className="px-6 py-4 whitespace-nowrap text-sm text-right text-gray-500">

web-app/src/modules/core/routes/Validators/Validators.tsx

@@ -1,11 +1,10 @@
-import { FC } from "react";
-import { gql, useQuery } from "@apollo/client";
-import _ from "lodash";
-import Page from "../../../ui/Page";
-import AccountAddress from "../../../ui/AccountAddress";
-import clsx from "clsx";
-import { LIBRA_SIGN } from "../../../../contants";
-import { CheckIcon, XMarkIcon } from "@heroicons/react/20/solid";
+import { FC } from 'react';
+import { gql, useQuery } from '@apollo/client';
+import Page from '../../../ui/Page';
+import AccountAddress from '../../../ui/AccountAddress';
+import Money from '../../../ui/Money';
+import clsx from 'clsx';
+import { CheckIcon, XMarkIcon } from '@heroicons/react/20/solid';
 
 const GET_VALIDATORS = gql`
   query GetValidators {
@@ -71,26 +70,22 @@ const Validators: FC = () => {
   }
 
   if (data) {
-    const validatorSet = data.validators.filter((it) => it.inSet)
+    const validatorSet = data.validators.filter((it) => it.inSet);
     const eligible = data.validators.length - validatorSet.length;
 
     return (
       <Page __deprecated_grayBg>
-        <section className="mt-2 flow-root">
+        <section className="my-2 flow-root">
           <div>
-            <dl className="grid gap-0.5 overflow-hidden rounded-2xl text-center grid-cols-3">
-              <div className="flex flex-col bg-gray-400/5 p-4">
-                <dt className="text-sm font-semibold leading-6 text-gray-600">
-                  Validator Set
-                </dt>
+            <dl className="md:w-1/2 grid gap-0.5 shadow overflow-hidden rounded-lg text-center grid-cols-2 m-2">
+              <div className="flex flex-col bg-white p-4">
+                <dt className="text-sm font-semibold leading-6 text-gray-600">Validator Set</dt>
                 <dd className="order-first text-3xl tracking-tight text-gray-900 font-mono">
                   {validatorSet.length}
                 </dd>
               </div>
-              <div className="flex flex-col bg-gray-400/5 p-4">
-                <dt className="text-sm font-semibold leading-6 text-gray-600">
-                  Eligible
-                </dt>
+              <div className="flex flex-col bg-white p-4">
+                <dt className="text-sm font-semibold leading-6 text-gray-600">Eligible</dt>
                 <dd className="order-first text-3xl tracking-tight text-gray-900 font-mono">
                   {eligible}
                 </dd>
@@ -105,8 +100,8 @@ const Validators: FC = () => {
                   <thead className="bg-gray-50">
                     <tr
                       className={clsx(
-                        "divide-x divide-gray-200",
-                        "text-left text-sm font-semibold text-gray-900"
+                        'divide-x divide-gray-200',
+                        'text-left text-sm font-semibold text-gray-900 text-center',
                       )}
                     >
                       <th scope="col" className="py-3 px-2">
@@ -140,22 +135,22 @@ const Validators: FC = () => {
                       <tr
                         key={validator.address}
                         className={clsx(
-                          "divide-x divide-gray-200",
-                          "whitespace-nowrap text-sm text-gray-500 even:bg-gray-50"
+                          'divide-x divide-gray-200',
+                          'whitespace-nowrap text-sm text-gray-500 even:bg-gray-50 text-center',
                         )}
                       >
                         <td className="px-2 py-2 pl-3">
                           <AccountAddress address={validator.address} />
                         </td>
-                        <td className="px-2 py-2 text-center">
+                        <td className="px-2 py-2">
                           {validator.inSet ? (
                             <CheckIcon className="w-5 h-5 text-green-500 inline" />
                           ) : (
                             <XMarkIcon className="w-5 h-5 text-red-500 inline" />
                           )}
                         </td>
                         <td className="px-2 py-2">
-                          {validator.votingPower.toLocaleString()}
+                          {Number(validator.votingPower).toLocaleString()}
                         </td>
                         <td className="px-2 py-2">
                           {validator.grade.compliant ? (
@@ -165,18 +160,21 @@ const Validators: FC = () => {
                           )}
                           {`${validator.grade.proposedBlocks.toLocaleString()} / ${validator.grade.failedBlocks.toLocaleString()}`}
                         </td>
-                        <td className="px-2 py-2">
+                        <td className="px-2 py-2 text-center">
                           {validator.vouches.length.toLocaleString()}
                         </td>
                         <td className="px-2 py-2 font-mono text-right">
                           {`${validator.currentBid.currentBid.toLocaleString()} (${validator.currentBid.expirationEpoch.toLocaleString()})`}
                         </td>
                         <td className="px-2 py-2 font-mono text-right">
-                          {`${LIBRA_SIGN} ${validator.account.balance.toLocaleString()}`}
+                          <Money>{Number(validator.account.balance)}</Money>
                         </td>
                         <td className="px-2 py-2 font-mono text-right">
-                          {validator.account.slowWallet &&
-                            `${LIBRA_SIGN} ${validator.account.slowWallet.unlocked.toLocaleString()}`}
+                          {validator.account.slowWallet ? (
+                            <Money>{Number(validator.account.slowWallet.unlocked)}</Money>
+                          ) : (
+                            ''
+                          )}
                         </td>
                       </tr>
                     ))}
@@ -189,7 +187,7 @@ const Validators: FC = () => {
       </Page>
     );
   }
-  
+
   console.log('error', error);
 
   if (error) {
@@ -200,8 +198,7 @@ const Validators: FC = () => {
     );
   }
 
-
-  return null
+  return null;
 };
 
 export default Validators;

web-app/src/modules/ui/CommunityWalletsTable/CommunityWalletRow.tsx

@@ -3,8 +3,7 @@ import { FC } from 'react';
 import { ICommunityWalletInfo } from '../../interface/CommunityWallets.interface';
 import AccountAddress from '../AccountAddress';
 import { IAccountInfo } from '../../interface/Account.interface';
-import LibraAmount from '../LibraAmount';
-import Decimal from 'decimal.js';
+import Money from '../Money';
 
 interface Props {
   communityWalletInfo: ICommunityWalletInfo;
@@ -30,15 +29,15 @@ const CommunityWalletRow: FC<Props> = ({ communityWalletInfo }) => {
 
   return (
     <tr>
-      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
         <AccountAddress address={communityWalletInfo.address} />
       </td>
       <td className="whitespace-nowrap py-2 px-3 text-sm font-medium text-gray-900">
         {communityWalletInfo.name}
       </td>
       <td className="px-3 py-4 text-sm text-gray-500">{communityWalletInfo.description}</td>
-      <td className="px-3 py-4 text-sm text-gray-500">
-        {data.account.balance && <LibraAmount>{new Decimal(data.account.balance)}</LibraAmount>}
+      <td className="px-3 py-4 text-sm text-gray-500 text-right whitespace-nowrap">
+        {data.account.balance && <Money>{Number(data.account.balance)}</Money>}
       </td>
     </tr>
   );

web-app/src/modules/ui/Layout/Footer/Footer.tsx

@@ -8,7 +8,7 @@ const CI_COMMIT_SHA: string = import.meta.env.VITE_CI_COMMIT_SHA;
 const Footer: React.FC = () => {
   return (
     <footer className="bg-[#0A0A0A] text-white">
-      <div className="pt-14 pb-8 px-3 max-w-[1280px] mx-auto flex flex-col gap-32">
+      <div className="pt-14 pb-8 px-3 max-w-screen-2xl mx-auto flex flex-col gap-32">
         <div className="flex flex-col items-center justify-center gap-8 text-center">
           <Logo withText={false} className="h-14 w-14" />
           <p className="flex flex-col justify-center items-center gap-4">

web-app/src/modules/ui/Layout/Header/Header.tsx

@@ -24,7 +24,7 @@ const Header: React.FC = () => {
   const navigate = useNavigate();
   const [searchAddress, setSearchAddress] = useState<string>('');
   const searchInput = useRef<HTMLInputElement>(null);
-   const connectWallet = () => {
+  const connectWallet = () => {
     aptosWallet.connect(PosteroWalletName);
   };
 
@@ -50,7 +50,7 @@ const Header: React.FC = () => {
 
   return (
     <header className="bg-white">
-      <nav className="flex px-8 py-5 flex-col">
+      <nav className="flex px-8 py-5 flex-col max-w-screen-2xl mx-auto">
         <div className="flex items-center gap-20">
           <Link to="/">
             <Logo className="h-10 w-10 p-2 rounded bg-[#CD3B42]" withText={false} />

web-app/src/modules/ui/Money/Money.tsx

@@ -1,11 +1,24 @@
-import { FC } from "react";
+import { FC } from 'react';
 
 interface Props {
   children: number;
+  decimalPlaces?: number;
 }
 
-const Money: FC<Props> = ({ children }) => {
-  const str = children.toLocaleString();
+const Money: FC<Props> = ({ children, decimalPlaces }) => {
+  const str = children.toLocaleString(
+    undefined,
+    decimalPlaces !== undefined
+      ? {
+          minimumFractionDigits: decimalPlaces,
+          maximumFractionDigits: decimalPlaces,
+        }
+      : {
+          minimumFractionDigits: children < 1 ? 1 : 0,
+          maximumFractionDigits: children < 1 ? 6 : 0,
+        },
+  );
+
   return <span title={`${children}`}>{`Ƚ ${str}`}</span>;
 };
 

web-app/src/modules/ui/Page/Page.tsx

@@ -22,7 +22,9 @@ const Page: FC<Props> = ({ title, children, __deprecated_grayBg: grayBg }) => {
           </div>
         </header>
       )}
-      <main className={clsx('py-3 px-3 flex-grow', grayBg && 'bg-gray-100')}>{children}</main>
+      <main className={clsx('py-3 px-3 flex-grow pb-20 w-full', grayBg && 'bg-gray-100')}>
+        <div className="max-w-screen-2xl mx-auto">{children}</div>
+      </main>
     </>
   );
 };