feat: display connected address transactions

.env.example

@@ -1,3 +1,5 @@
 VITE_REOWN_PROJECT_ID=YOUR_PROJECT_ID
 VITE_ETHEREUM_MAINNET_RPC=YOUR_MAINNET_RPC_URL
-VITE_ETHREUM_SEPOLIA_RPC=YOUR_SEPOLIA_RPC_URL
+VITE_ETHEREUM_SEPOLIA_RPC=YOUR_SEPOLIA_RPC_URL
+VITE_IPFS_UPLOAD_URL=YOUR_IPFS_UPLOAD_URL
+VITE_IPFS_GATEWAY_URL=YOUR_IPFS_GATEWAY_URL

.gitignore

@@ -25,3 +25,6 @@ dist-ssr
 
 # Environment variables
 .env
+
+# Yarn
+.yarn/install-state.gz

README.md

@@ -1,7 +1,21 @@
 # Escrow V1 UI
 
-Local development:
+For local development:
+
+1. Install dependencies:
+
+```bash
+yarn install
+```
+
+2. Generate hooks using `wagmi/cli`:
+
+```bash
+yarn generate
+```
+
+3. Run:
 
 ```bash
-yarn install && yarn dev
-```
+yarn dev
+```

package.json

@@ -7,10 +7,11 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "generate": "wagmi generate"
   },
   "dependencies": {
-    "@kleros/ui-components-library": "^3.3.4",
+    "@kleros/ui-components-library": "^3.4.5",
     "@reown/appkit": "^1.7.6",
     "@reown/appkit-adapter-wagmi": "^1.7.6",
     "@tanstack/react-query": "^5.76.1",
@@ -26,6 +27,7 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.4.1",
+    "@wagmi/cli": "^2.3.1",
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",

src/App.tsx

@@ -1,7 +1,8 @@
 import { BrowserRouter, Routes, Route } from "react-router";
 import { Providers } from "./providers";
 import Layout from "layout/Layout";
-import Home from "components/Home/Home";
+import Home from "pages/Home/Home";
+import Transaction from "pages/Transaction/Transaction";
 
 function App() {
   return (
@@ -10,6 +11,10 @@ function App() {
         <Routes>
           <Route element={<Layout />}>
             <Route path="/" element={<Home />} />
+            <Route
+              path="/transaction/:contractAddress/:id"
+              element={<Transaction />}
+            />
           </Route>
         </Routes>
       </BrowserRouter>

src/components/Common/Skeleton/BaseSkeleton.ts

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const BaseSkeleton = styled.div`
+  animation: ${({ theme }) => theme.animations.loading};
+  background-color: ${({ theme }) => theme.colors.tintPurple};
+`;

src/components/Footer/KlerosLinks/KlerosLinks.tsx

@@ -1,4 +1,4 @@
-import { IconButton } from "components/common/IconButton";
+import { IconButton } from "components/Common/Buttons/IconButton";
 import styled from "styled-components";
 import Discord from "assets/discord.svg?react";
 import Blog from "assets/blog.svg?react";

src/components/Header/ConnectWallet/ConnectButton/ConnectButton.tsx

@@ -10,7 +10,7 @@ export default function ConnectButton() {
       isDisabled={isOpen}
       small
       text={"Connect Wallet"}
-      onClick={async () => open({ view: "Connect" })}
+      onPress={async () => open({ view: "Connect" })}
     />
   );
 }

src/components/Header/ConnectWallet/ConnectedMenu/ConnectedMenu.tsx

@@ -1,6 +1,7 @@
 import { Button, Tag } from "@kleros/ui-components-library";
 import { useState, useRef, useEffect } from "react";
 import styled from "styled-components";
+import { addressToShortString } from "utils/common";
 import { useAccount, useDisconnect } from "wagmi";
 
 const Container = styled.div`
