My accounts display on-chain identify name (#91)

* chore: display on chain identify name * chore: switch account remove confirm button * fix: keyring get address meta is empty * chore: account name component forward ref * chore: use account name component to display account name * chore: remove use account name hook * fix: darwinia account name
darwinia-network · Apr 6, 2022 · 3676afa · 3676afa
1 parent 96d8292
commit 3676afa
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 66 deletions.
diff --git a/public/locales/en/translation-apps.json b/public/locales/en/translation-apps.json
@@ -37,7 +37,6 @@
   "Check it to continue": "Check it to continue",
   "Claim Reward": "Claim Reward",
   "Claimed": "Claimed",
-  "Confirm": "Confirm",
   "Confirm to continue": "Confirm to continue",
   "Connect Wallet": "Connect Wallet",
   "Connect to Metamask": "Connect to Metamask",

diff --git a/src/components/widget/Connection.tsx b/src/components/widget/Connection.tsx
@@ -1,12 +1,13 @@
 import BaseIdentityIcon, { Identicon } from '@polkadot/react-identicon';
-import { Button, Card, Col, Modal, Row, Typography } from 'antd';
-import React, { CSSProperties, useMemo, useState } from 'react';
+import { Card, Col, Modal, Row, Typography } from 'antd';
+import React, { CSSProperties, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAccount, useApi } from '../../hooks';
 import { convertToSS58 } from '../../utils';
 import { ViewBrowserIcon } from '../icons';
 import { ConnectPolkadot } from './ConnectPolkadot';
 import { EllipsisMiddle } from './EllipsisMiddle';
+import { AccountName } from './account/AccountName';
 
 function ActiveAccount({
   children,
@@ -25,8 +26,9 @@ function ActiveAccount({
   textClassName?: string;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
 }>) {
+  const ref = useRef<HTMLSpanElement>(null);
   const { network } = useApi();
-  const { accountWithMeta } = useAccount();
+  const { account } = useAccount();
   const containerCls = useMemo(
     () =>
       `flex items-center justify-between leading-normal whitespace-nowrap p-1 overflow-hidden bg-${network.name} 
@@ -39,7 +41,8 @@ function ActiveAccount({
     <div className={containerCls} onClick={onClick} style={containerStyle || {}}>
       <img src={`/image/${network.name}-1.svg`} style={logoStyle || { width: 24 }} alt="" />
       <Typography.Text className="mx-2" style={{ color: 'inherit', maxWidth: '64px' }} ellipsis={true}>
-        {accountWithMeta.meta.name}
+        <AccountName account={account} ref={ref} className="hidden" />
+        {ref.current?.textContent}
       </Typography.Text>
       {children}
     </div>
@@ -103,24 +106,24 @@ export function Connection() {
             <Col span={20}>
               <Row>
                 <Col>
-                  <Typography.Text copyable className="mr-4 text-gray-600 text-base">
-                    {account}
-                  </Typography.Text>
+                  <AccountName account={account} />
+                  <EllipsisMiddle className="text-gray-600 overflow-hidden" value={account} />
                 </Col>
               </Row>
 
               <Row className="my-2" gutter={8}>
-                <Button
-                  onClick={() => {
-                    const address = convertToSS58(account ?? '', network.ss58Prefix);
-
-                    window.open(`https://${network.name}.subscan.io/account/${address}`, 'blank');
-                  }}
-                  className="flex items-center cursor-pointer"
-                  icon={<ViewBrowserIcon className="text-xl" />}
+                <a
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  href={`https://${network.name}.subscan.io/account/${convertToSS58(
+                    account ?? '',
+                    network.ss58Prefix
+                  )}`}
+                  className="inline-flex items-center"
                 >
-                  {t('View in Subscan')}
-                </Button>
+                  <ViewBrowserIcon className="text-sm mr-1" />
+                  <span>{t('View in Subscan')}</span>
+                </a>
               </Row>
             </Col>
           </Row>

diff --git a/src/components/widget/account/AccountName.tsx b/src/components/widget/account/AccountName.tsx
@@ -4,13 +4,14 @@ import { TypeRegistry } from '@polkadot/types/create';
 import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
 import { stringToU8a } from '@polkadot/util';
 import { isFunction } from 'lodash';
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState, forwardRef } from 'react';
 import { from } from 'rxjs';
 import { useApi } from '../../../hooks';
 import { getAddressName } from '../../../utils';
 
 interface AccountNameProps {
   account: string;
+  className?: string;
 }
 
 const registry = new TypeRegistry();
@@ -122,8 +123,8 @@ function extractIdentity(address: string, identity: DeriveAccountRegistration):
   return elem;
 }
 
-export function AccountName({ account }: AccountNameProps) {
-  const [name, setName] = useState<ReactNode>(account);
+export const AccountName = forwardRef<HTMLSpanElement, AccountNameProps>(({ account, className }, ref) => {
+  const [name, setName] = useState<ReactNode>(() => extractName(account));
   const { api } = useApi();
 
   useEffect(() => {
@@ -149,5 +150,9 @@ export function AccountName({ account }: AccountNameProps) {
     return () => sub$$.unsubscribe();
   }, [account, api]);
 
-  return <span>{name}</span>;
-}
+  return (
+    <span ref={ref} className={className}>
+      {name}
+    </span>
+  );
+});
diff --git a/src/components/widget/account/ActiveAccount.tsx b/src/components/widget/account/ActiveAccount.tsx
@@ -6,17 +6,35 @@ import { useTranslation } from 'react-i18next';
 import { useAccount, useApi } from '../../../hooks';
 import { convertToSS58 } from '../../../utils';
 import { EllipsisMiddle } from '../EllipsisMiddle';
+import { IAccountMeta } from '../../../model';
+import { AccountName } from './AccountName';
 
 const iconSize = 36;
 
+const AccountWithIdentify = ({ value }: { value: IAccountMeta }) => {
+  return (
+    <>
+      <BaseIdentityIcon
+        theme="substrate"
+        size={iconSize}
+        className="mr-2 rounded-full border border-solid border-gray-100"
+        value={value.address}
+      />
+      <span className="flex flex-col leading-5 overflow-hidden">
+        <AccountName account={value.address} />
+        <EllipsisMiddle className="opacity-60 w-full" value={value.address} />
+      </span>
+    </>
+  );
+};
+
 // eslint-disable-next-line complexity
 export function ActiveAccount() {
   const {
     connection: { accounts },
     network,
   } = useApi();
   const { t } = useTranslation();
-  const [selected, setSelected] = useState<string>();
   const { account, setAccount } = useAccount();
   const [isVisible, setIsVisible] = useState(false);
   const displayAccounts = useMemo(
@@ -58,36 +76,20 @@ export function ActiveAccount() {
         maskClosable={false}
         onCancel={() => setIsVisible(false)}
         bodyStyle={{
-          maxHeight: '50vh',
+          maxHeight: '70vh',
           overflow: 'scroll',
         }}
-        footer={
-          accounts?.length
-            ? [
-                <Button
-                  key="primary-btn"
-                  type="primary"
-                  size="large"
-                  onClick={() => {
-                    if (selected && selected !== account) {
-                      setAccount(selected);
-                    }
-                    setIsVisible(false);
-                  }}
-                  className="block mx-auto w-full border-none rounded-lg"
-                >
-                  {t('Confirm')}
-                </Button>,
-              ]
-            : null
-        }
+        footer={null}
       >
         {accounts?.length ? (
           <Radio.Group
             className="w-full"
             defaultValue={account}
             onChange={(event) => {
-              setSelected(event.target.value);
+              if (event.target.value !== account) {
+                setAccount(event.target.value);
+              }
+              setIsVisible(false);
             }}
           >
             {displayAccounts.map((item) => (
@@ -96,16 +98,7 @@ export function ActiveAccount() {
                 key={item.address}
                 className={`radio-list account-select-btn-group-${network.name}`}
               >
-                <BaseIdentityIcon
-                  theme="substrate"
-                  size={iconSize}
-                  className="mr-2 rounded-full border border-solid border-gray-100"
-                  value={item.address}
-                />
-                <span className="flex flex-col leading-5 overflow-hidden">
-                  <b>{item.meta?.name}</b>
-                  <EllipsisMiddle className="opacity-60 w-full" value={item.address} />
-                </span>
+                <AccountWithIdentify value={item} />
               </Radio.Button>
             ))}
           </Radio.Group>

diff --git a/src/components/widget/account/IdentAccountAddress.tsx b/src/components/widget/account/IdentAccountAddress.tsx
@@ -1,6 +1,7 @@
 import Identicon from '@polkadot/react-identicon';
 import { IAccountMeta } from '../../../model';
 import { EllipsisMiddle } from '../EllipsisMiddle';
+import { AccountName } from '../../../components/widget/account/AccountName';
 
 interface IdentAccountProps {
   account: IAccountMeta | undefined;
@@ -14,13 +15,12 @@ export function IdentAccountAddress({ account, className = '', iconSize = defaul
   if (!account) {
     return null;
   }
-
-  const { address, meta } = account;
+  const { address } = account;
 
   return (
     <div className={`flex items-center ${className}`}>
-      <Identicon size={iconSize} value={address} className="rounded-full border border-gray-100" />
-      {!!meta?.name && <span className="ml-2">{meta?.name}</span>}
+      <Identicon size={iconSize} value={address} className="rounded-full border border-gray-100 mr-1" />
+      <AccountName account={address} />
       <span className="mx-1">-</span>
       <EllipsisMiddle className="lg:w-full w-1/2 dark:text-gray-700" value={address} />
     </div>

diff --git a/src/providers/api.tsx b/src/providers/api.tsx
@@ -3,6 +3,7 @@ import { Alert } from 'antd';
 import { createContext, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { EMPTY, Subscription } from 'rxjs';
+import keyring from '@polkadot/ui-keyring';
 import { BallScalePulse } from '../components/widget/BallScalePulse';
 import { crabConfig, THEME } from '../config';
 import {
@@ -53,10 +54,14 @@ function accountReducer(state: StoreState, action: Action<ActionType, any>): Sto
         ...state,
         connection: {
           ...rest,
-          accounts: accounts.map((item) => ({
-            ...item,
-            address: convertToSS58(item.address, state.network.ss58Prefix),
-          })),
+          accounts: accounts.map((item) => {
+            const address = convertToSS58(item.address, state.network.ss58Prefix);
+            keyring.saveAddress(address, item.meta);
+            return {
+              ...item,
+              address,
+            };
+          }),
         },
       };
     }

diff --git a/src/utils/network/connection.tsx b/src/utils/network/connection.tsx
@@ -29,7 +29,6 @@ import {
   IAccountMeta,
   PolkadotConnection,
 } from '../../model';
-import { getAddressMeta } from '../helper';
 import { entrance } from './entrance';
 import { isMetamaskInstalled, isNetworkConsistent } from './network';
 import { switchMetamaskNetwork } from './switch';
@@ -52,7 +51,7 @@ export const getPolkadotConnection: (network: ChainConfig) => Observable<Polkado
         const source = keys.filter((key) => !injectedAddress.includes(key));
 
         const local: IAccountMeta[] = source.map((address) => {
-          const meta = getAddressMeta(address);
+          const meta = injected.find((item) => item.address === address)?.meta || {};
 
           return {
             address,