add assets whitelist switch

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;
+        }
+    }
+}

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<SetStateAction<boolean>>;
+}
+
+export default function Switch({
+    firstTitle,
+    secondTitle,
+    isFirstSelected,
+    setIsFirstSelected
+}: SwitchProps) {
+    return (
+        <div className="switch">
+            <Button 
+                wrapper
+                className={`switch__item ${isFirstSelected ? "switch__item_selected" : ""}`}
+                onClick={() => setIsFirstSelected(true)}
+            >
+                <p>{firstTitle}</p>
+            </Button>
+            <Button
+                wrapper
+                className={`switch__item ${!isFirstSelected ? "switch__item_selected" : ""}`}
+                onClick={() => setIsFirstSelected(false)}
+            >
+                <p>{secondTitle}</p>
+            </Button>
+        </div>
+    )
+}

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<HTMLAnchorElement, MouseEvent>, asset: Object) {
         event.preventDefault();
@@ -66,6 +72,14 @@ function Assets() {
             <InfoTopPanel 
                 burgerOpened={burgerOpened} 
                 title="Assets"
+                content={
+                    <Switch
+                        firstTitle="Whitelisted"
+                        secondTitle="All Assets"
+                        isFirstSelected={isWhitelist}
+                        setIsFirstSelected={setIsWhitelist}
+                    />
+                }
             />
             <div className="assets__table">
                 <Table