204: Add filters to orders (#209)

package.json

@@ -9,8 +9,8 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
-    "@airswap/libraries": "4.2.4",
-    "@airswap/utils": "4.2.3",
+    "@airswap/libraries": "4.2.8",
+    "@airswap/utils": "4.2.6",
     "@coinbase/wallet-sdk": "^3.7.2",
     "@ethersproject/abi": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",

src/App.tsx

@@ -10,6 +10,7 @@ import DebugPage from './pages/DebugPage/DebugPage';
 import { useAppSelector } from './redux/hooks';
 import { useConfig } from './redux/stores/config/configHooks';
 import { selectConfigFailed } from './redux/stores/config/configSlice';
+import { useFilters } from './redux/stores/filters/filtersHooks';
 import { useIndexers } from './redux/stores/indexer/indexerHooks';
 import { useMetadata } from './redux/stores/metadata/metadataHooks';
 import { useTransactions } from './redux/stores/transactions/transactionsHooks';
@@ -25,6 +26,7 @@ const ConnectedApp = () => {
   useTransactions();
   useMetadata();
   useIndexers();
+  useFilters();
   useSwitchChain();
   useWeb3();
   useSwapEventsSubscriber();

src/components/Checkbox/Checkbox.scss

@@ -0,0 +1,44 @@
+@import "src/styles";
+
+$component: checkbox;
+
+.checkbox {
+    display: flex;
+    position: relative;
+
+    &__input {
+        position: absolute;
+        opacity: 0;
+    }
+
+    &__input:checked {
+
+        & + .#{$component}__box {
+            background-color: var(--c-primary);
+        }
+
+        & + .#{$component}__box .#{$component}__icon {
+            display: block;
+        }
+    }
+
+    &__box {
+        @extend %flex-align-center;
+
+        position: relative;
+        width: 1.5rem;
+        height: 1.5rem;
+        border-radius: .25rem;
+        background-color: var(--c-black);
+    }
+
+    &__icon {
+        display: none;
+        width: .875rem;
+    }
+
+    &__label {
+        margin-inline-start: 1rem;
+        font-weight: var(--fw-500);
+    }
+}

src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,59 @@
+import React, { FC } from 'react';
+
+import classNames from 'classnames';
+
+import Icon from '../Icon/Icon';
+
+import './Checkbox.scss';
+
+export type HTMLInputProps = JSX.IntrinsicElements['input'];
+
+export interface CheckboxProps extends Omit<HTMLInputProps, 'onChange'> {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  checkClassName?: string;
+  className?: string;
+  labelClassName?: string;
+}
+
+const Checkbox: FC<CheckboxProps> = ({
+  checked,
+  disabled,
+  label,
+  value,
+  onChange,
+  checkClassName = '',
+  className = '',
+  labelClassName = '',
+  ...checkboxProps
+}) => {
+  const handleChange = (): void => {
+    onChange(value);
+  };
+
+  const checkboxClassNames = classNames('checkbox', {
+    'checkbox--is-disabled': disabled,
+  }, className);
+
+  return (
+    <label id={label} className={checkboxClassNames}>
+      <input
+        {...checkboxProps}
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onChange={handleChange}
+        className="checkbox__input"
+      />
+
+      <div className={`checkbox__box ${checkClassName}`}>
+        <Icon name="check" className="checkbox__icon" />
+      </div>
+
+      <span className={`checkbox__label ${labelClassName}`}>{label}</span>
+    </label>
+  );
+};
+
+export default Checkbox;

src/components/Icon/icons/IconCheck.tsx

@@ -3,8 +3,8 @@ import React, { FC, ReactElement } from 'react';
 import { SvgIconProps } from '../Icon';
 
 const IconCheck: FC<SvgIconProps> = ({ className = '' }): ReactElement => (
-  <svg fill="none" viewBox="0 0 24 24" className={className}>
-    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+  <svg fill="none" viewBox="0 0 14 11" className={className}>
+    <path d="M4.95703 10.9993L0.207031 6.24935L1.39453 5.06185L4.95703 8.62435L12.6029 0.978516L13.7904 2.16602L4.95703 10.9993Z" />
   </svg>
 );
 

src/compositions/CheckboxGroup/CheckboxGroup.scss

