Merge pull request #123 from ar-io/develop

Release to production

CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.6.0] - 2024-12-10
+
+### Added 
+
+* Gateway Details
+  * Added Operator Stake card showing operator stake and EAY, as well as manage stake button for updating operator stake.
+  * Added collapsible Pending Withdrawals card for viewing current withdrawals as well as managing 
+  them (canceling a withdrawal or initiating an expedited withdrawal). Visible only to the gateway operator.
+  * Added collapsible Active Delegates card showing the list of active delegates for the gateway.
+
 ## [1.5.0] - 2024-12-04
 
 ### Added 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ar-io/network-portal",
   "private": true,
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "scripts": {
     "build": "yarn clean && tsc --build tsconfig.build.json && NODE_OPTIONS=--max-old-space-size=32768 vite build",
@@ -20,7 +20,7 @@
     "deploy": "yarn build && permaweb-deploy --ant-process ${DEPLOY_ANT_PROCESS_ID}"
   },
   "dependencies": {
-    "@ar.io/sdk": "2.5.0",
+    "@ar.io/sdk": "2.7.0-alpha.5",
     "@fontsource/rubik": "^5.0.19",
     "@headlessui/react": "^2.2.0",
     "@radix-ui/react-tooltip": "^1.0.7",
@@ -41,6 +41,7 @@
     "file-saver": "^2.0.5",
     "loglevel": "^1.9.1",
     "lottie-react": "^2.4.0",
+    "lucide-react": "^0.461.0",
     "markdown-to-jsx": "^7.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/CopyButton.tsx

@@ -20,7 +20,7 @@ const CopyButton = ({ textToCopy }: { textToCopy: string }) => {
   return (
     <div className="relative">
       <div
-        className={`${copiedVisible ? 'visible' : 'invisible'} absolute -left-7 -top-12 rounded-lg border border-grey-500 bg-containerL0 p-2`}
+        className={`${copiedVisible ? 'visible' : 'invisible'} absolute -left-7 -top-12 z-50 rounded-lg border border-grey-500 bg-containerL0 p-2`}
       >
         Copied!
         <div

src/components/TableView.tsx

@@ -18,13 +18,15 @@ const TableView = <T, S>({
   isLoading,
   noDataFoundText = 'No data found.',
   onRowClick,
+  shortTable = false,
 }: {
   columns: ColumnDef<T, S>[];
   data: T[];
   defaultSortingState: ColumnSort;
   isLoading: boolean;
   noDataFoundText?: string;
   onRowClick?: (row: T) => void;
+  shortTable?: boolean;
 }) => {
   const [sorting, setSorting] = useState<SortingState>([defaultSortingState]);
 
@@ -37,11 +39,15 @@ const TableView = <T, S>({
     onSortingChange: setSorting,
   });
 
+  const maxHeightRemClass = shortTable 
+    ? `max-h-[16rem]`
+    : undefined;
+
   return (
     <>
-      <div className="overflow-x-auto scrollbar">
+      <div className={`overflow-x-auto scrollbar ${maxHeightRemClass}`}>
         <table className="w-full table-auto border-x border-b border-grey-500">
-          <thead className="text-xs text-low">
+          <thead className="sticky top-0 z-10 bg-containerL0 text-xs text-low">
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
@@ -84,7 +90,7 @@ const TableView = <T, S>({
             ))}
           </thead>
           {!isLoading && (
-            <tbody className="text-sm">
+            <tbody className="overflow-y-auto text-sm">
               {table.getRowModel().rows.map((row) => {
                 return (
                   <tr

src/components/forms/validation.ts

@@ -86,6 +86,31 @@ export const validateNumberRange = (
   };
 };
 
+export const validateOperatorWithdrawAmount = (
+  propertyName: string,
+  ticker: string,
+  currentStake: number,
+): FormValidationFunction => {
+  return (v: string) => {
+    const value = +v;
+
+    if (isNaN(value) || v.length === 0) {
+      return `${propertyName} must be a number.`;
+    }
+
+    if (value < 1) {
+      return `${propertyName} must be at least 1 ${ticker}.`;
+    }
+
+    if (value > currentStake - 10000) {
+      return `${propertyName} cannot be greater than your current stake of ${currentStake} ${ticker} minus the base stake (10000 ${ticker}) required for gateways.`;
+    }
+
+    return undefined;
+  };
+};
+
+
 export const validateWithdrawAmount = (
   propertyName: string,
   ticker: string,

src/components/modals/CancelWithdrawalModal.tsx

@@ -51,6 +51,10 @@ const CancelWithdrawalModal = ({
           queryKey: ['delegateStakes'],
           refetchType: 'all',
         });
+        queryClient.invalidateQueries({
+          queryKey: ['gatewayVaults'],
+          refetchType: 'all',
+        });
 
         setShowSuccessModal(true);
       } catch (e: any) {
@@ -71,8 +75,11 @@ const CancelWithdrawalModal = ({
 
           <div className="border-y border-grey-800 p-8 text-sm text-mid">
             <div>
-              This action will cancel your withdrawal and return its stake to
-              the original gateway. This action cannot be undone.
+              This action will cancel your withdrawal and return its stake to{' '}
+              {gatewayAddress.toString() == walletAddress?.toString()
+                ? 'your'
+                : 'the original'}{' '}
+              gateway. This action cannot be undone.
             </div>
           </div>
 

src/components/modals/InstantWithdrawalModal.tsx

@@ -84,6 +84,10 @@ const InstantWithdrawalModal = ({
           queryKey: ['delegateStakes'],
           refetchType: 'all',
         });
+        queryClient.invalidateQueries({
+          queryKey: ['gatewayVaults'],
+          refetchType: 'all',
+        });
 
         setShowSuccessModal(true);
       } catch (e: any) {