From 9409a4977190ecfd613c302242b1bb967672b726 Mon Sep 17 00:00:00 2001
From: Daria <2395326+piggydoughnut@users.noreply.github.com>
Date: Tue, 1 Oct 2024 20:27:15 +0800
Subject: [PATCH] adding an option to use AccountId20 type for H160 addresses
 (#10969)

---
 packages/page-addresses/src/modals/Create.tsx | 5 ++---
 packages/react-components/src/AccountName.tsx | 9 +++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/page-addresses/src/modals/Create.tsx b/packages/page-addresses/src/modals/Create.tsx
index 694ca968cf..04079a129b 100644
--- a/packages/page-addresses/src/modals/Create.tsx
+++ b/packages/page-addresses/src/modals/Create.tsx
@@ -5,7 +5,7 @@ import type { DeriveAccountInfo } from '@polkadot/api-derive/types';
 import type { ActionStatus } from '@polkadot/react-components/Status/types';
 import type { ModalProps as Props } from '../types.js';
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import { AddressRow, Button, Input, InputAddress, Modal } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
@@ -34,7 +34,7 @@ function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props>
   const [{ isNameValid, name }, setName] = useState<NameState>({ isNameValid: false, name: '' });
   const [{ address, addressInput, isAddressExisting, isAddressValid }, setAddress] = useState<AddrState>({ address: '', addressInput: '', isAddressExisting: false, isAddressValid: false, isPublicKey: false });
   const info = useCall<DeriveAccountInfo>(!!address && isAddressValid && api.derive.accounts.info, [address]);
-  const isValid = (isAddressValid && isNameValid) && !!info?.accountId;
+  const isValid = useMemo(() => (isAddressValid && isNameValid) && !!info?.accountId, [isAddressValid, isNameValid, info]);
 
   const _onChangeAddress = useCallback(
     (addressInput: string): void => {
@@ -64,7 +64,6 @@ function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props>
 
             isAddressExisting = true;
             isAddressValid = true;
-
             setName({ isNameValid: !!(newName || '').trim(), name: newName });
           }
         }
diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index 00778444ea..94874cfaf6 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -10,7 +10,8 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { statics } from '@polkadot/react-api/statics';
 import { useApi, useDeriveAccountInfo } from '@polkadot/react-hooks';
 import { AccountSidebarCtx } from '@polkadot/react-hooks/ctx/AccountSidebar';
-import { formatNumber, isCodec, isFunction, stringToU8a, u8aEmpty, u8aEq, u8aToBn } from '@polkadot/util';
+import { formatNumber, isCodec, isFunction, isU8a, stringToU8a, u8aEmpty, u8aEq, u8aToBn } from '@polkadot/util';
+import { decodeAddress } from '@polkadot/util-crypto';
 
 import { getAddressName } from './util/index.js';
 import Badge from './Badge.js';
@@ -48,9 +49,9 @@ function createNumMatcher (prefix: string, name: string, add?: string): AddrMatc
 
   return (addr: unknown): string | null => {
     try {
-      const u8a = isCodec(addr)
-        ? addr.toU8a()
-        : statics.registry.createType('AccountId', addr as string).toU8a();
+      const decoded = isU8a(addr) ? addr : isCodec(addr) ? addr.toU8a() : decodeAddress(addr?.toString() || '');
+      const type = decoded.length === 20 ? 'AccountId20' : 'AccountId';
+      const u8a = statics.registry.createType(type, decoded).toU8a();
 
       return (u8a.length >= minLength) && u8aEq(test, u8a.subarray(0, test.length)) && u8aEmpty(u8a.subarray(minLength))
         ? `${name} ${formatNumber(u8aToBn(u8a.subarray(test.length, minLength)))}${add ? ` (${add})` : ''}`