Merge branch 'dev' into feat(web)/commit-reveal

Author: jaybuidl

contracts/README.md

@@ -4,7 +4,7 @@ Smart contracts for Kleros v2
 
 ## Deployments
 
-Refresh the list of deployed contracts by running `./scripts/generateDeploymentsMarkdown.sh`.
+Refresh the list of deployed contracts by running `./scripts/generateDeploymentsMarkdown.sh` or `./scripts/populateReadme.sh`.
 
 ### Official Testnet
 
@@ -57,7 +57,7 @@ Refresh the list of deployed contracts by running `./scripts/generateDeployments
 - [DisputeKitClassic: proxy](https://sepolia.arbiscan.io/address/0x9426F127116C3652A262AE1eA48391AC8F44D35b), [implementation](https://sepolia.arbiscan.io/address/0x692CC78F2570181FFB99297965FeAA8352ab12E8)
 - [DisputeResolver](https://sepolia.arbiscan.io/address/0xB8B36CC43f852f9F0484f53Eb38CaBBA28a81bF6)
 - [DisputeTemplateRegistry: proxy](https://sepolia.arbiscan.io/address/0x596D3B09E684D62217682216e9b7a0De75933391), [implementation](https://sepolia.arbiscan.io/address/0xc53b813ed94AaEb6F5518D60bf6a8109954bE3f6)
-- [Escrow](https://sepolia.arbiscan.io/address/0xdaf749DABE7be6C6894950AE69af35c20a00ABd9)
+- [Escrow](https://sepolia.arbiscan.io/address/0x10f7A6f42Af606553883415bc8862643A6e63fdA)
 - [EvidenceModule: proxy](https://sepolia.arbiscan.io/address/0x57fd453FB0d16f8ca174E7386102D7170E17Be09), [implementation](https://sepolia.arbiscan.io/address/0x05AD81f245209b7f91885fd96e57c9da90554824)
 - [KlerosCore: proxy](https://sepolia.arbiscan.io/address/0xA54e7A16d7460e38a8F324eF46782FB520d58CE8), [implementation](https://sepolia.arbiscan.io/address/0x91a373BBdE0532F86410682F362e2Cf685e95085)
 - [PNKFaucet](https://sepolia.arbiscan.io/address/0x7EFE468003Ad6A858b5350CDE0A67bBED58739dD)

contracts/deployments/arbitrumSepoliaDevnet/Escrow.json

@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" >/dev/null 2>&1 && pwd)"
+
+if [ ! -x "$(command -v envsubst)" ]; then
+    echo >&2 "error: envsubst not installed"
+    exit 1
+fi
+
+deployments="$($SCRIPT_DIR/generateDeploymentsMarkdown.sh)" \
+  envsubst '$deployments' \
+  < README.md.template \
+  > README.md

contracts/scripts/populateReadme.sh

@@ -84,14 +84,20 @@ contract Escrow is IArbitrableV2 {
 
     /// @dev Emitted when a transaction is created.
     /// @param _transactionID The index of the transaction.
+    /// @param _transactionUri The IPFS Uri Hash of the transaction.
     /// @param _buyer The address of the buyer.
     /// @param _seller The address of the seller.
     /// @param _amount The initial amount in the transaction.
+    /// @param _asset The asset used ("native" for native chain token).
+    /// @param _deadline The deadline of the transaction.
     event TransactionCreated(
         uint256 indexed _transactionID,
+        string _transactionUri,
         address indexed _buyer,
         address indexed _seller,
-        uint256 _amount
+        uint256 _amount,
+        string _asset,
+        uint256 _deadline
     );
 
     /// @dev To be emitted when a transaction is resolved, either by its
@@ -166,12 +172,14 @@ contract Escrow is IArbitrableV2 {
 
     /// @dev Create a transaction.
     /// @param _timeoutPayment Time after which a party can automatically execute the arbitrable transaction.
+    /// @param _transactionUri The IPFS Uri Hash of the transaction.
     /// @param _seller The recipient of the transaction.
     /// @param _templateData The dispute template data.
     /// @param _templateDataMappings The dispute template data mappings.
     /// @return transactionID The index of the transaction.
     function createTransaction(
         uint256 _timeoutPayment,
+        string memory _transactionUri,
         address payable _seller,
         string memory _templateData,
         string memory _templateDataMappings
@@ -186,7 +194,15 @@ contract Escrow is IArbitrableV2 {
 
         transactionID = transactions.length - 1;
 
-        emit TransactionCreated(transactionID, msg.sender, _seller, msg.value);
+        emit TransactionCreated(
+            transactionID,
+            _transactionUri,
+            msg.sender,
+            _seller,
+            msg.value,
+            "native",
+            transaction.deadline
+        );
     }
 
     /// @dev Pay seller. To be called if the good or service is provided.

contracts/src/arbitration/arbitrables/Escrow.sol

@@ -14,6 +14,8 @@ import Cases from "./pages/Cases";
 import Dashboard from "./pages/Dashboard";
 import Courts from "./pages/Courts";
 import DisputeTemplateView from "./pages/DisputeTemplateView";
+import DisputeResolver from "./pages/Resolver";
+import { NewDisputeProvider } from "./context/NewDisputeContext";
 
 const App: React.FC = () => {
   return (
@@ -22,16 +24,19 @@ const App: React.FC = () => {
         <RefetchOnBlock />
         <Web3Provider>
           <IsListProvider>
-            <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="disputeTemplate" element={<DisputeTemplateView />} />
-                <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
-              </Route>
-            </SentryRoutes>
+            <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="disputeTemplate" element={<DisputeTemplateView />} />
+                  <Route path="resolver/*" element={<DisputeResolver />} />
+                  <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
+                </Route>
+              </SentryRoutes>
+            </NewDisputeProvider>
           </IsListProvider>
         </Web3Provider>
       </QueryClientProvider>

web/src/app.tsx

@@ -4,6 +4,7 @@ import { landscapeStyle } from "styles/landscapeStyle";
 import { useAccount, useNetwork, useEnsAvatar, useEnsName } from "wagmi";
 import Identicon from "react-identicons";
 import { shortenAddress } from "utils/shortenAddress";
+import { isAddress } from "viem";
 
 const Container = styled.div`
   display: flex;
