change Blockie to Avatar component

package-lock.json

@@ -39187,6 +39187,186 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
+    },
+    "node_modules/@next/swc-android-arm-eabi": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.1.tgz",
+      "integrity": "sha512-i+BvKA8tB//srVPPQxIQN5lvfROcfv4OB23/L1nXznP+N/TyKL8lql3l7oo2LNhnH66zWhfoemg3Q4VJZSruzQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-android-arm64": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.3.1.tgz",
+      "integrity": "sha512-CmgU2ZNyBP0rkugOOqLnjl3+eRpXBzB/I2sjwcGZ7/Z6RcUJXK5Evz+N0ucOxqE4cZ3gkTeXtSzRrMK2mGYV8Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.1.tgz",
+      "integrity": "sha512-hT/EBGNcu0ITiuWDYU9ur57Oa4LybD5DOQp4f22T6zLfpoBMfBibPtR8XktXmOyFHrL/6FC2p9ojdLZhWhvBHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.1.tgz",
+      "integrity": "sha512-9S6EVueCVCyGf2vuiLiGEHZCJcPAxglyckTZcEwLdJwozLqN0gtS0Eq0bQlGS3dH49Py/rQYpZ3KVWZ9BUf/WA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-freebsd-x64": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.1.tgz",
+      "integrity": "sha512-qcuUQkaBZWqzM0F1N4AkAh88lLzzpfE6ImOcI1P6YeyJSsBmpBIV8o70zV+Wxpc26yV9vpzb+e5gCyxNjKJg5Q==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm-gnueabihf": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.1.tgz",
+      "integrity": "sha512-diL9MSYrEI5nY2wc/h/DBewEDUzr/DqBjIgHJ3RUNtETAOB3spMNHvJk2XKUDjnQuluLmFMloet9tpEqU2TT9w==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.1.tgz",
+      "integrity": "sha512-o/xB2nztoaC7jnXU3Q36vGgOolJpsGG8ETNjxM1VAPxRwM7FyGCPHOMk1XavG88QZSQf+1r+POBW0tLxQOJ9DQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.1.tgz",
+      "integrity": "sha512-2WEasRxJzgAmP43glFNhADpe8zB7kJofhEAVNbDJZANp+H4+wq+/cW1CdDi8DqjkShPEA6/ejJw+xnEyDID2jg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.1.tgz",
+      "integrity": "sha512-JWEaMyvNrXuM3dyy9Pp5cFPuSSvG82+yABqsWugjWlvfmnlnx9HOQZY23bFq3cNghy5V/t0iPb6cffzRWylgsA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.1.tgz",
+      "integrity": "sha512-xoEWQQ71waWc4BZcOjmatuvPUXKTv6MbIFzpm4LFeCHsg2iwai0ILmNXf81rJR+L1Wb9ifEke2sQpZSPNz1Iyg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.1.tgz",
+      "integrity": "sha512-hswVFYQYIeGHE2JYaBVtvqmBQ1CppplQbZJS/JgrVI3x2CurNhEkmds/yqvDONfwfbttTtH4+q9Dzf/WVl3Opw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.1.tgz",
+      "integrity": "sha512-Kny5JBehkTbKPmqulr5i+iKntO5YMP+bVM8Hf8UAmjSMVo3wehyLVc9IZkNmcbxi+vwETnQvJaT5ynYBkJ9dWA==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   },
   "dependencies": {
@@ -69741,6 +69921,78 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
       "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw=="
+    },
+    "@next/swc-android-arm-eabi": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.1.tgz",
+      "integrity": "sha512-i+BvKA8tB//srVPPQxIQN5lvfROcfv4OB23/L1nXznP+N/TyKL8lql3l7oo2LNhnH66zWhfoemg3Q4VJZSruzQ==",
+      "optional": true
+    },
+    "@next/swc-android-arm64": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.3.1.tgz",
+      "integrity": "sha512-CmgU2ZNyBP0rkugOOqLnjl3+eRpXBzB/I2sjwcGZ7/Z6RcUJXK5Evz+N0ucOxqE4cZ3gkTeXtSzRrMK2mGYV8Q==",
+      "optional": true
+    },
+    "@next/swc-darwin-arm64": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.1.tgz",
+      "integrity": "sha512-hT/EBGNcu0ITiuWDYU9ur57Oa4LybD5DOQp4f22T6zLfpoBMfBibPtR8XktXmOyFHrL/6FC2p9ojdLZhWhvBHg==",
+      "optional": true
+    },
+    "@next/swc-darwin-x64": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.1.tgz",
+      "integrity": "sha512-9S6EVueCVCyGf2vuiLiGEHZCJcPAxglyckTZcEwLdJwozLqN0gtS0Eq0bQlGS3dH49Py/rQYpZ3KVWZ9BUf/WA==",
+      "optional": true
+    },
+    "@next/swc-freebsd-x64": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.1.tgz",
+      "integrity": "sha512-qcuUQkaBZWqzM0F1N4AkAh88lLzzpfE6ImOcI1P6YeyJSsBmpBIV8o70zV+Wxpc26yV9vpzb+e5gCyxNjKJg5Q==",
+      "optional": true
+    },
+    "@next/swc-linux-arm-gnueabihf": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.1.tgz",
+      "integrity": "sha512-diL9MSYrEI5nY2wc/h/DBewEDUzr/DqBjIgHJ3RUNtETAOB3spMNHvJk2XKUDjnQuluLmFMloet9tpEqU2TT9w==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-gnu": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.1.tgz",
+      "integrity": "sha512-o/xB2nztoaC7jnXU3Q36vGgOolJpsGG8ETNjxM1VAPxRwM7FyGCPHOMk1XavG88QZSQf+1r+POBW0tLxQOJ9DQ==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-musl": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.1.tgz",
+      "integrity": "sha512-2WEasRxJzgAmP43glFNhADpe8zB7kJofhEAVNbDJZANp+H4+wq+/cW1CdDi8DqjkShPEA6/ejJw+xnEyDID2jg==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-gnu": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.1.tgz",
+      "integrity": "sha512-JWEaMyvNrXuM3dyy9Pp5cFPuSSvG82+yABqsWugjWlvfmnlnx9HOQZY23bFq3cNghy5V/t0iPb6cffzRWylgsA==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-musl": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.1.tgz",
+      "integrity": "sha512-xoEWQQ71waWc4BZcOjmatuvPUXKTv6MbIFzpm4LFeCHsg2iwai0ILmNXf81rJR+L1Wb9ifEke2sQpZSPNz1Iyg==",
+      "optional": true
+    },
+    "@next/swc-win32-arm64-msvc": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.1.tgz",
+      "integrity": "sha512-hswVFYQYIeGHE2JYaBVtvqmBQ1CppplQbZJS/JgrVI3x2CurNhEkmds/yqvDONfwfbttTtH4+q9Dzf/WVl3Opw==",
+      "optional": true
+    },
+    "@next/swc-win32-ia32-msvc": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.1.tgz",
+      "integrity": "sha512-Kny5JBehkTbKPmqulr5i+iKntO5YMP+bVM8Hf8UAmjSMVo3wehyLVc9IZkNmcbxi+vwETnQvJaT5ynYBkJ9dWA==",
+      "optional": true
     }
   }
 }

