Merge branch 'main' into yash/ref-constructor-params

Author: MananTank

.changeset/clever-carrots-march.md

@@ -0,0 +1,41 @@
+---
+"thirdweb": minor
+---
+
+Add 2 new Pay functions: convertFiatToCrypto and convertCryptoToFiat
+
+Examples:
+
+### Convert fiat (USD) to crypto
+```ts
+import { convertFiatToCrypto } from "thirdweb/pay";
+import { ethereum } from "thirdweb/chains";
+
+// Convert 2 cents to ETH
+const result = await convertFiatToCrypto({
+  from: "USD",
+  // the token address. For native token, use NATIVE_TOKEN_ADDRESS
+  to: "0x...",
+  // the chain (of the chain where the token belong to)
+  chain: ethereum,
+  // 2 cents
+  fromAmount: 0.02,
+});
+// Result: 0.0000057 (a number)
+```
+
+### Convert crypto to fiat (USD)
+
+```ts
+import { convertCryptoToFiat } from "thirdweb/pay";
+
+// Get Ethereum price
+const result = convertCryptoToFiat({
+  fromTokenAddress: NATIVE_TOKEN_ADDRESS,
+  to: "USD",
+  chain: ethereum,
+  fromAmount: 1,
+});
+
+// Result: 3404.11 (number)
+```

.changeset/pink-ducks-flash.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Handle 0 value for maxPriorityFeePerGas in 712 transactions

.changeset/selfish-deers-destroy.md

@@ -1,6 +1,6 @@
+import { Button } from "@/components/ui/button";
 import { Box, Flex, Select } from "@chakra-ui/react";
 import { UploadIcon } from "lucide-react";
-import { Button, Text } from "tw-components";
 import { useClaimConditionsFormContext } from "..";
 import { CustomFormControl } from "../common";
 
@@ -115,13 +115,13 @@ export const ClaimerSelection = () => {
           >
             {/* disable the "Edit" button when form is disabled, but not when it's a "See" button */}
             <Button
-              colorScheme="purple"
-              isDisabled={disabledSnapshotButton}
-              borderRadius="md"
+              variant="primary"
+              disabled={disabledSnapshotButton}
+              className="gap-2 rounded-md"
               onClick={() => setOpenIndex(phaseIndex)}
-              rightIcon={<UploadIcon className="size-4" />}
             >
               {isAdmin ? "Edit" : "See"} Claimer Snapshot
+              <UploadIcon className="size-4" />
             </Button>
 
             <Flex
@@ -136,14 +136,14 @@ export const ClaimerSelection = () => {
               }}
               ml={2}
             >
-              <Text size="body.sm" color="inherit">
+              <p>
                 ●{" "}
                 <strong>
                   {field.snapshot?.length} address
                   {field.snapshot?.length === 1 ? "" : "es"}
                 </strong>{" "}
                 in snapshot
