Unverified Commit 7352404c authored by Andrei Eres's avatar Andrei Eres Committed by GitHub
Browse files

Update keys appearance (#118)

parent ac3631a6
Pipeline #189853 passed with stages
in 2 minutes and 34 seconds
import React, { useEffect, useState } from 'react'
const RESET_TIME = 1000
export const useTimedReset = <T>(
v: T
): [T, React.Dispatch<React.SetStateAction<T>>] => {
const [value, setValue] = useState<T>(v)
useEffect(() => {
if (value === v) return
setTimeout(() => setValue(v), RESET_TIME)
})
return [value, setValue]
}
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m15.833 5.342-1.175-1.175L10 8.825 5.34 4.167 4.167 5.342 8.825 10l-4.658 4.658 1.175 1.175L10 11.175l4.658 4.658 1.175-1.175L11.175 10l4.658-4.658Z" fill="#aeaeae"/></svg>
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.333.833h-10c-.916 0-1.666.75-1.666 1.667v11.667h1.666V2.5h10V.833Zm2.5 3.334H6.667C5.75 4.167 5 4.917 5 5.833V17.5c0 .917.75 1.667 1.667 1.667h9.166c.917 0 1.667-.75 1.667-1.667V5.833c0-.916-.75-1.666-1.667-1.666Zm0 13.333H6.667V5.833h9.166V17.5Z" fill="#aeaeae"/></svg>
......@@ -4,13 +4,11 @@ import Identicon from '@polkadot/react-identicon'
import { IconTheme } from '@polkadot/react-identicon/types'
import React, { useEffect, useState } from 'react'
import { useMetadata } from '../../hooks/useMetadata'
import { useTimedReset } from '../../hooks/useTimedReset'
import { editAccount } from '../../messaging/uiActions'
import { accountsStore } from '../../stores/accounts'
import { cn } from '../../utils/cn'
import { DEFAULT_TYPE, RELAY_CHAIN, UNKNOWN } from '../../utils/constants'
import { cropHash } from '../../utils/cropHash'
import { recodeAddress, Recoded } from '../../utils/recodeAddress'
import copyIcon from '../assets/copy.svg'
import { AutosizeInput } from './AutosizeInput'
type Props = {
......@@ -27,24 +25,13 @@ const defaultRecoded = {
}
export const Address: React.FC<Props> = ({ address, genesisHash, name }) => {
const [justCopied, setJustCopied] = useTimedReset<boolean>(false)
const [recoded, setRecoded] = useState<Recoded>(defaultRecoded)
const accounts = useStore(accountsStore) as AccountJson[]
const chain = useMetadata(genesisHash || recoded.genesisHash, true)
const iconTheme = (chain?.icon || 'polkadot') as IconTheme
const nameLabel = name || recoded.account?.name
const chainLabel = ` · ${chain?.definition.chain.replace(RELAY_CHAIN, '')}`
const hashLabel =
(justCopied && 'Copied') || recoded.formatted || address || UNKNOWN
const onCopy = () => {
if (justCopied) return
navigator.clipboard
.writeText(hashLabel)
.then(() => setJustCopied(true))
.catch(console.error)
}
const hashLabel = cropHash(recoded.formatted || address || UNKNOWN)
const changeName = (v: string) =>
address && editAccount(address, v).catch(console.error)
......@@ -75,18 +62,7 @@ export const Address: React.FC<Props> = ({ address, genesisHash, name }) => {
/>
{chain && <span className='text-_crypto-400'>{chainLabel}</span>}
</div>
<div
className={cn(
'flex items-center rounded transition cursor-pointer',
!justCopied && 'hover:bg-_bg-400'
)}
onClick={onCopy}
>
<div className='w-4 h-4 mr-1'>
<img src={copyIcon} />
</div>
<div className='font-mono text-_text-400'>{hashLabel}</div>
</div>
<div className='font-mono text-sm text-_text-400'>{hashLabel}</div>
</div>
</div>
)
......
......@@ -4,15 +4,18 @@ import { cn } from '../../utils/cn'
export const Button = ({
className,
isSecondary,
isDanger,
...rest
}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
isSecondary?: boolean
isDanger?: boolean
}) => (
<button
className={cn(
'inline-block rounded px-8 py-1 whitespace-nowrap',
!isSecondary && 'bg-_action-400 text-_action-600',
isSecondary && 'bg-_bg-300 text-_text-300 ',
isDanger && 'bg-_bg-danger text-_signal-danger',
className
)}
{...rest}
......
import React, { useEffect } from 'react'
import { useTimer } from '../../hooks/useTimer'
import { forgetAccount } from '../../messaging/uiActions'
import cancelIcon from '../assets/cancel.svg'
import { Address } from './Address'
import { Button } from './Button'
......@@ -21,7 +20,7 @@ export const Key: React.FC<Props> = ({ ...account }) => {
}, [timer.fired])
return (
<div className='relative'>
<div className='relative group'>
{!removing && (
<Address
address={account.address}
......@@ -31,8 +30,13 @@ export const Key: React.FC<Props> = ({ ...account }) => {
/>
)}
{!removing && (
<div className='w-4 h-4 absolute top-1 right-1' onClick={timer.start}>
<img src={cancelIcon} />
<div
className='absolute flex top-0 right-2 h-full items-center transition opacity-0 group-hover:opacity-100'
onClick={timer.start}
>
<div className='flex space-x-4'>
<Button isDanger>Forget</Button>
</div>
</div>
)}
{removing && (
......@@ -40,7 +44,9 @@ export const Key: React.FC<Props> = ({ ...account }) => {
<div className='text-_text-400'>
Removing &ldquo;{account.name}&rdquo;{timer.value}s
</div>
<Button onClick={timer.reset}>Undo</Button>
<Button isSecondary onClick={timer.reset}>
Undo
</Button>
</div>
)}
</div>
......
const HEX_PREFIX = '0x'
const ELIPSIS = '...'
const SLICE_LENGTH = 8
export const cropHash = (hash: string) => {
const isHex = hash.startsWith(HEX_PREFIX)
const PREFIX_LENGTH = isHex ? HEX_PREFIX.length : 0
return (
hash.substring(0, PREFIX_LENGTH + SLICE_LENGTH) +
ELIPSIS +
hash.substring(hash.length - SLICE_LENGTH, hash.length)
)
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment