diff --git a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx index a8b004787..a9a0c7a25 100644 --- a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx +++ b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; import classNames from 'classnames'; import { truncateByChars } from '@vegaprotocol/utils'; @@ -12,9 +12,10 @@ import { DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, - Icon, Drawer, DropdownMenuSeparator, + VegaIcon, + VegaIconNames, } from '@vegaprotocol/ui-toolkit'; import type { PubKey } from '@vegaprotocol/wallet'; import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet'; @@ -249,14 +250,14 @@ const KeypairItem = ({ pk }: { pk: PubKey }) => { {truncateByChars(pk.publicKey)} - + setCopied(true)}> {copied && ( @@ -278,34 +279,20 @@ const KeypairListItem = ({ isActive: boolean; onSelectItem: (pk: string) => void; }) => { - const [copied, setCopied] = useState(false); - useEffect(() => { - // eslint-disable-next-line - let timeout: any; - - if (copied) { - timeout = setTimeout(() => { - setCopied(false); - }, 800); - } - - return () => { - clearTimeout(timeout); - }; - }, [copied]); + const [copied, setCopied] = useCopyTimeout(); return (
- + - {isActive && } + {isActive && } - + {truncateByChars(pk.publicKey)}{' '} setCopied(true)}> {copied && ( diff --git a/libs/ui-toolkit/src/components/copy-with-tooltip/copy-with-tooltip.tsx b/libs/ui-toolkit/src/components/copy-with-tooltip/copy-with-tooltip.tsx index 046bbce13..e97a9d721 100644 --- a/libs/ui-toolkit/src/components/copy-with-tooltip/copy-with-tooltip.tsx +++ b/libs/ui-toolkit/src/components/copy-with-tooltip/copy-with-tooltip.tsx @@ -1,7 +1,7 @@ import type { ReactElement } from 'react'; -import { useEffect, useState } from 'react'; import { Tooltip } from '../tooltip'; import CopyToClipboard from 'react-copy-to-clipboard'; +import { useCopyTimeout } from '@vegaprotocol/react-helpers'; export const TOOLTIP_TIMEOUT = 800; @@ -11,22 +11,7 @@ export interface CopyWithTooltipProps { } export function CopyWithTooltip({ children, text }: CopyWithTooltipProps) { - const [copied, setCopied] = useState(false); - - useEffect(() => { - // eslint-disable-next-line - let timeout: any; - - if (copied) { - timeout = setTimeout(() => { - setCopied(false); - }, TOOLTIP_TIMEOUT); - } - - return () => { - clearTimeout(timeout); - }; - }, [copied]); + const [copied, setCopied] = useCopyTimeout(); return ( setCopied(true)}> diff --git a/libs/ui-toolkit/src/components/dialog/dialog.tsx b/libs/ui-toolkit/src/components/dialog/dialog.tsx index 6e719beb9..f07ac6ed8 100644 --- a/libs/ui-toolkit/src/components/dialog/dialog.tsx +++ b/libs/ui-toolkit/src/components/dialog/dialog.tsx @@ -3,7 +3,7 @@ import * as DialogPrimitives from '@radix-ui/react-dialog'; import classNames from 'classnames'; import { getIntentBorder } from '../../utils/intent'; -import { Icon } from '../icon'; +import { VegaIcon, VegaIconNames } from '../icon'; import type { ReactNode } from 'react'; import type { Intent } from '../../utils/intent'; @@ -77,7 +77,7 @@ export function Dialog({ className="absolute p-2 top-0 right-0 md:top-2 md:right-2" data-testid="dialog-close" > - + )}
diff --git a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx index 9ead2c868..2f772ca43 100644 --- a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx +++ b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx @@ -3,7 +3,6 @@ import classNames from 'classnames'; import type { ComponentProps, ReactNode } from 'react'; import { forwardRef } from 'react'; import { VegaIcon, VegaIconNames } from '../icon'; -import { Icon } from '../icon'; import { useCopyTimeout } from '@vegaprotocol/react-helpers'; import CopyToClipboard from 'react-copy-to-clipboard'; import { t } from '@vegaprotocol/i18n'; @@ -140,7 +139,7 @@ export const DropdownMenuItemIndicator = forwardRef< ref={forwardedRef} className="flex-end" > - + )); diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-tick.tsx b/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-tick.tsx new file mode 100644 index 000000000..ac17e0932 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-tick.tsx @@ -0,0 +1,7 @@ +export const IconTick = ({ size = 16 }: { size: number }) => { + return ( + + + + ); +}; diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts index c6f1cdbf6..51de5dc54 100644 --- a/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts +++ b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts @@ -18,6 +18,7 @@ import { IconCross } from './svg-icons/icon-cross'; import { IconKebab } from './svg-icons/icon-kebab'; import { IconArrowDown } from './svg-icons/icon-arrow-down'; import { IconChevronDown } from './svg-icons/icon-chevron-down'; +import { IconTick } from './svg-icons/icon-tick'; export enum VegaIconNames { BREAKDOWN = 'breakdown', @@ -40,6 +41,7 @@ export enum VegaIconNames { TREND_UP = 'trend-up', CROSS = 'cross', KEBAB = 'kebab', + TICK = 'tick', } export const VegaIconNameMap: Record< @@ -66,4 +68,5 @@ export const VegaIconNameMap: Record< 'trend-up': IconTrendUp, cross: IconCross, kebab: IconKebab, + tick: IconTick, }; diff --git a/libs/web3/src/lib/withdrawal-approval-dialog.tsx b/libs/web3/src/lib/withdrawal-approval-dialog.tsx index d3cb264e0..69148a903 100644 --- a/libs/web3/src/lib/withdrawal-approval-dialog.tsx +++ b/libs/web3/src/lib/withdrawal-approval-dialog.tsx @@ -3,7 +3,6 @@ import { Button, CopyWithTooltip, Dialog, - Icon, KeyValueTable, KeyValueTableRow, Splash, @@ -32,7 +31,7 @@ export const WithdrawalApprovalDialog = ({ return ( } + icon={} open={open} onChange={(isOpen) => onChange(isOpen)} onCloseAutoFocus={(e) => { diff --git a/libs/withdraws/src/lib/withdrawals-table.tsx b/libs/withdraws/src/lib/withdrawals-table.tsx index 7996abd7d..af25e3e35 100644 --- a/libs/withdraws/src/lib/withdrawals-table.tsx +++ b/libs/withdraws/src/lib/withdrawals-table.tsx @@ -15,7 +15,6 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, - Icon, VegaIcon, VegaIconNames, } from '@vegaprotocol/ui-toolkit'; @@ -193,9 +192,8 @@ export const CompleteCell = ({ data, complete }: CompleteCellProps) => { } }} > - - {t('View withdrawal details')} - + + {t('View withdrawal details')}