Update dependencies and set Sentry

README.md

@@ -20,44 +20,6 @@ npm install
 
 ## Run
 
-### Links
-
-In order to run the UI, you need link some internal dependencies because it is not published yet< >
-
-#### Codex SDK
-
-Clone the [Codex SDK](https://github.com/codex-storage/codex-js).
-
-Follow the instructions to install and build the SDK, then run this command in the SDK repository:
-
-```
-npm link
-```
-
-Now in the current repository, you'll we able to link your local SDK build by running:
-
-```
-npm link @codex/sdk-js
-```
-
-#### Codex Marketplace Components
-
-Clone the [Codex SDK](https://github.com/codex-storage/codex-marketplace-ui-components).
-
-Follow the instructions to install and build the SDK, then run this command in the SDK repository:
-
-```
-npm link
-```
-
-Now in the current repository, you'll we able to link your local SDK build by running:
-
-```
-npm link @codex/marketplace-ui-components
-```
-
-#### Codex SDK
-
 ```
 npm run dev
 ```

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@codex/marketplace-ui",
+  "name": "@codex-storage/marketplace-ui",
   "description": "Marketplace UI for Codex decentralized storage network.",
   "repository": {
     "type": "git",
@@ -22,8 +22,9 @@
     "React"
   ],
   "dependencies": {
-    "@codex/marketplace-ui-components": "@codex/marketplace-ui-components#master",
-    "@codex/sdk-js": "@codex/marketplace-ui#master",
+    "@codex-storage/marketplace-ui-components": "0.0.1",
+    "@codex-storage/sdk-js": "0.0.1",
+    "@sentry/react": "^8.27.0",
     "@tanstack/react-query": "^5.51.15",
     "@tanstack/react-router": "^1.45.7",
     "classnames": "^2.5.1",

src/CodexUrllSettings/CodexUrlSettings.tsx

@@ -1,6 +1,6 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
-import { Button, Input, Toast } from "@codex/marketplace-ui-components";
+import { Button, Input, Toast } from "@codex-storage/marketplace-ui-components";
 import { CodexSdk } from "../sdk/codex";
 
 export function CodexUrlSettings() {

src/components/CardNumbers/CardNumbers.tsx

@@ -1,4 +1,4 @@
-import { ButtonIcon, Input, Tooltip } from "@codex/marketplace-ui-components";
+import { ButtonIcon, Input, Tooltip } from "@codex-storage/marketplace-ui-components";
 import "./CardNumbers.css";
 import { Check, Info, Pencil, ShieldAlert } from "lucide-react";
 import { ChangeEvent, useEffect, useState } from "react";

src/components/CustomStateCellRender/CustomStateCellRender.tsx

@@ -1,6 +1,6 @@
 import { CheckCircle, CircleDashed, ShieldAlert } from "lucide-react";
 import "./CustomStateCellRender.css";
-import { StateCell, Tooltip } from "@codex/marketplace-ui-components";
+import { StateCell, Tooltip } from "@codex-storage/marketplace-ui-components";
 
 // Import css
 StateCell;

src/components/Debug/Debug.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import Loader from "../../assets/loader.svg";
 import { CodexSdk } from "../../sdk/codex";
-import { Card, Spinner } from "@codex/marketplace-ui-components";
+import { Card, Spinner } from "@codex-storage/marketplace-ui-components";
 import { Promises } from "../../utils/promises";
 
 export function Debug() {

src/components/Dialog/Dialog.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useEffect, useRef } from "react";
 import "./Dialog.css";
-import { Button } from "@codex/marketplace-ui-components";
+import { Button } from "@codex-storage/marketplace-ui-components";
 
 type Props = {
   open: boolean;

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,7 +1,8 @@
-import { Placeholder } from "@codex/marketplace-ui-components";
+import { Placeholder } from "@codex-storage/marketplace-ui-components";
 import { CircleX } from "lucide-react";
 import React, { ErrorInfo, ReactNode } from "react";
 import "./ErrorBoundary.css";
+import * as Sentry from "@sentry/browser";
 
 type State = {
   hasError: boolean;
@@ -23,14 +24,8 @@ export class ErrorBoundary extends React.Component<Props, State> {
   }
 
   componentDidCatch(error: Error, info: ErrorInfo) {
-    // Example 'componentStack':
-    //   in ComponentThatThrows (created by App)
-    //   in ErrorBoundary (created by App)
-    //   in div (created by App)
-    //   in App
-    //logErrorToMyService(error, info.componentStack);
-    // TODO set Sentry here
-    console.error("Got error", error, info);
+    Sentry.captureException(error);
+    console.error(error, info);
   }
 
   render() {

src/components/FileCellRender/FIleCell.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Tooltip, WebFileIcon } from "@codex/marketplace-ui-components";
+import { Tooltip, WebFileIcon } from "@codex-storage/marketplace-ui-components";
 import "./FileCell.css";
 import { FileMetadata, FilesStorage } from "../../utils/file-storage";
 import { PurchaseStorage } from "../../utils/purchases-storage";

src/components/Files/CidCopyButton.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState } from "react";
 import { COPY_DURATION, ICON_SIZE } from "../../utils/constants.ts";
 import { Copy } from "lucide-react";
-import { Button } from "@codex/marketplace-ui-components";
+import { Button } from "@codex-storage/marketplace-ui-components";
 
 type CopyButtonProps = {
   cid: string;

src/components/Files/FileDetails.tsx

@@ -1,5 +1,5 @@
-import { ButtonIcon, Button } from "@codex/marketplace-ui-components";
-import { CodexDataContent } from "@codex/sdk-js";
+import { ButtonIcon, Button } from "@codex-storage/marketplace-ui-components";
+import { CodexDataContent } from "@codex-storage/sdk-js";
 import { X, DownloadIcon } from "lucide-react";
 import { attributes } from "../../utils/attributes";
 import { PrettyBytes } from "../../utils/bytes";

src/components/Files/Files.tsx

@@ -8,7 +8,7 @@ import {
   ButtonIcon,
   EmptyPlaceholder,
   WebFileIcon,
-} from "@codex/marketplace-ui-components";
+} from "@codex-storage/marketplace-ui-components";
 import { FileDetails } from "./FileDetails.tsx";
 import { classnames } from "../../utils/classnames.ts";
 import { FavoriteStorage } from "../../utils/favorite-storage.tsx";

src/components/HttpNetworkIndicator/HttpNetworkIndicator.tsx

@@ -1,4 +1,4 @@
-import { NetworkIndicator } from "@codex/marketplace-ui-components";
+import { NetworkIndicator } from "@codex-storage/marketplace-ui-components";
 import { useNetwork } from "../../network/useNetwork";
 
 export function HttpNetworkIndicator() {

src/components/LogLevel/LogLevel.tsx

@@ -1,10 +1,15 @@
-import { CodexLogLevel } from "@codex/sdk-js";
+import { CodexLogLevel } from "@codex-storage/sdk-js";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { CodexSdk } from "../../sdk/codex";
 import "./LogLevel.css";
-import { Button, Select, Toast } from "@codex/marketplace-ui-components";
+import {
+  Button,
+  Select,
+  Toast,
+} from "@codex-storage/marketplace-ui-components";
 import { Promises } from "../../utils/promises";
+import * as Sentry from "@sentry/browser";
 
 export function LogLevel() {
   const queryClient = useQueryClient();
@@ -24,7 +29,8 @@ export function LogLevel() {
       queryClient.invalidateQueries({ queryKey: ["debug"] });
     },
     onError: (error) => {
-      // TODO report to sentry
+      Sentry.captureException(error);
+
       setToast({
         message: "Error when trying to update: " + error,
         time: Date.now(),

src/components/NodeIndicator/NodeIndicator.tsx

@@ -1,11 +1,14 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { CodexSdk } from "../../sdk/codex";
-import { NetworkIndicator, Toast } from "@codex/marketplace-ui-components";
+import {
+  NetworkIndicator,
+  Toast,
+} from "@codex-storage/marketplace-ui-components";
 
 export function NodeIndicator() {
   const queryClient = useQueryClient();
-  const [toast, setToast] = useState({
+  const [toast] = useState({
     time: 0,
     message: "",
   });
@@ -16,14 +19,12 @@ export function NodeIndicator() {
       CodexSdk.node()
         .then((node) => node.spr())
         .then((data) => {
-          if (data.error) {
-            setToast({
-              message: "Cannot connect to the Codex node.",
-              time: Date.now(),
-            });
-          }
-
-          // TODO sentry debug
+          // if (data.error) {
+          //   setToast({
+          //     message: "Cannot connect to the Codex node.",
+          //     time: Date.now(),
+          //   });
+          // }
 
           return data;
         }),

src/components/NodeSpaceAllocation/NodeSpaceAllocation.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import Loader from "../../assets/loader.svg";
 import { CodexSdk } from "../../sdk/codex";
-import { SpaceAllocation } from "@codex/marketplace-ui-components";
+import { SpaceAllocation } from "@codex-storage/marketplace-ui-components";
 
 export function NodeSpaceAllocation() {
   const { data: space, isPending } = useQuery({
@@ -15,7 +15,6 @@ export function NodeSpaceAllocation() {
   }
 
   if (space.error) {
-    // TODO Sentry
     return "";
   }
 

src/components/StorageRequestSetup/StorageRequestAvailability.tsx

@@ -2,7 +2,7 @@ import { ChangeEvent, useEffect, useRef, useState } from "react";
 import "./StorageRequestAvailability.css";
 import { WebStorage } from "../../utils/web-storage";
 import { StorageAvailabilityUnit, StorageAvailabilityValue } from "./types";
-import { InputGroup } from "@codex/marketplace-ui-components";
+import { InputGroup } from "@codex-storage/marketplace-ui-components";
 
 type Props = {
   onToggleNext: (next: boolean) => void;

src/components/StorageRequestSetup/StorageRequestDone.tsx

@@ -1,4 +1,4 @@
-import { Placeholder } from "@codex/marketplace-ui-components";
+import { Placeholder } from "@codex-storage/marketplace-ui-components";
 import { CircleCheck } from "lucide-react";
 import { useEffect } from "react";
 import "./StorageRequestDone.css";

src/components/StorageRequestSetup/StorageRequestDurability.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import { WebStorage } from "../../utils/web-storage";
 import { StorageDurabilityStepValue } from "./types";
-import { InputGroup } from "@codex/marketplace-ui-components";
+import { InputGroup } from "@codex-storage/marketplace-ui-components";
 
 type Props = {
   onToggleNext: (next: boolean) => void;

src/components/StorageRequestSetup/StorageRequestFileChooser.tsx

@@ -8,7 +8,7 @@ import {
   DropdownOption,
   Upload,
   WebFileIcon,
-} from "@codex/marketplace-ui-components";
+} from "@codex-storage/marketplace-ui-components";
 import { useData } from "../../hooks/useData";
 
 type Props = {

src/components/StorageRequestSetup/StorageRequestPrice.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, ChangeEvent } from "react";
 import { WebStorage } from "../../utils/web-storage";
 import { StoragePriceStepValue } from "./types";
-import { InputGroup } from "@codex/marketplace-ui-components";
+import { InputGroup } from "@codex-storage/marketplace-ui-components";
 
 type Props = {
   onToggleNext: (next: boolean) => void;

src/components/StorageRequestSetup/StorageRequestReview.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, useEffect, useState } from "react";
 import { WebStorage } from "../../utils/web-storage";
 import "./StorageRequestReview.css";
-import { Alert } from "@codex/marketplace-ui-components";
+import { Alert } from "@codex-storage/marketplace-ui-components";
 import { CardNumbers } from "../CardNumbers/CardNumbers";
 import { Range } from "../Range/Range";
 import { FileWarning } from "lucide-react";

src/components/StorageRequestSetup/StorageRequestStepper.tsx

@@ -3,15 +3,20 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { WebStorage } from "../../utils/web-storage";
 import { STEPPER_DURATION } from "../../utils/constants";
 import { StorageRequestReview } from "./StorageRequestReview";
-import { CodexCreateStorageRequestInput } from "@codex/sdk-js";
+import { CodexCreateStorageRequestInput } from "@codex-storage/sdk-js";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { CodexSdk } from "../../sdk/codex";
 import { StorageAvailabilityUnit } from "./types";
-import { Backdrop, Stepper, Toast } from "@codex/marketplace-ui-components";
+import {
+  Backdrop,
+  Stepper,
+  Toast,
+} from "@codex-storage/marketplace-ui-components";
 import { classnames } from "../../utils/classnames";
 import { StorageRequestDone } from "./StorageRequestDone";
 import { PurchaseStorage } from "../../utils/purchases-storage";
 import { Promises } from "../../utils/promises";
+import * as Sentry from "@sentry/browser";
 
 function calculateAvailability(value: number, unit: StorageAvailabilityUnit) {
   switch (unit) {
@@ -61,7 +66,8 @@ export function StorageRequestStepper({ className, open, onClose }: Props) {
       PurchaseStorage.set(requestId, cid);
     },
     onError: (error) => {
-      // TODO Sentry
+      Sentry.captureException(error);
+
       setToast({
         message: "Error when trying to update: " + error,
         time: Date.now(),

src/components/Welcome/Welcome.tsx

@@ -1,4 +1,4 @@
-import { SimpleText } from "@codex/marketplace-ui-components";
+import { SimpleText } from "@codex-storage/marketplace-ui-components";
 import "./Welcome.css";
 import { Link } from "@tanstack/react-router";
 import { ChevronRight } from "lucide-react";

src/hooks/useData.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { FilesStorage } from "../utils/file-storage";
 import { CodexSdk } from "../sdk/codex";
+import * as Sentry from "@sentry/browser";
 
 export function useData() {
   const { data = [] } = useQuery({
@@ -9,7 +10,7 @@ export function useData() {
         const res = await data.cids();
 
         if (res.error) {
-          // TODO Sentry
+          Sentry.captureException(res.data);
           return [];
         }
 

src/main.tsx

@@ -6,7 +6,25 @@ import "./index.css";
 // Import the generated route tree
 import App from "./App.tsx";
 import { routeTree } from "./routeTree.gen";
-import { Failure } from "@codex/marketplace-ui-components";
+import { Failure } from "@codex-storage/marketplace-ui-components";
+import * as Sentry from "@sentry/react";
+
+if (process.env.NODE_ENV === "production") {
+  Sentry.init({
+    dsn: "https://22d77c59a27b8d5efc07132188b505b9@o4507855852011520.ingest.de.sentry.io/4507866758512720",
+    integrations: [
+      Sentry.browserTracingIntegration(),
+      Sentry.replayIntegration(),
+    ],
+    // Tracing
+    tracesSampleRate: 1.0, //  Capture 100% of the transactions
+    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+    tracePropagationTargets: ["localhost"],
+    // Session Replay
+    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+    replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+  });
+}
 
 // Create a new router instance
 const router = createRouter({

src/routes/dashboard.tsx

@@ -4,7 +4,7 @@ import {
   MenuItem,
   MenuItemComponentProps,
   Page,
-} from "@codex/marketplace-ui-components";
+} from "@codex-storage/marketplace-ui-components";
 import { Home, ShoppingBag, Server, Settings, HelpCircle } from "lucide-react";
 import { ICON_SIZE } from "../utils/constants";
 import { NodeIndicator } from "../components/NodeIndicator/NodeIndicator";

src/routes/dashboard/about.tsx

@@ -1,7 +1,7 @@
-import { CodexDataContent } from "@codex/sdk-js";
+import { CodexDataContent } from "@codex-storage/sdk-js";
 import { createFileRoute, useRouterState } from "@tanstack/react-router";
 import { PrettyBytes } from "../../utils/bytes.ts";
-import { Button, WebFileIcon } from "@codex/marketplace-ui-components";
+import { Button, WebFileIcon } from "@codex-storage/marketplace-ui-components";
 
 function ProtectedIcon({ isProtected }: { isProtected: boolean }) {
   if (isProtected) {

src/routes/dashboard/availabilities.tsx

@@ -1,4 +1,4 @@
-import { EmptyPlaceholder } from "@codex/marketplace-ui-components";
+import { EmptyPlaceholder } from "@codex-storage/marketplace-ui-components";
 import { createFileRoute } from "@tanstack/react-router";
 import "./availabilities.css";
 

src/routes/dashboard/help.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 import "./help.css";
 import { HelpCircle } from "lucide-react";
-import { SimpleText } from "@codex/marketplace-ui-components";
+import { SimpleText } from "@codex-storage/marketplace-ui-components";
 
 export const Route = createFileRoute("/dashboard/help")({
   component: () => (

src/routes/dashboard/index.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { ErrorBoundary } from "../../components/ErrorBoundary/ErrorBoundary.tsx";
 import { Files } from "../../components/Files/Files.tsx";
-import { Card, Upload } from "@codex/marketplace-ui-components";
+import { Card, Upload } from "@codex-storage/marketplace-ui-components";
 import { CodexSdk } from "../../sdk/codex.ts";
 import { Welcome } from "../../components/Welcome/Welcome.tsx";
 import { FilesStorage } from "../../utils/file-storage.ts";

src/routes/dashboard/purchases.tsx

@@ -3,7 +3,13 @@ import { createFileRoute } from "@tanstack/react-router";
 import { CodexSdk } from "../../sdk/codex";
 import { Plus } from "lucide-react";
 import { useState } from "react";
-import { Button, Cell, Spinner, Table } from "@codex/marketplace-ui-components";
+import {
+  Button,
+  Cell,
+  EmptyPlaceholder,
+  Spinner,
+  Table,
+} from "@codex-storage/marketplace-ui-components";
 import { StorageRequestStepper } from "../../components/StorageRequestSetup/StorageRequestStepper";
 import "./purchases.css";
 import { classnames } from "../../utils/classnames";
@@ -82,6 +88,13 @@ const Purchases = () => {
       />
 
       {!open && <Table headers={headers} cells={cells} />}
+
+      {/* {!cells.length && (
+        <EmptyPlaceholder
+          title="Nothing to show"
+          message="No data here yet. Start to upload files to see data here."
+        />
+      )} */}
     </div>
   );
 };

src/sdk/codex.ts

@@ -1,4 +1,4 @@
-import { Codex } from "@codex/sdk-js";
+import { Codex } from "@codex-storage/sdk-js";
 import { WebStorage } from "../utils/web-storage";
 
 export class CodexSdk {

src/utils/promises.ts

@@ -1,8 +1,13 @@
-import { SafeValue } from "@codex/sdk-js";
+import { SafeValue } from "@codex-storage/sdk-js";
+import * as Sentry from "@sentry/browser";
 
 export const Promises = {
   rejectOnError: <T>(safe: SafeValue<T>) => {
-    // TODO Sentry
-    return safe.error ? Promise.reject(safe.data) : Promise.resolve(safe.data);
+    if (safe.error) {
+      Sentry.captureException(safe.data);
+      return Promise.reject(safe.data);
+    }
+
+    return Promise.resolve(safe.data);
   },
 };