Release v1.2.0 to Production

CHANGELOG.md

@@ -0,0 +1,49 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.2.0] - 2024-10-17
+
+### Added
+
+* “Reported On” and “Reported On By” cards on Gateway Details page for viewing observation status by epoch for a gateway
+* “Software” card on gateway details page that shows gateway software version and available bundlers (if gateway has listed them)
+
+### Changed
+
+* Updated Gateway Details page for leaving gateways to hide non-relevant cards and show leave date
+
+
+## [1.1.0] - 2024-10-08
+
+### Added
+
+* Gateways > Reports: Add “AR.IOEpoch #” Column
+* Gateways>Reports>Individual Reports
+  * Add Epoch #
+  * Remove Epoch start height
+* Implemented Leave Network Flow:
+  * Adds button to Gateway Detail page to leave network when gateway shown is the user’s own gateway
+  * Hitting Leave shows a modal with information. User has to type “LEAVE NETWORK” before Leave Network button is enabled.
+  * Hitting Leave Network button initiates signature request and then a success message.
+  * Site is refreshed after leaving.
+* Release version shown on sidebar
+
+
+### Changed
+
+* Gateway Details: rename “Reward Ratios” to “Performance Ratios”
+* Gateway Details: Fixes text bubble cut off when copying wallet address
+
+### Fixed
+
+* Gateway Details: Remove Edit and Stake Buttons from gateways that are leaving
+
+## [1.0.0]
+
+* Initial versions of application; version was bumped to 1.1.0 for first public versioned release. 

jest-setup.ts

@@ -11,3 +11,15 @@ global.React = React;
 global.TextEncoder = TextEncoder;
 global.TextDecoder = TextDecoder;
 global.fetch = require('node-fetch');
+// forcefully mock crypto
+Object.defineProperty(global, 'crypto', {
+    value: {
+      subtle: {
+        digest: jest.fn(),
+        generateKey: jest.fn(),
+        importKey: jest.fn(),
+        exportKey: jest.fn(),
+        sign: jest.fn(),
+      },
+    },
+  });

jest.config.json

@@ -13,7 +13,7 @@
     "^.+\\.(ts|tsx|js|jsx|mjs)$": ["ts-jest", { "useESM": true }]
   },
   "transformIgnorePatterns": [
-    "/node_modules/(?!arbundles|arweave-wallet-connector|@permaweb).+\\.js$"
+    "/node_modules/(?!arbundles|arweave-wallet-connector|@permaweb|@dha-team|@ar.io).+\\.js$"
   ],
   "moduleDirectories": ["node_modules", "assets"],
   "testPathIgnorePatterns": ["tests/common/"],

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ar-io/network-portal",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.2.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.1.0-alpha.10",
+    "@ar.io/sdk": "2.3.2-alpha.2",
     "@fontsource/rubik": "^5.0.19",
     "@headlessui/react": "^1.7.19",
     "@radix-ui/react-tooltip": "^1.0.7",
@@ -30,7 +30,7 @@
     "@tanstack/react-table": "^8.17.3",
     "arweave": "^1.15.0",
     "arweave-graphql": "^0.0.5",
-    "axios": "^1.6.7",
+    "axios": "^1.7.7",
     "axios-retry": "^4.0.0",
     "base64-arraybuffer": "^1.0.2",
     "better-react-mathjax": "^2.0.3",

src/components/Dropdown.tsx

@@ -0,0 +1,37 @@
+import { ChevronDownIcon } from './icons';
+
+const Dropdown = ({
+  options,
+  onChange,
+  value,
+}: {
+  options: { label: string; value: string }[];
+  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  value: string;
+}) => {
+  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"
+        onChange={onChange}
+        value={value}
+      >
+        {options.map((option, index) => {
+          return (
+            <option key={index} value={option.value}>
+              {option.label}
+            </option>
+          );
+        })}
+      </select>
+      <div
+        className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 rounded-lg border border-grey-1100 bg-containerL3 bg-gradient-to-b 
+     from-[rgba(102,102,102,0.06)] to-[rgba(0,0,0,0.06)] p-1 shadow-inner  shadow-grey-600"
+      >
+        <ChevronDownIcon className="pointer-events-none size-4  text-mid" />
+      </div>
+    </div>
+  );
+};
+
+export default Dropdown;

src/components/GlobalDataProvider.tsx

@@ -1,5 +1,6 @@
 import { useEffectOnce } from '@src/hooks/useEffectOnce';
 import { useGlobalState } from '@src/store';
+import { cleanupDbCache } from '@src/store/db';
 import { ReactElement, useEffect } from 'react';
 
 const GlobalDataProvider = ({
@@ -23,6 +24,10 @@ const GlobalDataProvider = ({
 
       const currentEpoch = await arioReadSDK.getCurrentEpoch();
       setCurrentEpoch(currentEpoch);
+
+      if(currentEpoch?.epochIndex) {
+        cleanupDbCache(currentEpoch.epochIndex);
+      }
     };
 
     update();

src/components/icons/index.ts

@@ -6,6 +6,7 @@ import BinocularsIcon from './binoculars.svg?react';
 import BinocularsGradientIcon from './binoculars_gradient.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 ClockRewindIcon from './clock_rewind.svg?react';
 import CloseIcon from './close.svg?react';
 import CloseDrawerIcon from './close_drawer.svg?react';
@@ -55,6 +56,7 @@ export {
   BinocularsGradientIcon,
   CaretDoubleRightIcon,
   CheckSquareIcon,
+  ChevronDownIcon,
   ClockRewindIcon,
   CloseDrawerIcon,
   CloseIcon,

src/hooks/useEpochs.ts

@@ -0,0 +1,29 @@
+import { useGlobalState } from '@src/store';
+import { getEpoch } from '@src/store/db';
+import { useQuery } from '@tanstack/react-query';
+
+/** Returns last 14 epochs */
+const useEpochs = () => {
+  const arIOReadSDK = useGlobalState((state) => state.arIOReadSDK);
+  const startEpoch = useGlobalState((state) => state.currentEpoch);
+
+  const queryResults = useQuery({
+    queryKey: ['epochs'],
+    queryFn: async () => {
+      if (!arIOReadSDK || startEpoch === undefined) {
+        throw new Error('arIOReadSDK or startEpoch not available');
+      }
+
+      const additionalEpochs = await Promise.all(
+        Array.from({ length: 13 }, (_, index) => startEpoch.epochIndex - index - 1)
+          .map(epochIndex => getEpoch(arIOReadSDK, epochIndex))
+      );      
+
+      return [startEpoch, ...additionalEpochs.filter(e => e !== undefined)];
+    },
+  });
+
+  return queryResults;
+};
+
+export default useEpochs;