feat(web): integrate-kleros-app

Author: tractorss

web/package.json

@@ -46,9 +46,10 @@
   "devDependencies": {
     "@graphql-codegen/cli": "^4.0.1",
     "@graphql-codegen/client-preset": "^4.2.0",
+    "@kleros/curate-v2-tsconfig": "workspace:^",
     "@kleros/kleros-v2-contracts": "^0.3.2",
-    "@types/react": "^18.2.59",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-modal": "^3.16.3",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -69,10 +70,11 @@
   "dependencies": {
     "@cyntler/react-doc-viewer": "^1.17.0",
     "@kleros/curate-v2-templates": "workspace:^",
+    "@kleros/kleros-app": "^2.0.1",
     "@kleros/ui-components-library": "^2.15.0",
     "@sentry/react": "^7.93.0",
     "@sentry/tracing": "^7.93.0",
-    "@tanstack/react-query": "^5.40.1",
+    "@tanstack/react-query": "^5.59.20",
     "@web3modal/ethereum": "^2.7.1",
     "@web3modal/react": "^2.2.2",
     "@web3modal/wagmi": "^5.1.6",
@@ -81,8 +83,8 @@
     "chartjs-adapter-moment": "^1.0.1",
     "core-js": "^3.35.0",
     "ethers": "^5.7.2",
-    "graphql": "^16.8.1",
-    "graphql-request": "~6.1.0",
+    "graphql": "^16.9.0",
+    "graphql-request": "^7.1.2",
     "jose": "^5.3.0",
     "json-2-csv": "^5.5.5",
     "moment": "^2.30.1",
@@ -103,7 +105,7 @@
     "react-use": "^17.4.3",
     "styled-components": "^5.3.11",
     "subgraph-status": "^1.2.3",
-    "viem": "^2.21.2",
-    "wagmi": "^2.12.8"
+    "viem": "^2.21.51",
+    "wagmi": "^2.13.0"
   }
 }

web/src/components/ActionButton/Modal/EvidenceUpload.tsx

@@ -1,12 +1,10 @@
 import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
 import styled from "styled-components";
-import { toast } from "react-toastify";
 import { FileUploader, Textarea } from "@kleros/ui-components-library";
 import LabeledInput from "components/LabeledInput";
 import { responsiveSize } from "styles/responsiveSize";
-import { OPTIONS as toastOptions } from "utils/wrapWithToast";
-import { useAtlasProvider } from "context/AtlasProvider";
-import { Roles } from "utils/atlas";
+import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
+import { Roles, useAtlasProvider } from "@kleros/kleros-app";
 
 const Container = styled.div`
   width: 100%;
@@ -71,14 +69,16 @@ const EvidenceUpload: React.FC<IEvidenceUpload> = ({ setEvidence, setIsEvidenceU
 
   const handleFileUpload = (file: File) => {
     setIsEvidenceUploading(true);
+    infoToast("Uploading to IPFS...");
     uploadFile(file, Roles.Evidence)
       .then(async (fileURI) => {
         if (!fileURI) throw new Error("Error uploading file to IPFS");
         setFileURI(fileURI);
+        successToast("Uploaded successfully!");
       })
       .catch((err) => {
         console.log(err);
-        toast.error(err?.message, toastOptions);
+        errorToast(`Upload failed: ${err?.message}`);
       })
       .finally(() => setIsEvidenceUploading(false));
   };

web/src/components/EnsureAuth.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useCallback } from "react";
 
 import { useAccount } from "wagmi";
 
 import { Button } from "@kleros/ui-components-library";
-
-import { useAtlasProvider } from "context/AtlasProvider";
+import { useAtlasProvider } from "@kleros/kleros-app";
+import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 
 interface IEnsureAuth {
   children: React.ReactElement;
@@ -14,12 +14,22 @@ interface IEnsureAuth {
 const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
   const { address } = useAccount();
   const { isVerified, isSigningIn, authoriseUser } = useAtlasProvider();
+  const handleClick = useCallback(() => {
+    infoToast(`Signing in User...`);
+
+    authoriseUser()
+      .then(() => successToast("Signed In successfully!"))
+      .catch((err) => {
+        console.log(err);
+        errorToast(`Sign-In failed: ${err?.message}`);
+      });
+  }, [authoriseUser]);
   return isVerified ? (
     children
   ) : (
     <Button
       text="Sign In"
-      onClick={authoriseUser}
+      onClick={handleClick}
       disabled={isSigningIn || !address}
       isLoading={isSigningIn}
       {...{ className }}