Merge branch 'dev' into fix(web)/write-functions-to-viem

Author: alcercu

.github/workflows/contracts-testing.yml

@@ -29,6 +29,7 @@ jobs:
           nodejs.org:443
           objects.githubusercontent.com:443
           registry.yarnpkg.com:443
+          registry.npmjs.org:443
 
     - name: Setup Node.js environment
       uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c

package.json

@@ -55,7 +55,8 @@
     "nanoid^3.3.1": "^3.3.4",
     "node-fetch": "^2.6.7",
     "underscore@npm^3.0.4": "^1.12.1",
-    "eth-sig-util@npm:^1.4.2": "3.0.0"
+    "eth-sig-util@npm:^1.4.2": "3.0.0",
+    "fast-xml-parser": "^4.2.5"
   },
   "scripts": {
     "check-prerequisites": "scripts/check-prerequisites.sh",

web/netlify.toml

@@ -9,3 +9,6 @@ YARN_ENABLE_GLOBAL_CACHE = "true"
 
 [functions]
 directory = "web/netlify/functions/"
+
+[dev]
+framework = "parcel"

web/netlify/functions/uploadToIPFS.ts

@@ -1,31 +1,109 @@
 import { Handler } from "@netlify/functions";
-import fetch from "node-fetch";
-
-const ESTUARI_API_KEY = process.env["ESTUARY_API_KEY"];
-const ESTUARI_URL = process.env["ESTUARY_GATEWAY"];
-
-export const handler: Handler = async (event, context) => {
-  context.callbackWaitsForEmptyEventLoop = false;
-  if (event.body) {
-    const newHeaders = event.headers;
-    delete newHeaders.host;
-    const response = await fetch(ESTUARI_URL, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${ESTUARI_API_KEY}`,
-        ...newHeaders,
-      },
-      body: Buffer.from(event.body, "base64"),
-    });
-
-    const parsedResponse = await response.json();
+import { File, FilebaseClient } from "@filebase/client";
+import amqp, { Connection } from "amqplib";
+import busboy from "busboy";
+
+const { FILEBASE_TOKEN, RABBITMQ_URL, FILEBASE_API_WRAPPER } = process.env;
+const filebase = new FilebaseClient({ token: FILEBASE_TOKEN ?? "" });
+
+type FormElement =
+  | { isFile: true; filename: string; mimeType: string; content: Buffer }
+  | { isFile: false; content: string };
+type FormData = { [key: string]: FormElement };
+
+const emitRabbitMQLog = async (cid: string, operation: string) => {
+  let connection: Connection | undefined;
+  try {
+    connection = await amqp.connect(RABBITMQ_URL ?? "");
+    const channel = await connection.createChannel();
+
+    await channel.assertExchange("ipfs", "topic");
+    channel.publish("ipfs", operation, Buffer.from(cid));
+
+    //eslint-disable-next-line no-console
+    console.log(`Sent IPFS CID '${cid}' to exchange 'ipfs'`);
+  } catch (err) {
+    console.warn(err);
+  } finally {
+    if (typeof connection !== "undefined") await connection.close();
+  }
+};
+
+const parseMultipart = ({ headers, body, isBase64Encoded }) =>
+  new Promise<FormData>((resolve, reject) => {
+    const fields: FormData = {};
+
+    const bb = busboy({ headers });
+
+    bb.on("file", (name, file, { filename, mimeType }) =>
+      file.on("data", (content) => {
+        fields[name] = { isFile: true, filename, mimeType, content };
+      })
+    )
+      .on("field", (name, value) => {
+        if (value) fields[name] = { isFile: false, content: value };
+      })
+      .on("close", () => resolve(fields))
+      .on("error", (err) => reject(err));
+
+    bb.write(body, isBase64Encoded ? "base64" : "binary");
+    bb.end();
+  });
+
+const pinToFilebase = async (data: FormData, dapp: string, operation: string): Promise<Array<string>> => {
+  const cids = new Array<string>();
+  for (const [_, dataElement] of Object.entries(data)) {
+    if (dataElement.isFile) {
+      const { filename, mimeType, content } = dataElement;
+      const path = `${filename}`;
+      const cid = await filebase.storeDirectory([new File([content], path, { type: mimeType })]);
+      await emitRabbitMQLog(cid, operation);
+      cids.push(cid);
+    }
+  }
+
+  return cids;
+};
+
+export const handler: Handler = async (event) => {
+  const { queryStringParameters } = event;
+
+  if (
+    !queryStringParameters ||
+    !queryStringParameters.dapp ||
+    !queryStringParameters.key ||
+    !queryStringParameters.operation
+  ) {
+    return {
+      statusCode: 400,
+      body: JSON.stringify({ message: "Invalid query parameters" }),
+    };
+  }
+
+  const { dapp, key, operation } = queryStringParameters;
+
+  if (key !== FILEBASE_API_WRAPPER) {
+    return {
+      statusCode: 403,
+      body: JSON.stringify({ message: "Invalid API key" }),
+    };
+  }
+
+  try {
+    const parsed = await parseMultipart(event);
+    const cids = await pinToFilebase(parsed, dapp, operation);
+
+    return {
+      statusCode: 200,
+      body: JSON.stringify({
+        message: "File has been stored successfully",
+        cids,
+      }),
+    };
+  } catch (err: any) {
     return {
-      statusCode: response.status,
-      body: JSON.stringify(parsedResponse),
+      statusCode: 500,
+      body: JSON.stringify({ message: err.message }),
     };
   }
-  return {
-    statusCode: 500,
-    body: JSON.stringify({ message: "Invalid body format" }),
-  };
 };

web/package.json

@@ -43,6 +43,8 @@
     "@netlify/functions": "^1.6.0",
     "@parcel/transformer-svg-react": "~2.8.0",
     "@parcel/watcher": "~2.1.0",
+    "@types/amqplib": "^0.10.1",
+    "@types/busboy": "^1.5.0",
     "@types/react": "^18.2.12",
     "@types/react-dom": "^18.2.5",
     "@types/styled-components": "^5.1.26",
@@ -59,13 +61,15 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
+    "@filebase/client": "^0.0.4",
     "@kleros/kleros-v2-contracts": "workspace:^",
     "@kleros/ui-components-library": "^2.5.2",
     "@sentry/react": "^7.55.2",
     "@sentry/tracing": "^7.55.2",
     "@types/react-modal": "^3.16.0",
     "@web3modal/ethereum": "^2.2.2",
     "@web3modal/react": "^2.2.2",
+    "amqplib": "^0.10.3",
     "chart.js": "^3.9.1",
     "chartjs-adapter-moment": "^1.0.1",
     "core-js": "^3.31.0",

web/src/hooks/useCoinPrice.tsx

@@ -0,0 +1,20 @@
+import useSWR from "swr";
+
+const fetchCoinPrice = async (...coinIds) => {
+  const fetchData = async (coinId) => {
+    const response = await fetch(`https://api.coingecko.com/api/v3/coins/${coinId}`);
+    const data = await response.json();
+    return data.market_data.current_price.usd;
+  };
+
+  const prices = await Promise.all(coinIds.map(fetchData));
+  return prices;
+};
+
+export const useCoinPrice = (coinIds: string[]) => {
+  const { data: prices, error } = useSWR<number[]>(coinIds, fetchCoinPrice);
+  return {
+    prices,
+    error,
+  };
+};

web/src/layout/Header/navbar/index.tsx

@@ -35,7 +35,6 @@ const Container = styled.div<{ isOpen: boolean }>`
 
 const NavBar: React.FC = () => {
   const [isSolutionsOpen, toggleSolution] = useToggle(false);
-
   const { isOpen } = useOpenContext();
   useLockBodyScroll(isOpen);
 

web/src/pages/Courts/CourtDetails/Stats.tsx

@@ -3,15 +3,16 @@ import styled from "styled-components";
 import { formatUnits, formatEther } from "viem";
 import { useParams } from "react-router-dom";
 import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";
+import { useCoinPrice } from "hooks/useCoinPrice";
 import StatDisplay, { IStatDisplay } from "components/StatDisplay";
-import JurorIcon from "svgs/icons/user.svg";
 import BalanceIcon from "svgs/icons/law-balance.svg";
 import MinStake from "svgs/icons/min-stake.svg";
 import { commify } from "utils/commify";
 import VoteStake from "svgs/icons/vote-stake.svg";
 import PNKIcon from "svgs/icons/pnk.svg";
 import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg";
 import EthereumIcon from "svgs/icons/ethereum.svg";
+import { isUndefined } from "~src/utils";
 
 const StyledCard = styled.div`
   width: auto;
@@ -25,24 +26,29 @@ const StyledCard = styled.div`
 
 interface IStat {
   title: string;
+  coinId?: number;
   getText: (data: CourtDetailsQuery["court"]) => string;
-  getSubtext: (data: CourtDetailsQuery["court"]) => string;
+  getSubtext: (data: CourtDetailsQuery["court"], coinPrice?: number) => string;
   color: IStatDisplay["color"];
   icon: React.FC<React.SVGAttributes<SVGElement>>;
 }
 
 const stats: IStat[] = [
   {
     title: "Min Stake",
+    coinId: 0,
     getText: (data) => commify(formatUnits(data?.minStake, 18)),
-    getSubtext: (data) => (parseInt(formatUnits(data?.minStake, 18)) * 0.029).toFixed(2).toString() + "$",
+    getSubtext: (data, coinPrice) =>
+      (parseInt(formatUnits(data?.minStake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "purple",
     icon: MinStake,
   },
   {
     title: "Vote Stake",
+    coinId: 0,
     getText: (data) => commify(formatUnits(data?.minStake, 18)),
-    getSubtext: (data) => (parseInt(formatUnits(data?.minStake, 18)) * 0.029).toFixed(2).toString() + "$",
+    getSubtext: (data, coinPrice) =>
+      (parseInt(formatUnits(data?.minStake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "purple",
     icon: VoteStake,
   },
@@ -55,8 +61,10 @@ const stats: IStat[] = [
   },
   {
     title: "PNK Staked",
+    coinId: 0,
     getText: (data) => commify(formatUnits(data?.stake, 18)),
-    getSubtext: (data) => (parseInt(formatUnits(data?.stake, 18)) * 0.029).toFixed(2).toString() + "$",
+    getSubtext: (data, coinPrice) =>
+      (parseInt(formatUnits(data?.stake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "purple",
     icon: PNKIcon,
   },
@@ -76,15 +84,19 @@ const stats: IStat[] = [
   },
   {
     title: "ETH paid to Jurors",
-    getText: (data) => commify(formatEther(data?.paidETH)),
-    getSubtext: (data) => (parseInt(formatUnits(data?.paidETH, 18)) * 1600).toFixed(2).toString() + "$",
+    coinId: 1,
+    getText: (data) => commify(formatEther(BigInt(data?.paidETH))),
+    getSubtext: (data, coinPrice) =>
+      (Number(formatUnits(data?.paidETH, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "blue",
     icon: EthereumIcon,
   },
   {
     title: "PNK redistributed",
+    coinId: 0,
     getText: (data) => commify(formatUnits(data?.paidPNK, 18)),
-    getSubtext: (data) => (parseInt(formatUnits(data?.paidPNK, 18)) * 0.029).toFixed(2).toString() + "$",
+    getSubtext: (data, coinPrice) =>
+      (parseInt(formatUnits(data?.paidPNK, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "purple",
     icon: PNKRedistributedIcon,
   },
@@ -93,16 +105,20 @@ const stats: IStat[] = [
 const Stats = () => {
   const { id } = useParams();
   const { data } = useCourtDetails(id);
+  const { prices } = useCoinPrice(["kleros", "ethereum"]);
   return (
     <StyledCard>
-      {stats.map(({ title, getText, getSubtext, color, icon }, i) => (
-        <StatDisplay
-          key={i}
-          {...{ title, color, icon }}
-          text={data ? getText(data.court) : "Fetching..."}
-          subtext={data ? getSubtext(data.court) : "Fetching..."}
-        />
-      ))}
+      {stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {
+        const coinPrice = prices && !isUndefined(coinId) ? prices[coinId] : undefined;
+        return (
+          <StatDisplay
+            key={i}
+            {...{ title, color, icon }}
+            text={data ? getText(data.court) : "Fetching..."}
+            subtext={data ? getSubtext(data.court, coinPrice) : "Fetching..."}
+          />
+        );
+      })}
     </StyledCard>
   );
 };