feat: display connected address transactions

.env.example

@@ -1,3 +1,6 @@
 VITE_REOWN_PROJECT_ID=YOUR_PROJECT_ID
+VITE_ALCHEMY_API_KEY=YOUR_ALCHEMY_API_KEY
 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

@@ -2,8 +2,22 @@
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/4cb4168d-2078-400e-a159-4e52e44175ea/deploy-status)](https://app.netlify.com/projects/kleros-escrow-v1/deploys)
 
-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
 ```

netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

package.json

@@ -7,14 +7,17 @@
     "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.6.0",
     "@reown/appkit": "^1.7.6",
     "@reown/appkit-adapter-wagmi": "^1.7.6",
     "@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",
@@ -26,6 +29,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,9 @@
 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";
+import New from "pages/New/New";
 
 function App() {
   return (
@@ -10,6 +12,11 @@ function App() {
         <Routes>
           <Route element={<Layout />}>
             <Route path="/" element={<Home />} />
+            <Route
+              path="/transaction/:contractAddress/:id"
+              element={<Transaction />}
+            />
+            <Route path="/new" element={<New />} />
           </Route>
         </Routes>
       </BrowserRouter>

src/components/common/IconButton.ts → src/components/Common/Buttons/IconButton.ts

@@ -1,16 +1,21 @@
 import styled from "styled-components";
 import { Button } from "@kleros/ui-components-library";
 
-export const IconButton = styled(Button)`
+export const IconButton = styled(Button)<{ customSVGColor?: boolean }>`
   background: transparent;
   border: none;
   padding: 0;
   width: 32px;
   height: 32px;
-  path {
-    /* dark mode secondary text color */
-    fill: #becce5;
-  }
+
+  ${({ customSVGColor = true }) =>
+    customSVGColor &&
+    `
+    path {
+      /* dark mode secondary text color */
+      fill: #becce5;
+    }
+  `}
 
   &:hover {
     opacity: 0.8;

src/components/Common/Containers/DefaultPageContainer.ts

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const DefaultPageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 16px;
+  align-items: center;
+  overflow-y: auto;
+  padding: 64px;
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.md}) {
+    padding: 32px;
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
+    padding: 16px;
+  }
+`;

src/components/Common/Display/AddressLinkAndCopy.tsx

@@ -0,0 +1,40 @@
+import { Copiable } from "@kleros/ui-components-library";
+import { IconButton } from "../Buttons/IconButton";
+import EtherscanIcon from "assets/etherscan.svg?react";
+import styled from "styled-components";
+import { addressToShortString } from "utils/common";
+
+interface Props {
+  address: string;
+}
+
+const Container = styled.div`
+  display: flex;
+  margin-left: -0.5rem;
+`;
+
+/*
+ * NOTE: If in dev and using the Sepolia network, the link will still point to mainnet. This is fine because prod is only available on mainnet, so no need for any logic for dynamic linking.
+ * Additionally, for existing transactions, there is no easy way to know the chain they are on, because there's no guarantee that that information will be in the metaevidence.
+ */
+export default function AddressLinkAndCopy({ address }: Props) {
+  return (
+    <Container>
+      <a
+        href={`https://etherscan.io/address/${address}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <IconButton
+          small
+          icon={<EtherscanIcon />}
+          text=""
+          customSVGColor={false}
+        />
+      </a>
+      <Copiable copiableContent={address} tooltipProps={{ isDisabled: true }}>
+        <h2>{addressToShortString(address)}</h2>
+      </Copiable>
+    </Container>
+  );
+}

src/components/Common/Dividers/DefaultDivider.ts

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const DefaultDivider = styled.hr`
+  color: ${({ theme }) => theme.colors.stroke};
+`;

src/components/Common/Form/StyledDisplaySmall.ts

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import { DisplaySmall } from "@kleros/ui-components-library";
+
+export const StyledDisplaySmall = styled(DisplaySmall)`
+  overflow: hidden;
+  white-space: nowrap;
+  height: fit-content;
+
+  label {
+    font-weight: bold;
+  }
+
+  div {
+    margin-top: 0;
+  }
+
+  h2 {
+    font-weight: normal;
+  }
+`;

src/components/Common/Form/StyledForm.ts

@@ -0,0 +1,22 @@
+import { Form } from "@kleros/ui-components-library";
+import styled, { css } from "styled-components";
+
+export const StyledForm = styled(Form)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: fit-content;
+  max-width: 80%;
+  gap: 16px;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  gap: 16px;
+`;
+
+export const mobileResponsive = css`
+  @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
+    width: 250px;
+  }
+`;

src/components/Common/Modal/StyledModal.ts

@@ -0,0 +1,21 @@
+import { Modal } from "@kleros/ui-components-library";
+import styled from "styled-components";
+import { mobileResponsive } from "../Form/StyledForm";
+
+export const StyledModal = styled(Modal)<{ width?: string }>`
+  width: ${({ width }) => width ?? "500px"};
+  height: 100%;
+  max-height: 500px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  border-radius: ${({ theme }) => theme.radius.boxDefault};
+  overflow-y: auto;
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.md}) {
+    width: 500px;
+  }
+
+  ${mobileResponsive}
+`;

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/CreateTransactionWizard/CreateTransactionWizard.tsx

@@ -0,0 +1,62 @@
+import { Steps } from "@kleros/ui-components-library";
+import { useState } from "react";
+import styled from "styled-components";
+import Template from "./Template/Template";
+import Details from "./Details/Details";
+import Terms from "./Terms/Terms";
+import Preview from "./Preview/Preview";
+
+const STEPS = [
+  { title: "Escrow type" },
+  { title: "Details" },
+  { title: "Terms" },
+  { title: "Preview" },
+];
+
+const Container = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  @media (max-height: ${({ theme }) => theme.breakpoints.md}) {
+    height: unset;
+  }
+`;
+
+const StyledSteps = styled(Steps)`
+  position: absolute;
+  left: 4%;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 200px;
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.lg}) {
+    display: none;
+  }
+`;
+
+export default function CreateTransactionWizard() {
+  const [currentStep, setCurrentStep] = useState<number>(0);
+
+  const next = () => {
+    setCurrentStep(currentStep + 1);
+  };
+
+  const back = () => {
+    setCurrentStep(currentStep - 1);
+  };
+
+  return (
+    <Container>
+      <StyledSteps items={STEPS} currentItemIndex={currentStep} />
+
+      {currentStep === 0 && <Template next={next} />}
+      {currentStep === 1 && <Details next={next} back={back} />}
+      {currentStep === 2 && <Terms next={next} back={back} />}
+      {currentStep === 3 && <Preview back={back} />}
+    </Container>
+  );
+}