From afee363282ee9981ab05cbeae532ab238fd9c647 Mon Sep 17 00:00:00 2001 From: Vadim Tokar Date: Wed, 24 Apr 2024 13:33:28 +0300 Subject: [PATCH 1/3] add variable nft meta --- frontend/src/components/index.ts | 4 +- frontend/src/components/tabs/index.ts | 3 +- frontend/src/components/tabs/tabs.tsx | 20 ++- .../create-simple-collection-modal.tsx | 5 +- .../parameters-form/parameters-form.tsx | 2 + .../create-simple-collection/consts.ts | 1 + .../create-simple-collection/types.ts | 1 + frontend/src/graphql/gql.ts | 10 +- frontend/src/graphql/graphql.ts | 16 +- frontend/src/pages/nft/consts.ts | 1 + frontend/src/pages/nft/featured-play-list.svg | 3 + frontend/src/pages/nft/info.svg | 4 +- frontend/src/pages/nft/marker.svg | 3 + frontend/src/pages/nft/nft.module.scss | 37 ++++- frontend/src/pages/nft/nft.tsx | 142 ++++++++++++------ 15 files changed, 179 insertions(+), 73 deletions(-) create mode 100644 frontend/src/pages/nft/featured-play-list.svg create mode 100644 frontend/src/pages/nft/marker.svg diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts index d2e219f..875080a 100644 --- a/frontend/src/components/index.ts +++ b/frontend/src/components/index.ts @@ -19,7 +19,7 @@ import { List } from './list'; import { NFTActionFormModal } from './nft-action-form-modal'; import { PriceInfoCard } from './price-info-card'; import { ResponsiveSquareImage } from './responsive-square-image'; -import { Tabs } from './tabs'; +import { Tabs, TabsProps } from './tabs'; export { Header, @@ -54,4 +54,4 @@ export { withMarketplaceConfig, }; -export type { InfoCardProps }; +export type { InfoCardProps, TabsProps }; diff --git a/frontend/src/components/tabs/index.ts b/frontend/src/components/tabs/index.ts index 2ad9386..335f063 100644 --- a/frontend/src/components/tabs/index.ts +++ b/frontend/src/components/tabs/index.ts @@ -1,3 +1,4 @@ -import { Tabs } from './tabs'; +import { Tabs, TabsProps } from './tabs'; export { Tabs }; +export type { TabsProps }; diff --git a/frontend/src/components/tabs/tabs.tsx b/frontend/src/components/tabs/tabs.tsx index e445740..dffa07a 100644 --- a/frontend/src/components/tabs/tabs.tsx +++ b/frontend/src/components/tabs/tabs.tsx @@ -2,8 +2,13 @@ import { cx } from '@/utils'; import styles from './tabs.module.scss'; -type Props = { - list: string[]; +type Tab = { + title: string; + disabled?: boolean; +}; + +export type TabsProps = { + list: Tab[]; value: number; size?: 'small' | 'large'; outlined?: boolean; @@ -11,18 +16,19 @@ type Props = { onChange: (index: number) => void; }; -function Tabs({ list, value, size = 'large', outlined, className, onChange }: Props) { +function Tabs({ list, value, size = 'large', outlined, className, onChange }: TabsProps) { const renderButtons = () => - list.map((button, index) => { + list.map(({ title, disabled }, index) => { const isActive = index === value; return ( -
  • +
    • ); diff --git a/frontend/src/features/create-simple-collection/components/create-simple-collection-modal/create-simple-collection-modal.tsx b/frontend/src/features/create-simple-collection/components/create-simple-collection-modal/create-simple-collection-modal.tsx index 8d2a604..dddcaa8 100644 --- a/frontend/src/features/create-simple-collection/components/create-simple-collection-modal/create-simple-collection-modal.tsx +++ b/frontend/src/features/create-simple-collection/components/create-simple-collection-modal/create-simple-collection-modal.tsx @@ -77,13 +77,15 @@ function CreateSimpleCollectionModal({ close }: Pick) { const { feePerUploadedFile } = marketplace?.config || {}; const { cover, logo, name, description, telegram, medium, discord, url: externalUrl, x: xcom } = summaryValues; - const { mintPermission, isTransferable, isSellable, tags, royalty, mintLimit, mintPrice } = parametersValues; + const { mintPermission, isTransferable, isSellable, isVariableMeta, tags, royalty, mintLimit, mintPrice } = + parametersValues; if (!cover || !logo) throw new Error('Cover and logo are required'); const [collectionBanner, collectionLogo] = await uploadToIpfs([cover, logo]); const additionalLinks = { telegram, medium, discord, externalUrl, xcom }; const userMintLimit = mintLimit || null; + const variableMeta = isVariableMeta; const transferable = isTransferable ? '0' : null; const sellable = isSellable ? '0' : null; const paymentForMint = getChainBalanceValue(mintPrice).toFixed(); @@ -105,6 +107,7 @@ function CreateSimpleCollectionModal({ close }: Pick) { userMintLimit, royalty, paymentForMint, + variableMeta, transferable, sellable, collectionTags, diff --git a/frontend/src/features/create-simple-collection/components/parameters-form/parameters-form.tsx b/frontend/src/features/create-simple-collection/components/parameters-form/parameters-form.tsx index f0373be..42d0ca0 100644 --- a/frontend/src/features/create-simple-collection/components/parameters-form/parameters-form.tsx +++ b/frontend/src/features/create-simple-collection/components/parameters-form/parameters-form.tsx @@ -55,6 +55,7 @@ function ParametersForm({ defaultValues, onSubmit, onBack }: Props) { .transform((value) => value.toString()), isSellable: z.boolean(), isTransferable: z.boolean(), + isVariableMeta: z.boolean(), }) .refine(({ mintPermission }) => mintPermission.value !== 'custom' || mintPermission.addresses.length, { message: 'No specifed address', @@ -125,6 +126,7 @@ function ParametersForm({ defaultValues, onSubmit, onBack }: Props) { {Boolean(fields.length) &&
      {renderTags()}
    } + diff --git a/frontend/src/features/create-simple-collection/consts.ts b/frontend/src/features/create-simple-collection/consts.ts index 180b5e8..36fb58f 100644 --- a/frontend/src/features/create-simple-collection/consts.ts +++ b/frontend/src/features/create-simple-collection/consts.ts @@ -29,6 +29,7 @@ const DEFAULT_PARAMETERS_VALUES: ParametersValues = { tags: [], isSellable: false, isTransferable: false, + isVariableMeta: false, }; const DEFAULT_NFTS_VALUES: NFTsValues = { diff --git a/frontend/src/features/create-simple-collection/types.ts b/frontend/src/features/create-simple-collection/types.ts index d793f0f..82b94a3 100644 --- a/frontend/src/features/create-simple-collection/types.ts +++ b/frontend/src/features/create-simple-collection/types.ts @@ -21,6 +21,7 @@ type ParametersValues = { royalty: string; isSellable: boolean; isTransferable: boolean; + isVariableMeta: boolean; }; type NFT = { diff --git a/frontend/src/graphql/gql.ts b/frontend/src/graphql/gql.ts index 41bfadc..b5247ce 100644 --- a/frontend/src/graphql/gql.ts +++ b/frontend/src/graphql/gql.ts @@ -14,15 +14,15 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/ */ const documents = { "\n query MarketplaceQuery {\n marketplaceById(id: \"1\") {\n address\n collectionTypes {\n description\n metaUrl\n type\n }\n metadata\n config {\n feePerUploadedFile\n minimumValueForTrade\n royaltyToMarketplaceForMint\n royaltyToMarketplaceForTrade\n timeBetweenCreateCollections\n }\n admins\n }\n }\n": types.MarketplaceQueryDocument, - "\n query CollectionQuery($id: String!) {\n collectionById(id: $id) {\n id\n name\n description\n collectionBanner\n collectionLogo\n admin\n tokensLimit\n permissionToMint\n userMintLimit\n paymentForMint\n transferable\n sellable\n\n additionalLinks {\n discord\n externalUrl\n medium\n\n xcom\n telegram\n }\n }\n }\n": types.CollectionQueryDocument, "\n query MintedNFTsQuery($id: String!, $accountAddress: String!) {\n collectionById(id: $id) {\n nfts(where: { mintedBy_eq: $accountAddress }) {\n id\n }\n }\n }\n": types.MintedNfTsQueryDocument, + "\n query CollectionQuery($id: String!) {\n collectionById(id: $id) {\n id\n name\n description\n collectionBanner\n collectionLogo\n admin\n tokensLimit\n permissionToMint\n userMintLimit\n paymentForMint\n transferable\n sellable\n\n additionalLinks {\n discord\n externalUrl\n medium\n\n xcom\n telegram\n }\n }\n }\n": types.CollectionQueryDocument, "\n query LastCreatedCollectionQuery($admin: String!) {\n collections(where: { admin_eq: $admin }, orderBy: [createdAt_DESC, name_DESC, id_DESC], limit: 1) {\n createdAt\n }\n }\n": types.LastCreatedCollectionQueryDocument, "\n query CollectionsConnectionQuery($where: CollectionWhereInput!) {\n collectionsConnection(orderBy: [createdAt_DESC, name_DESC, id_DESC], where: $where) {\n totalCount\n }\n }\n": types.CollectionsConnectionQueryDocument, "\n query CollectionsQuery($limit: Int!, $offset: Int!, $where: CollectionWhereInput!) {\n collections(limit: $limit, offset: $offset, orderBy: [createdAt_DESC, name_DESC, id_DESC], where: $where) {\n id\n name\n description\n collectionBanner\n collectionLogo\n admin\n tokensLimit\n\n nfts(limit: 5) {\n id\n mediaUrl\n }\n }\n }\n": types.CollectionsQueryDocument, "\n query CollectionsNFTsCountQuery($ids: [String!]) {\n nftsInCollection(collections: $ids) {\n collection\n count\n }\n }\n": types.CollectionsNfTsCountQueryDocument, "\n query NFTsConnectionQuery($where: NftWhereInput!) {\n nftsConnection(orderBy: [createdAt_DESC, name_DESC, id_DESC], where: $where) {\n totalCount\n }\n }\n": types.NfTsConnectionQueryDocument, "\n query NFTsQuery($limit: Int!, $offset: Int!, $where: NftWhereInput!) {\n nfts(limit: $limit, offset: $offset, orderBy: [createdAt_DESC, name_DESC, id_DESC], where: $where) {\n id\n idInCollection\n name\n mediaUrl\n owner\n\n mintedBy\n\n collection {\n id\n name\n transferable\n sellable\n }\n\n sales(where: { status_eq: \"open\" }) {\n price\n }\n\n auctions(where: { status_eq: \"open\" }) {\n minPrice\n lastPrice\n endTimestamp\n }\n }\n }\n": types.NfTsQueryDocument, - "\n query NFTQuery($id: String!) {\n nftById(id: $id) {\n id\n idInCollection\n name\n description\n mediaUrl\n owner\n createdAt\n\n approvedAccount\n\n collection {\n id\n name\n royalty\n sellable\n transferable\n\n type {\n type\n }\n }\n\n sales(where: { status_eq: \"open\" }) {\n price\n }\n\n auctions(where: { status_eq: \"open\" }) {\n minPrice\n lastPrice\n endTimestamp\n }\n }\n }\n": types.NftQueryDocument, + "\n query NFTQuery($id: String!) {\n nftById(id: $id) {\n id\n idInCollection\n name\n description\n mediaUrl\n owner\n createdAt\n metadata\n\n approvedAccount\n\n collection {\n id\n name\n royalty\n sellable\n transferable\n\n type {\n type\n }\n }\n\n sales(where: { status_eq: \"open\" }) {\n price\n }\n\n auctions(where: { status_eq: \"open\" }) {\n minPrice\n lastPrice\n endTimestamp\n }\n }\n }\n": types.NftQueryDocument, }; /** @@ -46,11 +46,11 @@ export function graphql(source: "\n query MarketplaceQuery {\n marketplaceBy /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n query CollectionQuery($id: String!) {\n collectionById(id: $id) {\n id\n name\n description\n collectionBanner\n collectionLogo\n admin\n tokensLimit\n permissionToMint\n userMintLimit\n paymentForMint\n transferable\n sellable\n\n additionalLinks {\n discord\n externalUrl\n medium\n\n xcom\n telegram\n }\n }\n }\n"): (typeof documents)["\n query CollectionQuery($id: String!) {\n collectionById(id: $id) {\n id\n name\n description\n collectionBanner\n collectionLogo\n admin\n tokensLimit\n permissionToMint\n userMintLimit\n paymentForMint\n transferable\n sellable\n\n additionalLinks {\n discord\n externalUrl\n medium\n\n xcom\n telegram\n }\n }\n }\n"]; +export function graphql(source: "\n query MintedNFTsQuery($id: String!, $accountAddress: String!) {\n collectionById(id: $id) {\n nfts(where: { mintedBy_eq: $accountAddress }) {\n id\n }\n }\n }\n"): (typeof documents)["\n query MintedNFTsQuery($id: String!, $accountAddress: String!) {\n collectionById(id: $id) {\n nfts(where: { mintedBy_eq: $accountAddress }) {\n id\n }\n }\n }\n"]; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n query MintedNFTsQuery($id: String!, $accountAddress: String!) {\n collectionById(id: $id) {\n nfts(where: { mintedBy_eq: $accountAddress }) {\n id\n }\n }\n }\n"): (typeof documents)["\n query MintedNFTsQuery($id: String!, $accountAddress: String!) {\n collectionById(id: $id) {\n nfts(where: { mintedBy_eq: $accountAddress }) {\n id\n }\n }\n }\n"]; +export function graphql(source: "\n query CollectionQuery($id: String!) {\n collectionById(id: $id) {\n id\n name\n description\n collectionBanner\n collectionLogo\n admin\n tokensLimit\n permissionToMint\n userMintLimit\n paymentForMint\n transferable\n sellable\n\n additionalLinks {\n discord\n externalUrl\n medium\n\n xcom\n telegram\n }\n }\n }\n"): (typeof documents)["\n query CollectionQuery($id: String!) {\n collectionById(id: $id) {\n id\n name\n description\n collectionBanner\n collectionLogo\n admin\n tokensLimit\n permissionToMint\n userMintLimit\n paymentForMint\n transferable\n sellable\n\n additionalLinks {\n discord\n externalUrl\n medium\n\n xcom\n telegram\n }\n }\n }\n"]; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ @@ -78,7 +78,7 @@ export function graphql(source: "\n query NFTsQuery($limit: Int!, $offset: Int! /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n query NFTQuery($id: String!) {\n nftById(id: $id) {\n id\n idInCollection\n name\n description\n mediaUrl\n owner\n createdAt\n\n approvedAccount\n\n collection {\n id\n name\n royalty\n sellable\n transferable\n\n type {\n type\n }\n }\n\n sales(where: { status_eq: \"open\" }) {\n price\n }\n\n auctions(where: { status_eq: \"open\" }) {\n minPrice\n lastPrice\n endTimestamp\n }\n }\n }\n"): (typeof documents)["\n query NFTQuery($id: String!) {\n nftById(id: $id) {\n id\n idInCollection\n name\n description\n mediaUrl\n owner\n createdAt\n\n approvedAccount\n\n collection {\n id\n name\n royalty\n sellable\n transferable\n\n type {\n type\n }\n }\n\n sales(where: { status_eq: \"open\" }) {\n price\n }\n\n auctions(where: { status_eq: \"open\" }) {\n minPrice\n lastPrice\n endTimestamp\n }\n }\n }\n"]; +export function graphql(source: "\n query NFTQuery($id: String!) {\n nftById(id: $id) {\n id\n idInCollection\n name\n description\n mediaUrl\n owner\n createdAt\n metadata\n\n approvedAccount\n\n collection {\n id\n name\n royalty\n sellable\n transferable\n\n type {\n type\n }\n }\n\n sales(where: { status_eq: \"open\" }) {\n price\n }\n\n auctions(where: { status_eq: \"open\" }) {\n minPrice\n lastPrice\n endTimestamp\n }\n }\n }\n"): (typeof documents)["\n query NFTQuery($id: String!) {\n nftById(id: $id) {\n id\n idInCollection\n name\n description\n mediaUrl\n owner\n createdAt\n metadata\n\n approvedAccount\n\n collection {\n id\n name\n royalty\n sellable\n transferable\n\n type {\n type\n }\n }\n\n sales(where: { status_eq: \"open\" }) {\n price\n }\n\n auctions(where: { status_eq: \"open\" }) {\n minPrice\n lastPrice\n endTimestamp\n }\n }\n }\n"]; export function graphql(source: string) { return (documents as any)[source] ?? {}; diff --git a/frontend/src/graphql/graphql.ts b/frontend/src/graphql/graphql.ts index 2c18211..6f27b80 100644 --- a/frontend/src/graphql/graphql.ts +++ b/frontend/src/graphql/graphql.ts @@ -3274,20 +3274,20 @@ export type MarketplaceQueryQueryVariables = Exact<{ [key: string]: never; }>; export type MarketplaceQueryQuery = { __typename?: 'Query', marketplaceById: { __typename?: 'Marketplace', address: string, metadata: string, admins: Array, collectionTypes: Array<{ __typename?: 'CollectionType', description: string, metaUrl: string, type: string }>, config: { __typename?: 'MarketplaceConfig', feePerUploadedFile: string, minimumValueForTrade: string, royaltyToMarketplaceForMint: number, royaltyToMarketplaceForTrade: number, timeBetweenCreateCollections: string } } | null }; -export type CollectionQueryQueryVariables = Exact<{ +export type MintedNfTsQueryQueryVariables = Exact<{ id: Scalars['String']['input']; + accountAddress: Scalars['String']['input']; }>; -export type CollectionQueryQuery = { __typename?: 'Query', collectionById: { __typename?: 'Collection', id: string, name: string, description: string, collectionBanner: string, collectionLogo: string, admin: string, tokensLimit: string | null, permissionToMint: Array | null, userMintLimit: string | null, paymentForMint: string, transferable: string | null, sellable: string | null, additionalLinks: { __typename?: 'AdditionalLinks', discord: string | null, externalUrl: string | null, medium: string | null, xcom: string | null, telegram: string | null } | null } | null }; +export type MintedNfTsQueryQuery = { __typename?: 'Query', collectionById: { __typename?: 'Collection', nfts: Array<{ __typename?: 'Nft', id: string }> } | null }; -export type MintedNfTsQueryQueryVariables = Exact<{ +export type CollectionQueryQueryVariables = Exact<{ id: Scalars['String']['input']; - accountAddress: Scalars['String']['input']; }>; -export type MintedNfTsQueryQuery = { __typename?: 'Query', collectionById: { __typename?: 'Collection', nfts: Array<{ __typename?: 'Nft', id: string }> } | null }; +export type CollectionQueryQuery = { __typename?: 'Query', collectionById: { __typename?: 'Collection', id: string, name: string, description: string, collectionBanner: string, collectionLogo: string, admin: string, tokensLimit: string | null, permissionToMint: Array | null, userMintLimit: string | null, paymentForMint: string, transferable: string | null, sellable: string | null, additionalLinks: { __typename?: 'AdditionalLinks', discord: string | null, externalUrl: string | null, medium: string | null, xcom: string | null, telegram: string | null } | null } | null }; export type LastCreatedCollectionQueryQueryVariables = Exact<{ admin: Scalars['String']['input']; @@ -3340,16 +3340,16 @@ export type NftQueryQueryVariables = Exact<{ }>; -export type NftQueryQuery = { __typename?: 'Query', nftById: { __typename?: 'Nft', id: string, idInCollection: number, name: string, description: string, mediaUrl: string, owner: string, createdAt: string, approvedAccount: string | null, collection: { __typename?: 'Collection', id: string, name: string, royalty: number, sellable: string | null, transferable: string | null, type: { __typename?: 'CollectionType', type: string } }, sales: Array<{ __typename?: 'Sale', price: string }>, auctions: Array<{ __typename?: 'Auction', minPrice: string, lastPrice: string | null, endTimestamp: string | null }> } | null }; +export type NftQueryQuery = { __typename?: 'Query', nftById: { __typename?: 'Nft', id: string, idInCollection: number, name: string, description: string, mediaUrl: string, owner: string, createdAt: string, metadata: string | null, approvedAccount: string | null, collection: { __typename?: 'Collection', id: string, name: string, royalty: number, sellable: string | null, transferable: string | null, type: { __typename?: 'CollectionType', type: string } }, sales: Array<{ __typename?: 'Sale', price: string }>, auctions: Array<{ __typename?: 'Auction', minPrice: string, lastPrice: string | null, endTimestamp: string | null }> } | null }; export const MarketplaceQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"MarketplaceQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"marketplaceById"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"StringValue","value":"1","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"address"}},{"kind":"Field","name":{"kind":"Name","value":"collectionTypes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"metaUrl"}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}},{"kind":"Field","name":{"kind":"Name","value":"metadata"}},{"kind":"Field","name":{"kind":"Name","value":"config"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"feePerUploadedFile"}},{"kind":"Field","name":{"kind":"Name","value":"minimumValueForTrade"}},{"kind":"Field","name":{"kind":"Name","value":"royaltyToMarketplaceForMint"}},{"kind":"Field","name":{"kind":"Name","value":"royaltyToMarketplaceForTrade"}},{"kind":"Field","name":{"kind":"Name","value":"timeBetweenCreateCollections"}}]}},{"kind":"Field","name":{"kind":"Name","value":"admins"}}]}}]}}]} as unknown as DocumentNode; -export const CollectionQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CollectionQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collectionById"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"collectionBanner"}},{"kind":"Field","name":{"kind":"Name","value":"collectionLogo"}},{"kind":"Field","name":{"kind":"Name","value":"admin"}},{"kind":"Field","name":{"kind":"Name","value":"tokensLimit"}},{"kind":"Field","name":{"kind":"Name","value":"permissionToMint"}},{"kind":"Field","name":{"kind":"Name","value":"userMintLimit"}},{"kind":"Field","name":{"kind":"Name","value":"paymentForMint"}},{"kind":"Field","name":{"kind":"Name","value":"transferable"}},{"kind":"Field","name":{"kind":"Name","value":"sellable"}},{"kind":"Field","name":{"kind":"Name","value":"additionalLinks"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"discord"}},{"kind":"Field","name":{"kind":"Name","value":"externalUrl"}},{"kind":"Field","name":{"kind":"Name","value":"medium"}},{"kind":"Field","name":{"kind":"Name","value":"xcom"}},{"kind":"Field","name":{"kind":"Name","value":"telegram"}}]}}]}}]}}]} as unknown as DocumentNode; export const MintedNfTsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"MintedNFTsQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"accountAddress"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collectionById"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nfts"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"mintedBy_eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"accountAddress"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode; +export const CollectionQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CollectionQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collectionById"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"collectionBanner"}},{"kind":"Field","name":{"kind":"Name","value":"collectionLogo"}},{"kind":"Field","name":{"kind":"Name","value":"admin"}},{"kind":"Field","name":{"kind":"Name","value":"tokensLimit"}},{"kind":"Field","name":{"kind":"Name","value":"permissionToMint"}},{"kind":"Field","name":{"kind":"Name","value":"userMintLimit"}},{"kind":"Field","name":{"kind":"Name","value":"paymentForMint"}},{"kind":"Field","name":{"kind":"Name","value":"transferable"}},{"kind":"Field","name":{"kind":"Name","value":"sellable"}},{"kind":"Field","name":{"kind":"Name","value":"additionalLinks"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"discord"}},{"kind":"Field","name":{"kind":"Name","value":"externalUrl"}},{"kind":"Field","name":{"kind":"Name","value":"medium"}},{"kind":"Field","name":{"kind":"Name","value":"xcom"}},{"kind":"Field","name":{"kind":"Name","value":"telegram"}}]}}]}}]}}]} as unknown as DocumentNode; export const LastCreatedCollectionQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"LastCreatedCollectionQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"admin"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collections"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"admin_eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"admin"}}}]}},{"kind":"Argument","name":{"kind":"Name","value":"orderBy"},"value":{"kind":"ListValue","values":[{"kind":"EnumValue","value":"createdAt_DESC"},{"kind":"EnumValue","value":"name_DESC"},{"kind":"EnumValue","value":"id_DESC"}]}},{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"1"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createdAt"}}]}}]}}]} as unknown as DocumentNode; export const CollectionsConnectionQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CollectionsConnectionQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"where"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CollectionWhereInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collectionsConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"orderBy"},"value":{"kind":"ListValue","values":[{"kind":"EnumValue","value":"createdAt_DESC"},{"kind":"EnumValue","value":"name_DESC"},{"kind":"EnumValue","value":"id_DESC"}]}},{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"Variable","name":{"kind":"Name","value":"where"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]} as unknown as DocumentNode; export const CollectionsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CollectionsQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"limit"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"offset"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"where"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CollectionWhereInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collections"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"Variable","name":{"kind":"Name","value":"limit"}}},{"kind":"Argument","name":{"kind":"Name","value":"offset"},"value":{"kind":"Variable","name":{"kind":"Name","value":"offset"}}},{"kind":"Argument","name":{"kind":"Name","value":"orderBy"},"value":{"kind":"ListValue","values":[{"kind":"EnumValue","value":"createdAt_DESC"},{"kind":"EnumValue","value":"name_DESC"},{"kind":"EnumValue","value":"id_DESC"}]}},{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"Variable","name":{"kind":"Name","value":"where"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"collectionBanner"}},{"kind":"Field","name":{"kind":"Name","value":"collectionLogo"}},{"kind":"Field","name":{"kind":"Name","value":"admin"}},{"kind":"Field","name":{"kind":"Name","value":"tokensLimit"}},{"kind":"Field","name":{"kind":"Name","value":"nfts"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"5"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"mediaUrl"}}]}}]}}]}}]} as unknown as DocumentNode; export const CollectionsNfTsCountQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CollectionsNFTsCountQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"ids"}},"type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nftsInCollection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"collections"},"value":{"kind":"Variable","name":{"kind":"Name","value":"ids"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collection"}},{"kind":"Field","name":{"kind":"Name","value":"count"}}]}}]}}]} as unknown as DocumentNode; export const NfTsConnectionQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"NFTsConnectionQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"where"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"NftWhereInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nftsConnection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"orderBy"},"value":{"kind":"ListValue","values":[{"kind":"EnumValue","value":"createdAt_DESC"},{"kind":"EnumValue","value":"name_DESC"},{"kind":"EnumValue","value":"id_DESC"}]}},{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"Variable","name":{"kind":"Name","value":"where"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]} as unknown as DocumentNode; export const NfTsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"NFTsQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"limit"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"offset"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"where"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"NftWhereInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nfts"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"Variable","name":{"kind":"Name","value":"limit"}}},{"kind":"Argument","name":{"kind":"Name","value":"offset"},"value":{"kind":"Variable","name":{"kind":"Name","value":"offset"}}},{"kind":"Argument","name":{"kind":"Name","value":"orderBy"},"value":{"kind":"ListValue","values":[{"kind":"EnumValue","value":"createdAt_DESC"},{"kind":"EnumValue","value":"name_DESC"},{"kind":"EnumValue","value":"id_DESC"}]}},{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"Variable","name":{"kind":"Name","value":"where"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"idInCollection"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"mediaUrl"}},{"kind":"Field","name":{"kind":"Name","value":"owner"}},{"kind":"Field","name":{"kind":"Name","value":"mintedBy"}},{"kind":"Field","name":{"kind":"Name","value":"collection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"transferable"}},{"kind":"Field","name":{"kind":"Name","value":"sellable"}}]}},{"kind":"Field","name":{"kind":"Name","value":"sales"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"status_eq"},"value":{"kind":"StringValue","value":"open","block":false}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"price"}}]}},{"kind":"Field","name":{"kind":"Name","value":"auctions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"status_eq"},"value":{"kind":"StringValue","value":"open","block":false}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"minPrice"}},{"kind":"Field","name":{"kind":"Name","value":"lastPrice"}},{"kind":"Field","name":{"kind":"Name","value":"endTimestamp"}}]}}]}}]}}]} as unknown as DocumentNode; -export const NftQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"NFTQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nftById"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"idInCollection"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"mediaUrl"}},{"kind":"Field","name":{"kind":"Name","value":"owner"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"approvedAccount"}},{"kind":"Field","name":{"kind":"Name","value":"collection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"royalty"}},{"kind":"Field","name":{"kind":"Name","value":"sellable"}},{"kind":"Field","name":{"kind":"Name","value":"transferable"}},{"kind":"Field","name":{"kind":"Name","value":"type"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"type"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"sales"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"status_eq"},"value":{"kind":"StringValue","value":"open","block":false}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"price"}}]}},{"kind":"Field","name":{"kind":"Name","value":"auctions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"status_eq"},"value":{"kind":"StringValue","value":"open","block":false}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"minPrice"}},{"kind":"Field","name":{"kind":"Name","value":"lastPrice"}},{"kind":"Field","name":{"kind":"Name","value":"endTimestamp"}}]}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file +export const NftQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"NFTQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nftById"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"idInCollection"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"mediaUrl"}},{"kind":"Field","name":{"kind":"Name","value":"owner"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"metadata"}},{"kind":"Field","name":{"kind":"Name","value":"approvedAccount"}},{"kind":"Field","name":{"kind":"Name","value":"collection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"royalty"}},{"kind":"Field","name":{"kind":"Name","value":"sellable"}},{"kind":"Field","name":{"kind":"Name","value":"transferable"}},{"kind":"Field","name":{"kind":"Name","value":"type"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"type"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"sales"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"status_eq"},"value":{"kind":"StringValue","value":"open","block":false}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"price"}}]}},{"kind":"Field","name":{"kind":"Name","value":"auctions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"status_eq"},"value":{"kind":"StringValue","value":"open","block":false}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"minPrice"}},{"kind":"Field","name":{"kind":"Name","value":"lastPrice"}},{"kind":"Field","name":{"kind":"Name","value":"endTimestamp"}}]}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file diff --git a/frontend/src/pages/nft/consts.ts b/frontend/src/pages/nft/consts.ts index cbca427..09e718e 100644 --- a/frontend/src/pages/nft/consts.ts +++ b/frontend/src/pages/nft/consts.ts @@ -10,6 +10,7 @@ const NFT_QUERY = graphql(` mediaUrl owner createdAt + metadata approvedAccount diff --git a/frontend/src/pages/nft/featured-play-list.svg b/frontend/src/pages/nft/featured-play-list.svg new file mode 100644 index 0000000..6085fde --- /dev/null +++ b/frontend/src/pages/nft/featured-play-list.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/pages/nft/info.svg b/frontend/src/pages/nft/info.svg index 1a03572..5c68e99 100644 --- a/frontend/src/pages/nft/info.svg +++ b/frontend/src/pages/nft/info.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/pages/nft/marker.svg b/frontend/src/pages/nft/marker.svg new file mode 100644 index 0000000..582ac5d --- /dev/null +++ b/frontend/src/pages/nft/marker.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/pages/nft/nft.module.scss b/frontend/src/pages/nft/nft.module.scss index 5f5d446..cac8ca3 100644 --- a/frontend/src/pages/nft/nft.module.scss +++ b/frontend/src/pages/nft/nft.module.scss @@ -58,14 +58,14 @@ } .card { - padding: 24px 16px; + padding: 20px 16px; background-color: #fff; box-shadow: 0px 4px 100px 0px #cacaca33; border-radius: 15px; .heading { - margin-bottom: 20px; + margin-bottom: 18px; font-size: 16px; font-weight: 700; @@ -73,7 +73,7 @@ letter-spacing: 0.02em; svg { - margin-right: 10px; + margin-right: 8px; } } @@ -107,4 +107,35 @@ overflow: hidden; text-overflow: ellipsis; } + + .metadata { + padding: 12.5px 0 11.5px 0; + &Item { + svg { + min-width: 24px; + height: 24px; + } + &:not(:last-child)::after { + display: block; + content: ''; + width: 296px; + height: 0px; + margin-top: 10px; + margin-bottom: 10px; + opacity: 0.2; + border-bottom: 1px solid #c4c4c4; + } + } + + &Container { + display: flex; + gap: 10px; + } + + &Text { + padding-top: 2px; + font-weight: 600; + line-height: 16.8px; + } + } } diff --git a/frontend/src/pages/nft/nft.tsx b/frontend/src/pages/nft/nft.tsx index fbb9701..0b981a3 100644 --- a/frontend/src/pages/nft/nft.tsx +++ b/frontend/src/pages/nft/nft.tsx @@ -2,7 +2,7 @@ import { useAccount } from '@gear-js/react-hooks'; import { Identicon } from '@polkadot/react-identicon'; import { generatePath, useParams } from 'react-router-dom'; -import { Breadcrumbs, Container, CopyButton, ResponsiveSquareImage, Skeleton, Tabs } from '@/components'; +import { Breadcrumbs, Container, CopyButton, ResponsiveSquareImage, Skeleton, Tabs, TabsProps } from '@/components'; import { ROUTE } from '@/consts'; import { TransferNFT } from '@/features/collections'; import { BuyNFT, MakeBid, StartSale, StartAuction } from '@/features/marketplace'; @@ -13,9 +13,16 @@ import { getIpfsLink } from '@/utils'; import { ListingCard } from './components'; import { useNFT } from './hooks'; import InfoSVG from './info.svg?react'; +import FeaturedPlayListSVG from './featured-play-list.svg?react'; +import MarkerSVG from './marker.svg?react'; import styles from './nft.module.scss'; +import { useState } from 'react'; -const TABS = ['Overview', 'Properties', 'Activities']; +const TABS: TabsProps['list'] = [ + { title: 'Overview' }, + { title: 'Properties' }, + { title: 'History', disabled: true }, +]; type Params = { collectionId: string; @@ -28,14 +35,29 @@ function NFT() { const { collectionId, id } = useParams() as Params; const nft = useNFT(collectionId, id); - const { owner, name, collection, mediaUrl, description, createdAt, sales, auctions } = nft || {}; + const { owner, name, collection, mediaUrl, description, createdAt, sales, auctions, metadata } = nft || {}; const { name: collectionName, royalty } = collection || {}; const [sale] = sales || []; const [auction] = auctions || []; + const parseNFTMetadata = (NFTMetadata?: string | null) => { + const parsedMetadata: unknown = NFTMetadata ? JSON.parse(NFTMetadata) : null; + if (Array.isArray(parsedMetadata) && parsedMetadata.every((value) => typeof value === 'string')) { + return parsedMetadata as string[]; + } + return null; + }; + + const parsedNFTMetadata = parseNFTMetadata(metadata); + const isOwner = account?.decodedAddress === owner; + const [selectedTab, setSelectedTab] = useState(0); + const onSelectedTabChange = (index: number) => { + setSelectedTab(index); + }; + return ( - {}} /> - -
    -

    - Details -

    - -
      -
    • - Contract Address: - - {collectionId} - - -
      • - -
    • - Token ID: - {id} -
      • - -
    • - Token Standart: - gNFT -
      • - -
    • - Mint Date: - - {createdAt ? new Date(createdAt).toLocaleString() : } - -
      • - -
    • - Creator Earnings: - - {royalty !== undefined ? `${royalty}%` : } - -
      • -
    -
    + + + {selectedTab === 0 && ( +
    +

    + + Details +

    + +
      +
    • + Contract Address: + + {collectionId} + + +
      • + +
    • + Token ID: + {id} +
      • + +
    • + Token Standart: + gNFT +
      • + +
    • + Mint Date: + + {createdAt ? new Date(createdAt).toLocaleString() : } + +
      • + +
    • + Creator Earnings: + + {royalty !== undefined ? `${royalty}%` : } + +
      • +
    +
    + )} + + {selectedTab === 1 && ( +
    +

    + + NFT Details +

    + + {!!parsedNFTMetadata?.length && ( +
      + {parsedNFTMetadata.map((value, index) => ( +
    • + + + {value} + +
      • + ))} +
    + )} +
    + )} From 32b5941c229fef40933d55f6f6999cab0f82317d Mon Sep 17 00:00:00 2001 From: Vadim Tokar Date: Thu, 25 Apr 2024 12:02:17 +0400 Subject: [PATCH 2/3] fix variable meta review comments --- frontend/src/components/index.ts | 4 +- frontend/src/components/tabs/index.ts | 3 +- frontend/src/components/tabs/tabs.tsx | 4 +- .../create-simple-collection-modal.tsx | 4 +- .../parameters-form/parameters-form.tsx | 4 +- .../create-simple-collection/consts.ts | 2 +- .../create-simple-collection/types.ts | 2 +- frontend/src/pages/nft/featured-play-list.svg | 4 +- frontend/src/pages/nft/info.svg | 4 +- frontend/src/pages/nft/nft.module.scss | 27 +++++--- frontend/src/pages/nft/nft.tsx | 62 +++++++------------ frontend/src/pages/nft/utils.ts | 7 +++ 12 files changed, 63 insertions(+), 64 deletions(-) create mode 100644 frontend/src/pages/nft/utils.ts diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts index 875080a..d2e219f 100644 --- a/frontend/src/components/index.ts +++ b/frontend/src/components/index.ts @@ -19,7 +19,7 @@ import { List } from './list'; import { NFTActionFormModal } from './nft-action-form-modal'; import { PriceInfoCard } from './price-info-card'; import { ResponsiveSquareImage } from './responsive-square-image'; -import { Tabs, TabsProps } from './tabs'; +import { Tabs } from './tabs'; export { Header, @@ -54,4 +54,4 @@ export { withMarketplaceConfig, }; -export type { InfoCardProps, TabsProps }; +export type { InfoCardProps }; diff --git a/frontend/src/components/tabs/index.ts b/frontend/src/components/tabs/index.ts index 335f063..2ad9386 100644 --- a/frontend/src/components/tabs/index.ts +++ b/frontend/src/components/tabs/index.ts @@ -1,4 +1,3 @@ -import { Tabs, TabsProps } from './tabs'; +import { Tabs } from './tabs'; export { Tabs }; -export type { TabsProps }; diff --git a/frontend/src/components/tabs/tabs.tsx b/frontend/src/components/tabs/tabs.tsx index dffa07a..56715bc 100644 --- a/frontend/src/components/tabs/tabs.tsx +++ b/frontend/src/components/tabs/tabs.tsx @@ -7,7 +7,7 @@ type Tab = { disabled?: boolean; }; -export type TabsProps = { +type Props = { list: Tab[]; value: number; size?: 'small' | 'large'; @@ -16,7 +16,7 @@ export type TabsProps = { onChange: (index: number) => void; }; -function Tabs({ list, value, size = 'large', outlined, className, onChange }: TabsProps) { +function Tabs({ list, value, size = 'large', outlined, className, onChange }: Props) { const renderButtons = () => list.map(({ title, disabled }, index) => { const isActive = index === value; diff --git a/frontend/src/features/create-simple-collection/components/create-simple-collection-modal/create-simple-collection-modal.tsx b/frontend/src/features/create-simple-collection/components/create-simple-collection-modal/create-simple-collection-modal.tsx index dddcaa8..065c210 100644 --- a/frontend/src/features/create-simple-collection/components/create-simple-collection-modal/create-simple-collection-modal.tsx +++ b/frontend/src/features/create-simple-collection/components/create-simple-collection-modal/create-simple-collection-modal.tsx @@ -77,7 +77,7 @@ function CreateSimpleCollectionModal({ close }: Pick) { const { feePerUploadedFile } = marketplace?.config || {}; const { cover, logo, name, description, telegram, medium, discord, url: externalUrl, x: xcom } = summaryValues; - const { mintPermission, isTransferable, isSellable, isVariableMeta, tags, royalty, mintLimit, mintPrice } = + const { mintPermission, isTransferable, isSellable, isMetadataChangesAllowed, tags, royalty, mintLimit, mintPrice } = parametersValues; if (!cover || !logo) throw new Error('Cover and logo are required'); @@ -85,7 +85,7 @@ function CreateSimpleCollectionModal({ close }: Pick) { const additionalLinks = { telegram, medium, discord, externalUrl, xcom }; const userMintLimit = mintLimit || null; - const variableMeta = isVariableMeta; + const variableMeta = isMetadataChangesAllowed; const transferable = isTransferable ? '0' : null; const sellable = isSellable ? '0' : null; const paymentForMint = getChainBalanceValue(mintPrice).toFixed(); diff --git a/frontend/src/features/create-simple-collection/components/parameters-form/parameters-form.tsx b/frontend/src/features/create-simple-collection/components/parameters-form/parameters-form.tsx index 42d0ca0..907b2c0 100644 --- a/frontend/src/features/create-simple-collection/components/parameters-form/parameters-form.tsx +++ b/frontend/src/features/create-simple-collection/components/parameters-form/parameters-form.tsx @@ -55,7 +55,7 @@ function ParametersForm({ defaultValues, onSubmit, onBack }: Props) { .transform((value) => value.toString()), isSellable: z.boolean(), isTransferable: z.boolean(), - isVariableMeta: z.boolean(), + isMetadataChangesAllowed: z.boolean(), }) .refine(({ mintPermission }) => mintPermission.value !== 'custom' || mintPermission.addresses.length, { message: 'No specifed address', @@ -126,7 +126,7 @@ function ParametersForm({ defaultValues, onSubmit, onBack }: Props) { {Boolean(fields.length) &&
      {renderTags()}
    } - + diff --git a/frontend/src/features/create-simple-collection/consts.ts b/frontend/src/features/create-simple-collection/consts.ts index 36fb58f..333ef37 100644 --- a/frontend/src/features/create-simple-collection/consts.ts +++ b/frontend/src/features/create-simple-collection/consts.ts @@ -29,7 +29,7 @@ const DEFAULT_PARAMETERS_VALUES: ParametersValues = { tags: [], isSellable: false, isTransferable: false, - isVariableMeta: false, + isMetadataChangesAllowed: false, }; const DEFAULT_NFTS_VALUES: NFTsValues = { diff --git a/frontend/src/features/create-simple-collection/types.ts b/frontend/src/features/create-simple-collection/types.ts index 82b94a3..58a0b79 100644 --- a/frontend/src/features/create-simple-collection/types.ts +++ b/frontend/src/features/create-simple-collection/types.ts @@ -21,7 +21,7 @@ type ParametersValues = { royalty: string; isSellable: boolean; isTransferable: boolean; - isVariableMeta: boolean; + isMetadataChangesAllowed: boolean; }; type NFT = { diff --git a/frontend/src/pages/nft/featured-play-list.svg b/frontend/src/pages/nft/featured-play-list.svg index 6085fde..20fcf0e 100644 --- a/frontend/src/pages/nft/featured-play-list.svg +++ b/frontend/src/pages/nft/featured-play-list.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/pages/nft/info.svg b/frontend/src/pages/nft/info.svg index 5c68e99..1a03572 100644 --- a/frontend/src/pages/nft/info.svg +++ b/frontend/src/pages/nft/info.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/pages/nft/nft.module.scss b/frontend/src/pages/nft/nft.module.scss index cac8ca3..edd1b40 100644 --- a/frontend/src/pages/nft/nft.module.scss +++ b/frontend/src/pages/nft/nft.module.scss @@ -73,7 +73,9 @@ letter-spacing: 0.02em; svg { - margin-right: 8px; + margin: 2px 10px 2px 2px; + height: 24px; + width: 24px; } } @@ -109,29 +111,34 @@ } .metadata { - padding: 12.5px 0 11.5px 0; + padding: 2.5px 12px 1.5px 0; + margin-right: -12px; + max-height: 292px; + overflow-y: auto; &Item { + position: relative; + display: flex; + gap: 10px; + padding: 10px 0; + svg { min-width: 24px; height: 24px; } &:not(:last-child)::after { + position: absolute; + bottom: 0px; display: block; content: ''; - width: 296px; + width: 55%; + max-width: 296px; height: 0px; - margin-top: 10px; - margin-bottom: 10px; + opacity: 0.2; border-bottom: 1px solid #c4c4c4; } } - &Container { - display: flex; - gap: 10px; - } - &Text { padding-top: 2px; font-weight: 600; diff --git a/frontend/src/pages/nft/nft.tsx b/frontend/src/pages/nft/nft.tsx index 0b981a3..d078018 100644 --- a/frontend/src/pages/nft/nft.tsx +++ b/frontend/src/pages/nft/nft.tsx @@ -1,8 +1,9 @@ import { useAccount } from '@gear-js/react-hooks'; import { Identicon } from '@polkadot/react-identicon'; +import { useState } from 'react'; import { generatePath, useParams } from 'react-router-dom'; -import { Breadcrumbs, Container, CopyButton, ResponsiveSquareImage, Skeleton, Tabs, TabsProps } from '@/components'; +import { Breadcrumbs, Container, CopyButton, ResponsiveSquareImage, Skeleton, Tabs } from '@/components'; import { ROUTE } from '@/consts'; import { TransferNFT } from '@/features/collections'; import { BuyNFT, MakeBid, StartSale, StartAuction } from '@/features/marketplace'; @@ -11,18 +12,12 @@ import TagSVG from '@/features/marketplace/assets/tag.svg?react'; import { getIpfsLink } from '@/utils'; import { ListingCard } from './components'; +import FeaturedPlayListSVG from './featured-play-list.svg?react'; import { useNFT } from './hooks'; import InfoSVG from './info.svg?react'; -import FeaturedPlayListSVG from './featured-play-list.svg?react'; import MarkerSVG from './marker.svg?react'; import styles from './nft.module.scss'; -import { useState } from 'react'; - -const TABS: TabsProps['list'] = [ - { title: 'Overview' }, - { title: 'Properties' }, - { title: 'History', disabled: true }, -]; +import { parseNFTMetadata } from './utils'; type Params = { collectionId: string; @@ -41,22 +36,24 @@ function NFT() { const [sale] = sales || []; const [auction] = auctions || []; - const parseNFTMetadata = (NFTMetadata?: string | null) => { - const parsedMetadata: unknown = NFTMetadata ? JSON.parse(NFTMetadata) : null; - if (Array.isArray(parsedMetadata) && parsedMetadata.every((value) => typeof value === 'string')) { - return parsedMetadata as string[]; - } - return null; - }; - const parsedNFTMetadata = parseNFTMetadata(metadata); const isOwner = account?.decodedAddress === owner; - const [selectedTab, setSelectedTab] = useState(0); - const onSelectedTabChange = (index: number) => { - setSelectedTab(index); - }; + const tabs = [ + { title: 'Overview' }, + { title: 'Properties', disabled: !parsedNFTMetadata?.length }, + { title: 'History', disabled: true }, + ]; + const [tabIndex, setTabIndex] = useState(0); + + const renderMetadata = () => + parsedNFTMetadata?.map((value, index) => ( +
  • + + {value} +
    • + )); return ( @@ -127,15 +124,15 @@ function NFT() {
    setTabIndex(index)} /> - {selectedTab === 0 && ( + {tabIndex === 0 && (

    @@ -178,25 +175,14 @@ function NFT() {

    )} - {selectedTab === 1 && ( + {tabIndex === 1 && Boolean(parsedNFTMetadata?.length) && (

    NFT Details

    - {!!parsedNFTMetadata?.length && ( -
      - {parsedNFTMetadata.map((value, index) => ( -
    • - - - {value} - -
      • - ))} -
    - )} +
      {renderMetadata()}
    )}
    diff --git a/frontend/src/pages/nft/utils.ts b/frontend/src/pages/nft/utils.ts new file mode 100644 index 0000000..1242d20 --- /dev/null +++ b/frontend/src/pages/nft/utils.ts @@ -0,0 +1,7 @@ +export const parseNFTMetadata = (NFTMetadata?: string | null) => { + const parsedMetadata: unknown = NFTMetadata ? JSON.parse(NFTMetadata) : null; + if (Array.isArray(parsedMetadata) && parsedMetadata.every((value) => typeof value === 'string')) { + return parsedMetadata as string[]; + } + return null; +}; From 118928e0328b3f700967f27f4a6ae3eff5e8a1f7 Mon Sep 17 00:00:00 2001 From: Vadim Tokar <52737608+vraja-nayaka@users.noreply.github.com> Date: Mon, 13 May 2024 10:13:59 +0400 Subject: [PATCH 3/3] Rename marketplace to showroom and remove footer empty links --- frontend/index.html | 4 ++-- frontend/src/components/layout/footer/consts.ts | 7 ------- frontend/src/components/layout/footer/footer.module.scss | 4 ++++ 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index a8afff2..c4c0fc3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,10 +3,10 @@ - Vara NFT Marketplace: Explore VaraNetwork's Diverse NFT Collections + Vara NFT Showroom: Explore VaraNetwork's Diverse NFT Collections + content="Discover the vibrant world of NFTs on the Vara Network Showroom. Explore a diverse range of collections showcasing unique digital assets created on the Vara Network. Immerse yourself in the creativity and innovation of NFTs within our curated collections of digital art." />
    diff --git a/frontend/src/components/layout/footer/consts.ts b/frontend/src/components/layout/footer/consts.ts index 4fea7c0..3356401 100644 --- a/frontend/src/components/layout/footer/consts.ts +++ b/frontend/src/components/layout/footer/consts.ts @@ -1,11 +1,4 @@ const LIST = [ - { - heading: 'Marketplace', - links: [ - { text: 'Stats', href: '#' }, - { text: 'Create', href: '#' }, - ], - }, { heading: 'About Vara', links: [ diff --git a/frontend/src/components/layout/footer/footer.module.scss b/frontend/src/components/layout/footer/footer.module.scss index fedd7d3..fe6ebd1 100644 --- a/frontend/src/components/layout/footer/footer.module.scss +++ b/frontend/src/components/layout/footer/footer.module.scss @@ -19,6 +19,10 @@ display: grid; grid-template-columns: repeat(3, 1fr); + &:before { + content: ''; + } + .heading { margin-bottom: 16px; font-weight: 700;