Skip to content

Commit 01d2991

Browse files
kyrerskyrers
committed
refactor: migrate NewTransaction TypeOfEscrow and related components
1 parent d810250 commit 01d2991

File tree

12 files changed

+86
-221
lines changed

12 files changed

+86
-221
lines changed

‎web/src/components/StyledIcons/ClosedCircleIcon.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎web/src/global.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,11 @@
3636
--spacing-fluid-8-24: clamp(8px, calc(8px + (24 - 8) * (100vw - 375px) / (1250 - 375)), 24px);
3737
--spacing-fluid-8-32-300: clamp(8px, calc(8px + (32 - 8) * (100vw - 300px) / (1250 - 300)), 32px);
3838
--spacing-fluid-12-32-300: clamp(12px, calc(12px + (32 - 12) * (100vw - 300px) / (1250 - 300)), 32px);
39+
--spacing-fluid-20-24: clamp(20px, calc(20px + (24 - 20) * (100vw - 375px) / (1250 - 375)), 24px);
3940
--spacing-fluid-100-130: clamp(100px, calc(100px + (130 - 100) * (100vw - 375px) / (1250 - 375)), 130px);
4041
--spacing-fluid-300-424-300: clamp(300px, calc(300px + (424 - 300) * (100vw - 300px) / (1250 - 300)), 424px);
4142
--spacing-fluid-300-480: clamp(300px, calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375)), 480px);
43+
--spacing-fluid-342-618: clamp(342px, calc(342px + (618 - 342) * (100vw - 375px) / (1250 - 375)), 618px);
4244
}
4345

