add onchain metadata on the main page (#137)

* add onchain metadata on the main page

* update packages

* revert changes

Author: 0xShuk

hooks/useOnchainMetadata/index.ts

@@ -9,6 +9,12 @@ import { useRealmByPubkeyQuery } from "@hooks/queries/realm"
 import { getNativeTreasuryAddress } from "@solana/spl-governance"
 
 export type MetadataKey = IdlAccounts<MythicMetadata>["metadataKey"]
+export type MetadataItemForList = {
+  displayName: string | undefined
+  daoImage: string | undefined
+  realm: PublicKey
+}
+
 const metadataProgramId = new PublicKey("metaThtkusoWYDvHBFXfvc93Z3d8iBeDZ4DVyq8SYVR")
 
 export function useGetOnchainMetadata(realmAddress: PublicKey | undefined) {
@@ -19,7 +25,7 @@ export function useGetOnchainMetadata(realmAddress: PublicKey | undefined) {
 
   return useQuery({
     enabled: realm !== undefined,
-    queryKey: ['get-onchain=metadata', {realmAddress: realmAddress?.toBase58()}],
+    queryKey: ['get-onchain-metadata', {realmAddress: realmAddress?.toBase58()}],
     queryFn: async() => {
       if (!realm || !realm.result) {
         return null
@@ -65,6 +71,41 @@ export function useGetOnchainMetadata(realmAddress: PublicKey | undefined) {
         return null
       }
     },
+    refetchOnWindowFocus: false,
+    staleTime: 3600000, // 1 hour
+    cacheTime: 3600000 * 24 * 10,
+  })
+}
+
+export function useGetAllMetadata() {
+  const { connection } = useConnection()
+  const provider = new AnchorProvider(connection, {} as Wallet, {})
+  const client = new Program(idl as MythicMetadata, metadataProgramId, provider)
+
+  const query = useQuery({
+    queryKey: ['get-onchain-metadata'],
+    queryFn: async () => {
+      const metadatas = await client.account.metadata.all()
+      const displayNameKeyId = metadataKeys[1].id
+      const daoImageKeyId = metadataKeys[2].id
+
+      const metadataItems: MetadataItemForList[] = metadatas.map(metadata => {
+        const displayName = metadata.account.items.find(i => i.metadataKeyId.eq(displayNameKeyId))?.value.toString()
+        const daoImage = metadata.account.items.find(i => i.metadataKeyId.eq(daoImageKeyId))?.value.toString()
+
+        return {
+          displayName,
+          daoImage,
+          realm: metadata.account.subject
+        }
+      })
+
+      return metadataItems
+    },
+    staleTime: 3600000, // 1 hour
+    cacheTime: 3600000 * 24 * 10,
     refetchOnWindowFocus: false
   })
+
+  return query
 }

pages/realms/index.tsx

@@ -20,6 +20,7 @@ import { DEFAULT_GOVERNANCE_PROGRAM_ID } from '@components/instructions/tools'
 import { useRealmsByProgramQuery } from '@hooks/queries/realm'
 import useLegacyConnectionContext from '@hooks/useLegacyConnectionContext'
 import RealmsDashboard from './components/RealmsDashboard'
+import { useGetAllMetadata } from '@hooks/useOnchainMetadata'
 
 const Realms = () => {
   const [realms, setRealms] = useState<ReadonlyArray<RealmInfo>>([])
@@ -42,7 +43,8 @@ const Realms = () => {
     [],
   )
   const { data: queryRealms } = useRealmsByProgramQuery(programs)
-
+  const metadata = useGetAllMetadata().data
+  
   useMemo(async () => {
     if (
       connection &&
@@ -64,11 +66,29 @@ const Realms = () => {
             }),
           ) ?? []
       const allRealms = [...certifiedRealms, ...unchartedRealms]
-      setRealms(sortDaos(allRealms))
+
+      if (metadata) {
+        const updatedRealms = allRealms.map((realm) => {
+          const metadataAccount = metadata.find(
+            (m) => m.realm.toBase58() === realm.realmId.toBase58()
+          )
+
+          if (metadataAccount) {
+            return {
+              ...realm,
+              displayName: metadataAccount.displayName ?? realm.displayName,
+              ogImage: metadataAccount.daoImage ?? realm.ogImage,
+            }
+          }
+          return realm
+        })
+        setRealms(sortDaos(updatedRealms))
+      }
+      
       setFilteredRealms(sortDaos(allRealms))
       setIsLoadingRealms(false)
     }
-  }, [connection, routeHasClusterInPath, cluster, queryRealms])
+  }, [connection, routeHasClusterInPath, cluster, queryRealms, metadata])
 
   const handleCreateRealmButtonClick = async () => {
     if (!connected) {

public/realms/mainnet-beta.json

@@ -3965,5 +3965,13 @@
     "realmId": "GDaLwof8UxAsQZjBgtiWepyV73rkKpdPVUMFVEAwMw1r",
     "communityMint": "4B5EYJd7MJaVEZUWMhMxUckxtMqSicJpiqM4g6hKm4wz",
     "sortRank": 986
+  },
+  {
+    "symbol": "Realms Consensus HK",
+    "displayName": "Realms Consensus HK",
+    "programId": "GovER5Lthms3bLBqWub97yVrMmEogzX7xNjdXpPPCVZw",
+    "realmId": "E9xXs6YpuMBD3a8jShzMDzsivZiy8YmcD5UzTsmwsUE",
+    "communityMint": "7JLYpUf35CbKsHW6x1zw4RbsNhcmtEfxT352czXi59Cg",
+    "sortRank": 1001
   }
 ]