@@ -134,7 +135,7 @@ export const AddressOrName: React.FC<IAddressOrName> = ({ address: propAddress }
     chainId: 1,
   });
 
-  return <label>{data ?? (address && shortenAddress(address))}</label>;
+  return <label>{data ?? (isAddress(address) ? shortenAddress(address) : address)}</label>;
 };
 
 export const ChainDisplay: React.FC = () => {

web/src/assets/svgs/icons/dispute.svg

@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+import { AddressOrName, IdenticonOrAvatar } from "../ConnectWallet/AccountDisplay";
+import { Alias } from "context/NewDisputeContext";
+import { isUndefined } from "utils/index";
+import { useEnsAddress } from "wagmi";
+import { isAddress } from "viem";
+import Skeleton from "react-loading-skeleton";
+
+const AliasContainer = styled.div`
+  min-height: 32px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+
+const TextContainer = styled.div`
+  display: flex;
+  > label {
+    color: ${({ theme }) => theme.primaryText};
+    font-size: 14px;
+  }
+`;
+
+interface IAlias {
+  alias: Alias;
+}
+
+const AliasDisplay: React.FC<IAlias> = ({ alias }) => {
+  const { data: addressFromENS, isLoading } = useEnsAddress({
+    enabled: !isAddress(alias.address), // if alias.address is not an Address, we treat it as ENS and try to fetch address from there
+    name: alias.address,
+    chainId: 1,
+  });
+
+  // try fetching ens name, else go with address
+  const address = addressFromENS ?? alias.address;
+
+  return (
+    <AliasContainer>
+      {isLoading ? <Skeleton width={30} height={24} /> : <IdenticonOrAvatar address={address} size="24" />}
+      <TextContainer>
+        {isLoading ? <Skeleton width={30} height={24} /> : <AddressOrName address={address} />}&nbsp;
+        {!isUndefined(alias.name) && alias.name !== "" ? <label>({alias.name})</label> : null}
+      </TextContainer>
+    </AliasContainer>
+  );
+};
+
+export default AliasDisplay;

web/src/assets/svgs/icons/ellipse.svg

@@ -3,6 +3,9 @@ import ReactMarkdown from "components/ReactMarkdown";
 import styled from "styled-components";
 import { StyledSkeleton } from "components/StyledSkeleton";
 import { isUndefined } from "utils/index";
+import { Answer as IAnswer, IDisputeTemplate } from "context/NewDisputeContext";
+import AliasDisplay from "./Alias";
+import { responsiveSize } from "styles/responsiveSize";
 
 const StyledH1 = styled.h1`
   margin: 0;
@@ -11,6 +14,10 @@ const StyledH1 = styled.h1`
 const QuestionAndDescription = styled.div`
   display: flex;
   flex-direction: column;
+  div:first-child p:first-of-type {
+    font-size: 16px;
+    font-weight: 600;
+  }
 `;
 
 const StyledReactMarkDown = styled(ReactMarkdown)`
@@ -31,32 +38,24 @@ const AnswersContainer = styled.div`
 const Answer = styled.div`
   margin: 0px;
   display: flex;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: ${responsiveSize(2, 8)};
 `;
 
-interface IAnswer {
-  id?: string;
-  title: string;
-  description?: string;
-  reserved?: boolean;
-}
-
-interface IDisputeTemplate {
-  answers: IAnswer[];
-  arbitrableAddress: string;
-  arbitrableChainID: string;
-  arbitratorAddress: string;
-  arbitratorChainID: string;
-  category?: string;
-  description: string;
-  frontendUrl?: string;
-  lang?: string;
-  policyURI?: string;
-  question: string;
-  specification?: string;
-  title: string;
-}
+const AliasesContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${responsiveSize(8, 20)};
+`;
 
+const Divider = styled.hr`
+  width: 100%;
+  display: flex;
+  border: none;
+  height: 1px;
+  background-color: ${({ theme }) => theme.stroke};
+  margin: 0;
+`;
 interface IDisputeContext {
   disputeTemplate: IDisputeTemplate;
 }
@@ -86,13 +85,27 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeTemplate }) =
         {isUndefined(disputeTemplate) ? null : <h3>Voting Options</h3>}
         <AnswersContainer>
           {disputeTemplate?.answers?.map((answer: IAnswer, i: number) => (
-            <Answer key={i}>
+            <Answer key={answer.title}>
               <small>Option {i + 1}:</small>
-              <label>{answer.title}</label>
+              <label>
+                {answer.title}
+                {answer.description ? ` - ${answer.description}` : null}
+              </label>
             </Answer>
           ))}
         </AnswersContainer>
       </VotingOptions>
+
+      {isUndefined(disputeTemplate?.aliases) ? null : (
+        <>
+          <Divider />
+          <AliasesContainer>
+            {disputeTemplate.aliases.map((alias) => (
+              <AliasDisplay alias={alias} key={alias.address} />
+            ))}
+          </AliasesContainer>
+        </>
+      )}
     </>
   );
 };

web/src/assets/svgs/icons/minus.svg

@@ -0,0 +1,36 @@
+import { Field, FieldProps } from "@kleros/ui-components-library";
+import React from "react";
+import styled from "styled-components";
+import { isUndefined } from "utils/index";
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+const StyledField = styled(Field)`
+  width: 100%;
+  > small {
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+`;
+
+const StyledLabel = styled.label`
+  width: 100%;
+  margin-bottom: 12px;
+`;
+
+interface ILabeledInput extends FieldProps {
+  label?: string;
+}
+const LabeledInput: React.FC<ILabeledInput> = (props) => {
+  return (
+    <Container>
+      {!isUndefined(props.label) ? <StyledLabel id={props.label}>{props.label}</StyledLabel> : null}
+      <StyledField {...props} id={props?.label} />
+    </Container>
+  );
+};
+
+export default LabeledInput;