4446
.dark {

‎web/src/pages/NewTransaction/EscrowDetails/TypeOfEscrow/EscrowOptions/CryptoSwap.tsx‎

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,31 @@
11
import React from "react";
2-
import styled from "styled-components";
32
import Logo from "svgs/icons/crypto-swap.svg";
43
import { useNewTransactionContext } from "context/NewTransactionContext";
5-
import { StyledCard } from ".";
6-
7-
const Container = styled.div`
8-
display: flex;
9-
flex-direction: column;
10-
gap: 26px;
11-
justify-content: center;
12-
`;
13-
14-
const StyledLogo = styled(Logo)`
15-
path {
16-
fill: ${({ theme }) => theme.secondaryPurple};
17-
}
18-
`;
19-
20-
const Title = styled.p`
21-
display: flex;
22-
width: 100%;
23-
width: 96px;
24-
text-align: center;
25-
margin: 0;
26-
padding: 0 8px;
27-
flex-wrap: wrap;
28-
`;
4+
import { Card } from "@kleros/ui-components-library";
5+
import { cn } from "src/utils";
296

307
const CryptoSwap: React.FC = () => {
318
const { escrowType, setEscrowType } = useNewTransactionContext();
329

10+
const selected = escrowType === "swap";
11+
3312
const handleSelect = () => {
3413
setEscrowType("swap");
3514
};
3615

3716
return (
38-
<Container>
39-
<StyledCard onClick={handleSelect} selected={escrowType === "swap"}>
40-
<StyledLogo />
41-
</StyledCard>
42-
<Title>Crypto Swap</Title>
43-
</Container>
17+
<div className="flex flex-col gap-6 justify-center">
18+
<Card
19+
className={cn(
20+
"flex h-24 w-24 items-center justify-center cursor-pointer rounded-[20px]!",
21+
selected && "border border-klerosUIComponentsPrimaryBlue"
22+
)}
23+
onClick={handleSelect}
24+
>
25+
<Logo className="fill-klerosUIComponentsSecondaryPurple" />
26+
</Card>
27+
<p className="flex flex-wrap w-24 m-0 text-center px-2">Crypto Swap</p>
28+
</div>
4429
);
4530
};
4631
export default CryptoSwap;

‎web/src/pages/NewTransaction/EscrowDetails/TypeOfEscrow/EscrowOptions/GeneralEscrow.tsx‎

Lines changed: 16 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,31 @@
11
import React from "react";
2-
import styled from "styled-components";
32
import Logo from "svgs/icons/general-escrow.svg";
43
import { useNewTransactionContext } from "context/NewTransactionContext";
5-
import { StyledCard } from ".";
6-
7-
const Container = styled.div`
8-
display: flex;
9-
flex-direction: column;
10-
gap: 26px;
11-
`;
12-
13-
const StyledLogo = styled(Logo)`
14-
path {
15-
fill: ${({ theme }) => theme.secondaryPurple};
16-
}
17-
`;
18-
19-
const Title = styled.p`
20-
display: flex;
21-
width: 100%;
22-
flex-wrap: wrap;
23-
width: 96px;
24-
text-align: center;
25-
margin: 0;
26-
`;
4+
import { Card } from "@kleros/ui-components-library";
5+
import { cn } from "src/utils";
276

287
const GeneralEscrow: React.FC = () => {
298
const { escrowType, setEscrowType } = useNewTransactionContext();
309

10+
const selected = escrowType === "general";
11+
3112
const handleSelect = () => {
3213
setEscrowType("general");
3314
};
3415

3516
return (
36-
<Container>
37-
<StyledCard onClick={handleSelect} selected={escrowType === "general"}>
38-
<StyledLogo />
39-
</StyledCard>
40-
<Title>General Escrow</Title>
41-
</Container>
17+
<div className="flex flex-col gap-6">
18+
<Card
19+
className={cn(
20+
"flex h-24 w-24 items-center justify-center cursor-pointer rounded-[20px]!",
21+
selected && "border border-klerosUIComponentsPrimaryBlue"
22+
)}
23+
onClick={handleSelect}
24+
>
25+
<Logo className="fill-klerosUIComponentsSecondaryPurple" />
26+
</Card>
27+
<p className="flex flex-wrap w-24 m-0 text-center">General Escrow</p>
28+
</div>
4229
);
4330
};
4431
export default GeneralEscrow;

‎web/src/pages/NewTransaction/EscrowDetails/TypeOfEscrow/EscrowOptions/index.tsx‎

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,13 @@
11
import React from "react";
2-
import styled, { css } from "styled-components";
32
import GeneralEscrow from "./GeneralEscrow";
43
// import CryptoSwap from "./CryptoSwap";
5-
import { Card } from "@kleros/ui-components-library";
6-
7-
const Container = styled.div`
8-
display: flex;
9-
flex-direction: row;
10-
gap: 24px;
11-
justify-content: center;
12-
margin-bottom: 32px;
13-
`;
14-
15-
export const StyledCard = styled(Card)<{ selected: boolean }>`
16-
display: flex;
17-
height: 96px;
18-
width: 96px;
19-
align-items: center;
20-
justify-content: center;
21-
border-radius: 20px;
22-
cursor: pointer;
23-
${({ selected, theme }) =>
24-
selected &&
25-
css`
26-
border: 1px solid ${theme.primaryBlue};
27-
`}
28-
`;
294

305
const EscrowOptions: React.FC = () => {
316
return (
32-
<Container>
7+
<div className="flex flex-row justify-center gap-6 mb-8">
338
<GeneralEscrow />
349
{/* <CryptoSwap /> */}
35-
</Container>
10+
</div>
3611
);
3712
};
3813
export default EscrowOptions;

‎web/src/pages/NewTransaction/EscrowDetails/TypeOfEscrow/Info.tsx‎

Lines changed: 15 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,26 @@
11
import React from "react";
22
import { AlertMessage } from "@kleros/ui-components-library";
3-
import styled, { css } from "styled-components";
4-
import { responsiveSize } from "styles/responsiveSize";
53
import { useNewTransactionContext } from "context/NewTransactionContext";
6-
import { landscapeStyle } from "styles/landscapeStyle";
7-
8-
const Container = styled.div`
9-
display: flex;
10-
justify-content: center;
11-
12-
${landscapeStyle(
13-
() => css`
14-
width: ${responsiveSize(342, 618)};
15-
`
16-
)}
17-
`;
184

195
const Info: React.FC = () => {
206
const { escrowType } = useNewTransactionContext();
217

228
return (
23-
<Container>
24-
<AlertMessage
25-
variant="info"
26-
title={escrowType === "general" ? "General Escrow" : "Crypto Swap"}
27-
msg={
28-
escrowType === "general"
29-
? "Hiring an outside contractor? Making a P2P or OTC trade? Use the " +
30-
"General Escrow to safeguard your transactions. Define the agreement " +
31-
"under your own terms. Protected by Kleros Court to ensure a fair trade."
32-
: "Want to protect your crypto transaction? Use this option to create a " +
33-
"safe cross-chain swap. One person escrows an asset based on " +
34-
"Ethereum and the funds are released once assets on another " +
35-
"blockchain have been moved."
36-
}
37-
/>
38-
</Container>
9+
<AlertMessage
10+
className="lg:w-fluid-342-618"
11+
variant="info"
12+
title={escrowType === "general" ? "General Escrow" : "Crypto Swap"}
13+
msg={
14+
escrowType === "general"
15+
? "Hiring an outside contractor? Making a P2P or OTC trade? Use the " +
16+
"General Escrow to safeguard your transactions. Define the agreement " +
17+
"under your own terms. Protected by Kleros Court to ensure a fair trade."
18+
: "Want to protect your crypto transaction? Use this option to create a " +
19+
"safe cross-chain swap. One person escrows an asset based on " +
20+
"Ethereum and the funds are released once assets on another " +
21+
"blockchain have been moved."
22+
}
23+
/>
3924
);
4025
};
4126

‎web/src/pages/NewTransaction/EscrowDetails/TypeOfEscrow/index.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,18 @@
11
import React from "react";
2-
import styled from "styled-components";
32
import EscrowOptions from "./EscrowOptions";
43
import Header from "pages/NewTransaction/Header";
54
import Info from "./Info";
65
import NavigationButtons from "../../NavigationButtons";
76

8-
const Container = styled.div`
9-
display: flex;
10-
flex-direction: column;
11-
align-items: center;
12-
`;
13-
147
const TypeOfEscrow: React.FC = () => {
158
return (
16-
<Container>
9+
<div className="flex flex-col items-center">
1710
<Header text="Create an escrow" />
1811
{/* <Header text="What kind of escrow do you want to create?" /> */}
1912
<EscrowOptions />
2013
<Info />
2114
<NavigationButtons prevRoute="" nextRoute="/new-transaction/title" />
22-
</Container>
15+
</div>
2316
);
2417
};
2518

‎web/src/pages/NewTransaction/Header.tsx‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,10 @@
11
import React from "react";
22

3-
import styled, { css } from "styled-components";
4-
import { responsiveSize } from "styles/responsiveSize";
5-
import { landscapeStyle } from "styles/landscapeStyle";
6-
7-
const Container = styled.h1`
8-
margin-bottom: 20px;
9-
width: 84vw;
10-
text-align: center;
11-
font-size: ${responsiveSize(20, 24)};
12-
13-
${landscapeStyle(
14-
() => css`
15-
width: auto;
16-
margin-bottom: 29px;
17-
`
18-
)}
19-
`;
20-
213
interface IHeader {
224
text: string;
235
}
246

257
const Header: React.FC<IHeader> = ({ text }) => {
26-
return <Container>{text}</Container>;
8+
return <h1 className="mb-5 w-[84vw] text-center text-(length:--spacing-fluid-20-24) lg:w-auto lg:mb-7">{text}</h1>;
279
};
2810
export default Header;

0 commit comments

Comments
 (0)