diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/cancel-tab.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/cancel-tab.tsx index 3e9580888bb..a6f82c01472 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/cancel-tab.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/cancel-tab.tsx @@ -31,7 +31,7 @@ export const CancelTab: React.FC = ({ { trackEvent({ category: "marketplace", @@ -64,8 +64,7 @@ export const CancelTab: React.FC = ({ error: "Failed to cancel", }); }} - colorScheme="primary" - alignSelf="flex-end" + className="self-end" > Cancel {isAuction ? "Auction" : "Listing"} diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx index 50507f5b34a..92135cc75e9 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx @@ -537,11 +537,10 @@ export const CreateListingsForm: React.FC = ({ {actionText} diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx index bb96c9372d7..e7d291a561f 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx @@ -646,16 +646,15 @@ export const ClaimConditionsForm: React.FC = ({ hasRemovedPhases || !isMultiPhase ? ( - Save Phases + {claimConditionsQuery.isPending + ? "Saving Phases" + : "Save Phases"} ) : null} diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/reset-claim-eligibility.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/reset-claim-eligibility.tsx index 81d93adaaf1..50e1b0cf12f 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/reset-claim-eligibility.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/reset-claim-eligibility.tsx @@ -91,26 +91,31 @@ export const ResetClaimEligibility: React.FC = ({ - Reset Eligibility - - This {`contract's`} claim eligibility stores who has already - claimed {isErc20 ? "tokens" : "NFTs"} from this contract and - carries across claim phases. Resetting claim eligibility will - reset this state permanently, and wallets that have already - claimed to their limit will be able to claim again. - - } - > - - + {sendTxMutation.isPending ? ( + "Resetting Eligibility" + ) : ( +
+ Reset Eligibility + + This {`contract's`} claim eligibility stores who has already + claimed {isErc20 ? "tokens" : "NFTs"} from this contract and + carries across claim phases. Resetting claim eligibility will + reset this state permanently, and wallets that have already + claimed to their limit will be able to claim again. + + } + > + + +
+ )} ); diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx index f691883f234..2a6511a81a4 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx @@ -48,11 +48,10 @@ export const DepositNative: React.FC = ({ { if (!address) { throw new Error("Invalid address"); diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx index cf6626210d4..8c8f99a9918 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx @@ -73,7 +73,6 @@ export const CreateAccountButton: React.FC = ({ return ( { const tx = ERC4337Ext.createAccount({ contract, @@ -82,9 +81,9 @@ export const CreateAccountButton: React.FC = ({ }); sendTxMutation.mutate(tx); }} - isLoading={sendTxMutation.isPending} + isPending={sendTxMutation.isPending} transactionCount={1} - isDisabled={isAccountDeployedQuery.data} + disabled={isAccountDeployedQuery.data} {...restButtonProps} > Create Account diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx index d2d24c6da12..8373ec570f6 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/BatchMetadata.tsx @@ -264,10 +264,9 @@ function UploadMetadataNFTSection(props: { className="min-w-24" disabled={uploadMetadataMutation.isPending} type="submit" - isLoading={uploadMetadataMutation.isPending} + isPending={uploadMetadataMutation.isPending} txChainID={props.contractChainId} transactionCount={1} - colorScheme="primary" > Upload diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx index 3fae3031aec..643569d6ad8 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx @@ -720,10 +720,9 @@ function ClaimConditionSection(props: { className="min-w-24" disabled={updateMutation.isPending || !props.isOwnerAccount} type="submit" - isLoading={updateMutation.isPending} + isPending={updateMutation.isPending} txChainID={props.chainId} transactionCount={1} - colorScheme="primary" > Update @@ -805,10 +804,9 @@ function PrimarySaleRecipientSection(props: { !form.formState.isDirty } type="submit" - isLoading={updateMutation.isPending} + isPending={updateMutation.isPending} txChainID={props.contractChainId} transactionCount={1} - colorScheme="primary" > Update @@ -917,10 +915,9 @@ function MintNFTSection(props: { className="min-w-24 gap-2" disabled={mintMutation.isPending} type="submit" - isLoading={mintMutation.isPending} + isPending={mintMutation.isPending} txChainID={props.contractChainId} transactionCount={1} - colorScheme="primary" > Mint diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx index 799e0dd211f..32a639e2e1b 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Mintable.tsx @@ -314,8 +314,7 @@ function PrimarySalesSection(props: { className="min-w-24" disabled={updateMutation.isPending || !props.isOwnerAccount} type="submit" - isLoading={updateMutation.isPending} - colorScheme="primary" + isPending={updateMutation.isPending} transactionCount={1} txChainID={props.contractChainId} > @@ -529,8 +528,7 @@ function MintNFTSection(props: { className="min-w-24" disabled={mintMutation.isPending} type="submit" - isLoading={mintMutation.isPending} - colorScheme="primary" + isPending={mintMutation.isPending} txChainID={props.contractChainId} transactionCount={1} > diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx index f0a15b15879..8ae9666803f 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx @@ -385,11 +385,10 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => { diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Royalty.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Royalty.tsx index d158f504367..22f0043b3a6 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Royalty.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Royalty.tsx @@ -347,8 +347,7 @@ function RoyaltyInfoPerTokenSection(props: { className="min-w-24" disabled={setRoyaltyInfoForTokenMutation.isPending} type="submit" - isLoading={setRoyaltyInfoForTokenMutation.isPending} - colorScheme="primary" + isPending={setRoyaltyInfoForTokenMutation.isPending} transactionCount={1} txChainID={props.contractChainId} > @@ -450,9 +449,8 @@ function DefaultRoyaltyInfoSection(props: { className="min-w-24" disabled={updateMutation.isPending} type="submit" - colorScheme="primary" transactionCount={1} - isLoading={updateMutation.isPending} + isPending={updateMutation.isPending} txChainID={props.contractChainId} > Update @@ -527,8 +525,7 @@ function TransferValidatorSection(props: { className="min-w-24 gap-2" disabled={updateMutation.isPending} type="submit" - colorScheme="primary" - isLoading={updateMutation.isPending} + isPending={updateMutation.isPending} transactionCount={1} txChainID={props.contractChainId} > diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Transferable.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Transferable.tsx index 0b7738dead1..3c5f1bd3294 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Transferable.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Transferable.tsx @@ -191,8 +191,7 @@ export function TransferableModuleUI( !props.isOwnerAccount || !form.formState.isDirty } - isLoading={updateMutation.isPending} - colorScheme="primary" + isPending={updateMutation.isPending} transactionCount={ // if already restricted, only need to send the allowlist txs // else - need to send one more diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx index ccaac9711cc..807c3134664 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx @@ -1,5 +1,5 @@ -import { ChakraProviderSetup } from "@/components/ChakraProviderSetup"; import { Checkbox } from "@/components/ui/checkbox"; +import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet"; import type { Meta, StoryObj } from "@storybook/react"; import { useMutation } from "@tanstack/react-query"; import { useState } from "react"; @@ -7,7 +7,6 @@ import { Toaster, toast } from "sonner"; import { BadgeContainer, mobileViewport } from "stories/utils"; import { ZERO_ADDRESS } from "thirdweb"; import { ThirdwebProvider } from "thirdweb/react"; -import { CustomConnectWallet } from "../../../../../../../@3rdweb-sdk/react/components/connect-wallet"; import { ErrorProvider, type TransactionError, @@ -78,42 +77,39 @@ function Component() { version: "1.0.0", }; - // TODO - remove ChakraProviderSetup after converting the TransactionButton to tailwind+shadcn return ( - - -
-
- -
- -
- -
+ +
+
+ +
- - removeMutation.mutateAsync(), - isPending: removeMutation.isPending, - }} - isOwnerAccount={isOwner} - contractChainId={1} - /> - - +
+
- - + + + removeMutation.mutateAsync(), + isPending: removeMutation.isPending, + }} + isOwnerAccount={isOwner} + contractChainId={1} + /> + + +
+ ); } diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx index e26f9a8b851..f65fba1a88e 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx @@ -1,4 +1,3 @@ -import { ChakraProviderSetup } from "@/components/ChakraProviderSetup"; import { Checkbox } from "@/components/ui/checkbox"; import { Select, @@ -7,6 +6,7 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select"; +import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet"; import type { Meta, StoryObj } from "@storybook/react"; import { useMutation } from "@tanstack/react-query"; import { subDays } from "date-fns"; @@ -16,7 +16,6 @@ import { mobileViewport } from "stories/utils"; import { NATIVE_TOKEN_ADDRESS, ZERO_ADDRESS } from "thirdweb"; import { ThirdwebProvider } from "thirdweb/react"; import { checksumAddress } from "thirdweb/utils"; -import { CustomConnectWallet } from "../../../../../../../@3rdweb-sdk/react/components/connect-wallet"; import { type ClaimConditionFormValues, type ClaimConditionValue, @@ -108,100 +107,97 @@ function Component() { version: "1.0.0", }; - // Todo - remove chakra provider after converting Transaction Button return ( - - -
-
- -
- -
- - - - - - - - - -
- - removeMutation.mutateAsync(), - isPending: removeMutation.isPending, - }} - isOwnerAccount={isOwner} - name={name} - contractChainId={1} - setTokenId={setTokenId} - isValidTokenId={true} - noClaimConditionSet={noClaimConditionSet} + +
+
+ +
+ +
+ + + + + - + + +
- - + + removeMutation.mutateAsync(), + isPending: removeMutation.isPending, + }} + isOwnerAccount={isOwner} + name={name} + contractChainId={1} + setTokenId={setTokenId} + isValidTokenId={true} + noClaimConditionSet={noClaimConditionSet} + /> + + +
+ ); } diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/mintable.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/mintable.stories.tsx index d9abbc9c8f9..785c6ef509a 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/mintable.stories.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/mintable.stories.tsx @@ -1,6 +1,4 @@ "use client"; - -import { ChakraProviderSetup } from "@/components/ChakraProviderSetup"; import { Checkbox } from "@/components/ui/checkbox"; import { Select, @@ -9,13 +7,13 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select"; +import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet"; import type { Meta, StoryObj } from "@storybook/react"; import { useMutation } from "@tanstack/react-query"; import { useState } from "react"; import { Toaster, toast } from "sonner"; import { BadgeContainer, mobileViewport } from "stories/utils"; import { ThirdwebProvider } from "thirdweb/react"; -import { CustomConnectWallet } from "../../../../../../../@3rdweb-sdk/react/components/connect-wallet"; import { type MintFormValues, MintableModuleUI, @@ -81,104 +79,100 @@ function Component() { version: "1.0.0", }; - // TODO - remove ChakraProviderSetup after converting the TransactionButton to tailwind+shadcn - return ( - - -
-
- -
- -
- - - - - -
- - - removeMutation.mutateAsync(), - isPending: removeMutation.isPending, - }} - isOwnerAccount={isOwner} - name={name} - isBatchMetadataInstalled={isBatchMetadataInstalled} - contractChainId={1} - /> - - - - removeMutation.mutateAsync(), - isPending: removeMutation.isPending, - }} - isOwnerAccount={isOwner} - name={name} - isBatchMetadataInstalled={isBatchMetadataInstalled} - contractChainId={1} - /> - - - - removeMutation.mutateAsync(), - isPending: removeMutation.isPending, - }} - isOwnerAccount={isOwner} - name={name} - isBatchMetadataInstalled={isBatchMetadataInstalled} - contractChainId={1} - /> - - - + +
+
+ +
+ +
+ + + + +
- - + + + removeMutation.mutateAsync(), + isPending: removeMutation.isPending, + }} + isOwnerAccount={isOwner} + name={name} + isBatchMetadataInstalled={isBatchMetadataInstalled} + contractChainId={1} + /> + + + + removeMutation.mutateAsync(), + isPending: removeMutation.isPending, + }} + isOwnerAccount={isOwner} + name={name} + isBatchMetadataInstalled={isBatchMetadataInstalled} + contractChainId={1} + /> + + + + removeMutation.mutateAsync(), + isPending: removeMutation.isPending, + }} + isOwnerAccount={isOwner} + name={name} + isBatchMetadataInstalled={isBatchMetadataInstalled} + contractChainId={1} + /> + + + +
+ ); } diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx index bd79ed09686..cd11cbcd0da 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx @@ -160,9 +160,9 @@ export function ModuleCard(props: ModuleCardProps) { Uninstall diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx index 21e90d3b78f..3f97c5e5c0b 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx @@ -1,12 +1,11 @@ -import { ChakraProviderSetup } from "@/components/ChakraProviderSetup"; import { Checkbox } from "@/components/ui/checkbox"; +import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet"; import type { Meta, StoryObj } from "@storybook/react"; import { useMutation } from "@tanstack/react-query"; import { useState } from "react"; import { Toaster, toast } from "sonner"; import { BadgeContainer, mobileViewport } from "stories/utils"; import { ThirdwebProvider } from "thirdweb/react"; -import { CustomConnectWallet } from "../../../../../../../@3rdweb-sdk/react/components/connect-wallet"; import { OpenEditionMetadataModuleUI, type SetSharedMetadataFormValues, @@ -63,45 +62,43 @@ function Component() { return ( - -
-
- -
+
+
+ +
-
- setIsOwner(!!v)} - /> -
- -
+
+ setIsOwner(!!v)} + /> +
+
+
- - removeMutation.mutateAsync(), - isPending: removeMutation.isPending, - }} - isOwnerAccount={isOwner} - contractChainId={1} - /> - + + removeMutation.mutateAsync(), + isPending: removeMutation.isPending, + }} + isOwnerAccount={isOwner} + contractChainId={1} + /> + - -
- + +
); } diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx index 0dd78267035..06798c8c776 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx @@ -1,12 +1,11 @@ -import { ChakraProviderSetup } from "@/components/ChakraProviderSetup"; import { Checkbox } from "@/components/ui/checkbox"; +import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet"; import type { Meta, StoryObj } from "@storybook/react"; import { useMutation } from "@tanstack/react-query"; import { useState } from "react"; import { Toaster, toast } from "sonner"; import { BadgeContainer, mobileViewport } from "stories/utils"; import { ThirdwebProvider } from "thirdweb/react"; -import { CustomConnectWallet } from "../../../../../../../@3rdweb-sdk/react/components/connect-wallet"; import { type DefaultRoyaltyFormValues, type RoyaltyInfoFormValues, @@ -75,101 +74,97 @@ function Component() { version: "1.0.0", }; - // TODO - remove ChakraProviderSetup after converting the TransactionButton to tailwind+shadcn - return ( - - -
-
- -
- -
- -
- - - removeMutation.mutateAsync(), - isPending: removeMutation.isPending, - }} - isOwnerAccount={isOwner} - contractChainId={1} - /> - - - - removeMutation.mutateAsync(), - isPending: removeMutation.isPending, - }} - isOwnerAccount={isOwner} - contractChainId={1} - /> - - - - removeMutation.mutateAsync(), - isPending: removeMutation.isPending, - }} - isOwnerAccount={isOwner} - contractChainId={1} - /> - - - - removeMutation.mutateAsync(), - isPending: removeMutation.isPending, - }} - isOwnerAccount={isOwner} - contractChainId={1} - /> - - - + +
+
+ +
+ +
+
- - + + + removeMutation.mutateAsync(), + isPending: removeMutation.isPending, + }} + isOwnerAccount={isOwner} + contractChainId={1} + /> + + + + removeMutation.mutateAsync(), + isPending: removeMutation.isPending, + }} + isOwnerAccount={isOwner} + contractChainId={1} + /> + + + + removeMutation.mutateAsync(), + isPending: removeMutation.isPending, + }} + isOwnerAccount={isOwner} + contractChainId={1} + /> + + + + removeMutation.mutateAsync(), + isPending: removeMutation.isPending, + }} + isOwnerAccount={isOwner} + contractChainId={1} + /> + + + +
+ ); } diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx index 6b629d84f25..3f81a7a4308 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx @@ -5,7 +5,6 @@ import { useState } from "react"; import { Toaster, toast } from "sonner"; import { BadgeContainer, mobileViewport } from "stories/utils"; import { ThirdwebProvider } from "thirdweb/react"; -import { ChakraProviderSetup } from "../../../../../../../@/components/ChakraProviderSetup"; import { type TransferableModuleFormValues, TransferableModuleUI, @@ -63,79 +62,77 @@ function Component() { }; return ( - - -
-
- setIsOwner(!!v)} - /> -
- -
+ +
+
+ setIsOwner(!!v)} + /> +
+
+
- - removeMutation.mutateAsync(), - isPending: removeMutation.isPending, - }} - isOwnerAccount={isOwner} - contractChainId={1} - /> - + + removeMutation.mutateAsync(), + isPending: removeMutation.isPending, + }} + isOwnerAccount={isOwner} + contractChainId={1} + /> + - - removeMutation.mutateAsync(), - isPending: removeMutation.isPending, - }} - isOwnerAccount={isOwner} - contractChainId={1} - /> - + + removeMutation.mutateAsync(), + isPending: removeMutation.isPending, + }} + isOwnerAccount={isOwner} + contractChainId={1} + /> + - - removeMutation.mutateAsync(), - isPending: removeMutation.isPending, - }} - isOwnerAccount={isOwner} - contractChainId={1} - /> - + + removeMutation.mutateAsync(), + isPending: removeMutation.isPending, + }} + isOwnerAccount={isOwner} + contractChainId={1} + /> + - -
- - + +
+ ); } diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx index d010079b64d..b9383d86e1d 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx @@ -118,8 +118,8 @@ const AirdropTab: React.FC = ({ contract, tokenId }) => { - @@ -160,12 +160,12 @@ const AirdropTab: React.FC = ({ contract, tokenId }) => { Airdrop diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/burn-tab.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/burn-tab.tsx index 2b107ff8bf7..73f1b8cfee0 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/burn-tab.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/burn-tab.tsx @@ -130,11 +130,10 @@ const BurnTab: React.FC = ({ contract, tokenId }) => { )} Burn diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/claim-tab.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/claim-tab.tsx index a91e79e68e5..33fad66c1ee 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/claim-tab.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/claim-tab.tsx @@ -53,7 +53,6 @@ const ClaimTabERC1155: React.FC = ({ contract, tokenId }) => { if (approveTx) { const approvalPromise = sendAndConfirmTx.mutateAsync(approveTx); toast.promise(approvalPromise, { - loading: "Approving ERC20 token for this claim", success: "Approved succesfully", error: "Failed to approve ERC20", }); @@ -122,10 +121,9 @@ const ClaimTabERC1155: React.FC = ({ contract, tokenId }) => { Claim diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/mint-supply-tab.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/mint-supply-tab.tsx index 5512aa16857..fd4c94ed3cf 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/mint-supply-tab.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/mint-supply-tab.tsx @@ -123,10 +123,9 @@ const MintSupplyTab: React.FC = ({ contract, tokenId }) => { Mint diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/transfer-tab.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/transfer-tab.tsx index 2088b31c4e0..79a1c964a90 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/transfer-tab.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/transfer-tab.tsx @@ -121,11 +121,10 @@ const TransferTab: React.FC = ({ contract, tokenId }) => { diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx index 7cae7f32e0a..c1e3d8c71a7 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/update-metadata-form.tsx @@ -235,7 +235,6 @@ export const UpdateNftMetadata: React.FC = ({ }); toast.promise(promise, { - loading: "Updating NFT metadata", error: "Failed to update NFT metadata", success: "NFT metadata updated successfully", }); @@ -389,11 +388,10 @@ export const UpdateNftMetadata: React.FC = ({ Update NFT diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/claim-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/claim-button.tsx index ead7061bab0..e9f231c050d 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/claim-button.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/claim-button.tsx @@ -84,9 +84,8 @@ export const NFTClaimButton: React.FC = ({ contract }) => { txChainID={contract.chain.id} transactionCount={1} form={CLAIM_FORM_ID} - isLoading={formState.isSubmitting} + isPending={formState.isSubmitting} type="submit" - colorScheme="primary" onClick={handleSubmit(async (d) => { try { trackEvent({ diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx index 2e382a89d52..6d28ef08b99 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/lazy-mint-form.tsx @@ -323,11 +323,10 @@ export const LazyMintNftForm: React.FC = ({ Lazy Mint NFT diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx index 0870ea98d81..3fb6b234eab 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/mint-form.tsx @@ -347,11 +347,10 @@ export const NFTMintForm: React.FC = ({ Mint NFT diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx index 5e3a0a3ade4..c0f6fa50a9c 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/reveal-button.tsx @@ -129,11 +129,10 @@ export const NFTRevealButton: React.FC = ({ Reveal NFTs diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx index 0b978e69c6e..29a6159ce4a 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/shared-metadata-form.tsx @@ -277,11 +277,10 @@ export const SharedMetadataForm: React.FC<{ Set NFT Metadata diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/index.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/index.tsx index 9188b943b14..23fcbddae2c 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/index.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/index.tsx @@ -125,14 +125,12 @@ export function Permissions({ - Update permissions + {sendTx.isPending ? "Updating permissions" : "Update permissions"} diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/delegate-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/delegate-button.tsx index 04718698b25..41720fe74cf 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/delegate-button.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/delegate-button.tsx @@ -62,7 +62,7 @@ export const DelegateButton: React.FC = ({ contract }) => { }, ); }} - isLoading={delgateMutation.isPending} + isPending={delgateMutation.isPending} > Delegate Tokens diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal-button.tsx index e2eadfe9a23..74bfb275494 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal-button.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal-button.tsx @@ -104,10 +104,9 @@ export const ProposalButton: React.FC = ({ contract }) => { Submit diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal.tsx index 25f43efea44..4edc319c707 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal.tsx @@ -139,37 +139,41 @@ export const Proposal: React.FC = ({ proposal, contract }) => { txChainID={contract.chain.id} size="sm" transactionCount={1} - rightIcon={} onClick={() => castVote(1)} - colorScheme="green" - isDisabled={sendTx.isPending && voteType !== 1} - isLoading={sendTx.isPending && voteType === 1} + disabled={sendTx.isPending && voteType !== 1} + isPending={sendTx.isPending && voteType === 1} > - Approve +
+ + Approve +
} onClick={() => castVote(0)} - colorScheme="red" - isDisabled={sendTx.isPending && voteType !== 0} - isLoading={sendTx.isPending && voteType === 0} + variant="destructive" + disabled={sendTx.isPending && voteType !== 0} + isPending={sendTx.isPending && voteType === 0} > - Against +
+ + Against +
} onClick={() => castVote(2)} - isDisabled={sendTx.isPending && voteType !== 2} - isLoading={sendTx.isPending && voteType === 2} + disabled={sendTx.isPending && voteType !== 2} + isPending={sendTx.isPending && voteType === 2} > - Abstain +
+ + Abstain +
) : ( diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx index 9ab1b93ba3a..8730b209111 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx @@ -329,18 +329,15 @@ export const SettingsMetadata = ({ - Update Metadata + {sendTransaction.isPending + ? "Updating Metadata" + : "Update Metadata"} diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx index cd9305fc731..962f6278e0a 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx @@ -176,18 +176,15 @@ export const SettingsPlatformFees = ({ - Update Platform Fee Settings + {sendAndConfirmTx.isPending + ? "Updating Platform Fee Settings" + : "Update Platform Fee Settings"} diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx index 2d50becc1ce..54739479b01 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx @@ -143,18 +143,15 @@ export const SettingsPrimarySale = ({ - Update Primary Sale Settings + {mutation.isPending + ? "Updating Primary Sale Settings" + : "Update Primary Sale Settings"} diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx index 543589b8afc..00c1bfd3066 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx @@ -183,18 +183,15 @@ export const SettingsRoyalties = ({ - Update Royalty Settings + {mutation.isPending + ? "Updating Royalty Settings" + : "Update Royalty Settings"} diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/components/distribute-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/components/distribute-button.tsx index cae2c740b3f..cbfc2a19a7c 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/components/distribute-button.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/components/distribute-button.tsx @@ -2,7 +2,6 @@ import { Button } from "@/components/ui/button"; import { useSplitDistributeFunds } from "@3rdweb-sdk/react/hooks/useSplit"; -import { MismatchButton } from "components/buttons/MismatchButton"; import { TransactionButton } from "components/buttons/TransactionButton"; import { useTrack } from "hooks/analytics/useTrack"; import { useTxNotifications } from "hooks/useTxNotifications"; @@ -73,18 +72,17 @@ export const DistributeButton: React.FC = ({ }; if (balancesIsError) { - // if we fail to get the balances, we can't know how many transactions there are going to be - // we still want to show the button, so we'll just show the mismatch button return ( - Distribute Funds - + ); } @@ -99,8 +97,7 @@ export const DistributeButton: React.FC = ({ return ( = ({ )} Airdrop diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/burn-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/burn-button.tsx index 312ef812354..b72cca71322 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/burn-button.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/burn-button.tsx @@ -98,10 +98,9 @@ export const TokenBurnButton: React.FC = ({ txChainID={contract.chain.id} transactionCount={1} form={BURN_FORM_ID} - isLoading={sendConfirmation.isPending} + isPending={sendConfirmation.isPending} type="submit" - colorScheme="primary" - isDisabled={!form.formState.isDirty} + disabled={!form.formState.isDirty} onClick={form.handleSubmit((data) => { if (address) { trackEvent({ diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/claim-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/claim-button.tsx index 2b0344a87e7..01be86757ad 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/claim-button.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/claim-button.tsx @@ -88,10 +88,9 @@ export const TokenClaimButton: React.FC = ({ txChainID={contract.chain.id} transactionCount={1} form={CLAIM_FORM_ID} - isLoading={form.formState.isSubmitting} + isPending={form.formState.isSubmitting} type="submit" - colorScheme="primary" - isDisabled={!form.formState.isDirty || isPending} + disabled={!form.formState.isDirty || isPending} onClick={form.handleSubmit(async (d) => { try { if (!d.to) { diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/mint-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/mint-button.tsx index 81f3200b348..754c3891b5c 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/mint-button.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/mint-button.tsx @@ -124,11 +124,10 @@ export const TokenMintButton: React.FC = ({ Mint Tokens diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/transfer-button.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/transfer-button.tsx index 0cb62134b22..17aaae5eda4 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/transfer-button.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/transfer-button.tsx @@ -101,10 +101,9 @@ export const TokenTransferButton: React.FC = ({ txChainID={contract.chain.id} transactionCount={1} form={TRANSFER_FORM_ID} - isLoading={sendConfirmation.isPending} + isPending={sendConfirmation.isPending} type="submit" - colorScheme="primary" - isDisabled={!form.formState.isDirty} + disabled={!form.formState.isDirty} onClick={form.handleSubmit((d) => { trackEvent({ category: "token", diff --git a/apps/dashboard/src/components/buttons/MismatchButton.tsx b/apps/dashboard/src/components/buttons/MismatchButton.tsx index 522c69836ac..df9ade91af6 100644 --- a/apps/dashboard/src/components/buttons/MismatchButton.tsx +++ b/apps/dashboard/src/components/buttons/MismatchButton.tsx @@ -2,7 +2,7 @@ import { DynamicHeight } from "@/components/ui/DynamicHeight"; import { Spinner } from "@/components/ui/Spinner/Spinner"; -import { Button as ButtonShadcn } from "@/components/ui/button"; +import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, @@ -10,20 +10,15 @@ import { DialogHeader, DialogTitle, } from "@/components/ui/dialog"; -import { useThirdwebClient } from "@/constants/thirdweb.client"; -import { cn } from "@/lib/utils"; -import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet"; import { - Box, Popover, - PopoverArrow, - PopoverBody, PopoverContent, PopoverTrigger, - useBreakpointValue, - useDisclosure, -} from "@chakra-ui/react"; -import { useQuery } from "@tanstack/react-query"; +} from "@/components/ui/popover"; +import { useThirdwebClient } from "@/constants/thirdweb.client"; +import { cn } from "@/lib/utils"; +import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet"; +import { useMutation, useQuery } from "@tanstack/react-query"; import { FaucetButton } from "app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton"; import { GiftIcon } from "app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/icons/GiftIcon"; import type { @@ -33,10 +28,11 @@ import type { import { getSDKTheme } from "app/components/sdk-component-theme"; import { LOCAL_NODE_PKEY } from "constants/misc"; import { useTrack } from "hooks/analytics/useTrack"; -import { ExternalLinkIcon, TriangleAlertIcon, UnplugIcon } from "lucide-react"; +import { ExternalLinkIcon, UnplugIcon } from "lucide-react"; import { useTheme } from "next-themes"; import Link from "next/link"; -import { forwardRef, useCallback, useMemo, useRef, useState } from "react"; +import type React from "react"; +import { forwardRef, useCallback, useRef, useState } from "react"; import { toast } from "sonner"; import { prepareTransaction, sendTransaction, toWei } from "thirdweb"; import { type Chain, type ChainMetadata, localhost } from "thirdweb/chains"; @@ -45,12 +41,10 @@ import { useActiveAccount, useActiveWallet, useActiveWalletChain, - useActiveWalletConnectionStatus, useSwitchActiveWalletChain, useWalletBalance, } from "thirdweb/react"; import { privateKeyToAccount } from "thirdweb/wallets"; -import { Button, type ButtonProps, Card, Heading, Text } from "tw-components"; import { getFaucetClaimAmount } from "../../app/api/testnet-faucet/claim/claim-amount"; import { THIRDWEB_API_HOST } from "../../constants/urls"; import { useAllChainsData } from "../../hooks/chains/allChains"; @@ -76,10 +70,15 @@ function useNetworkMismatchAdapter(desiredChainId: number) { return walletChainId !== desiredChainId; } +type MistmatchButtonProps = React.ComponentProps & { + desiredChainId: number; +}; + export const MismatchButton = forwardRef< HTMLButtonElement, - ButtonProps & { desiredChainId: number } ->(({ children, isDisabled, onClick, loadingText, type, ...props }, ref) => { + MistmatchButtonProps +>((props, ref) => { + const { desiredChainId, ...buttonProps } = props; const account = useActiveAccount(); const wallet = useActiveWallet(); const activeWalletChain = useActiveWalletChain(); @@ -92,9 +91,8 @@ export const MismatchButton = forwardRef< client, }); - const initialFocusRef = useRef(null); - const networksMismatch = useNetworkMismatchAdapter(props.desiredChainId); - const { isOpen, onOpen, onClose } = useDisclosure(); + const networksMismatch = useNetworkMismatchAdapter(desiredChainId); + const [isMismatchPopoverOpen, setIsMismatchPopoverOpen] = useState(false); const trackEvent = useTrack(); const chainId = activeWalletChain?.id; @@ -103,35 +101,42 @@ export const MismatchButton = forwardRef< useRef>(undefined); if (!wallet || !chainId) { + const connectWalletButtonClassName = cn( + props.className, + props.size === "sm" && "!py-2 !h-auto", + ); + return ( ); } const notEnoughBalance = (evmBalance.data?.value || 0n) === 0n && !GAS_FREE_CHAINS.includes(chainId); + return ( <> { + if (v) { + if (networksMismatch) { + setIsMismatchPopoverOpen(true); + } + } else { + setIsMismatchPopoverOpen(false); + } + }} > - + - - - - {networksMismatch && ( - { - onClose(); - if (hasSwitched && onClick) { - // wait for the network switch to be finished - 100ms should be fine? - setTimeout(() => { - if (eventRef.current) { - onClick(eventRef.current); - } - }, 100); - } - }} - /> - )} - - + + { + if (hasSwitched) { + setIsMismatchPopoverOpen(false); + } + }} + /> + {/* Not Enough Funds */} @@ -335,13 +320,13 @@ function NoFundsDialogContent(props: { (x) => x.enabled && x.service === "pay", ) ? ( // pay case - Buy Funds - + ) : // no funds options available null}
@@ -349,11 +334,11 @@ function NoFundsDialogContent(props: {
{/* Footer */}
- + - +
); @@ -404,13 +389,11 @@ function GetFundsFromFaucet(props: { } const MismatchNotice: React.FC<{ - initialFocusRef: React.RefObject; onClose: (hasSwitched: boolean) => void; desiredChainId: number; -}> = ({ initialFocusRef, onClose, desiredChainId }) => { +}> = ({ onClose, desiredChainId }) => { const connectedChainId = useActiveWalletChain()?.id; const switchNetwork = useSwitchActiveWalletChain(); - const connectionStatus = useActiveWalletConnectionStatus(); const activeWallet = useActiveWallet(); const actuallyCanAttemptSwitch = activeWallet && activeWallet.id !== "global.safe"; @@ -418,14 +401,16 @@ const MismatchNotice: React.FC<{ const walletConnectedNetworkInfo = connectedChainId ? idToChain.get(connectedChainId) : undefined; - const isMobile = useBreakpointValue({ base: true, md: false }); const chain = desiredChainId ? idToChain.get(desiredChainId) : undefined; const chainV5 = useV5DashboardChain(desiredChainId); + const switchNetworkMutation = useMutation({ + mutationFn: switchNetwork, + }); const onSwitchWallet = useCallback(async () => { if (actuallyCanAttemptSwitch && desiredChainId && chainV5) { try { - await switchNetwork(chainV5); + await switchNetworkMutation.mutateAsync(chainV5); onClose(true); } catch { // failed to switch network @@ -437,61 +422,53 @@ const MismatchNotice: React.FC<{ actuallyCanAttemptSwitch, desiredChainId, onClose, - switchNetwork, + switchNetworkMutation, ]); - const shortenedName = useMemo(() => { - const limit = isMobile ? 10 : 19; - - if (!chain?.name) { - return undefined; - } - return chain.name.length > limit - ? `${chain.name.slice(0, limit)}...` - : undefined; - }, [chain?.name, isMobile]); - return (
- -
- - Network Mismatch -
- - - - Your wallet is connected to the{" "} - - {walletConnectedNetworkInfo?.name} - {" "} - network but this action requires you to connect to the{" "} - - {chain?.name} - {" "} - network. - +
+

+ Network Mismatch +

+ +

+ Your wallet is connected to the{" "} + + {walletConnectedNetworkInfo?.name || + `Chain ID #${connectedChainId}`} + {" "} + network but this action requires you to connect to the{" "} + + {chain?.name || `Chain ID #${desiredChainId}`} + {" "} + network. +

+
{!actuallyCanAttemptSwitch && ( - +

Your connected wallet does not support programmatic switching.
Please manually switch the network in your wallet. - +

)}
); @@ -526,8 +503,8 @@ const GetLocalHostTestnetFunds: React.FC = () => { }; return ( - + ); }; diff --git a/apps/dashboard/src/components/buttons/TransactionButton.stories.tsx b/apps/dashboard/src/components/buttons/TransactionButton.stories.tsx new file mode 100644 index 00000000000..1277c186222 --- /dev/null +++ b/apps/dashboard/src/components/buttons/TransactionButton.stories.tsx @@ -0,0 +1,192 @@ +import { FormFieldSetup } from "@/components/blocks/FormFieldSetup"; +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { getThirdwebClient } from "@/constants/thirdweb.server"; +import type { Meta, StoryObj } from "@storybook/react"; +import { useMutation } from "@tanstack/react-query"; +import { StarIcon } from "lucide-react"; +import { useState } from "react"; +import { ConnectButton, ThirdwebProvider } from "thirdweb/react"; +import { mobileViewport } from "../../stories/utils"; +import { BadgeContainer } from "../../stories/utils"; +import { TransactionButton } from "./TransactionButton"; + +const meta = { + title: "blocks/TransactionButton", + component: Story, + parameters: { + nextjs: { + appDirectory: true, + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Desktop: Story = { + args: {}, +}; + +export const Mobile: Story = { + args: {}, + parameters: { + viewport: mobileViewport("iphone14"), + }, +}; + +function Story() { + const [chainId, setChainId] = useState(137); + + return ( + +
+ + + + +
+ +
+ + + + + + +
+ + Execute Tx +
+ + + +
+ + Execute Tx +
+ + + + + + + + + + + + + +
+ + ); +} + +function Variant(props: { + label: string; + transactionCount: number | undefined; + chainId: number; + variant?: "primary" | "destructive"; + className?: string; + size?: "sm"; + disabled?: boolean; + children?: React.ReactNode; +}) { + const sendTx = useMutation({ + mutationFn: async () => { + await new Promise((resolve) => setTimeout(resolve, 4000)); + }, + }); + + return ( + + { + sendTx.mutate(); + }} + transactionCount={props.transactionCount} + txChainID={props.chainId} + size={props.size} + > + {props.children || "Execute Tx"} + + + ); +} diff --git a/apps/dashboard/src/components/buttons/TransactionButton.tsx b/apps/dashboard/src/components/buttons/TransactionButton.tsx index 21c5032203e..c98155cca60 100644 --- a/apps/dashboard/src/components/buttons/TransactionButton.tsx +++ b/apps/dashboard/src/components/buttons/TransactionButton.tsx @@ -1,17 +1,17 @@ "use client"; -import { ToolTipLabel } from "@/components/ui/tooltip"; +import { Spinner } from "@/components/ui/Spinner/Spinner"; +import { Button } from "@/components/ui/button"; import { - Center, - Flex, Popover, - PopoverArrow, - PopoverBody, PopoverContent, PopoverTrigger, -} from "@chakra-ui/react"; +} from "@/components/ui/popover"; +import { ToolTipLabel } from "@/components/ui/tooltip"; +import { cn } from "@/lib/utils"; import { CHAIN_ID_TO_GNOSIS } from "constants/mappings"; import { useActiveChainAsDashboardChain } from "lib/v5-adapter"; -import { ArrowLeftRightIcon, InfoIcon } from "lucide-react"; +import { ArrowLeftRightIcon, ExternalLinkIcon } from "lucide-react"; +import Link from "next/link"; import { useEffect, useMemo, useRef, useState } from "react"; import { useActiveAccount, @@ -19,47 +19,35 @@ import { useActiveWalletChain, } from "thirdweb/react"; import type { WalletId } from "thirdweb/wallets"; -import { - Button, - type ButtonProps, - Card, - Heading, - LinkButton, - Text, -} from "tw-components"; import { MismatchButton } from "./MismatchButton"; -interface TransactionButtonProps extends Omit { - transactionCount: number; - isLoading: boolean; +type ButtonProps = React.ComponentProps; + +type TransactionButtonProps = Omit & { + transactionCount: number | undefined; // support for unknown number of tx count + isPending: boolean; isGasless?: boolean; - upsellTestnet?: boolean; txChainID: number; -} - -function useWalletRequiresExternalConfirmation() { - const activeWallet = useActiveWallet(); - - return ( - activeWallet && - (activeWallet.id === "walletConnect" || activeWallet.id === "global.safe") - ); -} + variant?: "destructive" | "primary"; +}; export const TransactionButton: React.FC = ({ children, transactionCount, - isLoading: isPending, - size, - colorScheme, - variant, + isPending, isGasless, txChainID, + variant, ...restButtonProps }) => { const activeWallet = useActiveWallet(); + + // all wallets except inApp (aka - embedded) requires external confirmation - either from mobile app or extension const walletRequiresExternalConfirmation = - useWalletRequiresExternalConfirmation(); + activeWallet && + activeWallet.id !== "inApp" && + activeWallet.id !== "embedded"; + const initialFocusRef = useRef(null); const chain = useActiveChainAsDashboardChain(); @@ -68,113 +56,69 @@ export const TransactionButton: React.FC = ({ [chain], ); - const numberWidth = useMemo(() => { - // for each digit of transaction count add 8.3px - return Math.floor(transactionCount.toString().length * 8.3); - }, [transactionCount]); - - const address = useActiveAccount()?.address; - - const isConnected = useMemo(() => { - return !!address; - }, [address]); - const ButtonComponent = useMemo(() => { return isGasless ? Button : MismatchButton; }, [isGasless]); + const txCountDivWidth = 60; + const disabled = isChainDeprecated || restButtonProps.disabled || isPending; + return ( - - + + - {children} - 1 ? "transactions" : "transaction"}` - } - > - {/* to be completed */} -
1 ? "transactions" : "transaction"}` } - position="absolute" - top={0} - bottom={0} - left={0} - px={size === "sm" ? 3 : size === "lg" ? 6 : size === "xs" ? 2 : 4} > - - + {transactionCount} - + - -
- +
+ + )} + + + {children} + {isPending && } + - - - - - - + + + + ); }; @@ -190,7 +134,6 @@ const ExternalApprovalNotice: React.FC = ({ }) => { const address = useActiveAccount()?.address; const chainId = useActiveWalletChain()?.id || -1; - const [showHint, setShowHint] = useState(false); // legitimate usecase! @@ -205,61 +148,55 @@ const ExternalApprovalNotice: React.FC = ({ if (walletId === "global.safe") { const isChainIdSupported = chainId in CHAIN_ID_TO_GNOSIS; return ( -
- -
- - Execute Transaction -
- - +
+

Execute Transaction

+ +

You will need to execute this transaction in your Safe to continue. - +

{showHint && ( - +

Once you have approved and executed the transaction in your Gnosis Safe this action will continue automatically. - +

)} - - Go To Safe - -
- ); - } - if (walletId === "walletConnect") { - return ( -
- -
- - Approve Transaction -
- - - You will need to approve this transaction in your connected wallet. - - - {showHint && ( - - Once you have approved the transaction in your connected wallet this - action will continue automatically. - + {isChainIdSupported && ( + )}
); } - return null; + return ( +
+

Approve Transaction

+ +

+ You will need to approve this transaction in your connected wallet. +

+ + {showHint && ( +

+ Once you have approved the transaction in your connected wallet this + action will continue automatically. +

+ )} +
+ ); }; diff --git a/apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx b/apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx index e55957d3c40..bbbec7f6b24 100644 --- a/apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx +++ b/apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx @@ -507,12 +507,11 @@ export const InteractiveAbiFunction: React.FC = ({ Simulate = ( - Upload {nftMetadatas.length} NFTs + {form.formState.isSubmitting + ? `Uploading ${nftMetadatas.length} NFTs` + : `Upload ${nftMetadatas.length} NFTs`} {props.children}