fix(nft): add controlled prop tokenAmount

hyperweb-io · Dec 14, 2023 · e9e59f6 · e9e59f6
1 parent 64a9370
commit e9e59f6
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 19 deletions.
diff --git a/packages/react/stories/nft/NftMint.stories.tsx b/packages/react/stories/nft/NftMint.stories.tsx
@@ -27,6 +27,7 @@ export const Primary: Story = {
     quantity: 5000,
     royalties: 10,
     minted: 46,
+    tokenAmount: 24,
     available: 2948,
     priceDisplayAmount: 64,
     limited: 50,

diff --git a/src/ui/nft-mint/nft-mint.lite.tsx b/src/ui/nft-mint/nft-mint.lite.tsx
@@ -33,12 +33,10 @@ useDefaultProps<Partial<NftMintProps>>({
 export default function NftMint(props: NftMintProps) {
   const state = useStore<{
     amount: number;
-    starsAmount: string;
     handleAmountChange: (value: number) => void;
     isControlled: () => boolean;
   }>({
     amount: 0,
-    starsAmount: "",
     isControlled() {
       return typeof props.amount !== "undefined";
     },
@@ -49,16 +47,6 @@ export default function NftMint(props: NftMintProps) {
       if (!state.isControlled()) {
         state.amount = value;
       }
-
-      let starsCount: BigNumber = new BigNumber(value).multipliedBy(
-        props.priceDisplayAmount
-      );
-
-      if (new BigNumber(value || 0).eq(0)) {
-        state.starsAmount = "";
-      } else {
-        state.starsAmount = starsCount.decimalPlaces(2).toString();
-      }
     },
   });
 
@@ -405,12 +393,11 @@ export default function NftMint(props: NftMintProps) {
               }}
             />
 
-            <Text
-              fontSize="$sm"
-              fontWeight="$semibold"
-            >{`${state.starsAmount} ${props.tokenName}`}</Text>
+            <Text fontSize="$sm" fontWeight="$semibold">{`${
+              props.tokenAmount ?? 0
+            } ${props.tokenName}`}</Text>
 
-            <Show when={props.notionalAmount != null}>
+            <Show when={!!props.notionalAmount}>
               <Text color="$textPlaceholder">{`≈ $${props.notionalAmount}`}</Text>
             </Show>
           </Stack>
@@ -466,9 +453,9 @@ export default function NftMint(props: NftMintProps) {
                 marginLeft: "$6",
                 marginRight: "$4",
               }}
-            >{`${state.starsAmount} ${props.tokenName}`}</Text>
+            >{`${props.tokenAmount ?? 0} ${props.tokenName}`}</Text>
 
-            <Show when={props.notionalAmount != null}>
+            <Show when={!!props.notionalAmount}>
               <Text color="$textSecondary">{`≈ $${props.notionalAmount}`}</Text>
             </Show>
           </Stack>

diff --git a/src/ui/nft-mint/nft-mint.types.tsx b/src/ui/nft-mint/nft-mint.types.tsx
@@ -18,6 +18,7 @@ export interface NftMintProps extends BaseComponentProps {
   // ==== Amount to bid for NFT
   amount?: number;
   defaultAmount?: number;
+  tokenAmount?: number;
   notionalAmount?: number;
   onChange?: (value: number) => void;
   onInput?: (event?: any) => void;