Marketplace price selector

frontend/package.json

@@ -10,20 +10,23 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "@types/react-vis": "^1.11.13",
     "@types/three": "^0.144.0",
     "axios": "^0.27.2",
     "crypto-browserify": "^3.12.0",
     "eslint": "^8.48.0",
     "json5": "^2.2.1",
     "konva": "^9.2.0",
     "react": "^18.1.0",
+    "react-compound-slider": "^3.4.0",
     "react-dom": "^18.1.0",
     "react-error-boundary": "^3.1.4",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.31.3",
     "react-konva": "^18.2.10",
     "react-query": "^3.39.0",
     "react-router-dom": "^6.3.0",
+    "react-vis": "^1.12.1",
     "ses": "^0.15.16",
     "three": "^0.144.0",
     "typescript": "^4.6.4",

frontend/src/assets/icons/index.ts

@@ -18,7 +18,7 @@ import { ReactComponent as TriangleIcon } from "./triangle.svg";
 import { ReactComponent as TickIcon } from "./tick.svg";
 import { ReactComponent as ExclamationIcon } from "./exclamation.svg";
 import { ReactComponent as CheveronLeftRightIcon } from "./chevron-left-right.svg";
-import RangeIcon from "./range.png";
+import { ReactComponent as RangeIcon } from "./range.svg";
 import DefaultIcon from "./default-character.png";
 import { ReactComponent as DownArrowIcon } from "./down-arrow.svg";
 import { ReactComponent as BellIcon } from "./bell.svg";

frontend/src/components/asset-character-filters/asset-character-filters.tsx

@@ -2,28 +2,26 @@ import React, { FC, useState } from "react";
 
 import { originOptions, sortCharactersInventoryOptions, sortCharactersMarketOptions, titleOptions } from "../../assets/text/filter-options";
 import { color } from "../../design";
-import { ButtonText, ColorSelector, Filters, Label, PriceSelector, PrimaryButton, Select } from "../../components";
+import { ButtonText, ColorSelector, Filters, Label, PrimaryButton, Select } from "../../components";
 import { text } from "../../assets";
-import { MAX_PRICE, MIN_PRICE, SECTION } from "../../constants";
+import { SECTION } from "../../constants";
 import { useFilters } from "../../context/filter-context";
 import { AssetFilterContainer, AssetFilterWrapper, AssetSelectorContainer, SortAssetsByContainer } from "../asset-item-filters/styles";
