feat: add eth address identicon (#55)

package.json

@@ -41,6 +41,7 @@
     "@walletconnect/modal": "^2.7.0",
     "@walletconnect/universal-provider": "^2.21.0",
     "@walletconnect/utils": "^2.21.0",
+    "blo": "^2.0.0",
     "buffer": "^6.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

pnpm-lock.yaml

@@ -94,6 +94,9 @@ importers:
       '@walletconnect/utils':
         specifier: ^2.21.0
         version: 2.21.0(typescript@5.8.3)(zod@3.25.49)
+      blo:
+        specifier: ^2.0.0
+        version: 2.0.0
       buffer:
         specifier: ^6.0.3
         version: 6.0.3
@@ -1794,6 +1797,9 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
+  blo@2.0.0:
+    resolution: {integrity: sha512-VUUr1+vWisNSaHVswkbPbk1+GhygClKILkGchae7nsyuJ4ZVz5l1hEW4eR5F/ly/asM5vzigYGXjPnvrd//CVg==}
+
   bn.js@5.2.2:
     resolution: {integrity: sha512-v2YAxEmKaBLahNwE1mjp4WON6huMNeuDvagFZW+ASCuA/ku0bXR9hSMw0XpiqMoA3+rmnyck/tPRSFQkoC9Cuw==}
 
@@ -5537,6 +5543,8 @@ snapshots:
 
   base64-js@1.5.1: {}
 
+  blo@2.0.0: {}
+
   bn.js@5.2.2: {}
 
   brace-expansion@1.1.11:

src/components/EthAccountDisplay.tsx

@@ -3,6 +3,7 @@ import { useStateObservable } from "@react-rxjs/core"
 import { HexString } from "polkadot-api"
 import { FC } from "react"
 import { twMerge } from "tailwind-merge"
+import { EthIdenticon } from "./EthIdenticon"
 
 export const EthAccountDisplay: FC<{
   value: HexString
@@ -10,16 +11,14 @@ export const EthAccountDisplay: FC<{
 }> = ({ value, className }) => {
   const { name } = useStateObservable(accountDetail$(value)) ?? {}
   return (
-    <div
-      className={twMerge(
-        "flex flex-col justify-center text-foreground leading-tight overflow-hidden",
-        className,
-      )}
-    >
-      {name && <span className="inline-flex items-center gap-1">{name}</span>}
-      <span className="text-foreground/50 text-ellipsis overflow-hidden">
-        {value}
-      </span>
+    <div className={twMerge("flex items-center gap-2", className)}>
+      <EthIdenticon address={value} size={28} />
+      <div className="flex flex-col justify-center text-foreground leading-tight overflow-hidden">
+        {name && <span className="inline-flex items-center gap-1">{name}</span>}
+        <span className="text-foreground/50 text-ellipsis overflow-hidden">
+          {value}
+        </span>
+      </div>
     </div>
   )
 }

src/components/EthIdenticon.tsx

@@ -0,0 +1,10 @@
+import { HexString } from "polkadot-api"
+import { FC } from "react"
+import { blo } from "blo"
+
+export const EthIdenticon: FC<{ address: HexString; size?: number }> = ({
+  address,
+  size,
+}) => {
+  return <img className="rounded-full" src={blo(address as "0x", size)} />
+}

src/components/PolkadotIdenticon.tsx

@@ -1,6 +1,6 @@
 // Based from https://github.com/paritytech/oo7/blob/251ba2b7c45503b68eab4320c270b5afa9bccb60/packages/polkadot-identicon/src/index.jsx
 
-import { blake2b } from "@noble/hashes/blake2b"
+import { blake2b } from "@noble/hashes/blake2"
 import { FC, SVGAttributes } from "react"
 
 export const PolkadotIdenticon: FC<

src/pages/Explorer/Detail/Extrinsic.tsx

@@ -10,6 +10,7 @@ import { Enum, HexString, SS58String } from "polkadot-api"
 import { FC, useEffect, useRef, useState } from "react"
 import { twMerge } from "tailwind-merge"
 import { DecodedExtrinsic } from "./extrinsicDecoder"
+import { EthAccountDisplay } from "@/components/EthAccountDisplay"
 
 export type ApplyExtrinsicEvent = SystemEvent & {
   phase: { type: "ApplyExtrinsic" }
@@ -131,7 +132,11 @@ const Sender: React.FC<{
     value && (
       <div className="flex gap-2 items-center py-2">
         Signer:
-        <AccountIdDisplay value={value} />
+        {value.startsWith("0x") ? (
+          <EthAccountDisplay value={value} />
+        ) : (
+          <AccountIdDisplay value={value} />
+        )}
       </div>
     )
   )

src/pages/Extrinsics/SubmitTx/AccountProvider.tsx

@@ -1,4 +1,5 @@
 import { AccountIdDisplay } from "@/components/AccountIdDisplay"
+import { EthAccountDisplay } from "@/components/EthAccountDisplay"
 import { WalletConnect } from "@/components/Icons"
 import {
   Select,
@@ -45,7 +46,11 @@ const Accounts: React.FC<{ extension: InjectedExtension }> = ({
           key={account.address}
           value={account.address + "-" + extension.name}
         >
-          <AccountIdDisplay value={account.address} />
+          {account.address.startsWith("0x") ? (
+            <EthAccountDisplay value={account.address} />
+          ) : (
+            <AccountIdDisplay value={account.address} />
+          )}
         </SelectItem>
       ))}
     </SelectGroup>
@@ -64,7 +69,11 @@ const WalletConnectAccounts = () => {
       </SelectLabel>
       {Object.keys(accounts).map((address) => (
         <SelectItem key={address} value={address + "-" + "wallet_connect"}>
-          <AccountIdDisplay value={address} />
+          {address.startsWith("0x") ? (
+            <EthAccountDisplay value={address} />
+          ) : (
+            <AccountIdDisplay value={address} />
+          )}
         </SelectItem>
       ))}
     </SelectGroup>