refactor: migrate NewTransaction Deliverable component (WIP)

Author: kyrers

web/src/global.css

@@ -37,11 +37,14 @@
   --spacing-fluid-8-32-300: clamp(8px, calc(8px + (32 - 8) * (100vw - 300px) / (1250 - 300)), 32px);
   --spacing-fluid-12-32-300: clamp(12px, calc(12px + (32 - 12) * (100vw - 300px) / (1250 - 300)), 32px);
   --spacing-fluid-20-24: clamp(20px, calc(20px + (24 - 20) * (100vw - 375px) / (1250 - 375)), 24px);
+  --spacing-fluid-24-18: clamp(18px, calc(24px + (18 - 24) * (100vw - 375px) / (1250 - 375)), 24px);
   --spacing-fluid-100-130: clamp(100px, calc(100px + (130 - 100) * (100vw - 375px) / (1250 - 375)), 130px);
   --spacing-fluid-300-424-300: clamp(300px, calc(300px + (424 - 300) * (100vw - 300px) / (1250 - 300)), 424px);
   --spacing-fluid-300-480: clamp(300px, calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375)), 480px);
   --spacing-fluid-342-500: clamp(342px, calc(342px + (500 - 342) * (100vw - 375px) / (1250 - 375)), 500px);
+  --spacing-fluid-342-574: clamp(342px, calc(342px + (574 - 342) * (100vw - 375px) / (1250 - 375)), 574px);
   --spacing-fluid-342-618: clamp(342px, calc(342px + (618 - 342) * (100vw - 375px) / (1250 - 375)), 618px);
