diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 9da7ff9c..c6a08c4a 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -10,7 +10,7 @@ import { Flex } from '@chakra-ui/react'; import Notifications from '../common/Notifications'; import { useSelector, useDispatch } from '../../reducer'; import { reconnectWallet } from '../../reducer/async/wallet'; -// import { getMarketplaceNftsQuery } from '../../reducer/async/queries'; + export default function App() { const dispatch = useDispatch(); @@ -18,14 +18,6 @@ export default function App() { let walletReconnectAttempted = state.system.walletReconnectAttempted; - // // This causes excessive resource consumption as *all* marketplace data - // // loads when the app is mounted, even if the user has not landed or will - // // not land on the `/marketplace` view - // - // useEffect(() => { - // dispatch(getMarketplaceNftsQuery(state.marketplace.marketplace.address)); - // }, [state.marketplace.marketplace.address, dispatch]); - useEffect(() => { if (!walletReconnectAttempted) { dispatch(reconnectWallet()); diff --git a/src/components/Collections/Catalog/CollectionsDropdown.tsx b/src/components/Collections/Catalog/CollectionsDropdown.tsx index 10907349..490fb739 100644 --- a/src/components/Collections/Catalog/CollectionsDropdown.tsx +++ b/src/components/Collections/Catalog/CollectionsDropdown.tsx @@ -32,7 +32,7 @@ export default function CollectionsDropdown() { {state.selectedCollection - ? state.collections[state.selectedCollection].metadata.name + ? state.collections[state.selectedCollection]?.metadata.name : '-'} @@ -52,7 +52,7 @@ export default function CollectionsDropdown() { dispatch(selectCollection(state.globalCollection)) } > - {state.collections[state.globalCollection].metadata.name} + {state.collections[state.globalCollection]?.metadata.name} Your Collections @@ -66,7 +66,7 @@ export default function CollectionsDropdown() { selected={address === state.selectedCollection} onClick={() => dispatch(selectCollection(address))} > - {state.collections[address].metadata.name} + {state.collections[address]?.metadata.name} ))} diff --git a/src/components/Collections/Catalog/index.tsx b/src/components/Collections/Catalog/index.tsx index 25240139..47b264f8 100644 --- a/src/components/Collections/Catalog/index.tsx +++ b/src/components/Collections/Catalog/index.tsx @@ -17,24 +17,16 @@ export default function Catalog() { const collections = useSelector(s => s.collections); const dispatch = useDispatch(); - const globalCollection = - collections.collections[collections.globalCollection]; - useEffect(() => { - if (!globalCollection) { - dispatch(getNftAssetContractQuery(collections.globalCollection)); + if (!collections.collections[system.config.contracts.nftFaucet]) { + dispatch(getNftAssetContractQuery(system.config.contracts.nftFaucet)); return; } if (collections.selectedCollection === null) { - dispatch(selectCollection(collections.globalCollection)); + dispatch(selectCollection(system.config.contracts.nftFaucet)); return; } - }, [ - globalCollection, - collections.selectedCollection, - collections.globalCollection, - dispatch - ]); + }, [collections.selectedCollection, dispatch, collections.collections, system.config.contracts.nftFaucet]); useEffect(() => { if (system.status === 'WalletConnected') { diff --git a/src/components/Marketplace/Catalog/index.tsx b/src/components/Marketplace/Catalog/index.tsx index 73ac0b2d..41922566 100644 --- a/src/components/Marketplace/Catalog/index.tsx +++ b/src/components/Marketplace/Catalog/index.tsx @@ -11,19 +11,19 @@ import FeaturedToken from './FeaturedToken'; import { VisibilityTrigger } from '../../common/VisibilityTrigger'; export default function Catalog() { - const { system, marketplace: state } = useSelector(s => s); + const { system, marketplace } = useSelector(s => s); const dispatch = useDispatch(); useEffect(() => { - dispatch(getMarketplaceNftsQuery(state.marketplace.address)); - }, [state.marketplace.address, dispatch]); + dispatch(getMarketplaceNftsQuery(system.config.contracts.marketplace.fixedPrice.tez)); + }, [marketplace.marketplace.address, dispatch, system.config.contracts.marketplace.fixedPrice.tez]); const loadMore = () => { dispatch(loadMoreMarketplaceNftsQuery({})); }; let tokens = - state.marketplace.tokens?.filter(x => x.token).map(x => x.token!) ?? []; + marketplace.marketplace.tokens?.filter(x => x.token).map(x => x.token!) ?? []; return ( - {state.marketplace.loaded && tokens.length > 0 ? ( + {marketplace.marketplace.loaded && tokens.length > 0 ? ( @@ -46,7 +46,7 @@ export default function Catalog() { w="100%" flexDir="column" > - {!state.marketplace.loaded ? ( + {!marketplace.marketplace.loaded ? ( @@ -93,7 +93,7 @@ export default function Catalog() { ); })} diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx index f2a48417..7f1f910e 100644 --- a/src/components/common/Header.tsx +++ b/src/components/common/Header.tsx @@ -15,17 +15,20 @@ import { DrawerContent, DrawerCloseButton, DrawerBody, - Heading + Heading, + MenuItemOption } from '@chakra-ui/react'; -import { Plus, Menu as HamburgerIcon } from 'react-feather'; +import { Plus, Menu as HamburgerIcon, ChevronDown } from 'react-feather'; import { RiStore2Line } from 'react-icons/ri'; import { MdCollections } from 'react-icons/md'; import headerLogo from './assets/header-logo.svg'; import { useSelector, useDispatch } from '../../reducer'; +import { swapConfig } from '../../reducer/slices/system'; import { connectWallet, disconnectWallet } from '../../reducer/async/wallet'; import { MinterButton } from '.'; import logo from './assets/splash-logo.svg'; import wallet_icon from './assets/wallet.svg'; +import { selectCollection } from '../../reducer/slices/collections'; interface MobileHeaderLinkProps { to: string; @@ -121,41 +124,72 @@ function WalletDisplay() { return ( <> {system.status === 'WalletConnected' ? ( - - - - - - - - Network: {system.config.network} - - - { - await dispatch(disconnectWallet()); - setLocation('/'); - }} - > - Disconnect + <> + + + + + + + + Network: {system.config.network} + + + + { + await dispatch(disconnectWallet()); + setLocation('/'); + }} + > + Disconnect - - - + + + + + + + Networks + + + + + Networks + + { await dispatch(disconnectWallet()); dispatch(swapConfig("mainnet")); await dispatch(connectWallet()); await dispatch(selectCollection(system.config.contracts.nftFaucet)) }} + > + mainnet + + { await dispatch(disconnectWallet()); dispatch(swapConfig("testnet")); await dispatch(connectWallet()); await dispatch(selectCollection(system.config.contracts.nftFaucet))}} + > + edonet + + + + + + + + ) : ( +/// \ No newline at end of file diff --git a/src/reducer/index.ts b/src/reducer/index.ts index 03dc4dfe..c7383252 100644 --- a/src/reducer/index.ts +++ b/src/reducer/index.ts @@ -47,3 +47,4 @@ export function useSelector( ) { return baseUseSelector(selector, equalityFn); } + diff --git a/src/reducer/slices/collections.ts b/src/reducer/slices/collections.ts index 111a38e1..08ba700a 100644 --- a/src/reducer/slices/collections.ts +++ b/src/reducer/slices/collections.ts @@ -30,7 +30,7 @@ type Reducer = CaseReducer>; export const initialState: CollectionsState = { selectedCollection: null, - globalCollection: config.contracts.nftFaucet, + globalCollection: (config as any).mainnet.contracts.nftFaucet, collections: {} }; diff --git a/src/reducer/slices/marketplace.ts b/src/reducer/slices/marketplace.ts index 880fbb97..2bfa45ee 100644 --- a/src/reducer/slices/marketplace.ts +++ b/src/reducer/slices/marketplace.ts @@ -27,7 +27,7 @@ type Reducer = CaseReducer>; // Data -const globalMarketplaceAddress = config.contracts.marketplace.fixedPrice.tez; +const globalMarketplaceAddress = (config as any).mainnet.contracts.marketplace.fixedPrice.tez; export const initialState: MarketplaceState = { marketplace: { diff --git a/src/reducer/slices/system.ts b/src/reducer/slices/system.ts index 7036716d..1ed1e48c 100644 --- a/src/reducer/slices/system.ts +++ b/src/reducer/slices/system.ts @@ -7,14 +7,20 @@ import { reconnectWallet } from '../async/wallet'; -const initialState = Minter.connectToolkit(Minter.configure(config)) as +const initialState = Minter.connectToolkit(Minter.configure((config as any).mainnet)) as | SystemWithToolkit | SystemWithWallet; const slice = createSlice({ name: 'system', initialState, - reducers: {}, + reducers: { + swapConfig(state, action) { + return { + ...(Minter.connectToolkit(Minter.configure((config as any)[action.payload])) as SystemWithToolkit | SystemWithWallet) + } + } + }, extraReducers: ({ addCase }) => { addCase(connectWallet.fulfilled, (_, { payload }) => payload); addCase(disconnectWallet.fulfilled, (_, { payload }) => payload); @@ -22,4 +28,5 @@ const slice = createSlice({ } }); +export const swapConfig = slice.actions.swapConfig; export default slice;