diff --git a/src/components/MvxSolSwitch.tsx b/src/components/MvxSolSwitch.tsx index f6996415..687c74a7 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 ( - +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 ( + ); } diff --git a/src/pages/Account/MyWallet/index.tsx b/src/pages/Account/MyWallet/index.tsx index 3f18d991..b0e9637f 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(SHOW_NFTS_STEP); const [shownMvxDataNfts, setShownMvxDataNfts] = useState(mvxNfts.slice(0, SHOW_NFTS_STEP)); - const [mvxNetworkSelected, setMvxNetworkSelected] = useState(true); + const defaultChain = useLocalStorageStore((state) => state.defaultChain); + const mvxNetworkSelected = defaultChain === "multiversx"; const [numberOfSolNftsShown, setNumberOfSolNftsShown] = useState(SHOW_NFTS_STEP); const [shownSolDataNfts, setShownSolDataNfts] = useState(solNfts.slice(0, SHOW_NFTS_STEP)); const { publicKey, signMessage } = useWallet(); @@ -246,7 +248,7 @@ export const MyWallet = () => { return ( <> - setMvxNetworkSelected(!mvxNetworkSelected)} /> + {mvxNetworkSelected && ( {shownMvxDataNfts.length > 0 ? ( diff --git a/src/pages/AppMarketplace/NFTunes/index.tsx b/src/pages/AppMarketplace/NFTunes/index.tsx index d70e4fb0..a7ee8b46 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(); - 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(true); - const [shownSolDataNfts, setShownSolDataNfts] = useState(solNfts.slice(0, SHOW_NFTS_STEP)); - const [numberOfSolNftsShown, setNumberOfSolNftsShown] = useState(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(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 = () => {
- setMvxNetworkSelected(!mvxNetworkSelected)} /> +
NF-Tunes @@ -375,9 +379,9 @@ export const NFTunes = () => { )} {!mvxNetworkSelected && ( - - {shownSolDataNfts.length > 0 ? ( - shownSolDataNfts.map((dataNft, index) => { + + {shownSolAppDataNfts.length > 0 ? ( + shownSolAppDataNfts.map((dataNft, index) => { return ( { <> {!mvxNetworkSelected && viewDataRes && !viewDataRes.error && currentIndex > -1 && ( void; -} - -export const useLocalStorageStore = create((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((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 }); + }, +}));