Update keys appearance (#118)

src/hooks/useTimedReset.ts

-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]
-}

src/ui/assets/cancel.svg

-<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>

src/ui/assets/copy.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>

src/ui/components/Address.tsx

@@ -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>
   )

src/ui/components/Button.tsx

@@ -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}

src/ui/components/Key.tsx

 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>

src/utils/cropHash.ts

+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)
+  )
+}