From 41fb5803007b159f92a47177a36971143056e7b7 Mon Sep 17 00:00:00 2001 From: Dominik Stumpf <122315398+dominik-stumpf@users.noreply.github.com> Date: Wed, 24 Jul 2024 14:34:17 +0200 Subject: [PATCH] refactor: add tooltip provider to Providers (#1409) * refactor: add tooltip provider to Providers * chore: add tooltip provider to _app.tsx --- src/pages/_app.tsx | 61 ++++++++--------- .../components/AccountModal/AccountModal.tsx | 41 +++++------- .../components/AccountConnections.tsx | 25 +++---- .../components/AddressTypeBadge.tsx | 29 ++++----- .../components/DisconnectAccountButton.tsx | 41 +++++------- .../AccountModal/components/EmailAddress.tsx | 57 +++++++--------- .../components/FarcasterProfile.tsx | 51 +++++++-------- .../AccountModal/components/LinkedAddress.tsx | 39 +++++------ .../components/PrimaryAddressBadge.tsx | 31 ++++----- .../components/NetworkModal/NetworkButton.tsx | 65 +++++++++---------- src/v2/components/CopyableAddress.tsx | 51 +++++++-------- src/v2/components/GuildCard.tsx | 31 ++++----- src/v2/components/Providers/Providers.tsx | 39 ++++++----- 13 files changed, 245 insertions(+), 316 deletions(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 4668f8fae7..39faee8901 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -28,6 +28,7 @@ import { LegacyPostHogProvider } from "components/_app/LegacyPostHogProvider" import { LegacyWeb3ConnectionManager } from "components/_app/LegacyWeb3ConnectionManager" import "wicg-inert" import AppErrorBoundary from "@/components/AppErrorBoundary" +import { TooltipProvider } from "@/components/ui/Tooltip" import NextTopLoader from "nextjs-toploader" const DynamicReCAPTCHA = dynamic(() => import("v2/components/ReCAPTCHA")) @@ -65,38 +66,40 @@ const App = ({ - - - - - - - - - - + + + + + + + + + + + - - - - + + + + - - - - - - + + + + + + - - + + + ) diff --git a/src/v2/components/Account/components/AccountModal/AccountModal.tsx b/src/v2/components/Account/components/AccountModal/AccountModal.tsx index 90b3c0d87f..436c97843f 100644 --- 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 = () => { /> - - - - - - - Disconnect - - - + + + + + + Disconnect + + diff --git a/src/v2/components/Account/components/AccountModal/components/AccountConnections.tsx b/src/v2/components/Account/components/AccountModal/components/AccountConnections.tsx index 31a9c37c45..198284e3a8 100644 --- 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 ? (
- - - - - - -

Each of your addresses will be used for requirement checks

-
-
-
+ + + + + +

Each of your addresses will be used for requirement checks

+
+
) : undefined diff --git a/src/v2/components/Account/components/AccountModal/components/AddressTypeBadge.tsx b/src/v2/components/Account/components/AccountModal/components/AddressTypeBadge.tsx index 1ae2558439..63c9acf52f 100644 --- 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 @@ -23,18 +18,16 @@ const TYPE_NAMES: Record = { } const AddressTypeBadge = ({ type, size }: Props) => ( - - - - - {TYPE_NAMES[type]} - - - - {TYPE_NAMES[type]} - - - + + + + {TYPE_NAMES[type]} + + + + {TYPE_NAMES[type]} + + ) 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 index a7ae9f88b8..1f080e6995 100644 --- 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 }) => ( <> - - - - - - - Disconnect account - - - + + + + + + Disconnect account + + diff --git a/src/v2/components/Account/components/AccountModal/components/EmailAddress.tsx b/src/v2/components/Account/components/AccountModal/components/EmailAddress.tsx index 127b49aab0..1d80efbec4 100644 --- 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 = ({ {shouldShowPinEntry ? ( - - - - - - -

- Check if you received the first code before requesting a new - one (check in the spam as well) -

-
-
-
+ + + + + +

+ Check if you received the first code before requesting a new + one (check in the spam as well) +

+
+
) : ( - - - Regenerate now - - - + + + + + + Regenerate now + +

diff --git a/src/v2/components/Account/components/AccountModal/components/LinkedAddress.tsx b/src/v2/components/Account/components/AccountModal/components/LinkedAddress.tsx index ca28e23ff6..6860d883df 100644 --- 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 && ( - - - - - Delegate cash logo - - - - Delegate.cash - - - + + + + Delegate cash logo + + + + Delegate.cash + + )} {walletType !== "EVM" && } {isCurrent && ( diff --git a/src/v2/components/Account/components/AccountModal/components/PrimaryAddressBadge.tsx b/src/v2/components/Account/components/AccountModal/components/PrimaryAddressBadge.tsx index 62ecf9242f..7db0d8d77f 100644 --- a/src/v2/components/Account/components/AccountModal/components/PrimaryAddressBadge.tsx +++ b/src/v2/components/Account/components/AccountModal/components/PrimaryAddressBadge.tsx @@ -1,28 +1,21 @@ import { Badge, BadgeProps } from "@/components/ui/Badge" -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@/components/ui/Tooltip" +import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip" type Props = { size?: BadgeProps["size"] } const PrimaryAddressBadge = ({ size }: Props): JSX.Element => ( - - - - Primary - - -

- Guild owners will receive this address if they export members from their - guild -

- - - + + + Primary + + +

+ Guild owners will receive this address if they export members from their + guild +

+
+
) export default PrimaryAddressBadge diff --git a/src/v2/components/Account/components/NetworkModal/NetworkButton.tsx b/src/v2/components/Account/components/NetworkModal/NetworkButton.tsx index 8df46d90eb..f3d8c3928e 100644 --- a/src/v2/components/Account/components/NetworkModal/NetworkButton.tsx +++ b/src/v2/components/Account/components/NetworkModal/NetworkButton.tsx @@ -1,10 +1,5 @@ import { Button } from "@/components/ui/Button" -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@/components/ui/Tooltip" +import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip" import { cn } from "@/lib/utils" import { useChainId } from "wagmi" import { CHAIN_CONFIG, Chain, Chains } from "wagmiConfig/chains" @@ -21,36 +16,34 @@ const NetworkButton = ({ chain, requestNetworkChange }: Props) => { const shouldStayClosed = !isCurrentChain && !CHAIN_CONFIG[chain].deprecated return ( - - - - - - - - {isCurrentChain - ? `${CHAIN_CONFIG[chain].name} is currently selected` - : "Deprecated chain"} - - - - + + + + + + + {isCurrentChain + ? `${CHAIN_CONFIG[chain].name} is currently selected` + : "Deprecated chain"} + + + ) } diff --git a/src/v2/components/CopyableAddress.tsx b/src/v2/components/CopyableAddress.tsx index 42b31073ea..6089388032 100644 --- a/src/v2/components/CopyableAddress.tsx +++ b/src/v2/components/CopyableAddress.tsx @@ -3,12 +3,7 @@ import { ButtonHTMLAttributes, useRef, useState } from "react" import { useCopyToClipboard } from "usehooks-ts" import shortenHex from "utils/shortenHex" import { Button } from "./ui/Button" -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "./ui/Tooltip" +import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/Tooltip" interface Props extends ButtonHTMLAttributes { address: string @@ -28,29 +23,27 @@ const CopyableAddress = ({ const [forceOpenTooltip, setForceOpenTooltip] = useState(false) return ( - - - - - - - {forceOpenTooltip ? "Copied" : "Click to copy address"} - - - + + + + + + {forceOpenTooltip ? "Copied" : "Click to copy address"} + + ) } diff --git a/src/v2/components/GuildCard.tsx b/src/v2/components/GuildCard.tsx index aae5e0b741..6fe6462564 100644 --- a/src/v2/components/GuildCard.tsx +++ b/src/v2/components/GuildCard.tsx @@ -7,12 +7,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "./ui/Avatar" import { Badge } from "./ui/Badge" import { Card } from "./ui/Card" import { Skeleton } from "./ui/Skeleton" -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "./ui/Tooltip" +import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/Tooltip" type Props = { guildData: GuildBase @@ -36,19 +31,17 @@ export const GuildCard: React.FC = ({ guildData }) => ( {guildData.name} {guildData.tags.includes("VERIFIED") && ( - - - - - - - This guild is verified by Guild.xyz - - - + + + + + + This guild is verified by Guild.xyz + + )}
diff --git a/src/v2/components/Providers/Providers.tsx b/src/v2/components/Providers/Providers.tsx index ad0ecc61e9..8295007a83 100644 --- a/src/v2/components/Providers/Providers.tsx +++ b/src/v2/components/Providers/Providers.tsx @@ -16,6 +16,7 @@ import { wagmiConfig } from "wagmiConfig" import { AccountModal } from "../Account/components/AccountModal" import { Web3ConnectionManager } from "../Web3ConnectionManager" import { Toaster } from "../ui/Toaster" +import { TooltipProvider } from "../ui/Tooltip" import { IntercomProvider } from "./IntercomProvider" import { PostHogProvider } from "./PostHogProvider" @@ -35,25 +36,27 @@ export function Providers({ children }: { children: ReactNode }) { enableSystem disableTransitionOnChange > - - - - - - - {children} - - - - - - - - - - + + + + + + + + {children} + + + + + + + + + + - + + {shouldUseReCAPTCHA && (