Release RNP things

package.json

@@ -27,10 +27,11 @@
   },
   "dependencies": {
     "@ant-design/icons": "5.4.0",
-    "@ar.io/sdk": "^3.1.0-alpha.9",
+    "@ar.io/sdk": "^3.2.0-alpha.3",
     "@permaweb/aoconnect": "^0.0.59",
-    "@radix-ui/react-select": "^2.1.4",
     "@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",
@@ -53,6 +54,7 @@
     "react-icons": "^5.0.1",
     "react-markdown": "6",
     "react-router-dom": "^6.4.2",
+    "recharts": "^2.15.0",
     "viem": "2.x",
     "wagmi": "^2.12.2"
   },

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.stories.tsx

@@ -0,0 +1,59 @@
+import { AoReturnedName } from '@ar.io/sdk';
+import '@src/index.css';
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import { RNPChart } from './RNPChart';
+
+const meta = {
+  title: 'Charts/RNPChart',
+  component: RNPChart,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story, { parameters }) => {
+      switch (true) {
+        default: {
+          // TODO: add correct test data
+          const queryClient = new QueryClient({
+            defaultOptions: {
+              queries: {
+                retry: false,
+                initialData: () => parameters.rnpDetails,
+              },
+            },
+          });
+          return (
+            <QueryClientProvider client={queryClient}>
+              <div className="flex w-[700px] h-[500px] bg-background p-10 rounded-xl">
+                <Story />
+              </div>
+            </QueryClientProvider>
+          );
+        }
+      }
+    },
+  ],
+} as Meta<typeof RNPChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const stubData: AoReturnedName = {
+  name: 'ardrive',
+  startTimestamp: Date.now(),
+  endTimestamp: Date.now() + 1 ** 6,
+  initiator: '1'.padEnd(43, '1'),
+  premiumMultiplier: 2,
+};
+
+export const Chart: Story = {
+  args: {
+    name: 'hsdlkjfhlskdjfhlksdjhflksdjhflkjhsdflkhdlfkjshdflkj',
+  },
+  parameters: {
+    rnpDetails: stubData,
+  },
+};