From 1a8f7e27277616759ecff6d4fefd1130d7e0692d Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 17 Dec 2019 14:26:23 +0100
Subject: [PATCH] Use lookup accountId for IdentiIcon display (#2065)

---
 packages/react-components/src/IdentityIcon.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/IdentityIcon.tsx b/packages/react-components/src/IdentityIcon.tsx
index 2c1eba93d6..94a366e90a 100644
--- a/packages/react-components/src/IdentityIcon.tsx
+++ b/packages/react-components/src/IdentityIcon.tsx
@@ -2,11 +2,12 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { DeriveAccountInfo } from '@polkadot/api-derive/types';
 import { IdentityProps } from '@polkadot/react-identicon/types';
 import { I18nProps } from './types';
 
 import React, { useContext, useEffect, useState } from 'react';
-import { useApi } from '@polkadot/react-hooks';
+import { useApi, useCall } from '@polkadot/react-hooks';
 import BaseIdentityIcon from '@polkadot/react-identicon';
 import uiSettings from '@polkadot/ui-settings';
 import { ValidatorsContext } from '@polkadot/react-query';
@@ -32,10 +33,12 @@ export function getIdentityTheme (systemName: string): 'empty' {
 }
 
 function IdentityIcon ({ className, onCopy, prefix, size, style, t, theme, value }: Props): React.ReactElement<Props> {
-  const { systemName } = useApi();
+  const { api, systemName } = useApi();
+  const info = useCall<DeriveAccountInfo>(api.derive.accounts.info as any, [value]);
   const { queueAction } = useContext(StatusContext);
   const validators = useContext(ValidatorsContext);
   const [isValidator, setIsValidator] = useState(false);
+  const [address, setAddress] = useState(value?.toString());
   const thisTheme = theme || getIdentityTheme(systemName);
 
   useEffect((): void => {
@@ -44,6 +47,12 @@ function IdentityIcon ({ className, onCopy, prefix, size, style, t, theme, value
     }
   }, [value, validators]);
 
+  useEffect((): void => {
+    if (info) {
+      setAddress(info.accountId?.toString());
+    }
+  }, [info]);
+
   const _onCopy = (account: string): void => {
     onCopy && onCopy(account);
     queueAction && queueAction({
@@ -63,7 +72,7 @@ function IdentityIcon ({ className, onCopy, prefix, size, style, t, theme, value
       size={size}
       style={style}
       theme={thisTheme as 'substrate'}
-      value={value?.toString()}
+      value={address}
     />
   );
 }