From b7d1d04a07a6a5e7df9a6480662b48a09985c1e1 Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Sun, 24 Aug 2025 17:55:32 +0100
Subject: [PATCH 01/20] feat: add a smart contract wallet warning to layout

---
 src/assets/close.svg                          | 10 +++
 .../Warnings/SmartContractWalletWarning.tsx   | 63 +++++++++++++++++++
 src/layout/Layout.tsx                         |  2 +
 3 files changed, 75 insertions(+)
 create mode 100644 src/assets/close.svg
 create mode 100644 src/components/Warnings/SmartContractWalletWarning.tsx

diff --git a/src/assets/close.svg b/src/assets/close.svg
new file mode 100644
index 0000000..78cbdbb
--- /dev/null
+++ b/src/assets/close.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7754_14731)">
+<path d="M9.0505 8L15.4922 0.321472C15.6002 0.193865 15.5094 0 15.3425 0H13.3842C13.2689 0 13.1585 0.0515337 13.0824 0.139877L7.76952 6.47362L2.45664 0.139877C2.38302 0.0515337 2.27259 0 2.1548 0H0.196516C0.0296446 0 -0.0611531 0.193865 0.0468223 0.321472L6.48854 8L0.0468223 15.6785C0.0226348 15.707 0.00711763 15.7418 0.0021124 15.7788C-0.00289284 15.8158 0.00282412 15.8534 0.0185851 15.8873C0.0343462 15.9211 0.0594892 15.9497 0.0910286 15.9697C0.122568 15.9897 0.159179 16.0002 0.196516 16H2.1548C2.27013 16 2.38056 15.9485 2.45664 15.8601L7.76952 9.52638L13.0824 15.8601C13.156 15.9485 13.2665 16 13.3842 16H15.3425C15.5094 16 15.6002 15.8061 15.4922 15.6785L9.0505 8Z" fill="#333333"/>
+</g>
+<defs>
+<clipPath id="clip0_7754_14731">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/Warnings/SmartContractWalletWarning.tsx b/src/components/Warnings/SmartContractWalletWarning.tsx
new file mode 100644
index 0000000..947556a
--- /dev/null
+++ b/src/components/Warnings/SmartContractWalletWarning.tsx
@@ -0,0 +1,63 @@
+import { AlertMessage } from "@kleros/ui-components-library";
+import { IconButton } from "components/Common/Buttons/IconButton";
+import { useLocalStorage } from "hooks/useLocalStorage";
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+import { getCode } from "viem/actions";
+import { useAccount, useClient } from "wagmi";
+import CloseIcon from "assets/close.svg?react";
+
+const Container = styled.div`
+  display: flex;
+`;
+
+const StyledAlertMessage = styled(AlertMessage)`
+  flex: 1;
+`;
+
+const StyledIconButton = styled(IconButton)`
+  position: absolute;
+  right: 0;
+`;
+
+export default function SmartContractWalletWarning() {
+  const client = useClient();
+  const { address } = useAccount();
+  const [isSmartContractWallet, setIsSmartContractWallet] =
+    useState<boolean>(false);
+  const [showWarning, setShowWarning] = useLocalStorage<boolean>(
+    "@kleros/escrow-v1/alert/smart-contract-wallet-warning",
+    true
+  );
+
+  useEffect(() => {
+    if (address && client) {
+      getCode(client, {
+        address: address,
+      }).then((code) => {
+        setIsSmartContractWallet(!!code);
+      });
+    }
+  }, [address, client]);
+
+  if (!showWarning || !isSmartContractWallet) {
+    return null;
+  }
+
+  return (
+    <Container>
+      <StyledAlertMessage
+        title="Warning"
+        msg="You are using a smart contract wallet. This is not recommended."
+        variant="warning"
+      />
+
+      <StyledIconButton
+        small
+        icon={<CloseIcon />}
+        text=""
+        onClick={() => setShowWarning(false)}
+      />
+    </Container>
+  );
+}
diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx
index c695910..ae978dc 100644
--- a/src/layout/Layout.tsx
+++ b/src/layout/Layout.tsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import Header from "components/Header/Header";
 import Footer from "components/Footer/Footer";
