refactor: add tooltip provider to Providers

guildxyz · Jul 24, 2024 · 2c0282b · 2c0282b
1 parent 1514f37
commit 2c0282b
Show file tree

Hide file tree

Showing 12 changed files with 213 additions and 287 deletions.
diff --git a/src/v2/components/Account/components/AccountModal/AccountModal.tsx b/src/v2/components/Account/components/AccountModal/AccountModal.tsx
@@ -13,12 +13,7 @@ import {
   DialogTitle,
 } from "@/components/ui/Dialog"
 import { Separator } from "@/components/ui/Separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/Tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
 import { useDisclosure } from "@/hooks/useDisclosure"
 import { useUserPublic } from "@/hooks/useUserPublic"
 import { LinkBreak, SignOut } from "@phosphor-icons/react/dist/ssr"
@@ -128,24 +123,22 @@ const AccountModal = () => {
                   />
                 </div>
 
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        size="icon"
-                        variant="outline"
-                        className="ml-auto size-8"
-                        onClick={handleLogout}
-                        aria-label="Disconnect"
-                      >
-                        <SignOut weight="bold" className="size-3" />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <span>Disconnect</span>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      size="icon"
+                      variant="outline"
+                      className="ml-auto size-8"
+                      onClick={handleLogout}
+                      aria-label="Disconnect"
+                    >
+                      <SignOut weight="bold" className="size-3" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <span>Disconnect</span>
+                  </TooltipContent>
+                </Tooltip>
               </div>
 
               <AccountConnections />

diff --git a/src/v2/components/Account/components/AccountModal/components/AccountConnections.tsx b/src/v2/components/Account/components/AccountModal/components/AccountConnections.tsx
@@ -1,10 +1,5 @@
 import { Separator } from "@/components/ui/Separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/Tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
 import { cn } from "@/lib/utils"
 import { Question } from "@phosphor-icons/react/dist/ssr"
 import useUser from "components/[guild]/hooks/useUser"
@@ -67,16 +62,14 @@ const AccountConnections = () => {
         titleRightElement={
           addresses?.length > 1 ? (
             <div className="flex w-full items-center justify-between">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Question weight="bold" />
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>Each of your addresses will be used for requirement checks</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Question weight="bold" />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Each of your addresses will be used for requirement checks</p>
+                </TooltipContent>
+              </Tooltip>
               <LinkAddressButton variant="ghost" className="-my-1" />
             </div>
           ) : undefined

diff --git a/src/v2/components/Account/components/AccountModal/components/AddressTypeBadge.tsx b/src/v2/components/Account/components/AccountModal/components/AddressTypeBadge.tsx
@@ -1,10 +1,5 @@
 import { Badge, BadgeProps } from "@/components/ui/Badge"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/Tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
 import { User } from "types"
 
 type AddressType = Exclude<User["addresses"][number]["walletType"], "EVM">
@@ -23,18 +18,16 @@ const TYPE_NAMES: Record<AddressType, string> = {
 }
 
 const AddressTypeBadge = ({ type, size }: Props) => (
-  <TooltipProvider>
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Badge size={size} className="px-1">
-          <img src={TYPE_ICONS[type]} alt={TYPE_NAMES[type]} className="size-3" />
-        </Badge>
-      </TooltipTrigger>
-      <TooltipContent>
-        <span>{TYPE_NAMES[type]}</span>
-      </TooltipContent>
-    </Tooltip>
-  </TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Badge size={size} className="px-1">
+        <img src={TYPE_ICONS[type]} alt={TYPE_NAMES[type]} className="size-3" />
+      </Badge>
+    </TooltipTrigger>
+    <TooltipContent>
+      <span>{TYPE_NAMES[type]}</span>
+    </TooltipContent>
+  </Tooltip>
 )
 
 export default AddressTypeBadge
diff --git a/src/v2/components/Account/components/AccountModal/components/DisconnectAccountButton.tsx b/src/v2/components/Account/components/AccountModal/components/DisconnectAccountButton.tsx
@@ -9,12 +9,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/AlertDialog"
 import { Button, ButtonProps } from "@/components/ui/Button"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/Tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
 import { DisclosureState } from "@/hooks/useDisclosure"
 import { cn } from "@/lib/utils"
 import { LinkBreak } from "@phosphor-icons/react/dist/ssr"
@@ -35,24 +30,22 @@ const DisconnectAccountButton = ({
   state: DisclosureState
 }) => (
   <>
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            className={cn("size-8 rounded-full px-0", className)}
-            colorScheme="destructive"
-            variant="ghost"
-            aria-label="Disconnect account"
-            onClick={onOpen}
-          >
-            <LinkBreak weight="bold" className="h-3 w-3" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <span>Disconnect account</span>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          className={cn("size-8 rounded-full px-0", className)}
+          colorScheme="destructive"
+          variant="ghost"
+          aria-label="Disconnect account"
+          onClick={onOpen}
+        >
+          <LinkBreak weight="bold" className="h-3 w-3" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <span>Disconnect account</span>
+      </TooltipContent>
+    </Tooltip>
 
     <AlertDialog open={isOpen}>
       <AlertDialogContent onEscapeKeyDown={onClose}>

diff --git a/src/v2/components/Account/components/AccountModal/components/EmailAddress.tsx b/src/v2/components/Account/components/AccountModal/components/EmailAddress.tsx
@@ -19,12 +19,7 @@ import {
 } from "@/components/ui/Form"
 import { Input } from "@/components/ui/Input"
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/InputOTP"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/Tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
 import { useToast } from "@/components/ui/hooks/useToast"
 import { useDisclosure } from "@/hooks/useDisclosure"
 import { cn } from "@/lib/utils"
@@ -266,32 +261,30 @@ const ConnectEmailButton = ({
 
             <DialogFooter className="pt-2">
               {shouldShowPinEntry ? (
-                <TooltipProvider>
-                  <Tooltip open={!isResendButtonDisabled ? false : undefined}>
-                    <TooltipTrigger asChild>
-                      <Button
-                        onClick={submit}
-                        isLoading={
-                          verificationRequest.isLoading ||
-                          connect.isLoading ||
-                          connect.isSigning
-                        }
-                        variant="ghost"
-                        size="sm"
-                        disabled={isResendButtonDisabled}
-                        className="w-full rounded-lg"
-                      >
-                        Resend code
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>
-                        Check if you received the first code before requesting a new
-                        one (check in the spam as well)
-                      </p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
+                <Tooltip open={!isResendButtonDisabled ? false : undefined}>
+                  <TooltipTrigger asChild>
+                    <Button
+                      onClick={submit}
+                      isLoading={
+                        verificationRequest.isLoading ||
+                        connect.isLoading ||
+                        connect.isSigning
+                      }
+                      variant="ghost"
+                      size="sm"
+                      disabled={isResendButtonDisabled}
+                      className="w-full rounded-lg"
+                    >
+                      Resend code
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>
+                      Check if you received the first code before requesting a new
+                      one (check in the spam as well)
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
               ) : (
                 <Button
                   onClick={submit}

diff --git a/src/v2/components/Account/components/AccountModal/components/FarcasterProfile.tsx b/src/v2/components/Account/components/AccountModal/components/FarcasterProfile.tsx
@@ -17,12 +17,7 @@ import {
 } from "@/components/ui/Dialog"
 import { Separator } from "@/components/ui/Separator"
 import { Skeleton } from "@/components/ui/Skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/Tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
 import { useToast } from "@/components/ui/hooks/useToast"
 import { useDisclosure } from "@/hooks/useDisclosure"
 import { cn } from "@/lib/utils"
@@ -246,29 +241,27 @@ const ConnectFarcasterButton = ({
                     : `${seconds} seconds`}
                 </p>
 
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        size="xs"
-                        variant="ghost"
-                        className="w-6 px-0 text-muted-foreground"
-                        disabled={!shouldEnableRegenerateButton}
-                        isLoading={signedKeyRequest.isLoading}
-                        aria-label="Regenerate Farcaster QR code"
-                        onClick={() => {
-                          captureEvent("[farcaster] manual qr regeneration")
-                          onRegenerate()
-                        }}
-                      >
-                        <ArrowCounterClockwise weight="bold" />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <span>Regenerate now</span>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      size="xs"
+                      variant="ghost"
+                      className="w-6 px-0 text-muted-foreground"
+                      disabled={!shouldEnableRegenerateButton}
+                      isLoading={signedKeyRequest.isLoading}
+                      aria-label="Regenerate Farcaster QR code"
+                      onClick={() => {
+                        captureEvent("[farcaster] manual qr regeneration")
+                        onRegenerate()
+                      }}
+                    >
+                      <ArrowCounterClockwise weight="bold" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <span>Regenerate now</span>
+                  </TooltipContent>
+                </Tooltip>
               </div>
 
               <p className="text-center text-muted-foreground text-sm">

diff --git a/src/v2/components/Account/components/AccountModal/components/LinkedAddress.tsx b/src/v2/components/Account/components/AccountModal/components/LinkedAddress.tsx
@@ -21,12 +21,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/DropdownMenu"
 import { Skeleton } from "@/components/ui/Skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/Tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
 import { useDisclosure } from "@/hooks/useDisclosure"
 import {
   CircleNotch,
@@ -80,23 +75,21 @@ const LinkedAddress = ({ addressData }: Props) => {
             className="mr-0.5 font-bold text-sm"
           />
           {isDelegated && (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Badge>
-                    <Image
-                      width={15}
-                      height={15}
-                      src={`/walletLogos/delegatecash.png`}
-                      alt="Delegate cash logo"
-                    />
-                  </Badge>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <span>Delegate.cash</span>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Badge>
+                  <Image
+                    width={15}
+                    height={15}
+                    src={`/walletLogos/delegatecash.png`}
+                    alt="Delegate cash logo"
+                  />
+                </Badge>
+              </TooltipTrigger>
+              <TooltipContent>
+                <span>Delegate.cash</span>
+              </TooltipContent>
+            </Tooltip>
           )}
           {walletType !== "EVM" && <AddressTypeTag type={walletType} size="sm" />}
           {isCurrent && (