upd: chains url filters

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stability-ui",
   "type": "module",
-  "version": "0.13.17-alpha",
+  "version": "0.13.18-alpha",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

src/layouts/AppStore.tsx

@@ -582,9 +582,9 @@ const AppStore = (props: React.PropsWithChildren): JSX.Element => {
     await Promise.all(
       CHAINS.map(async (chain) => {
         /////***** SET VAULTS DATA *****/////
-        const APIVaultsData = Object.entries(
+        const APIVaultsData = Object.values(
           stabilityAPIData?.vaults?.[chain.id] as Vaults
-        ).map(([, vault]) => vault);
+        );
 
         if (APIVaultsData.length) {
           await setVaultsData(APIVaultsData, prices?.[chain.id], chain.id);

src/modules/Platform/components/Chains/Chain.tsx

@@ -79,9 +79,7 @@ const Chain: React.FC<IProps> = ({ chain }) => {
   const vaultsInfo = useMemo(() => {
     if (!$apiData) return [];
 
-    const chainVaults: TVault[] = Object.entries($vaults[chain] || {}).map(
-      (vault) => vault[1] as TVault
-    );
+    const chainVaults: TVault[] = Object.values($vaults[chain] || {});
 
     const vaultsTVL: number = chainVaults.reduce(
       (acc: number, cur) => (acc += Number(cur?.tvl)),
@@ -101,7 +99,7 @@ const Chain: React.FC<IProps> = ({ chain }) => {
         content: chainVaults.length,
       },
       {
-        name: "APR",
+        name: "Income APR 24h",
         content: `${weightedAverageAPR.toFixed(2)}%`,
       },
       {
@@ -157,7 +155,6 @@ const Chain: React.FC<IProps> = ({ chain }) => {
                   {!index ? (
                     <a
                       className="h-[50px] text-[30px] whitespace-nowrap items-center self-center flex"
-                      target="_blank"
                       href={`/?chain=${chain}&status=all`}
                     >
                       {content}

src/modules/Platform/components/Chains/index.tsx

@@ -55,6 +55,14 @@ const Chains = (): JSX.Element => {
   const search: React.RefObject<HTMLInputElement> = useRef(null);
 
   const initTableData = async () => {
+    const searchParams = new URLSearchParams(window.location.search);
+
+    const chainStatuses = searchParams
+      .getAll("status")
+      .map((status) =>
+        status === "awaiting_issue" ? "awaiting_issue_creation" : status
+      );
+
     if (chains) {
       const chainsData = Object.entries(chains).map((chain) => {
         const allChainProtocols = getChainProtocols(chain[0]);
@@ -80,8 +88,27 @@ const Chains = (): JSX.Element => {
         };
       });
 
+      const filtredChainsData = chainStatuses.length
+        ? chainsData.filter((chain) =>
+            chainStatuses.includes(chain.status.toLowerCase())
+          )
+        : chainsData;
+
+      const filteredChains = chainStatuses.length
+        ? activeChains.map((chain) =>
+            chainStatuses.includes(
+              chain.name === "Awaiting issue"
+                ? "awaiting_issue_creation"
+                : chain.name.toLowerCase().split(" ").join("_")
+            )
+              ? { ...chain, active: !chain.active }
+              : chain
+          )
+        : activeChains.map((chain) => ({ ...chain, active: true }));
+
       setTableData(chainsData);
-      setFiltredTableData(chainsData);
+      setActiveChains(filteredChains);
+      setFiltredTableData(filtredChainsData);
       setIsLoaded(true);
     }
   };
@@ -91,6 +118,11 @@ const Chains = (): JSX.Element => {
       category === chain.name ? { ...chain, active: !chain.active } : chain
     );
 
+    ///// For chains URL filters
+    const newUrl = new URL(window.location.href);
+    const params = new URLSearchParams(newUrl.search);
+    /////
+
     const allActive = activeChains.every((chain) => chain.active);
     const allInactive = updatedChains.every((chain) => !chain.active);
 
@@ -106,6 +138,28 @@ const Chains = (): JSX.Element => {
       }));
     }
 
+    /// URL set
+    const activeChainsLength = updatedChains.filter(
+      (chain) => chain.active
+    )?.length;
+
+    if (activeChainsLength === updatedChains.length) {
+      params.delete("status");
+    } else {
+      params.delete("status");
+
+      updatedChains.forEach((chain) => {
+        const type = chain.name.toLowerCase().split(" ").join("_");
+
+        if (chain.active) {
+          params.append("status", type);
+        }
+      });
+    }
+
+    newUrl.search = `?${params.toString()}`;
+    window.history.pushState({}, "", newUrl.toString());
+
     setActiveChains(updatedChains);
   };
 
@@ -155,7 +209,7 @@ const Chains = (): JSX.Element => {
   useEffect(() => {
     tableHandler();
   }, [activeChains]);
-  // TVLRange
+
   useEffect(() => {
     initTableData();
   }, [$apiData]);

src/modules/Platform/components/Integrations/Integration.tsx

@@ -20,13 +20,12 @@ const Integration: React.FC<IProps> = ({ integrationName }) => {
 
   const integration = integrations[integrationName] || integrations.chainlink;
 
-  const flatChains = Object.entries(chains).map((chain) => chain[1]);
+  const flatChains = Object.values(chains);
 
   const website = extractDomain(integration.website);
 
-  const protocols = Object.entries(integration.protocols).map(
-    (entry) => entry[1]
-  );
+  const protocols = Object.values(integration.protocols);
+
   return (
     <div className="flex flex-col lg:w-[960px] xl:min-w-[1200px]">
       <Breadcrumbs links={["Platform", "Integrations", integration.name]} />

src/modules/Platform/components/Integrations/index.tsx

@@ -24,10 +24,10 @@ const Integrations = (): JSX.Element => {
 
   const initTableData = async () => {
     if (integrations) {
-      const integrationsData = Object.entries(integrations).map(
+      const integrationsData = Object.values(integrations).map(
         (integration) => ({
-          ...integration[1],
-          protocolsLength: Object.keys(integration[1].protocols).length,
+          ...integration,
+          protocolsLength: Object.keys(integration.protocols).length,
         })
       );
       setTableData(integrationsData);

src/modules/Platform/components/Strategies/index.tsx

@@ -24,14 +24,17 @@ const Strategies = (): JSX.Element => {
 
   const initTableData = async () => {
     if (strategies) {
-      const strategiesData = Object.entries(strategies).map((strategy) => ({
-        id: strategy[1].id,
-        shortId: strategy[1].shortId,
-        state: strategy[1].state,
-        contractGithubId: strategy[1].contractGithubId,
-        color: strategy[1].color,
-        bgColor: strategy[1].bgColor,
-      }));
+      const strategiesData = Object.values(strategies).map(
+        ({ id, shortId, state, contractGithubId, color, bgColor }) => ({
+          id,
+          shortId,
+          state,
+          contractGithubId,
+          color,
+          bgColor,
+        })
+      );
+
       setTableData(strategiesData);
     }
   };

src/modules/Platform/constants/index.ts

@@ -14,43 +14,43 @@ const CHAINS_INFO = [
     length: TOTAL_CHAINS.SUPPORTED,
     color: "text-green-400",
     bgColor: chainStatusInfo.SUPPORTED.color,
-    active: true,
+    active: false,
   },
   {
     name: "Awaiting deployment",
     length: TOTAL_CHAINS.AWAITING_DEPLOYMENT,
     color: "text-violet-400",
     bgColor: chainStatusInfo.AWAITING_DEPLOYMENT.color,
-    active: true,
+    active: false,
   },
   {
     name: "Development",
     length: TOTAL_CHAINS.CHAINLIB_DEVELOPMENT,
     color: "text-blue-400",
     bgColor: chainStatusInfo.CHAINLIB_DEVELOPMENT.color,
 
-    active: true,
+    active: false,
   },
   {
     name: "Awaiting developer",
     length: TOTAL_CHAINS.AWAITING_DEVELOPER,
     color: "text-yellow-200",
     bgColor: chainStatusInfo.AWAITING_DEVELOPER.color,
-    active: true,
+    active: false,
   },
   {
     name: "Awaiting issue",
     length: TOTAL_CHAINS.AWAITING_ISSUE_CREATION,
     color: "text-orange-300",
     bgColor: chainStatusInfo.AWAITING_ISSUE_CREATION.color,
-    active: true,
+    active: false,
   },
   {
     name: "Not supported",
     length: TOTAL_CHAINS.NOT_SUPPORTED,
     color: "text-gray-400",
     bgColor: chainStatusInfo.NOT_SUPPORTED.color,
-    active: true,
+    active: false,
   },
 ];
 

src/modules/Vault/components/InfoBar.tsx

@@ -97,15 +97,18 @@ const InfoBar: React.FC<IProps> = memo(({ network, vault }) => {
             <HeadingText text={vault.symbol} scale={2} />
           </div>
 
-          <div className="flex items-center">
+          <a
+            href={`/chains/${vaultChain?.id}`}
+            className="flex items-center cursor-pointer"
+          >
             <img
               className="w-6 h-6 rounded-full hidden lg:flex mr-1"
               src={vaultChain?.logoURI}
               alt={vaultChain?.name}
               title={vaultChain?.name}
             />
             {vaultChain?.name}
-          </div>
+          </a>
         </div>
       </div>
 

src/modules/Vaults/functions/initFilters.ts

@@ -23,7 +23,7 @@ export const initFilters = (
   vaults: TVault[],
   tableFilters: TTableFilters[],
   setTableFilters: React.Dispatch<React.SetStateAction<TTableFilters[]>>,
-  networksHandler: (chain: string) => void
+  networksHandler: (chains: string) => void
 ): void => {
   const shortNames: string[] = [
     ...new Set(
@@ -93,6 +93,7 @@ export const initFilters = (
       return f;
     });
   }
+
   if (chainParam) {
     networksHandler(chainParam);
   }

src/modules/Vaults/index.tsx

@@ -181,12 +181,11 @@ const Vaults = (): JSX.Element => {
     if (activeNetworksLength === updatedNetworks.length) {
       params.delete("chain");
     } else {
+      params.delete("chain");
+
       updatedNetworks.forEach((network) => {
         if (network.active) {
-          params.set("chain", network.id);
-
-          newUrl.search = `?${params.toString()}`;
-          window.history.pushState({}, "", newUrl.toString());
+          params.append("chain", network.id);
         }
       });
     }

src/utils/functions/getStrategyInfo.ts

@@ -31,9 +31,9 @@ export const getStrategyInfo = (
   vaultSymbol: string,
   strategyId: string
 ): IStrategyInfo => {
-  let strategyInfo = Object.entries(strategies)
-    .map((entry) => entry[1])
-    .find((strategy) => strategy.id === strategyId);
+  let strategyInfo = Object.values(strategies).find(
+    (strategy) => strategy.id === strategyId
+  );
 
   const {
     quickSwap,