Skip to content
This repository was archived by the owner on Jul 31, 2023. It is now read-only.

Support FT contract for editions minting #428

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Support FT contract for editions minting #428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
828967c
wip: Support FT contracts for editions
May 19, 2021
d871455
feat: Add amount field to form
May 19, 2021
03118f0
feat: Display token amount in token view
May 19, 2021
3fa44f2
fix: Remove unused type
May 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"@taquito/taquito": "9.0.0",
"@taquito/tzip12": "9.0.0",
"@taquito/tzip16": "9.0.0",
"@tqtezos/minter-contracts": "1.2.0",
"@tqtezos/minter-contracts": "1.3.0",
"@types/lodash": "4.14.165",
"@types/react": "16.9.12",
"@types/react-dom": "16.9.0",
Expand Down
183 changes: 160 additions & 23 deletions src/components/Collections/TokenDetail/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ import {
getNftAssetContractQuery
} from '../../../reducer/async/queries';
import { TokenMedia } from '../../common/TokenMedia';
import lk from '../../common/assets/link-icon.svg'
import tz from '../../common/assets/tezos-sym.svg'
import lk from '../../common/assets/link-icon.svg';
import tz from '../../common/assets/tezos-sym.svg';
import { Maximize2 } from 'react-feather';

function NotFound() {
Expand Down Expand Up @@ -168,8 +168,8 @@ function TokenDetail({ contractAddress, tokenId }: TokenDetailProps) {
pt={[10, 0]}
pb={[5, 0]}
width={['100%']}
maxHeight={["30vh", "60vh", "70vh"]}
height={["100%"]}
maxHeight={['30vh', '60vh', '70vh']}
height={['100%']}
justifyContent="center"
>
<TokenMedia
Expand All @@ -184,14 +184,24 @@ function TokenDetail({ contractAddress, tokenId }: TokenDetailProps) {
onClick={onOpen}
/>
</Flex>
<Flex width="99vw" height="auto" justifyContent="flex-end" marginBottom={[3, 2]} zIndex="50">
<Flex
width="99vw"
height="auto"
justifyContent="flex-end"
marginBottom={[3, 2]}
zIndex="50"
>
<Button onClick={onOpen}>
<Maximize2 size={16} strokeWidth="3" />
</Button>
</Flex>
<Flex width={['100%']} bg="white" flexDir="column" flexGrow={1}>
<Flex align="center" justify="space-evenly" width={['100']} mt="4">
</Flex>
<Flex
align="center"
justify="space-evenly"
width={['100']}
mt="4"
></Flex>
<Flex
width={['90%', '90%', '70%']}
mx="auto"
Expand All @@ -207,7 +217,13 @@ function TokenDetail({ contractAddress, tokenId }: TokenDetailProps) {
mb={10}
pos="relative"
>
<Heading textAlign="left" color="brand.black" width={["100%", "100%", "80%"]} fontSize={["10vw", "3vw"]} display="inline-block">
<Heading
textAlign="left"
color="brand.black"
width={['100%', '100%', '80%']}
fontSize={['10vw', '3vw']}
display="inline-block"
>
{token.title}
</Heading>
<Text
Expand All @@ -228,35 +244,137 @@ function TokenDetail({ contractAddress, tokenId }: TokenDetailProps) {
<AccordionPanel pb={4}>
<Flex mt={[4, 8]}>
<Text color="brand.neutralGray">Minter:</Text>
<Text color="brand.darkGray" fontWeight="bold" ml={[1]} whiteSpace="nowrap" overflow="hidden">
<Link display="block" whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis" href={`https://${(system.config.network + '.').replace('mainnet.', '')}tzkt.io/${token?.metadata?.minter}`}>{token?.metadata?.minter}&nbsp;<sup><img src={lk} alt="" width="auto" height="auto" style={{ display: 'inline-block' }} /></sup></Link>
<Text
color="brand.darkGray"
fontWeight="bold"
ml={[1]}
whiteSpace="nowrap"
overflow="hidden"
>
<Link
display="block"
whiteSpace="nowrap"
overflow="hidden"
textOverflow="ellipsis"
href={`https://${(system.config.network + '.').replace(
'mainnet.',
''
)}tzkt.io/${token?.metadata?.minter}`}
>
{token?.metadata?.minter}&nbsp;
<sup>
<img
src={lk}
alt=""
width="auto"
height="auto"
style={{ display: 'inline-block' }}
/>
</sup>
</Link>
</Text>
</Flex>
<Flex mt={[4, 8]}>
<Text color="brand.neutralGray">Collection:</Text>
<Text color="brand.darkGray" fontWeight="bold" ml={[1]} whiteSpace="nowrap" overflow="hidden">
<Link display="block" whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis" href={`https://${(system.config.network + '.').replace('mainnet.', '')}tzkt.io/${contractAddress}`}>{state.selectedCollection
? state.collections[state.selectedCollection]?.metadata.name : collection?.metadata.name ? collection?.metadata.name : contractAddress }&nbsp;<sup><img src={lk} alt="" width="auto" height="auto" style={{ display: 'inline-block' }} /></sup></Link>
<Text
color="brand.darkGray"
fontWeight="bold"
ml={[1]}
whiteSpace="nowrap"
overflow="hidden"
>
<Link
display="block"
whiteSpace="nowrap"
overflow="hidden"
textOverflow="ellipsis"
href={`https://${(system.config.network + '.').replace(
'mainnet.',
''
)}tzkt.io/${contractAddress}`}
>
{state.selectedCollection
? state.collections[state.selectedCollection]
?.metadata.name
: collection?.metadata.name
? collection?.metadata.name
: contractAddress}
&nbsp;
<sup>
<img
src={lk}
alt=""
width="auto"
height="auto"
style={{ display: 'inline-block' }}
/>
</sup>
</Link>
</Text>
</Flex>
<Flex mt={[4, 8]}>
<Text color="brand.neutralGray">Amount:</Text>
<Text
color="brand.darkGray"
fontWeight="bold"
ml={[1]}
whiteSpace="nowrap"
overflow="hidden"
>
{token?.amount || 1}
</Text>
</Flex>
{token?.metadata?.attributes?.map(({ name, value }) => (
<Flex key={name + value} mt={[4, 8]}>
<Text color="brand.neutralGray">{name}:</Text>
<Text display="block" color="brand.darkGray" fontWeight="bold" ml={[1]} whiteSpace="nowrap" overflow="hidden" textOverflow="wrap">
<Text
display="block"
color="brand.darkGray"
fontWeight="bold"
ml={[1]}
whiteSpace="nowrap"
overflow="hidden"
textOverflow="wrap"
>
{value}
</Text>
</Flex>
))}
</AccordionPanel>
</AccordionItem>
</Accordion>
<Flex display={['flex']} justifyContent="space-between" alignItems="center" width="100%" flexDir={['column', 'row']} flexWrap="wrap" marginTop={2}>
<Flex justifyContent={["flex-start"]} alignItems="center" width="100%" marginTop={4}>
<Flex
display={['flex']}
justifyContent="space-between"
alignItems="center"
width="100%"
flexDir={['column', 'row']}
flexWrap="wrap"
marginTop={2}
>
<Flex
justifyContent={['flex-start']}
alignItems="center"
width="100%"
marginTop={4}
>
{token.sale ? (
isOwner ? (
<>
<Text color="brand.black" fontSize="xl" fontWeight="700" marginRight={8}>
{token.sale.price} <img src={tz} alt="" width={10} height="auto" style={{ display: 'inline-block' }} />
<Text
color="brand.black"
fontSize="xl"
fontWeight="700"
marginRight={8}
>
{token.sale.price}{' '}
<img
src={tz}
alt=""
width={10}
height="auto"
style={{ display: 'inline-block' }}
/>
</Text>
<Box marginRight={8}>
<CancelTokenSaleButton
Expand All @@ -267,17 +385,36 @@ function TokenDetail({ contractAddress, tokenId }: TokenDetailProps) {
</>
) : (
<>
<Text color="black" fontSize={['md', 'md', 'lg']} mr={1} fontWeight="700" marginRight={8}>
{token.sale.price.toFixed(2)} <img src={tz} alt="" width={10} height="auto" style={{ display: 'inline-block' }} />
<Text
color="black"
fontSize={['md', 'md', 'lg']}
mr={1}
fontWeight="700"
marginRight={8}
>
{token.sale.price.toFixed(2)}{' '}
<img
src={tz}
alt=""
width={10}
height="auto"
style={{ display: 'inline-block' }}
/>
</Text>
<Box>
<BuyTokenButton contract={contractAddress} token={token} />
<BuyTokenButton
contract={contractAddress}
token={token}
/>
</Box>
</>
)
) : isOwner ? (
<Box marginRight={8}>
<SellTokenButton contract={contractAddress} tokenId={tokenId} />
<SellTokenButton
contract={contractAddress}
tokenId={tokenId}
/>
</Box>
) : (
<></>
Expand Down Expand Up @@ -319,7 +456,7 @@ function TokenDetail({ contractAddress, tokenId }: TokenDetailProps) {
</Flex>
</Flex>
</Flex>
</Flex >
</Flex>
);
}

Expand Down
36 changes: 26 additions & 10 deletions src/components/CreateNonFungiblePage/Form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ import { useSelector, useDispatch } from '../../reducer';
import {
addMetadataRow,
deleteMetadataRow,
updateField,
updateName,
updateDescription,
updateAmount,
updateMetadataRowName,
updateMetadataRowValue
} from '../../reducer/slices/createNft';
Expand All @@ -28,8 +30,12 @@ const DESCRIPTION_PLACEHOLDER =

export default function Form() {
const state = useSelector(s => s.createNft);
const collections = useSelector(s => s.collections.collections);
const collection = state.collectionAddress
? collections[state.collectionAddress] || null
: null;
const dispatch = useDispatch();
const { name, description } = state.fields;
const { name, description, amount } = state.fields;
return (
<>
<CollectionSelect />
Expand All @@ -42,11 +48,25 @@ export default function Form() {
autoFocus={true}
placeholder="Input your asset name"
value={name || ''}
onChange={e =>
dispatch(updateField({ name: 'name', value: e.target.value }))
}
onChange={e => dispatch(updateName(e.target.value))}
/>
</FormControl>
{collection?.fungible ? (
<FormControl paddingBottom={6}>
<FormLabel fontFamily="mono">Number of editions</FormLabel>
<Input
type="number"
placeholder="Input the amount of editions"
value={amount || ''}
onChange={e => {
const amount = parseInt(e.target.value, 10);
if (!isNaN(amount) && amount > 0 && Number.isInteger(amount)) {
dispatch(updateAmount(amount));
}
}}
/>
</FormControl>
) : null}
<FormControl paddingBottom={6}>
<FormLabel fontFamily="mono" display="flex">
Description
Expand All @@ -59,11 +79,7 @@ export default function Form() {
fontFamily="mono"
placeholder={DESCRIPTION_PLACEHOLDER}
value={description || ''}
onChange={e =>
dispatch(
updateField({ name: 'description', value: e.target.value })
)
}
onChange={e => dispatch(updateDescription(e.target.value))}
/>
</FormControl>
<Divider borderColor="brand.lightBlue" opacity="1" marginY={10} />
Expand Down
Loading