-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make the issuer's address copyable similar to vault address and memo …
…(Spacewalk) * extract ClickablePublicKey component from PublicKey * extract CopyablePublicKey component from PublicKey * refactor PublicKey component * lint css classes CloseButton * update component name from CopyableAddress to CopyablePublicKey
- Loading branch information
1 parent
92533dc
commit 6d823aa
Showing
14 changed files
with
182 additions
and
194 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) => ( | ||
| <Button | ||
| className="m-0 h-1 rounded p-1" | ||
| style={props.inline ? { height: 'inherit', minHeight: '0', padding: 0 } : {}} | ||
| color="ghost" | ||
| type="button" | ||
| onClick={props.onClick} | ||
| > | ||
| {props.icon ? ( | ||
| <> | ||
| {props.icon} | ||
| | ||
| </> | ||
| ) : null} | ||
| <PublicKey {...props} /> | ||
| </Button> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <ClickablePublicKey {...{ ...props, publicKey }} onClick={handleClick} icon={<CopyIcon className="w-4 h-4" />} /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<FormatPublicKeyVariant, { leading: number; trailing: number }> = { | ||
| 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 ( | ||
| <span style={style} className={className}> | ||
| {props.variant === 'full' || !props.variant | ||
| ? props.publicKey | ||
| : props.publicKey.substr(0, digits.leading) + '…' + props.publicKey.substr(-digits.trailing)} | ||
| <span style={spanStyle} className={className}> | ||
| {variant === 'full' | ||
| ? publicKey | ||
| : publicKey.substring(0, digits.leading) + '…' + publicKey.substring(publicKey.length - digits.trailing)} | ||
| </span> | ||
| ); | ||
| }); | ||
|
|
||
| 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 ( | ||
| <Button | ||
| className="h-1 p-1 m-0 rounded" | ||
| style={props.inline ? { height: 'inherit', minHeight: '0', padding: 0 } : {}} | ||
| color="ghost" | ||
| type="button" | ||
| onClick={props.onClick} | ||
| > | ||
| {props.icon ? ( | ||
| <> | ||
| {props.icon} | ||
| | ||
| </> | ||
| ) : null} | ||
| <PublicKey {...props} /> | ||
| </Button> | ||
| ); | ||
| }); | ||
|
|
||
| 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 <ClickableAddress {...props} onClick={handleClick} icon={<CopyIcon className="w-4 h-4" />} />; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.