From 185a5dabdff5d49bf28b057c518c9a2adaada09d Mon Sep 17 00:00:00 2001
From: Damian <damian.ovidiu27@gmail.com>
Date: Thu, 11 Jul 2024 19:41:44 +0300
Subject: [PATCH] feat: local storage and query param chain

---
 src/components/MvxSolSwitch.tsx            | 49 +++++++++++++++++-----
 src/pages/Account/MyWallet/index.tsx       |  6 ++-
 src/pages/AppMarketplace/NFTunes/index.tsx | 30 +++++++------
 src/store/LocalStorageStore.ts.tsx         | 29 ++++++++-----
 4 files changed, 77 insertions(+), 37 deletions(-)

diff --git a/src/components/MvxSolSwitch.tsx b/src/components/MvxSolSwitch.tsx
index f699641..687c74a 100644
--- a/src/components/MvxSolSwitch.tsx
+++ b/src/components/MvxSolSwitch.tsx
@@ -1,13 +1,40 @@
-import React from "react";
-
-export function MvxSolSwitch({  toggleState, setToggleState}: { toggleState: boolean, setToggleState: any }) {
-  console.log(toggleState);
-    return (
-        <label className="inline-flex items-center cursor-pointer m-3">
-            <span className="me-3 text-sm font-medium text-gray-900 dark:text-gray-300">MultiversX</span>
-            <input type="checkbox" value="" className="sr-only peer" onChange={setToggleState}/>
-            <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-            <span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">Solana</span>
-        </label>
+import React, { useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import { useLocalStorageStore } from "store/LocalStorageStore.ts";
+
+export function MvxSolSwitch() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const defaultChain = useLocalStorageStore((state) => state.defaultChain);
+  const setDefaultChain = useLocalStorageStore((state) => state.setDefaultChain);
+
+  function handleChainChange() {
+    setDefaultChain(defaultChain === "solana" ? "multiversx" : "solana");
+  }
+
+  useEffect(() => {
+    const chainParam = searchParams.get("chain");
+    if (chainParam === "solana") {
+      setDefaultChain("solana");
+    } else if (chainParam === "multiversx") {
+      setDefaultChain("multiversx");
+    }
+  }, []);
+
+  return (
+    <label className="inline-flex items-center cursor-pointer m-3">
+      <span className="me-3 text-xl font-medium text-gray-900 dark:text-gray-300">MultiversX</span>
+      <input
+        type="checkbox"
+        checked={defaultChain === "solana" ? true : false}
+        value=""
+        className="sr-only peer"
+        onChange={() => {
+          handleChainChange();
+        }}
+      />
+      <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+      <span className="ms-3 text-xl font-medium text-gray-900 dark:text-gray-300">Solana</span>
+    </label>
   );
 }
diff --git a/src/pages/Account/MyWallet/index.tsx b/src/pages/Account/MyWallet/index.tsx
index 3f18d99..b0e9637 100644
--- a/src/pages/Account/MyWallet/index.tsx
+++ b/src/pages/Account/MyWallet/index.tsx
@@ -19,6 +19,7 @@ import { BlobDataType, ExtendedViewDataReturnType } from "libs/types";
 import { decodeNativeAuthToken, getApiDataMarshal, sleep, toastError } from "libs/utils";
 import { useAccountStore } from "store/account";
 import { useNftsStore } from "store/nfts";
+import { useLocalStorageStore } from "store/LocalStorageStore.ts";
 
 export const MyWallet = () => {
   const { tokenLogin } = useGetLoginInfo();
@@ -31,7 +32,8 @@ export const MyWallet = () => {
   const { mvxNfts, isLoadingMvx, solNfts, isLoadingSol } = useNftsStore();
   const [numberOfMvxNftsShown, setNumberOfMvxNftsShown] = useState<number>(SHOW_NFTS_STEP);
   const [shownMvxDataNfts, setShownMvxDataNfts] = useState<DataNft[]>(mvxNfts.slice(0, SHOW_NFTS_STEP));
-  const [mvxNetworkSelected, setMvxNetworkSelected] = useState<boolean>(true);
+  const defaultChain = useLocalStorageStore((state) => state.defaultChain);
+  const mvxNetworkSelected = defaultChain === "multiversx";
   const [numberOfSolNftsShown, setNumberOfSolNftsShown] = useState<number>(SHOW_NFTS_STEP);
   const [shownSolDataNfts, setShownSolDataNfts] = useState<DasApiAsset[]>(solNfts.slice(0, SHOW_NFTS_STEP));
   const { publicKey, signMessage } = useWallet();
@@ -246,7 +248,7 @@ export const MyWallet = () => {
 
   return (
     <>
-      <MvxSolSwitch toggleState={mvxNetworkSelected} setToggleState={() => setMvxNetworkSelected(!mvxNetworkSelected)} />
+      <MvxSolSwitch />
       {mvxNetworkSelected && (
         <HeaderComponent pageTitle={"My MultiversX Data NFTs"} hasImage={false} pageSubtitle={"My MultiversX Data NFTs"} dataNftCount={mvxNfts.length}>
           {shownMvxDataNfts.length > 0 ? (
diff --git a/src/pages/AppMarketplace/NFTunes/index.tsx b/src/pages/AppMarketplace/NFTunes/index.tsx
index d70e4fb..a7ee8b4 100644
--- a/src/pages/AppMarketplace/NFTunes/index.tsx
+++ b/src/pages/AppMarketplace/NFTunes/index.tsx
@@ -3,7 +3,7 @@ import { DataNft, ViewDataReturnType } from "@itheum/sdk-mx-data-nft";
 import { useGetLoginInfo, useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks";
 import { motion } from "framer-motion";
 import { MoveDown, Music, Music2, PlayCircle } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import { NF_TUNES_TOKENS, FEATURED_NF_TUNES_TOKEN } from "appsConfig";
 import benefitsLogo1 from "assets/img/nf-tunes/benefits-logo1.png";
 import benefitsLogo2 from "assets/img/nf-tunes/benefits-logo2.png";
@@ -53,6 +53,7 @@ import { SolDataNftCard } from "components/SolDataNftCard";
 import { SolAudioPlayer } from "components/AudioPlayer/SolAudioPlayer";
 import { itheumSolPreaccess, itheumSolViewData } from "libs/sol/SolViewData";
 import bs58 from "bs58";
+import { useLocalStorageStore } from "store/LocalStorageStore.ts";
 
 export const NFTunes = () => {
   const { theme } = useTheme();
@@ -69,12 +70,15 @@ export const NFTunes = () => {
   const [dataMarshalResponse, setDataMarshalResponse] = useState({ "data_stream": {}, "data": [] });
   const [firstSongBlobUrl, setFirstSongBlobUrl] = useState<string>();
 
-  const { mvxNfts, isLoadingMvx, solNfts, isLoadingSol, updateIsLoadingMvx, updateIsLoadingSol } = useNftsStore();
+  const { mvxNfts, isLoadingMvx, solNfts, isLoadingSol, updateIsLoadingMvx } = useNftsStore();
   const nfTunesTokens = [...NF_TUNES_TOKENS].filter((v) => mvxNfts.find((nft) => nft.collection === v.tokenIdentifier && nft.nonce === v.nonce));
 
-  const [mvxNetworkSelected, setMvxNetworkSelected] = useState<boolean>(true);
-  const [shownSolDataNfts, setShownSolDataNfts] = useState<DasApiAsset[]>(solNfts.slice(0, SHOW_NFTS_STEP));
-  const [numberOfSolNftsShown, setNumberOfSolNftsShown] = useState<number>(SHOW_NFTS_STEP);
+  // get query param called chain
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const defaultChain = useLocalStorageStore((state) => state.defaultChain);
+  const mvxNetworkSelected = defaultChain === "multiversx";
+  const [shownSolAppDataNfts, setShownSolAppDataNfts] = useState<DasApiAsset[]>(solNfts.slice(0, SHOW_NFTS_STEP));
   const { publicKey, signMessage } = useWallet();
 
   const solPreaccessNonce = useAccountStore((state: any) => state.solPreaccessNonce);
@@ -96,7 +100,7 @@ export const NFTunes = () => {
 
   useEffect(() => {
     if (!hasPendingTransactions) {
-      setShownSolDataNfts(solNfts.filter((nft: DasApiAsset) => nft.content.metadata.name.includes("Music")));
+      setShownSolAppDataNfts(solNfts.filter((nft: DasApiAsset) => nft.content.metadata.name.includes("Music")));
     }
   }, [solNfts]);
 
@@ -201,14 +205,14 @@ export const NFTunes = () => {
 
   async function viewSolData(index: number) {
     try {
-      if (!(index >= 0 && index < shownSolDataNfts.length)) {
+      if (!(index >= 0 && index < shownSolAppDataNfts.length)) {
         toastError("Data is not loaded");
         return;
       }
       setFirstSongBlobUrl(undefined);
       setIsFetchingDataMarshal(true);
 
-      const dataNft = shownSolDataNfts[index];
+      const dataNft = shownSolAppDataNfts[index];
 
       let usedPreAccessNonce = solPreaccessNonce;
       let usedPreAccessSignature = solPreaccessSignature;
@@ -282,7 +286,7 @@ export const NFTunes = () => {
       <div className=" flex flex-col justify-center items-center font-[Clash-Regular] w-full max-w-[100rem]">
         <div className="flex flex-col justify-center items-center xl:items-start h-[100vsh] w-[100%] pt-8 xl:pt-16 mb-16 xl:mb-32  pl-4  ">
           <div className="flex flex-col w-full xl:w-[60%] gap-6">
-            <MvxSolSwitch toggleState={mvxNetworkSelected} setToggleState={() => setMvxNetworkSelected(!mvxNetworkSelected)} />
+            <MvxSolSwitch />
             <div className="flex-row flex items-center">
               <span className="text-5xl xl:text-[8rem] text-primary">NF-Tunes</span>
               <img className="max-h-[30%] mb-6" src={currentTheme === "dark" ? musicNote : musicNoteBlack} />
@@ -375,9 +379,9 @@ export const NFTunes = () => {
                 </HeaderComponent>
               )}
               {!mvxNetworkSelected && (
-                <HeaderComponent pageTitle={""} hasImage={false} pageSubtitle={"Solana Music Data NFTs"} dataNftCount={shownSolDataNfts.length}>
-                  {shownSolDataNfts.length > 0 ? (
-                    shownSolDataNfts.map((dataNft, index) => {
+                <HeaderComponent pageTitle={""} hasImage={false} pageSubtitle={"Solana Music Data NFTs"} dataNftCount={shownSolAppDataNfts.length}>
+                  {shownSolAppDataNfts.length > 0 ? (
+                    shownSolAppDataNfts.map((dataNft, index) => {
                       return (
                         <SolDataNftCard
                           key={index}
@@ -402,7 +406,7 @@ export const NFTunes = () => {
                               <>
                                 {!mvxNetworkSelected && viewDataRes && !viewDataRes.error && currentIndex > -1 && (
                                   <SolAudioPlayer
-                                    dataNftToOpen={shownSolDataNfts[currentIndex]}
+                                    dataNftToOpen={shownSolAppDataNfts[currentIndex]}
                                     songs={dataMarshalResponse ? dataMarshalResponse.data : []}
                                     firstSongBlobUrl={firstSongBlobUrl}
                                     chainID={chainID}
diff --git a/src/store/LocalStorageStore.ts.tsx b/src/store/LocalStorageStore.ts.tsx
index dd80ba2..ef2b510 100644
--- a/src/store/LocalStorageStore.ts.tsx
+++ b/src/store/LocalStorageStore.ts.tsx
@@ -1,11 +1,18 @@
-import { create } from "zustand";
-
-interface LocalStorageStore {
-  appVersion: string | undefined;
-  setAppVersion: (newAppVersion: string | undefined) => void;
-}
-
-export const useLocalStorageStore = create<LocalStorageStore>((set) => ({
-  appVersion: import.meta.env.VITE_APP_VERSION,
-  setAppVersion: (newAppVersion) => set({ appVersion: newAppVersion }),
-}));
+import { create } from "zustand";
+
+interface LocalStorageStore {
+  appVersion: string | undefined;
+  setAppVersion: (newAppVersion: string | undefined) => void;
+  defaultChain: string;
+  setDefaultChain: (newDefaultChain: string) => void;
+}
+
+export const useLocalStorageStore = create<LocalStorageStore>((set) => ({
+  appVersion: import.meta.env.VITE_APP_VERSION,
+  setAppVersion: (newAppVersion) => set({ appVersion: newAppVersion }),
+  defaultChain: localStorage.getItem("defaultChain") ?? "multiversx",
+  setDefaultChain: (newDefaultChain) => {
+    localStorage.setItem("defaultChain", newDefaultChain);
+    set({ defaultChain: newDefaultChain });
+  },
+}));