[SDK] Refactor: Ox Transaction Envelopes (#5546)

Co-authored-by: MananTank <[email protected]>
Co-authored-by: Phillip Ho <[email protected]>
Co-authored-by: Joaquim Verges <[email protected]>
Co-authored-by: Jonas Daniels <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Prithvish Baidya <[email protected]>
Co-authored-by: kien-ngo <[email protected]>

Author: 8 people

.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

@@ -9,7 +9,6 @@ import {
 } from "@/components/ui/sheet";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { Box, Flex, Link } from "@chakra-ui/react";
 import { useCsvUpload } from "hooks/useCsvUpload";
 import { CircleAlertIcon, DownloadIcon, UploadIcon } from "lucide-react";
 import { type Dispatch, type SetStateAction, useRef } from "react";
@@ -159,13 +158,7 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
               columns={columns}
             />
           ) : (
-            <Flex
-              flexGrow={1}
-              align="center"
-              overflow="auto"
-              gap={8}
-              flexDir="column"
-            >
+            <div className="flex grow flex-col items-center gap-8 overflow-auto">
               <div className="relative aspect-[21/9] w-full">
                 <div
                   className={cn(
@@ -204,29 +197,29 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                         addresses and their <InlineCode code="maxClaimable" />.
                         (amount each wallet is allowed to claim)
                         <br />
-                        <Link
+                        <a
+                          className="text-link-foreground hover:text-foreground"
                           download
-                          color="blue.500"
                           href="/snapshot-with-maxclaimable.csv"
                         >
                           <DownloadIcon className="inline size-3" /> Example
                           snapshot
-                        </Link>
+                        </a>
                       </li>
                       <li>
                         You may optionally add <InlineCode code="price" /> and
                         <InlineCode code="currencyAddress" /> overrides as well.
                         This lets you override the currency and price you would
                         like to charge per wallet you specified
                         <br />
-                        <Link
+                        <a
                           download
-                          color="blue.500"
+                          className="text-link-foreground hover:text-foreground"
                           href="/snapshot-with-overrides.csv"
                         >
                           <DownloadIcon className="inline size-3" /> Example
                           snapshot
-                        </Link>
+                        </a>
                       </li>
                     </>
                   ) : (
@@ -235,10 +228,14 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                         Files <em>must</em> contain one .csv file with a list of
                         addresses.
                         <br />
-                        <Link download color="blue.500" href="/snapshot.csv">
+                        <a
+                          download
+                          className="text-link-foreground hover:text-foreground"
+                          href="/snapshot.csv"
+                        >
                           <DownloadIcon className="inline size-3" /> Example
                           snapshot
-                        </Link>
+                        </a>
                       </li>
                       <li>
                         You may optionally add a{" "}
@@ -247,14 +244,14 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                         claim) If not specified, the default value is the one
                         you have set on your claim phase.
                         <br />
-                        <Link
+                        <a
                           download
-                          color="blue.500"
+                          className="text-link-foreground hover:text-foreground"
                           href="/snapshot-with-maxclaimable.csv"
                         >
                           <DownloadIcon className="inline size-3" /> Example
                           snapshot
-                        </Link>
+                        </a>
                       </li>
                       <li>
                         You may optionally add <InlineCode code="price" /> and
@@ -266,14 +263,14 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                           define a price override.
                         </strong>
                         <br />
-                        <Link
+                        <a
                           download
-                          color="blue.500"
+                          className="text-link-foreground hover:text-foreground"
                           href="/snapshot-with-overrides.csv"
                         >
                           <DownloadIcon className="inline size-3" /> Example
                           snapshot
-                        </Link>
+                        </a>
                       </li>
                     </>
                   )}
@@ -287,25 +284,12 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                   </li>
                 </UnorderedList>
               </div>
-            </Flex>
+            </div>
           )}
-          <Flex
-            align="center"
-            justify="space-between"
-            p={{ base: 0, md: 4 }}
-            flexDir={{ base: "column", md: "row" }}
-            mt={{ base: 4, md: 0 }}
-            borderTop="1px solid"
-            borderTopColor="borderColor"
-          >
-            <Box ref={paginationPortalRef} />
+          <div className="mt-4 flex flex-col items-center justify-between border-t p-0 md:mt-0 md:flex-row md:p-4">
+            <div ref={paginationPortalRef} />
             {!isDisabled && (
-              <Flex
-                gap={2}
-                align="center"
-                mt={{ base: 4, md: 0 }}
-                w={{ base: "100%", md: "auto" }}
-              >
+              <div className="mt-4 flex w-full flex-row items-center gap-2 md:mt-0 md:w-auto">
                 <Button
                   className="w-full rounded-md md:w-auto"
                   disabled={isDisabled || rawData.length === 0}
@@ -336,9 +320,9 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
                     Next
                   </Button>
                 )}
-              </Flex>
+              </div>
             )}
-          </Flex>
+          </div>
         </div>
       </SheetContent>
     </Sheet>

.changeset/wild-games-vanish.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>
   );
 };

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

@@ -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/snapshot-upload.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}