chore: add a smart contract wallet warning

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",

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

src/components/Transactions/TransactionDetails/Actions/Actions.tsx

@@ -5,6 +5,10 @@ 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";
+import Withdraw from "./Withdraw/Withdraw";
+import OngoingDisputeInfo from "./OngoingDisputeInfo/OngoingDisputeInfo";
+import { DisputeStatus } from "model/Dispute";
 
 const Container = styled.div`
   display: flex;
@@ -15,6 +19,12 @@ const Container = styled.div`
 const ActionsContainer = styled.div`
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
+  gap: 2rem;
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.xs}) {
+    gap: 1rem;
+  }
 `;
 
 interface Props {
@@ -23,7 +33,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 =
@@ -59,9 +70,34 @@ 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;
+
+  //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 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);
+
+  const ongoingDispute =
+    transaction.status === TransactionStatus.DisputeCreated &&
+    transaction.disputeInfo.disputeStatus !== DisputeStatus.Solved;
+
+  const waitingRulingExecution =
+    transaction.status !== TransactionStatus.Resolved &&
+    transaction.disputeInfo.disputeStatus === DisputeStatus.Solved;
+
   return (
     <Container>
-      {isExecuteError && <ErrorAlert />}
+      {isActionError && <ErrorAlert />}
 
       <ActionsContainer>
         {showPayButton && (
@@ -90,7 +126,43 @@ export default function Actions({ transaction, isBuyer }: Props) {
             transactionId={transaction.id}
             contractAddress={transaction.arbitrableAddress}
             isNative={transaction.metaEvidence.token?.ticker === "ETH"}
-            setIsExecuteError={setIsExecuteError}
+            setIsExecuteError={setIsActionError}
+          />
+        )}
+
+        {(showRaiseDisputeButton || showDepositArbitrationFeeButton) && (
+          <RaiseDispute
+            transactionId={transaction.id}
+            contractAddress={transaction.arbitrableAddress}
+            arbitrationCost={transaction.arbitrationInfo.arbitrationCost}
+            isNative={transaction.metaEvidence.token?.ticker === "ETH"}
+            isBuyer={isBuyer}
+            hasToDepositFee={showDepositArbitrationFeeButton}
+            depositFeeDeadline={depositFeeDeadline}
+          />
+        )}
+
+        {showWithdrawButton && (
+          <Withdraw
+            transactionId={transaction.id}
+            contractAddress={transaction.arbitrableAddress}
+            isNative={transaction.metaEvidence.token?.ticker === "ETH"}
+            isBuyer={isBuyer}
+            depositFeeDeadline={depositFeeDeadline}
+            setIsWithdrawError={setIsActionError}
+          />
+        )}
+
+        {(ongoingDispute || waitingRulingExecution) && (
+          <OngoingDisputeInfo
+            transactionId={transaction.id}
+            contractAddress={transaction.arbitrableAddress}
+            isNative={transaction.metaEvidence.token?.ticker === "ETH"}
+            disputeId={transaction.disputeId}
+            disputeInfo={transaction.disputeInfo}
+            isBuyer={isBuyer}
+            isAwaitingRulingExecution={waitingRulingExecution}
+            setIsAppealError={setIsActionError}
           />
         )}
       </ActionsContainer>

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>
+  );
+}

src/components/Transactions/TransactionDetails/Actions/Common/StyledElements/StyledElements.ts

@@ -14,4 +14,26 @@ export const StyledNumberField = styled(NumberField)`
 
 export const StyledP = styled.p`
   font-weight: bold;
+  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;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+`;
+
+export const RulingContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+  text-align: justify;
 `;

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 } =

src/components/Transactions/TransactionDetails/Actions/OngoingDisputeInfo/OngoingDisputeInfo.tsx

@@ -0,0 +1,102 @@
+import { useAccount } from "wagmi";
+import { StyledP } from "../Common/StyledElements/StyledElements";
+import styled from "styled-components";
+import { DisputeRuling, DisputeStatus, type DisputeInfo } from "model/Dispute";
+import AppealableDisputeInfo from "./Rulings/AppealableDisputeInfo/AppealableDisputeInfo";
+import WinnerDisputeInfo from "./Rulings/WinnerDisputeInfo/WinnerDisputeInfo";
+
+interface Props {
+  transactionId: bigint;
+  contractAddress: string;
+  isNative: boolean;
+  disputeId: bigint;
+  disputeInfo: DisputeInfo;
+  isBuyer: boolean;
+  isAwaitingRulingExecution: boolean;
+  setIsAppealError: (isError: boolean) => void;
+}
+
+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({
+  transactionId,
+  contractAddress,
+  isNative,
+  disputeId,
+  disputeInfo,
+  isBuyer,
+  isAwaitingRulingExecution,
+  setIsAppealError,
+}: Props) {
+  const { chainId } = useAccount();
+
+  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"]);
+
+  //In effect, both are the same. In both scenarios, appeal is possible.
+  if (showTiedInformation || showLoserInformation) {
+    return (
+      <AppealableDisputeInfo
+        transactionId={transactionId}
+        contractAddress={contractAddress}
+        isNative={isNative}
+        appealCost={disputeInfo.appealCost}
+        appealPeriod={disputeInfo.appealPeriod}
+        isLoser={showLoserInformation}
+        isAwaitingRulingExecution={isAwaitingRulingExecution}
+        setIsAppealError={setIsAppealError}
+      />
+    );
+  }
+
+  return (
+    <WinnerDisputeInfo
+      appealPeriod={disputeInfo.appealPeriod}
+      isAwaitingRulingExecution={isAwaitingRulingExecution}
+    />
+  );
+}