Merge pull request #54 from ar-io/develop

Release to Production
ar-io · Jul 24, 2024 · 5d6d934 · 5d6d934
2 parents 31501e5 + 1c88e32
commit 5d6d934
Show file tree

Hide file tree

Showing 10 changed files with 210 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "axios": "^1.6.7",
     "axios-retry": "^4.0.0",
     "base64-arraybuffer": "^1.0.2",
+    "better-react-mathjax": "^2.0.3",
     "dexie": "^4.0.8",
     "dexie-react-hooks": "^1.1.7",
     "fflate": "^0.8.2",

diff --git a/src/App.tsx b/src/App.tsx
@@ -10,6 +10,7 @@ import {
   createRoutesFromElements,
 } from 'react-router-dom';
 
+import { MathJaxContext } from 'better-react-mathjax';
 import GlobalDataProvider from './components/GlobalDataProvider';
 import WalletProvider from './components/WalletProvider';
 import AppRouterLayout from './layout/AppRouterLayout';
@@ -53,23 +54,26 @@ function App() {
               <Report />
             </Suspense>
           }
-        />,
+        />
+        ,
         <Route
           path="gateways/:ownerId/reports"
           element={
             <Suspense fallback={<Loading />}>
               <Reports />
             </Suspense>
           }
-        />,
+        />
+        ,
         <Route
           path="gateways/:ownerId/observe"
           element={
             <Suspense fallback={<Loading />}>
               <Observe />
             </Suspense>
           }