-              </Text>
+              </p>
             </Flex>
           </Flex>
         ) : (

.changeset/stupid-buses-wink.md

@@ -2,7 +2,6 @@
 
 import { useWalletNFTs } from "@3rdweb-sdk/react";
 import type { ThirdwebContract } from "thirdweb";
-import { Text } from "tw-components";
 import { NFTCards } from "../../_components/NFTCards";
 
 interface NftsOwnedProps {
@@ -35,8 +34,8 @@ export const NftsOwned: React.FC<NftsOwnedProps> = ({ contract }) => {
       trackingCategory="account_nfts_owned"
     />
   ) : isWalletNFTsLoading ? null : error ? (
-    <Text>Failed to fetch NFTs for this account: {error}</Text>
+    <p>Failed to fetch NFTs for this account: {error}</p>
   ) : (
-    <Text>This account doesn&apos;t own any NFTs.</Text>
+    <p>This account doesn&apos;t own any NFTs.</p>
   );
 };

.changeset/wild-games-vanish.md

@@ -1,5 +1,7 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import { Tooltip } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import type { ThirdwebContract } from "thirdweb";
@@ -9,7 +11,6 @@ import {
   useReadContract,
   useSendAndConfirmTransaction,
 } from "thirdweb/react";
-import { Button, Card, Text } from "tw-components";
 
 interface CreateAccountButtonProps {
   contract: ThirdwebContract;
@@ -51,8 +52,8 @@ export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({
     return (
       <Tooltip
         label={
-          <Card py={2} px={4} bgColor="backgroundHighlight">
-            <Text>You can only initialize one account per EOA.</Text>
+          <Card className="bg-card px-4 py-2">
+            <p>You can only initialize one account per EOA.</p>
           </Card>
         }
         bg="transparent"
@@ -62,7 +63,7 @@ export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({
         placement="right"
         shouldWrapChildren
       >
-        <Button colorScheme="primary" isDisabled>
+        <Button variant="primary" disabled>
           Account Created
         </Button>
       </Tooltip>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import {
   Sheet,
   SheetContent,
@@ -18,7 +19,6 @@ import type { ThirdwebContract } from "thirdweb";
 import { multicall } from "thirdweb/extensions/common";
 import { balanceOf, encodeSafeTransferFrom } from "thirdweb/extensions/erc1155";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
-import { Button, Text } from "tw-components";
 import {
   type AirdropAddressInput,
   AirdropUpload,
@@ -118,12 +118,8 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
             <Flex direction={{ base: "column", md: "row" }} gap={4}>
               <Sheet open={open} onOpenChange={setOpen}>
                 <SheetTrigger asChild>
-                  <Button
-                    colorScheme="primary"
-                    borderRadius="md"
-                    rightIcon={<UploadIcon className="size-5" />}
-                  >
-                    Upload addresses
+                  <Button variant="primary" className="rounded-md">
+                    Upload addresses <UploadIcon className="mr-2 size-5" />
                   </Button>
                 </SheetTrigger>
                 <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
@@ -149,18 +145,18 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
                 color={addresses.length === 0 ? "orange.500" : "green.500"}
               >
                 {addresses.length > 0 && (
-                  <Text size="body.sm" color="inherit">
+                  <p>
                     ● <strong>{addresses.length} addresses</strong> ready to be
                     airdropped
-                  </Text>
+                  </p>
                 )}
               </Flex>
             </Flex>
           </div>
-          <Text>
+          <p>
             You can airdrop to a maximum of 250 addresses at a time. If you have
             more, please do it in multiple transactions.
-          </Text>
+          </p>
           <TransactionButton
             txChainID={contract.chain.id}
             transactionCount={1}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/nfts-owned.tsx

@@ -27,7 +27,7 @@ import type { ThirdwebContract } from "thirdweb";
 import { getNFT as getErc721NFT } from "thirdweb/extensions/erc721";
 import { getNFT as getErc1155NFT } from "thirdweb/extensions/erc1155";
 import { useReadContract } from "thirdweb/react";
-import { Button, Card, Heading, Text } from "tw-components";
+import { Button, Card } from "tw-components";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import { shortenString } from "utils/usedapp-external";
 import { NftProperty } from "../components/nft-property";
@@ -103,10 +103,10 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
 
   if (!nft) {
     return (
-      <Text>
+      <p>
         No NFT found with token ID {tokenId}. Please check the token ID and try
         again.
-      </Text>
+      </p>
     );
   }
 
@@ -181,7 +181,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                   label={
                     tb.isDisabled ? (
                       <Card py={2} px={4} bgColor="backgroundHighlight">
-                        <Text size="label.sm">{tb.disabledText}</Text>
+                        <p>{tb.disabledText}</p>
                       </Card>
                     ) : (
                       ""
@@ -213,7 +213,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
             <Card as={Flex} flexDir="column" gap={3}>
               <SimpleGrid rowGap={3} columns={12} placeItems="center left">
                 <GridItem colSpan={4}>
-                  <Heading size="label.md">Token ID</Heading>
+                  <p className="font-semibold">Token ID</p>
                 </GridItem>
                 <GridItem colSpan={8}>
                   <CopyTextButton
@@ -227,31 +227,29 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                 {nft.owner && (
                   <>
                     <GridItem colSpan={4}>
-                      <Heading size="label.md">Owner</Heading>
+                      <p className="font-semibold">Owner</p>
                     </GridItem>
                     <GridItem colSpan={8}>
                       <WalletAddress address={nft.owner} />
                     </GridItem>
                   </>
                 )}
                 <GridItem colSpan={4}>
-                  <Heading size="label.md">Token Standard</Heading>
+                  <p className="font-semibold">Token Standard</p>
                 </GridItem>
                 <GridItem colSpan={8}>{nft.type}</GridItem>
                 {nft.type !== "ERC721" && (
                   <>
                     <GridItem colSpan={4}>
-                      <Heading size="label.md">Supply</Heading>
+                      <p className="font-semibold">Supply</p>
                     </GridItem>
                     <GridItem colSpan={8}>
-                      <Text fontFamily="mono" size="body.md">
-                        {nft.supply.toString()}
-                      </Text>
+                      <p>{nft.supply.toLocaleString("en-US")}</p>
                     </GridItem>
                   </>
                 )}
                 <GridItem colSpan={4}>
-                  <Heading size="label.md">Token URI</Heading>
+                  <p className="font-semibold">Token URI</p>
                 </GridItem>
                 <GridItem
                   colSpan={8}
@@ -274,7 +272,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                 {nft.metadata.image && (
                   <>
                     <GridItem colSpan={4}>
-                      <Heading size="label.md">Media URI</Heading>
+                      <p className="font-semibold">Media URI</p>
                     </GridItem>
                     <GridItem
                       colSpan={8}
@@ -300,7 +298,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
             </Card>
             {properties ? (
               <Card as={Flex} flexDir="column" gap={4}>
-                <Heading size="label.md">Attributes</Heading>
+                <p className="font-semibold">Attributes</p>
                 {Array.isArray(properties) &&
                 String(properties[0]?.value) !== "undefined" ? (
                   <SimpleGrid columns={{ base: 2, md: 4 }} gap={2}>