Various fixes to work with cupcake UI (#316)

* Various fixes to work with cupcake UI

* Usdc to 2 decimals

* Remove "NFTs"

* Better light mode minted nft

Author: ChewingGlass

packages/chat/src/generated/chat.ts

@@ -132,7 +132,7 @@ async function createLbcCandyMachine(
   const metadata = new DataV2({
     // Max name len 32
     name: "Candymachine Mint Token",
-    symbol: "NFTs",
+    symbol: "",
     uri: "",
     sellerFeeBasisPoints: 0,
     creators: null,

packages/marketplace-ui/src/components/form/LbcForm.tsx

@@ -20,7 +20,7 @@ import {
   useCurve,
   useSolanaUnixTime,
   useTokenSwapFromId,
-  useTokenMetadata,
+  useMetaplexTokenMetadata,
 } from "@strata-foundation/react";
 import React, { useEffect, useState } from "react";
 import { buildStyles, CircularProgressbar } from "react-circular-progressbar";
@@ -62,12 +62,14 @@ export const LbcInfo = ({
   const { isOpen, onToggle } = useDisclosure({
     defaultIsOpen: false,
   });
-  const { 
-    tokenBonding, 
+  const {
+    tokenBonding,
     numRemaining,
     loading: loadingBonding,
   } = useTokenSwapFromId(id);
-  const { price, loading: loadingPricing } = useLivePrice(tokenBonding?.publicKey);
+  const { price, loading: loadingPricing } = useLivePrice(
+    tokenBonding?.publicKey
+  );
   const { mintCap } = useCapInfo(
     tokenBonding?.publicKey,
     useTokenOfferingCurve
@@ -101,8 +103,10 @@ export const LbcInfo = ({
       ? tokenBonding.goLiveUnixTime.toNumber() < unixTime
       : false;
 
-  const { metadata } = useTokenMetadata(tokenBonding?.baseMint);
-  const { metadata: targetMeta } = useTokenMetadata(tokenBonding?.targetMint);
+  const { metadata } = useMetaplexTokenMetadata(tokenBonding?.baseMint);
+  const { metadata: targetMeta } = useMetaplexTokenMetadata(
+    tokenBonding?.targetMint
+  );
 
   const renderer = ({
     days,
@@ -187,6 +191,8 @@ export const LbcInfo = ({
                 <BigText>
                   {isNaN(priceToUse)
                     ? "Not Started"
+                    : metadata?.data.symbol === "USDC"
+                    ? `$${numberWithCommas(priceToUse, 2)}`
                     : `${numberWithCommas(priceToUse, 4)} ${
                         metadata?.data.symbol
                       }`}

packages/marketplace-ui/src/components/lbc/LbcInfo.tsx

@@ -3,13 +3,13 @@ import { ICandyMachineState } from "../../../hooks/useCandyMachineInfo";
 import { HStack, Text, VStack } from "@chakra-ui/react";
 import { NATIVE_MINT } from "@solana/spl-token";
 import { PublicKey } from "@solana/web3.js";
-import { useMint, useTokenMetadata } from "@strata-foundation/react";
+import { useMint, useMetaplexTokenMetadata } from "@strata-foundation/react";
 import { toNumber } from "@strata-foundation/spl-token-bonding";
 import { BigText, BlackBox } from "../LbcInfo";
 import * as anchor from "@project-serum/anchor";
 
 export const CandyMachineInfo = ({ candyMachine, itemsRemaining, isWhitelistUser, discountPrice }: ICandyMachineState) => {
-  const { metadata, loading: loadingMeta } = useTokenMetadata(
+  const { metadata, loading: loadingMeta } = useMetaplexTokenMetadata(
     candyMachine?.tokenMint
   );
   const ticker = loadingMeta ? "" : metadata?.data.symbol || "SOL";

packages/marketplace-ui/src/components/lbc/mint/CandyMachineInfo.tsx

@@ -8,6 +8,7 @@ import {
   Image,
   Skeleton,
   Text,
+  useColorModeValue,
   VStack,
 } from "@chakra-ui/react";
 import { PublicKey } from "@solana/web3.js";
@@ -27,12 +28,12 @@ export const MintedNftNotification = ({
   return (
     <Alert
       w="full"
-      bgColor="black.300"
+      bgColor={useColorModeValue("white", "black.300")}
       borderTop="1px"
       borderTopColor="gray.600"
       rounded="lg"
       fontFamily="body"
-      color="white"
+      color={useColorModeValue("black", "white")}
       status={"success"}
       flexDirection="column"
       p={0}
@@ -49,7 +50,16 @@ export const MintedNftNotification = ({
           />
         )}
       </Box>
-      <VStack align="left" w="full" p={8} spacing={1}>
+      <VStack
+        align="left"
+        w="full"
+        p={8}
+        spacing={1}
+        borderWidth="2px"
+        borderTopWidth={0}
+        borderBottomRadius="8px"
+        borderColor={useColorModeValue("gray.200", "black.300")}
+      >
         <HStack align="left" spacing={1}>
           <AlertTitle fontSize="24px" fontWeight={700}>
             Success!
@@ -59,16 +69,14 @@ export const MintedNftNotification = ({
         <Text color="gray.400">
           {loading
             ? "Waiting on your preview..."
-            : `Here is a preview of your NFT: ${
-                metadata ? metadata.data.name : ""
-              }`}
+            : `Here is a preview of ${metadata ? metadata.data.name : ""}`}
         </Text>
       </VStack>
       <CloseButton
         position="absolute"
         right="8px"
         top="8px"
-        color="gray.400"
+        color={useColorModeValue("gray.600", "gray.400")}
         _hover={{ color: "gray.600", cursor: "pointer" }}
         onClick={onDismiss}
       />

packages/marketplace-ui/src/components/lbc/mint/MintedNftNotification.tsx

@@ -422,6 +422,19 @@ export const mintOneToken = async (
     }
   }
 
+  // Close intermediary account
+  if (tokenBonding && (ataBalance || 0) == 1) {
+    instructions.push(
+      Token.createCloseAccountInstruction(
+        TOKEN_PROGRAM_ID,
+        userPayingAccountAddress,
+        payer,
+        payer,
+        []
+      )
+    );
+  }
+
   await sendMultipleInstructions(
     tokenBondingSdk.errors || new Map(),
     tokenBondingSdk.provider,

packages/marketplace-ui/src/components/lbc/mint/candy-machine.ts

@@ -93,27 +93,39 @@ export async function sendMultipleInstructions(
   const recentBlockhash = (
     await provider.connection.getRecentBlockhash("confirmed")
   ).blockhash;
-  const txns = instructionGroups
-    .map((instructions, index) => {
-      const signers = signerGroups[index];
-      if (instructions.length > 0) {
-        const tx = new Transaction({
-          feePayer: payer || provider.wallet.publicKey,
-          recentBlockhash,
-        });
-        tx.add(...instructions);
-        if (signers.length > 0) {
-          tx.partialSign(...signers);
-        }
+  const ixAndSigners = instructionGroups
+    .filter((instructions) => instructions.length > 0)
+    .map((instructions, i) => {
+      const signers = signerGroups[i];
+
+      return {
+        instructions,
+        signers,
+      };
+    });
+  const txns = ixAndSigners.map(({ instructions }) => {
+    const tx = new Transaction({
+      feePayer: payer || provider.wallet.publicKey,
+      recentBlockhash,
+    });
+
+    tx.add(...instructions);
+
+    return tx;
+  });
 
-        return tx;
+  const txnsSignedByWallet = (await provider.wallet.signAllTransactions(txns));
+  const txnsSigned = txnsSignedByWallet
+    .map((tx, index) => {
+      const signers = ixAndSigners[index].signers;
+
+      if (signers.length > 0) {
+        tx.partialSign(...signers);
       }
-    })
-    .filter(truthy);
 
-  const txnsSigned = (await provider.wallet.signAllTransactions(txns)).map(
-    (tx) => tx.serialize()
-  );
+      return tx;
+    })
+    .map((tx) => tx.serialize());
 
   console.log("Sending multiple transactions...");
   try {