src/components/@shared/Orbis/Comment/Post.tsx

@@ -2,10 +2,8 @@ import React, { useState, useEffect, ReactNode } from 'react'
 import Link from 'next/link'
 import { accountTruncate } from '@utils/web3'
 import { didToAddress, formatMessage } from '@utils/orbis'
-import get3BoxProfile from '@utils/profile'
+import Avatar from '@shared/atoms/Avatar'
-import Blockies from '@shared/atoms/Blockies'
 import Time from '@shared/atoms/Time'
-import { useCancelToken } from '@hooks/useCancelToken'
 import { useOrbis } from '@context/Orbis'
 import styles from './Post.module.css'
 
@@ -24,12 +22,9 @@ export default function Post({
 
   const [address, setAddress] = useState('')
   const [name, setName] = useState('')
-  const [profile, setProfile] = useState<Profile>()
   const [parsedBody, setParsedBody] = useState<ReactNode>()
   const [reacted, setReacted] = useState('')
 
-  const newCancelToken = useCancelToken()
-
   const reactions = [
     // {
     //   ctx: 'reply',
@@ -103,13 +98,6 @@ export default function Post({
       setName(accountTruncate(address))
     }
 
-    async function getProfileData() {
-      const profile = await get3BoxProfile(address, newCancelToken())
-      if (!profile) return
-      setProfile(profile)
-    }
-    getProfileData()
-
     setParsedBody(formatMessage(post.content))
 
     getUserReaction()
@@ -121,11 +109,7 @@ export default function Post({
 
   return (
     <div className={styles.post}>
-      <Blockies
+      <Avatar accountId={address} className={styles.blockies} />
-        accountId={address}
-        className={styles.blockies}
-        image={profile?.image}
-      />
       <div className={styles.content}>
         {showProfile && (
           <div className={styles.profile}>

src/components/@shared/Orbis/DirectMessages/ConversationItem.tsx

@@ -2,9 +2,8 @@ import React, { useState, useEffect } from 'react'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { useOrbis } from '@context/Orbis'
 import { accountTruncate } from '@utils/web3'
-import get3BoxProfile from '@utils/profile'
 import { didToAddress } from '@utils/orbis'
-import Blockies from '@shared/atoms/Blockies'
+import Avatar from '@shared/atoms/Avatar'
 import Time from '@shared/atoms/Time'
 import styles from './ConversationItem.module.css'
 
@@ -23,7 +22,6 @@ export default function ConversationItem({
 
   const [name, setName] = useState(null)
   const [address, setAddress] = useState(null)
-  const [image, setImage] = useState(null)
 
   useEffect(() => {
     const getProfile = async () => {
@@ -41,10 +39,6 @@ export default function ConversationItem({
       } else {
         setName(accountTruncate(_address))
       }
-
-      const profile = await get3BoxProfile(_address, newCancelToken())
-
-      setImage(profile?.image)
     }
 
     if (conversation && account) {
@@ -58,11 +52,7 @@ export default function ConversationItem({
       onClick={() => setConversationId(conversation.stream_id)}
     >
       <div className={styles.accountAvatarSet}>
-        <Blockies
+        <Avatar accountId={address} className={styles.accountAvatar} />
-          accountId={address}
-          className={styles.accountAvatar}
-          image={image}
-        />
         {unreads > 0 && (
           <div className={styles.notificationCount}>{unreads}</div>
         )}

src/components/Profile/Header/index.tsx

@@ -7,8 +7,6 @@ import Account from './Account'
 import styles from './index.module.css'
 import { useProfile } from '@context/Profile'
 import { useOrbis } from '@context/Orbis'
-import { Context } from 'urql'
-import { filter } from 'lodash'
 import { sleep } from '@utils/index'
 
 const isDescriptionTextClamped = () => {
@@ -30,15 +28,7 @@ export default function AccountHeader({
   accountId: string
 }): ReactElement {
   const { profile } = useProfile()
-  const {
+  const { orbis, setConvOpen, setConversationId, conversations } = useOrbis()
-    orbis,
-    account,
-    convOpen,
-    setConvOpen,
-    conversationId,
-    setConversationId,
-    conversations
-  } = useOrbis()
   const [isShowMore, setIsShowMore] = useState(false)
   const [userDid, setUserDid] = useState<string>()
 
@@ -46,28 +36,6 @@ export default function AccountHeader({
     setIsShowMore(!isShowMore)
   }
 
-  const getDid = async () => {
-    const { data, error } = await orbis.getDids(accountId)
-    console.log(data)
-    if (data) {
-      if (data.length > 0) {
-        console.log(data[0].did)
-        setUserDid(data[0].did)
-      } else if (accountId) {
-        console.log(accountId)
-        setUserDid('did:pkh:eip155:1:' + accountId?.toLocaleLowerCase())
-      } else {
-        console.log('try again')
-        await sleep(1000)
-        getDid()
-      }
-    }
-
-    if (error) {
-      console.log(error)
-    }
-  }
-
   const createConversation = async () => {
     const res = await orbis.createConversation({
       recipients: [userDid],
@@ -84,18 +52,32 @@ export default function AccountHeader({
   }
 
   useEffect(() => {
+    const getDid = async () => {
+      const { data, error } = await orbis.getDids(accountId)
+      console.log(data)
+      if (data) {
+        if (data.length > 0) {
+          console.log(data[0].did)
+          setUserDid(data[0].did)
+        } else if (accountId) {
+          console.log(accountId)
+          setUserDid('did:pkh:eip155:1:' + accountId?.toLocaleLowerCase())
+        } else {
+          console.log('try again')
+          await sleep(1000)
+          getDid()
+        }
+      }
+
+      if (error) {
+        console.log(error)
+      }
+    }
+
     if (orbis && accountId) {
       getDid()
-      // console.log(userDid)
     }
-  }, [accountId])
+  }, [orbis, accountId])
-
-  const clickHandler = () => {
-    console.log(accountId)
-    console.log(account)
-    getDid()
-    createConversation()
-  }
 
   const checkConversation = () => {
     const filtered = conversations.filter(