Merge pull request #639 from ar-io/PE-7365-rnp-page

feat(PE-7365): rnp page

package.json

@@ -31,6 +31,7 @@
     "@permaweb/aoconnect": "^0.0.59",
     "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-switch": "^1.1.2",
     "@sentry/react": "^7.45.0",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-query-persist-client": "^5.45.1",

src/App.tsx

@@ -59,6 +59,8 @@ const SettingsLayout = React.lazy(
   () => import('./components/pages/Settings/SettingsLayout'),
 );
 
+const RNPPage = React.lazy(() => import('./components/pages/RNPPage/RNPPage'));
+
 const sentryCreateBrowserRouter =
   Sentry.wrapCreateBrowserRouter(createHashRouter);
 
@@ -323,6 +325,18 @@ function App() {
               </Suspense>
             }
           />
+          <Route
+            path="/returned-names"
+            element={
+              <Suspense
+                fallback={
+                  <PageLoader loading={true} message={'Loading, please wait'} />
+                }
+              >
+                <RNPPage />
+              </Suspense>
+            }
+          />
         </Route>
         <Route
           path="settings"

src/components/data-display/charts/RNPChart.tsx

@@ -2,6 +2,7 @@ import { AoGetCostDetailsParams, mARIOToken } from '@ar.io/sdk';
 import { useCostDetails } from '@src/hooks/useCostDetails';
 import { useGlobalState, useWalletState } from '@src/state';
 import { formatARIOWithCommas, formatDateMDY } from '@src/utils';
+import Lottie from 'lottie-react';
 import { useEffect, useRef, useState } from 'react';
 import {
   Line,
@@ -14,14 +15,16 @@ import {
 import { CategoricalChartState } from 'recharts/types/chart/types';
 import { Coordinate } from 'recharts/types/util/types';
 
+import arioLoading from '../../icons/ario-spinner.json';
+
 const START_RNP_PREMIUM = 50;
 
 export function RNPChart({
   name,
   purchaseDetails,
 }: {
   name: string;
-  purchaseDetails?: AoGetCostDetailsParams;
+  purchaseDetails?: Partial<AoGetCostDetailsParams>;
 }) {
   const [{ walletAddress }] = useWalletState();
   const { data: costDetails } = useCostDetails({
@@ -180,7 +183,13 @@ export function RNPChart({
     return <></>;
   };
 
-  if (!chartData.length) return <></>;
+  if (!chartData?.length)
+    return (
+      <span className="h-fit flex flex-col text-white w-full items-center p-5 justify-center m-auto">
+        <Lottie animationData={arioLoading} loop={true} className="h-[100px]" />
+        <span>Loading Price Chart...</span>
+      </span>
+    );
 
   if (!costDetails?.returnedNameDetails) return <></>;