Fix nft mint with price

gear-foundation · Jan 15, 2024 · fe99f58 · fe99f58
1 parent c1e5a4a
commit fe99f58
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/frontend/src/features/collections/components/collection-header/collection-header.tsx b/frontend/src/features/collections/components/collection-header/collection-header.tsx
@@ -15,12 +15,24 @@ type Props = {
   owner: HexString;
   tokensCount: number;
   tokensLimit: string | null;
+  mintPrice: string;
   name: string;
   description: string;
   socials: Record<string, string | null>;
 };
 
-function CollectionHeader({ id, banner, logo, owner, tokensCount, tokensLimit, name, description, socials }: Props) {
+function CollectionHeader({
+  id,
+  banner,
+  logo,
+  owner,
+  tokensCount,
+  tokensLimit,
+  name,
+  description,
+  mintPrice,
+  socials,
+}: Props) {
   const socialEntries = Object.entries(socials).filter(([, value]) => !!value) as [string, string][];
 
   const renderSocials = () =>
@@ -57,7 +69,7 @@ function CollectionHeader({ id, banner, logo, owner, tokensCount, tokensLimit, n
         <div>
           <ul className={styles.socials}>{renderSocials()}</ul>
 
-          <MintNFT collectionId={id} />
+          <MintNFT collectionId={id} value={mintPrice} />
         </div>
       </div>
     </header>

diff --git a/frontend/src/features/collections/components/collection-header/nft 350.svg b/frontend/src/features/collections/components/collection-header/nft 350.svg
diff --git a/frontend/src/features/collections/components/collection/collection.tsx b/frontend/src/features/collections/components/collection/collection.tsx
@@ -1,4 +1,5 @@
 import { HexString } from '@gear-js/api';
+import { withoutCommas } from '@gear-js/react-hooks';
 import { Button } from '@gear-js/vara-ui';
 import { useParams } from 'react-router-dom';
 
@@ -38,6 +39,7 @@ function Collection() {
         tokensLimit={totalNumberOfTokens}
         name={config.name}
         description={config.description}
+        mintPrice={withoutCommas(config.paymentForMint)}
         socials={config.additionalLinks || {}}
       />
 

diff --git a/frontend/src/features/collections/components/mint-nft/mint-nft.tsx b/frontend/src/features/collections/components/mint-nft/mint-nft.tsx
@@ -6,12 +6,13 @@ import { useCollectionSendMessage } from '@/hooks';
 
 type Props = {
   collectionId: HexString;
+  value: string;
 };
 
-function Component({ collectionId }: Props) {
+function Component({ collectionId, value }: Props) {
   const sendMessage = useCollectionSendMessage(collectionId);
 
-  const handleClick = () => sendMessage({ payload: { Mint: null } });
+  const handleClick = () => sendMessage({ payload: { Mint: null }, value });
 
   return <Button text="Mint NFT" size="small" onClick={handleClick} block />;
 }