[Dashboard] PrimarySaleRecipient to v5 (#4098)

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on updating the contract UI settings for primary sale recipient address handling.

### Detailed summary
- Updated handling of primary sale recipient address in contract settings UI
- Refactored usage of Thirdweb SDK functions
- Added error handling for invalid recipient address
- Improved transaction handling and form reset functionality

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/src/contract-ui/tabs/settings/components/primary-sale.tsx

@@ -1,47 +1,51 @@
-import { thirdwebClient } from "@/constants/client";
 import { AdminOnly } from "@3rdweb-sdk/react/components/roles/admin-only";
 import { Flex, FormControl } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import {
-  usePrimarySaleRecipient,
-  useUpdatePrimarySaleRecipient,
-} from "@thirdweb-dev/react";
-import {
-  CommonPrimarySaleSchema,
-  type ValidContractInstance,
-} from "@thirdweb-dev/sdk";
 import type { ExtensionDetectedState } from "components/buttons/ExtensionDetectButton";
 import { TransactionButton } from "components/buttons/TransactionButton";
+import { AddressOrEnsSchema } from "constants/schemas";
 import { SolidityInput } from "contract-ui/components/solidity-inputs";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
-import { useV5DashboardChain } from "lib/v5-adapter";
 import { useForm } from "react-hook-form";
-import { getContract } from "thirdweb";
-import { useActiveAccount } from "thirdweb/react";
+import { toast } from "sonner";
+import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
+import {
+  primarySaleRecipient,
+  setPrimarySaleRecipient,
+} from "thirdweb/extensions/common";
+import {
+  useActiveAccount,
+  useReadContract,
+  useSendAndConfirmTransaction,
+} from "thirdweb/react";
 import {
   Card,
   FormErrorMessage,
   FormLabel,
   Heading,
   Text,
 } from "tw-components";
-import type { z } from "zod";
+import { z } from "zod";
 import { SettingDetectedState } from "./detected-state";
 
-export const SettingsPrimarySale = <
-  TContract extends ValidContractInstance | undefined,
->({
+const CommonPrimarySaleSchema = z.object({
+  primary_sale_recipient: AddressOrEnsSchema.default(ZERO_ADDRESS),
+});
+
+export const SettingsPrimarySale = ({
   contract,
   detectedState,
 }: {
-  contract: TContract;
+  contract: ThirdwebContract;
   detectedState: ExtensionDetectedState;
 }) => {
   const address = useActiveAccount()?.address;
   const trackEvent = useTrack();
-  const query = usePrimarySaleRecipient(contract);
-  const mutation = useUpdatePrimarySaleRecipient(contract);
+  const query = useReadContract(primarySaleRecipient, {
+    contract,
+  });
+  const mutation = useSendAndConfirmTransaction();
 
   const transformedQueryData = {
     primary_sale_recipient: query.data,
@@ -53,20 +57,10 @@ export const SettingsPrimarySale = <
     values: transformedQueryData,
   });
 
-  const chain = useV5DashboardChain(contract?.chainId);
-  const contractV5 =
-    contract && chain
-      ? getContract({
-          address: contract.getAddress(),
-          chain: chain,
-          client: thirdwebClient,
-        })
-      : null;
-
   const { onSuccess, onError } = useTxNotifications(
     "Primary sale address updated",
     "Error updating primary sale address",
-    contractV5,
+    contract,
   );
 
   return (
@@ -80,15 +74,25 @@ export const SettingsPrimarySale = <
             action: "set-primary-sale",
             label: "attempt",
           });
+          const saleRecipient = d.primary_sale_recipient;
+          if (!saleRecipient) {
+            return toast.error(
+              "Please enter a valid primary sale recipient address",
+            );
+          }
+          const transaction = setPrimarySaleRecipient({
+            contract,
+            saleRecipient,
+          });
           // if we switch back to mutateAsync then *need* to catch errors
-          mutation.mutate(d.primary_sale_recipient as string, {
-            onSuccess: (_data, variables) => {
+          mutation.mutate(transaction, {
+            onSuccess: () => {
               trackEvent({
                 category: "settings",
                 action: "set-primary-sale",
                 label: "success",
               });
-              form.reset({ primary_sale_recipient: variables });
+              form.reset({ primary_sale_recipient: saleRecipient });
               onSuccess();
             },
             onError: (error) => {
@@ -112,15 +116,15 @@ export const SettingsPrimarySale = <
           </Text>
           <Flex gap={4} direction={{ base: "column", md: "row" }}>
             <FormControl
-              isDisabled={mutation.isLoading || !address}
+              isDisabled={mutation.isPending || !address}
               isInvalid={
                 !!form.getFieldState("primary_sale_recipient", form.formState)
                   .error
               }
             >
               <FormLabel>Recipient Address</FormLabel>
               <SolidityInput
-                isDisabled={mutation.isLoading || !address}
+                isDisabled={mutation.isPending || !address}
                 solidityType="address"
                 formContext={form}
                 variant="filled"
@@ -135,24 +139,22 @@ export const SettingsPrimarySale = <
             </FormControl>
           </Flex>
         </Flex>
-        {contractV5 && (
-          <AdminOnly contract={contractV5}>
-            <TransactionButton
-              colorScheme="primary"
-              transactionCount={1}
-              isDisabled={query.isLoading || !form.formState.isDirty}
-              type="submit"
-              isLoading={mutation.isLoading}
-              loadingText="Saving..."
-              size="md"
-              borderRadius="xl"
-              borderTopLeftRadius="0"
-              borderTopRightRadius="0"
-            >
-              Update Primary Sale Settings
-            </TransactionButton>
-          </AdminOnly>
-        )}
+        <AdminOnly contract={contract}>
+          <TransactionButton
+            colorScheme="primary"
+            transactionCount={1}
+            isDisabled={query.isLoading || !form.formState.isDirty}
+            type="submit"
+            isLoading={mutation.isPending}
+            loadingText="Saving..."
+            size="md"
+            borderRadius="xl"
+            borderTopLeftRadius="0"
+            borderTopRightRadius="0"
+          >
+            Update Primary Sale Settings
+          </TransactionButton>
+        </AdminOnly>
       </Flex>
     </Card>
   );

apps/dashboard/src/contract-ui/tabs/settings/page.tsx

@@ -61,12 +61,14 @@ export const ContractSettingsPage: React.FC<ContractSettingsPageProps> = ({
               detectedState={detectedMetadata}
             />
           </GridItem>
-          <GridItem order={detectedPrimarySale === "enabled" ? 2 : 101}>
-            <SettingsPrimarySale
-              contract={contractQuery.contract}
-              detectedState={detectedPrimarySale}
-            />
-          </GridItem>
+          {contract && (
+            <GridItem order={detectedPrimarySale === "enabled" ? 2 : 101}>
+              <SettingsPrimarySale
+                contract={contract}
+                detectedState={detectedPrimarySale}
+              />
+            </GridItem>
+          )}
 
           {contract && (
             <GridItem order={detectedRoyalties === "enabled" ? 3 : 102}>