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
- 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) +
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 - - - + + + + + + + + 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 ( - - - - - {/* Most of these icons are SVGs or small PNGs, so we don't need to optimize them */} - {/* eslint-disable-next-line @next/next/no-img-element */} - - {CHAIN_CONFIG[chain].name} - - - - - {isCurrentChain - ? `${CHAIN_CONFIG[chain].name} is currently selected` - : "Deprecated chain"} - - - - + + + + {/* Most of these icons are SVGs or small PNGs, so we don't need to optimize them */} + {/* eslint-disable-next-line @next/next/no-img-element */} + + {CHAIN_CONFIG[chain].name} + + + + + {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 ( - - - - - copyToClipboard(address).then(() => { - setForceOpenTooltip(true) - setTimeout(() => setForceOpenTooltip(false), 3000) - }) - } - variant="unstyled" - className={cn("h-max p-0", className)} - {...props} - > - {domain || shortenHex(address, decimals)} - - - - {forceOpenTooltip ? "Copied" : "Click to copy address"} - - - + + + + copyToClipboard(address).then(() => { + setForceOpenTooltip(true) + setTimeout(() => setForceOpenTooltip(false), 3000) + }) + } + variant="unstyled" + className={cn("h-max p-0", className)} + {...props} + > + {domain || shortenHex(address, decimals)} + + + + {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 && (
- Guild owners will receive this address if they export members from their - guild -
+ Guild owners will receive this address if they export members from their + guild +
Guild.xyz