Merge branch 'dev' into refactor/evidence-refactors

Author: alcercu

kleros-sdk/src/dataMappings/utils/populateTemplate.ts

@@ -4,7 +4,6 @@ import { validate } from "./DisputeDetailsValidator";
 
 export const populateTemplate = (mustacheTemplate: string, data: any): DisputeDetails => {
   const render = mustache.render(mustacheTemplate, data);
-  console.log("MUSTACHE RENDER: ", render);
   const dispute = JSON.parse(render);
 
   // TODO: the validation below is too strict, it should be fixed, disabled for now, FIXME

web/netlify/functions/authUser.ts

@@ -1,10 +1,11 @@
 import middy from "@middy/core";
 import jsonBodyParser from "@middy/http-json-body-parser";
 import { createClient } from "@supabase/supabase-js";
+import { ethers } from "ethers";
 import * as jwt from "jose";
 import { SiweMessage } from "siwe";
 
-import { ETH_SIGNATURE_REGEX, DEFAULT_CHAIN } from "consts/processEnvConsts";
+import { ETH_SIGNATURE_REGEX, DEFAULT_CHAIN, isProductionDeployment } from "consts/processEnvConsts";
 
 import { netlifyUri, netlifyDeployUri, netlifyDeployPrimeUri } from "src/generatedNetlifyInfo.json";
 import { Database } from "src/types/supabase-notification";
@@ -73,9 +74,14 @@ const authUser = async (event) => {
     }
 
     try {
-      await siweMessage.verify({ signature, nonce: nonceData.nonce, time: new Date().toISOString() });
+      // If the main Alchemy API key is permissioned, it won't work in a Netlify Function so we use a dedicated API key
+      const alchemyApiKey = process.env.ALCHEMY_FUNCTIONS_API_KEY ?? process.env.ALCHEMY_API_KEY;
+      const alchemyChain = isProductionDeployment() ? "arb-mainnet" : "arb-sepolia";
+      const alchemyRpcURL = `https://${alchemyChain}.g.alchemy.com/v2/${alchemyApiKey}`;
+      const provider = new ethers.providers.JsonRpcProvider(alchemyRpcURL);
+      await siweMessage.verify({ signature, nonce: nonceData.nonce, time: new Date().toISOString() }, { provider });
     } catch (err) {
-      throw new Error("Invalid signer");
+      throw new Error("Invalid signer: " + JSON.stringify(err));
     }
 
     const { error } = await supabase.from("user-nonce").delete().match({ address: lowerCaseAddress });

web/package.json

@@ -64,6 +64,7 @@
     "@wagmi/cli": "^2.0.3",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^8.10.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "lru-cache": "^7.18.3",
@@ -77,7 +78,7 @@
     "@cyntler/react-doc-viewer": "^1.16.3",
     "@filebase/client": "^0.0.5",
     "@kleros/kleros-sdk": "workspace:^",
-    "@kleros/ui-components-library": "^2.12.0",
+    "@kleros/ui-components-library": "^2.14.0",
     "@lifi/widget": "^2.10.1",
     "@middy/core": "^5.3.2",
     "@middy/http-json-body-parser": "^5.3.2",
@@ -92,6 +93,7 @@
     "amqplib": "^0.10.3",
     "chart.js": "^3.9.1",
     "chartjs-adapter-moment": "^1.0.1",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "core-js": "^3.35.0",
     "ethers": "^5.7.2",
     "graphql": "^16.8.1",

web/src/app.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 
 import { Route } from "react-router-dom";
 
@@ -9,17 +9,18 @@ import IsListProvider from "context/IsListProvider";
 import { NewDisputeProvider } from "context/NewDisputeContext";
 import QueryClientProvider from "context/QueryClientProvider";
 import StyledComponentsProvider from "context/StyledComponentsProvider";
+const Home = lazy(() => import("./pages/Home"));
+const Cases = lazy(() => import("./pages/Cases"));
+const Dashboard = lazy(() => import("./pages/Dashboard"));
+const Courts = lazy(() => import("./pages/Courts"));
+const DisputeTemplateView = lazy(() => import("./pages/DisputeTemplateView"));
+const DisputeResolver = lazy(() => import("./pages/Resolver"));
+const GetPnk = lazy(() => import("./pages/GetPnk"));
 import Web3Provider from "context/Web3Provider";
 
+import Loader from "components/Loader";
 import Layout from "layout/index";
 
-import Cases from "./pages/Cases";
-import Courts from "./pages/Courts";
-import Dashboard from "./pages/Dashboard";
-import DisputeTemplateView from "./pages/DisputeTemplateView";
-import GetPnk from "./pages/GetPnk";
-import Home from "./pages/Home";
-import DisputeResolver from "./pages/Resolver";
 import { SentryRoutes } from "./utils/sentry";
 
 const App: React.FC = () => {
@@ -32,13 +33,62 @@ const App: React.FC = () => {
               <NewDisputeProvider>
                 <SentryRoutes>
                   <Route path="/" element={<Layout />}>
-                    <Route index element={<Home />} />
-                    <Route path="cases/*" element={<Cases />} />
-                    <Route path="courts/*" element={<Courts />} />
-                    <Route path="dashboard/:page/:order/:filter" element={<Dashboard />} />
-                    <Route path="dispute-template" element={<DisputeTemplateView />} />
-                    <Route path="resolver/*" element={<DisputeResolver />} />
-                    <Route path="get-pnk/*" element={<GetPnk />} />
+                    <Route
+                      index
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <Home />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="cases/*"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <Cases />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="courts/*"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <Courts />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="dashboard/:page/:order/:filter"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <Dashboard />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="dispute-template"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <DisputeTemplateView />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="resolver/*"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <DisputeResolver />
+                        </Suspense>
+                      }
+                    />
+                    <Route
+                      path="get-pnk/*"
+                      element={
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                          <GetPnk />
+                        </Suspense>
+                      }
+                    />
                     <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
                   </Route>
                 </SentryRoutes>