Mock collections

packages/profile/.storybook/main.ts

@@ -25,6 +25,7 @@ const config: StorybookConfig = {
       resolve: {
         alias: {
           "@/hooks/account": require.resolve("../src/hooks/account.mock.ts"),
+          "@/hooks/collection": require.resolve("../src/hooks/collection.mock.ts"),
           "@/hooks/token": require.resolve("../src/hooks/token.mock.ts"),
           "@cartridge/utils/api/cartridge": require.resolve("../node_modules/@cartridge/utils/dist/api/cartridge/index.js"),
           "@cartridge/utils/api/indexer": require.resolve("../node_modules/@cartridge/utils/dist/api/indexer/index.js"),

packages/profile/.storybook/preview.tsx

@@ -5,6 +5,7 @@ import { SonnerToaster } from "@cartridge/ui-next";
 import { Provider } from "../src/components/provider";
 
 import "../src/index.css";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
 
 const preview: Preview = {
   parameters: {
@@ -41,10 +42,14 @@ const preview: Preview = {
     (Story,
       // { parameters }
     ) => (
-      <Provider>
-        <Story />
-        <SonnerToaster />
-      </Provider>
+      <MemoryRouter initialEntries={["/project-1"]}>
+        <Provider>
+          <Routes>
+            <Route path="/:project" element={<Story />} />
+          </Routes>
+          <SonnerToaster />
+        </Provider>
+      </MemoryRouter>
     ),
   ],
 };

packages/profile/src/components/provider/index.tsx

@@ -3,7 +3,6 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import { ArcadeProvider } from "./arcade";
 import { ThemeProvider } from "./theme";
 import { ConnectionProvider } from "./connection";
-import { BrowserRouter } from "react-router-dom";
 import { CartridgeAPIProvider } from "@cartridge/utils/api/cartridge";
 import { IndexerAPIProvider } from "@cartridge/utils/api/indexer";
 import { DataProvider } from "./data";
@@ -29,23 +28,21 @@ export function Provider({ children }: PropsWithChildren) {
 
   return (
     <PostHogProvider client={posthog}>
-      <BrowserRouter>
-        <CartridgeAPIProvider
-          url={`${import.meta.env.VITE_CARTRIDGE_API_URL!}/query`}
-        >
-          <IndexerAPIProvider credentials="omit">
-            <QueryClientProvider client={queryClient}>
-              <ArcadeProvider>
-                <ConnectionProvider>
-                  <ThemeProvider defaultScheme="system">
-                    <DataProvider>{children}</DataProvider>
-                  </ThemeProvider>
-                </ConnectionProvider>
-              </ArcadeProvider>
-            </QueryClientProvider>
-          </IndexerAPIProvider>
-        </CartridgeAPIProvider>
-      </BrowserRouter>
+      <CartridgeAPIProvider
+        url={`${import.meta.env.VITE_CARTRIDGE_API_URL!}/query`}
+      >
+        <IndexerAPIProvider credentials="omit">
+          <QueryClientProvider client={queryClient}>
+            <ArcadeProvider>
+              <ConnectionProvider>
+                <ThemeProvider defaultScheme="system">
+                  <DataProvider>{children}</DataProvider>
+                </ThemeProvider>
+              </ConnectionProvider>
+            </ArcadeProvider>
+          </QueryClientProvider>
+        </IndexerAPIProvider>
+      </CartridgeAPIProvider>
     </PostHogProvider>
   );
 }

packages/profile/src/hooks/collection.mock.ts

@@ -0,0 +1,25 @@
+export function useCollections() {
+  return {
+    collections: Object.values(collections),
+    status: "success",
+  };
+}
+
+export function useCollection() {
+  return {
+    collection: collections.collection1,
+    status: "success",
+  };
+}
+
+const collections = {
+  collection1: {
+    address:
+      "0x00539f522b29ae9251dbf7443c7a950cf260372e69efab3710a11bf17a9599f1",
+    name: "Blobert",
+    type: "ERC-721",
+    imageUrl:
+      "https://media.arkproject.dev/contracts/0x00539f522b29ae9251dbf7443c7a950cf260372e69efab3710a11bf17a9599f1/avatar.jpg",
+    totalCount: 100,
+  },
+};

packages/profile/src/hooks/token.mock.ts

@@ -2,7 +2,7 @@ import { tokens } from "@cartridge/utils/mock/data";
 
 export function useTokens() {
   return {
-    data: [tokens.ETH, tokens.STARK],
+    data: Object.values(tokens),
     isFetching: false,
     isLoading: false,
   };

packages/profile/src/main.tsx

@@ -3,14 +3,17 @@ import { createRoot } from "react-dom/client";
 import { SonnerToaster } from "@cartridge/ui-next";
 import { App } from "@/components/app";
 import { Provider } from "@/components/provider";
+import { BrowserRouter } from "react-router-dom";
 
 import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <Provider>
-      <App />
-    </Provider>
+    <BrowserRouter>
+      <Provider>
+        <App />
+      </Provider>
+    </BrowserRouter>
     <SonnerToaster position="bottom-right" />
   </StrictMode>,
 );