v0.5.0-beta (#296)

* removed preview text for UI purposes (#262)

Removed preview

* update README (#268)

PR points to Minter SDK for contracts and updates some of the README

* Carbon savings message on creation of NFT (#264)

* added CO2 em. message
* Modified copy

* Add video metadata types to file upload page. Fixes #238 (#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 #242

* Initial work on marketplace

* fix formatting

* Loading spinner for collections

* Remove "marketplace" header

* Better icons

* Only show active sale items

* added OM favicon replacement (#283)

* shield auto-updates (#284)

* updated shield code

* Make grid responsive (#249)

* Batch "list for sale" transactions. Fixes #287

* feat: Update header to reflect new designs

* feat: Move logo to common assets, add responsive header logo

* Adding basic netlify redirect config (#290)

* revert marketplace contract to correct version

* restart bcd api in sandbox on failure

* This should be replace: false, or else the back button will not go back to marketplace

* v0.4.3 (#278)

* removed preview text for UI purposes (#262)
* update README (#268)
PR points to Minter SDK for contracts and updates some of the README
* Carbon savings message on creation of NFT (#264)
* Add video metadata types to file upload page. Fixes #238 (#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

* remove description text for resp. (#291)

* Add mobile navigation and collections dropdown (#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

* Fix zoom

* Aligned div

* Fix mobile fullscreen

* spelling error fix

Co-authored-by: Gregory Rocco <gregoryrocco1226@gmail.com>
Co-authored-by: jacobarluck <jacobarluck@users.noreply.github.com>
Co-authored-by: Joshua Dechant <josh@codecrafting.org>
Co-authored-by: Gregório Granado Magalhães <greg.magalhaes@gmail.com>

Author: 5 people

README.md

@@ -1,6 +1,6 @@
 ![OpenMinter header](/docs/assets/minterhead.png)
 
-[![](https://img.shields.io/badge/license-MIT-brightgreen)](LICENSE) [![](https://img.shields.io/badge/version-v0.4.2-orange)](https://github.com/tqtezos/minter)
+[![](https://img.shields.io/badge/license-MIT-brightgreen)](LICENSE) [![](https://img.shields.io/github/v/release/tqtezos/minter)](https://github.com/tqtezos/minter)
 
 ## OpenMinter
 

docker-compose.yml

@@ -18,6 +18,7 @@ services:
       - mq
     ports:
       - 42000:14000
+    restart: on-failure
     logging:
       options:
         max-size: 10m

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 

netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

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",

public/favicon.ico

@@ -14,6 +14,7 @@ interface BoostrapStorageCallback {
 interface BootstrapContractParams {
   configKey: string;
   contractFilename: string;
+  contractGitHash: string;
   contractAlias: string;
   initStorage: BoostrapStorageCallback;
 }
@@ -63,11 +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 = 'aec441412d53653fa0048fee7c12c1eb1365909b';
-  const contractCodeUrl = `${rawRepoUrl}/${gitHash}/contracts/bin/${contractFilename}`;
+  const contractCodeUrl = `${rawRepoUrl}/${contractGitHash}/contracts/bin/${contractFilename}`;
   const response = await axios.get(contractCodeUrl);
   return { code: response.data, url: contractCodeUrl };
 }
@@ -130,7 +131,8 @@ async function bootstrapContract(
   let contract;
   try {
     const { code, url: contractCodeUrl } = await fetchContractCode(
-      params.contractFilename
+      params.contractFilename,
+      params.contractGitHash
     );
 
     $log.info(
@@ -175,6 +177,7 @@ async function bootstrap(env: string) {
     configKey: 'contracts.nftFaucet',
     contractAlias: 'nftFaucet',
     contractFilename: 'fa2_multi_nft_faucet.tz',
+    contractGitHash: 'aec441412d53653fa0048fee7c12c1eb1365909b',
     initStorage: initStorageNftFaucet
   });
 
@@ -183,6 +186,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()
   });
 }

scripts/bootstrap-contracts-config.ts

@@ -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

src/components/App/index.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>
+  );
+}

src/components/Collections/Catalog/CollectionsDropdown.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';
@@ -169,7 +169,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 +180,6 @@ export default function TokenGrid({ state, walletAddress }: TokenGridProps) {
           />
         );
       })}
-    </Grid>
+    </SimpleGrid>
   );
 }

src/components/Collections/Catalog/TokenGrid.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>
   );