QueueModal:UI/UX

QueueModal inor QueueModal useEffect/UI updates QueueModal useEffect/UI updates QueueModal useEffect/UI updates QueueModal useEffect/UI updates QueueModal useEffect/UI updates 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 * QueueModal:UI/UX 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> 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 30, 2021 · afa8a10 · afa8a10
1 parent 7ff83aa
commit afa8a10
Show file tree

Hide file tree

Showing 41 changed files with 1,671 additions and 614 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
 
@@ -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,12 +10,14 @@
     "@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",
     "@types/react-dropzone": "5.1.0",
+    "@types/react-icons": "3.0.0",
     "@types/react-redux": "7.1.16",
     "axios-retry": "3.1.9",
     "buffer": "6.0.3",
@@ -26,18 +28,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/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 = '8f67bb8c2abc12b8e6f8e529e1412262972deab3';
-  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>
   );