|
| 1 | +"use client"; |
| 2 | +import { AdminOnly } from "@3rdweb-sdk/react/components/roles/admin-only"; |
| 3 | +import type { Account } from "@3rdweb-sdk/react/hooks/useApi"; |
| 4 | +import { Flex, FormControl } from "@chakra-ui/react"; |
| 5 | +import { zodResolver } from "@hookform/resolvers/zod"; |
| 6 | +import type { ExtensionDetectedState } from "components/buttons/ExtensionDetectedState"; |
| 7 | +import { TransactionButton } from "components/buttons/TransactionButton"; |
| 8 | +import { BasisPointsInput } from "components/inputs/BasisPointsInput"; |
| 9 | +import { AddressOrEnsSchema, BasisPointsSchema } from "constants/schemas"; |
| 10 | +import { SolidityInput } from "contract-ui/components/solidity-inputs"; |
| 11 | +import { useTrack } from "hooks/analytics/useTrack"; |
| 12 | +import { useTxNotifications } from "hooks/useTxNotifications"; |
| 13 | +import { useForm } from "react-hook-form"; |
| 14 | +import type { ThirdwebContract } from "thirdweb"; |
| 15 | +import { |
| 16 | + getPlatformFeeInfo, |
| 17 | + setPlatformFeeInfo, |
| 18 | +} from "thirdweb/extensions/common"; |
| 19 | +import { |
| 20 | + useActiveAccount, |
| 21 | + useReadContract, |
| 22 | + useSendAndConfirmTransaction, |
| 23 | +} from "thirdweb/react"; |
| 24 | +import { |
| 25 | + Card, |
| 26 | + FormErrorMessage, |
| 27 | + FormLabel, |
| 28 | + Heading, |
| 29 | + Text, |
| 30 | +} from "tw-components"; |
| 31 | +import z from "zod"; |
| 32 | +import { SettingDetectedState } from "./detected-state"; |
| 33 | + |
| 34 | +// @internal |
| 35 | +const CommonPlatformFeeSchema = z.object({ |
| 36 | + /** |
| 37 | + * platform fee basis points |
| 38 | + */ |
| 39 | + platform_fee_basis_points: BasisPointsSchema, |
| 40 | + /** |
| 41 | + * platform fee recipient address |
| 42 | + */ |
| 43 | + platform_fee_recipient: AddressOrEnsSchema, |
| 44 | +}); |
| 45 | + |
| 46 | +export const SettingsPlatformFees = ({ |
| 47 | + contract, |
| 48 | + detectedState, |
| 49 | + twAccount, |
| 50 | +}: { |
| 51 | + contract: ThirdwebContract; |
| 52 | + detectedState: ExtensionDetectedState; |
| 53 | + twAccount: Account | undefined; |
| 54 | +}) => { |
| 55 | + const trackEvent = useTrack(); |
| 56 | + const address = useActiveAccount()?.address; |
| 57 | + const sendAndConfirmTx = useSendAndConfirmTransaction(); |
| 58 | + const platformFeesQuery = useReadContract(getPlatformFeeInfo, { contract }); |
| 59 | + const platformFeeInfo = platformFeesQuery.data |
| 60 | + ? { |
| 61 | + platform_fee_recipient: platformFeesQuery.data[0], |
| 62 | + platform_fee_basis_points: platformFeesQuery.data[1], |
| 63 | + } |
| 64 | + : undefined; |
| 65 | + |
| 66 | + const form = useForm<z.input<typeof CommonPlatformFeeSchema>>({ |
| 67 | + resolver: zodResolver(CommonPlatformFeeSchema), |
| 68 | + defaultValues: platformFeeInfo, |
| 69 | + values: platformFeeInfo, |
| 70 | + }); |
| 71 | + |
| 72 | + const { onSuccess, onError } = useTxNotifications( |
| 73 | + "Platform fee settings updated", |
| 74 | + "Error updating platform fee settings", |
| 75 | + contract, |
| 76 | + ); |
| 77 | + |
| 78 | + return ( |
| 79 | + <Card p={0} position="relative"> |
| 80 | + <SettingDetectedState type="platformFee" detectedState={detectedState} /> |
| 81 | + <Flex |
| 82 | + as="form" |
| 83 | + onSubmit={form.handleSubmit((data) => { |
| 84 | + trackEvent({ |
| 85 | + category: "settings", |
| 86 | + action: "set-platform-fees", |
| 87 | + label: "attempt", |
| 88 | + }); |
| 89 | + const transaction = setPlatformFeeInfo({ |
| 90 | + contract, |
| 91 | + platformFeeRecipient: data.platform_fee_recipient, |
| 92 | + platformFeeBps: BigInt(data.platform_fee_basis_points), |
| 93 | + }); |
| 94 | + sendAndConfirmTx.mutate(transaction, { |
| 95 | + onSuccess: () => { |
| 96 | + trackEvent({ |
| 97 | + category: "settings", |
| 98 | + action: "set-platform-fees", |
| 99 | + label: "success", |
| 100 | + }); |
| 101 | + form.reset(data); |
| 102 | + onSuccess(); |
| 103 | + }, |
| 104 | + onError: (error) => { |
| 105 | + trackEvent({ |
| 106 | + category: "settings", |
| 107 | + action: "set-platform-fees", |
| 108 | + label: "error", |
| 109 | + error, |
| 110 | + }); |
| 111 | + onError(error); |
| 112 | + }, |
| 113 | + }); |
| 114 | + })} |
| 115 | + direction="column" |
| 116 | + > |
| 117 | + <Flex p={{ base: 6, md: 10 }} as="section" direction="column" gap={4}> |
| 118 | + <Heading size="title.sm">Platform fee</Heading> |
| 119 | + <Text size="body.md" fontStyle="italic"> |
| 120 | + The wallet address that should receive the revenue from platform |
| 121 | + fees. |
| 122 | + </Text> |
| 123 | + <Flex gap={4} direction={{ base: "column", md: "row" }}> |
| 124 | + <FormControl |
| 125 | + isInvalid={ |
| 126 | + !!form.getFieldState("platform_fee_recipient", form.formState) |
| 127 | + .error |
| 128 | + } |
| 129 | + isDisabled={!address} |
| 130 | + > |
| 131 | + <FormLabel>Recipient Address</FormLabel> |
| 132 | + <SolidityInput |
| 133 | + solidityType="address" |
| 134 | + formContext={form} |
| 135 | + {...form.register("platform_fee_recipient")} |
| 136 | + disabled={!address || sendAndConfirmTx.isPending} |
| 137 | + /> |
| 138 | + <FormErrorMessage> |
| 139 | + { |
| 140 | + form.getFieldState("platform_fee_recipient", form.formState) |
| 141 | + .error?.message |
| 142 | + } |
| 143 | + </FormErrorMessage> |
| 144 | + </FormControl> |
| 145 | + <FormControl |
| 146 | + isDisabled={!address} |
| 147 | + maxW={{ base: "100%", md: "200px" }} |
| 148 | + isInvalid={ |
| 149 | + !!form.getFieldState( |
| 150 | + "platform_fee_basis_points", |
| 151 | + form.formState, |
| 152 | + ).error |
| 153 | + } |
| 154 | + > |
| 155 | + <FormLabel>Percentage</FormLabel> |
| 156 | + <BasisPointsInput |
| 157 | + value={form.watch("platform_fee_basis_points")} |
| 158 | + onChange={(value) => |
| 159 | + form.setValue("platform_fee_basis_points", value, { |
| 160 | + shouldDirty: true, |
| 161 | + shouldTouch: true, |
| 162 | + }) |
| 163 | + } |
| 164 | + disabled={sendAndConfirmTx.isPending} |
| 165 | + /> |
| 166 | + <FormErrorMessage> |
| 167 | + { |
| 168 | + form.getFieldState( |
| 169 | + "platform_fee_basis_points", |
| 170 | + form.formState, |
| 171 | + ).error?.message |
| 172 | + } |
| 173 | + </FormErrorMessage> |
| 174 | + </FormControl> |
| 175 | + </Flex> |
| 176 | + </Flex> |
| 177 | + <AdminOnly contract={contract}> |
| 178 | + <TransactionButton |
| 179 | + twAccount={twAccount} |
| 180 | + txChainID={contract.chain.id} |
| 181 | + transactionCount={1} |
| 182 | + disabled={platformFeesQuery.isPending || !form.formState.isDirty} |
| 183 | + type="submit" |
| 184 | + isPending={sendAndConfirmTx.isPending} |
| 185 | + className="!rounded-t-none rounded-xl" |
| 186 | + > |
| 187 | + {sendAndConfirmTx.isPending |
| 188 | + ? "Updating Platform Fee Settings" |
| 189 | + : "Update Platform Fee Settings"} |
| 190 | + </TransactionButton> |
| 191 | + </AdminOnly> |
| 192 | + </Flex> |
| 193 | + </Card> |
| 194 | + ); |
| 195 | +}; |
0 commit comments