Feature/signed order url (#24)

* comrpessFullOrderERC20 function setup * compressFullORderERC20 file * makeOtcStore Zustand file, appError types * SignedOrderScreen component * ReviewScreen template * fix zustand store in SwapWidget and ReviewScreen * convertToUnixTimestamp function
airswap · Nov 27, 2024 · 4bb92df · 4bb92df
1 parent e98301b
commit 4bb92df
Show file tree

Hide file tree

Showing 27 changed files with 1,931 additions and 181 deletions.
diff --git a/package.json b/package.json
@@ -54,7 +54,17 @@
   "lavamoat": {
     "allowScripts": {
       "@lavamoat/preinstall-always-fail": false,
-      "sharp": true
+      "sharp": true,
+      "@airswap/libraries>@airswap/utils>ethereumjs-util>ethereum-cryptography>keccak": false,
+      "@airswap/libraries>@airswap/utils>ethereumjs-util>ethereum-cryptography>secp256k1": false,
+      "@airswap/libraries>websocket>bufferutil": false,
+      "@airswap/libraries>websocket>es5-ext": false,
+      "@airswap/libraries>websocket>es5-ext>es6-iterator>es5-ext": false,
+      "@airswap/libraries>websocket>es5-ext>esniff>es5-ext": false,
+      "@airswap/libraries>websocket>utf-8-validate": false
     }
+  },
+  "dependencies": {
+    "@airswap/libraries": "^5.0.1"
   }
 }
