move Blockies into separate component

src/components/atoms/Blockies.module.css

@@ -0,0 +1,8 @@
+.blockies {
+  width: var(--font-size-large);
+  height: var(--font-size-large);
+  border-radius: 50%;
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: middle;
+}

src/components/atoms/Blockies.tsx

@@ -0,0 +1,23 @@
+import { toDataUrl } from 'ethereum-blockies'
+import React, { ReactElement } from 'react'
+import styles from './Blockies.module.css'
+
+export default function Blockies({
+  accountId,
+  className
+}: {
+  accountId: string
+  className?: string
+}): ReactElement {
+  if (!accountId) return null
+  const blockies = toDataUrl(accountId)
+
+  return (
+    <img
+      className={`${styles.blockies} ${className || ''}`}
+      src={blockies}
+      alt="Blockies"
+      aria-hidden="true"
+    />
+  )
+}

src/components/molecules/Wallet/Account.module.css

@@ -41,20 +41,12 @@
   }
 }
 
-.blockies {
-  width: var(--font-size-large);
-  height: var(--font-size-large);
-  border-radius: 50%;
-  overflow: hidden;
-  display: inline-block;
-  vertical-align: middle;
-}
-
 .address {
   display: none;
   text-transform: none;
   border-right: 1px solid var(--border-color);
   padding-right: calc(var(--spacer) / 3);
+  padding-left: calc(var(--spacer) / 8);
 }
 
 @media screen and (min-width: 60rem) {

src/components/molecules/Wallet/Account.tsx

@@ -1,24 +1,10 @@
-import { toDataUrl } from 'ethereum-blockies'
 import React, { FormEvent } from 'react'
 import { ReactComponent as Caret } from '../../../images/caret.svg'
 import { accountTruncate } from '../../../utils/web3'
 import Loader from '../../atoms/Loader'
 import styles from './Account.module.css'
 import { useWeb3 } from '../../../providers/Web3'
-
+import Blockies from '../../atoms/Blockies'
-const Blockies = ({ account }: { account: string | undefined }) => {
-  if (!account) return null
-  const blockies = toDataUrl(account)
-
-  return (
-    <img
-      className={styles.blockies}
-      src={blockies}
-      alt="Blockies"
-      aria-hidden="true"
-    />
-  )
-}
 
 // Forward ref for Tippy.js
 // eslint-disable-next-line
@@ -44,7 +30,7 @@ const Account = React.forwardRef((props, ref: any) => {
       ref={ref}
       onClick={(e) => e.preventDefault()}
     >
-      <Blockies account={accountId} />
+      <Blockies accountId={accountId} />
       <span className={styles.address} title={accountId}>
         {accountTruncate(accountId)}
       </span>

src/components/pages/Profile/Account.module.css

@@ -16,9 +16,13 @@
   }
 }
 
-.imageWrap {
+.imageWrap,
+.image {
   width: 96px;
   height: 96px;
+}
+
+.imageWrap {
   border-radius: 50%;
   overflow: hidden;
   margin-bottom: calc(var(--spacer) / 4);

src/components/pages/Profile/Account.tsx

@@ -1,4 +1,3 @@
-import { toDataUrl } from 'ethereum-blockies'
 import React, { ReactElement } from 'react'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 import { accountTruncate } from '../../../utils/web3'
@@ -7,21 +6,7 @@ import NetworkName from '../../atoms/NetworkName'
 import jellyfish from '@oceanprotocol/art/creatures/jellyfish/jellyfish-grid.svg'
 import styles from './Account.module.css'
 import Copy from '../../atoms/Copy'
-
+import Blockies from '../../atoms/Blockies'
-const Blockies = ({ account }: { account: string | undefined }) => {
-  if (!account) return null
-
-  const blockies = toDataUrl(account)
-
-  return (
-    <img
-      className={styles.image}
-      src={blockies}
-      alt="Blockies"
-      aria-hidden="true"
-    />
-  )
-}
 
 export default function Account({
   name,
@@ -40,7 +25,7 @@ export default function Account({
         {image ? (
           <img src={image} className={styles.image} width="96" height="96" />
         ) : accountId ? (
-          <Blockies account={accountId} />
+          <Blockies accountId={accountId} className={styles.image} />
         ) : (
           <img
             src={jellyfish}