Merge pull request #106 from ar-io/PE-7032-staking-page-updates

PE-7032: staking page updates
ar-io · Nov 14, 2024 · 6c55c2e · 6c55c2e
2 parents 85ab92c + 6874cc2
commit 6c55c2e
Show file tree

Hide file tree

Showing 38 changed files with 1,288 additions and 396 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,5 @@ dist-id.txt
 dist-manifest.csv
 dist-manifest.json
 package-lock.json
+*.tsbuildinfo
+
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,12 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+* View Pending Withdrawals on Staking page and support cancelling pending withdrawals as well as performing expedited withdrawals.
 * View Changelog in app by clicking version number in sidebar
 
 ### Changed
 
 * Updated header style of cards
 * Observations: Updated to use arweave.net for reference domain when generating observation report
+* Observe: Default to using prescribed names 
 
 ## [1.3.0] - 2024-10-21
 

diff --git a/jest.config.json b/jest.config.json
@@ -10,7 +10,7 @@
     "^@src/(.*)$": "<rootDir>/src/$1"
   },
   "transform": {
-    "^.+\\.(ts|tsx|js|jsx|mjs)$": ["ts-jest", { "useESM": true }]
+    "^.+\\.(ts|tsx|js|jsx|mjs)$": ["babel-jest"]
   },
   "transformIgnorePatterns": [
     "/node_modules/(?!arbundles|arweave-wallet-connector|@permaweb|@dha-team|@ar.io).+\\.js$"

diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "deploy": "yarn build && permaweb-deploy --ant-process ${DEPLOY_ANT_PROCESS_ID}"
   },
   "dependencies": {
-    "@ar.io/sdk": "2.3.2",
+    "@ar.io/sdk": "2.4.0",
     "@fontsource/rubik": "^5.0.19",
     "@headlessui/react": "^1.7.19",
     "@radix-ui/react-tooltip": "^1.0.7",
@@ -103,9 +103,9 @@
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
-    "ts-jest": "^29.1.2",
+    "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "typescript": "^5.2.2",
+    "typescript": "^5.6.3",
     "vite": "^5.1.0",
     "vite-bundle-visualizer": "^1.0.1",
     "vite-plugin-node-polyfills": "^0.21.0",

diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -1,18 +1,22 @@
 import { ChevronDownIcon } from './icons';
 
+type DropdownProps = {
+  options: { label: string; value: string }[];
+  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  value: string;
+  tightPadding?: boolean;
+};
+
 const Dropdown = ({
   options,
   onChange,
   value,
-}: {
-  options: { label: string; value: string }[];
-  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-  value: string;
-}) => {
+  tightPadding = false,
+}: DropdownProps) => {
   return (
     <div className="relative w-fit min-w-fit">
       <select
-        className="cursor-pointer appearance-none rounded-xl bg-transparent py-4 pl-4 pr-10 text-mid outline-none"
+        className={`cursor-pointer appearance-none rounded-xl bg-transparent ${!tightPadding && 'py-4 pl-4'} pr-10 text-mid outline-none`}
         onChange={onChange}
         value={value}
       >

diff --git a/src/components/LabelValueRow.tsx b/src/components/LabelValueRow.tsx
@@ -0,0 +1,37 @@
+const LabelValueRow = ({
+  label,
+  value,
+  className,
+  isLink = false,
+  rightIcon,
+}: {
+  label: string;
+  value: string;
+  isLink?: boolean;
+  className?: string;
+  rightIcon?: React.ReactNode;
+}) => {
+  return (
+    <div className={`flex items-center text-[0.8125rem] ${className}`}>
+      <div className="text-left text-low">{label}</div>
+      <div className="grow"></div>
+      {isLink && value !== '-' ? (
+        <a
+          className="text-gradient"
+          href={`https://${value}`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {value}
+        </a>
+      ) : (
+        <div className="flex items-center gap-1 text-left text-low">
+          {value}
+          {rightIcon}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LabelValueRow;
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
@@ -14,6 +14,8 @@ import {
   WalletIcon,
 } from './icons';
 import ConnectModal from './modals/ConnectModal';
+import useBalances from '@src/hooks/useBalances';
+import Placeholder from './Placeholder';
 
 // eslint-disable-next-line react/display-name
 const CustomPopoverButton = forwardRef<HTMLButtonElement>((props, ref) => {
@@ -36,9 +38,9 @@ const Profile = () => {
   );
 
   const wallet = useGlobalState((state) => state.wallet);
-  const balances = useGlobalState((state) => state.balances);
   const updateWallet = useGlobalState((state) => state.updateWallet);
   const walletAddress = useGlobalState((state) => state.walletAddress);
+  const { data:balances } = useBalances(walletAddress);
   const ticker = useGlobalState((state) => state.ticker);
 
   return walletAddress ? (
@@ -73,11 +75,11 @@ const Profile = () => {
         <div className="mx-4  rounded-md border border-grey-800 py-3">
           <div className="px-4 text-xs text-low">{ticker} Balance</div>
           <div className="border-b border-grey-800 px-4 pb-3 pt-1 text-high">
-            {formatBalance(balances.io)}
+            {balances ? formatBalance(balances.io) : <Placeholder />}
           </div>
           <div className="px-4 pt-3 text-xs text-low">AR Balance</div>
           <div className="px-4 pt-1 text-high">
-            {formatBalance(balances.ar)}
+            {balances ? formatBalance(balances.ar) : <Placeholder />}
           </div>
         </div>
         <div className="flex flex-col gap-3 text-nowrap px-6 py-3 text-mid">

diff --git a/src/components/TableView.tsx b/src/components/TableView.tsx
@@ -83,28 +83,30 @@ const TableView = <T, S>({
               </tr>
             ))}
           </thead>
-          <tbody className="text-sm">
-            {table.getRowModel().rows.map((row) => {
-              return (
-                <tr
-                  key={row.id}
-                  className={`border-t border-grey-500 text-low *:py-4 *:pl-6 ${onRowClick ? 'cursor-pointer' : ''}`}
-                  onClick={
-                    onRowClick ? () => onRowClick(row.original) : undefined
-                  }
-                >
-                  {row.getAllCells().map((cell) => (
-                    <td key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext(),
-                      )}
-                    </td>
-                  ))}
-                </tr>
-              );
-            })}
-          </tbody>
+          {!isLoading && (
+            <tbody className="text-sm">
+              {table.getRowModel().rows.map((row) => {
+                return (
+                  <tr
+                    key={row.id}
+                    className={`border-t border-grey-500 text-low *:py-4 *:pl-6 ${onRowClick ? 'cursor-pointer' : ''}`}
+                    onClick={
+                      onRowClick ? () => onRowClick(row.original) : undefined
+                    }
+                  >
+                    {row.getAllCells().map((cell) => (
+                      <td key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </td>
+                    ))}
+                  </tr>
+                );
+              })}
+            </tbody>
+          )}
         </table>
       </div>
       {isLoading && (

diff --git a/src/components/WalletProvider.tsx b/src/components/WalletProvider.tsx
@@ -1,30 +1,21 @@
-import { AOProcess, IO, mIOToken } from '@ar.io/sdk/web';
+import { AOProcess, IO } from '@ar.io/sdk/web';
 import { connect } from '@permaweb/aoconnect';
 import { AO_CU_URL, IO_PROCESS_ID } from '@src/constants';
 import { useEffectOnce } from '@src/hooks/useEffectOnce';
 import { ArConnectWalletConnector } from '@src/services/wallets/ArConnectWalletConnector';
 import { useGlobalState } from '@src/store';
 import { KEY_WALLET_TYPE } from '@src/store/persistent';
 import { WALLET_TYPES } from '@src/types';
-import { ArweaveTransactionID } from '@src/utils/ArweaveTransactionId';
 import { showErrorToast } from '@src/utils/toast';
-import Ar from 'arweave/web/ar';
 import { ReactElement, useEffect } from 'react';
 
-const AR = new Ar();
-
 const WalletProvider = ({ children }: { children: ReactElement }) => {
-  const blockHeight = useGlobalState((state) => state.blockHeight);
-  const walletAddress = useGlobalState((state) => state.walletAddress);
   const setWalletStateInitialized = useGlobalState(
     (state) => state.setWalletStateInitialized,
   );
 
   const wallet = useGlobalState((state) => state.wallet);
   const updateWallet = useGlobalState((state) => state.updateWallet);
-  const setBalances = useGlobalState((state) => state.setBalances);
-  const arweave = useGlobalState((state) => state.arweave);
-  const arIOReadSDK = useGlobalState((state) => state.arIOReadSDK);
   const setArIOWriteableSDK = useGlobalState(
     (state) => state.setArIOWriteableSDK,
   );
@@ -43,28 +34,6 @@ const WalletProvider = ({ children }: { children: ReactElement }) => {
     }, 5000);
   });
 
-  useEffect(() => {
-    if (walletAddress) {
-      const updateBalances = async (address: ArweaveTransactionID) => {
-        try {
-          const [mioBalance, winstonBalance] = await Promise.all([
-            arIOReadSDK.getBalance({ address: address.toString() }),
-            arweave.wallets.getBalance(address.toString()),
-          ]);
-
-          const arBalance = +AR.winstonToAr(winstonBalance);
-          const ioBalance = new mIOToken(mioBalance).toIO().valueOf();
-
-          setBalances(arBalance, ioBalance);
-        } catch (error) {
-          showErrorToast(`${error}`);
-        }
-      };
-
-      updateBalances(walletAddress);
-    }
-  }, [walletAddress, blockHeight, arIOReadSDK, arweave, setBalances]);
-
   useEffect(() => {
     if (wallet) {
       const signer = wallet.signer;

diff --git a/src/components/icons/cancel_button_x.svg b/src/components/icons/cancel_button_x.svg
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
@@ -4,6 +4,7 @@ import ArioLogoIcon from './ario.svg?react';
 import BannerRightChevron from './banner_right_chevron.svg?react';
 import BinocularsIcon from './binoculars.svg?react';
 import BinocularsGradientIcon from './binoculars_gradient.svg?react';
+import CancelButtonXIcon from './cancel_button_x.svg?react';
 import CaretDoubleRightIcon from './caret_double_right.svg?react';
 import CheckSquareIcon from './check_square.svg?react';
 import ChevronDownIcon from './chevron_down.svg?react';
@@ -24,6 +25,7 @@ import GatewayHoverIcon from './gateway_hover.svg?react';
 import GatewaysIcon from './gateways.svg?react';
 import GearIcon from './gear.svg?react';
 import HeaderSeparatorIcon from './header_separator.svg?react';
+import InstantWithdrawalIcon from './instant_withdrawal.svg?react';
 import InfoIcon from './info_icon.svg?react';
 import LinkArrowIcon from './link_arrow.svg?react';
 import LogoutIcon from './logout.svg?react';
@@ -55,6 +57,7 @@ export {
   BinocularsIcon,
   BinocularsGradientIcon,
   CaretDoubleRightIcon,
+  CancelButtonXIcon,
   CheckSquareIcon,
   ChevronDownIcon,
   ClockRewindIcon,
@@ -75,6 +78,7 @@ export {
   GearIcon,
   HeaderSeparatorIcon,
   InfoIcon,
+  InstantWithdrawalIcon,
   LinkArrowIcon,
   LogoutIcon,
   ObserversBgIcon,

diff --git a/src/components/icons/instant_withdrawal.svg b/src/components/icons/instant_withdrawal.svg