+import SmartContractWalletWarning from "components/Warnings/SmartContractWalletWarning";
 import { Outlet } from "react-router";
 
 const Container = styled.div`
@@ -13,6 +14,7 @@ const Container = styled.div`
 export default function Layout() {
   return (
     <Container>
+      <SmartContractWalletWarning />
       <Header />
       <Outlet />
       <Footer />

From 6a0aa99676130244b02bbe7113c583dd9f328100 Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Mon, 25 Aug 2025 19:08:26 +0100
Subject: [PATCH 02/20] feat: customize alert to match styling but also include
 link to documentation

---
 src/assets/warning-circle-outline.svg         | 10 +++
 .../Warnings/SmartContractWalletWarning.tsx   | 65 +++++++++++++++++--
 2 files changed, 68 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/warning-circle-outline.svg

diff --git a/src/assets/warning-circle-outline.svg b/src/assets/warning-circle-outline.svg
new file mode 100644
index 0000000..8aad069
--- /dev/null
+++ b/src/assets/warning-circle-outline.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7742_1082)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 8C0 3.58214 3.58214 0 8 0C12.4179 0 16 3.58214 16 8C16 12.4179 12.4179 16 8 16C3.58214 16 0 12.4179 0 8ZM1.35714 8C1.35714 11.6679 4.33214 14.6429 8 14.6429C11.6679 14.6429 14.6429 11.6679 14.6429 8C14.6429 4.33214 11.6679 1.35714 8 1.35714C4.33214 1.35714 1.35714 4.33214 1.35714 8ZM7.39363 11.7489C7.23288 11.5882 7.14258 11.3702 7.14258 11.1429C7.14258 10.9155 7.23288 10.6975 7.39363 10.5368C7.55437 10.376 7.77239 10.2857 7.99972 10.2857C8.22705 10.2857 8.44507 10.376 8.60581 10.5368C8.76656 10.6975 8.85686 10.9155 8.85686 11.1429C8.85686 11.3702 8.76656 11.5882 8.60581 11.7489C8.44507 11.9097 8.22705 12 7.99972 12C7.77239 12 7.55437 11.9097 7.39363 11.7489ZM8.42829 9.14286H7.57115C7.49258 9.14286 7.42829 9.07857 7.42829 9V4.14286C7.42829 4.06429 7.49258 4 7.57115 4H8.42829C8.50686 4 8.57115 4.06429 8.57115 4.14286V9C8.57115 9.07857 8.50686 9.14286 8.42829 9.14286Z" fill="#FF9900"/>
+</g>
+<defs>
+<clipPath id="clip0_7742_1082">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/Warnings/SmartContractWalletWarning.tsx b/src/components/Warnings/SmartContractWalletWarning.tsx
index 947556a..1eefdad 100644
--- a/src/components/Warnings/SmartContractWalletWarning.tsx
+++ b/src/components/Warnings/SmartContractWalletWarning.tsx
@@ -1,4 +1,3 @@
-import { AlertMessage } from "@kleros/ui-components-library";
 import { IconButton } from "components/Common/Buttons/IconButton";
 import { useLocalStorage } from "hooks/useLocalStorage";
 import { useEffect, useState } from "react";
@@ -6,13 +5,53 @@ import styled from "styled-components";
 import { getCode } from "viem/actions";
 import { useAccount, useClient } from "wagmi";
 import CloseIcon from "assets/close.svg?react";
+import WarningCircleOutline from "assets/warning-circle-outline.svg?react";
 
 const Container = styled.div`
   display: flex;
 `;
 
-const StyledAlertMessage = styled(AlertMessage)`
+//This mimics the AlertMessage component from the Kleros UI Components Library.
+//If that component is updated to allow for the warning message to be an element instead of a string, we can simplify this component by just using <AlertMessage />
+const CustomAlert = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
   flex: 1;
+  padding: 16px;
+  background-color: ${({ theme }) => theme.colors.whiteBackground};
+  border: 1px solid ${({ theme }) => theme.colors.warning};
+  border-radius: ${({ theme }) => theme.radius.base};
+  color: ${({ theme }) => theme.colors.primaryText};
+`;
+
+const StyledWarningCircleOutline = styled(WarningCircleOutline)`
+  path {
+    fill: ${({ theme }) => theme.colors.warning};
+  }
+`;
+
+const AlertContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledH2 = styled.h2`
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.warning};
+`;
+
+const StyledSmall = styled.small`
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.primaryText};
+`;
+
+const StyledA = styled.a`
+  text-decoration: underline;
+
+  &:hover {
+    opacity: 0.8;
+  }
 `;
 
 const StyledIconButton = styled(IconButton)`
@@ -46,11 +85,23 @@ export default function SmartContractWalletWarning() {
 
   return (
     <Container>
-      <StyledAlertMessage
-        title="Warning"
-        msg="You are using a smart contract wallet. This is not recommended."
-        variant="warning"
-      />
+      <CustomAlert>
+        <StyledWarningCircleOutline width={24} height={24} />
+
+        <AlertContentContainer>
+          <StyledH2>Warning</StyledH2>
+          <StyledSmall>
+            You are using a smart contract wallet. This is not recommended.{" "}
+            <StyledA
+              href="https://docs.kleros.io/kleros-faq#can-i-use-a-smart-contract-account-to-stake-in-the-court"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Learn more.
+            </StyledA>
+          </StyledSmall>
+        </AlertContentContainer>
+      </CustomAlert>
 
       <StyledIconButton
         small

From ec914ded0dbeecf3921693ac34b0341ffaaf200b Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Thu, 28 Aug 2025 20:04:49 +0100
Subject: [PATCH 03/20] refactor: enhance local storage handling and improve
 smart contract wallet warning logic

- Updated local storage key management in useLocalStorage hook to support dynamic keys.
- Updated local storage key for theme management
---
 .../Warnings/SmartContractWalletWarning.tsx   | 21 ++++++++++------
 src/context/theme/CustomThemeProvider.tsx     |  2 +-
 src/hooks/useLocalStorage.ts                  | 25 ++++++++++++++-----
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/components/Warnings/SmartContractWalletWarning.tsx b/src/components/Warnings/SmartContractWalletWarning.tsx
index 1eefdad..5da48e8 100644
--- a/src/components/Warnings/SmartContractWalletWarning.tsx
+++ b/src/components/Warnings/SmartContractWalletWarning.tsx
@@ -59,24 +59,29 @@ const StyledIconButton = styled(IconButton)`
   right: 0;
 `;
 
+const STORAGE_KEY = "@kleros/escrow-v1/alert/smart-contract-wallet-warning";
+const EIP7702_PREFIX = "0xef0100";
+
 export default function SmartContractWalletWarning() {
   const client = useClient();
   const { address } = useAccount();
   const [isSmartContractWallet, setIsSmartContractWallet] =
     useState<boolean>(false);
   const [showWarning, setShowWarning] = useLocalStorage<boolean>(
-    "@kleros/escrow-v1/alert/smart-contract-wallet-warning",
+    `${STORAGE_KEY}:${address}`,
     true
   );
 
   useEffect(() => {
-    if (address && client) {
-      getCode(client, {
-        address: address,
-      }).then((code) => {
-        setIsSmartContractWallet(!!code);
-      });
-    }
+    if (!address || !client) return;
+
+    getCode(client, { address }).then((code) => {
+      const formattedCode = code?.toLowerCase();
+      const isEIP7702 = formattedCode?.startsWith(EIP7702_PREFIX);
+
+      //Do not show warning for EIP-7702 EOAs.
+      setIsSmartContractWallet(!!code && !isEIP7702);
+    });
   }, [address, client]);
 
   if (!showWarning || !isSmartContractWallet) {
diff --git a/src/context/theme/CustomThemeProvider.tsx b/src/context/theme/CustomThemeProvider.tsx
index 00722d9..ccd75eb 100644
--- a/src/context/theme/CustomThemeProvider.tsx
+++ b/src/context/theme/CustomThemeProvider.tsx
@@ -6,7 +6,7 @@ import { ThemeContext } from "./ThemeContext";
 
 export function CustomThemeProvider({ children }: { children: ReactNode }) {
   const [themeMode, setThemeMode] = useLocalStorage<"light" | "dark">(
-    "theme",
+    "@kleros/escrow-v1/theme",
     "dark"
   );
   const theme = useMemo(() => ({ ...baseTheme, mode: themeMode }), [themeMode]);
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
index 1d32bca..61b7e51 100644
--- a/src/hooks/useLocalStorage.ts
+++ b/src/hooks/useLocalStorage.ts
@@ -1,23 +1,36 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export function useLocalStorage<T>(keyName: string, defaultValue: T) {
-  const [storedValue, setStoredValue] = useState(() => {
+  const keyRef = useRef(keyName);
+
+  const read = (key: string): T => {
     try {
-      const value = window.localStorage.getItem(keyName);
+      const value = window.localStorage.getItem(key);
       return value ? JSON.parse(value) : defaultValue;
     } catch (error) {
       console.error(error);
       return defaultValue;
     }
-  });
+  };
+
+  const [storedValue, setStoredValue] = useState<T>(() => read(keyName));
+
+  //If the key changes, reload the value for the new key.
+  useEffect(() => {
+    if (keyRef.current !== keyName) {
+      keyRef.current = keyName;
+      setStoredValue(read(keyName));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [keyName]);
 
   const setValue = (newValue: T) => {
     try {
-      window.localStorage.setItem(keyName, JSON.stringify(newValue));
+      window.localStorage.setItem(keyRef.current, JSON.stringify(newValue));
     } finally {
       setStoredValue(newValue);
     }
   };
 
-  return [storedValue, setValue];
+  return [storedValue, setValue] as const;
 }

From 5e7f46695b90571301abc17f24c0b3d1ceea381a Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Tue, 2 Sep 2025 18:29:04 +0100
Subject: [PATCH 04/20] feat: add KlerosLiquid ABI and generate wagmi hooks

---
 src/config/contracts/abi/klerosLiquid.ts |  738 ++++++++
 src/config/contracts/generated.ts        | 2081 +++++++++++++++++++---
 wagmi.config.ts                          |    5 +
 3 files changed, 2574 insertions(+), 250 deletions(-)
 create mode 100644 src/config/contracts/abi/klerosLiquid.ts

diff --git a/src/config/contracts/abi/klerosLiquid.ts b/src/config/contracts/abi/klerosLiquid.ts
new file mode 100644
index 0000000..f911396
--- /dev/null
+++ b/src/config/contracts/abi/klerosLiquid.ts
@@ -0,0 +1,738 @@
+//Arbitrator
+export const KLEROS_LIQUID_ABI = [
+  {
+    constant: false,
+    inputs: [{ name: "_pinakion", type: "address" }],
+    name: "changePinakion",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "RNBlock",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "disputesWithoutJurors",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [],
+    name: "passPhase",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "governor",
+    outputs: [{ name: "", type: "address" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "lastDelayedSetStake",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [{ name: "_disputeID", type: "uint256" }],
+    name: "disputeStatus",
+    outputs: [{ name: "status", type: "uint8" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [{ name: "_disputeID", type: "uint256" }],
+    name: "passPeriod",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "maxDrawingTime",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [{ name: "_disputeID", type: "uint256" }],
+    name: "currentRuling",
+    outputs: [{ name: "ruling", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [{ name: "", type: "uint256" }],
+    name: "courts",
+    outputs: [
+      { name: "parent", type: "uint96" },
+      { name: "hiddenVotes", type: "bool" },
+      { name: "minStake", type: "uint256" },
+      { name: "alpha", type: "uint256" },
+      { name: "feeForJuror", type: "uint256" },
+      { name: "jurorsForCourtJump", type: "uint256" },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_disputeID", type: "uint256" },
+      { name: "_appeal", type: "uint256" },
+      { name: "_iterations", type: "uint256" },
+    ],
+    name: "execute",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "ALPHA_DIVISOR",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_disputeID", type: "uint256" },
+      { name: "_voteIDs", type: "uint256[]" },
+      { name: "_choice", type: "uint256" },
+      { name: "_salt", type: "uint256" },
+    ],
+    name: "castVote",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_subcourtID", type: "uint96" },
+      { name: "_minStake", type: "uint256" },
+    ],
+    name: "changeSubcourtMinStake",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [{ name: "_subcourtID", type: "uint96" }],
+    name: "getSubcourt",
+    outputs: [
+      { name: "children", type: "uint256[]" },
+      { name: "timesPerPeriod", type: "uint256[4]" },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_disputeID", type: "uint256" },
+      { name: "_extraData", type: "bytes" },
+    ],
+    name: "appeal",
+    outputs: [],
+    payable: true,
+    stateMutability: "payable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_from", type: "address" },
+      { name: "_to", type: "address" },
+      { name: "_amount", type: "uint256" },
+    ],
+    name: "onTransfer",
+    outputs: [{ name: "allowed", type: "bool" }],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [{ name: "", type: "uint256" }],
+    name: "disputes",
+    outputs: [
+      { name: "subcourtID", type: "uint96" },
+      { name: "arbitrated", type: "address" },
+      { name: "numberOfChoices", type: "uint256" },
+      { name: "period", type: "uint8" },
+      { name: "lastPeriodChange", type: "uint256" },
+      { name: "drawsInRound", type: "uint256" },
+      { name: "commitsInRound", type: "uint256" },
+      { name: "ruled", type: "bool" },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_subcourtID", type: "uint96" },
+      { name: "_timesPerPeriod", type: "uint256[4]" },
+    ],
+    name: "changeSubcourtTimesPerPeriod",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_subcourtID", type: "uint96" },
+      { name: "_feeForJuror", type: "uint256" },
+    ],
+    name: "changeSubcourtJurorFee",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_subcourtID", type: "uint96" },
+      { name: "_alpha", type: "uint256" },
+    ],
+    name: "changeSubcourtAlpha",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_disputeID", type: "uint256" },
+      { name: "_voteIDs", type: "uint256[]" },
+      { name: "_commit", type: "bytes32" },
+    ],
+    name: "castCommit",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "RN",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "RNGenerator",
+    outputs: [{ name: "", type: "address" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_destination", type: "address" },
+      { name: "_amount", type: "uint256" },
+      { name: "_data", type: "bytes" },
+    ],
+    name: "executeGovernorProposal",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [{ name: "_minStakingTime", type: "uint256" }],
+    name: "changeMinStakingTime",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "NON_PAYABLE_AMOUNT",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_subcourtID", type: "uint96" },
+      { name: "_stake", type: "uint128" },
+    ],
+    name: "setStake",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [{ name: "_disputeID", type: "uint256" }],
+    name: "executeRuling",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      { name: "_disputeID", type: "uint256" },
+      { name: "_appeal", type: "uint256" },
+      { name: "_voteID", type: "uint256" },
+    ],
+    name: "getVote",
+    outputs: [
+      { name: "account", type: "address" },
+      { name: "commit", type: "bytes32" },
+      { name: "choice", type: "uint256" },
+      { name: "voted", type: "bool" },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [{ name: "_RNGenerator", type: "address" }],
+    name: "changeRNGenerator",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [{ name: "_iterations", type: "uint256" }],
+    name: "executeDelayedSetStakes",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      { name: "_account", type: "address" },
+      { name: "_subcourtID", type: "uint96" },
+    ],
+    name: "stakeOf",
+    outputs: [{ name: "stake", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_subcourtID", type: "uint96" },
+      { name: "_jurorsForCourtJump", type: "uint256" },
+    ],
+    name: "changeSubcourtJurorsForJump",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [{ name: "_disputeID", type: "uint256" }],
+    name: "appealPeriod",
+    outputs: [
+      { name: "start", type: "uint256" },
+      { name: "end", type: "uint256" },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "phase",
+    outputs: [{ name: "", type: "uint8" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "MAX_STAKE_PATHS",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [{ name: "", type: "uint256" }],
+    name: "delayedSetStakes",
+    outputs: [
+      { name: "account", type: "address" },
+      { name: "subcourtID", type: "uint96" },
+      { name: "stake", type: "uint128" },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "lastPhaseChange",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "minStakingTime",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "nextDelayedSetStake",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_numberOfChoices", type: "uint256" },
+      { name: "_extraData", type: "bytes" },
+    ],
+    name: "createDispute",
+    outputs: [{ name: "disputeID", type: "uint256" }],
+    payable: true,
+    stateMutability: "payable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_disputeID", type: "uint256" },
+      { name: "_iterations", type: "uint256" },
+    ],
+    name: "drawJurors",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_parent", type: "uint96" },
+      { name: "_hiddenVotes", type: "bool" },
+      { name: "_minStake", type: "uint256" },
+      { name: "_alpha", type: "uint256" },
+      { name: "_feeForJuror", type: "uint256" },
+      { name: "_jurorsForCourtJump", type: "uint256" },
+      { name: "_timesPerPeriod", type: "uint256[4]" },
+      { name: "_sortitionSumTreeK", type: "uint256" },
+    ],
+    name: "createSubcourt",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [{ name: "_account", type: "address" }],
+    name: "getJuror",
+    outputs: [{ name: "subcourtIDs", type: "uint96[]" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [
+      { name: "_owner", type: "address" },
+      { name: "_spender", type: "address" },
+      { name: "_amount", type: "uint256" },
+    ],
+    name: "onApprove",
+    outputs: [{ name: "allowed", type: "bool" }],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [{ name: "", type: "address" }],
+    name: "jurors",
+    outputs: [
+      { name: "stakedTokens", type: "uint256" },
+      { name: "lockedTokens", type: "uint256" },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [{ name: "_maxDrawingTime", type: "uint256" }],
+    name: "changeMaxDrawingTime",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [{ name: "_disputeID", type: "uint256" }],
+    name: "getDispute",
+    outputs: [
+      { name: "votesLengths", type: "uint256[]" },
+      { name: "tokensAtStakePerJuror", type: "uint256[]" },
+      { name: "totalFeesForJurors", type: "uint256[]" },
+      { name: "votesInEachRound", type: "uint256[]" },
+      { name: "repartitionsInEachRound", type: "uint256[]" },
+      { name: "penaltiesInEachRound", type: "uint256[]" },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      { name: "_disputeID", type: "uint256" },
+      { name: "_appeal", type: "uint256" },
+    ],
+    name: "getVoteCounter",
+    outputs: [
+      { name: "winningChoice", type: "uint256" },
+      { name: "counts", type: "uint256[]" },
+      { name: "tied", type: "bool" },
+    ],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [{ name: "_governor", type: "address" }],
+    name: "changeGovernor",
+    outputs: [],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "MIN_JURORS",
+    outputs: [{ name: "", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [
+      { name: "_disputeID", type: "uint256" },
+      { name: "_extraData", type: "bytes" },
+    ],
+    name: "appealCost",
+    outputs: [{ name: "cost", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: false,
+    inputs: [{ name: "_owner", type: "address" }],
+    name: "proxyPayment",
+    outputs: [{ name: "allowed", type: "bool" }],
+    payable: true,
+    stateMutability: "payable",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "lockInsolventTransfers",
+    outputs: [{ name: "", type: "bool" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [{ name: "_extraData", type: "bytes" }],
+    name: "arbitrationCost",
+    outputs: [{ name: "cost", type: "uint256" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: "pinakion",
+    outputs: [{ name: "", type: "address" }],
+    payable: false,
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      { name: "_governor", type: "address" },
+      { name: "_pinakion", type: "address" },
+      { name: "_RNGenerator", type: "address" },
+      { name: "_minStakingTime", type: "uint256" },
+      { name: "_maxDrawingTime", type: "uint256" },
+      { name: "_hiddenVotes", type: "bool" },
+      { name: "_minStake", type: "uint256" },
+      { name: "_alpha", type: "uint256" },
+      { name: "_feeForJuror", type: "uint256" },
+      { name: "_jurorsForCourtJump", type: "uint256" },
+      { name: "_timesPerPeriod", type: "uint256[4]" },
+      { name: "_sortitionSumTreeK", type: "uint256" },
+    ],
+    payable: false,
+    stateMutability: "nonpayable",
+    type: "constructor",
+  },
+  {
+    anonymous: false,
+    inputs: [{ indexed: false, name: "_phase", type: "uint8" }],
+    name: "NewPhase",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, name: "_disputeID", type: "uint256" },
+      { indexed: false, name: "_period", type: "uint8" },
+    ],
+    name: "NewPeriod",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, name: "_address", type: "address" },
+      { indexed: false, name: "_subcourtID", type: "uint256" },
+      { indexed: false, name: "_stake", type: "uint128" },
+      { indexed: false, name: "_newTotalStake", type: "uint256" },
+    ],
+    name: "StakeSet",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, name: "_address", type: "address" },
+      { indexed: true, name: "_disputeID", type: "uint256" },
+      { indexed: false, name: "_appeal", type: "uint256" },
+      { indexed: false, name: "_voteID", type: "uint256" },
+    ],
+    name: "Draw",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, name: "_address", type: "address" },
+      { indexed: true, name: "_disputeID", type: "uint256" },
+      { indexed: false, name: "_tokenAmount", type: "int256" },
+      { indexed: false, name: "_ETHAmount", type: "int256" },
+    ],
+    name: "TokenAndETHShift",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, name: "_disputeID", type: "uint256" },
+      { indexed: true, name: "_arbitrable", type: "address" },
+    ],
+    name: "DisputeCreation",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, name: "_disputeID", type: "uint256" },
+      { indexed: true, name: "_arbitrable", type: "address" },
+    ],
+    name: "AppealPossible",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, name: "_disputeID", type: "uint256" },
+      { indexed: true, name: "_arbitrable", type: "address" },
+    ],
+    name: "AppealDecision",
+    type: "event",
+  },
+] as const;
diff --git a/src/config/contracts/generated.ts b/src/config/contracts/generated.ts
index f6119a2..2d4c36a 100644
--- a/src/config/contracts/generated.ts
+++ b/src/config/contracts/generated.ts
@@ -6,25 +6,34 @@ import {
 } from 'wagmi/codegen'
 
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// MultipleArbitrableTokenTransaction
+// KlerosLiquid
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-export const multipleArbitrableTokenTransactionAbi = [
+export const klerosLiquidAbi = [
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_pinakion', type: 'address' }],
+    name: 'changePinakion',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
   {
     constant: true,
     payable: false,
     type: 'function',
     inputs: [],
-    name: 'arbitratorExtraData',
-    outputs: [{ name: '', type: 'bytes' }],
+    name: 'RNBlock',
+    outputs: [{ name: '', type: 'uint256' }],
     stateMutability: 'view',
   },
   {
     constant: true,
     payable: false,
     type: 'function',
-    inputs: [{ name: '', type: 'uint256' }],
-    name: 'disputeIDtoTransactionID',
+    inputs: [],
+    name: 'disputesWithoutJurors',
     outputs: [{ name: '', type: 'uint256' }],
     stateMutability: 'view',
   },
@@ -32,86 +41,79 @@ export const multipleArbitrableTokenTransactionAbi = [
     constant: false,
     payable: false,
     type: 'function',
-    inputs: [
-      { name: '_disputeID', type: 'uint256' },
-      { name: '_ruling', type: 'uint256' },
-    ],
-    name: 'rule',
+    inputs: [],
+    name: 'passPhase',
     outputs: [],
     stateMutability: 'nonpayable',
   },
   {
-    constant: false,
+    constant: true,
     payable: false,
     type: 'function',
-    inputs: [{ name: '_transactionID', type: 'uint256' }],
-    name: 'timeOutByReceiver',
-    outputs: [],
-    stateMutability: 'nonpayable',
+    inputs: [],
+    name: 'governor',
+    outputs: [{ name: '', type: 'address' }],
+    stateMutability: 'view',
   },
   {
     constant: true,
     payable: false,
     type: 'function',
     inputs: [],
-    name: 'arbitrator',
-    outputs: [{ name: '', type: 'address' }],
+    name: 'lastDelayedSetStake',
+    outputs: [{ name: '', type: 'uint256' }],
     stateMutability: 'view',
   },
   {
-    constant: false,
-    payable: true,
+    constant: true,
+    payable: false,
     type: 'function',
-    inputs: [{ name: '_transactionID', type: 'uint256' }],
-    name: 'payArbitrationFeeByReceiver',
-    outputs: [],
-    stateMutability: 'payable',
+    inputs: [{ name: '_disputeID', type: 'uint256' }],
+    name: 'disputeStatus',
+    outputs: [{ name: 'status', type: 'uint8' }],
+    stateMutability: 'view',
   },
   {
     constant: false,
-    payable: true,
+    payable: false,
     type: 'function',
-    inputs: [{ name: '_transactionID', type: 'uint256' }],
-    name: 'payArbitrationFeeBySender',
+    inputs: [{ name: '_disputeID', type: 'uint256' }],
+    name: 'passPeriod',
     outputs: [],
-    stateMutability: 'payable',
+    stateMutability: 'nonpayable',
   },
   {
-    constant: false,
-    payable: true,
+    constant: true,
+    payable: false,
     type: 'function',
-    inputs: [{ name: '_transactionID', type: 'uint256' }],
-    name: 'appeal',
-    outputs: [],
-    stateMutability: 'payable',
+    inputs: [],
+    name: 'maxDrawingTime',
+    outputs: [{ name: '', type: 'uint256' }],
+    stateMutability: 'view',
   },
   {
     constant: true,
     payable: false,
     type: 'function',
-    inputs: [{ name: '', type: 'uint256' }],
-    name: 'transactions',
-    outputs: [
-      { name: 'sender', type: 'address' },
-      { name: 'receiver', type: 'address' },
-      { name: 'amount', type: 'uint256' },
-      { name: 'token', type: 'address' },
-      { name: 'timeoutPayment', type: 'uint256' },
-      { name: 'disputeId', type: 'uint256' },
-      { name: 'senderFee', type: 'uint256' },
-      { name: 'receiverFee', type: 'uint256' },
-      { name: 'lastInteraction', type: 'uint256' },
-      { name: 'status', type: 'uint8' },
-    ],
+    inputs: [{ name: '_disputeID', type: 'uint256' }],
+    name: 'currentRuling',
+    outputs: [{ name: 'ruling', type: 'uint256' }],
     stateMutability: 'view',
   },
   {
     constant: true,
     payable: false,
     type: 'function',
-    inputs: [],
-    name: 'getCountTransactions',
-    outputs: [{ name: 'countTransactions', type: 'uint256' }],
+    inputs: [{ name: '', type: 'uint256' }],
+    name: 'courts',
+    outputs: [
+      { name: 'parent', type: 'uint96' },
+      { name: 'hiddenVotes', type: 'bool' },
+      { name: 'minStake', type: 'uint256' },
+      { name: 'alpha', type: 'uint256' },
+      { name: 'feeForJuror', type: 'uint256' },
+      { name: 'jurorsForCourtJump', type: 'uint256' },
+    ],
     stateMutability: 'view',
   },
   {
@@ -119,10 +121,11 @@ export const multipleArbitrableTokenTransactionAbi = [
     payable: false,
     type: 'function',
     inputs: [
-      { name: '_transactionID', type: 'uint256' },
-      { name: '_evidence', type: 'string' },
+      { name: '_disputeID', type: 'uint256' },
+      { name: '_appeal', type: 'uint256' },
+      { name: '_iterations', type: 'uint256' },
     ],
-    name: 'submitEvidence',
+    name: 'execute',
     outputs: [],
     stateMutability: 'nonpayable',
   },
@@ -131,7 +134,7 @@ export const multipleArbitrableTokenTransactionAbi = [
     payable: false,
     type: 'function',
     inputs: [],
-    name: 'feeTimeout',
+    name: 'ALPHA_DIVISOR',
     outputs: [{ name: '', type: 'uint256' }],
     stateMutability: 'view',
   },
@@ -140,53 +143,80 @@ export const multipleArbitrableTokenTransactionAbi = [
     payable: false,
     type: 'function',
     inputs: [
-      { name: '_amount', type: 'uint256' },
-      { name: '_token', type: 'address' },
-      { name: '_timeoutPayment', type: 'uint256' },
-      { name: '_receiver', type: 'address' },
-      { name: '_metaEvidence', type: 'string' },
+      { name: '_disputeID', type: 'uint256' },
+      { name: '_voteIDs', type: 'uint256[]' },
+      { name: '_choice', type: 'uint256' },
+      { name: '_salt', type: 'uint256' },
     ],
-    name: 'createTransaction',
-    outputs: [{ name: 'transactionIndex', type: 'uint256' }],
+    name: 'castVote',
+    outputs: [],
     stateMutability: 'nonpayable',
   },
   {
     constant: false,
     payable: false,
     type: 'function',
-    inputs: [{ name: '_transactionID', type: 'uint256' }],
-    name: 'executeTransaction',
+    inputs: [
+      { name: '_subcourtID', type: 'uint96' },
+      { name: '_minStake', type: 'uint256' },
+    ],
+    name: 'changeSubcourtMinStake',
     outputs: [],
     stateMutability: 'nonpayable',
   },
   {
-    constant: false,
+    constant: true,
     payable: false,
     type: 'function',
+    inputs: [{ name: '_subcourtID', type: 'uint96' }],
+    name: 'getSubcourt',
+    outputs: [
+      { name: 'children', type: 'uint256[]' },
+      { name: 'timesPerPeriod', type: 'uint256[4]' },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: true,
+    type: 'function',
     inputs: [
-      { name: '_transactionID', type: 'uint256' },
-      { name: '_amount', type: 'uint256' },
+      { name: '_disputeID', type: 'uint256' },
+      { name: '_extraData', type: 'bytes' },
     ],
-    name: 'pay',
+    name: 'appeal',
     outputs: [],
-    stateMutability: 'nonpayable',
+    stateMutability: 'payable',
   },
   {
     constant: false,
     payable: false,
     type: 'function',
-    inputs: [{ name: '_transactionID', type: 'uint256' }],
-    name: 'timeOutBySender',
-    outputs: [],
+    inputs: [
+      { name: '_from', type: 'address' },
+      { name: '_to', type: 'address' },
+      { name: '_amount', type: 'uint256' },
+    ],
+    name: 'onTransfer',
+    outputs: [{ name: 'allowed', type: 'bool' }],
     stateMutability: 'nonpayable',
   },
   {
     constant: true,
     payable: false,
     type: 'function',
-    inputs: [{ name: '_address', type: 'address' }],
-    name: 'getTransactionIDsByAddress',
-    outputs: [{ name: 'transactionIDs', type: 'uint256[]' }],
+    inputs: [{ name: '', type: 'uint256' }],
+    name: 'disputes',
+    outputs: [
+      { name: 'subcourtID', type: 'uint96' },
+      { name: 'arbitrated', type: 'address' },
+      { name: 'numberOfChoices', type: 'uint256' },
+      { name: 'period', type: 'uint8' },
+      { name: 'lastPeriodChange', type: 'uint256' },
+      { name: 'drawsInRound', type: 'uint256' },
+      { name: 'commitsInRound', type: 'uint256' },
+      { name: 'ruled', type: 'bool' },
+    ],
     stateMutability: 'view',
   },
   {
@@ -194,118 +224,66 @@ export const multipleArbitrableTokenTransactionAbi = [
     payable: false,
     type: 'function',
     inputs: [
-      { name: '_transactionID', type: 'uint256' },
-      { name: '_amountReimbursed', type: 'uint256' },
+      { name: '_subcourtID', type: 'uint96' },
+      { name: '_timesPerPeriod', type: 'uint256[4]' },
     ],
-    name: 'reimburse',
+    name: 'changeSubcourtTimesPerPeriod',
     outputs: [],
     stateMutability: 'nonpayable',
   },
   {
+    constant: false,
     payable: false,
-    type: 'constructor',
+    type: 'function',
     inputs: [
-      { name: '_arbitrator', type: 'address' },
-      { name: '_arbitratorExtraData', type: 'bytes' },
-      { name: '_feeTimeout', type: 'uint256' },
+      { name: '_subcourtID', type: 'uint96' },
+      { name: '_feeForJuror', type: 'uint256' },
     ],
+    name: 'changeSubcourtJurorFee',
+    outputs: [],
     stateMutability: 'nonpayable',
   },
   {
-    type: 'event',
-    anonymous: false,
-    inputs: [
-      { name: '_transactionID', type: 'uint256', indexed: true },
-      { name: '_amount', type: 'uint256', indexed: false },
-      { name: '_party', type: 'address', indexed: false },
-    ],
-    name: 'Payment',
-  },
-  {
-    type: 'event',
-    anonymous: false,
-    inputs: [
-      { name: '_transactionID', type: 'uint256', indexed: true },
-      { name: '_party', type: 'uint8', indexed: false },
-    ],
-    name: 'HasToPayFee',
-  },
-  {
-    type: 'event',
-    anonymous: false,
-    inputs: [
-      { name: '_arbitrator', type: 'address', indexed: true },
-      { name: '_disputeID', type: 'uint256', indexed: true },
-      { name: '_ruling', type: 'uint256', indexed: false },
-    ],
-    name: 'Ruling',
-  },
-  {
-    type: 'event',
-    anonymous: false,
-    inputs: [
-      { name: '_transactionID', type: 'uint256', indexed: false },
-      { name: '_sender', type: 'address', indexed: true },
-      { name: '_receiver', type: 'address', indexed: true },
-      { name: '_token', type: 'address', indexed: false },
-      { name: '_amount', type: 'uint256', indexed: false },
-    ],
-    name: 'TransactionCreated',
-  },
-  {
-    type: 'event',
-    anonymous: false,
-    inputs: [
-      { name: '_metaEvidenceID', type: 'uint256', indexed: true },
-      { name: '_evidence', type: 'string', indexed: false },
-    ],
-    name: 'MetaEvidence',
-  },
-  {
-    type: 'event',
-    anonymous: false,
+    constant: false,
+    payable: false,
+    type: 'function',
     inputs: [
-      { name: '_arbitrator', type: 'address', indexed: true },
-      { name: '_disputeID', type: 'uint256', indexed: true },
-      { name: '_metaEvidenceID', type: 'uint256', indexed: false },
-      { name: '_evidenceGroupID', type: 'uint256', indexed: false },
+      { name: '_subcourtID', type: 'uint96' },
+      { name: '_alpha', type: 'uint256' },
     ],
-    name: 'Dispute',
+    name: 'changeSubcourtAlpha',
+    outputs: [],
+    stateMutability: 'nonpayable',
   },
   {
-    type: 'event',
-    anonymous: false,
+    constant: false,
+    payable: false,
+    type: 'function',
     inputs: [
-      { name: '_arbitrator', type: 'address', indexed: true },
-      { name: '_evidenceGroupID', type: 'uint256', indexed: true },
-      { name: '_party', type: 'address', indexed: true },
-      { name: '_evidence', type: 'string', indexed: false },
+      { name: '_disputeID', type: 'uint256' },
+      { name: '_voteIDs', type: 'uint256[]' },
+      { name: '_commit', type: 'bytes32' },
     ],
-    name: 'Evidence',
+    name: 'castCommit',
+    outputs: [],
+    stateMutability: 'nonpayable',
   },
-] as const
-
-//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// MultipleArbitrableTransaction
-//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-export const multipleArbitrableTransactionAbi = [
   {
     constant: true,
     payable: false,
     type: 'function',
     inputs: [],
-    name: 'arbitratorExtraData',
-    outputs: [{ name: '', type: 'bytes' }],
+    name: 'RN',
+    outputs: [{ name: '', type: 'uint256' }],
     stateMutability: 'view',
   },
   {
     constant: true,
     payable: false,
     type: 'function',
-    inputs: [{ name: '', type: 'uint256' }],
-    name: 'disputeIDtoTransactionID',
-    outputs: [{ name: '', type: 'uint256' }],
+    inputs: [],
+    name: 'RNGenerator',
+    outputs: [{ name: '', type: 'address' }],
     stateMutability: 'view',
   },
   {
@@ -313,10 +291,11 @@ export const multipleArbitrableTransactionAbi = [
     payable: false,
     type: 'function',
     inputs: [
-      { name: '_disputeID', type: 'uint256' },
-      { name: '_ruling', type: 'uint256' },
+      { name: '_destination', type: 'address' },
+      { name: '_amount', type: 'uint256' },
+      { name: '_data', type: 'bytes' },
     ],
-    name: 'rule',
+    name: 'executeGovernorProposal',
     outputs: [],
     stateMutability: 'nonpayable',
   },
@@ -324,8 +303,8 @@ export const multipleArbitrableTransactionAbi = [
     constant: false,
     payable: false,
     type: 'function',
-    inputs: [{ name: '_transactionID', type: 'uint256' }],
-    name: 'timeOutByReceiver',
+    inputs: [{ name: '_minStakingTime', type: 'uint256' }],
+    name: 'changeMinStakingTime',
     outputs: [],
     stateMutability: 'nonpayable',
   },
@@ -334,53 +313,100 @@ export const multipleArbitrableTransactionAbi = [
     payable: false,
     type: 'function',
     inputs: [],
-    name: 'arbitrator',
-    outputs: [{ name: '', type: 'address' }],
+    name: 'NON_PAYABLE_AMOUNT',
+    outputs: [{ name: '', type: 'uint256' }],
     stateMutability: 'view',
   },
   {
     constant: false,
-    payable: true,
+    payable: false,
     type: 'function',
-    inputs: [{ name: '_transactionID', type: 'uint256' }],
-    name: 'payArbitrationFeeByReceiver',
+    inputs: [
+      { name: '_subcourtID', type: 'uint96' },
+      { name: '_stake', type: 'uint128' },
+    ],
+    name: 'setStake',
     outputs: [],
-    stateMutability: 'payable',
+    stateMutability: 'nonpayable',
   },
   {
     constant: false,
-    payable: true,
+    payable: false,
     type: 'function',
-    inputs: [{ name: '_transactionID', type: 'uint256' }],
-    name: 'payArbitrationFeeBySender',
+    inputs: [{ name: '_disputeID', type: 'uint256' }],
+    name: 'executeRuling',
     outputs: [],
-    stateMutability: 'payable',
+    stateMutability: 'nonpayable',
   },
   {
-    constant: false,
-    payable: true,
+    constant: true,
+    payable: false,
     type: 'function',
-    inputs: [{ name: '_transactionID', type: 'uint256' }],
-    name: 'appeal',
-    outputs: [],
-    stateMutability: 'payable',
+    inputs: [
+      { name: '_disputeID', type: 'uint256' },
+      { name: '_appeal', type: 'uint256' },
+      { name: '_voteID', type: 'uint256' },
+    ],
+    name: 'getVote',
+    outputs: [
+      { name: 'account', type: 'address' },
+      { name: 'commit', type: 'bytes32' },
+      { name: 'choice', type: 'uint256' },
+      { name: 'voted', type: 'bool' },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_RNGenerator', type: 'address' }],
+    name: 'changeRNGenerator',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_iterations', type: 'uint256' }],
+    name: 'executeDelayedSetStakes',
+    outputs: [],
+    stateMutability: 'nonpayable',
   },
   {
     constant: true,
     payable: false,
     type: 'function',
-    inputs: [{ name: '', type: 'uint256' }],
-    name: 'transactions',
+    inputs: [
+      { name: '_account', type: 'address' },
+      { name: '_subcourtID', type: 'uint96' },
+    ],
+    name: 'stakeOf',
+    outputs: [{ name: 'stake', type: 'uint256' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [
+      { name: '_subcourtID', type: 'uint96' },
+      { name: '_jurorsForCourtJump', type: 'uint256' },
+    ],
+    name: 'changeSubcourtJurorsForJump',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_disputeID', type: 'uint256' }],
+    name: 'appealPeriod',
     outputs: [
-      { name: 'sender', type: 'address' },
-      { name: 'receiver', type: 'address' },
-      { name: 'amount', type: 'uint256' },
-      { name: 'timeoutPayment', type: 'uint256' },
-      { name: 'disputeId', type: 'uint256' },
-      { name: 'senderFee', type: 'uint256' },
-      { name: 'receiverFee', type: 'uint256' },
-      { name: 'lastInteraction', type: 'uint256' },
-      { name: 'status', type: 'uint8' },
+      { name: 'start', type: 'uint256' },
+      { name: 'end', type: 'uint256' },
     ],
     stateMutability: 'view',
   },
@@ -389,28 +415,56 @@ export const multipleArbitrableTransactionAbi = [
     payable: false,
     type: 'function',
     inputs: [],
-    name: 'getCountTransactions',
-    outputs: [{ name: 'countTransactions', type: 'uint256' }],
+    name: 'phase',
+    outputs: [{ name: '', type: 'uint8' }],
     stateMutability: 'view',
   },
   {
-    constant: false,
+    constant: true,
     payable: false,
     type: 'function',
-    inputs: [
-      { name: '_transactionID', type: 'uint256' },
-      { name: '_evidence', type: 'string' },
+    inputs: [],
+    name: 'MAX_STAKE_PATHS',
+    outputs: [{ name: '', type: 'uint256' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '', type: 'uint256' }],
+    name: 'delayedSetStakes',
+    outputs: [
+      { name: 'account', type: 'address' },
+      { name: 'subcourtID', type: 'uint96' },
+      { name: 'stake', type: 'uint128' },
     ],
-    name: 'submitEvidence',
-    outputs: [],
-    stateMutability: 'nonpayable',
+    stateMutability: 'view',
   },
   {
     constant: true,
     payable: false,
     type: 'function',
     inputs: [],
-    name: 'feeTimeout',
+    name: 'lastPhaseChange',
+    outputs: [{ name: '', type: 'uint256' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [],
+    name: 'minStakingTime',
+    outputs: [{ name: '', type: 'uint256' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [],
+    name: 'nextDelayedSetStake',
     outputs: [{ name: '', type: 'uint256' }],
     stateMutability: 'view',
   },
@@ -419,20 +473,22 @@ export const multipleArbitrableTransactionAbi = [
     payable: true,
     type: 'function',
     inputs: [
-      { name: '_timeoutPayment', type: 'uint256' },
-      { name: '_receiver', type: 'address' },
-      { name: '_metaEvidence', type: 'string' },
+      { name: '_numberOfChoices', type: 'uint256' },
+      { name: '_extraData', type: 'bytes' },
     ],
-    name: 'createTransaction',
-    outputs: [{ name: 'transactionID', type: 'uint256' }],
+    name: 'createDispute',
+    outputs: [{ name: 'disputeID', type: 'uint256' }],
     stateMutability: 'payable',
   },
   {
     constant: false,
     payable: false,
     type: 'function',
-    inputs: [{ name: '_transactionID', type: 'uint256' }],
-    name: 'executeTransaction',
+    inputs: [
+      { name: '_disputeID', type: 'uint256' },
+      { name: '_iterations', type: 'uint256' },
+    ],
+    name: 'drawJurors',
     outputs: [],
     stateMutability: 'nonpayable',
   },
@@ -441,130 +497,1655 @@ export const multipleArbitrableTransactionAbi = [
     payable: false,
     type: 'function',
     inputs: [
-      { name: '_transactionID', type: 'uint256' },
-      { name: '_amount', type: 'uint256' },
+      { name: '_parent', type: 'uint96' },
+      { name: '_hiddenVotes', type: 'bool' },
+      { name: '_minStake', type: 'uint256' },
+      { name: '_alpha', type: 'uint256' },
+      { name: '_feeForJuror', type: 'uint256' },
+      { name: '_jurorsForCourtJump', type: 'uint256' },
+      { name: '_timesPerPeriod', type: 'uint256[4]' },
+      { name: '_sortitionSumTreeK', type: 'uint256' },
     ],
-    name: 'pay',
+    name: 'createSubcourt',
     outputs: [],
     stateMutability: 'nonpayable',
   },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_account', type: 'address' }],
+    name: 'getJuror',
+    outputs: [{ name: 'subcourtIDs', type: 'uint96[]' }],
+    stateMutability: 'view',
+  },
   {
     constant: false,
     payable: false,
     type: 'function',
-    inputs: [{ name: '_transactionID', type: 'uint256' }],
-    name: 'timeOutBySender',
-    outputs: [],
+    inputs: [
+      { name: '_owner', type: 'address' },
+      { name: '_spender', type: 'address' },
+      { name: '_amount', type: 'uint256' },
+    ],
+    name: 'onApprove',
+    outputs: [{ name: 'allowed', type: 'bool' }],
     stateMutability: 'nonpayable',
   },
   {
     constant: true,
     payable: false,
     type: 'function',
-    inputs: [{ name: '_address', type: 'address' }],
-    name: 'getTransactionIDsByAddress',
-    outputs: [{ name: 'transactionIDs', type: 'uint256[]' }],
+    inputs: [{ name: '', type: 'address' }],
+    name: 'jurors',
+    outputs: [
+      { name: 'stakedTokens', type: 'uint256' },
+      { name: 'lockedTokens', type: 'uint256' },
+    ],
     stateMutability: 'view',
   },
   {
     constant: false,
     payable: false,
     type: 'function',
+    inputs: [{ name: '_maxDrawingTime', type: 'uint256' }],
+    name: 'changeMaxDrawingTime',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_disputeID', type: 'uint256' }],
+    name: 'getDispute',
+    outputs: [
+      { name: 'votesLengths', type: 'uint256[]' },
+      { name: 'tokensAtStakePerJuror', type: 'uint256[]' },
+      { name: 'totalFeesForJurors', type: 'uint256[]' },
+      { name: 'votesInEachRound', type: 'uint256[]' },
+      { name: 'repartitionsInEachRound', type: 'uint256[]' },
+      { name: 'penaltiesInEachRound', type: 'uint256[]' },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
     inputs: [
-      { name: '_transactionID', type: 'uint256' },
-      { name: '_amountReimbursed', type: 'uint256' },
+      { name: '_disputeID', type: 'uint256' },
+      { name: '_appeal', type: 'uint256' },
     ],
-    name: 'reimburse',
+    name: 'getVoteCounter',
+    outputs: [
+      { name: 'winningChoice', type: 'uint256' },
+      { name: 'counts', type: 'uint256[]' },
+      { name: 'tied', type: 'bool' },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_governor', type: 'address' }],
+    name: 'changeGovernor',
     outputs: [],
     stateMutability: 'nonpayable',
   },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [],
+    name: 'MIN_JURORS',
+    outputs: [{ name: '', type: 'uint256' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [
+      { name: '_disputeID', type: 'uint256' },
+      { name: '_extraData', type: 'bytes' },
+    ],
+    name: 'appealCost',
+    outputs: [{ name: 'cost', type: 'uint256' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: true,
+    type: 'function',
+    inputs: [{ name: '_owner', type: 'address' }],
+    name: 'proxyPayment',
+    outputs: [{ name: 'allowed', type: 'bool' }],
+    stateMutability: 'payable',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [],
+    name: 'lockInsolventTransfers',
+    outputs: [{ name: '', type: 'bool' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_extraData', type: 'bytes' }],
+    name: 'arbitrationCost',
+    outputs: [{ name: 'cost', type: 'uint256' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [],
+    name: 'pinakion',
+    outputs: [{ name: '', type: 'address' }],
+    stateMutability: 'view',
+  },
   {
     payable: false,
     type: 'constructor',
     inputs: [
-      { name: '_arbitrator', type: 'address' },
-      { name: '_arbitratorExtraData', type: 'bytes' },
-      { name: '_feeTimeout', type: 'uint256' },
+      { name: '_governor', type: 'address' },
+      { name: '_pinakion', type: 'address' },
+      { name: '_RNGenerator', type: 'address' },
+      { name: '_minStakingTime', type: 'uint256' },
+      { name: '_maxDrawingTime', type: 'uint256' },
+      { name: '_hiddenVotes', type: 'bool' },
+      { name: '_minStake', type: 'uint256' },
+      { name: '_alpha', type: 'uint256' },
+      { name: '_feeForJuror', type: 'uint256' },
+      { name: '_jurorsForCourtJump', type: 'uint256' },
+      { name: '_timesPerPeriod', type: 'uint256[4]' },
+      { name: '_sortitionSumTreeK', type: 'uint256' },
     ],
     stateMutability: 'nonpayable',
   },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [{ name: '_phase', type: 'uint8', indexed: false }],
+    name: 'NewPhase',
+  },
   {
     type: 'event',
     anonymous: false,
     inputs: [
-      { name: '_transactionID', type: 'uint256', indexed: true },
-      { name: '_amount', type: 'uint256', indexed: false },
-      { name: '_party', type: 'address', indexed: false },
+      { name: '_disputeID', type: 'uint256', indexed: true },
+      { name: '_period', type: 'uint8', indexed: false },
     ],
-    name: 'Payment',
+    name: 'NewPeriod',
   },
   {
     type: 'event',
     anonymous: false,
     inputs: [
-      { name: '_transactionID', type: 'uint256', indexed: true },
-      { name: '_party', type: 'uint8', indexed: false },
+      { name: '_address', type: 'address', indexed: true },
+      { name: '_subcourtID', type: 'uint256', indexed: false },
+      { name: '_stake', type: 'uint128', indexed: false },
+      { name: '_newTotalStake', type: 'uint256', indexed: false },
     ],
-    name: 'HasToPayFee',
+    name: 'StakeSet',
   },
   {
     type: 'event',
     anonymous: false,
     inputs: [
-      { name: '_arbitrator', type: 'address', indexed: true },
+      { name: '_address', type: 'address', indexed: true },
       { name: '_disputeID', type: 'uint256', indexed: true },
-      { name: '_ruling', type: 'uint256', indexed: false },
+      { name: '_appeal', type: 'uint256', indexed: false },
+      { name: '_voteID', type: 'uint256', indexed: false },
     ],
-    name: 'Ruling',
+    name: 'Draw',
   },
   {
     type: 'event',
     anonymous: false,
     inputs: [
-      { name: '_transactionID', type: 'uint256', indexed: false },
-      { name: '_sender', type: 'address', indexed: true },
-      { name: '_receiver', type: 'address', indexed: true },
-      { name: '_amount', type: 'uint256', indexed: false },
+      { name: '_address', type: 'address', indexed: true },
+      { name: '_disputeID', type: 'uint256', indexed: true },
+      { name: '_tokenAmount', type: 'int256', indexed: false },
+      { name: '_ETHAmount', type: 'int256', indexed: false },
     ],
-    name: 'TransactionCreated',
+    name: 'TokenAndETHShift',
   },
   {
     type: 'event',
     anonymous: false,
     inputs: [
-      { name: '_metaEvidenceID', type: 'uint256', indexed: true },
-      { name: '_evidence', type: 'string', indexed: false },
+      { name: '_disputeID', type: 'uint256', indexed: true },
+      { name: '_arbitrable', type: 'address', indexed: true },
     ],
-    name: 'MetaEvidence',
+    name: 'DisputeCreation',
   },
   {
     type: 'event',
     anonymous: false,
     inputs: [
-      { name: '_arbitrator', type: 'address', indexed: true },
       { name: '_disputeID', type: 'uint256', indexed: true },
-      { name: '_metaEvidenceID', type: 'uint256', indexed: false },
-      { name: '_evidenceGroupID', type: 'uint256', indexed: false },
+      { name: '_arbitrable', type: 'address', indexed: true },
     ],
-    name: 'Dispute',
+    name: 'AppealPossible',
   },
   {
     type: 'event',
     anonymous: false,
     inputs: [
-      { name: '_arbitrator', type: 'address', indexed: true },
-      { name: '_evidenceGroupID', type: 'uint256', indexed: true },
-      { name: '_party', type: 'address', indexed: true },
-      { name: '_evidence', type: 'string', indexed: false },
+      { name: '_disputeID', type: 'uint256', indexed: true },
+      { name: '_arbitrable', type: 'address', indexed: true },
     ],
-    name: 'Evidence',
+    name: 'AppealDecision',
   },
 ] as const
 
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// React
+// MultipleArbitrableTokenTransaction
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
+export const multipleArbitrableTokenTransactionAbi = [
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [],
+    name: 'arbitratorExtraData',
+    outputs: [{ name: '', type: 'bytes' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '', type: 'uint256' }],
+    name: 'disputeIDtoTransactionID',
+    outputs: [{ name: '', type: 'uint256' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [
+      { name: '_disputeID', type: 'uint256' },
+      { name: '_ruling', type: 'uint256' },
+    ],
+    name: 'rule',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_transactionID', type: 'uint256' }],
+    name: 'timeOutByReceiver',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [],
+    name: 'arbitrator',
+    outputs: [{ name: '', type: 'address' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: true,
+    type: 'function',
+    inputs: [{ name: '_transactionID', type: 'uint256' }],
+    name: 'payArbitrationFeeByReceiver',
+    outputs: [],
+    stateMutability: 'payable',
+  },
+  {
+    constant: false,
+    payable: true,
+    type: 'function',
+    inputs: [{ name: '_transactionID', type: 'uint256' }],
+    name: 'payArbitrationFeeBySender',
+    outputs: [],
+    stateMutability: 'payable',
+  },
+  {
+    constant: false,
+    payable: true,
+    type: 'function',
+    inputs: [{ name: '_transactionID', type: 'uint256' }],
+    name: 'appeal',
+    outputs: [],
+    stateMutability: 'payable',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '', type: 'uint256' }],
+    name: 'transactions',
+    outputs: [
+      { name: 'sender', type: 'address' },
+      { name: 'receiver', type: 'address' },
+      { name: 'amount', type: 'uint256' },
+      { name: 'token', type: 'address' },
+      { name: 'timeoutPayment', type: 'uint256' },
+      { name: 'disputeId', type: 'uint256' },
+      { name: 'senderFee', type: 'uint256' },
+      { name: 'receiverFee', type: 'uint256' },
+      { name: 'lastInteraction', type: 'uint256' },
+      { name: 'status', type: 'uint8' },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [],
+    name: 'getCountTransactions',
+    outputs: [{ name: 'countTransactions', type: 'uint256' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [
+      { name: '_transactionID', type: 'uint256' },
+      { name: '_evidence', type: 'string' },
+    ],
+    name: 'submitEvidence',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [],
+    name: 'feeTimeout',
+    outputs: [{ name: '', type: 'uint256' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [
+      { name: '_amount', type: 'uint256' },
+      { name: '_token', type: 'address' },
+      { name: '_timeoutPayment', type: 'uint256' },
+      { name: '_receiver', type: 'address' },
+      { name: '_metaEvidence', type: 'string' },
+    ],
+    name: 'createTransaction',
+    outputs: [{ name: 'transactionIndex', type: 'uint256' }],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_transactionID', type: 'uint256' }],
+    name: 'executeTransaction',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [
+      { name: '_transactionID', type: 'uint256' },
+      { name: '_amount', type: 'uint256' },
+    ],
+    name: 'pay',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_transactionID', type: 'uint256' }],
+    name: 'timeOutBySender',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_address', type: 'address' }],
+    name: 'getTransactionIDsByAddress',
+    outputs: [{ name: 'transactionIDs', type: 'uint256[]' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [
+      { name: '_transactionID', type: 'uint256' },
+      { name: '_amountReimbursed', type: 'uint256' },
+    ],
+    name: 'reimburse',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    payable: false,
+    type: 'constructor',
+    inputs: [
+      { name: '_arbitrator', type: 'address' },
+      { name: '_arbitratorExtraData', type: 'bytes' },
+      { name: '_feeTimeout', type: 'uint256' },
+    ],
+    stateMutability: 'nonpayable',
+  },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [
+      { name: '_transactionID', type: 'uint256', indexed: true },
+      { name: '_amount', type: 'uint256', indexed: false },
+      { name: '_party', type: 'address', indexed: false },
+    ],
+    name: 'Payment',
+  },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [
+      { name: '_transactionID', type: 'uint256', indexed: true },
+      { name: '_party', type: 'uint8', indexed: false },
+    ],
+    name: 'HasToPayFee',
+  },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [
+      { name: '_arbitrator', type: 'address', indexed: true },
+      { name: '_disputeID', type: 'uint256', indexed: true },
+      { name: '_ruling', type: 'uint256', indexed: false },
+    ],
+    name: 'Ruling',
+  },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [
+      { name: '_transactionID', type: 'uint256', indexed: false },
+      { name: '_sender', type: 'address', indexed: true },
+      { name: '_receiver', type: 'address', indexed: true },
+      { name: '_token', type: 'address', indexed: false },
+      { name: '_amount', type: 'uint256', indexed: false },
+    ],
+    name: 'TransactionCreated',
+  },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [
+      { name: '_metaEvidenceID', type: 'uint256', indexed: true },
+      { name: '_evidence', type: 'string', indexed: false },
+    ],
+    name: 'MetaEvidence',
+  },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [
+      { name: '_arbitrator', type: 'address', indexed: true },
+      { name: '_disputeID', type: 'uint256', indexed: true },
+      { name: '_metaEvidenceID', type: 'uint256', indexed: false },
+      { name: '_evidenceGroupID', type: 'uint256', indexed: false },
+    ],
+    name: 'Dispute',
+  },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [
+      { name: '_arbitrator', type: 'address', indexed: true },
+      { name: '_evidenceGroupID', type: 'uint256', indexed: true },
+      { name: '_party', type: 'address', indexed: true },
+      { name: '_evidence', type: 'string', indexed: false },
+    ],
+    name: 'Evidence',
+  },
+] as const
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// MultipleArbitrableTransaction
+//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export const multipleArbitrableTransactionAbi = [
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [],
+    name: 'arbitratorExtraData',
+    outputs: [{ name: '', type: 'bytes' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '', type: 'uint256' }],
+    name: 'disputeIDtoTransactionID',
+    outputs: [{ name: '', type: 'uint256' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [
+      { name: '_disputeID', type: 'uint256' },
+      { name: '_ruling', type: 'uint256' },
+    ],
+    name: 'rule',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_transactionID', type: 'uint256' }],
+    name: 'timeOutByReceiver',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [],
+    name: 'arbitrator',
+    outputs: [{ name: '', type: 'address' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: true,
+    type: 'function',
+    inputs: [{ name: '_transactionID', type: 'uint256' }],
+    name: 'payArbitrationFeeByReceiver',
+    outputs: [],
+    stateMutability: 'payable',
+  },
+  {
+    constant: false,
+    payable: true,
+    type: 'function',
+    inputs: [{ name: '_transactionID', type: 'uint256' }],
+    name: 'payArbitrationFeeBySender',
+    outputs: [],
+    stateMutability: 'payable',
+  },
+  {
+    constant: false,
+    payable: true,
+    type: 'function',
+    inputs: [{ name: '_transactionID', type: 'uint256' }],
+    name: 'appeal',
+    outputs: [],
+    stateMutability: 'payable',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '', type: 'uint256' }],
+    name: 'transactions',
+    outputs: [
+      { name: 'sender', type: 'address' },
+      { name: 'receiver', type: 'address' },
+      { name: 'amount', type: 'uint256' },
+      { name: 'timeoutPayment', type: 'uint256' },
+      { name: 'disputeId', type: 'uint256' },
+      { name: 'senderFee', type: 'uint256' },
+      { name: 'receiverFee', type: 'uint256' },
+      { name: 'lastInteraction', type: 'uint256' },
+      { name: 'status', type: 'uint8' },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [],
+    name: 'getCountTransactions',
+    outputs: [{ name: 'countTransactions', type: 'uint256' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [
+      { name: '_transactionID', type: 'uint256' },
+      { name: '_evidence', type: 'string' },
+    ],
+    name: 'submitEvidence',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [],
+    name: 'feeTimeout',
+    outputs: [{ name: '', type: 'uint256' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: true,
+    type: 'function',
+    inputs: [
+      { name: '_timeoutPayment', type: 'uint256' },
+      { name: '_receiver', type: 'address' },
+      { name: '_metaEvidence', type: 'string' },
+    ],
+    name: 'createTransaction',
+    outputs: [{ name: 'transactionID', type: 'uint256' }],
+    stateMutability: 'payable',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_transactionID', type: 'uint256' }],
+    name: 'executeTransaction',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [
+      { name: '_transactionID', type: 'uint256' },
+      { name: '_amount', type: 'uint256' },
+    ],
+    name: 'pay',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_transactionID', type: 'uint256' }],
+    name: 'timeOutBySender',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    constant: true,
+    payable: false,
+    type: 'function',
+    inputs: [{ name: '_address', type: 'address' }],
+    name: 'getTransactionIDsByAddress',
+    outputs: [{ name: 'transactionIDs', type: 'uint256[]' }],
+    stateMutability: 'view',
+  },
+  {
+    constant: false,
+    payable: false,
+    type: 'function',
+    inputs: [
+      { name: '_transactionID', type: 'uint256' },
+      { name: '_amountReimbursed', type: 'uint256' },
+    ],
+    name: 'reimburse',
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    payable: false,
+    type: 'constructor',
+    inputs: [
+      { name: '_arbitrator', type: 'address' },
+      { name: '_arbitratorExtraData', type: 'bytes' },
+      { name: '_feeTimeout', type: 'uint256' },
+    ],
+    stateMutability: 'nonpayable',
+  },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [
+      { name: '_transactionID', type: 'uint256', indexed: true },
+      { name: '_amount', type: 'uint256', indexed: false },
+      { name: '_party', type: 'address', indexed: false },
+    ],
+    name: 'Payment',
+  },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [
+      { name: '_transactionID', type: 'uint256', indexed: true },
+      { name: '_party', type: 'uint8', indexed: false },
+    ],
+    name: 'HasToPayFee',
+  },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [
+      { name: '_arbitrator', type: 'address', indexed: true },
+      { name: '_disputeID', type: 'uint256', indexed: true },
+      { name: '_ruling', type: 'uint256', indexed: false },
+    ],
+    name: 'Ruling',
+  },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [
+      { name: '_transactionID', type: 'uint256', indexed: false },
+      { name: '_sender', type: 'address', indexed: true },
+      { name: '_receiver', type: 'address', indexed: true },
+      { name: '_amount', type: 'uint256', indexed: false },
+    ],
+    name: 'TransactionCreated',
+  },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [
+      { name: '_metaEvidenceID', type: 'uint256', indexed: true },
+      { name: '_evidence', type: 'string', indexed: false },
+    ],
+    name: 'MetaEvidence',
+  },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [
+      { name: '_arbitrator', type: 'address', indexed: true },
+      { name: '_disputeID', type: 'uint256', indexed: true },
+      { name: '_metaEvidenceID', type: 'uint256', indexed: false },
+      { name: '_evidenceGroupID', type: 'uint256', indexed: false },
+    ],
+    name: 'Dispute',
+  },
+  {
+    type: 'event',
+    anonymous: false,
+    inputs: [
+      { name: '_arbitrator', type: 'address', indexed: true },
+      { name: '_evidenceGroupID', type: 'uint256', indexed: true },
+      { name: '_party', type: 'address', indexed: true },
+      { name: '_evidence', type: 'string', indexed: false },
+    ],
+    name: 'Evidence',
+  },
+] as const
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// React
+//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__
+ */
+export const useReadKlerosLiquid = /*#__PURE__*/ createUseReadContract({
+  abi: klerosLiquidAbi,
+})
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"RNBlock"`
+ */
+export const useReadKlerosLiquidRnBlock = /*#__PURE__*/ createUseReadContract({
+  abi: klerosLiquidAbi,
+  functionName: 'RNBlock',
+})
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"disputesWithoutJurors"`
+ */
+export const useReadKlerosLiquidDisputesWithoutJurors =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'disputesWithoutJurors',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"governor"`
+ */
+export const useReadKlerosLiquidGovernor = /*#__PURE__*/ createUseReadContract({
+  abi: klerosLiquidAbi,
+  functionName: 'governor',
+})
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"lastDelayedSetStake"`
+ */
+export const useReadKlerosLiquidLastDelayedSetStake =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'lastDelayedSetStake',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"disputeStatus"`
+ */
+export const useReadKlerosLiquidDisputeStatus =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'disputeStatus',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"maxDrawingTime"`
+ */
+export const useReadKlerosLiquidMaxDrawingTime =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'maxDrawingTime',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"currentRuling"`
+ */
+export const useReadKlerosLiquidCurrentRuling =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'currentRuling',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"courts"`
+ */
+export const useReadKlerosLiquidCourts = /*#__PURE__*/ createUseReadContract({
+  abi: klerosLiquidAbi,
+  functionName: 'courts',
+})
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"ALPHA_DIVISOR"`
+ */
+export const useReadKlerosLiquidAlphaDivisor =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'ALPHA_DIVISOR',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"getSubcourt"`
+ */
+export const useReadKlerosLiquidGetSubcourt =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'getSubcourt',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"disputes"`
+ */
+export const useReadKlerosLiquidDisputes = /*#__PURE__*/ createUseReadContract({
+  abi: klerosLiquidAbi,
+  functionName: 'disputes',
+})
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"RN"`
+ */
+export const useReadKlerosLiquidRn = /*#__PURE__*/ createUseReadContract({
+  abi: klerosLiquidAbi,
+  functionName: 'RN',
+})
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"RNGenerator"`
+ */
+export const useReadKlerosLiquidRnGenerator =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'RNGenerator',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"NON_PAYABLE_AMOUNT"`
+ */
+export const useReadKlerosLiquidNonPayableAmount =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'NON_PAYABLE_AMOUNT',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"getVote"`
+ */
+export const useReadKlerosLiquidGetVote = /*#__PURE__*/ createUseReadContract({
+  abi: klerosLiquidAbi,
+  functionName: 'getVote',
+})
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"stakeOf"`
+ */
+export const useReadKlerosLiquidStakeOf = /*#__PURE__*/ createUseReadContract({
+  abi: klerosLiquidAbi,
+  functionName: 'stakeOf',
+})
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"appealPeriod"`
+ */
+export const useReadKlerosLiquidAppealPeriod =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'appealPeriod',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"phase"`
+ */
+export const useReadKlerosLiquidPhase = /*#__PURE__*/ createUseReadContract({
+  abi: klerosLiquidAbi,
+  functionName: 'phase',
+})
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"MAX_STAKE_PATHS"`
+ */
+export const useReadKlerosLiquidMaxStakePaths =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'MAX_STAKE_PATHS',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"delayedSetStakes"`
+ */
+export const useReadKlerosLiquidDelayedSetStakes =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'delayedSetStakes',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"lastPhaseChange"`
+ */
+export const useReadKlerosLiquidLastPhaseChange =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'lastPhaseChange',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"minStakingTime"`
+ */
+export const useReadKlerosLiquidMinStakingTime =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'minStakingTime',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"nextDelayedSetStake"`
+ */
+export const useReadKlerosLiquidNextDelayedSetStake =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'nextDelayedSetStake',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"getJuror"`
+ */
+export const useReadKlerosLiquidGetJuror = /*#__PURE__*/ createUseReadContract({
+  abi: klerosLiquidAbi,
+  functionName: 'getJuror',
+})
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"jurors"`
+ */
+export const useReadKlerosLiquidJurors = /*#__PURE__*/ createUseReadContract({
+  abi: klerosLiquidAbi,
+  functionName: 'jurors',
+})
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"getDispute"`
+ */
+export const useReadKlerosLiquidGetDispute =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'getDispute',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"getVoteCounter"`
+ */
+export const useReadKlerosLiquidGetVoteCounter =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'getVoteCounter',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"MIN_JURORS"`
+ */
+export const useReadKlerosLiquidMinJurors = /*#__PURE__*/ createUseReadContract(
+  { abi: klerosLiquidAbi, functionName: 'MIN_JURORS' },
+)
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"appealCost"`
+ */
+export const useReadKlerosLiquidAppealCost =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'appealCost',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"lockInsolventTransfers"`
+ */
+export const useReadKlerosLiquidLockInsolventTransfers =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'lockInsolventTransfers',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"arbitrationCost"`
+ */
+export const useReadKlerosLiquidArbitrationCost =
+  /*#__PURE__*/ createUseReadContract({
+    abi: klerosLiquidAbi,
+    functionName: 'arbitrationCost',
+  })
+
+/**
+ * Wraps __{@link useReadContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"pinakion"`
+ */
+export const useReadKlerosLiquidPinakion = /*#__PURE__*/ createUseReadContract({
+  abi: klerosLiquidAbi,
+  functionName: 'pinakion',
+})
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__
+ */
+export const useWriteKlerosLiquid = /*#__PURE__*/ createUseWriteContract({
+  abi: klerosLiquidAbi,
+})
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changePinakion"`
+ */
+export const useWriteKlerosLiquidChangePinakion =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changePinakion',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"passPhase"`
+ */
+export const useWriteKlerosLiquidPassPhase =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'passPhase',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"passPeriod"`
+ */
+export const useWriteKlerosLiquidPassPeriod =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'passPeriod',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"execute"`
+ */
+export const useWriteKlerosLiquidExecute = /*#__PURE__*/ createUseWriteContract(
+  { abi: klerosLiquidAbi, functionName: 'execute' },
+)
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"castVote"`
+ */
+export const useWriteKlerosLiquidCastVote =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'castVote',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeSubcourtMinStake"`
+ */
+export const useWriteKlerosLiquidChangeSubcourtMinStake =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeSubcourtMinStake',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"appeal"`
+ */
+export const useWriteKlerosLiquidAppeal = /*#__PURE__*/ createUseWriteContract({
+  abi: klerosLiquidAbi,
+  functionName: 'appeal',
+})
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"onTransfer"`
+ */
+export const useWriteKlerosLiquidOnTransfer =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'onTransfer',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeSubcourtTimesPerPeriod"`
+ */
+export const useWriteKlerosLiquidChangeSubcourtTimesPerPeriod =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeSubcourtTimesPerPeriod',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeSubcourtJurorFee"`
+ */
+export const useWriteKlerosLiquidChangeSubcourtJurorFee =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeSubcourtJurorFee',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeSubcourtAlpha"`
+ */
+export const useWriteKlerosLiquidChangeSubcourtAlpha =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeSubcourtAlpha',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"castCommit"`
+ */
+export const useWriteKlerosLiquidCastCommit =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'castCommit',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"executeGovernorProposal"`
+ */
+export const useWriteKlerosLiquidExecuteGovernorProposal =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'executeGovernorProposal',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeMinStakingTime"`
+ */
+export const useWriteKlerosLiquidChangeMinStakingTime =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeMinStakingTime',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"setStake"`
+ */
+export const useWriteKlerosLiquidSetStake =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'setStake',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"executeRuling"`
+ */
+export const useWriteKlerosLiquidExecuteRuling =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'executeRuling',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeRNGenerator"`
+ */
+export const useWriteKlerosLiquidChangeRnGenerator =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeRNGenerator',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"executeDelayedSetStakes"`
+ */
+export const useWriteKlerosLiquidExecuteDelayedSetStakes =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'executeDelayedSetStakes',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeSubcourtJurorsForJump"`
+ */
+export const useWriteKlerosLiquidChangeSubcourtJurorsForJump =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeSubcourtJurorsForJump',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"createDispute"`
+ */
+export const useWriteKlerosLiquidCreateDispute =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'createDispute',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"drawJurors"`
+ */
+export const useWriteKlerosLiquidDrawJurors =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'drawJurors',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"createSubcourt"`
+ */
+export const useWriteKlerosLiquidCreateSubcourt =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'createSubcourt',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"onApprove"`
+ */
+export const useWriteKlerosLiquidOnApprove =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'onApprove',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeMaxDrawingTime"`
+ */
+export const useWriteKlerosLiquidChangeMaxDrawingTime =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeMaxDrawingTime',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeGovernor"`
+ */
+export const useWriteKlerosLiquidChangeGovernor =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeGovernor',
+  })
+
+/**
+ * Wraps __{@link useWriteContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"proxyPayment"`
+ */
+export const useWriteKlerosLiquidProxyPayment =
+  /*#__PURE__*/ createUseWriteContract({
+    abi: klerosLiquidAbi,
+    functionName: 'proxyPayment',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__
+ */
+export const useSimulateKlerosLiquid = /*#__PURE__*/ createUseSimulateContract({
+  abi: klerosLiquidAbi,
+})
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changePinakion"`
+ */
+export const useSimulateKlerosLiquidChangePinakion =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changePinakion',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"passPhase"`
+ */
+export const useSimulateKlerosLiquidPassPhase =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'passPhase',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"passPeriod"`
+ */
+export const useSimulateKlerosLiquidPassPeriod =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'passPeriod',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"execute"`
+ */
+export const useSimulateKlerosLiquidExecute =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'execute',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"castVote"`
+ */
+export const useSimulateKlerosLiquidCastVote =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'castVote',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeSubcourtMinStake"`
+ */
+export const useSimulateKlerosLiquidChangeSubcourtMinStake =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeSubcourtMinStake',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"appeal"`
+ */
+export const useSimulateKlerosLiquidAppeal =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'appeal',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"onTransfer"`
+ */
+export const useSimulateKlerosLiquidOnTransfer =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'onTransfer',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeSubcourtTimesPerPeriod"`
+ */
+export const useSimulateKlerosLiquidChangeSubcourtTimesPerPeriod =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeSubcourtTimesPerPeriod',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeSubcourtJurorFee"`
+ */
+export const useSimulateKlerosLiquidChangeSubcourtJurorFee =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeSubcourtJurorFee',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeSubcourtAlpha"`
+ */
+export const useSimulateKlerosLiquidChangeSubcourtAlpha =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeSubcourtAlpha',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"castCommit"`
+ */
+export const useSimulateKlerosLiquidCastCommit =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'castCommit',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"executeGovernorProposal"`
+ */
+export const useSimulateKlerosLiquidExecuteGovernorProposal =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'executeGovernorProposal',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeMinStakingTime"`
+ */
+export const useSimulateKlerosLiquidChangeMinStakingTime =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeMinStakingTime',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"setStake"`
+ */
+export const useSimulateKlerosLiquidSetStake =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'setStake',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"executeRuling"`
+ */
+export const useSimulateKlerosLiquidExecuteRuling =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'executeRuling',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeRNGenerator"`
+ */
+export const useSimulateKlerosLiquidChangeRnGenerator =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeRNGenerator',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"executeDelayedSetStakes"`
+ */
+export const useSimulateKlerosLiquidExecuteDelayedSetStakes =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'executeDelayedSetStakes',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeSubcourtJurorsForJump"`
+ */
+export const useSimulateKlerosLiquidChangeSubcourtJurorsForJump =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeSubcourtJurorsForJump',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"createDispute"`
+ */
+export const useSimulateKlerosLiquidCreateDispute =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'createDispute',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"drawJurors"`
+ */
+export const useSimulateKlerosLiquidDrawJurors =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'drawJurors',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"createSubcourt"`
+ */
+export const useSimulateKlerosLiquidCreateSubcourt =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'createSubcourt',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"onApprove"`
+ */
+export const useSimulateKlerosLiquidOnApprove =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'onApprove',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeMaxDrawingTime"`
+ */
+export const useSimulateKlerosLiquidChangeMaxDrawingTime =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeMaxDrawingTime',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"changeGovernor"`
+ */
+export const useSimulateKlerosLiquidChangeGovernor =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'changeGovernor',
+  })
+
+/**
+ * Wraps __{@link useSimulateContract}__ with `abi` set to __{@link klerosLiquidAbi}__ and `functionName` set to `"proxyPayment"`
+ */
+export const useSimulateKlerosLiquidProxyPayment =
+  /*#__PURE__*/ createUseSimulateContract({
+    abi: klerosLiquidAbi,
+    functionName: 'proxyPayment',
+  })
+
+/**
+ * Wraps __{@link useWatchContractEvent}__ with `abi` set to __{@link klerosLiquidAbi}__
+ */
+export const useWatchKlerosLiquidEvent =
+  /*#__PURE__*/ createUseWatchContractEvent({ abi: klerosLiquidAbi })
+
+/**
+ * Wraps __{@link useWatchContractEvent}__ with `abi` set to __{@link klerosLiquidAbi}__ and `eventName` set to `"NewPhase"`
+ */
+export const useWatchKlerosLiquidNewPhaseEvent =
+  /*#__PURE__*/ createUseWatchContractEvent({
+    abi: klerosLiquidAbi,
+    eventName: 'NewPhase',
+  })
+
+/**
+ * Wraps __{@link useWatchContractEvent}__ with `abi` set to __{@link klerosLiquidAbi}__ and `eventName` set to `"NewPeriod"`
+ */
+export const useWatchKlerosLiquidNewPeriodEvent =
+  /*#__PURE__*/ createUseWatchContractEvent({
+    abi: klerosLiquidAbi,
+    eventName: 'NewPeriod',
+  })
+
+/**
+ * Wraps __{@link useWatchContractEvent}__ with `abi` set to __{@link klerosLiquidAbi}__ and `eventName` set to `"StakeSet"`
+ */
+export const useWatchKlerosLiquidStakeSetEvent =
+  /*#__PURE__*/ createUseWatchContractEvent({
+    abi: klerosLiquidAbi,
+    eventName: 'StakeSet',
+  })
+
+/**
+ * Wraps __{@link useWatchContractEvent}__ with `abi` set to __{@link klerosLiquidAbi}__ and `eventName` set to `"Draw"`
+ */
+export const useWatchKlerosLiquidDrawEvent =
+  /*#__PURE__*/ createUseWatchContractEvent({
+    abi: klerosLiquidAbi,
+    eventName: 'Draw',
+  })
+
+/**
+ * Wraps __{@link useWatchContractEvent}__ with `abi` set to __{@link klerosLiquidAbi}__ and `eventName` set to `"TokenAndETHShift"`
+ */
+export const useWatchKlerosLiquidTokenAndEthShiftEvent =
+  /*#__PURE__*/ createUseWatchContractEvent({
+    abi: klerosLiquidAbi,
+    eventName: 'TokenAndETHShift',
+  })
+
+/**
+ * Wraps __{@link useWatchContractEvent}__ with `abi` set to __{@link klerosLiquidAbi}__ and `eventName` set to `"DisputeCreation"`
+ */
+export const useWatchKlerosLiquidDisputeCreationEvent =
+  /*#__PURE__*/ createUseWatchContractEvent({
+    abi: klerosLiquidAbi,
+    eventName: 'DisputeCreation',
+  })
+
+/**
+ * Wraps __{@link useWatchContractEvent}__ with `abi` set to __{@link klerosLiquidAbi}__ and `eventName` set to `"AppealPossible"`
+ */
+export const useWatchKlerosLiquidAppealPossibleEvent =
+  /*#__PURE__*/ createUseWatchContractEvent({
+    abi: klerosLiquidAbi,
+    eventName: 'AppealPossible',
+  })
+
+/**
+ * Wraps __{@link useWatchContractEvent}__ with `abi` set to __{@link klerosLiquidAbi}__ and `eventName` set to `"AppealDecision"`
+ */
+export const useWatchKlerosLiquidAppealDecisionEvent =
+  /*#__PURE__*/ createUseWatchContractEvent({
+    abi: klerosLiquidAbi,
+    eventName: 'AppealDecision',
+  })
+
 /**
  * Wraps __{@link useReadContract}__ with `abi` set to __{@link multipleArbitrableTokenTransactionAbi}__
  */
