Merge pull request #81 from ar-io/PE-6861-quick-wins-2

PE-6861: Quick Wins 2
ar-io · Oct 4, 2024 · 12fd40e · 12fd40e
2 parents 3e9fda5 + 163004a
commit 12fd40e
Show file tree

Hide file tree

Showing 22 changed files with 1,525 additions and 1,500 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-    "files.insertFinalNewline": true
+    "files.insertFinalNewline": true,
+    "npm.packageManager": "yarn"
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ar-io/network-portal",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "build": "yarn clean && tsc --build tsconfig.build.json && NODE_OPTIONS=--max-old-space-size=32768 vite build",

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,14 +1,20 @@
 import { NBSP } from '@src/constants';
 import useGateways from '@src/hooks/useGateways';
+import useProtocolBalance from '@src/hooks/useProtocolBalance';
 import { useGlobalState } from '@src/store';
+import { formatWithCommas } from '@src/utils';
 import Placeholder from './Placeholder';
 import Profile from './Profile';
+import { mIOToken } from '@ar.io/sdk/web';
 
 const Header = () => {
   const blockHeight = useGlobalState((state) => state.blockHeight);
   const currentEpoch = useGlobalState((state) => state.currentEpoch);
+  const ticker = useGlobalState((state) => state.ticker);
   const { isLoading: gatewaysLoading, data: gateways } = useGateways();
 
+  const { data: protocolBalance } = useProtocolBalance();
+
   return (
     <header className="mt-6 flex h-[4.5rem] rounded-xl border py-4 pl-6 pr-4 leading-[1.4] dark:border-transparent-100-8 dark:bg-grey-1000 dark:text-grey-300">
       <div className="inline-flex h-[2.375rem] flex-col items-start justify-start gap-1 border-r pr-6 dark:border-transparent-100-8">
@@ -17,31 +23,38 @@ const Header = () => {
             ? currentEpoch.epochIndex.toLocaleString('en-US')
             : NBSP}
         </div>
-        <div className="pt-1 text-xs leading-none text-low">
-          AR.IO EPOCH
-        </div>
+        <div className="pt-1 text-xs leading-none text-low">AR.IO EPOCH</div>
       </div>
       <div className="inline-flex h-[2.375rem] flex-col items-start justify-start gap-1 border-r px-6 dark:border-transparent-100-8">
         <div className="text-xs text-high">
           {blockHeight ? blockHeight.toLocaleString('en-US') : NBSP}
         </div>
-        <div className="pt-1 text-xs leading-none text-low">
-          ARWEAVE BLOCK
-        </div>
+        <div className="pt-1 text-xs leading-none text-low">ARWEAVE BLOCK</div>
       </div>
       <div className="inline-flex h-[2.375rem] flex-col items-start justify-start gap-1 border-r px-6 dark:border-transparent-100-8">
         <div className="text-xs text-high">
           {gatewaysLoading ? (
-            <Placeholder className='h-[1.0625rem]'/>
+            <Placeholder className="h-[1.0625rem]" />
           ) : gateways ? (
-            Object.values(gateways).filter((g) => g.status === "joined").length
+            Object.values(gateways).filter((g) => g.status === 'joined').length
           ) : (
             NBSP
           )}
         </div>
-        <div className="pt-1 text-xs leading-none text-low">
-          TOTAL GATEWAYS
+        <div className="pt-1 text-xs leading-none text-low">GATEWAYS</div>
+      </div>
+
+      <div className="inline-flex h-[2.375rem] flex-col items-start justify-start gap-1 border-r px-6 dark:border-transparent-100-8">
+        <div className="text-xs text-high">
+          {protocolBalance == undefined ? (
+            <Placeholder className="h-[1.0625rem]" />
+          ) : (
+            <div>
+              {formatWithCommas(new mIOToken(protocolBalance).toIO().valueOf())} {ticker}
+            </div>
+          )}
         </div>
+        <div className="pt-1 text-xs leading-none text-low">PROTOCOL BALANCE</div>
       </div>
       <div className="grow" />
       <div className="content-center">

diff --git a/src/components/forms/validation.ts b/src/components/forms/validation.ts
@@ -80,7 +80,7 @@ export const validateNumberRange = (
   return (v: string) => {
     const value = +v;
 
-    return value < min || value > max || isNaN(value)
+    return v.length == 0 || value < min || value > max || isNaN(value)
       ? `${propertyName} must be a number from ${min} to ${max}.`
       : undefined;
   };

diff --git a/src/components/icons/close_drawer.svg b/src/components/icons/close_drawer.svg
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
@@ -45,6 +45,7 @@ import TimerIcon from './timer.svg?react';
 import ToastCloseIcon from './toast_close.svg?react';
 import WalletIcon from './wallet.svg?react';
 import WarningIcon from './warning.svg?react';
+import WarningTriangleIcon from './warning_triangle.svg?react';
 
 export {
   ArConnectIcon,
@@ -93,4 +94,5 @@ export {
   ToastCloseIcon,
   WalletIcon,
   WarningIcon,
+  WarningTriangleIcon,
 };
diff --git a/src/components/icons/open_drawer.svg b/src/components/icons/open_drawer.svg
diff --git a/src/components/icons/warning_triangle.svg b/src/components/icons/warning_triangle.svg
diff --git a/src/components/modals/StakingModal.tsx b/src/components/modals/StakingModal.tsx
@@ -158,7 +158,7 @@ const StakingModal = ({
     ? balances.io - parseFloat(amountToStake)
     : '-';
 
-  const baseTabClassName = 'text-center py-6';
+  const baseTabClassName = 'text-center py-3';
   const selectedTabClassNames = `${baseTabClassName} bg-grey-700 border-b border-red-400`;
   const nonSelectedTabClassNames = `${baseTabClassName} bg-grey-1000 text-low`;
 
@@ -250,7 +250,7 @@ const StakingModal = ({
             <span className={tab == 1 ? 'text-gradient' : ''}>Unstaking</span>
           </button>
         </div>
-        <div className="flex flex-col p-8">
+        <div className="flex flex-col p-8 pb-2">
           <div className="text-left text-sm text-mid">Gateway Owner:</div>
           {ownerWallet ? (
             <div className="py-3 text-left text-sm text-mid">
@@ -368,7 +368,7 @@ const StakingModal = ({
                     </div>
                   }
                 >
-                  <InfoIcon className="size-4" />
+                  <InfoIcon className="size-[1.125rem]" />
                 </Tooltip>
               }
             />

diff --git a/src/components/modals/UnstakeWarning.tsx b/src/components/modals/UnstakeWarning.tsx
@@ -1,10 +1,10 @@
-import { WarningIcon } from '../icons';
+import { WarningTriangleIcon } from '../icons';
 
 const UnstakeWarning = () => {
   return (
     <div>
       <div className="flex gap-3 rounded bg-containerL3 p-4">
-        <WarningIcon width={40} height={20} />
+        <WarningTriangleIcon width={40} height={20} />
         <div className="grow text-[0.8125rem] text-high">
           30 days is the standard unstaking period. During this withdrawal time
           your tokens will be locked and will not be accruing rewards.

diff --git a/src/hooks/useGatewayInfo.ts b/src/hooks/useGatewayInfo.ts
@@ -1,6 +1,6 @@
 import { mIOToken } from '@ar.io/sdk/web';
 import { useGlobalState } from '@src/store';
-import { formatDate, formatWalletAddress, formatWithCommas } from '@src/utils';
+import { formatDateTime, formatWalletAddress, formatWithCommas } from '@src/utils';
 import useGateway from './useGateway';
 
 export enum GatewayStatus {
@@ -26,7 +26,7 @@ export const useGatewayInfo = () => {
         `${gateway.settings.protocol}://${gateway.settings.fqdn}:${gateway.settings.port}`,
       ],
       ['Observer Wallet', formatWalletAddress(gateway.observerAddress)],
-      ['Joined at', formatDate(new Date(gateway.startTimestamp))],
+      ['Joined at', formatDateTime(new Date(gateway.startTimestamp))],
       [
         `Stake (${ticker})`,
         formatWithCommas(new mIOToken(gateway.operatorStake).toIO().valueOf()),

diff --git a/src/index.css b/src/index.css
@@ -12,4 +12,7 @@
   .text-gradient {
     @apply bg-gradient-to-r from-gradient-primary-start to-gradient-primary-end bg-clip-text text-transparent;
   }
+  .text-gradient-red {
+    @apply bg-gradient-to-r from-gradient-red-start to-gradient-red-end bg-clip-text text-transparent;
+  }
 }
diff --git a/src/layout/Sidebar.tsx b/src/layout/Sidebar.tsx
@@ -106,11 +106,17 @@ const Sidebar = () => {
       <hr className="text-divider" />
       <div className="pt-6">
         <div
-          className={sidebarOpen ? 'flex justify-end' : 'flex justify-center'}
+          className={sidebarOpen ? 'flex items-center justify-end' : 'flex items-center justify-center'}
         >
+          {sidebarOpen && (
+            <div className="grow pl-3 text-xs text-low/50">
+              v{process.env.npm_package_version}-
+              {process.env.VITE_GITHUB_HASH?.slice(0, 6)}
+            </div>
+          )}
           <button onClick={() => setSidebarOpen(!sidebarOpen)}>
             {sidebarOpen ? (
-              <CloseDrawerIcon className="size-5" />
+              <CloseDrawerIcon className="size-5"/>
             ) : (
               <OpenDrawerIcon className="size-5" />
             )}

diff --git a/src/pages/Gateway/index.tsx b/src/pages/Gateway/index.tsx
@@ -34,7 +34,7 @@ import useGateways from '@src/hooks/useGateways';
 import useHealthcheck from '@src/hooks/useHealthCheck';
 import useProtocolBalance from '@src/hooks/useProtocolBalance';
 import { useGlobalState } from '@src/store';
-import { formatDate } from '@src/utils';
+import { formatDateTime } from '@src/utils';
 import { calculateOperatorRewards } from '@src/utils/rewards';
 import { showErrorToast } from '@src/utils/toast';
 import { useQueryClient } from '@tanstack/react-query';
@@ -424,7 +424,7 @@ const Gateway = () => {
               title="Join Date"
               value={
                 gateway?.startTimestamp
-                  ? formatDate(new Date(gateway?.startTimestamp))
+                  ? formatDateTime(new Date(gateway?.startTimestamp))
                   : undefined
               }
             />

diff --git a/src/pages/Observe/ObservationsTable.tsx b/src/pages/Observe/ObservationsTable.tsx
@@ -2,7 +2,7 @@ import Bubble from '@src/components/Bubble';
 import TableView from '@src/components/TableView';
 import { observationsDB } from '@src/store/observationsDB';
 import { Assessment } from '@src/types';
-import { formatDate } from '@src/utils';
+import { formatDateTime } from '@src/utils';
 import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
 import { useLiveQuery } from 'dexie-react-hooks';
 import { useEffect, useState } from 'react';
@@ -64,7 +64,7 @@ const ObservationsTable = ({
       id: 'timestamp',
       header: 'Timestamp',
       sortDescFirst: true,
-      cell: ({ row }) => formatDate(new Date(row.original.timestamp)),
+      cell: ({ row }) => formatDateTime(new Date(row.original.timestamp)),
     }),
     columnHelper.accessor('arnsNames', {
       id: 'arnsNames',

diff --git a/src/pages/Report/ReportHeader.tsx b/src/pages/Report/ReportHeader.tsx
@@ -3,7 +3,7 @@ import Placeholder from '@src/components/Placeholder';
 import Profile from '@src/components/Profile';
 import { HeaderSeparatorIcon, ReportsIcon } from '@src/components/icons';
 import { ReportData } from '@src/types';
-import { formatDate } from '@src/utils';
+import { formatDateTime } from '@src/utils';
 import { Link, useParams } from 'react-router-dom';
 
 const ReportHeader = ({
@@ -66,7 +66,7 @@ const ReportHeader = ({
         )}
         <div>Generated At:</div>
         {reportData ? (
-          <div>{formatDate(new Date(reportData.epochStartTimestamp))}</div>
+          <div>{formatDateTime(new Date(reportData.epochStartTimestamp))}</div>
         ) : (
           <Placeholder />
         )}

diff --git a/src/pages/Reports/ReportsTable.tsx b/src/pages/Reports/ReportsTable.tsx
@@ -2,7 +2,7 @@ import { AoGateway } from '@ar.io/sdk';
 import Placeholder from '@src/components/Placeholder';
 import TableView from '@src/components/TableView';
 import useReports, { ReportTransactionData } from '@src/hooks/useReports';
-import { formatDate } from '@src/utils';
+import { formatDateTime } from '@src/utils';
 import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
 import { useNavigate } from 'react-router-dom';
 
@@ -36,7 +36,7 @@ const ReportsTable = ({
       id: 'generatedAt',
       header: 'Generated At',
       sortDescFirst: false,
-      cell: ({ row }) => formatDate(new Date(row.original.timestamp)),
+      cell: ({ row }) => formatDateTime(new Date(row.original.timestamp)),
     }),
     columnHelper.accessor('size', {
       id: 'size',

diff --git a/src/pages/Staking/ActiveStakes.tsx b/src/pages/Staking/ActiveStakes.tsx
@@ -22,14 +22,15 @@ const columnHelper = createColumnHelper<TableData>();
 
 const ActiveStakes = () => {
   const walletAddress = useGlobalState((state) => state.walletAddress);
-  const ticker = useGlobalState((state) => state.ticker); 
+  const ticker = useGlobalState((state) => state.ticker);
 
   const { isLoading, data: gateways } = useGateways();
   const [activeStakes, setActiveStakes] = useState<Array<TableData>>([]);
 
   const [showUnstakeAllModal, setShowUnstakeAllModal] = useState(false);
   const [stakingModalWalletAddress, setStakingModalWalletAddress] =
     useState<string>();
+  const [showQuickStake, setShowQuickStake] = useState(false);
 
   const navigate = useNavigate();
 
@@ -74,7 +75,7 @@ const ActiveStakes = () => {
             href={`https://${row.getValue('domain')}`}
             target="_blank"
             rel="noreferrer"
-            onClick={(e) => e.stopPropagation()} 
+            onClick={(e) => e.stopPropagation()}
           >
             {row.getValue('domain')}
           </a>{' '}
@@ -114,17 +115,19 @@ const ActiveStakes = () => {
       header: '',
       cell: ({ row }) => {
         return (
-          <Button
-            buttonType={ButtonType.SECONDARY}
-            active={true}
-            title="Manage Stake"
-            text=" "
-            rightIcon={<GearIcon className="size-4" />}
-            onClick={(e) => {
-              e.stopPropagation();
-              setStakingModalWalletAddress(row.original.owner);
-            }}
-          />
+          <div className="flex w-full justify-end pr-6">
+            <Button
+              buttonType={ButtonType.SECONDARY}
+              active={true}
+              title="Manage Stake"
+              text=" "
+              rightIcon={<GearIcon className="size-4" />}
+              onClick={(e) => {
+                e.stopPropagation();
+                setStakingModalWalletAddress(row.original.owner);
+              }}
+            />
+          </div>
         );
       },
     }),
@@ -135,18 +138,26 @@ const ActiveStakes = () => {
 
   return (
     <div>
-      <div className="flex w-full items-center rounded-t-xl border border-grey-600 py-[0.9375rem] pl-6 pr-[0.8125rem]">
+      <div className="flex w-full items-center gap-4 rounded-t-xl border border-grey-600 px-6 py-[0.9375rem]">
         <div className="grow text-sm text-mid">Active Stakes</div>
         {hasDelegatedStake && (
           <Button
             buttonType={ButtonType.SECONDARY}
-            className="*:text-gradient h-[1.875rem]"
+            className="*:text-gradient-red h-[1.875rem]"
             active={true}
             title="Withdraw All"
             text="Withdraw All"
             onClick={() => setShowUnstakeAllModal(true)}
           />
         )}
+        <Button
+          buttonType={ButtonType.SECONDARY}
+          className="*:text-gradient h-[1.875rem]"
+          active={true}
+          title="QuickStake"
+          text="QuickStake"
+          onClick={() => setShowQuickStake(true)}
+        />
       </div>
       <TableView
         columns={columns}
@@ -167,10 +178,13 @@ const ActiveStakes = () => {
           onClose={() => setShowUnstakeAllModal(false)}
         />
       )}
-      {stakingModalWalletAddress && (
+      {(stakingModalWalletAddress || showQuickStake) && (
         <StakingModal
           open={!!stakingModalWalletAddress}
-          onClose={() => setStakingModalWalletAddress(undefined)}
+          onClose={() => {
+            setStakingModalWalletAddress(undefined);
+            setShowQuickStake(false);
+          }}
           ownerWallet={stakingModalWalletAddress}
         />
       )}