diff --git a/src/components/UI/Switch/Switch.scss b/src/components/UI/Switch/Switch.scss new file mode 100644 index 0000000..89f3021 --- /dev/null +++ b/src/components/UI/Switch/Switch.scss @@ -0,0 +1,22 @@ +.switch { + width: 232px; + height: 34px; + background-color: #234EE233; + display: flex; + align-items: center; + border-radius: 10px; + + .switch__item { + height: 100%; + flex: 1; + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + + + &.switch__item_selected { + background-color: #1F8FEB; + } + } +} \ No newline at end of file diff --git a/src/components/UI/Switch/Switch.tsx b/src/components/UI/Switch/Switch.tsx new file mode 100644 index 0000000..d957074 --- /dev/null +++ b/src/components/UI/Switch/Switch.tsx @@ -0,0 +1,36 @@ +import Button from "../Button/Button"; +import "./Switch.scss"; +import { Dispatch, SetStateAction } from "react"; + +interface SwitchProps { + firstTitle: string; + secondTitle: string; + isFirstSelected: boolean; + setIsFirstSelected: Dispatch>; +} + +export default function Switch({ + firstTitle, + secondTitle, + isFirstSelected, + setIsFirstSelected +}: SwitchProps) { + return ( +
+ + +
+ ) +} \ No newline at end of file diff --git a/src/pages/Assets/Assets.tsx b/src/pages/Assets/Assets.tsx index edec68e..fd11e9a 100644 --- a/src/pages/Assets/Assets.tsx +++ b/src/pages/Assets/Assets.tsx @@ -6,6 +6,7 @@ import Table from "../../components/default/Table/Table"; import Fetch from "../../utils/methods"; import AliasText from "../../components/default/AliasText/AliasText"; import JSONPopup from "../../components/default/JSONPopup/JSONPopup"; +import Switch from "../../components/UI/Switch/Switch"; function Assets() { const [burgerOpened, setBurgerOpened] = useState(false); @@ -19,9 +20,11 @@ function Assets() { const [itemsOnPage, setItemsOnPage] = useState("10"); const [page, setPage] = useState("1"); - useEffect(() => { + const [isWhitelist, setIsWhitelist] = useState(true); - }, [itemsOnPage, page]); + useEffect(() => { + setPage("1"); + }, [isWhitelist]); useEffect(() => { async function fetchAssets() { @@ -30,14 +33,17 @@ function Assets() { const offset = (pageInt - 1) * itemsOnPageInt; - const result = await Fetch.getAssets(offset, itemsOnPageInt); + const result = isWhitelist + ? await Fetch.getWhitelistedAssets(offset, itemsOnPageInt) + : await Fetch.getAssets(offset, itemsOnPageInt) + const resultAssets = result?.assets; if (!resultAssets || !(resultAssets instanceof Array)) return; setAssets(resultAssets); } fetchAssets(); - }, [itemsOnPage, page]); + }, [itemsOnPage, page, isWhitelist]); function onAssetClick(event: React.MouseEvent, asset: Object) { event.preventDefault(); @@ -66,6 +72,14 @@ function Assets() { + } />