Deploy to Production

contracts/src/EscrowUniversal.sol

@@ -10,6 +10,7 @@ pragma solidity 0.8.24;
 import {IArbitrableV2, IArbitratorV2} from "@kleros/kleros-v2-contracts/arbitration/interfaces/IArbitrableV2.sol";
 import "@kleros/kleros-v2-contracts/arbitration/interfaces/IDisputeTemplateRegistry.sol";
 import {SafeERC20, IERC20} from "./libraries/SafeERC20.sol";
+import {NATIVE, Status, Party, Transaction, Resolution} from "./interfaces/Types.sol";
 import "./interfaces/IEscrow.sol";
 
 /// @title EscrowUniversal for a sale paid in native currency or ERC20 tokens without platform fees.
@@ -36,7 +37,7 @@ contract EscrowUniversal is IEscrow, IArbitrableV2 {
     uint256 public feeTimeout; // Time in seconds a party can take to pay arbitration fees before being considered unresponsive and lose the dispute.
     uint256 public settlementTimeout; // Time in seconds a party can take to accept or propose a settlement before being considered unresponsive.
     Transaction[] public transactions; // List of all created transactions.
-    mapping(uint256 => uint256) public disputeIDtoTransactionID; // Naps dispute ID to tx ID.
+    mapping(uint256 => uint256) public disputeIDtoTransactionID; // Maps dispute ID to tx ID.
     mapping(IERC20 => uint256) public amountCaps; // Caps the amount of the respective token for the Escrow transaction.
 
     // ************************************* //

contracts/src/EscrowView.sol

@@ -4,7 +4,8 @@ pragma solidity 0.8.24;
 
 import {Strings} from "@openzeppelin/contracts/utils/Strings.sol";
 import {IERC20Metadata} from "@openzeppelin/contracts/token/ERC20/extensions/IERC20Metadata.sol";
-import {EscrowUniversal, Transaction, NATIVE, Party, Status, IERC20} from "./EscrowUniversal.sol";
+import {EscrowUniversal} from "./EscrowUniversal.sol";
+import {Transaction, NATIVE, Party, Status, IERC20} from "./interfaces/Types.sol";
 
 /// @title EscrowView
 /// @notice A view contract for EscrowUniversal to facilitate the display of ruling options.

contracts/src/interfaces/IEscrow.sol

@@ -2,7 +2,7 @@
 
 pragma solidity 0.8.24;
 
-import "./Types.sol";
+import {IERC20, Party, Status, Resolution, Transaction} from "./Types.sol";
 
 interface IEscrow {
     // ************************************* //
@@ -76,7 +76,7 @@ interface IEscrow {
     /// @dev Create a transaction.
     /// @param _deadline Time after which a party can automatically execute the arbitrable transaction.
     /// @param _transactionUri The IPFS Uri Hash of the transaction.
-    /// @param _buyer Party that pays for the transaction. Note that msg.sender can provide finds on their behalf.
+    /// @param _buyer Party that pays for the transaction. Note that msg.sender can provide funds on their behalf.
     /// @param _seller The recipient of the transaction.
     /// @return transactionID The index of the transaction.
     function createNativeTransaction(
@@ -91,7 +91,7 @@ interface IEscrow {
     /// @param _token The ERC20 token contract.
     /// @param _deadline Time after which a party can automatically execute the arbitrable transaction.
     /// @param _transactionUri The IPFS Uri Hash of the transaction.
-    /// @param _buyer Party that pays for the transaction. Note that msg.sender can provide finds on their behalf.
+    /// @param _buyer Party that pays for the transaction. Note that msg.sender can provide funds on their behalf.
     /// @param _seller The recipient of the transaction.
     /// @return transactionID The index of the transaction.
     function createERC20Transaction(
@@ -157,6 +157,43 @@ interface IEscrow {
     /// @return The count of transactions.
     function getTransactionCount() external view returns (uint256);
 
+    /// @dev Getter for transaction details.
+    /// @param _transactionID The index of the transaction.
+    /// @return buyer The buyer address.
+    /// @return seller The seller address.
+    /// @return amount The escrowed amount.
+    /// @return settlementBuyer Settlement amount proposed by the buyer.
+    /// @return settlementSeller Settlement amount proposed by the seller.
+    /// @return deadline The deadline timestamp.
+    /// @return disputeID The dispute ID if any.
+    /// @return buyerFee Total fees paid by the buyer.
+    /// @return sellerFee Total fees paid by the seller.
+    /// @return lastFeePaymentTime Timestamp of last fee payment or settlement proposal.
+    /// @return status Current status.
+    /// @return token Payment token (zero address for native).
+    function transactions(uint256 _transactionID)
+        external
+        view
+        returns (
+            address payable buyer,
+            address payable seller,
+            uint256 amount,
+            uint256 settlementBuyer,
+            uint256 settlementSeller,
+            uint256 deadline,
+            uint256 disputeID,
+            uint256 buyerFee,
+            uint256 sellerFee,
+            uint256 lastFeePaymentTime,
+            Status status,
+            IERC20 token
+        );
+
+    /// @dev Getter to map a dispute ID to its transaction ID.
+    /// @param _disputeID The dispute identifier from the arbitrator.
+    /// @return The corresponding transaction ID.
+    function disputeIDtoTransactionID(uint256 _disputeID) external view returns (uint256);
+
     // ************************************* //
     // *              Errors               * //
     // ************************************* //

subgraph/mappings/escrow.ts

@@ -19,6 +19,7 @@ import {
   DisputeRequest as DisputeRequestEvent,
   ParameterUpdated as ParameterUpdatedEvent,
   SettlementProposed as SettlementProposedEvent,
+  EscrowUniversal,
 } from "../generated/EscrowUniversal/EscrowUniversal";
 import { ZERO, ONE } from "./utils";
 
@@ -240,10 +241,13 @@ export function handleTransactionResolved(event: TransactionResolvedEvent): void
 }
 
 export function handleDisputeRequest(event: DisputeRequestEvent): void {
-  let transactionID = event.params._externalDisputeID.toString();
-  let disputeID = event.params._arbitratorDisputeID.toString();
+  let disputeID = event.params._arbitratorDisputeID;
 
-  let disputeRequest = new DisputeRequest(disputeID);
+  // Get the transactionID by calling the contract
+  let contract = EscrowUniversal.bind(event.address);
+  let transactionID = contract.disputeIDtoTransactionID(disputeID).toString();
+
+  let disputeRequest = new DisputeRequest(disputeID.toString());
 
   let escrow = Escrow.load(transactionID);
   if (!escrow) {

subgraph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kleros/escrow-v2-subgraph",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "license": "MIT",
   "scripts": {
     "update:arbitrum-sepolia-devnet": "./scripts/update.sh arbitrumSepoliaDevnet arbitrum-sepolia",

web/global.d.ts

@@ -1,6 +1,3 @@
-import {} from "styled-components";
-import { lightTheme } from "./src/styles/themes";
-
 declare global {
   module "*.svg" {
     const content: React.FC<React.SVGAttributes<SVGElement>>;
@@ -12,8 +9,4 @@ declare global {
   }
 }
 
-declare module "styled-components" {
-  type Theme = typeof lightTheme;
-  //eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface DefaultTheme extends Theme {}
-}
+export {};

web/package.json

@@ -51,7 +51,6 @@
     "@types/react": "^18.2.59",
     "@types/react-dom": "^18.2.18",
     "@types/react-modal": "^3.16.3",
-    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@typescript-eslint/utils": "^5.62.0",
@@ -62,24 +61,27 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "lru-cache": "^7.18.3",
     "typescript": "^5.7.3",
-    "vite": "^5.4.2",
+    "vite": "^5.4.21",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "dependencies": {
     "@cyntler/react-doc-viewer": "^1.16.3",
     "@kleros/kleros-app": "^2.1.0",
-    "@kleros/ui-components-library": "^2.19.0",
+    "@kleros/ui-components-library": "^3.6.0",
+    "@mdxeditor/editor": "^3.45.0",
     "@reown/appkit": "^1.6.6",
     "@reown/appkit-adapter-wagmi": "^1.6.6",
     "@sentry/react": "^7.93.0",
     "@sentry/tracing": "^7.93.0",
+    "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-query": "^5.66.0",
     "@yornaath/batshit": "^0.9.0",
     "alchemy-sdk": "^3.3.1",
     "chart.js": "^3.9.1",
     "chartjs-adapter-moment": "^1.0.1",
+    "clsx": "^2.1.1",
     "core-js": "^3.35.0",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
@@ -99,8 +101,12 @@
     "react-scripts": "^5.0.1",
     "react-toastify": "^9.1.3",
     "react-use": "^17.4.3",
-    "styled-components": "^5.3.11",
+    "rehype-raw": "^6.1.1",
+    "rehype-sanitize": "^5.0.1",
+    "remark-gfm": "^3.0.1",
     "subgraph-status": "^1.2.4",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17",
     "viem": "^2.27.2",
     "wagmi": "^2.14.16"
   }

web/src/app.tsx

@@ -3,10 +3,12 @@ import { Navigate, Route } from "react-router-dom";
 import { SentryRoutes } from "./utils/sentry";
 import "react-loading-skeleton/dist/skeleton.css";
 import "react-toastify/dist/ReactToastify.css";
+import "overlayscrollbars/styles/overlayscrollbars.css";
+import "./global.css";
 import Web3Provider from "context/Web3Provider";
 import IsListProvider from "context/IsListProvider";
 import QueryClientProvider from "context/QueryClientProvider";
-import StyledComponentsProvider from "context/StyledComponentsProvider";
+import ThemeProvider from "context/ThemeProvider";
 import GraphqlBatcherProvider from "context/GraphqlBatcher";
 import Layout from "layout/index";
 import NewTransaction from "./pages/NewTransaction";
@@ -18,7 +20,7 @@ import Settings from "./pages/Settings";
 
 const App: React.FC = () => {
   return (
-    <StyledComponentsProvider>
+    <ThemeProvider>
       <Web3Provider>
         <QueryClientProvider>
           <AtlasProvider>
@@ -41,7 +43,7 @@ const App: React.FC = () => {
           </AtlasProvider>
         </QueryClientProvider>
       </Web3Provider>
-    </StyledComponentsProvider>
+    </ThemeProvider>
   );
 };