Migrate Billing related components to tailwind/shadcn - Part 1

Author: MananTank

apps/dashboard/src/components/engine/create/CreateEnginePage.tsx

@@ -93,10 +93,7 @@ export const CreateEnginePage = () => {
         />
       )}
 
-      <OnboardingModal
-        isOpen={isBillingModalOpen}
-        onClose={() => setIsBillingModalOpen(false)}
-      >
+      <OnboardingModal isOpen={isBillingModalOpen}>
         <LazyOnboardingBilling
           onSave={async () => {
             if (!selectedTier) {

apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx

@@ -216,10 +216,7 @@ export const ApplyForOpCreditsModal: React.FC = () => {
         />
       )}
       {/* // Add Payment Method Modal */}
-      <OnboardingModal
-        isOpen={paymentMethodModalState.isOpen}
-        onClose={paymentMethodModalState.onClose}
-      >
+      <OnboardingModal isOpen={paymentMethodModalState.isOpen}>
         <LazyOnboardingBilling
           onSave={() => {
             setHasAddedPaymentMethod(true);

apps/dashboard/src/components/onboarding/Billing.tsx

@@ -1,14 +1,13 @@
 import { accountKeys } from "@3rdweb-sdk/react/cache-keys";
 import { useUpdateAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { Flex, FocusLock } from "@chakra-ui/react";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTheme } from "next-themes";
 import { OnboardingPaymentForm } from "./PaymentForm";
-import { OnboardingTitle } from "./Title";
+import { TitleAndDescription } from "./Title";
 
 // only load stripe if the key is available
 const stripePromise = process.env.NEXT_PUBLIC_STRIPE_KEY
@@ -65,40 +64,37 @@ const OnboardingBilling: React.FC<OnboardingBillingProps> = ({
   };
 
   return (
-    <FocusLock>
-      <Flex flexDir="column" gap={8}>
-        <OnboardingTitle
-          heading="Add a payment method"
-          description="thirdweb is free to get started. Add a payment method to prevent service interruptions when you exceed limits."
+    <div>
+      <TitleAndDescription
+        heading="Add a payment method"
+        description="thirdweb is free to get started. Add a payment method to prevent service interruptions when you exceed limits."
+      />
+      <div className="h-4" />
+      <Elements
+        stripe={stripePromise}
+        options={{
+          mode: "setup",
+          paymentMethodCreation: "manual",
+          currency: "usd",
+          paymentMethodConfiguration:
+            process.env.NEXT_PUBLIC_STRIPE_PAYMENT_METHOD_CFG_ID,
+          appearance: {
+            theme: theme === "dark" ? "night" : "stripe",
+            ...appearance,
+          },
+        }}
+      >
+        <OnboardingPaymentForm
+          onSave={() => {
+            queryClient.invalidateQueries({
+              queryKey: accountKeys.me(user?.address as string),
+            });
+            onSave();
+          }}
+          onCancel={handleCancel}
         />
-        <Flex flexDir="column" gap={8}>
-          <Elements
-            stripe={stripePromise}
-            options={{
-              mode: "setup",
-              paymentMethodCreation: "manual",
-              currency: "usd",
-              paymentMethodConfiguration:
-                process.env.NEXT_PUBLIC_STRIPE_PAYMENT_METHOD_CFG_ID,
-              appearance: {
-                theme: theme === "dark" ? "night" : "stripe",
-                ...appearance,
-              },
-            }}
-          >
-            <OnboardingPaymentForm
-              onSave={() => {
-                queryClient.invalidateQueries({
-                  queryKey: accountKeys.me(user?.address as string),
-                });
-                onSave();
-              }}
-              onCancel={handleCancel}
-            />
-          </Elements>
-        </Flex>
-      </Flex>
-    </FocusLock>
+      </Elements>
+    </div>
   );
 };
 

apps/dashboard/src/components/onboarding/ChoosePlan.tsx

@@ -2,10 +2,9 @@ import {
   AccountPlan,
   useUpdateAccountPlan,
 } from "@3rdweb-sdk/react/hooks/useApi";
-import { SimpleGrid } from "@chakra-ui/react";
 import { PricingCard } from "components/homepage/sections/PricingCard";
 import { useTrack } from "hooks/analytics/useTrack";
-import { OnboardingTitle } from "./Title";
+import { TitleAndDescription } from "./Title";
 
 interface OnboardingChoosePlanProps {
   onSave: () => void;
@@ -70,11 +69,11 @@ const OnboardingChoosePlan: React.FC<OnboardingChoosePlanProps> = ({
 
   return (
     <>
-      <OnboardingTitle
+      <TitleAndDescription
         heading="Choose your plan"
         description="Get started for free with our Starter plan or subscribe to Growth plan to unlock higher rate limits and advanced features."
       />
-      <SimpleGrid columns={{ base: 1, md: 2 }} gap={8}>
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
         <PricingCard
           size="sm"
           name={AccountPlan.Free}
@@ -110,7 +109,7 @@ const OnboardingChoosePlan: React.FC<OnboardingChoosePlanProps> = ({
           }}
           onDashboard
         />
-      </SimpleGrid>
+      </div>
     </>
   );
 };

apps/dashboard/src/components/onboarding/ConfirmEmail.tsx

@@ -17,7 +17,7 @@ import { useForm } from "react-hook-form";
 import OtpInput from "react-otp-input";
 import { Button, Text } from "tw-components";
 import { shortenString } from "utils/usedapp-external";
-import { OnboardingTitle } from "./Title";
+import { TitleAndDescription } from "./Title";
 
 interface OnboardingConfirmEmailProps {
   email: string;
@@ -158,7 +158,7 @@ const OnboardingConfirmEmail: React.FC<OnboardingConfirmEmailProps> = ({
 
   return (
     <>
-      <OnboardingTitle
+      <TitleAndDescription
         heading={
           !linking
             ? "You're almost done! Verify your email."

apps/dashboard/src/components/onboarding/General.tsx

@@ -4,7 +4,7 @@ import { AccountForm } from "components/settings/Account/AccountForm";
 import { useState } from "react";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
 import { Button } from "tw-components";
-import { OnboardingTitle } from "./Title";
+import { TitleAndDescription } from "./Title";
 
 type OnboardingGeneralProps = {
   account: Account;
@@ -34,7 +34,7 @@ const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
 
   return (
     <FocusLock>
-      <OnboardingTitle
+      <TitleAndDescription
         heading={
           !existing
             ? "Create your thirdweb account"

apps/dashboard/src/components/onboarding/LinkWallet.tsx

@@ -3,7 +3,7 @@ import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
 import { useTrack } from "hooks/analytics/useTrack";
 import { Button, TrackedLink } from "tw-components";
 import { shortenString } from "utils/usedapp-external";
-import { OnboardingTitle } from "./Title";
+import { TitleAndDescription } from "./Title";
 
 interface OnboardingLinkWalletProps {
   email: string;
@@ -64,7 +64,7 @@ const OnboardingLinkWallet: React.FC<OnboardingLinkWalletProps> = ({
 
   return (
     <>
-      <OnboardingTitle
+      <TitleAndDescription
         heading="Linking Wallets"
         description={
           <>

apps/dashboard/src/components/onboarding/Modal.tsx

@@ -1,52 +1,34 @@
-import {
-  Flex,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalOverlay,
-  useBreakpointValue,
-} from "@chakra-ui/react";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
 import { IconLogo } from "components/logo";
 import type { ComponentWithChildren } from "types/component-with-children";
 
 interface OnboardingModalProps {
   isOpen: boolean;
-  onClose: () => void;
   wide?: boolean;
 }
 
 export const OnboardingModal: ComponentWithChildren<OnboardingModalProps> = ({
   children,
   isOpen,
-  onClose,
-  wide = false,
+  wide,
 }) => {
-  const isMobile = useBreakpointValue({ base: true, md: false });
-
   return (
-    <Modal
-      size={isMobile ? "full" : wide ? "3xl" : "lg"}
-      closeOnEsc={false}
-      allowPinchZoom
-      closeOnOverlayClick={false}
-      isCentered={!isMobile}
-      isOpen={isOpen}
-      onClose={onClose}
-      trapFocus={false}
-      blockScrollOnMount={false}
-    >
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalBody p={8} as={Flex} gap={4} flexDir="column">
-          <div className="aspect-square w-[40px]">
+    <Dialog open={isOpen}>
+      <DialogContent
+        dialogOverlayClassName="z-[10000]"
+        className={cn("z-[10001] max-h-[90vh] overflow-auto", {
+          "!max-w-[768px]": wide,
+        })}
+        dialogCloseClassName="hidden"
+      >
+        <div className="flex flex-col gap-4">
+          <div className="w-[40px]">
             <IconLogo />
           </div>
-
-          <Flex flexDir="column" gap={8}>
-            {children}
-          </Flex>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
+          <div className="flex flex-col gap-8">{children}</div>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 };

apps/dashboard/src/components/onboarding/PaymentForm.tsx

@@ -1,11 +1,7 @@
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Alert, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 import { useCreatePaymentMethod } from "@3rdweb-sdk/react/hooks/useApi";
-import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  Flex,
-  Spinner,
-} from "@chakra-ui/react";
 import {
   PaymentElement,
   useElements,
@@ -15,7 +11,6 @@ import { PaymentVerificationFailureAlert } from "components/settings/Account/Bil
 import { useErrorHandler } from "contexts/error-handler";
 import { useTrack } from "hooks/analytics/useTrack";
 import { type FormEvent, useState } from "react";
-import { Button, Text } from "tw-components";
 
 interface OnboardingPaymentForm {
   onSave: () => void;
@@ -101,69 +96,44 @@ export const OnboardingPaymentForm: React.FC<OnboardingPaymentForm> = ({
 
   return (
     <form id="payment-form" onSubmit={handleSubmit}>
-      <Flex flexDir="column" gap={8}>
+      <div className="flex flex-col gap-6">
         <PaymentElement
           onLoaderStart={() => setLoading(false)}
           options={{ terms: { card: "never" } }}
         />
 
         {loading ? (
-          <div className="flex items-center justify-center pb-16">
-            <Spinner size="sm" />
+          <div className="flex min-h-[100px] items-center justify-center">
+            <Spinner className="size-5" />
           </div>
         ) : (
-          <Flex flexDir="column" gap={4}>
+          <div className="flex flex-col gap-6">
             {paymentFailureCode ? (
               <PaymentVerificationFailureAlert
                 paymentFailureCode={paymentFailureCode}
               />
             ) : (
-              <Alert
-                status="info"
-                borderRadius="md"
-                as={Flex}
-                alignItems="start"
-                justifyContent="space-between"
-                variant="left-accent"
-                bg="inputBg"
-              >
-                <div className="flex flex-row">
-                  <AlertIcon boxSize={4} mt={1} ml={1} />
-                  <Flex flexDir="column" gap={1} pl={1}>
-                    <AlertDescription as={Text} fontSize="body.md">
-                      A temporary hold will be placed and immediately released
-                      on your payment method.
-                    </AlertDescription>
-                  </Flex>
-                </div>
+              <Alert variant="info">
+                <AlertTitle className="text-sm">
+                  A temporary hold will be placed and immediately released on
+                  your payment method.
+                </AlertTitle>
               </Alert>
             )}
 
-            <Button
-              w="full"
-              size="lg"
-              fontSize="md"
-              colorScheme="blue"
-              type="submit"
-              isDisabled={!stripe}
-              isLoading={saving}
-            >
-              Add payment
-            </Button>
-            <Button
-              size="lg"
-              fontSize="sm"
-              variant="link"
-              mt="4"
-              onClick={onCancel}
-              isDisabled={saving}
-              colorScheme="blue"
-            >
-              <Text color="blue.500">I&apos;ll do this later</Text>
-            </Button>
-          </Flex>
+            <div className="flex justify-end gap-4">
+              <Button variant="outline" onClick={onCancel} disabled={saving}>
+                I'll do this later
+              </Button>
+
+              <Button className="gap-2" type="submit" disabled={!stripe}>
+                {loading && <Spinner className="size-4" />}
+                Add payment
+              </Button>
+            </div>
+          </div>
         )}
-      </Flex>
+      </div>
     </form>
   );
 };