From fe99f589a4afbbf650c5958f4a1ca4180e1b69ca Mon Sep 17 00:00:00 2001
From: Nikita Yutanov <nikitayutanov@gmail.com>
Date: Mon, 15 Jan 2024 19:36:25 +0300
Subject: [PATCH] Fix nft mint with price

---
 .../collection-header/collection-header.tsx      | 16 ++++++++++++++--
 .../components/collection-header/nft 350.svg     |  1 -
 .../components/collection/collection.tsx         |  2 ++
 .../collections/components/mint-nft/mint-nft.tsx |  5 +++--
 4 files changed, 19 insertions(+), 5 deletions(-)
 delete mode 100644 frontend/src/features/collections/components/collection-header/nft 350.svg

diff --git a/frontend/src/features/collections/components/collection-header/collection-header.tsx b/frontend/src/features/collections/components/collection-header/collection-header.tsx
index 9f08131..30f8578 100644
--- 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
deleted file mode 100644
index 0615749..0000000
--- a/frontend/src/features/collections/components/collection-header/nft 350.svg	
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" viewBox="0 0 350 350"><rect width="100%" height="100%" fill="#DDDDDD"/><path fill="#999999" d="m73.57 168.02-3.05-.54q.35-2.44 1.36-4.29 1.01-1.84 2.53-3.08 1.51-1.23 3.47-1.85 1.97-.63 4.22-.63 2.35 0 4.24.67 1.9.67 3.24 1.86 1.34 1.19 2.05 2.78.72 1.6.72 3.46 0 1.62-.37 2.85-.36 1.24-1.04 2.15-.68.92-1.69 1.55-1.01.64-2.28 1.06 3.05.97 4.56 2.94 1.5 1.97 1.5 4.96 0 2.54-.94 4.49-.94 1.95-2.54 3.28-1.6 1.32-3.7 2-2.1.69-4.45.69-2.56 0-4.47-.59-1.9-.59-3.31-1.74-1.41-1.15-2.4-2.82-.98-1.67-1.69-3.85l2.56-1.06q1.01-.43 1.89-.23.88.2 1.28.96.43.82.93 1.62.51.8 1.21 1.42.71.62 1.66 1.01t2.27.39q1.48 0 2.58-.48 1.11-.49 1.85-1.26.74-.78 1.1-1.73.37-.95.37-1.91 0-1.23-.26-2.22-.26-1-1.08-1.71-.83-.7-2.37-1.1-1.53-.4-4.12-.4v-4.14q2.14-.02 3.55-.4 1.41-.37 2.24-1.04.84-.67 1.17-1.61.33-.94.33-2.07 0-2.4-1.34-3.64-1.34-1.25-3.58-1.25-1.03 0-1.9.29-.87.3-1.56.83-.7.53-1.17 1.23-.47.71-.7 1.55-.4 1.08-1.05 1.44-.64.35-1.82.16Zm32.41-4.75-1.2 7.08q1.13-.24 2.16-.34 1.04-.11 2-.11 2.68 0 4.72.8 2.05.8 3.43 2.21 1.39 1.41 2.1 3.3.7 1.89.7 4.08 0 2.7-.95 4.93-.95 2.23-2.64 3.82-1.7 1.59-4.01 2.46-2.32.87-5.04.87-1.6 0-3.03-.33-1.44-.33-2.69-.88-1.26-.56-2.33-1.27-1.07-.72-1.92-1.52l1.79-2.47q.56-.8 1.48-.8.59 0 1.2.38t1.4.82q.78.45 1.85.83 1.07.37 2.58.37 1.59 0 2.82-.52 1.22-.51 2.03-1.44.81-.93 1.22-2.21.41-1.28.41-2.78 0-2.78-1.61-4.34t-4.76-1.56q-2.42 0-4.95.89l-3.62-1.03 2.82-16.5h16.78v2.47q0 1.24-.78 2.02-.78.77-2.63.77h-9.33Zm42.6 11.73q0 4.44-.95 7.72-.95 3.28-2.63 5.42-1.68 2.13-3.97 3.18-2.29 1.05-4.95 1.05-2.65 0-4.92-1.05t-3.94-3.18q-1.67-2.14-2.61-5.42t-.94-7.72q0-4.47.94-7.73.94-3.27 2.61-5.41t3.94-3.18q2.27-1.05 4.92-1.05 2.66 0 4.95 1.05 2.29 1.04 3.97 3.18 1.68 2.14 2.63 5.41.95 3.26.95 7.73Zm-5.99 0q0-3.69-.54-6.11-.54-2.42-1.44-3.85-.91-1.44-2.08-2.01-1.18-.58-2.45-.58-1.24 0-2.41.58-1.16.57-2.05 2.01-.9 1.43-1.42 3.85-.53 2.42-.53 6.11 0 3.69.53 6.11.52 2.42 1.42 3.85.89 1.44 2.05 2.01 1.17.58 2.41.58 1.27 0 2.45-.58 1.17-.57 2.08-2.01.9-1.43 1.44-3.85.54-2.42.54-6.11Zm43.31 9.21-3.08 3.03-7.96-7.96-8.04 8.01-3.08-3.03 8.04-8.06-7.66-7.66 3.05-3.06 7.66 7.66 7.62-7.61 3.1 3.05-7.64 7.64 7.99 7.99Zm19.55-16.19-3.05-.54q.35-2.44 1.36-4.29 1.01-1.84 2.53-3.08 1.51-1.23 3.48-1.85 1.96-.63 4.21-.63 2.35 0 4.25.67 1.89.67 3.23 1.86t2.05 2.78q.72 1.6.72 3.46 0 1.62-.36 2.85-.37 1.24-1.05 2.15-.68.92-1.69 1.55-1.01.64-2.28 1.06 3.05.97 4.56 2.94 1.5 1.97 1.5 4.96 0 2.54-.94 4.49-.94 1.95-2.54 3.28-1.59 1.32-3.7 2-2.1.69-4.45.69-2.56 0-4.47-.59-1.9-.59-3.31-1.74-1.41-1.15-2.4-2.82-.98-1.67-1.69-3.85l2.56-1.06q1.01-.43 1.9-.23.88.2 1.28.96.42.82.92 1.62.51.8 1.21 1.42.71.62 1.66 1.01t2.27.39q1.48 0 2.58-.48 1.11-.49 1.85-1.26.74-.78 1.1-1.73.37-.95.37-1.91 0-1.23-.26-2.22-.26-1-1.08-1.71-.82-.7-2.36-1.1-1.54-.4-4.13-.4v-4.14q2.14-.02 3.55-.4 1.41-.37 2.24-1.04.84-.67 1.17-1.61.33-.94.33-2.07 0-2.4-1.34-3.64-1.34-1.25-3.57-1.25-1.04 0-1.91.29-.87.3-1.56.83-.69.53-1.16 1.23-.47.71-.71 1.55-.4 1.08-1.04 1.44-.65.35-1.83.16Zm32.41-4.75-1.2 7.08q1.13-.24 2.16-.34 1.04-.11 2-.11 2.68 0 4.73.8 2.04.8 3.43 2.21 1.38 1.41 2.09 3.3.7 1.89.7 4.08 0 2.7-.95 4.93-.95 2.23-2.64 3.82-1.69 1.59-4.01 2.46-2.31.87-5.04.87-1.6 0-3.03-.33-1.44-.33-2.69-.88-1.26-.56-2.33-1.27-1.07-.72-1.91-1.52l1.78-2.47q.57-.8 1.48-.8.59 0 1.2.38t1.4.82q.79.45 1.86.83 1.06.37 2.57.37 1.6 0 2.82-.52 1.22-.51 2.03-1.44.81-.93 1.22-2.21.41-1.28.41-2.78 0-2.78-1.61-4.34-1.6-1.56-4.75-1.56-2.42 0-4.96.89l-3.62-1.03 2.82-16.5h16.78v2.47q0 1.24-.78 2.02-.77.77-2.63.77h-9.33ZM280.47 175q0 4.44-.96 7.72-.95 3.28-2.63 5.42-1.68 2.13-3.97 3.18-2.29 1.05-4.95 1.05-2.65 0-4.92-1.05t-3.94-3.18q-1.66-2.14-2.6-5.42-.94-3.28-.94-7.72 0-4.47.94-7.73.94-3.27 2.6-5.41 1.67-2.14 3.94-3.18 2.27-1.05 4.92-1.05 2.66 0 4.95 1.05 2.29 1.04 3.97 3.18 1.68 2.14 2.63 5.41.96 3.26.96 7.73Zm-6 0q0-3.69-.54-6.11-.54-2.42-1.44-3.85-.91-1.44-2.08-2.01-1.18-.58-2.45-.58-1.24 0-2.4.58-1.17.57-2.06 2.01-.89 1.43-1.42 3.85-.53 2.42-.53 6.11 0 3.69.53 6.11.53 2.42 1.42 3.85.89 1.44 2.06 2.01 1.16.58 2.4.58 1.27 0 2.45-.58 1.17-.57 2.08-2.01.9-1.43 1.44-3.85.54-2.42.54-6.11Z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/features/collections/components/collection/collection.tsx b/frontend/src/features/collections/components/collection/collection.tsx
index 0c7dd8b..11b5290 100644
--- 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
index d41b602..20a257b 100644
--- 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 />;
 }