add filter storage to everything

src/features/home/hooks/useFiltersStorage.js

@@ -0,0 +1,38 @@
+const FILTER_STORAGE = 'filterStorage';
+
+let data;
+
+if (localStorage) {
+  try {
+    data = JSON.parse(localStorage.getItem(FILTER_STORAGE));
+    if (!data) {
+      data = {};
+    }
+  } catch (e) {
+  }
+}
+
+const useFilterStorage = () => {
+
+  const saveData = () => {
+    if (localStorage) {
+      try {
+        localStorage.setItem(FILTER_STORAGE, JSON.stringify(data));
+      } catch (e) {
+      }
+    }
+  }
+
+  const setStorage = (key, value) => {
+    data[key] = value;
+    saveData();
+  }
+
+  const getStorage = (key) => {
+    return data[key];
+  }
+
+  return { getStorage, setStorage };
+};
+
+export default useFilterStorage;

src/features/vault/hooks/useFilteredPools.js

@@ -1,26 +1,20 @@
 import { useState, useEffect } from 'react';
+import useFilterStorage from '../../home/hooks/useFiltersStorage';
 
-const initialFilters = {
+const DEFAULT = {
   hideDecomissioned: true,
   hideZeroBalances: false,
   hideZeroVaultBalances: false,
 };
 
-const FILTERS = 'filteredPools';
+const KEY = 'filteredPools';
 
 const useFilteredPools = (pools, tokens) => {
-  const [filteredPools, setFilteredPools] = useState(pools);
-
-  let storedFilters;
-
-  if (localStorage) {
-    try {
-      storedFilters = JSON.parse(localStorage.getItem(FILTERS));
-    } catch (e) {
-    }
-  }
+  const { getStorage, setStorage } = useFilterStorage();
+  const data = getStorage(KEY);
 
-  const [filters, setFilters] = useState(storedFilters ? storedFilters : initialFilters);
+  const [filteredPools, setFilteredPools] = useState(pools);
+  const [filters, setFilters] = useState(data ? data : DEFAULT);
 
   const toggleFilter = key => {
     const newFilters = { ...filters };
@@ -29,11 +23,8 @@ const useFilteredPools = (pools, tokens) => {
   };
 
   useEffect(() => {
-    try {
-      localStorage.setItem(FILTERS, JSON.stringify(filters));
-    } catch (e) {
-    }
-  }, [filters]);
+    setStorage(KEY, filters);
+  }, [setStorage, filters]);
 
   useEffect(() => {
     let newPools = [...pools];

src/features/vault/hooks/usePoolsByAsset.js

@@ -1,11 +1,22 @@
 import { useState, useEffect } from 'react';
+import useFilterStorage from '../../home/hooks/useFiltersStorage';
+
+const DEFAULT = 'All';
+const KEY = 'poolsByAsset';
 
 const usePoolsByAsset = pools => {
-  const [asset, setAsset] = useState('All');
+  const { getStorage, setStorage } = useFilterStorage();
+  const data = getStorage(KEY);
+
+  const [asset, setAsset] = useState(data ? data : DEFAULT);
   const [poolsByAsset, setPoolsByAsset] = useState(pools);
 
   useEffect(() => {
-    if (asset === 'All') {
+    setStorage(KEY, asset);
+  }, [setStorage, asset]);
+
+  useEffect(() => {
+    if (asset === DEFAULT) {
       setPoolsByAsset(pools);
     } else {
       const newPools = pools.filter(pool => pool.assets.includes(asset));

src/features/vault/hooks/usePoolsByPlatform.js

@@ -1,17 +1,29 @@
 import { useState, useEffect } from 'react';
+import useFilterStorage from '../../home/hooks/useFiltersStorage';
+
+const DEFAULT = 'All';
+const KEY = 'poolsByPlatform';
 
 const usePoolsByPlatform = pools => {
-  const [platform, setPlatform] = useState('All');
+
+  const { getStorage, setStorage } = useFilterStorage();
+  const data = getStorage(KEY);
+
+  const [platform, setPlatform] = useState(data ? data : DEFAULT);
   const [poolsByPlatform, setPoolsByPlatform] = useState(pools);
 
   useEffect(() => {
-    if (platform === 'All') {
+    setStorage(KEY, platform);
+  }, [setStorage, platform])
+
+  useEffect(() => {
+    if (platform === DEFAULT) {
       setPoolsByPlatform(pools);
     } else {
       const newPools = pools.filter(pool => pool.platform === platform);
       setPoolsByPlatform(newPools);
     }
-  }, [pools, platform]);
+  }, [pools, platform, setPlatform]);
 
   return { poolsByPlatform, platform, setPlatform };
 };

src/features/vault/hooks/usePoolsByVaultType.js

@@ -1,26 +1,41 @@
 import { useState, useEffect } from 'react';
 import { stables } from '../components/Filters/constants.js';
+import useFilterStorage from '../../home/hooks/useFiltersStorage';
+
+const DEFAULT = 'All';
+const KEY = 'poolsByVaultType';
 
 const usePoolsByVaultType = pools => {
-  const [vaultType, setVaultType] = useState('All');
+  const { getStorage, setStorage } = useFilterStorage();
+  const data = getStorage(KEY);
+
+  const [vaultType, setVaultType] = useState(data ? data : DEFAULT);
   const [poolsByVaultType, setPoolsByVaultType] = useState(pools);
 
   useEffect(() => {
-    if (vaultType === 'All') {
-      setPoolsByVaultType(pools);
-    } else if (vaultType === 'Singles') {
-      const newPools = pools.filter(pool => pool.assets.length === 1);
-      setPoolsByVaultType(newPools);
-    } else if (vaultType === 'StableLPs') {
-      const isStable = (vaultType) => stables.includes(vaultType);
-      const newPools = pools.filter(pool => pool.assets.every(isStable));
-      setPoolsByVaultType(newPools);
-    } else if (vaultType === 'Stables') {
+    setStorage(KEY, vaultType);
+  }, [setStorage, vaultType])
+
+  useEffect(() => {
+    let newPools;
+
+    if (vaultType === 'Singles') {
+      newPools = pools.filter(pool => pool.assets.length === 1);
+    } else {
       const isStable = (vaultType) => stables.includes(vaultType);
-      const newPools = pools.filter(pool => pool.assets.some(isStable));
+      if (vaultType === 'StableLPs') {
+        newPools = pools.filter(pool => pool.assets.every(isStable)); // every
+      } else if (vaultType === 'Stables') {
+        newPools = pools.filter(pool => pool.assets.some(isStable)); // some
+      }
+    }
+
+    if (newPools && newPools.length) {
       setPoolsByVaultType(newPools);
+    } else {
+      setPoolsByVaultType(pools);
     }
-  }, [pools, vaultType]);
+  }, [pools, vaultType, setPoolsByVaultType]);
 
   return { poolsByVaultType, vaultType, setVaultType };
 };

src/features/vault/hooks/useSortedPools.js

@@ -1,9 +1,20 @@
 import { useState, useEffect } from 'react';
+import useFilterStorage from '../../home/hooks/useFiltersStorage';
+
+const DEFAULT = 'default';
+const KEY = 'sortedPools';
 
 const useSortedPools = (pools, apys) => {
-  const [order, setOrder] = useState('default');
+  const { getStorage, setStorage } = useFilterStorage();
+  const data = getStorage(KEY);
+
+  const [order, setOrder] = useState(data ? data : DEFAULT);
   const [sortedPools, setSortedPools] = useState(pools);
 
+  useEffect(() => {
+    setStorage(KEY, order);
+  }, [setStorage, order]);
+
   useEffect(() => {
     switch (order) {
       case 'apy':