feat: add eth address identicon (#55)

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<