diff --git a/packages/nextjs/components/AccountAvatar/addressToJazzIconSeed.tsx b/packages/nextjs/components/AccountAvatar/addressToJazzIconSeed.tsx index fe52acb4..4b42ecae 100644 --- a/packages/nextjs/components/AccountAvatar/addressToJazzIconSeed.tsx +++ b/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); } diff --git a/packages/nextjs/components/AccountAvatar/index.tsx b/packages/nextjs/components/AccountAvatar/index.tsx index 14c8747c..0015a7e3 100644 --- a/packages/nextjs/components/AccountAvatar/index.tsx +++ b/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 = ({ account }) => { - const { isMobile } = useScreenSize() + address: string; + size: number; +}; - if (!account.address) { - return null +export const AccountAvatar: FC = ({ address, size }) => { + if (!address) { + return null; } - return -} + return ; +}; diff --git a/packages/nextjs/components/JazzIcon/index.tsx b/packages/nextjs/components/JazzIcon/index.tsx index c8da0c06..77deab6c 100644 --- a/packages/nextjs/components/JazzIcon/index.tsx +++ b/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(null) + const ref = useRef(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 -}) + return ; +}); +JazzIcon.displayName = "JazzIcon"; diff --git a/packages/nextjs/components/JazzIcon/jazzicon.d.ts b/packages/nextjs/components/JazzIcon/jazzicon.d.ts index a0af3ec8..b5fefb34 100644 --- a/packages/nextjs/components/JazzIcon/jazzicon.d.ts +++ b/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; }