feat: add warning regarding smart contract wallet usage

src/bootstrap/app.js

@@ -14,6 +14,7 @@ import Resume from "../containers/arbitrable-tx/resume";
 import Footer from "../components/footer";
 import Notifications from "../containers/settings";
 import AccountInfo from "../containers/account-info";
+import SmartContractWalletWarning from "../components/sc-wallet-warning";
 import { ReactComponent as Kleros } from "../assets/kleros.svg";
 import { ReactComponent as Transaction } from "../assets/transaction.svg";
 import { ReactComponent as Invoice } from "../assets/invoice.svg";
@@ -67,6 +68,8 @@ function Main({ children }) {
   return (
     <div className="App">
       <header className="header">
+        <SmartContractWalletWarning />
+
         <Link to="/" className="header-logo-link">
           <Kleros
             className="logo"

src/components/sc-wallet-warning/index.js

@@ -0,0 +1,73 @@
+import { useWeb3React } from '@web3-react/core';
+import React, { useEffect, useState } from 'react'
+import './sc-wallet-warning.css';
+
+const EIP7702_PREFIX = '0xef0100'
+const STORAGE_KEY = "@kleros/escrow/alert/smart-contract-wallet-warning";
+
+export default function SmartContractWalletWarning() {
+  const { account, library } = useWeb3React();
+  const [isSmartContractWallet, setIsSmartContractWallet] = useState(false);
+  const [showWarning, setShowWarning] = useState(true);
+
+  const updateAccountWarningDismissalState = (account) => {
+    try {
+      const storedValue = localStorage.getItem(`${STORAGE_KEY}:${account}`)
+      if (storedValue === null) {
+        setShowWarning(true)
+      } else {
+        setShowWarning(JSON.parse(storedValue))
+      }
+    } catch {
+      setShowWarning(true)
+    }
+  }
+
+  const checkIfSmartContractWallet = (account, library) => {
+    library.eth.getCode(account).then((code) => {
+      const formattedCode = code.toLowerCase()
+      const isEip7702Eoa = formattedCode.startsWith(EIP7702_PREFIX)
+
+      //Do not show warning for EIP-7702 EOAs
+      setIsSmartContractWallet(code !== '0x' && !isEip7702Eoa)
+    }).catch((error) => {
+      console.error('Error checking smart contract wallet', error)
+      setIsSmartContractWallet(false)
+    });
+  }
+
+  useEffect(() => {
+    if (!account || !library) {
+      setIsSmartContractWallet(false)
+      return;
+    }
+
+    updateAccountWarningDismissalState(account);
+    checkIfSmartContractWallet(account, library);
+  }, [account, library]);
+
+  if (!showWarning || !isSmartContractWallet) {
+    return null;
+  }
+
+  const handleClose = () => {
+    setShowWarning(false);
+    localStorage.setItem(`${STORAGE_KEY}:${account}`, false);
+  }
+
+  return (
+    <div className="sc-wallet-warning">
+      <p>
+        You are using a smart contract wallet. This is not recommended.{" "}
+        <a
+          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.
+        </a>
+      </p>
+      <button onClick={handleClose}>X</button>
+    </div>
+  );
+}

src/components/sc-wallet-warning/sc-wallet-warning.css

@@ -0,0 +1,34 @@
+.sc-wallet-warning {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  background: #fffbe6;
+  border: 1px solid #ffe58f;
+  border-left: 4px solid #faad14;
+  border-radius: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  font-size: 14px;
+  font-weight: bold;
+  padding: 12px 16px;
+  color: rgba(0, 0, 0, 0.85); }
+
+.sc-wallet-warning p {
+  flex: 1;
+  margin: 0;
+  text-align: center; }
+
+.sc-wallet-warning button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 16px;
+  line-height: 1;
+  padding: 0 4px; }
+
+.sc-wallet-warning button:hover {
+  color: rgba(0, 0, 0, 0.75); }

src/components/sc-wallet-warning/sc-wallet-warning.scss

@@ -0,0 +1,41 @@
+.sc-wallet-warning {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
+
+    display: flex;
+    align-items: center;
+    background: #fffbe6;
+    border: 1px solid #ffe58f;
+    border-left: 4px solid #faad14;
+    border-radius: 0;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+
+    font-size: 14px;
+    font-weight: bold;
+    padding: 12px 16px;
+    color: rgba(0,0,0,0.85);
+}
+
+.sc-wallet-warning p {
+    flex: 1;
+    margin: 0;
+    text-align: center;
+}
+
+.sc-wallet-warning button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: rgba(0,0,0,0.45);
+    font-size: 16px;
+    line-height: 1;
+    padding: 0 4px;
+}
+
+.sc-wallet-warning button:hover {
+    color: rgba(0,0,0,0.75);
+}
+