Update identity view for para chain address, #1385 (#1391)

* Update identity view for para chain address, #1385

* fix: icon, #1385

* fix: ci

site/src/components/User/Username.jsx

@@ -5,6 +5,10 @@ import { Popup } from "semantic-ui-react";
 import TextMinor from "../TextMinor";
 import { useDisablePopup } from "../../utils/hooks";
 import { truncate } from "../../styles/tailwindcss";
+import { KNOWN_ADDR_MATCHERS } from "../../utils/knownAddr";
+import IdentitySpecial from "../Icon/identity-special.svg";
+import Tooltip from "../Tooltip";
+import { p_12_medium } from "../../styles/text";
 
 const TextUsername = styled(TextMinor)`
   white-space: nowrap;
@@ -27,8 +31,20 @@ const TextUsername = styled(TextMinor)`
         `}
 `;
 
+const SpecialAccountWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+const Text = styled.span`
+  ${p_12_medium}
+  color: var(--textPrimaryContrast);
+`;
+
 const Username = ({ address, name, ellipsis, popup, popupContent, noLink }) => {
   const disabledPopup = useDisablePopup();
+
   let displayAddress;
   if (typeof address === "string") {
     if (ellipsis) {
@@ -50,16 +66,27 @@ const Username = ({ address, name, ellipsis, popup, popupContent, noLink }) => {
     }
   }
 
-  const displayName = name ? name : displayAddress;
+  const knownAddr = KNOWN_ADDR_MATCHERS.map((matcher) => matcher(address)).find(
+    Boolean,
+  );
+
+  const displayName = name ? name : knownAddr ? knownAddr : displayAddress;
   return (
-    <Popup
-      content={
-        popupContent ? popupContent : name ? `${name} ${address}` : address
-      }
-      size="mini"
-      disabled={!popup || disabledPopup}
-      trigger={<TextUsername noLink={noLink}>{displayName}</TextUsername>}
-    />
+    <SpecialAccountWrapper>
+      {knownAddr && (
+        <Tooltip tooltipContent={<Text>Special account</Text>}>
+          <img src={IdentitySpecial} alt="special" width={12} height={12} />
+        </Tooltip>
+      )}
+      <Popup
+        content={
+          popupContent ? popupContent : name ? `${name} ${address}` : address
+        }
+        size="mini"
+        disabled={!popup || disabledPopup}
+        trigger={<TextUsername noLink={noLink}>{displayName}</TextUsername>}
+      />
+    </SpecialAccountWrapper>
   );
 };
 

site/src/utils/knownAddr.js

@@ -0,0 +1,60 @@
+import { TypeRegistry } from "@polkadot/types/create";
+import {
+  formatNumber,
+  isCodec,
+  stringToU8a,
+  u8aEmpty,
+  u8aEq,
+  u8aToBn,
+} from "@polkadot/util";
+
+const registry = new TypeRegistry();
+
+function createAllMatcher(prefix, name) {
+  const test = registry.createType(
+    "AccountId",
+    stringToU8a(prefix.padEnd(32, "\0")),
+  );
+
+  return (addr) => (test.eq(addr) ? name : null);
+}
+
+function createNumMatcher(prefix, name, add) {
+  const test = stringToU8a(prefix);
+
+  // 4 bytes for u32 (more should not hurt, LE)
+  const minLength = test.length + 4;
+
+  return (addr) => {
+    try {
+      const u8a = isCodec(addr)
+        ? addr.toU8a()
+        : registry.createType("AccountId", addr).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})` : ""}`
+        : null;
+    } catch (e) {
+      return null;
+    }
+  };
+}
+
+export const KNOWN_ADDR_MATCHERS = [
+  createAllMatcher("modlpy/socie", "Society"),
+  createAllMatcher("modlpy/trsry", "Treasury"),
+  createAllMatcher("modlpy/xcmch", "XCM"),
+  createNumMatcher("modlpy/cfund", "Crowdloan"),
+  // Substrate master
+  createNumMatcher("modlpy/npols\x00", "Pool", "Stash"),
+  createNumMatcher("modlpy/npols\x01", "Pool", "Reward"),
+  // Westend
+  createNumMatcher("modlpy/nopls\x00", "Pool", "Stash"),
+  createNumMatcher("modlpy/nopls\x01", "Pool", "Reward"),
+  createNumMatcher("para", "Parachain"),
+  createNumMatcher("sibl", "Sibling"),
+];