-        />,
+        />
+        ,
         <Route
           path="gateways/:ownerId"
           element={
@@ -87,7 +91,7 @@ function App() {
           }
         />
         ,
-         <Route
+        <Route
           path="staking"
           element={
             <Suspense fallback={<Loading />}>
@@ -114,7 +118,9 @@ function App() {
     <QueryClientProvider client={queryClient}>
       <GlobalDataProvider>
         <WalletProvider>
-          <RouterProvider router={router} />
+          <MathJaxContext>
+            <RouterProvider router={router} />
+          </MathJaxContext>
         </WalletProvider>
       </GlobalDataProvider>
     </QueryClientProvider>

diff --git a/src/components/modals/BaseModal.tsx b/src/components/modals/BaseModal.tsx
@@ -20,16 +20,18 @@ const BaseModal = ({
         aria-hidden="true"
       />
 
-      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
+      <div className="fixed inset-0 flex  w-screen items-center justify-center p-4">
         <Dialog.Panel
-          className={`relative items-stretch rounded-[12px] bg-[#111112] ${useDefaultPadding ? 'p-[32px]' : ''} text-center text-grey-100`}
+          className={`relative flex max-h-full flex-col items-stretch rounded-[12px] bg-[#111112] ${useDefaultPadding ? 'p-[32px]' : ''} text-center text-grey-100`}
         >
           {showCloseButton && (
             <button className="absolute right-[-28px] top-0" onClick={onClose}>
               <CloseIcon />
             </button>
           )}
-          {children}
+          <div className="flex grow flex-col overflow-y-auto scrollbar">
+            {children}
+          </div>
         </Dialog.Panel>
       </div>
     </Dialog>

diff --git a/src/components/modals/StakingModal.tsx b/src/components/modals/StakingModal.tsx
@@ -1,11 +1,18 @@
 import { IOToken, mIOToken } from '@ar.io/sdk/web';
-import { EAY_TOOLTIP_TEXT, IO_LABEL, WRITE_OPTIONS, log } from '@src/constants';
+import {
+  EAY_TOOLTIP_FORMULA,
+  EAY_TOOLTIP_TEXT,
+  IO_LABEL,
+  WRITE_OPTIONS,
+  log,
+} from '@src/constants';
 import useGateway from '@src/hooks/useGateway';
 import useRewardsInfo from '@src/hooks/useRewardsInfo';
 import { useGlobalState } from '@src/store';
 import { formatWithCommas } from '@src/utils';
 import { showErrorToast } from '@src/utils/toast';
 import { useQueryClient } from '@tanstack/react-query';
+import { MathJax } from 'better-react-mathjax';
 import { useState } from 'react';
 import Button, { ButtonType } from '../Button';
 import Tooltip from '../Tooltip';
@@ -265,7 +272,8 @@ const StakingModal = ({
             <div className="grow"></div>
             <div className="text-left text-xs text-low">
               {tab == 0
-                ? balances && `Available: ${formatWithCommas(balances.io)} ${IO_LABEL}`
+                ? balances &&
+                  `Available: ${formatWithCommas(balances.io)} ${IO_LABEL}`
                 : `Available to Unstake: ${formatWithCommas(currentStake)} ${IO_LABEL}`}
             </div>
           </div>
@@ -349,16 +357,22 @@ const StakingModal = ({
               label="EAY:"
               value={EAY}
               rightIcon={
-                <Tooltip message={EAY_TOOLTIP_TEXT}>
+                <Tooltip
+                  message={
+                    <div>
+                      <p>{EAY_TOOLTIP_TEXT}</p>
+                      <MathJax className="mt-4">{EAY_TOOLTIP_FORMULA}</MathJax>
+                    </div>
+                  }
+                >
                   <InfoIcon />
                 </Tooltip>
               }
             />
 
             <div className="pt-[16px] text-left">
-            <UnstakeWarning />
+              <UnstakeWarning />
             </div>
-
           </div>
         </div>
         <div className="flex size-full flex-col p-[32px]">

diff --git a/src/constants.ts b/src/constants.ts
@@ -47,5 +47,7 @@ export const log = loglevel;
 
 export const EAY_TOOLTIP_TEXT =
   'EAY = Estimated yield ratio determined by projecting the current nominal reward conditions over the course of a year. Does NOT include potential observation rewards.';
+export const EAY_TOOLTIP_FORMULA =
+  '\\(EAY = \\frac{RewardsSharedPerEpoch}{TotalDelegatedStake} * EpochsPerYear\\)';
 
 export const IO_LABEL = 'tIO';
diff --git a/src/pages/Gateway/PropertyDisplayPanel.tsx b/src/pages/Gateway/PropertyDisplayPanel.tsx
@@ -1,15 +1,22 @@
 import { AoGateway, mIOToken } from '@ar.io/sdk/web';
+import Button, { ButtonType } from '@src/components/Button';
 import Placeholder from '@src/components/Placeholder';
+import ConnectModal from '@src/components/modals/ConnectModal';
+import StakingModal from '@src/components/modals/StakingModal';
 import { IO_LABEL } from '@src/constants';
+import { useGlobalState } from '@src/store';
+import { useState } from 'react';
 
 const DisplayRow = ({
   label,
   value,
   type,
+  rightComponent,
 }: {
   label: string;
   value: string | number | boolean | undefined;
   type?: string;
+  rightComponent?: React.ReactNode;
 }) => {
   return (
     <>
@@ -22,9 +29,12 @@ const DisplayRow = ({
         {value === undefined ? (
           <Placeholder />
         ) : typeof value === 'boolean' ? (
-          <span className={value ? 'text-green-600' : undefined}>
-            {value ? 'Enabled' : 'Disabled'}
-          </span>
+          <div className="flex items-center">
+            <span className={`grow ${value ? 'text-green-600' : undefined}`}>
+              {value ? 'Enabled' : 'Disabled'}
+            </span>
+            {rightComponent}
+          </div>
         ) : type == 'address' || type == 'tx' ? (
           <a
             className="text-high"
@@ -58,6 +68,13 @@ const PropertyDisplayPanel = ({
   ownerId?: string;
   gateway?: AoGateway;
 }) => {
+  const walletAddress = useGlobalState((state) => state.walletAddress);
+
+  const [stakingModalWalletAddress, setStakingModalWalletAddress] =
+    useState<string>();
+
+  const [isConnectModalOpen, setIsConnectModalOpen] = useState<boolean>(false);
+
   const gatewayAddress = gateway
     ? `${gateway.settings.protocol}://${gateway.settings.fqdn}:${gateway.settings.port}`
     : undefined;
@@ -66,7 +83,7 @@ const PropertyDisplayPanel = ({
     ? [
         {
           label: 'Reward Share Ratio:',
-          value: gateway?.settings.delegateRewardShareRatio,
+          value: `${gateway?.settings.delegateRewardShareRatio}%`,
         },
         {
           label: `Minimum Delegated Stake (${IO_LABEL}):`,
@@ -107,15 +124,49 @@ const PropertyDisplayPanel = ({
     {
       label: 'Delegated Staking:',
       value: gateway?.settings.allowDelegatedStaking,
+      rightComponent: gateway?.settings.allowDelegatedStaking ? (
+        <Button
+          className="mr-2"
+          buttonType={ButtonType.PRIMARY}
+          active={true}
+          title="Manage Stake"
+          text="Stake"
+          onClick={() => {
+            if (walletAddress) {
+              setStakingModalWalletAddress(ownerId);
+            } else {
+              setIsConnectModalOpen(true);
+            }
+          }}
+        />
+      ) : undefined,
     },
     ...conditionalRows,
   ];
 
   return (
     <div className="grid grid-cols-[225px_auto]">
-      {gatewayRows.map(({ label, value, type }, index) => (
-        <DisplayRow key={index} label={label} value={value} type={type} />
+      {gatewayRows.map(({ label, value, type, rightComponent }, index) => (
+        <DisplayRow
+          key={index}
+          label={label}
+          value={value}
+          type={type}
+          rightComponent={rightComponent}
+        />
       ))}
+
+      {stakingModalWalletAddress && (
+        <StakingModal
+          open={!!stakingModalWalletAddress}
+          onClose={() => setStakingModalWalletAddress(undefined)}
+          ownerWallet={stakingModalWalletAddress}
+        />
+      )}
+
+      {isConnectModalOpen && (
+        <ConnectModal onClose={() => setIsConnectModalOpen(false)} />
+      )}
     </div>
   );
 };

diff --git a/src/pages/Gateway/index.tsx b/src/pages/Gateway/index.tsx
@@ -381,7 +381,7 @@ const Gateway = () => {
             <div className="text-high">Stats</div>
           </div>
           <StatsBox
-            title="Start Time"
+            title="Join Date"
             value={
               gateway?.startTimestamp
                 ? formatDate(new Date(gateway?.startTimestamp))

diff --git a/src/pages/Gateways/index.tsx b/src/pages/Gateways/index.tsx
@@ -53,7 +53,9 @@ const Gateways = () => {
               .toIO()
               .valueOf(),
             status: gateway.status,
-            rewardRatio: gateway.settings.delegateRewardShareRatio,
+            rewardRatio: gateway.settings.allowDelegatedStaking
+              ? gateway.settings.delegateRewardShareRatio
+              : -1,
             streak:
               gateway.stats.failedConsecutiveEpochs > 0
                 ? -gateway.stats.failedConsecutiveEpochs
@@ -100,13 +102,13 @@ const Gateways = () => {
     }),
     columnHelper.accessor('start', {
       id: 'start',
-      header: 'Start',
+      header: 'Join Date',
       sortDescFirst: true,
       cell: ({ row }) => formatDate(row.original.start),
     }),
     columnHelper.accessor('totalStake', {
       id: 'totalStake',
-      header: 'Total Stake',
+      header: `Total Stake (${IO_LABEL})`,
       sortDescFirst: true,
       cell: ({ row }) => (
         <Tooltip
@@ -117,7 +119,7 @@ const Gateways = () => {
                 {IO_LABEL}
               </div>
               <div className="mt-1">
-                Total Delegated Stake:{' '}
+                Delegated Stake:{' '}
                 {formatWithCommas(row.original.totalDelegatedStake)} {IO_LABEL}
               </div>
             </div>
@@ -136,7 +138,8 @@ const Gateways = () => {
       id: 'rewardRatio',
       header: 'Reward Share Ratio',
       sortDescFirst: true,
-      cell: ({ row }) => `${row.original.rewardRatio}%`,
+      cell: ({ row }) =>
+        row.original.rewardRatio >= 0 ? `${row.original.rewardRatio}%` : 'N/A',
     }),
     columnHelper.accessor('streak', {
       id: 'streak',