+import { useGetCharacterMarketPrices } from "../../service";
+import { PriceRangeSlider } from "../price-range-slider/price-range-slider";
 
 interface Props {
   section: (typeof SECTION)[keyof typeof SECTION];
 }
 
 export const AssetCharacterFilters: FC<Props> = ({ section }) => {
-  const { title, origin, sort, reset, price, setOrigin, setTitle, setSort, setColors, setPrice, onReset } = useFilters();
+  const { title, origin, sort, reset, setOrigin, setTitle, setCharacterPrice, setSort, setColors, onReset } = useFilters();
   const [filterId, setFilterId] = useState("");
-
+  const [prices, fetched] = useGetCharacterMarketPrices();
   const openFilter = (id: string) => {
     setFilterId(id !== filterId ? id : "");
   };
 
-  const onPriceChange = (min: number, max: number) => {
-    setPrice({ min, max });
-  };
-
   return (
     <>
       <AssetFilterWrapper>
@@ -47,7 +45,7 @@ export const AssetCharacterFilters: FC<Props> = ({ section }) => {
             </Filters>
             {section === SECTION.SHOP && (
               <Filters label={text.filters.price} openFilter={openFilter} id={filterId}>
-                {price && <PriceSelector handleChange={onPriceChange} min={MIN_PRICE} max={MAX_PRICE} />}
+                {fetched && <PriceRangeSlider prices={prices} setPrice={setCharacterPrice} />}
               </Filters>
             )}
             <Filters label={text.filters.color} openFilter={openFilter} id={filterId}>

frontend/src/components/asset-item-filters/asset-item-filters.tsx

@@ -1,8 +1,8 @@
 import React, { FC, useState } from "react";
 import { AssetFilterContainer, AssetFilterWrapper, AssetSelectorContainer, SortAssetsByContainer } from "./styles";
-import { MAX_PRICE, MIN_PRICE, SECTION } from "../../constants";
+import { SECTION } from "../../constants";
 import { Filters } from "../filters";
-import { ColorSelector, PriceSelector, Select } from "../input-fields";
+import { ColorSelector, Select } from "../input-fields";
 import { text } from "../../assets";
 import { ButtonText, Label, PrimaryButton } from "../atoms";
 import { color } from "../../design";
@@ -14,24 +14,23 @@ import {
   sortItemsMarketOptions,
 } from "../../assets/text/filter-options";
 import { useFilters } from "../../context/filter-context";
+import { useGetItemMarketPrices } from "../../service";
+import { PriceRangeSlider } from "../price-range-slider/price-range-slider";
 
 interface Props {
   section: (typeof SECTION)[keyof typeof SECTION];
 }
 
 export const AssetItemFilters: FC<Props> = ({ section }) => {
-  const { categories, origin, sort, rarity, reset, price, setOrigin, setCategories, setRarity, setSort, setColors, setPrice, onReset } =
+  const { categories, origin, sort, rarity, reset, setOrigin, setItemPrice, setCategories, setRarity, setSort, setColors, onReset } =
     useFilters();
   const [filterId, setFilterId] = useState("");
+  const [prices, fetched] = useGetItemMarketPrices();
 
   const openFilter = (id: string) => {
     setFilterId(id !== filterId ? id : "");
   };
 
-  const onPriceChange = (min: number, max: number) => {
-    setPrice({ min, max });
-  };
-
   return (
     <>
       <AssetFilterWrapper>
@@ -63,7 +62,7 @@ export const AssetItemFilters: FC<Props> = ({ section }) => {
             </Filters>
             {section === SECTION.SHOP && (
               <Filters label={text.filters.price} openFilter={openFilter} id={filterId}>
-                {price && <PriceSelector handleChange={onPriceChange} min={MIN_PRICE} max={MAX_PRICE} />}
+                {fetched && <PriceRangeSlider prices={prices} setPrice={setItemPrice} />}
               </Filters>
             )}
             <Filters label={text.filters.color} openFilter={openFilter} id={filterId}>

frontend/src/components/input-fields/index.ts

@@ -1,3 +1,2 @@
 export * from "./select";
 export * from "./color-selector";
-export * from "./price-selector";

frontend/src/components/input-fields/styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 
-import { RangeIcon, TickIcon } from "../../assets";
+import { TickIcon } from "../../assets";
 import { DetailSectionColorPaletteWrap } from "../../containers/detail-section/detail-section-color-palette/styles";
 import { color, fontWeight, margins } from "../../design";
 import { BodyText, ButtonText, Input, SecondaryButton } from "../atoms";
@@ -77,6 +77,7 @@ export const SelectBox = styled.div<ViewProps>`
 
 export const ColorBox = styled(SelectBox)`
   width: 350px;
+  overflow: hidden;
   z-index: 10000000;
 `;
 
@@ -98,82 +99,36 @@ export const ButtonContainer = styled.div`
 `;
 
 export const RangeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
   margin-bottom: 40px;
+  width: 100%;
   ${SecondaryButton} {
     width: 40px;
   }
 `;
 
-interface RangeProps {
-  width?: number;
-  left?: number;
-}
-
+export const SpinnerContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+`;
 export const SliderContainer = styled.div`
+  display: flex;
   position: relative;
-  width: 278px;
+  align-items: center;
+  width: 100%;
 `;
 
 export const SliderTrack = styled.div`
-  height: 1px;
+  height: 4px;
   position: absolute;
-  border-bottom: 1px solid ${color.grey};
+  background: ${color.grey};
+  border-radius: 3px;
   width: 100%;
   z-index: 1;
 `;
-
-export const SliderRange = styled.div<RangeProps>`
-  border-radius: 0;
-  height: 4px;
-  width: ${(props): string => `${props.width}%;`};
-  left: ${(props): string => `${props.left}%;`};
-  position: absolute;
-  background-color: ${color.black};
-  z-index: 2;
-`;
-
-export const ThumbLeft = styled.input`
-  -webkit-appearance: none;
-  appearance: none;
-  ::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    -webkit-tap-highlight-color: transparent;
-  }
-  pointer-events: none;
-  position: absolute;
-  height: 0;
-  width: 278px;
-  outline: none;
-  ::-webkit-slider-thumb {
-    cursor: pointer;
-    height: 32px;
-    width: 40px;
-    margin-top: 4px;
-    -webkit-appearance: none;
-    appearance: none;
-    border: 0;
-    background: url(${RangeIcon});
-    pointer-events: all;
-    position: relative;
-  }
-  ::-moz-range-thumb {
-    cursor: pointer;
-    height: 32px;
-    width: 40px;
-    margin-top: 4px;
-    pointer-events: all;
-    position: relative;
-    border: 0;
-    background: url(${RangeIcon});
-  }
-
-  z-index: 3;
-`;
-
-export const ThumbRight = styled(ThumbLeft)`
-  z-index: 4;
-`;
-
 export const MaxInput = styled(Input)`
   width: 119px;
   padding: 3px 0 16px 33px;
@@ -198,7 +153,6 @@ export const TextLabel = styled(BodyText)`
   ::before {
     position: absolute;
     content: "IST";
-    font-family: aktiv-grotesk;
     font-weight: ${fontWeight.light};
     font-size: 14px;
     line-height: 18px;