@@ -0,0 +1,38 @@
+@import 'src/styles';
+
+$component: checkbox-group;
+
+.#{$component} {
+    border-radius: .25rem;
+    background: var(--c-dark);
+
+    &[open] {
+
+        .#{$component}__summary-icon {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__summary {
+        display: flex;
+        justify-content: space-between;
+        padding: 1rem;
+        cursor: pointer;
+    }
+
+    &__summary-icon {
+        min-width: 1.5rem;
+        min-height: 1.5rem;
+        color: var(--c-text-grey);
+    }
+
+    &__list {
+        margin-block-start: .25rem;
+        padding: 1rem;
+        padding-block-start: 0;
+    }
+
+    &__list-item + &__list-item {
+        margin-block-start: .5rem;
+    }
+}

src/compositions/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,42 @@
+import { FC, ReactElement } from 'react';
+
+import Checkbox, { CheckboxProps } from '../../components/Checkbox/Checkbox';
+import Icon from '../../components/Icon/Icon';
+
+import './CheckboxGroup.scss';
+
+interface CheckboxGroupCheckbox extends CheckboxProps {
+  key: string;
+}
+
+interface CheckboxGroupProps {
+  checkboxes: CheckboxGroupCheckbox[],
+  label: string;
+  className?: string;
+}
+
+const CheckboxGroup: FC<CheckboxGroupProps> = ({ checkboxes, label, className = '' }): ReactElement => (
+  <details className={`checkbox-group ${className}`}>
+    <summary className="checkbox-group__summary">
+      {label}
+
+      <Icon
+        name="chevron-down"
+        className="checkbox-group__summary-icon"
+      />
+    </summary>
+
+    <ul className="checkbox-group__list">
+      {checkboxes.map(checkbox => (
+        <li
+          key={checkbox.key}
+          className="checkbox-group__list-item"
+        >
+          <Checkbox {...checkbox} />
+        </li>
+      ))}
+    </ul>
+  </details>
+);
+
+export default CheckboxGroup;

src/compositions/Dialog/Dialog.scss

@@ -1,32 +1,93 @@
+@import "src/styles";
+
 .dialog {
-    margin: 1rem auto;
+    top: var(--top-bar-height);
+    margin: 0;
     width: 100%;
+    min-width: 100%;
     height: 100vh;
-    height: 100svh;
-    padding: 0;
-    max-width: 40rem;
-    overflow: hidden;
+    height: calc(100dvh - var(--top-bar-height));
+    padding: var(--page-padding);
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: var(--c-black);
 
     &::backdrop {
         background-color: rgba(0, 0, 0, .5);
+        opacity: 0;
         cursor: pointer;
     }
 
-    &__content {
-        display: flex;
-        position: relative;
-        padding-top: 2rem;
+    &[open] {
+        animation: slideIn .3s ease-out normal;
+    }
+
+    &--is-closing {
+        animation: slideOut .3s ease-in normal !important;
+    }
+
+    @include for-size(tablet-portrait-up) {
+        top: 0;
+        margin: auto;
+        padding: 0;
+        padding-block: 2rem;
+        max-width: 40rem;
+        min-width: unset;
         max-height: 100%;
-        min-height: 100%;
+        height: auto;
+        background: none;
         overflow: hidden;
-        background: var(--c-dark);
+
+        &[open] {
+            animation: fadeIn .2s ease-out normal;
+        }
+
+        &--is-closing {
+            animation: fadeOut .2s ease-in normal !important;
+        }
+
+        &::backdrop {
+            opacity: 1;
+        }
+    }
+
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        margin-block-end: 1.5rem;
+        width: 100%;
+    }
+
+    &__label {
+        font-size: 1.125rem;
+        font-weight: var(--fw-700);
     }
 
     &__close-button {
-        position: absolute;
-        top: 1rem;
-        right: 1rem;
+        justify-content: flex-end;
+        margin-inline-start: auto;
         width: 1.5rem;
         color: var(--c-white);
     }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+
+        @include for-size(tablet-portrait-up) {
+            border-radius: .25rem;
+            height: 100%;
+            padding: var(--page-padding);
+            background: var(--c-dark);
+        }
+    }
+
+    &__children-wrapper {
+
+        @include for-size(tablet-portrait-up) {
+            height: calc(100% - 3rem);
+        }
+    }
 }