v0.5.0-beta (tqtezos#296)

* 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 * Initial work on marketplace * fix formatting * Loading spinner for collections * Remove "marketplace" header * Better icons * Only show active sale items * added OM favicon replacement (tqtezos#283) * shield auto-updates (tqtezos#284) * updated shield code * Make grid responsive (tqtezos#249) * Batch "list for sale" transactions. Fixes tqtezos#287 * feat: Update header to reflect new designs * feat: Move logo to common assets, add responsive header logo * Adding basic netlify redirect config (tqtezos#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 (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 * 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 * 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>
maelswarm · Mar 29, 2021 · 97a453c · 97a453c
1 parent 721c20e
commit 97a453c
Show file tree

Hide file tree

Showing 34 changed files with 14,293 additions and 317 deletions.
diff --git a/README.md b/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
 

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
@@ -12,6 +12,10 @@
     "@taquito/signer": "8.0.6-beta.0",
     "@taquito/taquito": "8.0.6-beta.0",
     "@taquito/tzip16": "8.0.6-beta.0",
+<<<<<<< HEAD
+=======
+    "@taquito/tzip12": "8.0.6-beta.0",
+>>>>>>> 9f8b418 (v0.5.0-beta (#296))
     "@types/lodash": "4.14.165",
     "@types/react": "16.9.12",
     "@types/react-dom": "16.9.0",
@@ -27,6 +31,7 @@
     "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"

diff --git a/public/favicon.ico b/public/favicon.ico
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,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()
   });
 }

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';
@@ -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>
   );
 }
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>
   );