Merge pull request #233 from tqtezos/v0.3.0

v0.3.0
tqtezos · Mar 10, 2021 · 7893395 · 7893395
2 parents 3ced760 + e81669d
commit 7893395
Show file tree

Hide file tree

Showing 25 changed files with 1,294 additions and 317 deletions.
diff --git a/README.md b/README.md
@@ -81,6 +81,11 @@ type Config = {
   },
   contracts?: {
     nftFaucet?: string
+    marketplace?: {
+      fixedPrice: {
+        tez: string;
+      }
+    }
   }
 }
 ```

diff --git a/client/package.json b/client/package.json
@@ -8,9 +8,9 @@
     "@emotion/react": "11.1.4",
     "@emotion/styled": "11.0.0",
     "@reduxjs/toolkit": "1.5.0",
-    "@taquito/beacon-wallet": "8.0.3-beta.0",
-    "@taquito/tzip16": "8.0.3-beta.0",
-    "@taquito/taquito": "8.0.3-beta.0",
+    "@taquito/beacon-wallet": "8.0.4-beta.0",
+    "@taquito/tzip16": "8.0.4-beta.0",
+    "@taquito/taquito": "8.0.4-beta.0",
     "@types/lodash": "4.14.165",
     "@types/react": "16.9.12",
     "@types/react-dom": "16.9.0",

diff --git a/client/src/components/Collections/Catalog/TokenGrid.tsx b/client/src/components/Collections/Catalog/TokenGrid.tsx
@@ -141,7 +141,7 @@ export default function TokenGrid({ state, walletAddress }: TokenGridProps) {
   }
 
   const tokens = collection.tokens.filter(
-    ({ owner }) => owner === walletAddress
+    ({ owner, sale }) => owner === walletAddress || sale?.seller === walletAddress
   );
 
   if (tokens.length === 0) {

diff --git a/client/src/components/Collections/TokenDetail/index.tsx b/client/src/components/Collections/TokenDetail/index.tsx
@@ -1,13 +1,21 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'wouter';
-import { AspectRatio, Box, Flex, Heading, Image, Text } from '@chakra-ui/react';
 import {
-  ChevronLeft,
-  HelpCircle,
-  /* MoreHorizontal, */ Star
-} from 'react-feather';
-import { MinterButton } from '../../common';
-import { TransferTokenButton } from '../../common/TransferToken';
+  AspectRatio,
+  Box,
+  Flex,
+  Heading,
+  Image,
+  Menu,
+  MenuList,
+  Text,
+  useDisclosure
+} from '@chakra-ui/react';
+import { ChevronLeft, HelpCircle, MoreHorizontal, Star } from 'react-feather';
+import { MinterButton, MinterMenuButton, MinterMenuItem } from '../../common';
+import { TransferTokenModal } from '../../common/TransferToken';
+import { SellTokenButton, CancelTokenSaleButton } from '../../common/SellToken';
+import { BuyTokenButton } from '../../common/BuyToken';
 import { ipfsUriToGatewayUrl, uriToCid } from '../../../lib/util/ipfs';
 import { useSelector, useDispatch } from '../../../reducer';
 import {
@@ -117,6 +125,7 @@ interface TokenDetailProps {
 function TokenDetail({ contractAddress, tokenId }: TokenDetailProps) {
   const [, setLocation] = useLocation();
   const { system, collections: state } = useSelector(s => s);
+  const disclosure = useDisclosure();
   const dispatch = useDispatch();
   const collection = state.collections[contractAddress];
 
@@ -195,8 +204,41 @@ function TokenDetail({ contractAddress, tokenId }: TokenDetailProps) {
             borderRadius="3px"
             py={6}
             mb={10}
+            pos="relative"
           >
-            {system.tzPublicKey && system.tzPublicKey === token.owner ? (
+            {system.tzPublicKey &&
+            (system.tzPublicKey === token.owner ||
+              system.tzPublicKey === token.sale?.seller) ? (
+              <Box pos="absolute" top={6} right={6}>
+                <Menu>
+                  <MinterMenuButton variant="primary">
+                    <MoreHorizontal />
+                  </MinterMenuButton>
+                  <MenuList
+                    borderColor="brand.lightBlue"
+                    borderRadius="2px"
+                    py={2}
+                    px={2}
+                  >
+                    <MinterMenuItem
+                      variant="primary"
+                      onClick={disclosure.onOpen}
+                    >
+                      Transfer
+                    </MinterMenuItem>
+                  </MenuList>
+                </Menu>
+                <TransferTokenModal
+                  contractAddress={contractAddress}
+                  tokenId={tokenId}
+                  disclosure={disclosure}
+                />
+              </Box>
+            ) : null}
+
+            {system.tzPublicKey &&
+            (system.tzPublicKey === token.owner ||
+              system.tzPublicKey === token.sale?.seller) ? (
               <Flex>
                 <Flex
                   py={1}
@@ -215,6 +257,7 @@ function TokenDetail({ contractAddress, tokenId }: TokenDetailProps) {
                 </Flex>
               </Flex>
             ) : null}
+
             <Flex
               justify="space-between"
               align="center"
@@ -232,10 +275,6 @@ function TokenDetail({ contractAddress, tokenId }: TokenDetailProps) {
                   {token.title}
                 </Heading>
               </Flex>
-              {/* TODO: Add dropdown menu that contains transfer/share links */}
-              {/* <Box color="gray.300"> */}
-              {/*   <MoreHorizontal /> */}
-              {/* </Box> */}
             </Flex>
             <Flex
               px={8}
@@ -264,22 +303,72 @@ function TokenDetail({ contractAddress, tokenId }: TokenDetailProps) {
               <Text>{uriToCid(token.artifactUri) || 'No IPFS Hash'}</Text>
             </Flex>
           </Flex>
-          {system.status === 'WalletConnected' ? (
-            <Flex
-              w="100%"
-              bg="white"
-              border="1px solid"
-              borderColor="brand.lightBlue"
-              borderRadius="3px"
-              py={6}
-              px={8}
-            >
-              <TransferTokenButton
-                contractAddress={contractAddress}
-                tokenId={tokenId}
-              />
+
+          <Box
+            w="100%"
+            bg="white"
+            border="1px solid"
+            borderColor="brand.lightBlue"
+            borderRadius="3px"
+            py={6}
+            px={8}
+          >
+            <Flex>
+              <Box flex="1">
+                <Heading
+                  pb={2}
+                  fontSize="xs"
+                  color="brand.gray"
+                  textTransform="uppercase"
+                >
+                  Market status
+                </Heading>
+                {token.sale ? (
+                  <Text color="black" fontSize="lg">
+                    For sale
+                  </Text>
+                ) : (
+                  <Text color="black" fontSize="lg">
+                    Not for sale
+                  </Text>
+                )}
+              </Box>
+              {token.sale ? (
+                <Box flex="1">
+                  <Heading
+                    pb={2}
+                    fontSize="xs"
+                    color="brand.gray"
+                    textTransform="uppercase"
+                  >
+                    Price
+                  </Heading>
+                  <Text color="black" fontSize="lg">
+                    ꜩ {token.sale.price}
+                  </Text>
+                </Box>
+              ) : null}
+              {system.tzPublicKey &&
+              (system.tzPublicKey === token.owner ||
+                system.tzPublicKey === token.sale?.seller) ? (
+                <Box>
+                  {token.sale ? (
+                    <CancelTokenSaleButton
+                      contract={contractAddress}
+                      tokenId={tokenId}
+                    />
+                  ) : (
+                    <SellTokenButton
+                      contract={contractAddress}
+                      tokenId={tokenId}
+                    />
+                  )}
+                </Box>
+              ) : token.sale ? (
+                <BuyTokenButton contract={contractAddress} token={token} />
+              ) : null}
             </Flex>
-          ) : null}
+          </Box>
         </Flex>
       </Flex>
     </Flex>

diff --git a/client/src/components/CreateNonFungiblePage/FileUpload.tsx b/client/src/components/CreateNonFungiblePage/FileUpload.tsx
@@ -11,7 +11,7 @@ import {
 export function FilePreview({ file }: { file: SelectedFile }) {
   const dispatch = useDispatch();
   if (/^image\/.*/.test(file.type)) {
-    return <Image src={file.objectUrl} />;
+    return <Image src={file.objectUrl} width="100%" height="100%" objectFit='contain' />;
   }
   if (/^video\/.*/.test(file.type)) {
     const canvasRef = createRef<HTMLCanvasElement>();
@@ -101,8 +101,16 @@ export default function FileUpload() {
       >
         <Box as="input" {...getInputProps()} />
         {state.selectedFile?.objectUrl ? (
-          <Box p={4} maxWidth="400px" maxHeight="400px">
-            <FilePreview file={state.selectedFile} />
+          <Box p={4}>
+            <Flex
+              justify="center"
+              align="center"
+              maxWidth="400px"
+              maxHeight="400px"
+              overflow="hidden"
+            >
+              <FilePreview file={state.selectedFile} />
+            </Flex>
           </Box>
         ) : (
           <Flex

diff --git a/client/src/components/CreateNonFungiblePage/Preview.tsx b/client/src/components/CreateNonFungiblePage/Preview.tsx
@@ -18,9 +18,9 @@ export default function Preview() {
       boxShadow="0px 0px 0px 4px rgba(211, 222, 245, 0.3)"
     >
       <Flex
-        width="100"
         justify="center"
         align="center"
+        width="300px"
         height="300px"
         overflow="hidden"
       >

diff --git a/client/src/components/CreateNonFungiblePage/StatusModal.tsx b/client/src/components/CreateNonFungiblePage/StatusModal.tsx
@@ -6,24 +6,87 @@ import {
   Heading,
   Modal,
   ModalOverlay,
-  ModalContent
+  ModalContent,
+  Text
 } from '@chakra-ui/react';
-import { CheckCircle } from 'react-feather';
+import { CheckCircle, AlertCircle, X } from 'react-feather';
 import { MinterButton } from '../common';
-import { StatusKey } from '../../reducer/slices/status';
+import { Status } from '../../reducer/slices/status';
 
 interface StatusModalProps {
   isOpen: boolean;
   onClose: () => void;
-  status: StatusKey;
+  onRetry: () => void;
+  onCancel: () => void;
+  status: Status;
+}
+
+function Content({ status, onClose, onRetry, onCancel }: StatusModalProps) {
+  if (status.error) {
+    return (
+      <Flex flexDir="column" align="center" px={4} py={10}>
+        <Box color="brand.blue" mb={6}>
+          <AlertCircle size="70px" />
+        </Box>
+        <Heading size="lg" textAlign="center" color="gray.500" mb={6}>
+          Error Creating Token
+        </Heading>
+        <Flex flexDir="row" justify="center">
+          <MinterButton variant="primaryAction" onClick={() => onRetry()}>
+            Retry
+          </MinterButton>
+          <MinterButton
+            variant="tertiaryAction"
+            onClick={() => onCancel()}
+            display="flex"
+            alignItems="center"
+            ml={4}
+          >
+            <Box color="currentcolor">
+              <X size={16} strokeWidth="3" />
+            </Box>
+            <Text fontSize={16} ml={1} fontWeight="600">
+              Close
+            </Text>
+          </MinterButton>
+        </Flex>
+      </Flex>
+    );
+  }
+  if (status.status === 'in_transit') {
+    return (
+      <Flex flexDir="column" align="center" px={4} py={10}>
+        <Spinner size="xl" mb={6} color="gray.300" />
+        <Heading size="lg" textAlign="center" color="gray.500">
+          Creating token...
+        </Heading>
+      </Flex>
+    );
+  }
+  if (status.status === 'complete') {
+    return (
+      <Flex flexDir="column" align="center" px={4} py={10}>
+        <Box color="brand.blue" mb={6}>
+          <CheckCircle size="70px" />
+        </Box>
+        <Heading size="lg" textAlign="center" color="gray.500" mb={6}>
+          Token creation complete
+        </Heading>
+        <MinterButton variant="primaryAction" onClick={() => onClose()}>
+          Close
+        </MinterButton>
+      </Flex>
+    );
+  }
+  return null;
 }
 
 export default function StatusModal(props: StatusModalProps) {
   const { isOpen, onClose, status } = props;
   const initialRef = React.useRef(null);
 
   const close = () => {
-    if (status === 'complete') {
+    if (status.status === 'complete') {
       onClose();
     }
   };
@@ -41,27 +104,7 @@ export default function StatusModal(props: StatusModalProps) {
       >
         <ModalOverlay />
         <ModalContent mt={40}>
-          {status === 'in_transit' ? (
-            <Flex flexDir="column" align="center" px={4} py={10}>
-              <Spinner size="xl" mb={6} color="gray.300" />
-              <Heading size="lg" textAlign="center" color="gray.500">
-                Creating token...
-              </Heading>
-            </Flex>
-          ) : null}
-          {status === 'complete' ? (
-            <Flex flexDir="column" align="center" px={4} py={10}>
-              <Box color="brand.blue" mb={6}>
-                <CheckCircle size="70px" />
-              </Box>
-              <Heading size="lg" textAlign="center" color="gray.500" mb={6}>
-                Token creation complete
-              </Heading>
-              <MinterButton variant="primaryAction" onClick={() => close()}>
-                Close
-              </MinterButton>
-            </Flex>
-          ) : null}
+          <Content {...props} />
         </ModalContent>
       </Modal>
     </>