Merge pull request #120 from ar-io/develop

Release to Production

CHANGELOG.md

@@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.5.0] - 2024-12-04
+
+### Added 
+
+* Profile button shows user's ArNS Primary Name (if available) or wallet address when logged in
+* Download buttons added to Reports page and individual Report page 
+* Observers: Added epoch selector to view prescribed observers for previous epochs
+* Gateway Details Page
+  * Reported On By card: text links to gateway for observer, report button links to report 
+  * Reported On card: Report button shows in header that links to that report's page 
+
+### Updated
+
+* Staking and Withdrawal modals updated to show Review page for user to confirm operation before processing
+* Withdrawal Modal: Added option for Standard and Expedited Withdrawal
+* Modal dialog styles refreshed
+* Reward Share Ratio capped to 95% when joining network and updating gateway settings 
+
 ## [1.4.3] - 2024-11-27
 
 ### Updated

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ar-io/network-portal",
   "private": true,
-  "version": "1.4.3",
+  "version": "1.5.0",
   "type": "module",
   "scripts": {
     "build": "yarn clean && tsc --build tsconfig.build.json && NODE_OPTIONS=--max-old-space-size=32768 vite build",
@@ -20,9 +20,9 @@
     "deploy": "yarn build && permaweb-deploy --ant-process ${DEPLOY_ANT_PROCESS_ID}"
   },
   "dependencies": {
-    "@ar.io/sdk": "2.5.0-alpha.8",
+    "@ar.io/sdk": "2.5.0",
     "@fontsource/rubik": "^5.0.19",
-    "@headlessui/react": "^1.7.19",
+    "@headlessui/react": "^2.2.0",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@sentry/browser": "^7.101.1",
     "@sentry/react": "^7.101.1",
@@ -38,6 +38,7 @@
     "dexie": "^4.0.8",
     "dexie-react-hooks": "^1.1.7",
     "fflate": "^0.8.2",
+    "file-saver": "^2.0.5",
     "loglevel": "^1.9.1",
     "lottie-react": "^2.4.0",
     "markdown-to-jsx": "^7.5.0",
@@ -61,6 +62,7 @@
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
     "@types/eslint": "^8.4.10",
+    "@types/file-saver": "^2.0.7",
     "@types/jest": "^29.5.10",
     "@types/lodash": "^4.14.188",
     "@types/react": "^18.2.55",

src/components/AssessmentDetailsPanel.tsx

@@ -1,4 +1,4 @@
-import { Dialog } from '@headlessui/react';
+import { Dialog, DialogPanel } from '@headlessui/react';
 import {
   CaretDoubleRightIcon,
   CheckSquareIcon,
@@ -177,7 +177,7 @@ const AssessmentDetailsPanel = ({
       />
 
       <div className="fixed right-0 top-0 h-screen w-[36rem]">
-        <Dialog.Panel
+        <DialogPanel
           className={
             'relative flex h-full flex-col bg-grey-800 text-sm text-mid'
           }
@@ -270,7 +270,7 @@ const AssessmentDetailsPanel = ({
               </div>
             )}
           </div>
-        </Dialog.Panel>
+        </DialogPanel>
       </div>
     </Dialog>
   );

src/components/Profile.tsx

@@ -1,10 +1,17 @@
 /* eslint-disable tailwindcss/migration-from-tailwind-2 */
-import { Popover } from '@headlessui/react';
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
+import useBalances from '@src/hooks/useBalances';
+import usePrimaryName from '@src/hooks/usePrimaryName';
 import { useGlobalState } from '@src/store';
-import { formatBalance, formatWalletAddress } from '@src/utils';
-import { forwardRef, useState } from 'react';
+import {
+  formatBalance,
+  formatPrimaryName,
+  formatWalletAddress,
+} from '@src/utils';
+import { forwardRef, ReactElement, useState } from 'react';
 import Button, { ButtonType } from './Button';
 import CopyButton from './CopyButton';
+import Placeholder from './Placeholder';
 import Tooltip from './Tooltip';
 import {
   ClockRewindIcon,
@@ -14,40 +21,46 @@ 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) => {
+const CustomPopoverButton = forwardRef<
+  HTMLButtonElement,
+  { children?: ReactElement }
+>((props, ref) => {
   return (
     <Button
       forwardRef={ref}
       buttonType={ButtonType.PRIMARY}
       icon={<ConnectIcon className="size-4" />}
       title="Profile"
+      text={props.children}
       {...props}
     />
   );
 });
 
 const Profile = () => {
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-
   const walletStateInitialized = useGlobalState(
     (state) => state.walletStateInitialized,
   );
-
   const wallet = useGlobalState((state) => state.wallet);
   const updateWallet = useGlobalState((state) => state.updateWallet);
   const walletAddress = useGlobalState((state) => state.walletAddress);
-  const { data:balances } = useBalances(walletAddress);
+  const { data: balances } = useBalances(walletAddress);
   const ticker = useGlobalState((state) => state.ticker);
 
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const { data: primaryName } = usePrimaryName(walletAddress?.toString());
+
   return walletAddress ? (
     <Popover className="relative">
-      <Popover.Button as={CustomPopoverButton} />
+      <PopoverButton as={CustomPopoverButton}>
+        {primaryName
+          ? formatPrimaryName(primaryName.name)
+          : formatWalletAddress(walletAddress.toString())}
+      </PopoverButton>
 
-      <Popover.Panel className="absolute right-0 z-50 mt-2.5 w-fit rounded-xl border border-grey-800 bg-grey-1000 text-sm shadow-xl">
+      <PopoverPanel className="absolute right-0 z-50 mt-2.5 w-fit rounded-xl border border-grey-800 bg-grey-1000 text-sm shadow-xl">
         <div className="flex gap-2 px-4 py-5 ">
           <WalletIcon className="size-4" />
 
@@ -110,7 +123,7 @@ const Profile = () => {
             <LogoutIcon className="size-4" /> Logout
           </button>
         </div>
-      </Popover.Panel>
+      </PopoverPanel>
     </Popover>
   ) : walletStateInitialized ? (
     <div>

src/components/forms/validation.ts

@@ -86,7 +86,7 @@ export const validateNumberRange = (
   };
 };
 
-export const validateUnstakeAmount = (
+export const validateWithdrawAmount = (
   propertyName: string,
   ticker: string,
   currentStake: number,

src/components/icons/index.ts

@@ -8,6 +8,8 @@ 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';
+import CircleCheckIcon from './circle_check.svg?react';
+import CircleIcon from './circle.svg?react';
 import ClockRewindIcon from './clock_rewind.svg?react';
 import CloseIcon from './close.svg?react';
 import CloseDrawerIcon from './close_drawer.svg?react';
@@ -17,6 +19,7 @@ import CopyIcon from './copy.svg?react';
 import CopyCheckedIcon from './copy_checked.svg?react';
 import DashboardIcon from './dashboard.svg?react';
 import DocsIcon from './docs.svg?react';
+import DownloadIcon from './download.svg?react';
 import EditIcon from './edit_icon.svg?react';
 import FailSquareIcon from './fail_square.svg?react';
 import FormErrorIcon from './form_error.svg?react';
@@ -60,6 +63,8 @@ export {
   CancelButtonXIcon,
   CheckSquareIcon,
   ChevronDownIcon,
+  CircleCheckIcon,
+  CircleIcon,
   ClockRewindIcon,
   CloseDrawerIcon,
   CloseIcon,
@@ -69,6 +74,7 @@ export {
   CopyIcon,
   DashboardIcon,
   DocsIcon,
+  DownloadIcon,
   EditIcon,
   FailSquareIcon,
   FormErrorIcon,

src/components/modals/BaseModal.tsx

@@ -1,4 +1,4 @@
-import { Dialog } from '@headlessui/react';
+import { Dialog, DialogPanel } from '@headlessui/react';
 import { ReactElement } from 'react';
 import { CloseIcon } from '../icons';
 
@@ -21,18 +21,18 @@ const BaseModal = ({
       />
 
       <div className="fixed inset-0 flex  w-screen items-center justify-center p-4">
-        <Dialog.Panel
-          className={`relative flex max-h-full flex-col items-stretch rounded-xl bg-[#111112] ${useDefaultPadding ? 'p-8' : ''} text-center text-grey-100`}
+        <DialogPanel
+          className={`relative flex max-h-full flex-col items-stretch rounded-xl bg-[#111112] ${useDefaultPadding ? 'p-8' : ''} border border-stroke-low text-center text-grey-100`}
         >
           {showCloseButton && (
             <button className="absolute -right-7 top-0" onClick={onClose}>
               <CloseIcon className="size-5" />
             </button>
           )}
-          <div className="flex grow flex-col overflow-y-auto scrollbar">
+          <div className="flex grow flex-col overflow-hidden overflow-y-auto rounded-xl scrollbar">
             {children}
           </div>
-        </Dialog.Panel>
+        </DialogPanel>
       </div>
     </Dialog>
   );

src/components/modals/CancelWithdrawalModal.tsx

@@ -76,7 +76,7 @@ const CancelWithdrawalModal = ({
             </div>
           </div>
 
-          <div className="px-8 pb-8 pt-6">
+          <div className="bg-containerL0 px-8 pb-8 pt-6">
             <div className="mb-6 flex flex-col items-center gap-2 text-sm text-mid">
               <div>
                 Please type &quot;CONFIRM&quot; in the text box to proceed.
@@ -85,7 +85,7 @@ const CancelWithdrawalModal = ({
                 type="text"
                 onChange={(e) => setConfirmText(e.target.value)}
                 className={
-                  'h-7 w-full rounded-md border border-grey-700 bg-grey-1000 p-3 text-sm text-mid outline-none placeholder:text-grey-400 focus:text-high'
+                  'h-7 w-full rounded-md border border-grey-700 bg-grey-1000 p-4 text-sm text-mid outline-none placeholder:text-grey-400 focus:text-high'
                 }
                 value={confirmText}
               />

src/components/modals/InstantWithdrawalModal.tsx

@@ -142,7 +142,7 @@ const InstantWithdrawalModal = ({
             </ul>
           </div>
 
-          <div className="mt-4 flex flex-col gap-1 px-8">
+          <div className="mt-4 flex flex-col gap-1 px-8 pb-4">
             <LabelValueRow
               label="Stake Withdrawing:"
               value={`${formatWithCommas(new mIOToken(vault.balance).toIO().valueOf())} ${ticker}`}
@@ -180,7 +180,7 @@ const InstantWithdrawalModal = ({
             />
           </div>
 
-          <div className="px-8 pb-8 pt-6">
+          <div className="bg-containerL0 px-8 pb-8 pt-4">
             <div className="mb-6 flex flex-col items-center gap-2 text-sm text-mid">
               <div>
                 Please type &quot;WITHDRAW&quot; in the text box to proceed.
@@ -189,7 +189,7 @@ const InstantWithdrawalModal = ({
                 type="text"
                 onChange={(e) => setConfirmText(e.target.value)}
                 className={
-                  'h-7 w-full rounded-md border border-grey-700 bg-grey-1000 p-3 text-sm text-mid outline-none placeholder:text-grey-400 focus:text-high'
+                  'h-7 w-full rounded-md border border-grey-700 bg-grey-1000 p-4 text-sm text-mid outline-none placeholder:text-grey-400 focus:text-high'
                 }
                 value={confirmText}
               />

src/components/modals/LeaveNetworkModal.tsx

@@ -94,14 +94,14 @@ const LeaveNetworkModal = ({ onClose }: { onClose: () => void }) => {
             </ul>
           </div>
 
-          <div className="px-8 pb-8 pt-6">
+          <div className="bg-containerL0 px-8 pb-8 pt-6">
             <div className="mb-6 flex flex-col items-center gap-2 text-sm text-mid">
               <div>Please type &quot;LEAVE NETWORK&quot; in the text box to proceed.</div>
               <input
                 type="text"
                 onChange={(e) => setLeaveNetworkText(e.target.value)}
                 className={
-                  'h-7 w-full rounded-md border border-grey-700 bg-grey-1000 p-3 text-sm text-mid outline-none placeholder:text-grey-400 focus:text-high'
+                  'h-7 w-full rounded-md border border-grey-700 bg-grey-1000 p-4 text-sm text-mid outline-none placeholder:text-grey-400 focus:text-high'
                 }
                 value={leaveNetworkText}
               />