feat: Swap Network

src/components/App/index.tsx

@@ -10,22 +10,14 @@ 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();
   const state = useSelector(s => s);
 
   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());

src/components/Collections/Catalog/CollectionsDropdown.tsx

@@ -32,7 +32,7 @@ export default function CollectionsDropdown() {
               <ChevronDown />
             </Box>
             {state.selectedCollection
-              ? state.collections[state.selectedCollection].metadata.name
+              ? state.collections[state.selectedCollection]?.metadata.name
               : '-'}
           </Flex>
         </MenuButton>
@@ -52,7 +52,7 @@ export default function CollectionsDropdown() {
                 dispatch(selectCollection(state.globalCollection))
               }
             >
-              {state.collections[state.globalCollection].metadata.name}
+              {state.collections[state.globalCollection]?.metadata.name}
             </MenuItemOption>
             <Text ml={4} my={2} fontWeight="600">
               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}
                 </MenuItemOption>
               ))}
           </MenuOptionGroup>

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') {

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 (
     <Flex
@@ -36,7 +36,7 @@ export default function Catalog() {
       justify="start"
       flexDir="column"
     >
-      {state.marketplace.loaded && tokens.length > 0 ? (
+      {marketplace.marketplace.loaded && tokens.length > 0 ? (
         <Flex width="calc(100vw - 5rem)" justifyContent="center" alignItems="center">
           <FeaturedToken config={system.config} {...tokens[0]} />
         </Flex>
@@ -46,7 +46,7 @@ export default function Catalog() {
         w="100%"
         flexDir="column"
       >
-        {!state.marketplace.loaded ? (
+        {!marketplace.marketplace.loaded ? (
           <Flex flexDir="column" align="center" flex="1" pt={20}>
             <Spinner size="xl" mb={6} color="gray.300" />
             <Heading size="lg" textAlign="center" color="gray.500">
@@ -93,7 +93,7 @@ export default function Catalog() {
                   );
                 })}
                 <VisibilityTrigger
-                  key={state.marketplace.tokens?.length + ':' + tokens.length}
+                  key={marketplace.marketplace.tokens?.length + ':' + tokens.length}
                   onVisible={loadMore}
                   allowedDistanceToViewport={600}
                 />

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' ? (
-        <Menu placement="bottom-end" offset={[4, 24]}>
-          <MenuButton
-            padding={2}
-            _hover={{
-              textDecoration: 'none',
-              background: '#2D3748',
-              color: '#EDF2F7'
-            }}
-          >
-            <Image
-              src={wallet_icon}
-              width={4}
-              height="auto"
-              style={{ filter: 'invert(1)' }}
-            />
-          </MenuButton>
-          <MenuList color="brand.black">
-            <Flex flexDir="column" px={4} py={2}>
-              <Text fontSize={16} fontWeight="600">
-                Network: {system.config.network}
-              </Text>
-              <WalletInfo tzPublicKey={system.tzPublicKey} />
-              <MinterButton
-                alignSelf="flex-start"
-                variant="cancelAction"
-                onClick={async () => {
-                  await dispatch(disconnectWallet());
-                  setLocation('/');
-                }}
-              >
-                Disconnect
+        <>
+          <Menu placement="bottom-end" offset={[4, 24]}>
+            <MenuButton
+              padding={2}
+              _hover={{
+                textDecoration: 'none',
+                background: '#2D3748',
+                color: '#EDF2F7'
+              }}
+            >
+              <Image
+                src={wallet_icon}
+                width={4}
+                height="auto"
+                style={{ filter: 'invert(1)' }}
+              />
+            </MenuButton>
+            <MenuList color="brand.black">
+              <Flex flexDir="column" px={4} py={2}>
+                <Text fontSize={16} fontWeight="600">
+                  Network: {system.config.network}
+                </Text>
+                <WalletInfo tzPublicKey={system.tzPublicKey} />
+                <Flex flexDir="row" justifyContent="space-between">
+                  <MinterButton
+                    alignSelf="flex-start"
+                    variant="cancelAction"
+                    onClick={async () => {
+                      await dispatch(disconnectWallet());
+                      setLocation('/');
+                    }}
+                  >
+                    Disconnect
               </MinterButton>
-            </Flex>
-          </MenuList>
-        </Menu>
+                  <Menu>
+                    <MenuButton border="1px solid #333" borderRadius="2px">
+                      <Flex align="center" color="brand.black" pr={4} pl={2}>
+                        <Box mr={2}>
+                          <ChevronDown size={18} />
+                        </Box>
+                Networks
+              </Flex>
+                    </MenuButton>
+                    <MenuList>
+                      <Text ml={4} my={2} fontWeight="600">
+                        Networks
+            </Text>
+                      <MenuItemOption
+                        value={'mainnet'}
+                        onClick={async () => { await dispatch(disconnectWallet()); dispatch(swapConfig("mainnet")); await dispatch(connectWallet()); await dispatch(selectCollection(system.config.contracts.nftFaucet)) }}
+                      >
+                        mainnet
+              </MenuItemOption>
+                      <MenuItemOption
+                        value={'testnet'}
+                        onClick={async () => { await dispatch(disconnectWallet()); dispatch(swapConfig("testnet")); await dispatch(connectWallet()); await dispatch(selectCollection(system.config.contracts.nftFaucet))}}
+                      >
+                        edonet
+              </MenuItemOption>
+                    </MenuList>
+                  </Menu>
+                </Flex>
+              </Flex>
+            </MenuList>
+          </Menu>
+        </>
       ) : (
         <MinterButton
           variant="secondaryAction"

src/react-app-env.d.ts

@@ -1 +1 @@
-/// <reference types="react-scripts" />
+/// <reference types="react-scripts" />

src/reducer/index.ts

@@ -47,3 +47,4 @@ export function useSelector<TSelect = unknown>(
 ) {
   return baseUseSelector<State, TSelect>(selector, equalityFn);
 }
+

src/reducer/slices/collections.ts

@@ -30,7 +30,7 @@ type Reducer<A> = CaseReducer<CollectionsState, PayloadAction<A>>;
 
 export const initialState: CollectionsState = {
   selectedCollection: null,
-  globalCollection: config.contracts.nftFaucet,
+  globalCollection: (config as any).mainnet.contracts.nftFaucet,
   collections: {}
 };
 

src/reducer/slices/marketplace.ts

@@ -27,7 +27,7 @@ type Reducer<A> = CaseReducer<MarketplaceState, PayloadAction<A>>;
 
 // Data
 
-const globalMarketplaceAddress = config.contracts.marketplace.fixedPrice.tez;
+const globalMarketplaceAddress = (config as any).mainnet.contracts.marketplace.fixedPrice.tez;
 
 export const initialState: MarketplaceState = {
   marketplace: {

src/reducer/slices/system.ts

@@ -7,19 +7,26 @@ 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);
     addCase(reconnectWallet.fulfilled, (_, { payload }) => payload);
   }
 });
 
+export const swapConfig = slice.actions.swapConfig;
 export default slice;