feat: ens avatar support

package.json

@@ -7,6 +7,7 @@
         "@apollo/client": "^3.3.13",
         "@babel/core": "^7.12.3",
         "@babel/runtime": "^7.12.1",
+        "@davatar/react": "^1.8.1",
         "@ethersproject/experimental": "^5.0.1",
         "@material-ui/styles": "4.10.0",
         "@popperjs/core": "^2.4.4",
@@ -60,7 +61,6 @@
         "i18next-browser-languagedetector": "^3.0.1",
         "i18next-xhr-backend": "^2.0.1",
         "inter-ui": "^3.13.1",
-        "jazzicon": "^1.5.0",
         "lodash.flatmap": "^4.5.0",
         "luxon": "^1.25.0",
         "multicodec": "^2.0.0",
@@ -146,4 +146,4 @@
         "uuid-random-es": "^2.1.1",
         "web3": "^1.3.1"
     }
-}
+}

src/components/Identicon/index.tsx

@@ -1,29 +1,9 @@
-import React, { useEffect, useRef } from 'react'
-
-import styled from 'styled-components'
-
+import React from 'react'
+import Davatar from '@davatar/react'
 import { useActiveWeb3React } from '../../hooks'
-import Jazzicon from 'jazzicon'
-
-const StyledIdenticonContainer = styled.div`
-  height: 2rem;
-  width: 2rem;
-  border-radius: 1.125rem;
-  background-color: ${({ theme }) => theme.bg4};
-`
 
 export default function Identicon() {
-  const ref = useRef<HTMLDivElement>()
-
   const { account } = useActiveWeb3React()
 
-  useEffect(() => {
-    if (account && ref.current) {
-      ref.current.innerHTML = ''
-      ref.current.appendChild(Jazzicon(32, parseInt(account.slice(2, 10), 16)))
-    }
-  }, [account])
-
-  // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451
-  return <StyledIdenticonContainer ref={ref as any} />
+  return <Davatar size={32} address={account || ''} generatedAvatarType="jazzicon" />
 }

src/react-app-env.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react-scripts" />
-
-declare module 'jazzicon' {
-  export default function (diameter: number, seed: number): HTMLElement
-}
-
 declare module 'fortmatic'
 
 interface Window {