diff --git a/packages/site/package.json b/packages/site/package.json
@@ -26,8 +26,11 @@
     ]
   },
   "dependencies": {
+    "@airswap/libraries": "^5.0.1",
+    "@airswap/utils": "^5.0.1",
     "@metamask/providers": "^16.0.0",
     "@radix-ui/react-select": "^2.1.2",
+    "ethers": "^6.13.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",

diff --git a/packages/site/src/components/Buttons.tsx b/packages/site/src/components/Buttons.tsx
@@ -5,10 +5,6 @@ import { ReactComponent as FlaskFox } from '../assets/flask_fox.svg';
 import { useMetaMask, useRequestSnap } from '../hooks';
 import { shouldDisplayReconnectButton } from '../utils';
 
-type SwapButtonProps = {
-  label: string;
-};
-
 const Link = styled.a`
   display: flex;
   align-self: flex-start;
@@ -74,23 +70,6 @@ const ConnectedIndicator = styled.div`
   background-color: green;
 `;
 
-const StyledSwapButton = styled.button`
-  display: flex;
-  color: white;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  background: #2c70ff;
-  text-transform: uppercase;
-  border-radius: 2px;
-  border: none;
-
-  &:hover {
-    background-color: #0c5cff;
-    border: solid 1px #3779f7;
-  }
-`;
-
 export const InstallFlaskButton = () => (
   <Link href="https://metamask.io/flask/" target="_blank">
     <FlaskFox />
@@ -144,7 +123,3 @@ export const HeaderButtons = () => {
     </ConnectedContainer>
   );
 };
-
-export const SwapButton = ({ label }: SwapButtonProps) => {
-  return <StyledSwapButton>{label}</StyledSwapButton>;
-};
diff --git a/packages/site/src/components/NumberInput.tsx b/packages/site/src/components/NumberInput.tsx
@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
 
 type NumberInputProps = {
+  value?: number;
   placeholder: string;
   onTextChange: (value: number) => void;
 };
@@ -24,16 +25,19 @@ const Input = styled.input`
 
 export const NumberInput = ({
   placeholder,
+  value,
   onTextChange,
 }: NumberInputProps) => {
-  const [inputValue, setInputValue] = useState<number | undefined>(undefined);
+  const [inputValue, setInputValue] = useState<number | undefined>(value);
 
   // eslint-disable-next-line id-length
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseFloat(e.target.value);
-    if (!isNaN(value)) {
-      setInputValue(value);
-      onTextChange(value);
+    const newValue = Number(e.target.value); // Renamed variable to avoid shadowing
+    if (Number.isNaN(newValue)) {
+      setInputValue(undefined);
+    } else {
+      setInputValue(newValue);
+      onTextChange(newValue);
     }
   };
 
@@ -42,7 +46,7 @@ export const NumberInput = ({
       type="number"
       min={0}
       placeholder={placeholder}
-      value={inputValue}
+      value={inputValue ?? ''}
       onChange={handleInputChange}
     />
   );

diff --git a/packages/site/src/components/RadixSelect.tsx b/packages/site/src/components/RadixSelect.tsx
@@ -1,18 +1,6 @@
 import * as Select from '@radix-ui/react-select';
 import styled from 'styled-components';
 
-type SelectItem = {
-  value: string;
-  label: string;
-};
-
-type SelectProps = {
-  ariaLabel: string;
-  placeholder: string;
-  items: SelectItem[];
-  onSelectChange: (value: any) => void;
-};
-
 const StyledTrigger = styled(Select.Trigger)`
   font-size: 12px;
   background-color: black;
@@ -40,14 +28,28 @@ const StyledItem = styled(Select.Item)`
   }
 `;
 
+type SelectItem = {
+  value: string;
+  label: string;
+};
+
+type SelectProps = {
+  ariaLabel: string;
+  placeholder: string;
+  value?: string; // Add value prop
+  items: SelectItem[];
+  onSelectChange: (value: string) => void; // Ensure value is string
+};
+
 export const RadixSelect = ({
   ariaLabel,
   placeholder,
+  value = '',
   items,
   onSelectChange,
 }: SelectProps) => {
   return (
-    <Select.Root onValueChange={onSelectChange}>
+    <Select.Root value={value} onValueChange={onSelectChange}>
       <StyledTrigger aria-label={ariaLabel}>
         <Select.Value placeholder={placeholder} />
         <Select.Icon />
@@ -63,7 +65,6 @@ export const RadixSelect = ({
                 <Select.ItemIndicator />
               </StyledItem>
             ))}
-            <Select.Separator />
           </Select.Viewport>
           <Select.ScrollDownButton />
           <Select.Arrow />

diff --git a/packages/site/src/components/SwapButton.tsx b/packages/site/src/components/SwapButton.tsx
@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+type SwapButtonProps = {
+  label: string;
+  onClick: () => void;
+};
+
+const StyledSwapButton = styled.button`
+  display: flex;
+  color: white;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background: #2c70ff;
+  text-transform: uppercase;
+  border-radius: 2px;
+  border: none;
+
+  &:hover {
+    background-color: #0c5cff;
+    border: solid 1px #3779f7;
+  }
+`;
+
+export const SwapButton = ({ label, onClick }: SwapButtonProps) => {
+  return <StyledSwapButton onClick={onClick}>{label}</StyledSwapButton>;
+};
diff --git a/packages/site/src/components/TextInput.tsx b/packages/site/src/components/TextInput.tsx
@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import type { ChangeEvent } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
 
 type TextInputProps = {
   placeholder: string;
-  defaultValue?: string;
-  onTextChange: (value: string) => void;
+  defaultValue?: string | undefined;
+  onTextChange: (value: string | undefined) => void;
 };
 
 const Input = styled.input`
@@ -19,14 +20,16 @@ const Input = styled.input`
 
 export const TextInput = ({
   placeholder,
-  defaultValue = '',
+  defaultValue,
   onTextChange,
 }: TextInputProps) => {
-  const [inputValue, setInputValue] = useState<string>(defaultValue);
+  const [inputValue, setInputValue] = useState<string | undefined>(
+    defaultValue,
+  );
 
   // eslint-disable-next-line id-length
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = e.target;
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value || undefined;
     setInputValue(value);
     onTextChange(value);
   };
@@ -35,7 +38,7 @@ export const TextInput = ({
     <Input
       type="text"
       placeholder={placeholder}
-      value={inputValue}
+      value={inputValue ?? ''}
       onChange={handleInputChange}
     />
   );

diff --git a/packages/site/src/components/index.ts b/packages/site/src/components/index.ts
@@ -4,4 +4,5 @@ export * from './Header';
 export * from './MetaMask';
 export * from './NumberInput';
 export * from './RadixSelect';
+export * from './SwapButton';
 export * from './TextInput';
diff --git a/packages/site/src/errors/appError.tsx b/packages/site/src/errors/appError.tsx
@@ -0,0 +1,32 @@
+import type { AppError } from 'src/types/AppError';
+import { AppErrorType } from 'src/types/AppError';
+
+// eslint-disable-next-line id-length
+export const isAppError = (x: any): x is AppError => {
+  return (
+    typeof x === 'object' &&
+    x !== null &&
+    'type' in x &&
+    Object.values(AppErrorType).includes(x.type)
+  );
+};
+
+/**
+ * Transforms the given arguments into an `AppError` object.
+ *
+ * @param type - The type of the error, based on `AppErrorType`.
+ * @param error - An optional underlying error (e.g., `RpcError`, `EthersProjectError`).
+ * @param argument - An optional string argument providing additional context for the error.
+ * @returns An `AppError` object containing the provided details.
+ */
+export function transformToAppError(
+  type: AppErrorType,
+  error?: AppError['error'],
+  argument?: string,
+): AppError {
+  return {
+    ...(argument !== undefined && { argument }),
+    ...(error !== undefined && { error }),
+    type,
+  };
+}
diff --git a/packages/site/src/pages/FromToken/FromToken.tsx b/packages/site/src/pages/FromToken/FromToken.tsx
@@ -1,6 +1,5 @@
-import { RadixSelect } from '../../components';
-import { NumberInput } from '../../components/NumberInput';
-import { useSwapStore } from '../../store/SwapStore';
+import { RadixSelect, NumberInput } from '../../components';
+import { useSwapStore } from '../../stores/SwapStore';
 import {
   AmountWrapper,
   FromTokenContainer,
@@ -17,7 +16,7 @@ export const FromToken = () => {
           ariaLabel="from-token"
           placeholder="ETH"
           items={[{ value: 'ether', label: 'ether' }]}
-          onSelectChange={setFromToken}
+          onSelectChange={(value) => setFromToken(value)}
         />
       </TokenSelector>
       <AmountWrapper>

diff --git a/packages/site/src/pages/IndexStyles.ts b/packages/site/src/pages/IndexStyles.ts
@@ -0,0 +1,71 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  margin-top: 7.6rem;
+  margin-bottom: 7.6rem;
+  ${({ theme }) => theme.mediaQueries.small} {
+    padding-left: 2.4rem;
+    padding-right: 2.4rem;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    width: auto;
+  }
+`;
+
+export const Heading = styled.h1`
+  margin-top: 0;
+  margin-bottom: 2.4rem;
+  text-align: center;
+`;
+
+export const CardContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  max-width: 64.8rem;
+  width: 100%;
+  height: 100%;
+  margin-top: 1.5rem;
+`;
+
+export const Notice = styled.div`
+  background-color: ${({ theme }) => theme.colors.background?.alternative};
+  border: 1px solid ${({ theme }) => theme.colors.border?.default};
+  color: ${({ theme }) => theme.colors.text?.alternative};
+  border-radius: ${({ theme }) => theme.radii.default};
+  padding: 2.4rem;
+  margin-top: 2.4rem;
+  max-width: 60rem;
+  width: 100%;
+
+  & > * {
+    margin: 0;
+  }
+  ${({ theme }) => theme.mediaQueries.small} {
+    margin-top: 1.2rem;
+    padding: 1.6rem;
+  }
+`;
+
+export const ErrorMessage = styled.div`
+  background-color: ${({ theme }) => theme.colors.error?.muted};
+  border: 1px solid ${({ theme }) => theme.colors.error?.default};
+  color: ${({ theme }) => theme.colors.error?.alternative};
+  border-radius: ${({ theme }) => theme.radii.default};
+  padding: 2.4rem;
+  margin-bottom: 2.4rem;
+  margin-top: 2.4rem;
+  max-width: 60rem;
+  width: 100%;
+  ${({ theme }) => theme.mediaQueries.small} {
+    padding: 1.6rem;
+    margin-bottom: 1.2rem;
+    margin-top: 1.2rem;
+    max-width: 100%;
+  }
+`;