Fix name removing on signing (#79)

src/stores/accounts.ts

 import { AccountJson } from '@polkadot/extension-base/background/types'
-import { createStore } from 'nanostores'
+import { createDerived, createStore } from 'nanostores'
 import { buildHierarchy } from '../utils/buildHierarchy'
 import { subscribeAccounts } from '../messaging/uiActions'
 
@@ -8,6 +8,13 @@ export const accounts = createStore<AccountJson[]>(() => {
   subscribeAccounts(setAccounts).catch(console.error)
 })
 
+export const accountNamesByAddress = createDerived(accounts, (list) =>
+  list.reduce((res, account) => {
+    res[account.address] = account.name
+    return res
+  }, {} as Record<string, string | undefined>)
+)
+
 const setAccounts = (list: AccountJson[]) => {
   accounts.set(buildHierarchy(list))
 }

src/ui/components/AutosizeInput.tsx

@@ -17,18 +17,26 @@ const AutosizeInput: React.FC<Props> = ({
   const [content, setContent] = React.useState<string>(value?.toString() || '')
   const [width, setWidth] = React.useState(0)
   const span = React.useRef<HTMLSpanElement>(null)
+  const isContentChangedRef = React.useRef(false)
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!isContentChangedRef.current) isContentChangedRef.current = true
     setContent(e.currentTarget.value)
+  }
+
+  React.useEffect(() => {
+    const newContent = value?.toString()
+    if (newContent && newContent !== content) setContent(newContent)
+  }, [value])
 
   React.useEffect(() => {
     setWidth(span.current?.offsetWidth || 0)
-    onChange(content)
+    if (isContentChangedRef.current) onChange(content)
   }, [content])
 
   return (
     <div className={className}>
-      <span className='spacer' ref={span}>
+      <span className='autoresize-spacer' ref={span}>
         {content || placeholder}
       </span>
       <input
@@ -60,7 +68,7 @@ export default styled(AutosizeInput)`
     background: var(--color-highlight);
   }
 
-  .spacer {
+  .autoresize-spacer {
     opacity: 0;
     position: absolute;
     white-space: nowrap;

src/ui/requests/Signing.tsx

@@ -3,8 +3,8 @@ import { SignerPayloadJSON } from '@polkadot/types/types'
 import { useStore } from 'nanostores/react'
 import React, { useState } from 'react'
 import { signRequests } from '../../stores/signRequests'
-import SigningRequest from './SigningRequest'
 import RequestIndex from './RequestIndex'
+import SigningRequest from './SigningRequest'
 
 const Signing: React.FC = () => {
   const requests = useStore(signRequests)

src/ui/requests/SigningRequest.tsx

@@ -9,7 +9,10 @@ import React, { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 import Address from '../components/Address'
 import { Button } from '../components/Button'
-import { accounts as accountsStore } from '../../stores/accounts'
+import {
+  accountNamesByAddress as accountNamesByAddressStore,
+  accounts as accountsStore,
+} from '../../stores/accounts'
 import { addHeaderAction, resetHeaderActions } from '../../stores/headerActions'
 import { BaseProps } from '../types'
 import { isRawPayload } from '../../utils/guards'
@@ -34,11 +37,13 @@ type Props = BaseProps & {
 
 const Request: React.FC<Props> = ({ request, signId, className }) => {
   const accounts = useStore(accountsStore)
+  const accountNamesByAddress = useStore(accountNamesByAddressStore)
   const [beginning, setBeginning] = useState(true)
   const payloadRef = useRef(getExtrinsicPayload(request.payload))
   const isRaw = isRawPayload(request.payload)
   const cmd = isRaw ? CMD_SIGN_MESSAGE : CMD_MORTAL
   const address = request.payload.address
+  const name = accountNamesByAddress[address]
   const genesisHash = isRaw
     ? getGenesisHashByAddress(accounts, address)
     : request.payload.genesisHash
@@ -101,7 +106,7 @@ const Request: React.FC<Props> = ({ request, signId, className }) => {
       </div>
       <div className='using-key'>
         <div className='using-key-heading'>Using key</div>
-        <Address address={address} genesisHash={genesisHash} />
+        <Address address={address} name={name} genesisHash={genesisHash} />
       </div>
     </div>
   )