diff --git a/src/components/CloseButton.tsx b/src/components/CloseButton.tsx index d5d2283a..14993d6a 100644 --- a/src/components/CloseButton.tsx +++ b/src/components/CloseButton.tsx @@ -7,7 +7,7 @@ export const CloseButton = (props: ButtonProps) => ( color="ghost" size="sm" shape="circle" - className="text-xl font-thin !leading-5 w-[2.25rem] h-[2.25rem]" + className="h-[2.25rem] w-[2.25rem] text-xl font-thin !leading-5" style={{ color: 'var(--secondary)' }} type="button" {...props} diff --git a/src/components/PublicKey/ClickablePublicKey/index.tsx b/src/components/PublicKey/ClickablePublicKey/index.tsx new file mode 100644 index 00000000..257bbda1 --- /dev/null +++ b/src/components/PublicKey/ClickablePublicKey/index.tsx @@ -0,0 +1,32 @@ +import { CSSProperties } from 'preact/compat'; +import { Button } from 'react-daisyui'; +import { FormatPublicKeyVariant, PublicKey } from '..'; + +export interface ClickablePublicKeyProps { + publicKey: string; + variant?: FormatPublicKeyVariant; + inline?: boolean; + style?: CSSProperties; + className?: string; + icon?: JSX.Element; + onClick?: () => void; + wrap?: boolean; +} + +export const ClickablePublicKey = (props: ClickablePublicKeyProps) => ( + +); diff --git a/src/components/PublicKey/CopyablePublicKey/index.tsx b/src/components/PublicKey/CopyablePublicKey/index.tsx new file mode 100644 index 00000000..584ea5ce --- /dev/null +++ b/src/components/PublicKey/CopyablePublicKey/index.tsx @@ -0,0 +1,21 @@ +import { ClickablePublicKey, ClickablePublicKeyProps } from '../ClickablePublicKey'; +import { useClipboard } from '../../../hooks/useClipboard'; +import CopyIcon from '../../../assets/CopyIcon'; + +interface CopyablePublicKeyProps extends ClickablePublicKeyProps { + onClick?: () => void; + publicKey: string; +} + +export const CopyablePublicKey = ({ onClick, publicKey, ...props }: CopyablePublicKeyProps) => { + const clipboard = useClipboard(); + + const handleClick = () => { + onClick && onClick(); + clipboard.copyToClipboard(publicKey); + }; + + return ( + } /> + ); +}; diff --git a/src/components/PublicKey/index.tsx b/src/components/PublicKey/index.tsx index 0904182e..0da0f83b 100644 --- a/src/components/PublicKey/index.tsx +++ b/src/components/PublicKey/index.tsx @@ -1,120 +1,55 @@ -import { CSSProperties, memo, useCallback } from 'preact/compat'; -import { Button } from 'react-daisyui'; -import CopyIcon from '../../assets/CopyIcon'; -import { useClipboard } from '../../hooks/useClipboard'; +import { CSSProperties } from 'preact/compat'; -type Variant = 'full' | 'short' | 'shorter' | 'hexa'; +export type FormatPublicKeyVariant = 'full' | 'short' | 'shorter' | 'hexa'; -function getDigitCounts(variant?: Variant) { - if (variant === 'short') { - return { - leading: 6, - trailing: 6, - }; - } else if (variant === 'hexa') { - return { - leading: 10, - trailing: 10, - }; - } else { - return { - leading: 4, - trailing: 4, - }; - } +const digitCounts: Record = { + full: { leading: 4, trailing: 4 }, + shorter: { leading: 4, trailing: 4 }, + short: { leading: 6, trailing: 6 }, + hexa: { leading: 10, trailing: 10 }, +}; + +function getDigitCounts(variant: FormatPublicKeyVariant = 'full') { + return digitCounts[variant]; } export function shortenName(name: string, intendedLength: number) { if (name.length <= intendedLength) { return name; - } else { - return ( - name.substr(0, intendedLength - 3).trim() + - '…' + - name - .substr(intendedLength - 3) - .substr(-3) - .trim() - ); } + return ( + name.substring(0, intendedLength - 3).trim() + + '…' + + name + .substring(intendedLength - 3) + .slice(-3) + .trim() + ); } interface PublicKeyProps { publicKey: string; - variant?: Variant; + variant?: FormatPublicKeyVariant; style?: CSSProperties; className?: string; showRaw?: boolean; } -// tslint:disable-next-line no-shadowed-variable -export const PublicKey = memo(function PublicKey(props: PublicKeyProps) { - const { variant = 'full', className } = props; - const digits = getDigitCounts(props.variant); +export function PublicKey({ publicKey, variant = 'full', style, className }: PublicKeyProps) { + const digits = getDigitCounts(variant); - const style: CSSProperties = { + const spanStyle: CSSProperties = { userSelect: 'text', WebkitUserSelect: 'text', whiteSpace: variant !== 'full' ? 'pre' : undefined, - ...props.style, + ...style, }; return ( - - {props.variant === 'full' || !props.variant - ? props.publicKey - : props.publicKey.substr(0, digits.leading) + '…' + props.publicKey.substr(-digits.trailing)} + + {variant === 'full' + ? publicKey + : publicKey.substring(0, digits.leading) + '…' + publicKey.substring(publicKey.length - digits.trailing)} ); -}); - -interface AddressProps { - publicKey: string; - variant?: Variant; - inline?: boolean; - style?: CSSProperties; - className?: string; - icon?: JSX.Element; - onClick?: () => void; - wrap?: boolean; -} - -// tslint:disable-next-line no-shadowed-variable -export const ClickableAddress = memo(function ClickableAddress(props: AddressProps) { - return ( - - ); -}); - -interface CopyableAddressProps extends AddressProps { - onClick?: () => void; } - -// tslint:disable-next-line no-shadowed-variable -export const CopyableAddress = memo(function CopyableAddress(props: CopyableAddressProps) { - const { onClick } = props; - const clipboard = useClipboard(); - - const handleClick = useCallback(() => { - if (onClick) { - onClick(); - } - clipboard.copyToClipboard(props.publicKey); - }, [clipboard, onClick, props.publicKey]); - - return } />; -}); diff --git a/src/components/Wallet/modals/DisconnectModal/index.tsx b/src/components/Wallet/modals/DisconnectModal/index.tsx index 6c732172..3db2f292 100644 --- a/src/components/Wallet/modals/DisconnectModal/index.tsx +++ b/src/components/Wallet/modals/DisconnectModal/index.tsx @@ -8,7 +8,7 @@ import { getAddressForFormat } from '../../../../helpers/addressFormatter'; import { useNodeInfoState } from '../../../../NodeInfoProvider'; import { useAccountBalance } from '../../../../shared/useAccountBalance'; import { useGlobalState } from '../../../../GlobalStateProvider'; -import { CopyableAddress } from '../../../PublicKey'; +import { CopyablePublicKey } from '../../../PublicKey/CopyablePublicKey'; import { Skeleton } from '../../../Skeleton'; interface WalletButtonProps { @@ -23,18 +23,18 @@ const WalletButton = ({ wallet, query, balance, tokenSymbol, walletAccount }: Wa ); @@ -56,10 +56,10 @@ const WalletDropdownMenu = ({ tokenSymbol, removeWalletAccount, }: WalletDropdownMenuProps) => ( - +
{walletAccount?.name}
- Send {totalAmount} {asset?.getCode()}
-
+
{asset && asset.getIssuer() && ( <> - issued by +

issued by

)}
-
With the text memo
- {issueRequest && } -
In a single transaction to
- +
With the text memo
+ {issueRequest && } +
In a single transaction to
+ @@ -93,7 +93,7 @@ export function ConfirmationDialog(props: ConfirmationDialogProps): JSX.Element )}
-
Note:
+
Note: