From fed535c7615044eab39b50fe67046727a028623f Mon Sep 17 00:00:00 2001 From: "Eugene P." Date: Thu, 24 Oct 2024 18:26:05 +0300 Subject: [PATCH] refactor(wallet): Remove, rebrand, cleanup ButtonOrLink, tooltip, components/menu (#3586) --- .../src/ui/app/components/IconButton.tsx | 39 ----- .../ui/app/components/PasswordInputDialog.tsx | 24 ++- .../accounts/AccountBalanceItem.tsx | 10 +- apps/wallet/src/ui/app/components/index.ts | 1 - .../menu/button/MenuButton.module.scss | 56 ------- .../menu/button/WalletSettingsButton.tsx | 18 +- .../menu/content/AutoLockAccounts.tsx | 2 +- .../accounts-finder/AccountsFinderView.tsx | 17 +- .../src/ui/app/shared/tooltip/index.tsx | 154 ------------------ .../src/ui/app/shared/utils/ButtonOrLink.tsx | 88 ---------- 10 files changed, 48 insertions(+), 361 deletions(-) delete mode 100644 apps/wallet/src/ui/app/components/IconButton.tsx delete mode 100644 apps/wallet/src/ui/app/components/menu/button/MenuButton.module.scss delete mode 100644 apps/wallet/src/ui/app/shared/tooltip/index.tsx delete mode 100644 apps/wallet/src/ui/app/shared/utils/ButtonOrLink.tsx diff --git a/apps/wallet/src/ui/app/components/IconButton.tsx b/apps/wallet/src/ui/app/components/IconButton.tsx deleted file mode 100644 index a49f4014c53..00000000000 --- a/apps/wallet/src/ui/app/components/IconButton.tsx +++ /dev/null @@ -1,39 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// Modifications Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -import { cva, type VariantProps } from 'class-variance-authority'; - -import { ButtonOrLink, type ButtonOrLinkProps } from '../shared/utils/ButtonOrLink'; - -interface IconButtonProps extends ButtonOrLinkProps, VariantProps { - icon: JSX.Element; -} - -const buttonStyles = cva( - [ - 'flex items-center rounded-sm bg-transparent border-0 p-0 text-hero-darkest/40 hover:text-hero-darkest/50 transition cursor-pointer', - ], - { - variants: { - variant: { - transparent: '', - subtle: 'hover:bg-hero-darkest/10', - }, - }, - defaultVariants: { - variant: 'subtle', - }, - }, -); - -export function IconButton({ onClick, icon, variant, ...buttonOrLinkProps }: IconButtonProps) { - return ( - - ); -} diff --git a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx index c86db2e1074..842e31ac7f2 100644 --- a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx +++ b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx @@ -8,8 +8,15 @@ import { Form, Formik } from 'formik'; import { toast } from 'react-hot-toast'; import { useNavigate } from 'react-router-dom'; import { object, string as YupString } from 'yup'; -import { Loader } from '@iota/ui-icons'; -import { Button, ButtonHtmlType, ButtonType, Header, InputType } from '@iota/apps-ui-kit'; +import { ArrowLeft, ArrowRight, Loader } from '@iota/ui-icons'; +import { + Button, + ButtonHtmlType, + ButtonType, + ButtonSize, + Header, + InputType, +} from '@iota/apps-ui-kit'; import { PasswordInputField } from '../shared/input/password'; const validation = object({ @@ -83,8 +90,10 @@ export function PasswordInputDialog({
{showBackButton ? (
)} diff --git a/apps/wallet/src/ui/app/shared/tooltip/index.tsx b/apps/wallet/src/ui/app/shared/tooltip/index.tsx deleted file mode 100644 index ee10e27e473..00000000000 --- a/apps/wallet/src/ui/app/shared/tooltip/index.tsx +++ /dev/null @@ -1,154 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// Modifications Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -import { - arrow, - autoUpdate, - flip, - FloatingPortal, - offset, - shift, - useDismiss, - useFloating, - useFocus, - useHover, - useInteractions, - useRole, -} from '@floating-ui/react'; -import type { Placement } from '@floating-ui/react'; -import { Info } from '@iota/ui-icons'; -import clsx from 'clsx'; -import { AnimatePresence, motion } from 'framer-motion'; -import { useRef, useState } from 'react'; -import type { CSSProperties, ReactNode } from 'react'; - -const TOOLTIP_DELAY = 150; - -interface TooltipProps { - tip: ReactNode; - children: ReactNode; - placement?: Placement; - noFullWidth?: boolean; -} - -export function Tooltip({ tip, children, noFullWidth, placement = 'top' }: TooltipProps) { - const [open, setOpen] = useState(false); - const arrowRef = useRef(null); - - const { - x, - y, - refs, - strategy, - context, - middlewareData, - placement: finalPlacement, - } = useFloating({ - placement, - open, - onOpenChange: setOpen, - whileElementsMounted: autoUpdate, - middleware: [offset(5), flip(), shift(), arrow({ element: arrowRef, padding: 6 })], - }); - - const { getReferenceProps, getFloatingProps } = useInteractions([ - useHover(context, { move: true, delay: TOOLTIP_DELAY }), - useFocus(context), - useRole(context, { role: 'tooltip' }), - useDismiss(context), - ]); - - const animateProperty = - finalPlacement.startsWith('top') || finalPlacement.startsWith('bottom') ? 'y' : 'x'; - - const animateValue = - finalPlacement.startsWith('bottom') || finalPlacement.startsWith('right') - ? 'calc(-50% - 15px)' - : 'calc(50% + 15px)'; - - const arrowStyle: CSSProperties = { - left: middlewareData.arrow?.x, - top: middlewareData.arrow?.y, - }; - - const staticSide = ( - { - top: 'bottom', - right: 'left', - bottom: 'top', - left: 'right', - } as const - )[finalPlacement.split('-')[0]]; - - if (staticSide) { - arrowStyle[staticSide] = '-3px'; - } - - return ( - <> -
- {children} -
- - - {open ? ( - -
- {tip} -
-
- - ) : null} - - - - ); -} - -export type IconTooltipProps = Omit; - -export function IconTooltip(props: IconTooltipProps) { - return ( - - - - ); -} diff --git a/apps/wallet/src/ui/app/shared/utils/ButtonOrLink.tsx b/apps/wallet/src/ui/app/shared/utils/ButtonOrLink.tsx deleted file mode 100644 index 011bcfc2ec7..00000000000 --- a/apps/wallet/src/ui/app/shared/utils/ButtonOrLink.tsx +++ /dev/null @@ -1,88 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// Modifications Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -import clsx from 'clsx'; -import { forwardRef, type ComponentProps, type ReactNode, type Ref } from 'react'; -import { Link, type LinkProps } from 'react-router-dom'; -import { Tooltip } from '../tooltip'; -import { LoadingIndicator } from '@iota/apps-ui-kit'; - -interface WithTooltipProps { - title?: ReactNode; - children: ReactNode; -} - -function WithTooltip({ title, children }: WithTooltipProps) { - if (title) { - return {children}; - } - return children; -} - -export interface ButtonOrLinkProps - extends Omit & ComponentProps<'a'> & ComponentProps<'button'>, 'ref'> { - loading?: boolean; -} -export const ButtonOrLink = forwardRef( - ({ href, to, disabled = false, loading = false, children, title, ...props }, ref) => { - const isDisabled = disabled || loading; - const content = loading ? ( - <> -
{children}
-
- -
- - ) : ( - children - ); - const styles = loading - ? ({ position: 'relative', textOverflow: 'clip' } as const) - : undefined; - // External link: - if (href && !isDisabled) { - return ( - - } - target="_blank" - rel="noreferrer noopener" - href={href} - {...props} - style={styles} - > - {content} - - - ); - } - // Internal router link: - if (to && !isDisabled) { - return ( - - } {...props} style={styles}> - {content} - - - ); - } - return ( - - - - ); - }, -);