Implement Fixed Price Contract on asset details page (#216)

* populate tzip-16 contract data when contracts are originated The spec only requires that the 'description' and 'interfaces' fields to be defined IIRC * Remove update operators from market contract This should resolve issue #130 * remove dead code * Update metadata definition given Eugene's comments * replaced nested code with async/await syntax * feat: Update client/package.json version, use in splash page * take out nested try/catch block * remove more dead code * form JSON correctly * update faucet storage in contracts/src/nft-contracts-tzip16.ts * move example metadata definition from ligo to typescript * feat: Scaffold notifications, file upload as thunk * update contracts given Michael/Eli's suggestions (will update tests) * modify tests to reflect changes in contract's entrypoints * feat: Upload artifact files on token creation submit * more cleanup as per Michael's comments * take out tzip12 contracts and related files/tests * take out old contracts in `contracts/bin` * combine market_case_1.ts/market_case_1.test.ts -> nft_market.test.ts also put some important code into beforeEach block * wip: Upgrade to edonet * wip: Bypass typescript, 'edo2net' in wallet requestPermissions for Thanos * fix - incorrectly used error fa2_insufficient_balance should be fa2_token_undefined * Put required price and amount given in the "WRONG_TEZ_PRICE" error. * make sure tez doesn't get stuck on Sell/Cancel entry-points * Transfers of zero amount MUST be treated as normal transfers. In case of a zero amount transfer, the token_id validity remains unverified. This has been addressed. * wrap entrypoint name in parentheses * include tz files * chore: Remove unused environment variables from bin/dev-*/env scripts * fix: Resolve issues with notification delivery * fix(temp): Workaround edonet compatibility issues by referring to edo2net in client * feat: Initial video NFT upload & display * feat: Play/pause video on hover in token grid * chore: Cleanup unused actions, IPFS form display * fix: Readd bootstrap functions that were cleared during contracts/ refactor * fix: Work around edo2net edge case that broke sandbox * fix: Use createReadStream for non-pinata uploads * fix: Fix token_metadata_map -> token_info regression * doc: Update delphinet -> edonet in README * Fix wallet connect (#203) * Fix issue where already connected wallets would not auto reconnect * fix: Fix redux warning, resolve disconnect issue, fix FOUC on reconnect * refactor: Move wallet reconnect attempt state out of component and into system SDK Co-authored-by: Philip Diaz <philip@tqgroup.io> * Fixing yarn log:api to follow api-server and not bcd api * fix: Update max request size in local nginx gateway * chore: Bump server package.json version * Implement Fixed Price Contract on asset details page #121 * Update config schema * Add bootstrapping for fixed price contract * remove unnecessary batch params * feat: Add retry/cancel behavior for modal error states * Show for sale items in user's collection * Wait for confirmations before updating NFT state; connect user's wallet on Buy when not already connected Co-authored-by: Emmanuel Denloye-Ito <eod8tb@virginia.edu> Co-authored-by: Philip Diaz <philip@tqgroup.io> Co-authored-by: lambdahands <lambdahands@users.noreply.github.com> Co-authored-by: Philip Diaz <philip.diaz@tqtezos.com>
tqtezos · Mar 10, 2021 · 9864539 · 9864539
1 parent d7174e5
commit 9864539
Show file tree

Hide file tree

Showing 23 changed files with 1,267 additions and 304 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/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>
     </>

diff --git a/client/src/components/CreateNonFungiblePage/index.tsx b/client/src/components/CreateNonFungiblePage/index.tsx
@@ -19,7 +19,7 @@ import {
 } from '../../reducer/slices/createNft';
 import { mintTokenAction } from '../../reducer/async/actions';
 import { validateCreateNftStep } from '../../reducer/validators/createNft';
-import { setStatus } from '../../reducer/slices/status';
+import { clearError, setStatus } from '../../reducer/slices/status';
 
 function ProgressIndicator({ state }: { state: CreateNftState }) {
   const stepIdx = steps.indexOf(state.step);
@@ -153,7 +153,16 @@ export default function CreateNonFungiblePage() {
                 dispatch(setStatus({ method: 'mintToken', status: 'ready' }));
                 dispatch(clearForm());
               }}
-              status={status.status}
+              onRetry={() => {
+                dispatch(clearError({ method: 'mintToken' }));
+                dispatch(mintTokenAction());
+              }}
+              onCancel={() => {
+                onClose();
+                dispatch(clearError({ method: 'mintToken' }));
+                dispatch(setStatus({ method: 'mintToken', status: 'ready' }));
+              }}
+              status={status}
             />
           </Flex>
         </Flex>