UI updates (#33)

* fix styles in SignedOrderScreen * added elements to SignedOrderScreen component * fix input styles * fix open link icon in SignedOrderScreen
airswap · Dec 3, 2024 · 1b661d1 · 1b661d1
1 parent b56d94f
commit 1b661d1
Show file tree

Hide file tree

Showing 12 changed files with 150 additions and 59 deletions.
diff --git a/packages/site/package.json b/packages/site/package.json
@@ -33,6 +33,7 @@
     "ethers": "^6.13.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.4.0",
     "react-is": "^18.2.0",
     "styled-components": "5.3.3",
     "zustand": "^5.0.0"

diff --git a/packages/site/src/components/NumberInput.tsx b/packages/site/src/components/NumberInput.tsx
@@ -13,8 +13,15 @@ const Input = styled.input`
   border: none;
   padding: 1rem;
   background: transparent;
+  // color: #5a709d;
   color: white;
   width: 100%;
+  font-size: 28px;
+  font-weight: 500;
+
+  &::placeholder {
+    color: #5a709d;
+  }
 
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {

diff --git a/packages/site/src/pages/ReviewScreen/ReviewScreenStyles.ts b/packages/site/src/pages/ReviewScreen/ReviewScreenStyles.ts
@@ -4,7 +4,7 @@ export const ReviewScreenContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 60%;
+  width: 50%;
   padding: 2rem;
   gap: 1.5rem;
   border-radius: 3px;

diff --git a/packages/site/src/pages/SignedOrderScreen/SignedOrderScreen.tsx b/packages/site/src/pages/SignedOrderScreen/SignedOrderScreen.tsx
@@ -1,26 +1,24 @@
+import { IoMdOpen } from 'react-icons/io';
+
 import { SwapButton } from '../../components';
 // import { compressFullOrderURL } from '../../utils/compressFullOrderERC20';
 import { useSwapStore } from '../../stores';
 import {
   ActionButtonsBox,
-  FromTokenBox,
+  FromToTokenBox,
   HorizontalBox,
+  HorizontalDiv,
   SignedOrderScreenContainer,
   SpecifiedTakerAndExpiryBox,
-  ToTokenBox,
+  StyledH3,
+  TokenImageContainer,
+  VerbSpan,
   VerticalBox,
 } from './SignedOrderScreenStyles';
 
 export const SignedOrderScreen = () => {
   const { fromToken, fromAmount, toToken, toAmount, takerAddress, expiry } =
-    useSwapStore((state) => ({
-      fromToken: state.fromToken,
-      fromAmount: state.fromAmount,
-      toToken: state.toToken,
-      toAmount: state.toAmount,
-      takerAddress: state.takerAddress,
-      expiry: state.expiry,
-    }));
+    useSwapStore();
   // const handleCopyLink = async () => {
   //   // FIXME: Replace `undefined` with actual values
   //   const compressedURL = compressFullOrderURL(undefined);
@@ -38,26 +36,70 @@ export const SignedOrderScreen = () => {
 
   return (
     <SignedOrderScreenContainer>
-      <FromTokenBox>
-        <VerticalBox>
-          <span>From</span>
-          <span>{fromToken ?? 'WETH'}</span>
-        </VerticalBox>
-        <HorizontalBox>{fromAmount?.toString() ?? 0}</HorizontalBox>
-      </FromTokenBox>
-      <ToTokenBox>
-        <VerticalBox>
-          <span>To</span>
-          <span>{toToken ?? 'USDC'}</span>
-        </VerticalBox>
-        <VerticalBox>{toAmount?.toString() ?? 0}</VerticalBox>
-      </ToTokenBox>
+      <StyledH3>Order</StyledH3>
+      <FromToTokenBox>
+        <HorizontalDiv>
+          {/* FIXME: button opens etherscan link for contract address. Also fix icon */}
+          <IoMdOpen
+            size={16}
+            style={{
+              border: 'solid #798bad 0.5px',
+              borderRadius: '50%',
+              padding: '0.5rem',
+              color: '#798bad',
+            }}
+            onClick={() => null}
+          />
+          <VerticalBox>
+            <VerbSpan>From</VerbSpan>
+            <span>{fromToken}</span>
+          </VerticalBox>
+        </HorizontalDiv>
+        <HorizontalBox>
+          {fromAmount?.toString() ?? 0}
+          <TokenImageContainer>
+            {/* FIXME: replace with correct path to token image */}
+            <img src="" alt="" />
+          </TokenImageContainer>
+        </HorizontalBox>
+      </FromToTokenBox>
+      <FromToTokenBox>
+        <HorizontalDiv>
+          {/* FIXME: button opens etherscan link for contract address. Also fix icon */}
+          <IoMdOpen
+            size={16}
+            style={{
+              border: 'solid #798bad 0.5px',
+              borderRadius: '50%',
+              padding: '0.5rem',
+              color: '#798bad',
+            }}
+            onClick={() => null}
+          />
+          <VerticalBox>
+            <VerbSpan>To</VerbSpan>
+            <span>{toToken}</span>
+          </VerticalBox>
+        </HorizontalDiv>
+        <HorizontalBox>
+          {toAmount?.toString() ?? 0}
+          <TokenImageContainer>
+            {/* FIXME: replace with correct path to token image */}
+            <img src="" alt="" />
+          </TokenImageContainer>
+        </HorizontalBox>
+      </FromToTokenBox>
       <SpecifiedTakerAndExpiryBox>
-        <HorizontalBox>For {takerAddress ?? 'Anyone'}</HorizontalBox>
+        <HorizontalBox>
+          <VerbSpan>For: {takerAddress ?? 'Anyone'}</VerbSpan>
+        </HorizontalBox>
         <HorizontalBox>Expires in {expiry}</HorizontalBox>
       </SpecifiedTakerAndExpiryBox>
       <HorizontalBox>
-        1 {fromToken} = 333.333{toToken}
+        <VerbSpan>
+          {/* FIXME: remove placeholders and add conversioin rate */}1{' '}
+          {fromToken} = 333.333{toToken}
+        </VerbSpan>
       </HorizontalBox>
       <ActionButtonsBox>
         {/* FIXME: add cb function */}

diff --git a/packages/site/src/pages/SignedOrderScreen/SignedOrderScreenStyles.ts b/packages/site/src/pages/SignedOrderScreen/SignedOrderScreenStyles.ts
@@ -3,31 +3,62 @@ import styled from 'styled-components';
 export const SignedOrderScreenContainer = styled.div`
   display: flex;
   flex-direction: column;
-  width: 60%;
+  width: 50%;
   justify-content: center;
   align-items: center;
   padding: 1rem;
-  gap: 1rem;
+  gap: 1.5rem;
 `;
 
-export const FromTokenBox = styled.div`
+export const StyledH3 = styled.h3`
+  font-size: 38px;
+  margin: 1rem;
+`;
+
+export const HorizontalBox = styled.div`
   display: flex;
-  justify-content: space-between;
-  width: 100%;
-  background: #13203c;
-  border: #34425c solid 1.5px;
-  border-radius: 12px;
-  padding: 1rem;
+  flex-direction: row;
+  align-items: center;
+  margin: 0.5rem 1rem;
 `;
 
-export const ToTokenBox = styled.div`
+export const HorizontalDiv = styled.div`
   display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const FromToTokenBox = styled.div`
+  display: flex;
+  flex-direction: row;
   justify-content: space-between;
+  align-items: center;
   width: 100%;
   background: #13203c;
   border: #34425c solid 1.5px;
   border-radius: 12px;
-  padding: 1rem;
+  padding: 1.5rem 2rem;
+  color: white;
+  font-weight: 800;
+  font-size: 20px;
+`;
+
+export const VerbSpan = styled.span`
+  color: #798bad;
+  font-weight: 600;
+  font-size: 16px;
+`;
+
+export const TokenDataSpan = styled.span`
+  font-weight: 900;
+`;
+
+export const TokenImageContainer = styled.div`
+  width: 40px;
+  height: 40px;
+  margin-left: 1rem;
+  border: solid #798bad 0.5px;
+  border-radius: 50%;
 `;
 
 export const SpecifiedTakerAndExpiryBox = styled.div`
@@ -53,9 +84,3 @@ export const VerticalBox = styled.div`
   flex-direction: column;
   margin: 1rem;
 `;
-
-export const HorizontalBox = styled.div`
-  display: flex;
-  flex-direction: row;
-  margin: 1rem;
-`;
diff --git a/packages/site/src/pages/SwapWidget/SwapWidget.tsx b/packages/site/src/pages/SwapWidget/SwapWidget.tsx
@@ -72,11 +72,10 @@ export const SwapWidget = () => {
       {isTokenSelectorModalOpen && (
         <TokenSelectorModal
           onClose={closeTokenSelectorModal}
-          onTokenSelect={handleTokenSelect} // Pass handler for token selection
+          onTokenSelect={handleTokenSelect}
         />
       )}
 
-      {/* wrapper around 'for' and 'expires in' containers */}
       <HorizontalFlexBox>
         <ForContainer>
           <SelectLabelFor>For</SelectLabelFor>

diff --git a/packages/site/src/pages/SwapWidget/SwapWidgetStyles.ts b/packages/site/src/pages/SwapWidget/SwapWidgetStyles.ts
@@ -8,7 +8,7 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 60%;
+  width: 50%;
   padding: 2rem;
   font-size: 16px;
 `;

diff --git a/packages/site/src/pages/TokenSelectContainers/FromToken.tsx b/packages/site/src/pages/TokenSelectContainers/FromToken.tsx
@@ -6,6 +6,7 @@ import {
   TokenContainer,
   TokenImage,
   TokenSelector,
+  VerbSpan,
   VerticalBox,
 } from './FromTokenStyles';
 
@@ -17,11 +18,9 @@ export const FromToken = ({ openModal }: { openModal: () => void }) => {
       <TokenContainer>
         <TokenImage src="" alt="" />
         <TokenSelector>
-          <VerticalBox>
-            From
-            <FromTokenSpan onClick={openModal}>
-              {fromToken ?? 'ETH'}
-            </FromTokenSpan>
+          <VerticalBox onClick={openModal}>
+            <VerbSpan>From</VerbSpan>
+            <FromTokenSpan>{fromToken ?? 'ETH'}</FromTokenSpan>
           </VerticalBox>
         </TokenSelector>
         <AmountWrapper>

diff --git a/packages/site/src/pages/TokenSelectContainers/FromTokenStyles.ts b/packages/site/src/pages/TokenSelectContainers/FromTokenStyles.ts
@@ -6,17 +6,24 @@ export const TokenContainer = styled.div`
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 1rem;
+  padding: 2rem;
   margin: 1rem;
-  font-size: 18px;
   border: solid #34425c 1px;
   border-radius: 10px;
   background: #13203d;
   color: #798bad;
   font-weight: semibold;
+  font-weight: 800;
+  font-size: 20px;
+`;
+
+export const VerbSpan = styled.span`
+  font-size: 16px;
+  font-weight: 500;
 `;
 
 export const TokenImage = styled.img`
+  margin-right: 1rem;
   border: solid white 1px;
   width: 35px;
   height: 35px;

diff --git a/packages/site/src/pages/TokenSelectContainers/ToToken.tsx b/packages/site/src/pages/TokenSelectContainers/ToToken.tsx
@@ -6,6 +6,7 @@ import {
   TokenContainer,
   TokenImage,
   TokenSelector,
+  VerbSpan,
   VerticalBox,
 } from './FromTokenStyles';
 
@@ -15,9 +16,9 @@ export const ToToken = ({ openModal }: { openModal: () => void }) => {
     <TokenContainer>
       <TokenImage src="" alt="" />
       <TokenSelector>
-        <VerticalBox>
-          From
-          <FromTokenSpan onClick={openModal}>{toToken ?? 'ETH'}</FromTokenSpan>
+        <VerticalBox onClick={openModal}>
+          <VerbSpan>To</VerbSpan>
+          <FromTokenSpan>{toToken ?? 'ETH'}</FromTokenSpan>
         </VerticalBox>
       </TokenSelector>
       <AmountWrapper>

diff --git a/packages/site/src/pages/index.tsx b/packages/site/src/pages/index.tsx
@@ -21,7 +21,7 @@ import {
   Notice,
 } from './IndexStyles';
 import { ReviewScreen } from './ReviewScreen/ReviewScreen';
-// import { SignedOrderScreen } from './SignedOrderScreen/SignedOrderScreen';
+import { SignedOrderScreen } from './SignedOrderScreen/SignedOrderScreen';
 import { SwapWidget } from './SwapWidget/SwapWidget';
 
 const Index = () => {
@@ -43,7 +43,7 @@ const Index = () => {
       <Heading>OTC</Heading>
       <SwapWidget />
       <ReviewScreen />
-      {/* <SignedOrderScreen /> */}
+      <SignedOrderScreen />
 
       {/* Snaps boilerplate code below */}
       <CardContainer>

diff --git a/yarn.lock b/yarn.lock
@@ -17592,6 +17592,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-icons@npm:^5.4.0":
+  version: 5.4.0
+  resolution: "react-icons@npm:5.4.0"
+  peerDependencies:
+    react: "*"
+  checksum: 6ee5fcda49d9628e33d97e955ed6ec9f30b26226a13b14d0f3f9a698d0d5dd2e3878af7de295e0241bdd8f46af96f16bfea1fd0647beddc447c1de98bdb2178e
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -18743,6 +18752,7 @@ __metadata:
     prettier-plugin-packagejson: ^2.2.18
     react: ^18.2.0
     react-dom: ^18.2.0
+    react-icons: ^5.4.0
     react-is: ^18.2.0
     rimraf: ^3.0.2
     styled-components: 5.3.3