@@ -10,6 +11,9 @@ const Container = styled.div`
 const CustomTag = styled(Tag)`
   font-weight: bold;
   background-color: transparent;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   &:hover {
     opacity: 0.8;
@@ -66,9 +70,7 @@ export default function ConnectedMenu() {
     <Container ref={containerRef}>
       <CustomTag
         active
-        text={`${chain?.name} | ${address?.slice(0, 6)}...${address?.slice(
-          -4
-        )}`}
+        text={`${chain?.name} | ${addressToShortString(address ?? "")}`}
         onPress={() => setIsMenuOpen(!isMenuOpen)}
       />
       {isMenuOpen && (

src/components/Header/Header.tsx

@@ -3,6 +3,7 @@ import KlerosEscrowLogo from "assets/kleros.svg?react";
 import ConnectWallet from "./ConnectWallet/ConnectWallet";
 import ToggleTheme from "./ToggleTheme/ToggleTheme";
 import Tutorial from "./Tutorial/Tutorial";
+import { Link } from "react-router";
 
 const Container = styled.header`
   display: flex;
@@ -17,6 +18,12 @@ const Container = styled.header`
       : theme.colors.primaryPurple};
   padding: 8px 16px;
   justify-content: space-between;
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.xs}) {
+    height: 120px;
+    flex-direction: column;
+    align-items: center;
+  }
 `;
 
 const EscrowLogo = styled(KlerosEscrowLogo)`
@@ -33,7 +40,9 @@ const OptionsContainer = styled.div`
 export default function Header() {
   return (
     <Container>
-      <EscrowLogo />
+      <Link to="/">
+        <EscrowLogo />
+      </Link>
       <OptionsContainer>
         <ConnectWallet />
         <ToggleTheme />

src/components/Header/ToggleTheme/ToggleTheme.tsx

@@ -1,6 +1,6 @@
 import Moon from "assets/moon.svg?react";
 import Sun from "assets/sun.svg?react";
-import { IconButton } from "components/common/IconButton";
+import { IconButton } from "components/Common/Buttons/IconButton";
 import { useThemeContext } from "context/theme/useThemeContext";
 
 export default function ToggleTheme() {

src/components/Header/Tutorial/Tutorial.tsx

@@ -1,4 +1,4 @@
-import { IconButton } from "components/common/IconButton";
+import { IconButton } from "components/Common/Buttons/IconButton";
 import InfoCircleFull from "assets/info-circle-full.svg?react";
 
 export default function Tutorial() {

src/components/Transactions/DisplayTransactions/DisplayTransactions.tsx

@@ -0,0 +1,72 @@
+import { useTransactions } from "hooks/useTransactions";
+import TransactionCard from "../TransactionCard/TransactionCard";
+import styled from "styled-components";
+import { BaseSkeleton } from "components/Common/Skeleton/BaseSkeleton";
+import { useMemo, useState } from "react";
+import { Searchbar } from "@kleros/ui-components-library";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 80%;
+`;
+
+const StyledSearchbar = styled(Searchbar)`
+  width: 100%;
+`;
+
+const CardContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(100%, max(312px, (100% - 16px * 2)/3)), 1fr)
+  );
+  align-items: center;
+  gap: 16px;
+`;
+
+const SkeletonCard = styled(BaseSkeleton)`
+  border-radius: ${({ theme }) => theme.radius.base};
+  height: 200px;
+`;
+
+export default function DisplayTransactions() {
+  const { data: transactions, isFetching } = useTransactions();
+  const [search, setSearch] = useState<string>("");
+
+  //Allow users to filter transactions by title or address
+  const filteredTransactions = useMemo(() => {
+    if (!search) return transactions;
+
+    const searchLower = search.toLowerCase();
+    return transactions.filter(
+      (transaction) =>
+        transaction.metaEvidence.title.toLowerCase().includes(searchLower) ||
+        transaction.metaEvidence.sender.toLowerCase().includes(searchLower) ||
+        transaction.metaEvidence.receiver.toLowerCase().includes(searchLower)
+    );
+  }, [transactions, search]);
+
+  return (
+    <Container>
+      <StyledSearchbar
+        aria-label="Search by title or address"
+        placeholder="Search by title or address"
+        value={search}
+        onChange={(value) => setSearch(value)}
+      />
+
+      <CardContainer>
+        {isFetching
+          ? [...Array(9)].map((_, i) => <SkeletonCard key={i} />)
+          : filteredTransactions.map((transaction) => (
+              <TransactionCard
+                key={`${transaction.id}-${transaction.arbitrableAddress}`}
+                transaction={transaction}
+              />
+            ))}
+      </CardContainer>
+    </Container>
+  );
+}

src/components/Transactions/TransactionCard/TransactionCard.tsx

@@ -0,0 +1,102 @@
+import { Card, Tag } from "@kleros/ui-components-library";
+import { type TransactionMini } from "model/Transaction";
+import { Link } from "react-router";
+import styled from "styled-components";
+import { addressToShortString } from "utils/common";
+import { TransactionStatusTag } from "components/Transactions/TransactionStatusTag/TransactionStatusTag";
+
+const StyledCard = styled(Card)`
+  display: flex;
+  flex-direction: column;
+  height: 200px;
+  overflow: hidden;
+
+  p {
+    font-size: 14px;
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.xs}) {
+    height: 280px;
+`;
+
+const CardEdge = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: ${({ theme }) => theme.colors.tintPurple};
+  padding: 8px;
+  height: 40px;
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.xs}) {
+    height: 80px;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+  }
+`;
+
+const CardBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  flex: 1;
+`;
+
+const Title = styled.p`
+  font-weight: bold;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const Description = styled.p`
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+`;
+
+const AmountTag = styled(Tag)`
+  pointer-events: none;
+  text-transform: capitalize;
+  font-weight: bold;
+`;
+
+interface Props {
+  transaction: TransactionMini;
+}
+
+export default function TransactionCard({ transaction }: Props) {
+  return (
+    <Link
+      to={`/transaction/${transaction.arbitrableAddress}/${transaction.id}`}
+    >
+      <StyledCard round hover className="w-[1/3]">
+        <CardEdge>
+          <TransactionStatusTag
+            active
+            status={transaction.status}
+            text={transaction.status}
+          />
+          <AmountTag
+            active
+            text={`${transaction.userPartyLabel}: ${
+              transaction.metaEvidence.amount
+            } ${transaction.metaEvidence.token?.ticker ?? "ETH"}`}
+          />
+        </CardEdge>
+        <CardBody>
+          <Title>{transaction.metaEvidence.title}</Title>
+          <Description>{transaction.metaEvidence.description}</Description>
+        </CardBody>
+        <CardEdge>
+          <Tag text={addressToShortString(transaction.otherPartyAddress)} />
+          <p>{transaction.createdAt}</p>
+        </CardEdge>
+      </StyledCard>
+    </Link>
+  );
+}