Disable fields for non owner accounts

MananTank · MananTank · commit b06448ef7bbc · 2024-10-23T21:46:56.000+05:30
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/ContractEditModulesPage.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/ContractEditModulesPage.tsx
@@ -96,7 +96,7 @@ export const ContractEditModulesPage: React.FC<
         installedModules={installedModules}
         refetchModules={() => installedModulesQuery.refetch()}
         contract={contract}
-        ownerAccount={isOwner ? account : undefined}
+        isOwnerAccount={isOwner}
       />
     </div>
   );
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/InstalledModulesTable.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/InstalledModulesTable.tsx
@@ -4,7 +4,6 @@ import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import { CircleSlash } from "lucide-react";
 import type { ContractOptions } from "thirdweb";
-import type { Account } from "thirdweb/wallets";
 import { ModuleCard } from "./module-card";
 
 export const InstalledModulesTable = (props: {
@@ -14,9 +13,9 @@ export const InstalledModulesTable = (props: {
     isPending: boolean;
   };
   refetchModules: () => void;
-  ownerAccount?: Account;
+  isOwnerAccount: boolean;
 }) => {
-  const { installedModules, ownerAccount } = props;
+  const { installedModules, isOwnerAccount } = props;
 
   const sectionTitle = (
     <h2 className="mb-3 font-bold text-2xl tracking-tight">
@@ -49,7 +48,7 @@ export const InstalledModulesTable = (props: {
               moduleAddress={moduleAddress}
               contract={props.contract}
               onRemoveModule={props.refetchModules}
-              ownerAccount={ownerAccount}
+              isOwnerAccount={isOwnerAccount}
             />
           ))}
         </div>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Transferrable.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Transferrable.tsx
@@ -122,6 +122,7 @@ export function TransferrableModuleUI(
                         <Switch
                           {...restField}
                           checked={field.value}
+                          disabled={!props.isOwnerAccount}
                           className="!m-0"
                           onCheckedChange={(v) => {
                             field.onChange(v);
@@ -167,7 +168,11 @@ export function TransferrableModuleUI(
                           render={({ field }) => (
                             <FormItem className="grow">
                               <FormControl>
-                                <Input placeholder="0x..." {...field} />
+                                <Input
+                                  placeholder="0x..."
+                                  {...field}
+                                  disabled={!props.isOwnerAccount}
+                                />
                               </FormControl>
                               <FormMessage />
                             </FormItem>
@@ -180,6 +185,7 @@ export function TransferrableModuleUI(
                             onClick={() => {
                               formFields.remove(index);
                             }}
+                            disabled={!props.isOwnerAccount}
                           >
                             <Trash2Icon className="size-4" />
                           </Button>
@@ -206,6 +212,7 @@ export function TransferrableModuleUI(
                       });
                     }}
                     className="gap-2"
+                    disabled={!props.isOwnerAccount}
                   >
                     <PlusIcon className="size-3" />
                     Add Address
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
-import { Toaster, toast } from "sonner";
+import { Toaster } from "sonner";
 import { BadgeContainer, mobileViewport } from "stories/utils";
 import { ThirdwebProvider } from "thirdweb/react";
 import { ModuleCardUI } from "./module-card";
@@ -32,8 +32,11 @@ function Component() {
     mutationFn: async () => {
       await new Promise((resolve) => setTimeout(resolve, 1000));
     },
-    onSuccess() {
-      toast.success("Module removed successfully");
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
     },
   });
 
@@ -48,18 +51,31 @@ function Component() {
   return (
     <ThirdwebProvider>
       <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
-        <BadgeContainer label="No Update, No Children">
+        <BadgeContainer label="No Update, No Children, Owner Account">
+          <ModuleCardUI
+            contractInfo={contractInfo}
+            moduleAddress="0x0000000000000000000000000000000000000000"
+            uninstallButton={{
+              onClick: () => removeMutation.mutateAsync(),
+              isPending: removeMutation.isPending,
+            }}
+            isOwnerAccount={true}
+          />
+        </BadgeContainer>
+
+        <BadgeContainer label="No Update, No Children, Not Owner Account">
           <ModuleCardUI
             contractInfo={contractInfo}
             moduleAddress="0x0000000000000000000000000000000000000000"
             uninstallButton={{
               onClick: () => removeMutation.mutateAsync(),
               isPending: removeMutation.isPending,
             }}
+            isOwnerAccount={false}
           />
         </BadgeContainer>
 
-        <BadgeContainer label="Update Button (disabled), No Children">
+        <BadgeContainer label="Update Button (disabled), No Children, Owner">
           <ModuleCardUI
             contractInfo={contractInfo}
             moduleAddress="0x0000000000000000000000000000000000000000"
@@ -69,13 +85,14 @@ function Component() {
             }}
             updateButton={{
               isDisabled: true,
-              isPending: false,
-              onClick: () => {},
+              isPending: updateMutation.isPending,
+              onClick: () => updateMutation.mutateAsync(),
             }}
+            isOwnerAccount={true}
           />
         </BadgeContainer>
 
-        <BadgeContainer label="Update Button (enabled), Children">
+        <BadgeContainer label="Update Button (enabled), Children, Owner">
           <ModuleCardUI
             contractInfo={contractInfo}
             moduleAddress="0x0000000000000000000000000000000000000000"
@@ -85,9 +102,10 @@ function Component() {
             }}
             updateButton={{
               isDisabled: false,
-              isPending: false,
-              onClick: () => {},
+              isPending: updateMutation.isPending,
+              onClick: () => updateMutation.mutateAsync(),
             }}
+            isOwnerAccount={true}
           >
             <div className="flex h-36 items-center justify-center rounded-lg bg-muted text-muted-foreground text-sm">
               CHILDREN
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
@@ -24,17 +24,19 @@ import {
   waitForReceipt,
 } from "thirdweb";
 import { uninstallModuleByProxy } from "thirdweb/modules";
+import { useActiveAccount } from "thirdweb/react";
 import type { Account } from "thirdweb/wallets";
 import { useModuleContractInfo } from "./moduleContractInfo";
 
 export function ModuleCard(props: {
   moduleAddress: string;
   contract: ContractOptions;
   onRemoveModule: () => void;
-  ownerAccount?: Account;
+  isOwnerAccount: boolean;
 }) {
-  const { contract, moduleAddress, ownerAccount } = props;
+  const { contract, moduleAddress } = props;
   const [isUninstallModalOpen, setIsUninstallModalOpen] = useState(false);
+  const account = useActiveAccount();
 
   const contractInfo = useModuleContractInfo(
     getContract({
@@ -72,11 +74,12 @@ export function ModuleCard(props: {
   });
 
   const handleRemove = async () => {
-    if (!ownerAccount) {
+    if (!account) {
+      toast.error("Wallet is not connected");
       return;
     }
 
-    uninstallMutation.mutate(ownerAccount);
+    uninstallMutation.mutate(account);
   };
 
   if (!contractInfo) {
@@ -86,6 +89,7 @@ export function ModuleCard(props: {
   return (
     <>
       <ModuleCardUI
+        isOwnerAccount={props.isOwnerAccount}
         contractInfo={{
           name: contractInfo.name,
           description: contractInfo.description,
@@ -166,6 +170,7 @@ export type ModuleCardUIProps = {
     publisher?: string;
   };
   moduleAddress: string;
+  isOwnerAccount: boolean;
 };
 
 export function ModuleCardUI(props: ModuleCardUIProps) {
@@ -256,7 +261,9 @@ export function ModuleCardUI(props: ModuleCardUIProps) {
             className="min-w-24 gap-2"
             onClick={props.updateButton.onClick}
             disabled={
-              props.updateButton.isDisabled || props.updateButton.isPending
+              props.updateButton.isDisabled ||
+              props.updateButton.isPending ||
+              !props.isOwnerAccount
             }
           >
             {props.updateButton.isPending && <Spinner className="size-4" />}
@@ -269,6 +276,7 @@ export function ModuleCardUI(props: ModuleCardUIProps) {
           onClick={props.uninstallButton.onClick}
           variant="destructive"
           className="min-w-24 gap-2"
+          disabled={!props.isOwnerAccount}
         >
           {props.uninstallButton.isPending && <Spinner className="size-4" />}
           Uninstall
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferrable.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferrable.stories.tsx
@@ -1,5 +1,7 @@
+import { Checkbox } from "@/components/ui/checkbox";
 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";
@@ -33,7 +35,24 @@ export const Mobile: Story = {
 const testAddress1 = "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37";
 const testAddress2 = "0x83Dd93fA5D8343094f850f90B3fb90088C1bB425";
 
+export function CheckboxWithText() {
+  return (
+    <div className="items-top flex space-x-2">
+      <Checkbox id="terms1" />
+      <div className="grid gap-1.5 leading-none">
+        <label
+          htmlFor="terms1"
+          className="font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          Is Owner
+        </label>
+      </div>
+    </div>
+  );
+}
+
 function Component() {
+  const [isOwner, setIsOwner] = useState(true);
   async function updateStub(values: TransferrableModuleFormValues) {
     console.log("submitting", values);
     await new Promise((resolve) => setTimeout(resolve, 1000));
@@ -59,6 +78,22 @@ function Component() {
   return (
     <ThirdwebProvider>
       <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
+        <div className="items-top flex space-x-2">
+          <Checkbox
+            id="terms1"
+            checked={isOwner}
+            onCheckedChange={(v) => setIsOwner(!!v)}
+          />
+          <div className="grid gap-1.5 leading-none">
+            <label
+              htmlFor="terms1"
+              className="font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Is Owner
+            </label>
+          </div>
+        </div>
+
         <BadgeContainer label="Empty AllowList, Not Restricted">
           <TransferrableModuleUI
             contractInfo={contractInfo}
@@ -72,6 +107,7 @@ function Component() {
               onClick: () => removeMutation.mutateAsync(),
               isPending: removeMutation.isPending,
             }}
+            isOwnerAccount={isOwner}
           />
         </BadgeContainer>
 
@@ -88,6 +124,7 @@ function Component() {
               onClick: () => removeMutation.mutateAsync(),
               isPending: removeMutation.isPending,
             }}
+            isOwnerAccount={isOwner}
           />
         </BadgeContainer>
 
@@ -104,6 +141,7 @@ function Component() {
               onClick: () => removeMutation.mutateAsync(),
               isPending: removeMutation.isPending,
             }}
+            isOwnerAccount={isOwner}
           />
         </BadgeContainer>
 
@@ -120,6 +158,7 @@ function Component() {
               onClick: () => removeMutation.mutateAsync(),
               isPending: removeMutation.isPending,
             }}
+            isOwnerAccount={isOwner}
           />
         </BadgeContainer>
 
@@ -136,6 +175,7 @@ function Component() {
               onClick: () => removeMutation.mutateAsync(),
               isPending: removeMutation.isPending,
             }}
+            isOwnerAccount={isOwner}
           />
         </BadgeContainer>
 
