Remove extra interface for forgeting keys (#121)

src/hooks/useTimer.tsx

-import { useEffect, useRef, useState } from 'react'
-
-const DEFAULT_COUNTER = 10
-
-export const useTimer = (defaultValue = DEFAULT_COUNTER) => {
-  const counterInterval = useRef<ReturnType<typeof setInterval>>()
-  const [value, setValue] = useState(defaultValue)
-  const started = value < defaultValue
-  const fired = value === 0
-  const decreaseValue = () => setValue((v) => v - 1)
-
-  const start = () => {
-    decreaseValue()
-    counterInterval.current = setInterval(decreaseValue, 1000)
-  }
-  const reset = () => {
-    counterInterval.current && clearInterval(counterInterval.current)
-    setValue(defaultValue)
-  }
-
-  useEffect(() => {
-    if (value < 0) reset()
-  }, [value])
-
-  useEffect(
-    () => () =>
-      counterInterval.current && clearInterval(counterInterval.current),
-    []
-  )
-
-  return { value, defaultValue, start, reset, started, fired }
-}

src/ui/components/Key.tsx

-import React, { useEffect } from 'react'
-import { useTimer } from '../../hooks/useTimer'
+import React from 'react'
 import { forgetAccount } from '../../messaging/uiActions'
 import { Address } from './Address'
 import { Button } from './Button'
@@ -11,44 +10,25 @@ type Props = {
 }
 
 export const Key: React.FC<Props> = ({ ...account }) => {
-  const timer = useTimer()
-  const removing = timer.started
-
-  useEffect(() => {
-    if (timer.fired)
+  function forget() {
     forgetAccount(account.address as string).catch(console.error)
-  }, [timer.fired])
+  }
 
   return (
     <div className='relative group'>
-      {!removing && (
       <Address
         address={account.address}
         genesisHash={account.genesisHash}
         name={account.name}
         key={account.address}
       />
-      )}
-      {!removing && (
-        <div
-          className='absolute flex top-0 right-2 h-full items-center transition opacity-0 group-hover:opacity-100'
-          onClick={timer.start}
-        >
+      <div className='absolute flex top-0 right-2 h-full items-center transition opacity-0 group-hover:opacity-100'>
         <div className='flex space-x-4'>
-            <Button isDanger>Forget</Button>
-          </div>
-        </div>
-      )}
-      {removing && (
-        <div className='flex items-center justify-between p-2 border-2 border-_bg-300 border-dashed rounded'>
-          <div className='text-_text-400'>
-            Removing &ldquo;{account.name}&rdquo; — {timer.value}s
-          </div>
-          <Button isSecondary onClick={timer.reset}>
-            Undo
+          <Button onClick={forget} isDanger>
+            Forget
           </Button>
         </div>
-      )}
+      </div>
     </div>
   )
 }