diff --git a/wagmi.config.ts b/wagmi.config.ts
index c9b792d..f46c174 100644
--- a/wagmi.config.ts
+++ b/wagmi.config.ts
@@ -2,6 +2,7 @@ import { defineConfig } from "@wagmi/cli";
 import { react } from "@wagmi/cli/plugins";
 import { MULTIPLE_ARBITRABLE_TRANSACTION_ABI } from "./src/config/contracts/abi/multipleArbitrableTransaction";
 import { MULTIPLE_ARBITRABLE_TOKEN_TRANSACTION_ABI } from "./src/config/contracts/abi/mutlipleArbitrableTokenTransaction";
+import { KLEROS_LIQUID_ABI } from "./src/config/contracts/abi/klerosLiquid";
 
 export default defineConfig({
   out: "src/config/contracts/generated.ts",
@@ -14,6 +15,10 @@ export default defineConfig({
       name: "MultipleArbitrableTokenTransaction",
       abi: MULTIPLE_ARBITRABLE_TOKEN_TRANSACTION_ABI,
     },
+    {
+      name: "KlerosLiquid",
+      abi: KLEROS_LIQUID_ABI,
+    },
   ],
   plugins: [react()],
 });

From 105b9a01c984d7fb65d4ebe4171b556aa8f20f36 Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Tue, 2 Sep 2025 18:34:23 +0100
Subject: [PATCH 05/20] feat: fetch arbitrator address, extra data, and
 arbitration cost

