Migrate Engine Overview page to shadcn/tailwind - Part1

thirdweb-dev · Oct 4, 2024 · 1eec780 · 1eec780
1 parent b148fa0
commit 1eec780
Show file tree

Hide file tree

Showing 5 changed files with 378 additions and 280 deletions.
diff --git a/apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx b/apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx
@@ -7,7 +7,7 @@ export function FormFieldSetup(props: {
   label: string;
   errorMessage: React.ReactNode | undefined;
   children: React.ReactNode;
-  tooltip: React.ReactNode | undefined;
+  tooltip?: React.ReactNode;
   isRequired: boolean;
 }) {
   return (

diff --git a/apps/dashboard/src/@/components/ui/input.tsx b/apps/dashboard/src/@/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background selection:bg-foreground selection:text-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}

diff --git a/apps/dashboard/src/components/engine/overview/create-backend-wallet-button.tsx b/apps/dashboard/src/components/engine/overview/create-backend-wallet-button.tsx
@@ -1,49 +1,41 @@
+"use client";
+
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 import {
   type CreateBackendWalletInput,
   useEngineCreateBackendWallet,
   useEngineWalletConfig,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-} from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Button, FormLabel, Text } from "tw-components";
+import { toast } from "sonner";
 
-interface CreateBackendWalletButtonProps {
+export function CreateBackendWalletButton(props: {
   instanceUrl: string;
-}
-
-export const CreateBackendWalletButton: React.FC<
-  CreateBackendWalletButtonProps
-> = ({ instanceUrl }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+}) {
+  const { instanceUrl } = props;
+  const [isOpen, setIsOpen] = useState(false);
   const { data: walletConfig } = useEngineWalletConfig(instanceUrl);
-  const { mutate: createBackendWallet } =
-    useEngineCreateBackendWallet(instanceUrl);
-  const { onSuccess, onError } = useTxNotifications(
-    "Wallet created successfully.",
-    "Failed to create wallet.",
-  );
+  const createWallet = useEngineCreateBackendWallet(instanceUrl);
   const trackEvent = useTrack();
   const form = useForm<CreateBackendWalletInput>();
 
   const onSubmit = async (data: CreateBackendWalletInput) => {
-    createBackendWallet(data, {
+    const promise = createWallet.mutateAsync(data, {
       onSuccess: () => {
-        onSuccess();
-        onClose();
+        setIsOpen(false);
         trackEvent({
           category: "engine",
           action: "create-backend-wallet",
@@ -52,7 +44,6 @@ export const CreateBackendWalletButton: React.FC<
         });
       },
       onError: (error) => {
-        onError(error);
         trackEvent({
           category: "engine",
           action: "create-backend-wallet",
@@ -62,6 +53,11 @@ export const CreateBackendWalletButton: React.FC<
         });
       },
     });
+
+    toast.promise(promise, {
+      success: "Wallet created successfully",
+      error: "Failed to create wallet",
+    });
   };
 
   const walletType =
@@ -73,43 +69,58 @@ export const CreateBackendWalletButton: React.FC<
 
   return (
     <>
-      <Button onClick={onOpen} colorScheme="primary">
-        Create
-      </Button>
-      <Modal isOpen={isOpen} onClose={onClose} isCentered>
-        <ModalOverlay />
-        <ModalContent className="!bg-background rounded-lg border border-border">
+      <Button onClick={() => setIsOpen(true)}>Create</Button>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent
+          className="z-[10001] p-0"
+          dialogOverlayClassName="z-[10000]"
+        >
           <form onSubmit={form.handleSubmit(onSubmit)}>
-            <ModalHeader>Create {walletType} wallet</ModalHeader>
-            <ModalCloseButton />
-            <ModalBody>
+            <div className="p-6">
+              <DialogHeader className="mb-4">
+                <DialogTitle className="font-semibold text-2xl tracking-tight">
+                  Create {walletType} wallet
+                </DialogTitle>
+              </DialogHeader>
+
               <div className="flex flex-col gap-4">
-                <FormControl>
-                  <FormLabel>Wallet Type</FormLabel>
-                  <Text>{walletType}</Text>
-                </FormControl>
-                <FormControl>
-                  <FormLabel>Label</FormLabel>
+                <div>
+                  <p className="mb-1 text-sm">Wallet Type</p>
+                  <Badge className="text-sm" variant="outline">
+                    {walletType}
+                  </Badge>
+                </div>
+
+                <FormFieldSetup
+                  label="Label"
+                  errorMessage={
+                    form.getFieldState("label", form.formState).error?.message
+                  }
+                  htmlFor="wallet-label"
+                  isRequired={false}
+                >
                   <Input
+                    id="wallet-label"
                     type="text"
                     placeholder="Enter a descriptive label"
                     {...form.register("label")}
                   />
-                </FormControl>
+                </FormFieldSetup>
               </div>
-            </ModalBody>
+            </div>
 
-            <ModalFooter as={Flex} gap={3}>
-              <Button onClick={onClose} variant="ghost">
+            <DialogFooter className="mt-4 border-border border-t bg-muted/50 p-6">
+              <Button onClick={() => setIsOpen(false)} variant="outline">
                 Cancel
               </Button>
-              <Button type="submit" colorScheme="primary">
+              <Button type="submit" className="min-w-28 gap-2">
+                {createWallet.isPending && <Spinner className="size-4" />}
                 Create
               </Button>
-            </ModalFooter>
+            </DialogFooter>
           </form>
-        </ModalContent>
-      </Modal>
+        </DialogContent>
+      </Dialog>
     </>
   );
-};
+}