Merge pull request #43 from gear-foundation/staging

Rename marketplace to showroom
gear-foundation · May 13, 2024 · aa7779b · aa7779b
2 parents 614bd4f + 118928e
commit aa7779b
Show file tree

Hide file tree

Showing 16 changed files with 177 additions and 75 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -3,10 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <title>Vara NFT Marketplace: Explore VaraNetwork's Diverse NFT Collections</title>
+    <title>Vara NFT Showroom: Explore VaraNetwork's Diverse NFT Collections</title>
     <meta
       name="description"
-      content="Discover the vibrant world of NFTs on the Vara Network Marketplace. 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." />
+      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." />
   </head>
   <body>
     <div id="root"></div>

diff --git 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
@@ -19,6 +19,10 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
 
+  &:before {
+    content: '';
+  }
+
   .heading {
     margin-bottom: 16px;
     font-weight: 700;

diff --git 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 Tab = {
+  title: string;
+  disabled?: boolean;
+};
+
 type Props = {
-  list: string[];
+  list: Tab[];
   value: number;
   size?: 'small' | 'large';
   outlined?: boolean;
@@ -13,16 +18,17 @@ type Props = {
 
 function Tabs({ list, value, size = 'large', outlined, className, onChange }: Props) {
   const renderButtons = () =>
-    list.map((button, index) => {
+    list.map(({ title, disabled }, index) => {
       const isActive = index === value;
 
       return (
-        <li key={button}>
+        <li key={title}>
           <button
             type="button"
             className={cx(styles.button, isActive && styles.active)}
-            onClick={() => onChange(index)}>
-            {button}
+            onClick={() => onChange(index)}
+            disabled={disabled}>
+            {title}
           </button>
         </li>
       );

diff --git a/...e-collection/components/create-simple-collection-modal/create-simple-collection-modal.tsx b/...e-collection/components/create-simple-collection-modal/create-simple-collection-modal.tsx
@@ -77,13 +77,15 @@ function CreateSimpleCollectionModal({ close }: Pick<ModalProps, 'close'>) {
     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, isMetadataChangesAllowed, 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 = isMetadataChangesAllowed;
     const transferable = isTransferable ? '0' : null;
     const sellable = isSellable ? '0' : null;
     const paymentForMint = getChainBalanceValue(mintPrice).toFixed();
@@ -105,6 +107,7 @@ function CreateSimpleCollectionModal({ close }: Pick<ModalProps, 'close'>) {
       userMintLimit,
       royalty,
       paymentForMint,
+      variableMeta,
       transferable,
       sellable,
       collectionTags,

diff --git a/...tend/src/features/create-simple-collection/components/parameters-form/parameters-form.tsx b/...tend/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(),
+      isMetadataChangesAllowed: 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) && <ul className={styles.tags}>{renderTags()}</ul>}
           </div>
 
+          <Checkbox label="Allow metadata changes" type="switch" {...register('isMetadataChangesAllowed')} />
           <Checkbox label="Allow transferring" type="switch" {...register('isTransferable')} disabled={isSellable} />
           <Checkbox label="Allow selling" type="switch" {...register('isSellable')} />
 

diff --git 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,
+  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
@@ -21,6 +21,7 @@ type ParametersValues = {
   royalty: string;
   isSellable: boolean;
   isTransferable: boolean;
+  isMetadataChangesAllowed: boolean;
 };
 
 type NFT = {

diff --git 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] ?? {};