Merge remote-tracking branch 'origin/develop' into frontend-upgrade/1…

…-staging
Kryha · Nov 7, 2023 · a2564ae · a2564ae
2 parents 4faf488 + 061b56e
commit a2564ae
Show file tree

Hide file tree

Showing 36 changed files with 691 additions and 522 deletions.
diff --git a/frontend/package.json b/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",

diff --git a/frontend/src/assets/icons/index.ts b/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";

diff --git a/frontend/src/assets/icons/range.png b/frontend/src/assets/icons/range.png
diff --git a/frontend/src/assets/icons/range.svg b/frontend/src/assets/icons/range.svg
diff --git a/frontend/src/components/asset-cards/item-cards-market.tsx b/frontend/src/components/asset-cards/item-cards-market.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useState } from "react";
 import { ASSETS_PER_PAGE } from "../../constants";
 import { AssetCardLoadMore } from "../asset-card-load-more/asset-card-load-more";
-import { AssetsContainer, AssetsShopWrapper, ShopWrapper } from "./styles";
+import { AssetsContainer, AssetsShopWrapper } from "./styles";
 import { useViewport } from "../../hooks";
 import { LoadingPage } from "../content-loader";
 import { ItemCardMarket } from "../asset-card/item-card-market";
@@ -34,17 +34,15 @@ export const ItemCardsMarket: FC<Props> = ({ isLoading, itemsInMarket, selectIte
 
   if (isLoading) return <LoadingPage spinner={false} />;
   return (
-    <ShopWrapper>
-      <AssetsShopWrapper height={height}>
-        {itemsInMarket.length > 0 && (
-          <AssetsContainer>
-            {itemsInMarket.slice(0, visibleAssets).map((itemInMarket) => (
-              <ItemCardMarket key={itemInMarket.id} itemInMarket={itemInMarket} selectItemInMarketId={selectItemInMarketId} />
-            ))}
-            {visibleAssets < itemsInMarket.length && <AssetCardLoadMore isLoading={isLoading} loadMore={loadMoreAssets} />}
-          </AssetsContainer>
-        )}
-      </AssetsShopWrapper>
-    </ShopWrapper>
+    <AssetsShopWrapper height={height}>
+      {itemsInMarket.length > 0 && (
+        <AssetsContainer>
+          {itemsInMarket.slice(0, visibleAssets).map((itemInMarket) => (
+            <ItemCardMarket key={itemInMarket.id} itemInMarket={itemInMarket} selectItemInMarketId={selectItemInMarketId} />
+          ))}
+          {visibleAssets < itemsInMarket.length && <AssetCardLoadMore isLoading={isLoading} loadMore={loadMoreAssets} />}
+        </AssetsContainer>
+      )}
+    </AssetsShopWrapper>
   );
 };
diff --git a/frontend/src/components/asset-cards/styles.ts b/frontend/src/components/asset-cards/styles.ts
@@ -5,25 +5,18 @@ interface AssetsProps {
   height: number;
 }
 
-export const ShopWrapper = styled.div`
-  display: flex;
-  width: 100%;
-`;
-
-export const FilterWrapper = styled.div<AssetsProps>`
-  overflow-y: scroll;
-  ${({ height }): string => `height: ${height - 250}px;`};
-  width: 50%;
-`;
 export const AssetsShopWrapper = styled.div<AssetsProps>`
+  flex: 1 0 450px;
+  display: flex;
+  flex-direction: column;
   overflow-y: scroll;
-  ${({ height }): string => `height: ${height - 280}px;`};
-  width: 100%;
 `;
 
 export const AssetsWrapper = styled.div<AssetsProps>`
+  flex: 1 0 450px;
+  display: flex;
+  flex-direction: column;
   overflow-y: scroll;
-  ${({ height }): string => `height: ${height - 200}px;`};
 `;
 export const AssetsContainer = styled.div`
   display: grid;
@@ -32,9 +25,7 @@ export const AssetsContainer = styled.div`
   list-style-type: none;
   isolation: isolate;
   flex-direction: column;
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-right: 8px;
 
   @media screen and (max-width: ${breakpoints.mobile}) {
     padding-left: 8px;

diff --git a/frontend/src/components/asset-character-filters/asset-character-filters.tsx b/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}>

diff --git a/frontend/src/components/asset-item-filters/asset-item-filters.tsx b/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}>

diff --git a/frontend/src/components/asset-item-filters/styles.ts b/frontend/src/components/asset-item-filters/styles.ts
@@ -22,6 +22,7 @@ export const AssetHeader = styled.div`
   margin-bottom: 24px;
 `;
 export const AssetFilterCount = styled(ButtonText)`
+  margin-top: ${margins.mini};
   margin-left: ${margins.mini};
   margin-bottom: ${margins.mini};
 `;

diff --git a/frontend/src/components/atoms/button.ts b/frontend/src/components/atoms/button.ts
@@ -11,6 +11,8 @@ interface ButtonProps {
   disabled?: boolean;
 }
 
+export const KeplerIconWrapper = styled.div``;
+
 export const PrimaryButton = styled.button<ButtonProps>`
   max-height: 35px;
   transition: all 0.4s ease 0s;
@@ -37,6 +39,9 @@ export const PrimaryButton = styled.button<ButtonProps>`
     ${ButtonText} {
       color: ${(props): string => props.fontColor || color.black};
     }