---
 src/hooks/useTransactionDetails.ts | 39 +++++++++++++++++++++++++-----
 src/model/ArbitratorInfo.ts        |  5 ++++
 src/model/Transaction.ts           |  2 ++
 3 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 src/model/ArbitratorInfo.ts

diff --git a/src/hooks/useTransactionDetails.ts b/src/hooks/useTransactionDetails.ts
index 281f81c..430ec4d 100644
--- a/src/hooks/useTransactionDetails.ts
+++ b/src/hooks/useTransactionDetails.ts
@@ -31,6 +31,8 @@ import {
 } from "config/contracts/events";
 import type { Evidence } from "model/Evidence";
 import type { TimelineEvent } from "model/TimelineEvent";
+import type { ArbitratorInfo } from "model/ArbitratorInfo";
+import { KLEROS_LIQUID_ABI } from "config/contracts/abi/klerosLiquid";
 
 async function fetchDetails(
   client: Client,
@@ -45,12 +47,34 @@ async function fetchDetails(
   });
 }
 
-async function fetchArbitrator(client: Client, contractAddress: `0x${string}`) {
-  return await readContract(client, {
+async function fetchArbitratorInfo(
+  client: Client,
+  contractAddress: `0x${string}`
+) {
+  const transactionParams = {
     abi: addressToAbi(contractAddress),
     address: contractAddress,
-    functionName: "arbitrator" as const,
+  };
+
+  const [address, extraData] = await Promise.all([
+    await readContract(client, {
+      ...transactionParams,
+      functionName: "arbitrator" as const,
+    }),
+    await readContract(client, {
+      ...transactionParams,
+      functionName: "arbitratorExtraData" as const,
+    }),
+  ]);
+
+  const arbitrationCost = await readContract(client, {
+    address: address,
+    abi: KLEROS_LIQUID_ABI,
+    functionName: "arbitrationCost" as const,
+    args: [extraData],
   });
+
+  return { address, extraData, arbitrationCost };
 }
 
 async function fetchTimelineEvents(
@@ -179,6 +203,7 @@ function mapToTransaction(
   disputeId: bigint,
   blockTimestamp: bigint,
   contractAddress: `0x${string}`,
+  arbitratorInfo: ArbitratorInfo,
   metaEvidence: MetaEvidence,
   status: number,
   lastInteraction: number,
@@ -213,6 +238,7 @@ function mapToTransaction(
       day: "numeric",
     }),
     arbitrableAddress: contractAddress,
+    arbitratorInfo: arbitratorInfo,
     metaEvidence: metaEvidence,
     status: status,
     formattedStatus: mapTransactionStatus(
@@ -250,9 +276,9 @@ export function useTransactionDetails({ id, contractAddress }: Props) {
     queryFn: async () => {
       if (!client) return undefined;
 
-      const [details, arbitratorAddress] = await Promise.all([
+      const [details, arbitratorInfo] = await Promise.all([
         fetchDetails(client, contractAddress, id),
-        fetchArbitrator(client, contractAddress),
+        fetchArbitratorInfo(client, contractAddress),
       ]);
 
       const disputeId = details[details.length - 5];
@@ -260,7 +286,7 @@ export function useTransactionDetails({ id, contractAddress }: Props) {
       const timelineEventsLogs = await fetchTimelineEvents(
         client,
         contractAddress,
-        arbitratorAddress,
+        arbitratorInfo.address,
         id,
         disputeId as bigint
       );
@@ -311,6 +337,7 @@ export function useTransactionDetails({ id, contractAddress }: Props) {
         disputeId as bigint,
         blockTimestamps[0], //we can rely on the order of Promise.all, so we can use the first timestamp for the createdAt date
         contractAddress,
+        arbitratorInfo,
         metaEvidence,
         details[details.length - 1] as number, // status
         Number(details[details.length - 2]), //last interaction
diff --git a/src/model/ArbitratorInfo.ts b/src/model/ArbitratorInfo.ts
new file mode 100644
index 0000000..5ada230
--- /dev/null
+++ b/src/model/ArbitratorInfo.ts
@@ -0,0 +1,5 @@
+export interface ArbitratorInfo {
+  address: `0x${string}`;
+  extraData: `0x${string}`;
+  arbitrationCost: bigint;
+}
diff --git a/src/model/Transaction.ts b/src/model/Transaction.ts
index 06d3d10..491b9b1 100644
--- a/src/model/Transaction.ts
+++ b/src/model/Transaction.ts
@@ -1,3 +1,4 @@
+import type { ArbitratorInfo } from "./ArbitratorInfo";
 import type { MetaEvidence } from "./MetaEvidence";
 import type { TimelineEvent } from "./TimelineEvent";
 
@@ -44,6 +45,7 @@ export interface TransactionMini extends BaseTransaction {
 
 //Used for detailed view
 export interface Transaction extends BaseTransaction {
+  arbitratorInfo: ArbitratorInfo;
   amountInEscrow: string;
   disputeId: bigint;
   blockExplorerLink: string;

From b2a03f2f019c034b522eab082d1f0cd8bfa904cc Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Tue, 2 Sep 2025 20:43:33 +0100
Subject: [PATCH 06/20] feat: add RaiseDispute modal

---
 .../TransactionDetails/Actions/Actions.tsx    | 14 ++++
 .../Actions/RaiseDispute/RaiseDispute.tsx     | 74 +++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx

diff --git a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
index 0444ca7..9494ca8 100644
--- a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
@@ -5,6 +5,7 @@ import Reimburse from "./Reimburse/Reimburse";
 import Execute from "./Execute/Execute";
 import { useState } from "react";
 import ErrorAlert from "./Common/ErrorAlert/ErrorAlert";
+import RaiseDispute from "./RaiseDispute/RaiseDispute";
 
 const Container = styled.div`
   display: flex;
@@ -15,6 +16,7 @@ const Container = styled.div`
 const ActionsContainer = styled.div`
   display: flex;
   justify-content: center;
+  gap: 16px;
 `;
 
 interface Props {
@@ -59,6 +61,10 @@ export default function Actions({ transaction, isBuyer }: Props) {
     transaction.status === TransactionStatus.NoDispute &&
     hasTimedOut;
 
+  //Show raise dispute button if there is no dispute already and the transaction has not timed out
+  const showRaiseDisputeButton =
+    transaction.status === TransactionStatus.NoDispute && !hasTimedOut;
+
   return (
     <Container>
       {isExecuteError && <ErrorAlert />}
@@ -93,6 +99,14 @@ export default function Actions({ transaction, isBuyer }: Props) {
             setIsExecuteError={setIsExecuteError}
           />
         )}
+
+        {showRaiseDisputeButton && (
+          <RaiseDispute
+            transactionId={transaction.id}
+            contractAddress={transaction.arbitrableAddress}
+            arbitrationCost={transaction.arbitratorInfo.arbitrationCost}
+          />
+        )}
       </ActionsContainer>
     </Container>
   );
diff --git a/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx b/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx
new file mode 100644
index 0000000..b54ec9f
--- /dev/null
+++ b/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx
@@ -0,0 +1,74 @@
+import { Button } from "@kleros/ui-components-library";
+import { StyledModal } from "components/Common/Modal/StyledModal";
+import { useMemo, useState } from "react";
+import { StyledP } from "../Common/StyledElements/StyledElements";
+import { formatUnits } from "viem";
+import styled from "styled-components";
+
+const StyledButton = styled(Button)`
+  align-self: center;
+`;
+
+interface Props {
+  transactionId: bigint;
+  contractAddress: string;
+  arbitrationCost: bigint;
+}
+
+export default function RaiseDispute({
+  transactionId,
+  contractAddress,
+  arbitrationCost,
+}: Props) {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const transactionConfig = useMemo(() => {
+    return {
+      address: contractAddress as `0x${string}`,
+      args: [transactionId],
+    } as const;
+  }, [transactionId, contractAddress]);
+
+  const formattedCost = useMemo(
+    () => formatUnits(arbitrationCost, 18),
+    [arbitrationCost]
+  );
+
+  return (
+    <>
+      <StyledModal
+        width="750px"
+        isOpen={isOpen}
+        isDismissable
+        onOpenChange={() => setIsOpen(false)}
+      >
+        <StyledP>Arbitration cost: {formattedCost} ETH</StyledP>
+
+        <p>
+          By raising a dispute you are petitioning for the full remaining
+          balance.
+          <br />
+          You will need to pay the arbitration cost. This fee is refunded if you
+          win the dispute.
+          <br />
+          The dispute will be evaluated by the Kleros jurors.
+        </p>
+
+        <StyledButton
+          text="Pay fee"
+          small
+          onPress={() => {}}
+          // isDisabled={isPaying}
+          // isLoading={isPaying}
+        />
+      </StyledModal>
+
+      <Button
+        small
+        text="Raise dispute"
+        variant="tertiary"
+        onPress={() => setIsOpen(true)}
+      />
+    </>
+  );
+}

From 75f44d66f34589212fcb34daa66709ca1ca69668 Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Wed, 3 Sep 2025 18:39:07 +0100
Subject: [PATCH 07/20] feat: allow one party to pay the arbitration cost and
 start the process of raising a dispute

---
 .../TransactionDetails/Actions/Actions.tsx    |   2 +
 .../Actions/RaiseDispute/RaiseDispute.tsx     | 132 +++++++++++++++++-
 2 files changed, 130 insertions(+), 4 deletions(-)

diff --git a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
index 9494ca8..58891ee 100644
--- a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
@@ -105,6 +105,8 @@ export default function Actions({ transaction, isBuyer }: Props) {
             transactionId={transaction.id}
             contractAddress={transaction.arbitrableAddress}
             arbitrationCost={transaction.arbitratorInfo.arbitrationCost}
+            isNative={transaction.metaEvidence.token?.ticker === "ETH"}
+            isBuyer={isBuyer}
           />
         )}
       </ActionsContainer>
diff --git a/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx b/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx
index b54ec9f..1220fad 100644
--- a/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx
@@ -4,6 +4,22 @@ import { useMemo, useState } from "react";
 import { StyledP } from "../Common/StyledElements/StyledElements";
 import { formatUnits } from "viem";
 import styled from "styled-components";
+import {
+  useSimulateMultipleArbitrableTokenTransactionPayArbitrationFeeByReceiver,
+  useSimulateMultipleArbitrableTokenTransactionPayArbitrationFeeBySender,
+  useSimulateMultipleArbitrableTransactionPayArbitrationFeeByReceiver,
+  useSimulateMultipleArbitrableTransactionPayArbitrationFeeBySender,
+  useWriteMultipleArbitrableTokenTransactionPayArbitrationFeeByReceiver,
+  useWriteMultipleArbitrableTokenTransactionPayArbitrationFeeBySender,
+  useWriteMultipleArbitrableTransactionPayArbitrationFeeByReceiver,
+  useWriteMultipleArbitrableTransactionPayArbitrationFeeBySender,
+} from "config/contracts/generated";
+import { useAccount, useClient } from "wagmi";
+import ErrorAlert from "../Common/ErrorAlert/ErrorAlert";
+import { useQueryClient } from "@tanstack/react-query";
+import { isUserRejectedRequestError } from "utils/common";
+import { waitForTransactionReceipt } from "viem/actions";
+import { QUERY_KEYS } from "config/queryKeys";
 
 const StyledButton = styled(Button)`
   align-self: center;
@@ -13,27 +29,133 @@ interface Props {
   transactionId: bigint;
   contractAddress: string;
   arbitrationCost: bigint;
+  isNative: boolean;
+  isBuyer: boolean;
 }
 
 export default function RaiseDispute({
   transactionId,
   contractAddress,
   arbitrationCost,
+  isNative,
+  isBuyer,
 }: Props) {
+  const queryClient = useQueryClient();
+  const client = useClient();
+  const { address } = useAccount();
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isPayingFee, setIsPayingFee] = useState<boolean>(false);
+  const [isError, setIsError] = useState<boolean>(false);
 
   const transactionConfig = useMemo(() => {
     return {
       address: contractAddress as `0x${string}`,
       args: [transactionId],
+      value: arbitrationCost,
+      account: address, //By default this is the account used, but set it so if the user switches accounts after the component is rendered, the simulation will use the correct account
+      query: { enabled: false }, //Only simulate when we want
     } as const;
-  }, [transactionId, contractAddress]);
+  }, [contractAddress, transactionId, arbitrationCost, address]);
 
   const formattedCost = useMemo(
     () => formatUnits(arbitrationCost, 18),
     [arbitrationCost]
   );
 
+  const { refetch: refetchNativeSenderSimulateData } =
+    useSimulateMultipleArbitrableTransactionPayArbitrationFeeBySender({
+      ...transactionConfig,
+    });
+
+  const { refetch: refetchTokenSenderSimulateData } =
+    useSimulateMultipleArbitrableTokenTransactionPayArbitrationFeeBySender({
+      ...transactionConfig,
+    });
+
+  const { refetch: refetchNativeReceiverSimulateData } =
+    useSimulateMultipleArbitrableTransactionPayArbitrationFeeByReceiver({
+      ...transactionConfig,
+    });
+
+  const { refetch: refetchTokenReceiverSimulateData } =
+    useSimulateMultipleArbitrableTokenTransactionPayArbitrationFeeByReceiver({
+      ...transactionConfig,
+    });
+
+  const { writeContractAsync: nativeSenderPayFee } =
+    useWriteMultipleArbitrableTransactionPayArbitrationFeeBySender();
+  const { writeContractAsync: tokenSenderPayFee } =
+    useWriteMultipleArbitrableTokenTransactionPayArbitrationFeeBySender();
+  const { writeContractAsync: nativeReceiverPayFee } =
+    useWriteMultipleArbitrableTransactionPayArbitrationFeeByReceiver();
+  const { writeContractAsync: tokenReceiverPayFee } =
+    useWriteMultipleArbitrableTokenTransactionPayArbitrationFeeByReceiver();
+
+  const handlePayFee = async () => {
+    setIsError(false);
+
+    if (!client) {
+      setIsError(true);
+      return;
+    }
+
+    setIsPayingFee(true);
+    let hash;
+
+    try {
+      if (isNative) {
+        const { data: nativeSimulationData } = isBuyer
+          ? await refetchNativeSenderSimulateData()
+          : await refetchNativeReceiverSimulateData();
+
+        if (nativeSimulationData?.request) {
+          hash = isBuyer
+            ? await nativeSenderPayFee(nativeSimulationData.request)
+            : await nativeReceiverPayFee(nativeSimulationData.request);
+        } else {
+          setIsPayingFee(false);
+          setIsError(true);
+          return;
+        }
+      } else {
+        const { data: tokenSimulationData } = isBuyer
+          ? await refetchTokenSenderSimulateData()
+          : await refetchTokenReceiverSimulateData();
+
+        if (tokenSimulationData?.request) {
+          hash = isBuyer
+            ? await tokenSenderPayFee(tokenSimulationData.request)
+            : await tokenReceiverPayFee(tokenSimulationData.request);
+        } else {
+          setIsPayingFee(false);
+          setIsError(true);
+          return;
+        }
+      }
+
+      //Wait for the transaction confirmation before performing the details refresh
+      await waitForTransactionReceipt(client, { hash: hash });
+
+      queryClient.invalidateQueries({
+        queryKey: [
+          QUERY_KEYS.transactionDetails,
+          transactionId.toString(),
+          contractAddress,
+        ],
+      });
+      setIsOpen(false);
+      setIsPayingFee(false);
+    } catch (error) {
+      console.error(error);
+
+      if (!isUserRejectedRequestError(error)) {
+        setIsError(true);
+      }
+
+      setIsPayingFee(false);
+    }
+  };
+
   return (
     <>
       <StyledModal
@@ -42,6 +164,8 @@ export default function RaiseDispute({
         isDismissable
         onOpenChange={() => setIsOpen(false)}
       >
+        {isError && <ErrorAlert />}
+
         <StyledP>Arbitration cost: {formattedCost} ETH</StyledP>
 
         <p>
@@ -57,9 +181,9 @@ export default function RaiseDispute({
         <StyledButton
           text="Pay fee"
           small
-          onPress={() => {}}
-          // isDisabled={isPaying}
-          // isLoading={isPaying}
+          isDisabled={isPayingFee}
+          isLoading={isPayingFee}
+          onPress={() => handlePayFee()}
         />
       </StyledModal>
 

From 3f9df5b09e971b27d8974798e13f8c00f3a1d33b Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Thu, 4 Sep 2025 18:48:58 +0100
Subject: [PATCH 08/20] refactor: minor update to transaction action components

---
 .../TransactionDetails/Actions/Execute/Execute.tsx        | 8 +++-----
 .../Transactions/TransactionDetails/Actions/Pay/Pay.tsx   | 8 +++-----
 .../TransactionDetails/Actions/Reimburse/Reimburse.tsx    | 8 +++-----
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/components/Transactions/TransactionDetails/Actions/Execute/Execute.tsx b/src/components/Transactions/TransactionDetails/Actions/Execute/Execute.tsx
index 44166f7..ef42ed7 100644
--- a/src/components/Transactions/TransactionDetails/Actions/Execute/Execute.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/Execute/Execute.tsx
@@ -34,21 +34,19 @@ export default function Execute({
     return {
       address: contractAddress as `0x${string}`,
       args: [transactionId],
+      account: address,
+      query: { enabled: false }, //Only simulate when we want
     } as const;
-  }, [transactionId, contractAddress]);
+  }, [contractAddress, transactionId, address]);
 
   const { refetch: refetchNativeSimulateData } =
     useSimulateMultipleArbitrableTransactionExecuteTransaction({
       ...transactionConfig,
-      account: address,
-      query: { enabled: false }, //Only simulate when we want
     });
 
   const { refetch: refetchTokenSimulateData } =
     useSimulateMultipleArbitrableTokenTransactionExecuteTransaction({
       ...transactionConfig,
-      account: address,
-      query: { enabled: false }, //Only simulate when we want
     });
 
   const { writeContractAsync: executeNativeTransaction } =
diff --git a/src/components/Transactions/TransactionDetails/Actions/Pay/Pay.tsx b/src/components/Transactions/TransactionDetails/Actions/Pay/Pay.tsx
index 68c0c9e..7d1ed4b 100644
--- a/src/components/Transactions/TransactionDetails/Actions/Pay/Pay.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/Pay/Pay.tsx
@@ -49,21 +49,19 @@ export default function Pay({
     return {
       address: contractAddress as `0x${string}`,
       args: [transactionId, parseUnits(amount.toString(), decimals)],
+      account: address, //By default this is the account used, but set it so if the user switches accounts after the component is rendered, the simulation will use the correct account
+      query: { enabled: false }, //Only simulate when we want
     } as const;
-  }, [transactionId, amount, decimals, contractAddress]);
+  }, [contractAddress, transactionId, amount, decimals, address]);
 
   const { refetch: refetchNativeSimulateData } =
     useSimulateMultipleArbitrableTransactionPay({
       ...transactionConfig,
-      account: address, //By default this is the account used, but set it so if the user switches accounts after the component is rendered, the simulation will use the correct account
-      query: { enabled: false }, //Only simulate when we want
     });
 
   const { refetch: refetchTokenSimulateData } =
     useSimulateMultipleArbitrableTokenTransactionPay({
       ...transactionConfig,
-      account: address,
-      query: { enabled: false }, //Only simulate when we want
     });
 
   const { writeContractAsync: payNativeTransaction } =
diff --git a/src/components/Transactions/TransactionDetails/Actions/Reimburse/Reimburse.tsx b/src/components/Transactions/TransactionDetails/Actions/Reimburse/Reimburse.tsx
index 422c304..73b44e2 100644
--- a/src/components/Transactions/TransactionDetails/Actions/Reimburse/Reimburse.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/Reimburse/Reimburse.tsx
@@ -47,21 +47,19 @@ export default function Reimburse({
     return {
       address: contractAddress as `0x${string}`,
       args: [transactionId, parseUnits(amount.toString(), decimals)],
+      account: address,
+      query: { enabled: false }, //Only simulate when we want
     } as const;
-  }, [transactionId, amount, decimals, contractAddress]);
+  }, [contractAddress, transactionId, amount, decimals, address]);
 
   const { refetch: refetchReimburseNativeSimulateData } =
     useSimulateMultipleArbitrableTransactionReimburse({
       ...transactionConfig,
-      account: address,
-      query: { enabled: false }, //Only simulate when we want
     });
 
   const { refetch: refetchReimburseTokenSimulateData } =
     useSimulateMultipleArbitrableTokenTransactionReimburse({
       ...transactionConfig,
-      account: address,
-      query: { enabled: false }, //Only simulate when we want
     });
 
   const { writeContractAsync: reimburseNativeTransaction } =

From 0814c857d7b9c54f15d4c96bc39f9c1c5fd5ef34 Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Thu, 4 Sep 2025 18:49:35 +0100
Subject: [PATCH 09/20] feat: update transaction status to include arbitration
 fee requirements

---
 src/model/Transaction.ts | 2 ++
 src/utils/transaction.ts | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/model/Transaction.ts b/src/model/Transaction.ts
index 491b9b1..0f0e24b 100644
--- a/src/model/Transaction.ts
+++ b/src/model/Transaction.ts
@@ -14,6 +14,8 @@ export type FormattedTransactionStatus =
   | "Pending"
   | "Completed"
   | "Disputed"
+  | "Sender has to deposit arbitration fee"
+  | "Receiver has to deposit arbitration fee"
   | "Unknown";
 
 export enum DisputeRuling {
diff --git a/src/utils/transaction.ts b/src/utils/transaction.ts
index 4223164..449a74e 100644
--- a/src/utils/transaction.ts
+++ b/src/utils/transaction.ts
@@ -27,8 +27,9 @@ export const mapTransactionStatus = (
     case "DisputeCreated":
       return "Disputed";
     case "WaitingSender":
+      return "Sender has to deposit arbitration fee";
     case "WaitingReceiver":
-      return "Pending";
+      return "Receiver has to deposit arbitration fee";
     case "NoDispute":
       //Check if the transaction has been paid (amount in escrow is 0)
       return amountInEscrow === "0" ? "Completed" : "Pending";

From 1f5bb9b8d4ceb2d30599217e1f8412415a443980 Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Thu, 4 Sep 2025 21:56:34 +0100
Subject: [PATCH 10/20] feat: integrate countdown timer for arbitration fee
 deposit

---
 package.json                                  |  1 +
 .../TransactionDetails/Actions/Actions.tsx    | 14 +++-
 .../Actions/RaiseDispute/RaiseDispute.tsx     | 84 +++++++++++++++----
 src/hooks/useTransactionDetails.ts            | 52 +++++++-----
 src/model/ArbitrationInfo.ts                  |  6 ++
 src/model/ArbitratorInfo.ts                   |  5 --
 src/model/Transaction.ts                      |  4 +-
 yarn.lock                                     | 15 +++-
 8 files changed, 133 insertions(+), 48 deletions(-)
 create mode 100644 src/model/ArbitrationInfo.ts
 delete mode 100644 src/model/ArbitratorInfo.ts

diff --git a/package.json b/package.json
index 824bce4..e62a190 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@tanstack/react-query": "^5.76.1",
     "alchemy-sdk": "^3.6.1",
     "react": "^18.2.55",
+    "react-countdown": "^2.3.6",
     "react-dom": "^18.2.55",
     "react-router": "^7.6.0",
     "styled-components": "^6.1.18",
diff --git a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
index 58891ee..1c70a6b 100644
--- a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
@@ -65,6 +65,14 @@ export default function Actions({ transaction, isBuyer }: Props) {
   const showRaiseDisputeButton =
     transaction.status === TransactionStatus.NoDispute && !hasTimedOut;
 
+  //Show deposit arbitration fee button (RaiseDispute component) to the user only if he is the party that needs to deposit the arbitration fee
+  const showDepositArbitrationFeeButton =
+    (transaction.status === TransactionStatus.WaitingSender && isBuyer) ||
+    (transaction.status === TransactionStatus.WaitingReceiver && !isBuyer);
+
+  const timeLeftToDepositFee =
+    transaction.lastInteraction + transaction.arbitrationInfo.feeTimeout;
+
   return (
     <Container>
       {isExecuteError && <ErrorAlert />}
@@ -100,13 +108,15 @@ export default function Actions({ transaction, isBuyer }: Props) {
           />
         )}
 
-        {showRaiseDisputeButton && (
+        {(showRaiseDisputeButton || showDepositArbitrationFeeButton) && (
           <RaiseDispute
             transactionId={transaction.id}
             contractAddress={transaction.arbitrableAddress}
-            arbitrationCost={transaction.arbitratorInfo.arbitrationCost}
+            arbitrationCost={transaction.arbitrationInfo.arbitrationCost}
             isNative={transaction.metaEvidence.token?.ticker === "ETH"}
             isBuyer={isBuyer}
+            hasToDepositFee={showDepositArbitrationFeeButton}
+            timeLeftToDepositFee={timeLeftToDepositFee}
           />
         )}
       </ActionsContainer>
diff --git a/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx b/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx
index 1220fad..62bdb63 100644
--- a/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx
@@ -1,6 +1,6 @@
 import { Button } from "@kleros/ui-components-library";
 import { StyledModal } from "components/Common/Modal/StyledModal";
-import { useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { StyledP } from "../Common/StyledElements/StyledElements";
 import { formatUnits } from "viem";
 import styled from "styled-components";
@@ -20,6 +20,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { isUserRejectedRequestError } from "utils/common";
 import { waitForTransactionReceipt } from "viem/actions";
 import { QUERY_KEYS } from "config/queryKeys";
+import Countdown from "react-countdown";
 
 const StyledButton = styled(Button)`
   align-self: center;
@@ -31,14 +32,46 @@ interface Props {
   arbitrationCost: bigint;
   isNative: boolean;
   isBuyer: boolean;
+  hasToDepositFee: boolean;
+  timeLeftToDepositFee: number;
 }
 
+const FeeDepositCoundown = React.memo(
+  ({ timeLeftToDepositFee }: { timeLeftToDepositFee: number }) => {
+    return (
+      <StyledP>
+        Time left:{" "}
+        <Countdown
+          date={timeLeftToDepositFee * 1000}
+          renderer={({ days, hours, minutes, seconds }) => {
+            return (
+              <span>
+                {days}d {hours}h {minutes}m {seconds}s
+              </span>
+            );
+          }}
+        />
+      </StyledP>
+    );
+  }
+);
+
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+`;
+
 export default function RaiseDispute({
   transactionId,
   contractAddress,
   arbitrationCost,
   isNative,
   isBuyer,
+  hasToDepositFee,
+  timeLeftToDepositFee,
 }: Props) {
   const queryClient = useQueryClient();
   const client = useClient();
@@ -168,18 +201,29 @@ export default function RaiseDispute({
 
         <StyledP>Arbitration cost: {formattedCost} ETH</StyledP>
 
-        <p>
-          By raising a dispute you are petitioning for the full remaining
-          balance.
-          <br />
-          You will need to pay the arbitration cost. This fee is refunded if you
-          win the dispute.
-          <br />
-          The dispute will be evaluated by the Kleros jurors.
-        </p>
+        {hasToDepositFee && (
+          <FeeDepositCoundown timeLeftToDepositFee={timeLeftToDepositFee} />
+        )}
+
+        {hasToDepositFee ? (
+          <p>
+            In order to not forfeit the value in escrow, you must deposit the
+            arbitration fee. It will be refunded if you win the dispute.
+          </p>
+        ) : (
+          <p>
+            By raising a dispute you are petitioning for the full remaining
+            balance.
+            <br />
+            You will need to deposit the arbitration cost. This is refunded if
+            you win the dispute.
+            <br />
+            The dispute will be evaluated by the Kleros jurors.
+          </p>
+        )}
 
         <StyledButton
-          text="Pay fee"
+          text="Deposit"
           small
           isDisabled={isPayingFee}
           isLoading={isPayingFee}
@@ -187,12 +231,18 @@ export default function RaiseDispute({
         />
       </StyledModal>
 
-      <Button
-        small
-        text="Raise dispute"
-        variant="tertiary"
-        onPress={() => setIsOpen(true)}
-      />
+      <ButtonContainer>
+        {hasToDepositFee && (
+          <FeeDepositCoundown timeLeftToDepositFee={timeLeftToDepositFee} />
+        )}
+
+        <Button
+          small
+          text={hasToDepositFee ? "Deposit arbitration fee" : "Raise dispute"}
+          variant="tertiary"
+          onPress={() => setIsOpen(true)}
+        />
+      </ButtonContainer>
     </>
   );
 }
diff --git a/src/hooks/useTransactionDetails.ts b/src/hooks/useTransactionDetails.ts
index 430ec4d..8af6c74 100644
--- a/src/hooks/useTransactionDetails.ts
+++ b/src/hooks/useTransactionDetails.ts
@@ -31,7 +31,7 @@ import {
 } from "config/contracts/events";
 import type { Evidence } from "model/Evidence";
 import type { TimelineEvent } from "model/TimelineEvent";
-import type { ArbitratorInfo } from "model/ArbitratorInfo";
+import type { ArbitrationInfo } from "model/ArbitrationInfo";
 import { KLEROS_LIQUID_ABI } from "config/contracts/abi/klerosLiquid";
 
 async function fetchDetails(
@@ -47,7 +47,7 @@ async function fetchDetails(
   });
 }
 
-async function fetchArbitratorInfo(
+async function fetchArbitrationInfo(
   client: Client,
   contractAddress: `0x${string}`
 ) {
@@ -56,25 +56,35 @@ async function fetchArbitratorInfo(
     address: contractAddress,
   };
 
-  const [address, extraData] = await Promise.all([
-    await readContract(client, {
-      ...transactionParams,
-      functionName: "arbitrator" as const,
-    }),
-    await readContract(client, {
-      ...transactionParams,
-      functionName: "arbitratorExtraData" as const,
-    }),
-  ]);
+  const [arbitratorAddress, arbitratorExtraData, feeTimeout] =
+    await Promise.all([
+      await readContract(client, {
+        ...transactionParams,
+        functionName: "arbitrator" as const,
+      }),
+      await readContract(client, {
+        ...transactionParams,
+        functionName: "arbitratorExtraData" as const,
+      }),
+      await readContract(client, {
+        ...transactionParams,
+        functionName: "feeTimeout" as const,
+      }),
+    ]);
 
   const arbitrationCost = await readContract(client, {
-    address: address,
+    address: arbitratorAddress,
     abi: KLEROS_LIQUID_ABI,
     functionName: "arbitrationCost" as const,
-    args: [extraData],
+    args: [arbitratorExtraData],
   });
 
-  return { address, extraData, arbitrationCost };
+  return {
+    arbitratorAddress,
+    arbitratorExtraData,
+    arbitrationCost,
+    feeTimeout: Number(feeTimeout),
+  };
 }
 
 async function fetchTimelineEvents(
@@ -203,7 +213,7 @@ function mapToTransaction(
   disputeId: bigint,
   blockTimestamp: bigint,
   contractAddress: `0x${string}`,
-  arbitratorInfo: ArbitratorInfo,
+  arbitrationInfo: ArbitrationInfo,
   metaEvidence: MetaEvidence,
   status: number,
   lastInteraction: number,
@@ -238,7 +248,7 @@ function mapToTransaction(
       day: "numeric",
     }),
     arbitrableAddress: contractAddress,
-    arbitratorInfo: arbitratorInfo,
+    arbitrationInfo: arbitrationInfo,
     metaEvidence: metaEvidence,
     status: status,
     formattedStatus: mapTransactionStatus(
@@ -276,9 +286,9 @@ export function useTransactionDetails({ id, contractAddress }: Props) {
     queryFn: async () => {
       if (!client) return undefined;
 
-      const [details, arbitratorInfo] = await Promise.all([
+      const [details, arbitrationInfo] = await Promise.all([
         fetchDetails(client, contractAddress, id),
-        fetchArbitratorInfo(client, contractAddress),
+        fetchArbitrationInfo(client, contractAddress),
       ]);
 
       const disputeId = details[details.length - 5];
@@ -286,7 +296,7 @@ export function useTransactionDetails({ id, contractAddress }: Props) {
       const timelineEventsLogs = await fetchTimelineEvents(
         client,
         contractAddress,
-        arbitratorInfo.address,
+        arbitrationInfo.arbitratorAddress,
         id,
         disputeId as bigint
       );
@@ -337,7 +347,7 @@ export function useTransactionDetails({ id, contractAddress }: Props) {
         disputeId as bigint,
         blockTimestamps[0], //we can rely on the order of Promise.all, so we can use the first timestamp for the createdAt date
         contractAddress,
-        arbitratorInfo,
+        arbitrationInfo,
         metaEvidence,
         details[details.length - 1] as number, // status
         Number(details[details.length - 2]), //last interaction
diff --git a/src/model/ArbitrationInfo.ts b/src/model/ArbitrationInfo.ts
new file mode 100644
index 0000000..df4b9ba
--- /dev/null
+++ b/src/model/ArbitrationInfo.ts
@@ -0,0 +1,6 @@
+export interface ArbitrationInfo {
+  arbitratorAddress: `0x${string}`;
+  arbitratorExtraData: `0x${string}`;
+  arbitrationCost: bigint;
+  feeTimeout: number;
+}
diff --git a/src/model/ArbitratorInfo.ts b/src/model/ArbitratorInfo.ts
deleted file mode 100644
index 5ada230..0000000
--- a/src/model/ArbitratorInfo.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface ArbitratorInfo {
-  address: `0x${string}`;
-  extraData: `0x${string}`;
-  arbitrationCost: bigint;
-}
diff --git a/src/model/Transaction.ts b/src/model/Transaction.ts
index 0f0e24b..cf5aa1d 100644
--- a/src/model/Transaction.ts
+++ b/src/model/Transaction.ts
@@ -1,4 +1,4 @@
-import type { ArbitratorInfo } from "./ArbitratorInfo";
+import type { ArbitrationInfo } from "./ArbitrationInfo";
 import type { MetaEvidence } from "./MetaEvidence";
 import type { TimelineEvent } from "./TimelineEvent";
 
@@ -47,7 +47,7 @@ export interface TransactionMini extends BaseTransaction {
 
 //Used for detailed view
 export interface Transaction extends BaseTransaction {
-  arbitratorInfo: ArbitratorInfo;
+  arbitrationInfo: ArbitrationInfo;
   amountInEscrow: string;
   disputeId: bigint;
   blockExplorerLink: string;
diff --git a/yarn.lock b/yarn.lock
index 6261aa5..738bab2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6339,6 +6339,7 @@ __metadata:
     eslint-plugin-react-refresh: "npm:^0.4.19"
     globals: "npm:^16.0.0"
     react: "npm:^18.2.55"
+    react-countdown: "npm:^2.3.6"
     react-dom: "npm:^18.2.55"
     react-router: "npm:^7.6.0"
     styled-components: "npm:^6.1.18"
@@ -8437,7 +8438,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.1":
+"prop-types@npm:^15.6.1, prop-types@npm:^15.7.2":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -8618,6 +8619,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-countdown@npm:^2.3.6":
+  version: 2.3.6
+  resolution: "react-countdown@npm:2.3.6"
+  dependencies:
+    prop-types: "npm:^15.7.2"
+  peerDependencies:
+    react: ">= 15"
+    react-dom: ">= 15"
+  checksum: 10c0/defb75cb9802c499eb0d5f6c8c6e4269de1005f9c05d5162bccf45063782fd2f5f87acd95d11f70e623fa75085a546b9d0fb0df27c5287ed6a86334342d903cf
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:^18.0.0, react-dom@npm:^18.2.55":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"

From 491d4f7bde08bf74dc669fd1a7f6cce5548abb26 Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Fri, 5 Sep 2025 21:32:54 +0100
Subject: [PATCH 11/20] feat: implement withdraw functionality for both parties

---
 .../TransactionDetails/Actions/Actions.tsx    |  28 ++-
 .../FeeDepositCountdown.tsx                   |  24 +++
 .../Common/StyledElements/StyledElements.ts   |   9 +
 .../Actions/RaiseDispute/RaiseDispute.tsx     |  49 ++---
 .../Actions/Withdraw/Withdraw.tsx             | 184 ++++++++++++++++++
 5 files changed, 252 insertions(+), 42 deletions(-)
 create mode 100644 src/components/Transactions/TransactionDetails/Actions/Common/FeeDepositCountdown/FeeDepositCountdown.tsx
 create mode 100644 src/components/Transactions/TransactionDetails/Actions/Withdraw/Withdraw.tsx

diff --git a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
index 1c70a6b..1af25fb 100644
--- a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
@@ -6,6 +6,7 @@ import Execute from "./Execute/Execute";
 import { useState } from "react";
 import ErrorAlert from "./Common/ErrorAlert/ErrorAlert";
 import RaiseDispute from "./RaiseDispute/RaiseDispute";
+import Withdraw from "./Withdraw/Withdraw";
 
 const Container = styled.div`
   display: flex;
@@ -25,7 +26,8 @@ interface Props {
 }
 
 export default function Actions({ transaction, isBuyer }: Props) {
-  const [isExecuteError, setIsExecuteError] = useState<boolean>(false);
+  //For actions that do not have their own modal to show an error
+  const [isActionError, setIsActionError] = useState<boolean>(false);
 
   const currentTime = Date.now() / 1000;
   const isInBufferPeriod =
@@ -70,12 +72,17 @@ export default function Actions({ transaction, isBuyer }: Props) {
     (transaction.status === TransactionStatus.WaitingSender && isBuyer) ||
     (transaction.status === TransactionStatus.WaitingReceiver && !isBuyer);
 
-  const timeLeftToDepositFee =
+  const depositFeeDeadline =
     transaction.lastInteraction + transaction.arbitrationInfo.feeTimeout;
 
+  //Show withdraw button if the user is the party that is waiting for the other to deposit the arbitration fee
+  const showWithdrawButton =
+    (transaction.status === TransactionStatus.WaitingSender && !isBuyer) ||
+    (transaction.status === TransactionStatus.WaitingReceiver && isBuyer);
+
   return (
     <Container>
-      {isExecuteError && <ErrorAlert />}
+      {isActionError && <ErrorAlert />}
 
       <ActionsContainer>
         {showPayButton && (
@@ -104,7 +111,7 @@ export default function Actions({ transaction, isBuyer }: Props) {
             transactionId={transaction.id}
             contractAddress={transaction.arbitrableAddress}
             isNative={transaction.metaEvidence.token?.ticker === "ETH"}
-            setIsExecuteError={setIsExecuteError}
+            setIsExecuteError={setIsActionError}
           />
         )}
 
@@ -116,7 +123,18 @@ export default function Actions({ transaction, isBuyer }: Props) {
             isNative={transaction.metaEvidence.token?.ticker === "ETH"}
             isBuyer={isBuyer}
             hasToDepositFee={showDepositArbitrationFeeButton}
-            timeLeftToDepositFee={timeLeftToDepositFee}
+            depositFeeDeadline={depositFeeDeadline}
+          />
+        )}
+
+        {showWithdrawButton && (
+          <Withdraw
+            transactionId={transaction.id}
+            contractAddress={transaction.arbitrableAddress}
+            isNative={transaction.metaEvidence.token?.ticker === "ETH"}
+            isBuyer={isBuyer}
+            depositFeeDeadline={depositFeeDeadline}
+            setIsWithdrawError={setIsActionError}
           />
         )}
       </ActionsContainer>
diff --git a/src/components/Transactions/TransactionDetails/Actions/Common/FeeDepositCountdown/FeeDepositCountdown.tsx b/src/components/Transactions/TransactionDetails/Actions/Common/FeeDepositCountdown/FeeDepositCountdown.tsx
new file mode 100644
index 0000000..446cca6
--- /dev/null
+++ b/src/components/Transactions/TransactionDetails/Actions/Common/FeeDepositCountdown/FeeDepositCountdown.tsx
@@ -0,0 +1,24 @@
+import Countdown from "react-countdown";
+import { StyledP } from "../StyledElements/StyledElements";
+
+interface Props {
+  depositFeeDeadline: number;
+}
+
+export default function FeeDepositCoundown({ depositFeeDeadline }: Props) {
+  return (
+    <StyledP>
+      Time left:{" "}
+      <Countdown
+        date={depositFeeDeadline * 1000}
+        renderer={({ days, hours, minutes, seconds }) => {
+          return (
+            <span>
+              {days}d {hours}h {minutes}m {seconds}s
+            </span>
+          );
+        }}
+      />
+    </StyledP>
+  );
+}
diff --git a/src/components/Transactions/TransactionDetails/Actions/Common/StyledElements/StyledElements.ts b/src/components/Transactions/TransactionDetails/Actions/Common/StyledElements/StyledElements.ts
index c8d8818..fa28358 100644
--- a/src/components/Transactions/TransactionDetails/Actions/Common/StyledElements/StyledElements.ts
+++ b/src/components/Transactions/TransactionDetails/Actions/Common/StyledElements/StyledElements.ts
@@ -14,4 +14,13 @@ export const StyledNumberField = styled(NumberField)`
 
 export const StyledP = styled.p`
   font-weight: bold;
+  text-align: justify;
+`;
+
+export const CustomActionButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
 `;
diff --git a/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx b/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx
index 62bdb63..8dc7248 100644
--- a/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/RaiseDispute/RaiseDispute.tsx
@@ -1,7 +1,10 @@
 import { Button } from "@kleros/ui-components-library";
 import { StyledModal } from "components/Common/Modal/StyledModal";
-import React, { useMemo, useState } from "react";
-import { StyledP } from "../Common/StyledElements/StyledElements";
+import { useMemo, useState } from "react";
+import {
+  CustomActionButtonContainer,
+  StyledP,
+} from "../Common/StyledElements/StyledElements";
 import { formatUnits } from "viem";
 import styled from "styled-components";
 import {
@@ -20,7 +23,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { isUserRejectedRequestError } from "utils/common";
 import { waitForTransactionReceipt } from "viem/actions";
 import { QUERY_KEYS } from "config/queryKeys";
-import Countdown from "react-countdown";
+import FeeDepositCoundown from "../Common/FeeDepositCountdown/FeeDepositCountdown";
 
 const StyledButton = styled(Button)`
   align-self: center;
@@ -33,37 +36,9 @@ interface Props {
   isNative: boolean;
   isBuyer: boolean;
   hasToDepositFee: boolean;
-  timeLeftToDepositFee: number;
+  depositFeeDeadline: number;
 }
 
-const FeeDepositCoundown = React.memo(
-  ({ timeLeftToDepositFee }: { timeLeftToDepositFee: number }) => {
-    return (
-      <StyledP>
-        Time left:{" "}
-        <Countdown
-          date={timeLeftToDepositFee * 1000}
-          renderer={({ days, hours, minutes, seconds }) => {
-            return (
-              <span>
-                {days}d {hours}h {minutes}m {seconds}s
-              </span>
-            );
-          }}
-        />
-      </StyledP>
-    );
-  }
-);
-
-const ButtonContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 16px;
-`;
-
 export default function RaiseDispute({
   transactionId,
   contractAddress,
@@ -71,7 +46,7 @@ export default function RaiseDispute({
   isNative,
   isBuyer,
   hasToDepositFee,
-  timeLeftToDepositFee,
+  depositFeeDeadline,
 }: Props) {
   const queryClient = useQueryClient();
   const client = useClient();
@@ -202,7 +177,7 @@ export default function RaiseDispute({
         <StyledP>Arbitration cost: {formattedCost} ETH</StyledP>
 
         {hasToDepositFee && (
-          <FeeDepositCoundown timeLeftToDepositFee={timeLeftToDepositFee} />
+          <FeeDepositCoundown depositFeeDeadline={depositFeeDeadline} />
         )}
 
         {hasToDepositFee ? (
@@ -231,9 +206,9 @@ export default function RaiseDispute({
         />
       </StyledModal>
 
-      <ButtonContainer>
+      <CustomActionButtonContainer>
         {hasToDepositFee && (
-          <FeeDepositCoundown timeLeftToDepositFee={timeLeftToDepositFee} />
+          <FeeDepositCoundown depositFeeDeadline={depositFeeDeadline} />
         )}
 
         <Button
@@ -242,7 +217,7 @@ export default function RaiseDispute({
           variant="tertiary"
           onPress={() => setIsOpen(true)}
         />
-      </ButtonContainer>
+      </CustomActionButtonContainer>
     </>
   );
 }
diff --git a/src/components/Transactions/TransactionDetails/Actions/Withdraw/Withdraw.tsx b/src/components/Transactions/TransactionDetails/Actions/Withdraw/Withdraw.tsx
new file mode 100644
index 0000000..47a2896
--- /dev/null
+++ b/src/components/Transactions/TransactionDetails/Actions/Withdraw/Withdraw.tsx
@@ -0,0 +1,184 @@
+import { Button } from "@kleros/ui-components-library";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  useSimulateMultipleArbitrableTokenTransactionTimeOutByReceiver,
+  useSimulateMultipleArbitrableTokenTransactionTimeOutBySender,
+  useSimulateMultipleArbitrableTransactionTimeOutByReceiver,
+  useSimulateMultipleArbitrableTransactionTimeOutBySender,
+  useWriteMultipleArbitrableTokenTransactionTimeOutByReceiver,
+  useWriteMultipleArbitrableTokenTransactionTimeOutBySender,
+  useWriteMultipleArbitrableTransactionTimeOutByReceiver,
+  useWriteMultipleArbitrableTransactionTimeOutBySender,
+} from "config/contracts/generated";
+import { QUERY_KEYS } from "config/queryKeys";
+import { useMemo, useState } from "react";
+import { isUserRejectedRequestError } from "utils/common";
+import { waitForTransactionReceipt } from "viem/actions";
+import { useAccount, useClient } from "wagmi";
+import {
+  CustomActionButtonContainer,
+  StyledP,
+} from "../Common/StyledElements/StyledElements";
+import FeeDepositCoundown from "../Common/FeeDepositCountdown/FeeDepositCountdown";
+import styled from "styled-components";
+
+const StyledInfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+interface Props {
+  transactionId: bigint;
+  contractAddress: string;
+  isNative: boolean;
+  isBuyer: boolean;
+  depositFeeDeadline: number;
+  setIsWithdrawError: (isError: boolean) => void;
+}
+
+export default function Withdraw({
+  transactionId,
+  contractAddress,
+  isNative,
+  isBuyer,
+  depositFeeDeadline,
+  setIsWithdrawError,
+}: Props) {
+  const queryClient = useQueryClient();
+  const client = useClient();
+  const { address } = useAccount();
+  const [isWithdrawing, setIsWithdrawing] = useState<boolean>(false);
+
+  const transactionConfig = useMemo(() => {
+    return {
+      address: contractAddress as `0x${string}`,
+      args: [transactionId],
+      account: address, //By default this is the account used, but set it so if the user switches accounts after the component is rendered, the simulation will use the correct account
+      query: { enabled: false }, //Only simulate when we want
+    } as const;
+  }, [contractAddress, transactionId, address]);
+
+  const currentTime = Date.now() / 1000;
+  const canWithdraw = useMemo(() => {
+    return currentTime > depositFeeDeadline;
+  }, [currentTime, depositFeeDeadline]);
+
+  const { refetch: refetchNativeSenderTimeoutSimulateData } =
+    useSimulateMultipleArbitrableTransactionTimeOutBySender({
+      ...transactionConfig,
+    });
+
+  const { refetch: refetchTokenSenderTimeoutSimulateData } =
+    useSimulateMultipleArbitrableTokenTransactionTimeOutBySender({
+      ...transactionConfig,
+    });
+
+  const { refetch: refetchNativeReceiverTimeoutSimulateData } =
+    useSimulateMultipleArbitrableTransactionTimeOutByReceiver({
+      ...transactionConfig,
+    });
+
+  const { refetch: refetchTokenReceiverTimeoutSimulateData } =
+    useSimulateMultipleArbitrableTokenTransactionTimeOutByReceiver({
+      ...transactionConfig,
+    });
+
+  const { writeContractAsync: nativeSenderTimeout } =
+    useWriteMultipleArbitrableTransactionTimeOutBySender();
+  const { writeContractAsync: tokenSenderTimeout } =
+    useWriteMultipleArbitrableTokenTransactionTimeOutBySender();
+  const { writeContractAsync: nativeReceiverTimeout } =
+    useWriteMultipleArbitrableTransactionTimeOutByReceiver();
+  const { writeContractAsync: tokenReceiverTimeout } =
+    useWriteMultipleArbitrableTokenTransactionTimeOutByReceiver();
+
+  const handleWithdraw = async () => {
+    setIsWithdrawError(false);
+
+    if (!client) {
+      setIsWithdrawError(true);
+      return;
+    }
+
+    setIsWithdrawing(true);
+    let hash;
+
+    try {
+      if (isNative) {
+        const { data: nativeSimulationData } = isBuyer
+          ? await refetchNativeSenderTimeoutSimulateData()
+          : await refetchNativeReceiverTimeoutSimulateData();
+
+        if (nativeSimulationData?.request) {
+          hash = isBuyer
+            ? await nativeSenderTimeout(nativeSimulationData.request)
+            : await nativeReceiverTimeout(nativeSimulationData.request);
+        } else {
+          setIsWithdrawing(false);
+          setIsWithdrawError(true);
+          return;
+        }
+      } else {
+        const { data: tokenSimulationData } = isBuyer
+          ? await refetchTokenSenderTimeoutSimulateData()
+          : await refetchTokenReceiverTimeoutSimulateData();
+
+        if (tokenSimulationData?.request) {
+          hash = isBuyer
+            ? await tokenSenderTimeout(tokenSimulationData.request)
+            : await tokenReceiverTimeout(tokenSimulationData.request);
+        } else {
+          setIsWithdrawing(false);
+          setIsWithdrawError(true);
+          return;
+        }
+      }
+
+      //Wait for the transaction confirmation before performing the details refresh
+      await waitForTransactionReceipt(client, { hash: hash });
+
+      queryClient.invalidateQueries({
+        queryKey: [
+          QUERY_KEYS.transactionDetails,
+          transactionId.toString(),
+          contractAddress,
+        ],
+      });
+      setIsWithdrawing(false);
+    } catch (error) {
+      console.error(error);
+
+      if (!isUserRejectedRequestError(error)) {
+        setIsWithdrawError(true);
+      }
+
+      setIsWithdrawing(false);
+    }
+  };
+
+  return (
+    <CustomActionButtonContainer>
+      <StyledInfoContainer>
+        {!canWithdraw && (
+          <FeeDepositCoundown depositFeeDeadline={depositFeeDeadline} />
+        )}
+
+        <StyledP>
+          {canWithdraw
+            ? "The other party failed to deposit the arbitration fee in time, thus forfeiting the value in escrow. You can now withdraw the funds."
+            : "The other party must deposit the arbitration fee in the allowed time frame, otherwise you will be able to withdraw the funds in escrow."}
+        </StyledP>
+      </StyledInfoContainer>
+
+      <Button
+        small
+        text="Withdraw"
+        onPress={handleWithdraw}
+        isDisabled={isWithdrawing || !canWithdraw}
+        isLoading={isWithdrawing}
+      />
+    </CustomActionButtonContainer>
+  );
+}

From b6cac45a598e0fbcf2f35c87701ab34a5debea21 Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Fri, 5 Sep 2025 22:44:12 +0100
Subject: [PATCH 12/20] feat: enhance transaction status and amount tags
 responsiveness

---
 .../TransactionCard/TransactionCard.tsx          | 13 +++++++++++++
 .../TransactionDetails/Header/Header.tsx         |  5 ++++-
 .../TransactionStatusTag/TransactionStatusTag.ts | 16 ++++++++++++++--
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/Transactions/TransactionCard/TransactionCard.tsx b/src/components/Transactions/TransactionCard/TransactionCard.tsx
index aa74d60..abd03ae 100644
--- a/src/components/Transactions/TransactionCard/TransactionCard.tsx
+++ b/src/components/Transactions/TransactionCard/TransactionCard.tsx
@@ -63,6 +63,18 @@ const AmountTag = styled(Tag)`
   pointer-events: none;
   text-transform: capitalize;
   font-weight: bold;
+  max-width: 50%;
+
+  p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.xs}) {
+    width: 100%;
+    max-width: 100%;
+  }
 `;
 
 interface Props {
@@ -80,6 +92,7 @@ export default function TransactionCard({ transaction }: Props) {
             active
             status={transaction.formattedStatus}
             text={transaction.formattedStatus}
+            forceMaxWidth
           />
           <AmountTag
             active
diff --git a/src/components/Transactions/TransactionDetails/Header/Header.tsx b/src/components/Transactions/TransactionDetails/Header/Header.tsx
index 1721f3c..84a4680 100644
--- a/src/components/Transactions/TransactionDetails/Header/Header.tsx
+++ b/src/components/Transactions/TransactionDetails/Header/Header.tsx
@@ -6,7 +6,7 @@ const HeaderContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  flex-wrap: wrap;
+  overflow: hidden;
 
   @media (max-width: ${({ theme }) => theme.breakpoints.xs}) {
     flex-direction: column;
@@ -18,6 +18,9 @@ const HeaderLeft = styled.div`
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 100%;
 `;
 
 const BlockExplorerLink = styled.a`
diff --git a/src/components/Transactions/TransactionStatusTag/TransactionStatusTag.ts b/src/components/Transactions/TransactionStatusTag/TransactionStatusTag.ts
index aba440a..1c97b99 100644
--- a/src/components/Transactions/TransactionStatusTag/TransactionStatusTag.ts
+++ b/src/components/Transactions/TransactionStatusTag/TransactionStatusTag.ts
@@ -4,6 +4,7 @@ import styled from "styled-components";
 interface Props {
   status: string;
   customWidth?: string;
+  forceMaxWidth?: boolean;
 }
 
 export const TransactionStatusTag = styled(Tag)<Props>`
@@ -11,10 +12,12 @@ export const TransactionStatusTag = styled(Tag)<Props>`
     status === "Completed"
       ? theme.colors.success
       : status === "Disputed"
-      ? theme.colors.error
-      : theme.colors.warning};
+        ? theme.colors.error
+        : theme.colors.warning};
 
   width: ${({ customWidth = "fit-content" }) => customWidth};
+  max-width: ${({ forceMaxWidth = false }) =>
+    forceMaxWidth ? "50%" : "unset"};
 
   pointer-events: none;
   border-color: var(--status-color);
@@ -22,5 +25,14 @@ export const TransactionStatusTag = styled(Tag)<Props>`
   p {
     font-weight: bold;
     color: var(--status-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.xs}) {
+    width: 100%;
+    max-width: ${({ forceMaxWidth = false }) =>
+      forceMaxWidth ? "100%" : "unset"};
   }
 `;

From 678029e01be0df86fffaba847ea259c999df2c45 Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Mon, 8 Sep 2025 21:31:31 +0100
Subject: [PATCH 13/20] feat: display dispute details and links

---
 .../TransactionDetails/Actions/Actions.tsx    |  8 ++++
 .../OngoingDisputeInfo/OngoingDisputeInfo.tsx | 47 +++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx

diff --git a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
index 1af25fb..ce25c26 100644
--- a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
@@ -7,6 +7,7 @@ import { useState } from "react";
 import ErrorAlert from "./Common/ErrorAlert/ErrorAlert";
 import RaiseDispute from "./RaiseDispute/RaiseDispute";
 import Withdraw from "./Withdraw/Withdraw";
+import OngoingDisputeInfo from "./OngoingDisputeInfo/OngoingDisputeInfo";
 
 const Container = styled.div`
   display: flex;
@@ -80,6 +81,9 @@ export default function Actions({ transaction, isBuyer }: Props) {
     (transaction.status === TransactionStatus.WaitingSender && !isBuyer) ||
     (transaction.status === TransactionStatus.WaitingReceiver && isBuyer);
 
+  const ongoingDispute =
+    transaction.status === TransactionStatus.DisputeCreated;
+
   return (
     <Container>
       {isActionError && <ErrorAlert />}
@@ -137,6 +141,10 @@ export default function Actions({ transaction, isBuyer }: Props) {
             setIsWithdrawError={setIsActionError}
           />
         )}
+
+        {ongoingDispute && (
+          <OngoingDisputeInfo disputeId={transaction.disputeId} />
+        )}
       </ActionsContainer>
     </Container>
   );
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx
new file mode 100644
index 0000000..f203b23
--- /dev/null
+++ b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx
@@ -0,0 +1,47 @@
+import { useAccount } from "wagmi";
+import { StyledP } from "../Common/StyledElements/StyledElements";
+import styled from "styled-components";
+
+interface Props {
+  disputeId: bigint;
+}
+
+const defaultLinkProps = {
+  target: "_blank",
+  rel: "noopener noreferrer",
+};
+
+const CustomP = styled(StyledP)`
+  text-align: center;
+`;
+
+const StyledA = styled.a`
+  color: ${({ theme }) => theme.colors.secondaryText};
+  text-decoration: underline;
+`;
+
+export default function OngoingDisputeInfo({ disputeId }: Props) {
+  const { chainId } = useAccount();
+
+  return (
+    <CustomP>
+      Dispute ongoing.
+      <br />
+      You can follow the process and upload evidence using the{" "}
+      <StyledA
+        href={`https://resolve.kleros.io/${chainId}/cases/${disputeId}`}
+        {...defaultLinkProps}
+      >
+        Dispute Resolver.
+      </StyledA>
+      <br />
+      You can also view the case in the{" "}
+      <StyledA
+        href={`https://court.kleros.io/cases/${disputeId}`}
+        {...defaultLinkProps}
+      >
+        Court.
+      </StyledA>
+    </CustomP>
+  );
+}

From 3427d724d538cf83ddd89e4b359d00fdac6ee9dc Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Thu, 11 Sep 2025 21:21:18 +0100
Subject: [PATCH 14/20] feat: fetch dispute info and add it to the transaction
 object

---
 src/hooks/useTransactionDetails.ts | 58 +++++++++++++++++++++++++++++-
 src/model/Dispute.ts               | 21 +++++++++++
 src/model/Transaction.ts           |  8 ++---
 src/utils/transaction.ts           |  6 ++--
 4 files changed, 82 insertions(+), 11 deletions(-)
 create mode 100644 src/model/Dispute.ts

diff --git a/src/hooks/useTransactionDetails.ts b/src/hooks/useTransactionDetails.ts
index 8af6c74..f36a9af 100644
--- a/src/hooks/useTransactionDetails.ts
+++ b/src/hooks/useTransactionDetails.ts
@@ -33,6 +33,7 @@ import type { Evidence } from "model/Evidence";
 import type { TimelineEvent } from "model/TimelineEvent";
 import type { ArbitrationInfo } from "model/ArbitrationInfo";
 import { KLEROS_LIQUID_ABI } from "config/contracts/abi/klerosLiquid";
+import type { DisputeInfo } from "model/Dispute";
 
 async function fetchDetails(
   client: Client,
@@ -170,6 +171,52 @@ async function fetchTimelineEvents(
   return ordered;
 }
 
+async function fetchDisputeInfo(
+  client: Client,
+  disputeId: bigint,
+  arbitratorAddress: `0x${string}`,
+  arbitratorExtraData: `0x${string}`
+) {
+  const transactionParams = {
+    abi: KLEROS_LIQUID_ABI,
+    address: arbitratorAddress,
+  };
+
+  const [disputeStatus, currentRuling, appealCost, appealPeriod] =
+    await Promise.all([
+      await readContract(client, {
+        ...transactionParams,
+        functionName: "disputeStatus" as const,
+        args: [disputeId],
+      }),
+      await readContract(client, {
+        ...transactionParams,
+        functionName: "currentRuling" as const,
+        args: [disputeId],
+      }),
+      await readContract(client, {
+        ...transactionParams,
+        functionName: "appealCost" as const,
+        args: [disputeId, arbitratorExtraData],
+      }),
+      await readContract(client, {
+        ...transactionParams,
+        functionName: "appealPeriod" as const,
+        args: [disputeId],
+      }),
+    ]);
+
+  return {
+    disputeStatus,
+    currentRuling: Number(currentRuling),
+    appealCost,
+    appealPeriod: {
+      start: Number(appealPeriod[0]),
+      end: Number(appealPeriod[1]),
+    },
+  };
+}
+
 async function fetchMetaEvidenceContent(log: MetaEvidenceLogs[0]) {
   try {
     if (!log.args._evidence) return null;
@@ -214,6 +261,7 @@ function mapToTransaction(
   blockTimestamp: bigint,
   contractAddress: `0x${string}`,
   arbitrationInfo: ArbitrationInfo,
+  disputeInfo: DisputeInfo,
   metaEvidence: MetaEvidence,
   status: number,
   lastInteraction: number,
@@ -249,6 +297,7 @@ function mapToTransaction(
     }),
     arbitrableAddress: contractAddress,
     arbitrationInfo: arbitrationInfo,
+    disputeInfo: disputeInfo,
     metaEvidence: metaEvidence,
     status: status,
     formattedStatus: mapTransactionStatus(
@@ -308,8 +357,14 @@ export function useTransactionDetails({ id, contractAddress }: Props) {
         (log) => log.eventName === evidenceEvent.name
       );
 
-      const [metaEvidence, evidenceContent, blockTimestamps] =
+      const [disputeInfo, metaEvidence, evidenceContent, blockTimestamps] =
         await Promise.all([
+          fetchDisputeInfo(
+            client,
+            disputeId as bigint,
+            arbitrationInfo.arbitratorAddress,
+            arbitrationInfo.arbitratorExtraData
+          ),
           fetchMetaEvidenceContent(metaEvidenceLog),
           fetchEvidenceContent(evidenceLogs),
           fetchBlockTimestamps(
@@ -348,6 +403,7 @@ export function useTransactionDetails({ id, contractAddress }: Props) {
         blockTimestamps[0], //we can rely on the order of Promise.all, so we can use the first timestamp for the createdAt date
         contractAddress,
         arbitrationInfo,
+        disputeInfo,
         metaEvidence,
         details[details.length - 1] as number, // status
         Number(details[details.length - 2]), //last interaction
diff --git a/src/model/Dispute.ts b/src/model/Dispute.ts
new file mode 100644
index 0000000..53d0740
--- /dev/null
+++ b/src/model/Dispute.ts
@@ -0,0 +1,21 @@
+export interface DisputeInfo {
+  disputeStatus: number;
+  currentRuling: number;
+  appealCost: bigint;
+  appealPeriod: {
+    start: number;
+    end: number;
+  };
+}
+
+export enum DisputeRuling {
+  "Jurors refused to arbitrate",
+  "Jurors ruled in favor of the sender",
+  "Jurors ruled in favor of the receiver",
+}
+
+export enum DisputeStatus {
+  Waiting,
+  Appealable,
+  Solved,
+}
diff --git a/src/model/Transaction.ts b/src/model/Transaction.ts
index cf5aa1d..b76d692 100644
--- a/src/model/Transaction.ts
+++ b/src/model/Transaction.ts
@@ -1,4 +1,5 @@
 import type { ArbitrationInfo } from "./ArbitrationInfo";
+import type { DisputeInfo } from "./Dispute";
 import type { MetaEvidence } from "./MetaEvidence";
 import type { TimelineEvent } from "./TimelineEvent";
 
@@ -18,12 +19,6 @@ export type FormattedTransactionStatus =
   | "Receiver has to deposit arbitration fee"
   | "Unknown";
 
-export enum DisputeRuling {
-  "Jurors refused to arbitrate",
-  "Jurors ruled in favor of the sender",
-  "Jurors ruled in favor of the receiver",
-}
-
 //This value is used in the old frontend to indicate no timeout, so it is necessary to maintain backwards compatibility.
 export const NO_TIMEOUT_VALUE_OLD_FRONTEND = 8640000000000000;
 
@@ -48,6 +43,7 @@ export interface TransactionMini extends BaseTransaction {
 //Used for detailed view
 export interface Transaction extends BaseTransaction {
   arbitrationInfo: ArbitrationInfo;
+  disputeInfo: DisputeInfo;
   amountInEscrow: string;
   disputeId: bigint;
   blockExplorerLink: string;
diff --git a/src/utils/transaction.ts b/src/utils/transaction.ts
index 449a74e..a41217f 100644
--- a/src/utils/transaction.ts
+++ b/src/utils/transaction.ts
@@ -11,11 +11,9 @@ import {
 } from "config/contracts/events";
 import { formatUnits } from "viem";
 import { addressToShortString, getBlockExplorerLink } from "./common";
-import {
-  DisputeRuling,
-  type FormattedTransactionStatus,
-} from "model/Transaction";
+import { type FormattedTransactionStatus } from "model/Transaction";
 import type { Evidence } from "model/Evidence";
+import { DisputeRuling } from "model/Dispute";
 
 export const mapTransactionStatus = (
   backendStatus: string,

From f0b44932c9684864a25dbe209c4772d98af0407f Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Thu, 11 Sep 2025 21:22:49 +0100
Subject: [PATCH 15/20] feat: enhance ongoing dispute information display with
 ruling details

---
 .../TransactionDetails/Actions/Actions.tsx    | 10 ++-
 .../OngoingDisputeInfo/OngoingDisputeInfo.tsx | 77 +++++++++++++------
 .../LoserDisputeInfo/LoserDisputeInfo.tsx     |  3 +
 .../TiedDisputeInfo/TiedDisputeInfo.tsx       |  3 +
 .../WinnerDisputeInfo/WinnerDisputeInfo.tsx   |  3 +
 5 files changed, 72 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/LoserDisputeInfo/LoserDisputeInfo.tsx
 create mode 100644 src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/TiedDisputeInfo/TiedDisputeInfo.tsx
 create mode 100644 src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/WinnerDisputeInfo/WinnerDisputeInfo.tsx

diff --git a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
index ce25c26..a84a433 100644
--- a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
@@ -8,6 +8,7 @@ import ErrorAlert from "./Common/ErrorAlert/ErrorAlert";
 import RaiseDispute from "./RaiseDispute/RaiseDispute";
 import Withdraw from "./Withdraw/Withdraw";
 import OngoingDisputeInfo from "./OngoingDisputeInfo/OngoingDisputeInfo";
+import { DisputeStatus } from "model/Dispute";
 
 const Container = styled.div`
   display: flex;
@@ -82,7 +83,8 @@ export default function Actions({ transaction, isBuyer }: Props) {
     (transaction.status === TransactionStatus.WaitingReceiver && isBuyer);
 
   const ongoingDispute =
-    transaction.status === TransactionStatus.DisputeCreated;
+    transaction.status === TransactionStatus.DisputeCreated &&
+    transaction.disputeInfo.disputeStatus !== DisputeStatus.Solved;
 
   return (
     <Container>
@@ -143,7 +145,11 @@ export default function Actions({ transaction, isBuyer }: Props) {
         )}
 
         {ongoingDispute && (
-          <OngoingDisputeInfo disputeId={transaction.disputeId} />
+          <OngoingDisputeInfo
+            disputeId={transaction.disputeId}
+            disputeInfo={transaction.disputeInfo}
+            isBuyer={isBuyer}
+          />
         )}
       </ActionsContainer>
     </Container>
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx
index f203b23..e312f48 100644
--- a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx
@@ -1,9 +1,15 @@
 import { useAccount } from "wagmi";
 import { StyledP } from "../Common/StyledElements/StyledElements";
 import styled from "styled-components";
+import { DisputeRuling, DisputeStatus, type DisputeInfo } from "model/Dispute";
+import TiedDisputeInfo from "./Rulings/TiedDisputeInfo/TiedDisputeInfo";
+import LoserDisputeInfo from "./Rulings/LoserDisputeInfo/LoserDisputeInfo";
+import WinnerDisputeInfo from "./Rulings/WinnerDisputeInfo/WinnerDisputeInfo";
 
 interface Props {
   disputeId: bigint;
+  disputeInfo: DisputeInfo;
+  isBuyer: boolean;
 }
 
 const defaultLinkProps = {
@@ -20,28 +26,55 @@ const StyledA = styled.a`
   text-decoration: underline;
 `;
 
-export default function OngoingDisputeInfo({ disputeId }: Props) {
+export default function OngoingDisputeInfo({
+  disputeId,
+  disputeInfo,
+  isBuyer,
+}: Props) {
   const { chainId } = useAccount();
 
-  return (
-    <CustomP>
-      Dispute ongoing.
-      <br />
-      You can follow the process and upload evidence using the{" "}
-      <StyledA
-        href={`https://resolve.kleros.io/${chainId}/cases/${disputeId}`}
-        {...defaultLinkProps}
-      >
-        Dispute Resolver.
-      </StyledA>
-      <br />
-      You can also view the case in the{" "}
-      <StyledA
-        href={`https://court.kleros.io/cases/${disputeId}`}
-        {...defaultLinkProps}
-      >
-        Court.
-      </StyledA>
-    </CustomP>
-  );
+  if (disputeInfo.disputeStatus === DisputeStatus.Waiting) {
+    return (
+      <CustomP>
+        Dispute ongoing.
+        <br />
+        You can follow the process and upload evidence using the{" "}
+        <StyledA
+          href={`https://resolve.kleros.io/${chainId}/cases/${disputeId}`}
+          {...defaultLinkProps}
+        >
+          Dispute Resolver.
+        </StyledA>
+        <br />
+        You can also view the case in the{" "}
+        <StyledA
+          href={`https://court.kleros.io/cases/${disputeId}`}
+          {...defaultLinkProps}
+        >
+          Court.
+        </StyledA>
+      </CustomP>
+    );
+  }
+
+  const showTiedInformation =
+    disputeInfo.currentRuling === DisputeRuling["Jurors refused to arbitrate"];
+
+  const showLoserInformation =
+    (isBuyer &&
+      disputeInfo.currentRuling ===
+        DisputeRuling["Jurors ruled in favor of the receiver"]) ||
+    (!isBuyer &&
+      disputeInfo.currentRuling ===
+        DisputeRuling["Jurors ruled in favor of the sender"]);
+
+  if (showTiedInformation) {
+    return <TiedDisputeInfo />;
+  }
+
+  if (showLoserInformation) {
+    return <LoserDisputeInfo />;
+  }
+
+  return <WinnerDisputeInfo />;
 }
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/LoserDisputeInfo/LoserDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/LoserDisputeInfo/LoserDisputeInfo.tsx
new file mode 100644
index 0000000..11f161a
--- /dev/null
+++ b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/LoserDisputeInfo/LoserDisputeInfo.tsx
@@ -0,0 +1,3 @@
+export default function LoserDisputeInfo() {
+  return <div>Loser POV</div>;
+}
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/TiedDisputeInfo/TiedDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/TiedDisputeInfo/TiedDisputeInfo.tsx
new file mode 100644
index 0000000..8ade87c
--- /dev/null
+++ b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/TiedDisputeInfo/TiedDisputeInfo.tsx
@@ -0,0 +1,3 @@
+export default function TiedDisputeInfo() {
+  return <div>Jurors refused to arbitrate</div>;
+}
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/WinnerDisputeInfo/WinnerDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/WinnerDisputeInfo/WinnerDisputeInfo.tsx
new file mode 100644
index 0000000..ffea43e
--- /dev/null
+++ b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/WinnerDisputeInfo/WinnerDisputeInfo.tsx
@@ -0,0 +1,3 @@
+export default function WinnerDisputeInfo() {
+  return <div>Winner POV</div>;
+}

From 659e78c51fffc99edd738756aa39ddcfcc72ca02 Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Fri, 12 Sep 2025 20:46:28 +0100
Subject: [PATCH 16/20] feat: implement dispute ruling display

---
 .../Common/StyledElements/StyledElements.ts   | 13 ++++++
 .../OngoingDisputeInfo/OngoingDisputeInfo.tsx | 20 +++++-----
 .../AppealableDisputeInfo.tsx                 | 37 +++++++++++++++++
 .../Rulings/Common/AppealInfo.tsx             | 40 +++++++++++++++++++
 .../LoserDisputeInfo/LoserDisputeInfo.tsx     |  3 --
 .../TiedDisputeInfo/TiedDisputeInfo.tsx       |  3 --
 .../WinnerDisputeInfo/WinnerDisputeInfo.tsx   | 22 +++++++++-
 7 files changed, 121 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/AppealableDisputeInfo/AppealableDisputeInfo.tsx
 create mode 100644 src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/Common/AppealInfo.tsx
 delete mode 100644 src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/LoserDisputeInfo/LoserDisputeInfo.tsx
 delete mode 100644 src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/TiedDisputeInfo/TiedDisputeInfo.tsx

diff --git a/src/components/Transactions/TransactionDetails/Actions/Common/StyledElements/StyledElements.ts b/src/components/Transactions/TransactionDetails/Actions/Common/StyledElements/StyledElements.ts
index fa28358..b4eef66 100644
--- a/src/components/Transactions/TransactionDetails/Actions/Common/StyledElements/StyledElements.ts
+++ b/src/components/Transactions/TransactionDetails/Actions/Common/StyledElements/StyledElements.ts
@@ -17,6 +17,11 @@ export const StyledP = styled.p`
   text-align: justify;
 `;
 
+export const StyledH1 = styled.h1`
+  font-size: 1.5rem;
+  font-weight: bold;
+`;
+
 export const CustomActionButtonContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -24,3 +29,11 @@ export const CustomActionButtonContainer = styled.div`
   align-items: center;
   gap: 16px;
 `;
+
+export const RulingContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+  text-align: justify;
+`;
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx
index e312f48..1bb639a 100644
--- a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx
@@ -2,8 +2,7 @@ import { useAccount } from "wagmi";
 import { StyledP } from "../Common/StyledElements/StyledElements";
 import styled from "styled-components";
 import { DisputeRuling, DisputeStatus, type DisputeInfo } from "model/Dispute";
-import TiedDisputeInfo from "./Rulings/TiedDisputeInfo/TiedDisputeInfo";
-import LoserDisputeInfo from "./Rulings/LoserDisputeInfo/LoserDisputeInfo";
+import AppealableDisputeInfo from "./Rulings/AppealableDisputeInfo/AppealableDisputeInfo";
 import WinnerDisputeInfo from "./Rulings/WinnerDisputeInfo/WinnerDisputeInfo";
 
 interface Props {
@@ -68,13 +67,16 @@ export default function OngoingDisputeInfo({
       disputeInfo.currentRuling ===
         DisputeRuling["Jurors ruled in favor of the sender"]);
 
-  if (showTiedInformation) {
-    return <TiedDisputeInfo />;
-  }
-
-  if (showLoserInformation) {
-    return <LoserDisputeInfo />;
+  //In effect, both are the same. In both scenarios, appeal is possible.
+  if (showTiedInformation || showLoserInformation) {
+    return (
+      <AppealableDisputeInfo
+        appealCost={disputeInfo.appealCost}
+        appealPeriod={disputeInfo.appealPeriod}
+        isLoser={showLoserInformation}
+      />
+    );
   }
 
-  return <WinnerDisputeInfo />;
+  return <WinnerDisputeInfo appealPeriod={disputeInfo.appealPeriod} />;
 }
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/AppealableDisputeInfo/AppealableDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/AppealableDisputeInfo/AppealableDisputeInfo.tsx
new file mode 100644
index 0000000..9cd64bb
--- /dev/null
+++ b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/AppealableDisputeInfo/AppealableDisputeInfo.tsx
@@ -0,0 +1,37 @@
+import {
+  RulingContainer,
+  StyledH1,
+} from "../../../Common/StyledElements/StyledElements";
+import { Button } from "@kleros/ui-components-library";
+import AppealInfo from "../Common/AppealInfo";
+
+interface Props {
+  appealCost: bigint;
+  appealPeriod: {
+    start: number;
+    end: number;
+  };
+  isLoser: boolean;
+}
+
+export default function AppealableDisputeInfo({
+  appealCost,
+  appealPeriod,
+  isLoser,
+}: Props) {
+  return (
+    <RulingContainer>
+      <StyledH1>
+        {isLoser ? "You lost the dispute." : "Jurors refused to arbitrate."}
+      </StyledH1>
+      <AppealInfo appealPeriod={appealPeriod} />
+      <Button
+        small
+        text="Appeal"
+        onPress={() => {
+          console.log("## Appeal Cost: ", appealCost);
+        }}
+      />
+    </RulingContainer>
+  );
+}
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/Common/AppealInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/Common/AppealInfo.tsx
new file mode 100644
index 0000000..0cd11d5
--- /dev/null
+++ b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/Common/AppealInfo.tsx
@@ -0,0 +1,40 @@
+import Countdown from "react-countdown";
+import { StyledP } from "../../../Common/StyledElements/StyledElements";
+import styled from "styled-components";
+
+interface Props {
+  isWinner?: boolean;
+  appealPeriod: {
+    start: number;
+    end: number;
+  };
+}
+
+const CustomStyledP = styled(StyledP)`
+  text-align: center;
+`;
+
+export default function AppealInfo({ isWinner = false, appealPeriod }: Props) {
+  return (
+    <>
+      <CustomStyledP>
+        {isWinner
+          ? "The other party can appeal the decision while the ruling is not executed."
+          : "You can appeal the decision while the ruling is not executed."}
+        <br />
+        After the appeal period ends, if the ruling is not appealed, it can be
+        executed.
+      </CustomStyledP>
+      <Countdown
+        date={appealPeriod.end * 1000}
+        renderer={({ days, hours, minutes, seconds }) => {
+          return (
+            <StyledP>
+              Time left for appeal: {days}d {hours}h {minutes}m {seconds}s
+            </StyledP>
+          );
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/LoserDisputeInfo/LoserDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/LoserDisputeInfo/LoserDisputeInfo.tsx
deleted file mode 100644
index 11f161a..0000000
--- a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/LoserDisputeInfo/LoserDisputeInfo.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function LoserDisputeInfo() {
-  return <div>Loser POV</div>;
-}
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/TiedDisputeInfo/TiedDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/TiedDisputeInfo/TiedDisputeInfo.tsx
deleted file mode 100644
index 8ade87c..0000000
--- a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/TiedDisputeInfo/TiedDisputeInfo.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function TiedDisputeInfo() {
-  return <div>Jurors refused to arbitrate</div>;
-}
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/WinnerDisputeInfo/WinnerDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/WinnerDisputeInfo/WinnerDisputeInfo.tsx
index ffea43e..e5763cb 100644
--- a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/WinnerDisputeInfo/WinnerDisputeInfo.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/WinnerDisputeInfo/WinnerDisputeInfo.tsx
@@ -1,3 +1,21 @@
-export default function WinnerDisputeInfo() {
-  return <div>Winner POV</div>;
+import {
+  RulingContainer,
+  StyledH1,
+} from "../../../Common/StyledElements/StyledElements";
+import AppealInfo from "../Common/AppealInfo";
+
+interface Props {
+  appealPeriod: {
+    start: number;
+    end: number;
+  };
+}
+
+export default function WinnerDisputeInfo({ appealPeriod }: Props) {
+  return (
+    <RulingContainer>
+      <StyledH1>Congratulations, you won the dispute!</StyledH1>
+      <AppealInfo isWinner appealPeriod={appealPeriod} />
+    </RulingContainer>
+  );
 }

From 2b413d9b377f8d415d51f147ef6a4566f9051179 Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Fri, 12 Sep 2025 21:35:57 +0100
Subject: [PATCH 17/20] feat: implement appeal functionality

---
 .../TransactionDetails/Actions/Actions.tsx    |   4 +
 .../OngoingDisputeInfo/OngoingDisputeInfo.tsx |  12 ++
 .../AppealableDisputeInfo.tsx                 | 113 +++++++++++++++++-
 3 files changed, 126 insertions(+), 3 deletions(-)

diff --git a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
index a84a433..d2d3572 100644
--- a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
@@ -146,9 +146,13 @@ export default function Actions({ transaction, isBuyer }: Props) {
 
         {ongoingDispute && (
           <OngoingDisputeInfo
+            transactionId={transaction.id}
+            contractAddress={transaction.arbitrableAddress}
+            isNative={transaction.metaEvidence.token?.ticker === "ETH"}
             disputeId={transaction.disputeId}
             disputeInfo={transaction.disputeInfo}
             isBuyer={isBuyer}
+            setIsAppealError={setIsActionError}
           />
         )}
       </ActionsContainer>
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx
index 1bb639a..618642e 100644
--- a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx
@@ -6,9 +6,13 @@ import AppealableDisputeInfo from "./Rulings/AppealableDisputeInfo/AppealableDis
 import WinnerDisputeInfo from "./Rulings/WinnerDisputeInfo/WinnerDisputeInfo";
 
 interface Props {
+  transactionId: bigint;
+  contractAddress: string;
+  isNative: boolean;
   disputeId: bigint;
   disputeInfo: DisputeInfo;
   isBuyer: boolean;
+  setIsAppealError: (isError: boolean) => void;
 }
 
 const defaultLinkProps = {
@@ -26,9 +30,13 @@ const StyledA = styled.a`
 `;
 
 export default function OngoingDisputeInfo({
+  transactionId,
+  contractAddress,
+  isNative,
   disputeId,
   disputeInfo,
   isBuyer,
+  setIsAppealError,
 }: Props) {
   const { chainId } = useAccount();
 
@@ -71,9 +79,13 @@ export default function OngoingDisputeInfo({
   if (showTiedInformation || showLoserInformation) {
     return (
       <AppealableDisputeInfo
+        transactionId={transactionId}
+        contractAddress={contractAddress}
+        isNative={isNative}
         appealCost={disputeInfo.appealCost}
         appealPeriod={disputeInfo.appealPeriod}
         isLoser={showLoserInformation}
+        setIsAppealError={setIsAppealError}
       />
     );
   }
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/AppealableDisputeInfo/AppealableDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/AppealableDisputeInfo/AppealableDisputeInfo.tsx
index 9cd64bb..ddaa8b4 100644
--- a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/AppealableDisputeInfo/AppealableDisputeInfo.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/AppealableDisputeInfo/AppealableDisputeInfo.tsx
@@ -4,21 +4,128 @@ import {
 } from "../../../Common/StyledElements/StyledElements";
 import { Button } from "@kleros/ui-components-library";
 import AppealInfo from "../Common/AppealInfo";
+import {
+  useSimulateMultipleArbitrableTokenTransactionAppeal,
+  useSimulateMultipleArbitrableTransactionAppeal,
+  useWriteMultipleArbitrableTokenTransactionAppeal,
+  useWriteMultipleArbitrableTransactionAppeal,
+} from "config/contracts/generated";
+import { useMemo, useState } from "react";
+import { useAccount, useClient } from "wagmi";
+import { useQueryClient } from "@tanstack/react-query";
+import { waitForTransactionReceipt } from "viem/actions";
+import { QUERY_KEYS } from "config/queryKeys";
+import { isUserRejectedRequestError } from "utils/common";
 
 interface Props {
+  transactionId: bigint;
+  contractAddress: string;
+  isNative: boolean;
   appealCost: bigint;
   appealPeriod: {
     start: number;
     end: number;
   };
   isLoser: boolean;
+  setIsAppealError: (isError: boolean) => void;
 }
 
 export default function AppealableDisputeInfo({
+  transactionId,
+  contractAddress,
+  isNative,
   appealCost,
   appealPeriod,
   isLoser,
+  setIsAppealError,
 }: Props) {
+  const queryClient = useQueryClient();
+  const client = useClient();
+  const { address } = useAccount();
+  const [isAppealing, setIsAppealing] = useState<boolean>(false);
+
+  const transactionConfig = useMemo(() => {
+    return {
+      address: contractAddress as `0x${string}`,
+      args: [transactionId],
+      value: appealCost,
+      account: address, //By default this is the account used, but set it so if the user switches accounts after the component is rendered, the simulation will use the correct account
+      query: { enabled: false }, //Only simulate when we want
+    } as const;
+  }, [contractAddress, transactionId, appealCost, address]);
+
+  const { refetch: refetchNativeSimulateData } =
+    useSimulateMultipleArbitrableTransactionAppeal({
+      ...transactionConfig,
+    });
+
+  const { refetch: refetchTokenSimulateData } =
+    useSimulateMultipleArbitrableTokenTransactionAppeal({
+      ...transactionConfig,
+    });
+
+  const { writeContractAsync: appealNativeTransaction } =
+    useWriteMultipleArbitrableTransactionAppeal();
+  const { writeContractAsync: appealTokenTransaction } =
+    useWriteMultipleArbitrableTokenTransactionAppeal();
+
+  const handleAppeal = async () => {
+    setIsAppealError(false);
+
+    if (!client) {
+      setIsAppealError(true);
+      return;
+    }
+
+    setIsAppealing(true);
+    let hash;
+
+    try {
+      if (isNative) {
+        const { data: nativeSimulationData } =
+          await refetchNativeSimulateData();
+
+        if (nativeSimulationData?.request) {
+          hash = await appealNativeTransaction(nativeSimulationData.request);
+        } else {
+          setIsAppealing(false);
+          setIsAppealError(true);
+          return;
+        }
+      } else {
+        const { data: tokenSimulationData } = await refetchTokenSimulateData();
+
+        if (tokenSimulationData?.request) {
+          hash = await appealTokenTransaction(tokenSimulationData.request);
+        } else {
+          setIsAppealing(false);
+          setIsAppealError(true);
+          return;
+        }
+      }
+
+      //Wait for the transaction confirmation before performing the details refresh
+      await waitForTransactionReceipt(client, { hash: hash });
+
+      queryClient.invalidateQueries({
+        queryKey: [
+          QUERY_KEYS.transactionDetails,
+          transactionId.toString(),
+          contractAddress,
+        ],
+      });
+      setIsAppealing(false);
+    } catch (error) {
+      console.error(error);
+
+      if (!isUserRejectedRequestError(error)) {
+        setIsAppealError(true);
+      }
+
+      setIsAppealing(false);
+    }
+  };
+
   return (
     <RulingContainer>
       <StyledH1>
@@ -28,9 +135,9 @@ export default function AppealableDisputeInfo({
       <Button
         small
         text="Appeal"
-        onPress={() => {
-          console.log("## Appeal Cost: ", appealCost);
-        }}
+        isDisabled={isAppealing}
+        isLoading={isAppealing}
+        onPress={handleAppeal}
       />
     </RulingContainer>
   );

From ef6b11ed9f6ebdb65bd04dbd86617d57dc1892d3 Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Mon, 15 Sep 2025 18:39:11 +0100
Subject: [PATCH 18/20] fix: correctly fetch appeal decision events

---
 src/hooks/useTransactionDetails.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useTransactionDetails.ts b/src/hooks/useTransactionDetails.ts
index f36a9af..a311b92 100644
--- a/src/hooks/useTransactionDetails.ts
+++ b/src/hooks/useTransactionDetails.ts
@@ -133,7 +133,7 @@ async function fetchTimelineEvents(
       toBlock: "latest",
     }),
     await getLogs(client, {
-      address: contractAddress,
+      address: arbitratorAddress,
       event: appealDecisionEvent,
       args: { _disputeID: disputeId, _arbitrable: contractAddress },
       fromBlock: 0n,

From bd99b9d930e96904e84e59ec619c64c80098afbf Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Mon, 15 Sep 2025 18:54:11 +0100
Subject: [PATCH 19/20] feat: handle scenario where appeal is no longer
 possible, but the ruling hasn't been executed yet

---
 .../TransactionDetails/Actions/Actions.tsx    |  7 ++++-
 .../OngoingDisputeInfo/OngoingDisputeInfo.tsx | 10 ++++++-
 .../AppealableDisputeInfo.tsx                 | 27 +++++++++++++------
 .../WinnerDisputeInfo/WinnerDisputeInfo.tsx   | 15 +++++++++--
 4 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
index d2d3572..7eb083a 100644
--- a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
@@ -86,6 +86,10 @@ export default function Actions({ transaction, isBuyer }: Props) {
     transaction.status === TransactionStatus.DisputeCreated &&
     transaction.disputeInfo.disputeStatus !== DisputeStatus.Solved;
 
+  const waitingRulingExecution =
+    transaction.status !== TransactionStatus.Resolved &&
+    transaction.disputeInfo.disputeStatus === DisputeStatus.Solved;
+
   return (
     <Container>
       {isActionError && <ErrorAlert />}
@@ -144,7 +148,7 @@ export default function Actions({ transaction, isBuyer }: Props) {
           />
         )}
 
-        {ongoingDispute && (
+        {(ongoingDispute || waitingRulingExecution) && (
           <OngoingDisputeInfo
             transactionId={transaction.id}
             contractAddress={transaction.arbitrableAddress}
@@ -152,6 +156,7 @@ export default function Actions({ transaction, isBuyer }: Props) {
             disputeId={transaction.disputeId}
             disputeInfo={transaction.disputeInfo}
             isBuyer={isBuyer}
+            isAwaitingRulingExecution={waitingRulingExecution}
             setIsAppealError={setIsActionError}
           />
         )}
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx
index 618642e..f41e4d4 100644
--- a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx
@@ -12,6 +12,7 @@ interface Props {
   disputeId: bigint;
   disputeInfo: DisputeInfo;
   isBuyer: boolean;
+  isAwaitingRulingExecution: boolean;
   setIsAppealError: (isError: boolean) => void;
 }
 
@@ -36,6 +37,7 @@ export default function OngoingDisputeInfo({
   disputeId,
   disputeInfo,
   isBuyer,
+  isAwaitingRulingExecution,
   setIsAppealError,
 }: Props) {
   const { chainId } = useAccount();
@@ -85,10 +87,16 @@ export default function OngoingDisputeInfo({
         appealCost={disputeInfo.appealCost}
         appealPeriod={disputeInfo.appealPeriod}
         isLoser={showLoserInformation}
+        isAwaitingRulingExecution={isAwaitingRulingExecution}
         setIsAppealError={setIsAppealError}
       />
     );
   }
 
-  return <WinnerDisputeInfo appealPeriod={disputeInfo.appealPeriod} />;
+  return (
+    <WinnerDisputeInfo
+      appealPeriod={disputeInfo.appealPeriod}
+      isAwaitingRulingExecution={isAwaitingRulingExecution}
+    />
+  );
 }
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/AppealableDisputeInfo/AppealableDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/AppealableDisputeInfo/AppealableDisputeInfo.tsx
index ddaa8b4..5ff2843 100644
--- a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/AppealableDisputeInfo/AppealableDisputeInfo.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/AppealableDisputeInfo/AppealableDisputeInfo.tsx
@@ -27,6 +27,7 @@ interface Props {
     end: number;
   };
   isLoser: boolean;
+  isAwaitingRulingExecution: boolean;
   setIsAppealError: (isError: boolean) => void;
 }
 
@@ -37,6 +38,7 @@ export default function AppealableDisputeInfo({
   appealCost,
   appealPeriod,
   isLoser,
+  isAwaitingRulingExecution,
   setIsAppealError,
 }: Props) {
   const queryClient = useQueryClient();
@@ -131,14 +133,23 @@ export default function AppealableDisputeInfo({
       <StyledH1>
         {isLoser ? "You lost the dispute." : "Jurors refused to arbitrate."}
       </StyledH1>
-      <AppealInfo appealPeriod={appealPeriod} />
-      <Button
-        small
-        text="Appeal"
-        isDisabled={isAppealing}
-        isLoading={isAppealing}
-        onPress={handleAppeal}
-      />
+      {isAwaitingRulingExecution ? (
+        <p>
+          The dispute has been resolved and appeal is no longer possible. The
+          ruling is awaiting execution.
+        </p>
+      ) : (
+        <>
+          <AppealInfo appealPeriod={appealPeriod} />
+          <Button
+            small
+            text="Appeal"
+            isDisabled={isAppealing}
+            isLoading={isAppealing}
+            onPress={handleAppeal}
+          />
+        </>
+      )}
     </RulingContainer>
   );
 }
diff --git a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/WinnerDisputeInfo/WinnerDisputeInfo.tsx b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/WinnerDisputeInfo/WinnerDisputeInfo.tsx
index e5763cb..2088977 100644
--- a/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/WinnerDisputeInfo/WinnerDisputeInfo.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/Rulings/WinnerDisputeInfo/WinnerDisputeInfo.tsx
@@ -9,13 +9,24 @@ interface Props {
     start: number;
     end: number;
   };
+  isAwaitingRulingExecution: boolean;
 }
 
-export default function WinnerDisputeInfo({ appealPeriod }: Props) {
+export default function WinnerDisputeInfo({
+  appealPeriod,
+  isAwaitingRulingExecution,
+}: Props) {
   return (
     <RulingContainer>
       <StyledH1>Congratulations, you won the dispute!</StyledH1>
-      <AppealInfo isWinner appealPeriod={appealPeriod} />
+      {isAwaitingRulingExecution ? (
+        <p>
+          The dispute has been resolved and appeal is no longer possible. The
+          ruling is awaiting execution.
+        </p>
+      ) : (
+        <AppealInfo isWinner appealPeriod={appealPeriod} />
+      )}
     </RulingContainer>
   );
 }

From c1afe27fd174e5192a8a3f508ef1f6ff950fbdac Mon Sep 17 00:00:00 2001
From: kyrers <kyrers.eth@gmail.com>
Date: Mon, 15 Sep 2025 19:03:05 +0100
Subject: [PATCH 20/20] style: update ActionsContainer layout for improved
 responsiveness and spacing

---
 .../Transactions/TransactionDetails/Actions/Actions.tsx    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
index 7eb083a..c107b16 100644
--- a/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
+++ b/src/components/Transactions/TransactionDetails/Actions/Actions.tsx
@@ -19,7 +19,12 @@ const Container = styled.div`
 const ActionsContainer = styled.div`
   display: flex;
   justify-content: center;
-  gap: 16px;
+  flex-wrap: wrap;
+  gap: 2rem;
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.xs}) {
+    gap: 1rem;
+  }
 `;
 
 interface Props {