+  --spacing-fluid-342-699: clamp(342px, calc(342px + (699 - 342) * (100vw - 375px) / (1250 - 375)), 699px);
 }
 
 .dark {

web/src/hooks/useIsDesktop.tsx

@@ -1,12 +1,11 @@
 import { useMemo } from "react";
 
 import { useWindowSize } from "react-use";
-
-import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
+import { LG_BREAKPOINT } from "src/styles/breakpoints";
 
 const useIsDesktop = () => {
   const { width } = useWindowSize();
-  return useMemo(() => width > BREAKPOINT_LANDSCAPE, [width]);
+  return useMemo(() => width > LG_BREAKPOINT, [width]);
 };
 
 export default useIsDesktop;

web/src/pages/NewTransaction/Terms/Deliverable/index.tsx

@@ -1,51 +1,15 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { errorToast } from "utils/wrapWithToast";
 import { FileUploader } from "@kleros/ui-components-library";
 import MarkdownEditor from "components/MarkdownEditor";
 import { useNewTransactionContext } from "context/NewTransactionContext";
-import { responsiveSize } from "styles/responsiveSize";
 import NavigationButtons from "../../NavigationButtons";
 import TokenTransaction from "../Payment/TokenTransaction";
 import Header from "pages/NewTransaction/Header";
 import { Roles, useAtlasProvider } from "@kleros/kleros-app";
 import { getFileUploaderMsg } from "src/utils";
 import useIsDesktop from "hooks/useIsDesktop";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const MarkdownEditorContainer = styled.div`
-  width 84vw;
-
-  ${landscapeStyle(
-    () => css`
-      width: ${responsiveSize(342, 699)};
-    `
-  )}
-`;
-
-const StyledFileUploader = styled(FileUploader)`
-  width: 84vw;
-  margin-top: 16px;
-  margin-bottom: ${responsiveSize(130, 72)};
-
-  small {
-    white-space: pre-line;
-    text-align: start;
-  }
-
-  ${landscapeStyle(
-    () => css`
-      width: ${responsiveSize(342, 699)};
-    `
-  )}
-`;
-
 const Deliverable: React.FC = () => {
   const {
     escrowType,
@@ -79,18 +43,19 @@ const Deliverable: React.FC = () => {
     (getFileUploaderMsg(Roles.Policy, roleRestrictions) ?? "");
 
   return (
-    <Container>
+    <div className="flex flex-col items-center">
       {escrowType === "general" ? (
         <>
           <Header text="Contract Terms" />
-          <MarkdownEditorContainer>
+          <div className="w-[84vw] mb-4 lg:w-fluid-342-699">
             <MarkdownEditor
-            value={deliverableText}
-            onChange={handleWrite}
-            placeholder="eg. I should receive a website created in React with the following specification: x,y,z."
+              value={deliverableText}
+              onChange={handleWrite}
+              placeholder="eg. I should receive a website created in React with the following specification: x,y,z."
             />
-          </MarkdownEditorContainer>
-          <StyledFileUploader
+          </div>
+          <FileUploader
+            className="w-[84vw] lg:w-fluid-342-699 [&_small]:whitespace-pre-line"
             callback={handleAttachFile}
             variant={isDesktop ? "info" : undefined}
             msg={fileFootMessage}
@@ -110,7 +75,7 @@ const Deliverable: React.FC = () => {
           setRecipientAddress={setBuyerAddress}
         />
       )}
-    </Container>
+    </div>
   );
 };
 

web/src/pages/NewTransaction/Terms/Payment/DestinationAddress.tsx

@@ -1,35 +1,11 @@
 import React, { useState, useEffect, useMemo } from "react";
-import styled, { css } from "styled-components";
-import { responsiveSize } from "styles/responsiveSize";
-import { landscapeStyle } from "styles/landscapeStyle";
-import { Field } from "@kleros/ui-components-library";
+import { TextField } from "@kleros/ui-components-library";
 import { useDebounce } from "react-use";
 import { useEnsAddress } from "wagmi";
 import { useNewTransactionContext } from "context/NewTransactionContext";
 import { ensDomainPattern, validateAddress } from "utils/validateAddress";
 import { isEmpty } from "src/utils";
 
-const StyledField = styled(Field)`
-  margin-bottom: ${responsiveSize(68, 40)};
-
-  small {
-    margin-top: 6px;
-    svg {
-      margin-top: 8px;
-    }
-  }
-
-  input {
-    font-size: 16px;
-  }
-
-  ${landscapeStyle(
-    () => css`
-      width: ${responsiveSize(342, 574)};
-    `
-  )}
-`;
-
 interface IDestinationAddress {
   recipientAddress: string;
   setRecipientAddress: (value: string) => void;
@@ -54,11 +30,6 @@ const DestinationAddress: React.FC<IDestinationAddress> = ({ recipientAddress, s
     }
   }, [debouncedRecipientAddress, ensResult.data, setIsRecipientAddressResolved]);
 
-  const handleWrite = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const input = event.target.value;
-    setRecipientAddress(input);
-  };
-
   const message = useMemo(() => {
     if (isEmpty(debouncedRecipientAddress) || isValid) {
       return "The ETH address or ENS of the person/entity that will receive the funds.";
@@ -74,10 +45,10 @@ const DestinationAddress: React.FC<IDestinationAddress> = ({ recipientAddress, s
   }, [debouncedRecipientAddress, isValid]);
 
   return (
-    <StyledField
-      type="text"
+    <TextField
+      className="lg:w-fluid-342-574"
       value={recipientAddress}
-      onChange={handleWrite}
+      onChange={(value) => setRecipientAddress(value)}
       placeholder="eg. 0x123ABC... or john.eth"
       variant={variant}
       message={message}

web/src/pages/NewTransaction/Terms/Payment/ToDivider.tsx

@@ -1,11 +1,6 @@
 import React from "react";
-import styled from "styled-components";
-
-const Container = styled.h1`
-  margin-bottom: 26px;
-`;
 
 const ToDivider: React.FC = () => {
-  return <Container>to</Container>;
+  return <h1 className="mb-6">to</h1>;
 };
 export default ToDivider;

web/src/pages/NewTransaction/Terms/Payment/TokenTransaction/TokenAndAmount/AmountField.tsx

@@ -1,23 +1,5 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
-import { responsiveSize } from "styles/responsiveSize";
-import AmountField from "./AmountField";
-import Token from "./Token";
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  align-items: center;
-  margin-bottom: ${responsiveSize(24, 18)};
-
-  ${landscapeStyle(
-    () => css`
-      flex-direction: row;
-    `
-  )}
-`;
+import { DropdownSelect, NumberField } from "@kleros/ui-components-library";
 
 interface ITokenAndAmount {
   quantity: string;
@@ -28,10 +10,27 @@ interface ITokenAndAmount {
 
 const TokenAndAmount: React.FC<ITokenAndAmount> = ({ quantity, setQuantity, token, setToken }) => {
   return (
-    <Container>
-      <AmountField quantity={quantity} setQuantity={setQuantity} />
-      <Token token={token} setToken={setToken} />
-    </Container>
+    <div className="flex flex-col gap-6 items-center mb-fluid-24-18 lg:flex-row">
+      <NumberField
+        placeholder="eg. 3.6"
+        value={Number(quantity) ?? 0}
+        minValue={0}
+        onChange={(value) => setQuantity(value.toString())}
+        formatOptions={{
+          //Prevent automatic rounding of very small amounts
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 18,
+        }}
+      />
+      <DropdownSelect
+        defaultSelectedKey={token}
+        items={[
+          { id: "xDAI", text: "xDAI", dot: "red", itemValue: "xDAI" },
+          { id: "ETH", text: "ETH", dot: "blue", itemValue: "ETH" },
+        ]}
+        callback={(value) => setToken(value.itemValue)}
+      />
+    </div>
   );
 };
 export default TokenAndAmount;

web/src/pages/NewTransaction/Terms/Payment/TokenTransaction/TokenAndAmount/Token.tsx

@@ -1,17 +1,10 @@
 import React from "react";
-import styled from "styled-components";
 import Header from "pages/NewTransaction/Header";
 import NavigationButtons from "../../../NavigationButtons";
 import DestinationAddress from "../DestinationAddress";
 import ToDivider from "../ToDivider";
 import TokenAndAmount from "./TokenAndAmount";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
 interface ITokenTransaction {
   headerText: string;
   prevRoute: string;
@@ -36,13 +29,13 @@ const TokenTransaction: React.FC<ITokenTransaction> = ({
   setRecipientAddress,
 }) => {
   return (
-    <Container>
+    <div className="flex flex-col items-center">
       <Header text={headerText} />
       <TokenAndAmount quantity={quantity} setQuantity={setQuantity} token={token} setToken={setToken} />
       <ToDivider />
       <DestinationAddress recipientAddress={recipientAddress} setRecipientAddress={setRecipientAddress} />
       <NavigationButtons prevRoute={prevRoute} nextRoute={nextRoute} />
-    </Container>
+    </div>
   );
 };