From 03617047e2ada113681cdd0062baeee3e9c61d7e Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Tue, 29 Jul 2025 18:15:59 +0000
Subject: [PATCH] Dashboard: Migrate contract/permissions page from chakra to
 tailwind, UI improvements (#7750)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `Permissions` component and related files by improving UI elements, restructuring code for clarity, and integrating better user feedback mechanisms such as alerts and toast notifications.

### Detailed summary
- Updated the `Permissions` component's return structure to include headings and descriptions.
- Refined the `alertVariants` in `alert.tsx` for better styling.
- Replaced `ButtonGroup` with a `div` for layout adjustments in the `Permissions` component.
- Enhanced error handling with toast notifications in `permissions-editor.tsx`.
- Improved form handling and cleaned up values before submission.
- Replaced `DelayedDisplay` with an `Alert` component in `permissions-editor.tsx`.
- Updated the `ContractPermission` component to utilize `Select` for role management instead of traditional dropdowns.
- Added conditional rendering for alerts based on role states in `ContractPermission`.
- Adjusted button styles and behavior for better user experience across components.

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

<!-- end pr-codex -->
---
 .../src/@/components/misc/delayed-display.tsx |  37 --
 apps/dashboard/src/@/components/ui/alert.tsx  |   6 +-
 .../permissions/ContractPermissionsPage.tsx   |  12 +-
 .../components/contract-permission.tsx        | 379 ++++++++----------
 .../permissions/components/index.tsx          | 101 +++--
 .../components/permissions-editor.tsx         | 271 ++++---------
 6 files changed, 320 insertions(+), 486 deletions(-)
 delete mode 100644 apps/dashboard/src/@/components/misc/delayed-display.tsx

diff --git a/apps/dashboard/src/@/components/misc/delayed-display.tsx b/apps/dashboard/src/@/components/misc/delayed-display.tsx
deleted file mode 100644
index 05a3c3f17ad..00000000000
--- a/apps/dashboard/src/@/components/misc/delayed-display.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useEffect, useState } from "react";
-import type { ComponentWithChildren } from "@/types/component-with-children";
-
-interface DelayedDisplayProps {
-  delay: number;
-}
-
-function useDelayedDisplay(delay: number) {
-  const [displayContent, setDisplayContent] = useState(false);
-
-  // FIXME: this is a weird thing, we should not need it - in the meantime this is a legit use case
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDisplayContent(true);
-    }, delay);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [delay]);
-
-  return displayContent;
-}
-
-export const DelayedDisplay: ComponentWithChildren<DelayedDisplayProps> = ({
-  delay,
-  children,
-}) => {
-  const displayContent = useDelayedDisplay(delay);
-
-  if (!displayContent) {
-    return null;
-  }
-
-  return <>{children}</>;
-};
diff --git a/apps/dashboard/src/@/components/ui/alert.tsx b/apps/dashboard/src/@/components/ui/alert.tsx
index f574853b564..2ea180d4c35 100644
--- a/apps/dashboard/src/@/components/ui/alert.tsx
+++ b/apps/dashboard/src/@/components/ui/alert.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "bg-card relative w-full rounded-lg border border-border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "bg-card relative w-full rounded-xl border border-border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
   {
     defaultVariants: {
       variant: "default",
@@ -38,7 +38,7 @@ const AlertTitle = React.forwardRef<
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
   <h5
-    className={cn("font-medium leading-tight tracking-tight", className)}
+    className={cn("font-medium leading-tight", className)}
     ref={ref}
     {...props}
   />
@@ -51,7 +51,7 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     className={cn(
-      "mt-1.5 text-muted-foreground text-sm [&_p]:leading-relaxed",
+      "mt-1 text-muted-foreground text-sm [&_p]:leading-relaxed",
       className,
     )}
     ref={ref}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx
index d8b2bd91942..00f10516e2b 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx
@@ -56,5 +56,15 @@ export function ContractPermissionsPage({
     );
   }
 
-  return <Permissions contract={contract} isLoggedIn={isLoggedIn} />;
+  return (
+    <div>
+      <h2 className="text-2xl font-semibold tracking-tight mb-0.5">
+        Permissions
+      </h2>
+      <p className="text-muted-foreground mb-6">
+        View and manage the permissions for this contract
+      </p>
+      <Permissions contract={contract} isLoggedIn={isLoggedIn} />
+    </div>
+  );
 }
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/contract-permission.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/contract-permission.tsx
index 30b55392fb1..b87af4dd65b 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/contract-permission.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/contract-permission.tsx
@@ -1,9 +1,17 @@
-import { Flex, Select, Spinner } from "@chakra-ui/react";
 import { InfoIcon } from "lucide-react";
 import { useFormContext } from "react-hook-form";
 import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
-import { Card } from "@/components/ui/card";
+import { Alert, AlertTitle } from "@/components/ui/alert";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useIsAdmin } from "@/hooks/useContractRoles";
+import { cn } from "@/lib/utils";
 import { PermissionEditor } from "./permissions-editor";
 
 interface ContractPermissionProps {
@@ -19,227 +27,178 @@ export const ContractPermission: React.FC<ContractPermissionProps> = ({
   isPending,
   contract,
 }) => {
-  const {
-    watch,
-    setValue,
-    formState: { isSubmitting },
-  } = useFormContext();
+  const form = useFormContext();
 
-  const roleMembers: string[] = watch()?.[role] || [];
+  const roleMembers: string[] = form.watch(role) || [];
   const isRestricted =
     !roleMembers.includes(ZERO_ADDRESS) ||
     (role !== "transfer" && role !== "lister" && role !== "asset");
   const isAdmin = useIsAdmin(contract);
 
   return (
-    <Card className="relative p-4">
-      <Flex direction="column" gap={3}>
-        <div className="mb-3 flex flex-col gap-2">
-          <div className="flex flex-row">
-            <div className="flex grow flex-col gap-1">
-              <p className="font-semibold text-base capitalize">
-                {role === "minter" ? "Minter / Creator" : role}
-              </p>
-              <p className="text-muted-foreground">{description}</p>
-            </div>
+    <div className="border-b border-dashed px-4 lg:px-6 py-6">
+      {/* header */}
+      <div
+        className={cn(
+          "flex flex-col lg:flex-row lg:justify-between gap-4 mb-2",
+          description && "mb-4",
+        )}
+      >
+        {/* left */}
+        <div className="space-y-0.5">
+          <h3 className="font-semibold text-lg tracking-tight capitalize">
+            {role === "minter" ? "Minter / Creator" : role}
+          </h3>
+          <p className="text-muted-foreground text-sm">{description}</p>
+        </div>
 
-            {role === "transfer" && (
-              <Flex align="center" flexGrow={0} flexShrink={0} justify="center">
-                {isPending || isSubmitting ? (
-                  <Flex align="center" gap={2} px={2}>
-                    <Spinner size="sm" />
-                    <p>{isPending ? "Loading ..." : "Updating ..."}</p>
-                  </Flex>
-                ) : (
-                  <Select
-                    isDisabled={!isAdmin}
-                    onChange={(e) => {
-                      if (e.target.value === "1") {
-                        setValue(
-                          role,
-                          roleMembers.filter(
-                            (address) => address !== ZERO_ADDRESS,
-                          ),
-                          { shouldDirty: true },
-                        );
-                      } else {
-                        setValue(role, [ZERO_ADDRESS, ...roleMembers], {
-                          shouldDirty: true,
-                        });
-                      }
-                    }}
-                    value={isRestricted ? 1 : 0}
-                    variant="filled"
-                  >
-                    <option value={1}>Non-Transferable</option>
-                    <option value={0}>Transferable</option>
-                  </Select>
-                )}
-              </Flex>
-            )}
+        {/* right */}
+        {role === "transfer" && isAdmin && (
+          <Select
+            onValueChange={(value) => {
+              if (value === "1") {
+                form.setValue(
+                  role,
+                  roleMembers.filter((address) => address !== ZERO_ADDRESS),
+                  { shouldDirty: true },
+                );
+              } else {
+                form.setValue(role, [ZERO_ADDRESS, ...roleMembers], {
+                  shouldDirty: true,
+                });
+              }
+            }}
+            value={isRestricted ? "1" : "0"}
+          >
+            <SelectTrigger className="bg-background rounded-full w-fit">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="rounded-lg" sideOffset={4} align="end">
+              <SelectItem value="1">Non-Transferable</SelectItem>
+              <SelectItem value="0">Transferable</SelectItem>
+            </SelectContent>
+          </Select>
+        )}
 
-            {role === "lister" && (
-              <Flex align="center" flexGrow={0} flexShrink={0} justify="center">
-                {isPending || isSubmitting ? (
-                  <Flex align="center" gap={2} px={2}>
-                    <Spinner size="sm" />
-                    <p>{isPending ? "Loading ..." : "Updating ..."}</p>
-                  </Flex>
-                ) : (
-                  <Select
-                    isDisabled={!isAdmin}
-                    onChange={(e) => {
-                      if (e.target.value === "1") {
-                        setValue(
-                          role,
-                          roleMembers.filter(
-                            (address) => address !== ZERO_ADDRESS,
-                          ),
-                          { shouldDirty: true },
-                        );
-                      } else {
-                        setValue(role, [ZERO_ADDRESS, ...roleMembers], {
-                          shouldDirty: true,
-                        });
-                      }
-                    }}
-                    value={isRestricted ? 1 : 0}
-                    variant="filled"
-                  >
-                    <option value={1}>Only specific wallets</option>
-                    <option value={0}>Any wallet</option>
-                  </Select>
-                )}
-              </Flex>
-            )}
+        {/* right */}
+        {role === "lister" && isAdmin && (
+          <Select
+            onValueChange={(value) => {
+              if (value === "1") {
+                form.setValue(
+                  role,
+                  roleMembers.filter((address) => address !== ZERO_ADDRESS),
+                  { shouldDirty: true },
+                );
+              } else {
+                form.setValue(role, [ZERO_ADDRESS, ...roleMembers], {
+                  shouldDirty: true,
+                });
+              }
+            }}
+            value={isRestricted ? "1" : "0"}
+          >
+            <SelectTrigger className="bg-background rounded-full w-fit">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="rounded-lg" sideOffset={4} align="end">
+              <SelectItem value="1">Only specific wallets</SelectItem>
+              <SelectItem value="0">Any wallet</SelectItem>
+            </SelectContent>
+          </Select>
+        )}
 
-            {role === "asset" && (
-              <Flex align="center" flexGrow={0} flexShrink={0} justify="center">
-                {isPending || isSubmitting ? (
-                  <Flex align="center" gap={2} px={2}>
-                    <Spinner size="sm" />
-                    <p>{isPending ? "Loading ..." : "Updating ..."}</p>
-                  </Flex>
-                ) : (
-                  <Select
-                    isDisabled={!isAdmin}
-                    onChange={(e) => {
-                      if (e.target.value === "1") {
-                        setValue(
-                          role,
-                          roleMembers.filter(
-                            (address) => address !== ZERO_ADDRESS,
-                          ),
-                          { shouldDirty: true },
-                        );
-                      } else {
-                        setValue(role, [ZERO_ADDRESS, ...roleMembers], {
-                          shouldDirty: true,
-                        });
-                      }
-                    }}
-                    value={isRestricted ? 1 : 0}
-                    variant="filled"
-                  >
-                    <option value={1}>Only specific assets</option>
-                    <option value={0}>Any asset</option>
-                  </Select>
-                )}
-              </Flex>
-            )}
-          </div>
+        {/* right */}
+        {role === "asset" && isAdmin && (
+          <Select
+            onValueChange={(value) => {
+              if (value === "1") {
+                form.setValue(
+                  role,
+                  roleMembers.filter((address) => address !== ZERO_ADDRESS),
+                  { shouldDirty: true },
+                );
+              } else {
+                form.setValue(role, [ZERO_ADDRESS, ...roleMembers], {
+                  shouldDirty: true,
+                });
+              }
+            }}
+            value={isRestricted ? "1" : "0"}
+          >
+            <SelectTrigger className="bg-background rounded-full w-fit">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="rounded-lg" sideOffset={4} align="end">
+              <SelectItem value="1">Only specific assets</SelectItem>
+              <SelectItem value="0">Any asset</SelectItem>
+            </SelectContent>
+          </Select>
+        )}
+      </div>
 
-          {role === "transfer" && (
-            <Flex
-              _dark={{
-                bg: "primary.800",
-                borderColor: "primary.800",
-              }}
-              align="center"
-              bg="primary.50"
-              borderColor="primary.100"
-              borderRadius="md"
-              borderWidth="1px"
-              direction="row"
-              gap={3}
-              padding="10px"
-            >
-              <InfoIcon className="size-6 text-primary hover:opacity-10 dark:text-primary-foreground" />
-              <p className="text-primary dark:text-primary-foreground">
-                {isRestricted ? (
-                  <>
-                    The tokens in this contract are currently{" "}
-                    <strong>non-transferable</strong>. Only wallets that you
-                    explicitly add to the list below will be able to transfer
-                    tokens.
-                  </>
-                ) : (
-                  <>
-                    Transferring tokens in this contract is currently{" "}
-                    <strong>not restricted</strong>. Everyone is free to
-                    transfer their tokens.
-                  </>
-                )}
-              </p>
-            </Flex>
-          )}
+      <div className="space-y-3">
+        {/* alert */}
+        {role === "transfer" && (
+          <Alert variant="info" className="bg-background">
+            <InfoIcon className="size-5" />
+            <AlertTitle>
+              {isRestricted ? (
+                <>
+                  The tokens in this contract are currently{" "}
+                  <strong>non-transferable</strong>. Only wallets that you
+                  explicitly add to the list below will be able to transfer
+                  tokens
+                </>
+              ) : (
+                <>
+                  Transferring tokens in this contract is currently{" "}
+                  <strong>not restricted</strong>. Everyone is free to transfer
+                  their tokens
+                </>
+              )}
+            </AlertTitle>
+          </Alert>
+        )}
 
-          {role === "lister" && (
-            <Flex
-              _dark={{
-                bg: "primary.800",
-                borderColor: "primary.800",
-              }}
-              align="center"
-              bg="primary.50"
-              borderColor="primary.100"
-              borderRadius="md"
-              borderWidth="1px"
-              direction="row"
-              gap={3}
-              padding="10px"
-            >
-              <InfoIcon className="size-6 text-primary hover:opacity-10 dark:text-primary-foreground" />
-              <p className="text-primary dark:text-primary-foreground">
-                {isRestricted
-                  ? "Currently, only addresses specified below will be able to create listings on this marketplace."
-                  : "This marketplace is open for anyone to create listings."}
-              </p>
-            </Flex>
-          )}
+        {/* alert */}
+        {role === "lister" && (
+          <Alert variant="info" className="bg-background">
+            <InfoIcon className="size-5" />
+            <AlertTitle>
+              {isRestricted
+                ? "Currently, only addresses specified below will be able to create listings on this marketplace."
+                : "This marketplace is open for anyone to create listings."}
+            </AlertTitle>
+          </Alert>
+        )}
 
-          {role === "asset" && (
-            <Flex
-              _dark={{
-                bg: "primary.800",
-                borderColor: "primary.800",
-              }}
-              align="center"
-              bg="primary.50"
-              borderColor="primary.100"
-              borderRadius="md"
-              borderWidth="1px"
-              direction="row"
-              gap={3}
-              padding="10px"
-            >
-              <InfoIcon className="size-6 text-primary hover:opacity-10 dark:text-primary-foreground" />
-              <p className="text-primary dark:text-primary-foreground">
-                {isRestricted
-                  ? "Currently, only assets from the contracts specified below will be able to be used on this contract."
-                  : "This contract is open for people to list assets from any contract."}
-              </p>
-            </Flex>
-          )}
+        {/* alert */}
+        {role === "asset" && (
+          <Alert variant="info" className="bg-background">
+            <InfoIcon className="size-5" />
+            <AlertTitle>
+              {isRestricted
+                ? "Currently, only assets from the contracts specified below will be able to be used on this contract."
+                : "This contract is open for people to list assets from any contract."}
+            </AlertTitle>
+          </Alert>
+        )}
 
-          {isPending ? (
-            <Spinner />
-          ) : (
-            isRestricted &&
-            role && <PermissionEditor contract={contract} role={role} />
-          )}
-        </div>
-      </Flex>
-    </Card>
+        {/* content */}
+        {isPending ? (
+          <Skeleton className="h-20 w-full" />
+        ) : (
+          isRestricted &&
+          role && (
+            <PermissionEditor
+              contract={contract}
+              role={role}
+              isUserAdmin={isAdmin}
+            />
+          )
+        )}
+      </div>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/index.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/index.tsx
index 34721354027..061bb5d4036 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/index.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/index.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { ButtonGroup, Flex } from "@chakra-ui/react";
-import { Button } from "chakra/button";
+import { RotateCcwIcon } from "lucide-react";
 import { useMemo } from "react";
-import { FormProvider, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import {
   useActiveAccount,
@@ -11,12 +11,14 @@ import {
   useSendAndConfirmTransaction,
 } from "thirdweb/react";
 import { TransactionButton } from "@/components/tx-button";
+import { Button } from "@/components/ui/button";
+import { Form } from "@/components/ui/form";
 import { ROLE_DESCRIPTION_MAP } from "@/constants/mappings";
 import {
   createSetAllRoleMembersTx,
   getAllRoleMembers,
 } from "@/hooks/contract-ui/permissions";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
+import { parseError } from "@/utils/errorParser";
 import { ContractPermission } from "./contract-permission";
 
 type PermissionFormContext = {
@@ -48,78 +50,91 @@ export function Permissions({
     values: transformedQueryData,
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "Permissions updated",
-    "Failed to update permissions",
-  );
-
   const roles = useMemo(() => {
     return Object.keys(allRoleMembers.data || ROLE_DESCRIPTION_MAP);
   }, [allRoleMembers.data]);
 
   return (
-    <FormProvider {...form}>
-      <Flex
-        as="form"
-        direction="column"
-        gap={4}
-        onSubmit={form.handleSubmit((d) => {
+    <Form {...form}>
+      <form
+        className="bg-card rounded-lg border"
+        onSubmit={form.handleSubmit((values) => {
           if (!account) {
-            onError(new Error("Wallet not connected!"));
+            toast.error("Wallet not connected!");
             return;
           }
+
+          // remove empty values
+          const cleanedValues: { [k: string]: string[] } = {};
+
+          for (const k in values) {
+            const originalValue = values[k];
+            if (originalValue) {
+              const cleanedValue: string[] = [];
+              for (const v of originalValue) {
+                if (v !== "") {
+                  cleanedValue.push(v);
+                }
+              }
+              cleanedValues[k] = cleanedValue;
+            }
+          }
+
           const tx = createSetAllRoleMembersTx({
             account,
             contract,
-            roleMemberMap: d,
+            roleMemberMap: cleanedValues,
           });
+
           sendTx.mutate(tx, {
             onError: (error) => {
-              onError(error);
+              toast.error("Failed to update permissions", {
+                description: parseError(error),
+              });
             },
             onSuccess: () => {
-              form.reset(d);
-              onSuccess();
+              toast.success("Permissions updated successfully");
             },
           });
         })}
       >
-        {roles.map((role) => {
-          return (
-            <ContractPermission
-              contract={contract}
-              description={ROLE_DESCRIPTION_MAP[role] || ""}
-              isPending={allRoleMembers.isPending}
-              key={role}
-              role={role}
-            />
-          );
-        })}
-        <ButtonGroup justifyContent="flex-end">
+        <div>
+          {roles.map((role) => {
+            return (
+              <ContractPermission
+                contract={contract}
+                description={ROLE_DESCRIPTION_MAP[role] || ""}
+                isPending={allRoleMembers.isPending}
+                key={role}
+                role={role}
+              />
+            );
+          })}
+        </div>
+
+        <div className="flex justify-end gap-3 p-4 lg:p-6">
           <Button
-            borderRadius="md"
-            isDisabled={
-              !allRoleMembers.data ||
-              sendTx.isPending ||
-              !form.formState.isDirty
-            }
+            variant="outline"
+            disabled={!allRoleMembers.data || sendTx.isPending}
             onClick={() => form.reset(allRoleMembers.data)}
+            className="gap-2 bg-background"
           >
+            <RotateCcwIcon className="size-4 text-muted-foreground" />
             Reset
           </Button>
           <TransactionButton
             client={contract.client}
-            disabled={!form.formState.isDirty}
             isLoggedIn={isLoggedIn}
             isPending={sendTx.isPending}
-            transactionCount={1}
+            transactionCount={undefined}
             txChainID={contract.chain.id}
             type="submit"
+            variant="default"
           >
             {sendTx.isPending ? "Updating permissions" : "Update permissions"}
           </TransactionButton>
-        </ButtonGroup>
-      </Flex>
-    </FormProvider>
+        </div>
+      </form>
+    </Form>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/permissions-editor.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/permissions-editor.tsx
index 07a94e83cb5..f39f3c49b48 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/permissions-editor.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/components/permissions-editor.tsx
@@ -1,222 +1,109 @@
-import {
-  Flex,
-  FormControl,
-  IconButton,
-  Input,
-  InputGroup,
-  InputLeftAddon,
-  InputRightAddon,
-} from "@chakra-ui/react";
-import { Button } from "chakra/button";
-import { FormErrorMessage } from "chakra/form";
-import { Text } from "chakra/text";
-import {
-  ClipboardPasteIcon,
-  CopyIcon,
-  InfoIcon,
-  PlusIcon,
-  TrashIcon,
-} from "lucide-react";
-import { useState } from "react";
+import { InfoIcon, PlusIcon, XIcon } from "lucide-react";
 import { useFieldArray, useFormContext } from "react-hook-form";
-import { toast } from "sonner";
-import { isAddress, type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
-import {
-  AdminOnly,
-  AdminOrSelfOnly,
-} from "@/components/contracts/roles/admin-only";
-import { DelayedDisplay } from "@/components/misc/delayed-display";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { useClipboard } from "@/hooks/useClipboard";
+import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
+import { AdminOrSelfOnly } from "@/components/contracts/roles/admin-only";
+import { Alert, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
-interface PermissionEditorProps {
-  role: string;
-  contract: ThirdwebContract;
-}
-
-export const PermissionEditor: React.FC<PermissionEditorProps> = ({
+export const PermissionEditor = ({
   role,
   contract,
+  isUserAdmin,
+}: {
+  role: string;
+  contract: ThirdwebContract;
+  isUserAdmin: boolean;
 }) => {
-  const {
-    control,
-    watch,
-    formState: { isSubmitting },
-  } = useFormContext();
-  const { fields, append, remove } = useFieldArray({
-    control,
+  const form = useFormContext();
+  const formFields = useFieldArray({
+    control: form.control,
     name: role,
   });
-  const [address, setAddress] = useState("");
-
-  const members = watch(role) || [];
-  const isDisabled = !isAddress(address) || members.includes(address);
-
-  const addAddress = () => {
-    if (isDisabled) {
-      return;
-    }
-
-    append(address);
-    setAddress("");
-  };
 
   return (
-    <div className="flex flex-col gap-2">
-      {!fields?.length && (
-        <DelayedDisplay delay={100}>
-          <div className="flex flex-row items-center gap-3 rounded-md border border-border border-orange-100 bg-orange-50 p-[10px]">
-            <InfoIcon className="size-6 text-orange-400" />
-            <Text color="orange.800">
-              {role === "asset"
-                ? "No asset contracts are permitted to be listed on this marketplace."
-                : "Nobody has this permission for this contract."}
-            </Text>
-          </div>
-        </DelayedDisplay>
+    <div className="space-y-4">
+      {formFields.fields.length === 0 && (
+        <Alert variant="warning" className="bg-background">
+          <InfoIcon className="size-5" />
+          <AlertTitle>
+            {role === "asset"
+              ? "No asset contracts are permitted to be listed on this marketplace"
+              : "Nobody has this permission for this contract"}
+          </AlertTitle>
+        </Alert>
       )}
-      {fields?.map((field, index) => (
-        <PermissionAddress
-          contract={contract}
-          isSubmitting={isSubmitting}
-          key={field.id}
-          member={watch(`${role}.${index}`)}
-          removeAddress={() => remove(index)}
-          role={role}
-        />
-      ))}
-      <AdminOnly contract={contract}>
-        <FormControl
-          isDisabled={isSubmitting}
-          isInvalid={address && isDisabled}
-        >
-          <InputGroup>
-            <InputLeftAddon border="none" p={0}>
-              <ToolTipLabel label="Paste address from clipboard">
-                <IconButton
-                  aria-label="paste address"
-                  borderLeftRadius="md"
-                  borderRadius="sm"
-                  height="100%"
-                  icon={<ClipboardPasteIcon className="size-4" />}
-                  onClick={() => {
-                    navigator.clipboard
-                      .readText()
-                      .then((text) => {
-                        setAddress(text);
-                        return void 0;
-                      })
-                      .catch((error) => {
-                        console.error(error);
-                        toast.error("Failed to paste from clipboard");
-                      });
-                  }}
-                  width="100%"
-                />
-              </ToolTipLabel>
-            </InputLeftAddon>
-            <Input
-              fontFamily="mono"
-              onChange={(e) => setAddress(e.target.value)}
-              placeholder={ZERO_ADDRESS}
-              px={2}
-              value={address}
-              variant="filled"
+
+      {formFields.fields.length > 0 && (
+        <div className="space-y-3">
+          {formFields.fields?.map((field, index) => (
+            <PermissionAddress
+              contract={contract}
+              isSubmitting={form.formState.isSubmitting}
+              key={field.id}
+              member={form.watch(`${role}.${index}`)}
+              removeAddress={() => formFields.remove(index)}
+              role={role}
+              index={index}
+              isUserAdmin={isUserAdmin}
             />
-            <InputRightAddon border="none" p={0}>
+          ))}
+
+          {isUserAdmin && (
+            <div className="flex">
               <Button
-                alignItems="center"
-                borderLeftRadius="none"
-                borderRightRadius="md"
-                colorScheme="primary"
-                height="100%"
-                isDisabled={isDisabled}
-                justifyContent="center"
-                leftIcon={<PlusIcon className="size-4" />}
-                onClick={addAddress}
+                variant="outline"
+                onClick={() => formFields.append("")}
                 size="sm"
-                width="100%"
+                className="gap-2 rounded-full bg-background"
               >
+                <PlusIcon className="size-3.5" />
                 Add Address
               </Button>
-            </InputRightAddon>
-          </InputGroup>
-          <FormErrorMessage>
-            {members.includes(address)
-              ? "Address already has this role"
-              : !isAddress(address)
-                ? "Not a valid address"
-                : ""}
-          </FormErrorMessage>
-        </FormControl>
-      </AdminOnly>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 };
 
-interface PermissionAddressProps {
+const PermissionAddress = ({
+  member,
+  removeAddress,
+  isSubmitting,
+  contract,
+  index,
+  role,
+  isUserAdmin,
+}: {
   role: string;
   member: string;
   removeAddress: () => void;
   isSubmitting: boolean;
   contract: ThirdwebContract;
-}
-
-const PermissionAddress: React.FC<PermissionAddressProps> = ({
-  member,
-  removeAddress,
-  isSubmitting,
-  contract,
+  index: number;
+  isUserAdmin: boolean;
 }) => {
-  const { onCopy } = useClipboard(member);
+  const form = useFormContext();
 
   return (
-    <Flex align="center" gap={0}>
-      <InputGroup>
-        <InputLeftAddon border="none" p={0}>
-          <ToolTipLabel label="Copy address to clipboard">
-            <IconButton
-              aria-label="copy address"
-              borderLeftRadius="md"
-              borderRadius="sm"
-              height="100%"
-              icon={<CopyIcon className="size-4" />}
-              onClick={(e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                onCopy();
-                toast.info("Address copied.");
-              }}
-              width="100%"
-            />
-          </ToolTipLabel>
-        </InputLeftAddon>
-        <Input
-          defaultValue={member}
-          fontFamily="mono"
-          px={2}
-          variant="filled"
-        />
-        <AdminOrSelfOnly contract={contract} self={member}>
-          <InputRightAddon border="none" p={0}>
-            <Button
-              alignItems="center"
-              borderLeftRadius="none"
-              borderRightRadius="md"
-              colorScheme="red"
-              height="100%"
-              isDisabled={isSubmitting}
-              justifyContent="center"
-              leftIcon={<TrashIcon className="size-3" />}
-              onClick={removeAddress}
-              size="sm"
-              width="100%"
-            >
-              Remove
-            </Button>
-          </InputRightAddon>
-        </AdminOrSelfOnly>
-      </InputGroup>
-    </Flex>
+    <div className="flex gap-3 max-w-xl">
+      <Input
+        {...form.register(`${role}.${index}`)}
+        className="font-mono grow bg-background disabled:opacity-100"
+        disabled={isSubmitting || !isUserAdmin}
+        placeholder={ZERO_ADDRESS}
+      />
+      <AdminOrSelfOnly contract={contract} self={member}>
+        <Button
+          variant="outline"
+          className="rounded-full size-10 p-0 bg-background shrink-0"
+          onClick={removeAddress}
+        >
+          <XIcon className="size-4" />
+        </Button>
+      </AdminOrSelfOnly>
+    </div>
   );
 };