*

coll imgs now scaled down + height:100% coll imgs now scaled down + height:100% removed preview text for UI purposes (tqtezos#262) Removed preview update README (tqtezos#268) PR points to Minter SDK for contracts and updates some of the README Carbon savings message on creation of NFT (tqtezos#264) * added CO2 em. message * Modified copy Add video metadata types to file upload page. Fixes tqtezos#238 (tqtezos#251) feat: Update fa2_tzip16_compate_multi_nft_asset.ts with (tqtezos/minter-sdk#62) code feat: Update git hash in bootstrap-contracts-config.ts Add badge to display network when not on mainnet. Add badge to display network when not on mainnet. Link contract to explorer GUI. Fixes tqtezos#242 added OM favicon replacement (tqtezos#283) shield auto-updates (tqtezos#284) updated shield code Make grid responsive (tqtezos#249) Adding basic netlify redirect config (tqtezos#290) Initial work on marketplace fix formatting Loading spinner for collections Remove "marketplace" header Better icons Only show active sale items Batch "list for sale" transactions. Fixes tqtezos#287 revert marketplace contract to correct version restart bcd api in sandbox on failure feat: Update header to reflect new designs feat: Move logo to common assets, add responsive header logo This should be replace: false, or else the back button will not go back to marketplace v0.4.3 (tqtezos#278) * removed preview text for UI purposes (tqtezos#262) * update README (tqtezos#268) PR points to Minter SDK for contracts and updates some of the README * Carbon savings message on creation of NFT (tqtezos#264) * Add video metadata types to file upload page. Fixes tqtezos#238 (tqtezos#251) * feat: Update fa2_tzip16_compate_multi_nft_asset.ts with (tqtezos/minter-sdk#62) code * feat: Update git hash in bootstrap-contracts-config.ts remove description text for resp. (tqtezos#291) Add mobile navigation and collections dropdown (tqtezos#292) * feat: Add mobile navigation * feat: Add collections dropdown * fix: Cleanup responsive featured marketplace token styles * fix: Remove unused variables * fix: Don't show certain desktop nav items when wallet disconnected * feat: Show connect wallet in settings dropdown if disconnected v0.4.3 (tqtezos#278) * removed preview text for UI purposes (tqtezos#262) * update README (tqtezos#268) PR points to Minter SDK for contracts and updates some of the README * Carbon savings message on creation of NFT (tqtezos#264) * Add video metadata types to file upload page. Fixes tqtezos#238 (tqtezos#251) * feat: Update fa2_tzip16_compate_multi_nft_asset.ts with (tqtezos/minter-sdk#62) code * feat: Update git hash in bootstrap-contracts-config.ts Add type to Nft metadata accordingly to TZIP-21 coll imgs now scaled down + height:100% coll imgs now scaled down + height:100% removed preview text for UI purposes (tqtezos#262) Removed preview update README (tqtezos#268) PR points to Minter SDK for contracts and updates some of the README Carbon savings message on creation of NFT (tqtezos#264) * added CO2 em. message * Modified copy Add video metadata types to file upload page. Fixes tqtezos#238 (tqtezos#251) feat: Update fa2_tzip16_compate_multi_nft_asset.ts with (tqtezos/minter-sdk#62) code feat: Update git hash in bootstrap-contracts-config.ts Add badge to display network when not on mainnet. Add badge to display network when not on mainnet. Link contract to explorer GUI. Fixes tqtezos#242 added OM favicon replacement (tqtezos#283) shield auto-updates (tqtezos#284) updated shield code Make grid responsive (tqtezos#249) Adding basic netlify redirect config (tqtezos#290) Initial work on marketplace fix formatting Loading spinner for collections Remove "marketplace" header Better icons Only show active sale items Batch "list for sale" transactions. Fixes tqtezos#287 revert marketplace contract to correct version restart bcd api in sandbox on failure feat: Update header to reflect new designs feat: Move logo to common assets, add responsive header logo This should be replace: false, or else the back button will not go back to marketplace v0.4.3 (tqtezos#278) * removed preview text for UI purposes (tqtezos#262) * update README (tqtezos#268) PR points to Minter SDK for contracts and updates some of the README * Carbon savings message on creation of NFT (tqtezos#264) * Add video metadata types to file upload page. Fixes tqtezos#238 (tqtezos#251) * feat: Update fa2_tzip16_compate_multi_nft_asset.ts with (tqtezos/minter-sdk#62) code * feat: Update git hash in bootstrap-contracts-config.ts remove description text for resp. (tqtezos#291) Add mobile navigation and collections dropdown (tqtezos#292) * feat: Add mobile navigation * feat: Add collections dropdown * fix: Cleanup responsive featured marketplace token styles * fix: Remove unused variables * fix: Don't show certain desktop nav items when wallet disconnected * feat: Show connect wallet in settings dropdown if disconnected v0.4.3 (tqtezos#278) * removed preview text for UI purposes (tqtezos#262) * update README (tqtezos#268) PR points to Minter SDK for contracts and updates some of the README * Carbon savings message on creation of NFT (tqtezos#264) * Add video metadata types to file upload page. Fixes tqtezos#238 (tqtezos#251) * feat: Update fa2_tzip16_compate_multi_nft_asset.ts with (tqtezos/minter-sdk#62) code * feat: Update git hash in bootstrap-contracts-config.ts Add type to Nft metadata accordingly to TZIP-21 Reskin asset detail page Changes appointed in the PR Allow the addition to root level of metadata Change sell button to be seen only by the owner Add custom scrollbar * coll imgs now scaled down + height:100% coll imgs now scaled down + height:100% removed preview text for UI purposes (tqtezos#262) Removed preview update README (tqtezos#268) PR points to Minter SDK for contracts and updates some of the README Carbon savings message on creation of NFT (tqtezos#264) * added CO2 em. message * Modified copy Add video metadata types to file upload page. Fixes tqtezos#238 (tqtezos#251) feat: Update fa2_tzip16_compate_multi_nft_asset.ts with (tqtezos/minter-sdk#62) code feat: Update git hash in bootstrap-contracts-config.ts Add badge to display network when not on mainnet. Add badge to display network when not on mainnet. Link contract to explorer GUI. Fixes tqtezos#242 added OM favicon replacement (tqtezos#283) shield auto-updates (tqtezos#284) updated shield code Make grid responsive (tqtezos#249) Adding basic netlify redirect config (tqtezos#290) Initial work on marketplace fix formatting Loading spinner for collections Remove "marketplace" header Better icons Only show active sale items Batch "list for sale" transactions. Fixes tqtezos#287 revert marketplace contract to correct version restart bcd api in sandbox on failure feat: Update header to reflect new designs feat: Move logo to common assets, add responsive header logo This should be replace: false, or else the back button will not go back to marketplace v0.4.3 (tqtezos#278) * removed preview text for UI purposes (tqtezos#262) * update README (tqtezos#268) PR points to Minter SDK for contracts and updates some of the README * Carbon savings message on creation of NFT (tqtezos#264) * Add video metadata types to file upload page. Fixes tqtezos#238 (tqtezos#251) * feat: Update fa2_tzip16_compate_multi_nft_asset.ts with (tqtezos/minter-sdk#62) code * feat: Update git hash in bootstrap-contracts-config.ts remove description text for resp. (tqtezos#291) Add mobile navigation and collections dropdown (tqtezos#292) * feat: Add mobile navigation * feat: Add collections dropdown * fix: Cleanup responsive featured marketplace token styles * fix: Remove unused variables * fix: Don't show certain desktop nav items when wallet disconnected * feat: Show connect wallet in settings dropdown if disconnected v0.4.3 (tqtezos#278) * removed preview text for UI purposes (tqtezos#262) * update README (tqtezos#268) PR points to Minter SDK for contracts and updates some of the README * Carbon savings message on creation of NFT (tqtezos#264) * Add video metadata types to file upload page. Fixes tqtezos#238 (tqtezos#251) * feat: Update fa2_tzip16_compate_multi_nft_asset.ts with (tqtezos/minter-sdk#62) code * feat: Update git hash in bootstrap-contracts-config.ts Add type to Nft metadata accordingly to TZIP-21 Reskin asset detail page Changes appointed in the PR Allow the addition to root level of metadata Change sell button to be seen only by the owner Add custom scrollbar Optimized for big images Add zoom feature Zoom Fix zoom Aligned div Ensure develop is up to date with release (tqtezos#300) Fix the video hiding buttons the and back button (tqtezos#301) Removed Decimal Limit (tqtezos#304) * removed decimal limit on individual asset page * changed public information for link post * Changed owner to collection on asset page * removed placeholder asset coll imgs now scaled down + height:100% coll imgs now scaled down + height:100% removed preview text for UI purposes (tqtezos#262) Removed preview update README (tqtezos#268) PR points to Minter SDK for contracts and updates some of the README Carbon savings message on creation of NFT (tqtezos#264) * added CO2 em. message * Modified copy Add video metadata types to file upload page. Fixes tqtezos#238 (tqtezos#251) feat: Update fa2_tzip16_compate_multi_nft_asset.ts with (tqtezos/minter-sdk#62) code feat: Update git hash in bootstrap-contracts-config.ts Add badge to display network when not on mainnet. Add badge to display network when not on mainnet. Link contract to explorer GUI. Fixes tqtezos#242 added OM favicon replacement (tqtezos#283) shield auto-updates (tqtezos#284) updated shield code Make grid responsive (tqtezos#249) Adding basic netlify redirect config (tqtezos#290) Initial work on marketplace fix formatting Loading spinner for collections Remove "marketplace" header Better icons Only show active sale items Batch "list for sale" transactions. Fixes tqtezos#287 revert marketplace contract to correct version restart bcd api in sandbox on failure feat: Update header to reflect new designs feat: Move logo to common assets, add responsive header logo This should be replace: false, or else the back button will not go back to marketplace v0.4.3 (tqtezos#278) * removed preview text for UI purposes (tqtezos#262) * update README (tqtezos#268) PR points to Minter SDK for contracts and updates some of the README * Carbon savings message on creation of NFT (tqtezos#264) * Add video metadata types to file upload page. Fixes tqtezos#238 (tqtezos#251) * feat: Update fa2_tzip16_compate_multi_nft_asset.ts with (tqtezos/minter-sdk#62) code * feat: Update git hash in bootstrap-contracts-config.ts remove description text for resp. (tqtezos#291) Add mobile navigation and collections dropdown (tqtezos#292) * feat: Add mobile navigation * feat: Add collections dropdown * fix: Cleanup responsive featured marketplace token styles * fix: Remove unused variables * fix: Don't show certain desktop nav items when wallet disconnected * feat: Show connect wallet in settings dropdown if disconnected v0.4.3 (tqtezos#278) * removed preview text for UI purposes (tqtezos#262) * update README (tqtezos#268) PR points to Minter SDK for contracts and updates some of the README * Carbon savings message on creation of NFT (tqtezos#264) * Add video metadata types to file upload page. Fixes tqtezos#238 (tqtezos#251) * feat: Update fa2_tzip16_compate_multi_nft_asset.ts with (tqtezos/minter-sdk#62) code * feat: Update git hash in bootstrap-contracts-config.ts Add type to Nft metadata accordingly to TZIP-21 Reskin asset detail page Changes appointed in the PR Allow the addition to root level of metadata Change sell button to be seen only by the owner Add custom scrollbar Optimized for big images Add zoom feature Zoom Fix zoom Aligned div Ensure develop is up to date with release (tqtezos#300) Fix the video hiding buttons the and back button (tqtezos#301) Removed Decimal Limit (tqtezos#304) * removed decimal limit on individual asset page * changed public information for link post * Changed owner to collection on asset page * removed placeholder asset Responsive New Asset Flow (tqtezos#306) Update index.tsx
maelswarm · Apr 1, 2021 · b1ce954 · b1ce954
1 parent c2806b7
commit b1ce954
Show file tree

Hide file tree

Showing 46 changed files with 1,740 additions and 702 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ capabilities to trade them.
 
 ### Notice
 
-This software is in beta. At the moment, the smart contracts
+This software is in beta. At the moment, the [smart contracts](https://github.com/tqtezos/minter-sdk)
 that OpenMinter uses have **not** been formally audited. Please
 use this software at your own risk.
 
@@ -40,9 +40,9 @@ OpenMinter supports the following networks and software components:
 #### 🌐 Mainnet and Edonet
 #### 📦 Sandboxed development via [Flextesa][flextesa]
 #### 🎨 Multimedia NFTs powered by [TZIP-21](https://tzip.tezosagora.org/proposal/tzip-21/)
-#### 👛 Various wallets via [Beacon](https://www.walletbeacon.io/)
+#### ⚙️ Smart contracts based on [minter-sdk](https://github.com/tqtezos/minter-sdk)
+#### 👛 Wallets compatible with [Beacon](https://www.walletbeacon.io/)
 #### 📖 Indexing via [Better Call Dev][bcdhub]
-#### ⚙️ The latest [FA2](https://gitlab.com/tzip/tzip/-/blob/master/proposals/tzip-12/tzip-12.md) specification
 #### 🚀 [IPFS](https://ipfs.io/) via a local node or [Pinata](https://pinata.cloud/)
 
 The following dependencies are required to run OpenMinter.

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -18,6 +18,7 @@ services:
       - mq
     ports:
       - 42000:14000
+    restart: on-failure
     logging:
       options:
         max-size: 10m

diff --git a/docs/20200716_InitialOutline.md b/docs/20200716_InitialOutline.md
@@ -61,7 +61,7 @@ will be an element to also explore in future iterations.
      - Simple name
      - Description
      - Symbol
-     - General key-value pairs
+     - Attributes (General key-value pairs)
      - URL (IPFS image)
 - Contract with standard FA2 entry points
 - Backend 

diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
diff --git a/package.json b/package.json
@@ -10,8 +10,9 @@
     "@reduxjs/toolkit": "1.5.0",
     "@taquito/beacon-wallet": "8.0.6-beta.0",
     "@taquito/signer": "8.0.6-beta.0",
-    "@taquito/tzip16": "8.0.6-beta.0",
     "@taquito/taquito": "8.0.6-beta.0",
+    "@taquito/tzip16": "8.0.6-beta.0",
+    "@taquito/tzip12": "8.0.6-beta.0",
     "@types/lodash": "4.14.165",
     "@types/react": "16.9.12",
     "@types/react-dom": "16.9.0",
@@ -26,18 +27,19 @@
     "react-dom": "16.13.1",
     "react-dropzone": "11.2.4",
     "react-feather": "2.0.9",
+    "react-icons": "4.2.0",
     "react-redux": "7.2.2",
     "typescript": "4.1.3",
     "wouter": "2.5.1"
   },
   "devDependencies": {
-    "@types/async-retry": "1.4.2",
-    "@types/configstore": "4.0.0",
-    "@types/jest": "24.0.0",
     "@testing-library/jest-dom": "4.2.4",
     "@testing-library/react": "9.3.2",
     "@testing-library/user-event": "7.1.2",
     "@tsed/logger": "5.5.2",
+    "@types/async-retry": "1.4.2",
+    "@types/configstore": "4.0.0",
+    "@types/jest": "24.0.0",
     "async-retry": "1.3.1",
     "axios": "0.21.1",
     "configstore": "5.0.1",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -6,10 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
-      name="description"
-      content="Web site created using create-react-app"
+      name="OpenMinter"
+      content="Create NFTs on Tezos"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/public/logo.png b/public/logo.png
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/scripts/bootstrap-contracts-config.ts b/scripts/bootstrap-contracts-config.ts
@@ -14,6 +14,7 @@ interface BoostrapStorageCallback {
 interface BootstrapContractParams {
   configKey: string;
   contractFilename: string;
+  contractGitHash: string;
   contractAlias: string;
   initStorage: BoostrapStorageCallback;
 }
@@ -63,10 +64,11 @@ async function getContractAddress(
 }
 
 async function fetchContractCode(
-  contractFilename: string
+  contractFilename: string,
+  contractGitHash: string
 ): Promise<ContractCodeResponse> {
   const rawRepoUrl = 'https://raw.githubusercontent.com/tqtezos/minter-sdk';
-  const gitHash = '8f67bb8c2abc12b8e6f8e529e1412262972deab3';
+  const gitHash = 'aec441412d53653fa0048fee7c12c1eb1365909b';
   const contractCodeUrl = `${rawRepoUrl}/${gitHash}/contracts/bin/${contractFilename}`;
   const response = await axios.get(contractCodeUrl);
   return { code: response.data, url: contractCodeUrl };
@@ -130,7 +132,8 @@ async function bootstrapContract(
   let contract;
   try {
     const { code, url: contractCodeUrl } = await fetchContractCode(
-      params.contractFilename
+      params.contractFilename,
+      params.contractGitHash
     );
 
     $log.info(
@@ -175,6 +178,7 @@ async function bootstrap(env: string) {
     configKey: 'contracts.nftFaucet',
     contractAlias: 'nftFaucet',
     contractFilename: 'fa2_multi_nft_faucet.tz',
+    contractGitHash: 'aec441412d53653fa0048fee7c12c1eb1365909b',
     initStorage: initStorageNftFaucet
   });
 
@@ -183,6 +187,7 @@ async function bootstrap(env: string) {
     configKey: 'contracts.marketplace.fixedPrice.tez',
     contractAlias: 'fixedPriceMarketTez',
     contractFilename: 'fixed_price_sale_market_tez.tz',
+    contractGitHash: '8f67bb8c2abc12b8e6f8e529e1412262972deab3',
     initStorage: () => new MichelsonMap()
   });
 }

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
@@ -4,6 +4,7 @@ import SplashPage from '../SplashPage';
 import CreateNonFungiblePage from '../CreateNonFungiblePage';
 import CollectionsCatalog from '../Collections/Catalog';
 import CollectionsTokenDetail from '../Collections/TokenDetail';
+import MarketplaceCatalog from '../Marketplace/Catalog';
 import Header from '../common/Header';
 import { Flex } from '@chakra-ui/react';
 import Notifications from '../common/Notifications';
@@ -40,6 +41,9 @@ export default function App() {
           <Route path="/collections">
             <CollectionsCatalog />
           </Route>
+          <Route path="/marketplace">
+            <MarketplaceCatalog />
+          </Route>
           <Route path="/collection/:contractAddress/token/:tokenId">
             {({ contractAddress, tokenId }) => (
               <CollectionsTokenDetail

diff --git a/src/components/Collections/Catalog/CollectionsDropdown.tsx b/src/components/Collections/Catalog/CollectionsDropdown.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+  Box,
+  Button,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuOptionGroup,
+  MenuItemOption,
+  Text
+} from '@chakra-ui/react';
+import { useSelector, useDispatch } from '../../../reducer';
+import { selectCollection } from '../../../reducer/slices/collections';
+import { ChevronDown } from 'react-feather';
+
+export default function CollectionsDropdown() {
+  const state = useSelector(s => s.collections);
+  const dispatch = useDispatch();
+
+  return (
+    <Menu>
+      <MenuButton as={Button} border="1px solid" borderColor="brand.gray">
+        <Flex align="center">
+          <Box mr={3}>
+            <ChevronDown />
+          </Box>
+          Collections
+        </Flex>
+      </MenuButton>
+      <MenuList>
+        <MenuOptionGroup
+          type="radio"
+          defaultValue={state.selectedCollection || ''}
+        >
+          <Text ml={4} my={2} fontWeight="600">
+            Featured
+          </Text>
+          <MenuItemOption
+            key={state.globalCollection}
+            selected={state.globalCollection === state.selectedCollection}
+            value={state.globalCollection}
+            onSelect={() => dispatch(selectCollection(state.globalCollection))}
+          >
+            {state.collections[state.globalCollection].metadata.name}
+          </MenuItemOption>
+          <Text ml={4} my={2} fontWeight="600">
+            Your Collections
+          </Text>
+          {Object.keys(state.collections)
+            .filter(address => address !== state.globalCollection)
+            .map(address => (
+              <MenuItemOption
+                key={address}
+                value={address}
+                selected={address === state.selectedCollection}
+                onClick={() => dispatch(selectCollection(address))}
+              >
+                {state.collections[address].metadata.name}
+              </MenuItemOption>
+            ))}
+        </MenuOptionGroup>
+      </MenuList>
+    </Menu>
+  );
+}
diff --git a/src/components/Collections/Catalog/TokenGrid.tsx b/src/components/Collections/Catalog/TokenGrid.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'wouter';
-import { AspectRatio, Box, Flex, Grid, Image, Text } from '@chakra-ui/react';
+import { AspectRatio, Box, Flex, SimpleGrid, Image, Text } from '@chakra-ui/react';
 import { Wind, HelpCircle } from 'react-feather';
 import { Token, CollectionsState } from '../../../reducer/slices/collections';
 import { ipfsUriToGatewayUrl } from '../../../lib/util/ipfs';
@@ -55,8 +55,9 @@ function TokenImage(props: { src: string }) {
     return (
       <Image
         src={props.src}
-        objectFit="contain"
+        objectFit="scale-down"
         flex="1"
+        height="100%"
         onError={() => setErrored(true)}
       />
     );
@@ -169,7 +170,7 @@ export default function TokenGrid({ state, walletAddress }: TokenGridProps) {
   }
 
   return (
-    <Grid templateColumns="repeat(4, 1fr)" gap={8} pb={8}>
+    <SimpleGrid columns={{sm: 1, md: 2, lg: 3, xl: 4}} gap={8} pb={8}>
       {tokens.map(token => {
         return (
           <TokenTile
@@ -180,6 +181,6 @@ export default function TokenGrid({ state, walletAddress }: TokenGridProps) {
           />
         );
       })}
-    </Grid>
+    </SimpleGrid>
   );
 }
diff --git a/src/components/Collections/Catalog/index.tsx b/src/components/Collections/Catalog/index.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
-import { Box, Flex, Heading, Text } from '@chakra-ui/react';
+import { Box, Flex, Heading, Text, Link, Spinner } from '@chakra-ui/react';
 import { useLocation } from 'wouter';
-import { RefreshCw } from 'react-feather';
+import { RefreshCw, ExternalLink } from 'react-feather';
 import { MinterButton } from '../../common';
 import Sidebar from './Sidebar';
 import TokenGrid from './TokenGrid';
+import CollectionsDropdown from './CollectionsDropdown';
 
 import { useSelector, useDispatch } from '../../../reducer';
 import {
@@ -48,8 +49,25 @@ export default function Catalog() {
   const collection = state.collections[selectedCollection];
 
   return (
-    <Flex flex="1" w="100%" minHeight="0">
-      <Flex w="250px" h="100%" flexDir="column" overflowY="scroll">
+    <Flex
+      flex="1"
+      w="100%"
+      minHeight="0"
+      flexDir={{
+        base: 'column',
+        md: 'row'
+      }}
+    >
+      <Flex
+        w="250px"
+        h="100%"
+        flexDir="column"
+        overflowY="scroll"
+        display={{
+          base: 'none',
+          md: 'flex'
+        }}
+      >
         <Sidebar />
       </Flex>
       <Flex
@@ -65,12 +83,39 @@ export default function Catalog() {
         overflowY="scroll"
         justify="start"
       >
-        <Flex w="100%" pb={6} justify="space-between" align="center">
-          <Flex flexDir="column">
-            <Heading size="lg">{collection.metadata.name || ''}</Heading>
-            <Text fontFamily="mono" color="brand.lightGray">
-              {collection.address}
-            </Text>
+        <Flex
+          w="100%"
+          pb={6}
+          justify="space-between"
+          align={{
+            base: 'flex-start',
+            md: 'center'
+          }}
+          flexDir={{
+            base: 'column',
+            md: 'row'
+          }}
+        >
+          <Flex flexDir="column" width="100%">
+            <Flex justify="space-between" width="100%">
+              <Heading size="lg">{collection.metadata.name || ''}</Heading>
+              <Flex display={{ base: 'flex', md: 'none' }}>
+                <CollectionsDropdown />
+              </Flex>
+            </Flex>
+            <Flex align="center">
+              <Text fontFamily="mono" color="brand.lightGray">
+                {collection.address}
+              </Text>
+              <Link
+                href={system.config.bcd.gui + '/' + collection.address}
+                color="brand.darkGray"
+                isExternal
+                ml={2}
+              >
+                <ExternalLink size={16} />
+              </Link>
+            </Flex>
           </Flex>
           <MinterButton
             variant="primaryActionInverted"
@@ -80,14 +125,27 @@ export default function Catalog() {
                 dispatch(getContractNftsQuery(selectedCollection));
               }
             }}
+            mt={{
+              base: 4,
+              md: 0
+            }}
           >
             <Box color="currentcolor">
               <RefreshCw size={16} strokeWidth="3" />
             </Box>
             <Text ml={2}>Refresh</Text>
           </MinterButton>
         </Flex>
-        <TokenGrid state={state} walletAddress={system.tzPublicKey} />
+        {!collection.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">
+              Loading...
+            </Heading>
+          </Flex>
+        ) : (
+          <TokenGrid state={state} walletAddress={system.tzPublicKey} />
+        )}
       </Flex>
     </Flex>
   );