Migrate AccountAvatar into this codebase

packages/nextjs/components/AccountAvatar/addressToJazzIconSeed.tsx

@@ -1,20 +1,11 @@
-import { staking } from '@oasisprotocol/client'
-
 const ethAddressToSeed = (address_eth: string) => {
   // https://github.com/oasisprotocol/oasis-wallet-ext/blob/da7ad67/src/popup/component/AccountIcon/index.js#L20-L25
   // https://github.com/MetaMask/metamask-extension/blob/v10.7.0/ui/helpers/utils/icon-factory.js#L84-L88
-  const addr = address_eth.slice(2, 10)
-  const seed = parseInt(addr, 16)
-  return seed
-}
-
-const oasisAddressToSeed = (address: string) => {
-  // https://github.com/oasisprotocol/oasis-wallet-ext/blob/da7ad67/src/popup/component/AccountIcon/index.js#L26
-  const addressU8 = staking.addressFromBech32(address)
-  const seed = addressU8[20] | (addressU8[19] << 8) | (addressU8[18] << 16) | (addressU8[17] << 24)
-  return seed
-}
+  const addr = address_eth.slice(2, 10);
+  const seed = parseInt(addr, 16);
+  return seed;
+};
 
-export function addressToJazzIconSeed(account: { address: string; address_eth?: string }) {
-  return account.address_eth ? ethAddressToSeed(account.address_eth) : oasisAddressToSeed(account.address)
+export function addressToJazzIconSeed(account: { address_eth: `0x${string}` }) {
+  return ethAddressToSeed(account.address_eth);
 }

packages/nextjs/components/AccountAvatar/index.tsx

@@ -1,21 +1,16 @@
-import { FC } from 'react'
-import { useScreenSize } from '../../hooks/useScreensize'
-import { JazzIcon } from '../JazzIcon'
-import { addressToJazzIconSeed } from './addressToJazzIconSeed'
+import { FC } from "react";
+import { JazzIcon } from "../JazzIcon/index";
+import { addressToJazzIconSeed } from "./addressToJazzIconSeed";
 
 type AccountAvatarProps = {
-  account: {
-    address: string
-    address_eth?: string
-  }
-}
-
-export const AccountAvatar: FC<AccountAvatarProps> = ({ account }) => {
-  const { isMobile } = useScreenSize()
+  address: string;
+  size: number;
+};
 
-  if (!account.address) {
-    return null
+export const AccountAvatar: FC<AccountAvatarProps> = ({ address, size }) => {
+  if (!address) {
+    return null;
   }
 
-  return <JazzIcon diameter={isMobile ? 30 : 40} seed={addressToJazzIconSeed(account)} />
-}
+  return <JazzIcon diameter={size} seed={addressToJazzIconSeed({ address_eth: address as `0x${string}` })} />;
+};

packages/nextjs/components/JazzIcon/index.tsx

@@ -1,22 +1,22 @@
-import React, { memo, useEffect, useRef } from 'react'
-import jazzicon from '@metamask/jazzicon'
-import { Box } from 'grommet/es6/components/Box'
+import React, { memo, useEffect, useRef } from "react";
+import jazzicon from "@metamask/jazzicon";
 
 interface JazzIconProps {
-  diameter: number
-  seed: number
+  diameter: number;
+  seed: number;
 }
 
 export const JazzIcon = memo(({ diameter, seed }: JazzIconProps) => {
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = useRef<HTMLSpanElement>(null);
 
   useEffect(() => {
     if (ref?.current) {
-      const icon = jazzicon(diameter, seed)
+      const icon = jazzicon(diameter, seed);
 
-      ref.current.replaceChildren(icon)
+      ref.current.replaceChildren(icon);
     }
-  }, [diameter, ref, seed])
+  }, [diameter, ref, seed]);
 
-  return <Box ref={ref}></Box>
-})
+  return <span ref={ref}></span>;
+});
+JazzIcon.displayName = "JazzIcon";

packages/nextjs/components/JazzIcon/jazzicon.d.ts

@@ -1,4 +1,4 @@
-declare module '@metamask/jazzicon' {
-  const jazzicon: (diameter: number, seed: number) => HTMLDivElement
-  export default jazzicon
+declare module "@metamask/jazzicon" {
+  const jazzicon: (diameter: number, seed: number) => HTMLDivElement;
+  export default jazzicon;
 }