Merge pull request #114 from ar-io/PE-7101-quick-wins-v-1-5-0

PE-7101: Quick Wins v1.5.0

CHANGELOG.md

@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added 
+
+* 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
+
 ## [1.4.3] - 2024-11-27
 
 ### Updated

package.json

@@ -20,7 +20,7 @@
     "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": "^2.2.0",
     "@radix-ui/react-tooltip": "^1.0.7",
@@ -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/Profile.tsx

@@ -1,10 +1,17 @@
 /* eslint-disable tailwindcss/migration-from-tailwind-2 */
 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,38 +21,44 @@ 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">
-      <PopoverButton as={CustomPopoverButton} />
+      <PopoverButton as={CustomPopoverButton}>
+        {primaryName
+          ? formatPrimaryName(primaryName.name)
+          : formatWalletAddress(walletAddress.toString())}
+      </PopoverButton>
 
       <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 ">

src/components/icons/index.ts

@@ -19,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';
@@ -73,6 +74,7 @@ export {
   CopyIcon,
   DashboardIcon,
   DocsIcon,
+  DownloadIcon,
   EditIcon,
   FailSquareIcon,
   FormErrorIcon,

src/hooks/useObservations.ts

@@ -1,17 +1,15 @@
-
+import { AoEpochData } from '@ar.io/sdk/web';
 import { useGlobalState } from '@src/store';
 import { useQuery } from '@tanstack/react-query';
 
-const useObservers = () => {
+const useObservations = (epoch?: AoEpochData) => {
   const arIOReadSDK = useGlobalState((state) => state.arIOReadSDK);
 
-  const currentEpoch = useGlobalState((state) => state.currentEpoch);
-
   const queryResults = useQuery({
-    queryKey: ['observations', currentEpoch?.epochIndex || -1],
+    queryKey: ['observations', arIOReadSDK, epoch?.epochIndex || -1],
     queryFn: () => {
-      if (arIOReadSDK && currentEpoch) {
-        return arIOReadSDK.getObservations(currentEpoch);
+      if (arIOReadSDK && epoch) {
+        return arIOReadSDK.getObservations(epoch);
       }
       throw new Error('arIOReadSDK or currentEpoch not available');
     },
@@ -20,4 +18,4 @@ const useObservers = () => {
   return queryResults;
 };
 
-export default useObservers;
+export default useObservations;

src/hooks/useObservers.ts

@@ -1,18 +1,17 @@
+import { AoEpochData } from '@ar.io/sdk/web';
 import { useGlobalState } from '@src/store';
 import { useQuery } from '@tanstack/react-query';
 
-const useObservers = () => {
+const useObservers = (epoch?: AoEpochData) => {
   const arIOReadSDK = useGlobalState((state) => state.arIOReadSDK);
 
-  const currentEpoch = useGlobalState((state) => state.currentEpoch);
-
   const queryResults = useQuery({
-    queryKey: ['prescribedObservers', currentEpoch?.epochIndex || -1],
+    queryKey: ['prescribedObservers', arIOReadSDK, epoch?.epochIndex || -1],
     queryFn: () => {
-      if (arIOReadSDK && currentEpoch) {
-        return arIOReadSDK.getPrescribedObservers(currentEpoch);
+      if (arIOReadSDK && epoch) {
+        return arIOReadSDK.getPrescribedObservers(epoch);
       }
-      throw new Error('arIOReadSDK or currentEpoch not available');
+      throw new Error('arIOReadSDK or epoch not available');
     },
   });
 

src/hooks/usePrimaryName.ts

@@ -0,0 +1,23 @@
+import { useGlobalState } from '@src/store';
+import { useQuery } from '@tanstack/react-query';
+
+const usePrimaryName = (walletAddress?: string) => {
+  const arIOReadSDK = useGlobalState((state) => state.arIOReadSDK);
+
+  const res = useQuery({
+    queryKey: ['primaryName', walletAddress],
+    queryFn: async () => {
+      if (!walletAddress || !arIOReadSDK) {
+        throw new Error('Wallet Address or SDK not available');
+      }
+      const primaryName = await arIOReadSDK.getPrimaryName({
+        address: walletAddress.toString(),
+      });
+      return primaryName;
+    },
+  });
+
+  return res;
+};
+
+export default usePrimaryName;

src/hooks/useReport.ts

@@ -2,14 +2,7 @@ import { DEFAULT_ARWEAVE_HOST, DEFAULT_ARWEAVE_PROTOCOL } from '@src/constants';
 import { useQuery } from '@tanstack/react-query';
 import { gunzipSync, strFromU8 } from 'fflate';
 
-const useReport = (reportId?: string) => {
-  const queryResults = useQuery({
-    queryKey: ['report', reportId],
-    queryFn: async () => {
-      if (!reportId) {
-        throw new Error('reportId not available');
-      }
-
+export const downloadReport = async (reportId: string) => {
       const reportURL = `${DEFAULT_ARWEAVE_PROTOCOL}://${DEFAULT_ARWEAVE_HOST}/${reportId}`;
 
       const response = await fetch(reportURL);
@@ -21,6 +14,18 @@ const useReport = (reportId?: string) => {
       const arrayBuffer = await response.arrayBuffer();
 
       const data = gunzipSync(new Uint8Array(arrayBuffer));
+      return data;
+}
+
+const useReport = (reportId?: string) => {
+  const queryResults = useQuery({
+    queryKey: ['report', reportId],
+    queryFn: async () => {
+      if (!reportId) {
+        throw new Error('reportId not available');
+      }
+
+      const data = await downloadReport(reportId);
 
       return JSON.parse(strFromU8(data));
     },