+    ${KeplerIconWrapper} svg {
+      filter: invert(100%);
+    }
   }
   &:active {
     background: ${(props): string => props.backgroundColor || color.white};

diff --git a/frontend/src/components/base-route/styles.ts b/frontend/src/components/base-route/styles.ts
@@ -18,6 +18,7 @@ export const TopbarContainer = styled.header<AnimationProps>`
   justify-content: space-between;
   align-items: flex-end;
   z-index: 100;
+  top: 0;
   margin-left: ${margins.medium};
   margin-right: ${margins.medium};
   padding-top: ${margins.medium};
@@ -48,8 +49,7 @@ export const RightBox = styled.div`
 
 export const ChildrenContainer = styled.div<AnimationProps>`
   display: flex;
-  align-items: stretch;
-  flex: 1 1 auto;
+  flex: 1;
   ${({ isLanding }) =>
     isLanding === true
       ? css`
@@ -69,6 +69,7 @@ export const ChildrenContainer = styled.div<AnimationProps>`
 export const FooterContainer = styled.div<AnimationProps>`
   display: flex;
   flex-direction: row;
+  bottom: 0;
   align-items: center;
   justify-content: flex-end;
   width: 100%;

diff --git a/frontend/src/components/footer/footer.tsx b/frontend/src/components/footer/footer.tsx
@@ -1,29 +1,40 @@
-import { FC } from "react";
+import React, { FC, useState } from "react";
 import { useMatch, useResolvedPath } from "react-router-dom";
 import { text } from "../../assets";
 import { color } from "../../design";
 import { routes } from "../../navigation";
 
-import { AboutText, AgoricText, FooterContainer, FooterWrapper, Link, PrivacyText } from "./styles";
+import { AgoricText, FooterContainer, FooterWrapper, Link, PrivacyText } from "./styles";
+import { NetworkSelect } from "../network-selector/network-select";
+import { useNetworkConfig } from "../../hooks/useNetwork";
+import { getLabelForNetwork, NetworkSelector } from "../network-selector/network-selector";
+import { networkOptions } from "../../constants";
 
 export const Footer: FC = () => {
   const resolvedShop = useResolvedPath(routes.shop);
-  const resolvedLanding = useResolvedPath(routes.root);
   const matchShop = useMatch({ path: resolvedShop.pathname, end: true });
-  const matchLanding = useMatch({ path: resolvedLanding.pathname, end: true });
+  const { network, setNetworkValue } = useNetworkConfig();
+
+  const label = getLabelForNetwork(network);
+
+  const [filterId, setFilterId] = useState("");
+
+  const openFilter = (id: string) => {
+    setFilterId(id !== filterId ? id : "");
+  };
 
   return (
     <FooterWrapper isShop={!!matchShop}>
+      <NetworkSelector label={label} openNetworkSelector={openFilter} id={filterId} hasValue={!!network}>
+        <NetworkSelect label={network} onChange={setNetworkValue} options={networkOptions} />
+      </NetworkSelector>
       <FooterContainer>
-        {!matchLanding && (
-          <Link to={routes.root}>
-            <AboutText customColor={color.darkGrey}>{text.navigation.about}</AboutText>
-          </Link>
-        )}
         <Link to={routes.privacy}>
           <PrivacyText customColor={color.darkGrey}>{text.navigation.privacyAndTerms}</PrivacyText>
         </Link>
-        <AgoricText customColor={color.darkGrey}>{text.navigation.agoricCopyright(new Date().getFullYear())}</AgoricText>
+        <Link to={routes.root}>
+          <AgoricText customColor={color.darkGrey}>{text.navigation.agoricCopyright(new Date().getFullYear())}</AgoricText>
+        </Link>
       </FooterContainer>
     </FooterWrapper>
   );

diff --git a/frontend/src/components/footer/styles.ts b/frontend/src/components/footer/styles.ts
@@ -10,34 +10,19 @@ interface FooterProps {
 export const FooterWrapper = styled.div<FooterProps>`
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
+  justify-content: space-between;
+  margin-left: 16px;
+  margin-top: 16px;
   align-items: flex-start;
-  gap: 20px;
-  position: relative;
+  width: 100%;
   z-index: 1000;
-  ${({ isShop }): string => {
-    return isShop
-      ? `
-      background: linear-gradient(294.15deg, #FAFAFA 10.87%, #FAFAFA 41.93%);
-      &:hover {
-        background: linear-gradient(294.15deg, #FAFAFA 10.87%, #FAFAFA 41.93%);
-      }
-        `
-      : `
-      background: linear-gradient(294.15deg, #FAFAFA 10.87%, rgba(250, 250, 250, 0) 41.93%);
-      &:hover {
-        background: linear-gradient(294.15deg, #FAFAFA 10.87%, #FAFAFA 41.93%);
-      }
-      `;
-  }};
-
   border-radius: 100px;
 `;
 
 export const FooterContainer = styled.div`
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
   padding: 10px 24px;
   gap: 20px;
 `;
@@ -49,7 +34,7 @@ export const AboutText = styled(ButtonText)`
 `;
 export const PrivacyText = styled(AboutText)``;
 
-export const AgoricText = styled(ButtonText)``;
+export const AgoricText = styled(AboutText)``;
 
 export const Link = styled(NavLink)`
   text-decoration: none;

diff --git a/frontend/src/components/input-fields/index.ts b/frontend/src/components/input-fields/index.ts
@@ -1,3 +1,2 @@
 export * from "./select";
 export * from "./color-selector";
-export * from "./price-selector";