From a6e49f536747211b6764060b19b8f9cf2dd32ab1 Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Tue, 12 Dec 2023 02:17:19 +0700
Subject: [PATCH] feat: improve seed for name and color

---
 src/components/Name.tsx           |  4 +++-
 src/hooks/useAddressRandomSeed.ts | 18 ++++++++++++++++++
 src/hooks/useRandomColor.ts       | 10 ++++------
 3 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 src/hooks/useAddressRandomSeed.ts

diff --git a/src/components/Name.tsx b/src/components/Name.tsx
index 38a586992..be4738867 100644
--- a/src/components/Name.tsx
+++ b/src/components/Name.tsx
@@ -4,6 +4,7 @@ import KusamaIcon from '@/assets/icons/kusama-dynamic-size.svg'
 import PolkadotIcon from '@/assets/icons/polkadot-dynamic-size.svg'
 import SubsocialIcon from '@/assets/icons/subsocial-dynamic-size.svg'
 import XLogoIcon from '@/assets/icons/x-logo-dynamic-size.svg'
+import useAddressRandomSeed from '@/hooks/useAddressRandomSeed'
 import useRandomColor from '@/hooks/useRandomColor'
 import { getIdentityQuery, getProfileQuery } from '@/services/api/query'
 import { getLinkedIdentityQuery } from '@/services/datahub/identity/query'
@@ -168,7 +169,8 @@ export function useName(
   const isLoadingIdentities = isFetchingIdentities && isIdentitiesNeeded
 
   const { ensNames, evmAddress } = accountData || {}
-  let name = generateRandomName(address)
+  const randomSeed = useAddressRandomSeed(address)
+  let name = generateRandomName(randomSeed)
 
   function getNameFromSource(profileSource?: ProfileSource, content?: string) {
     switch (profileSource) {
diff --git a/src/hooks/useAddressRandomSeed.ts b/src/hooks/useAddressRandomSeed.ts
new file mode 100644
index 000000000..e5a5e790b
--- /dev/null
+++ b/src/hooks/useAddressRandomSeed.ts
@@ -0,0 +1,18 @@
+import { getLinkedIdentityQuery } from '@/services/datahub/identity/query'
+import { getAccountDataQuery } from '@/services/subsocial/evmAddresses'
+
+export default function useAddressRandomSeed(
+  address: string,
+  { enabled } = { enabled: true }
+) {
+  const { data: linkedIdentity } = getLinkedIdentityQuery.useQuery(
+    address || '',
+    { enabled }
+  )
+  const { data: accountData } = getAccountDataQuery.useQuery(address || '', {
+    enabled,
+  })
+  const { evmAddress } = accountData || {}
+
+  return evmAddress || linkedIdentity?.externalId || address
+}
diff --git a/src/hooks/useRandomColor.ts b/src/hooks/useRandomColor.ts
index 2c1aea39c..dbf44ed7b 100644
--- a/src/hooks/useRandomColor.ts
+++ b/src/hooks/useRandomColor.ts
@@ -1,7 +1,7 @@
 import { Theme } from '@/@types/theme'
 import { useConfigContext } from '@/providers/ConfigProvider'
-import { getAccountDataQuery } from '@/services/subsocial/evmAddresses'
 import { generateRandomColor } from '@/utils/random-colors'
+import useAddressRandomSeed from './useAddressRandomSeed'
 import useGetTheme from './useGetTheme'
 
 export default function useRandomColor(
@@ -15,14 +15,12 @@ export default function useRandomColor(
 
   const { theme: configTheme } = useConfigContext()
   const currentTheme = useGetTheme()
-  const { data: accountData } = getAccountDataQuery.useQuery(seed || '', {
-    enabled: !!isAddress,
+  const addressSeed = useAddressRandomSeed(seed ?? '', {
+    enabled: !!isAddress && !!seed,
   })
 
-  const { evmAddress } = accountData || {}
-
   return generateRandomColor(
-    evmAddress || seed,
+    addressSeed || seed,
     theme ?? configTheme ?? currentTheme
   )
 }