fix: re-fetch profile if it's updated (#156)

models/asset.ts

@@ -1,10 +1,10 @@
 import { Item } from 'pinia-orm'
 import { LinkMetadata } from '@lukso/lsp-smart-contracts'
 
-import { Profile } from '@/models/profile'
 import { InterfaceId } from '@/types/assets'
 import { Image } from '@/models/image'
 import { BaseModel } from '@/models/base'
+import { Creator } from './creator'
 
 export class AssetModel extends BaseModel {
   static entity = 'assets'
@@ -50,7 +50,7 @@ export class AssetModel extends BaseModel {
 
   declare icon?: Image
   declare images?: Image[]
-  declare creators?: Profile[]
+  declare creators?: Creator[]
 
   static piniaOptions = {
     persist: {

models/profile.ts

@@ -1,5 +1,9 @@
 import { Item } from 'pinia-orm'
-import { LSP3ProfileMetadata, LinkMetadata } from '@lukso/lsp-smart-contracts'
+import {
+  ImageMetadata,
+  LSP3ProfileMetadata,
+  LinkMetadata,
+} from '@lukso/lsp-smart-contracts'
 
 import { Image } from '@/models/image'
 import { BaseModel } from '@/models/base'
@@ -18,6 +22,8 @@ export class ProfileModel extends BaseModel {
       tags: this.attr([]),
       description: this.string(''),
       isEoa: this.boolean(false),
+      hash: this.string(''),
+      verification: this.attr({}),
 
       // foreign keys
       profileImageId: this.attr(null),
@@ -35,6 +41,8 @@ export class ProfileModel extends BaseModel {
   declare tags?: string[]
   declare description?: string
   declare isEoa?: boolean
+  declare hash: string
+  declare verification?: ImageMetadata['verification']
 
   declare profileImageId?: string
   declare backgroundImageId?: string

utils/fetchLSP7Assets.ts

@@ -37,11 +37,11 @@ export const fetchLsp7Assets = async (
 
   const imageIds: string[] = []
   images.forEach(image => {
-    const id = getImageId(image)
+    const id = getHash(image)
     id && imageIds.push(id)
   })
 
-  const iconId = getImageId(icon)
+  const iconId = getHash(icon)
 
   const creatorIds: string[] = []
   creators?.forEach(creator => {

utils/fetchLSP8Assets.ts

@@ -53,11 +53,11 @@ export const fetchLsp8Assets = async (
 
       const imageIds: string[] = []
       images.forEach(image => {
-        const id = getImageId(image)
+        const id = getHash(image)
         id && imageIds.push(id)
       })
 
-      const iconId = getImageId(icon)
+      const iconId = getHash(icon)
 
       const creatorIds: string[] = []
       creators?.forEach(creator => {

utils/fetchLsp3Profile.ts

@@ -11,6 +11,7 @@ export const fetchLsp3Profile = async (
     profileAddress,
     LSP3ProfileMetadata as ERC725JSONSchema[]
   )
+  const getData = await fetchLsp3ProfileData(profileAddress)
   const profileData = await erc725.fetchData([
     'LSP3Profile',
     'LSP5ReceivedAssets[]',
@@ -27,8 +28,10 @@ export const fetchLsp3Profile = async (
 
   const { getBalance } = useWeb3(PROVIDERS.RPC)
   const balance = await getBalance(profileAddress)
-  const profileImageId = getImageId(profileImage)
-  const backgroundImageId = getImageId(backgroundImage)
+  const profileImageId = getHash(profileImage)
+  const backgroundImageId = getHash(backgroundImage)
+  const hash = validateHash(getData)
+  const verification = validateVerification(getData)
 
   return {
     ...lsp3Profile,
@@ -41,5 +44,18 @@ export const fetchLsp3Profile = async (
     backgroundImageId,
     receivedAssetIds: receivedAssets.value as Address[],
     issuedAssetIds: issuedAssets.value as Address[],
+    hash,
+    verification,
   }
 }
+
+export const fetchLsp3ProfileData = async (profileAddress: string) => {
+  const { getInstance } = useErc725()
+  const erc725 = getInstance(
+    profileAddress,
+    LSP3ProfileMetadata as ERC725JSONSchema[]
+  )
+  const profileData = await erc725.getData('LSP3Profile')
+
+  return profileData
+}

utils/fetchLsp4Creators.ts

@@ -12,7 +12,7 @@ import { Creator } from '@/models/creator'
 export const fetchLsp4Creators = async (
   assetAddress: Address,
   tokenId?: string
-): Promise<Profile[] | undefined> => {
+) => {
   const { contract } = useWeb3(PROVIDERS.RPC)
 
   try {

utils/fetchProfile.ts

@@ -10,9 +10,13 @@ export const fetchProfile = async (profileAddress: Address) => {
   const storeProfile = profileRepo.getProfileAndImages(profileAddress)
 
   if (storeProfile) {
-    // refetch LYX balance for cached profile in case it has changed
-    await updateLyxBalance(profileAddress)
-    return
+    const profileData = await fetchLsp3ProfileData(profileAddress)
+
+    // check if profile metadata hash has changed
+    if (getHash(profileData.value) === getHash(storeProfile)) {
+      await updateLyxBalance(profileAddress)
+      return
+    }
   }
 
   try {

utils/getImages.ts

@@ -116,7 +116,7 @@ export const getAndConvertImage = async (
       ...optimalImage,
       base64: resolveUrl(optimalImage.url),
       // base64: await fetchAndConvertImage(optimalImage.url), // TODO add base when cache storage is added
-      id: getImageId(optimalImage),
+      id: getHash(optimalImage),
     } as ImageMetadataEncoded
   }
 }

utils/validateLSP4Metadata.ts

@@ -1,3 +1,4 @@
+import { Verification } from '@erc725/erc725.js/build/main/src/types'
 import { LSP4DigitalAssetMetadataJSON } from '@lukso/lsp-smart-contracts'
 
 export const validateLsp4MetaData = (
@@ -76,19 +77,19 @@ export const validateImages = (images: any[]) => {
 }
 
 /**
- * Get image id from image object
+ * Get hash from metadata object
  * It checks for old format using `hash` property and
  * new format using `verification.data` property.
  *
- * @param image
+ * @param value
  * @returns
  */
-export const getImageId = (image: any): string | undefined => {
+export const getHash = (value: any): string | undefined => {
   return (
-    image &&
-    ('hash' in image && image.hash !== ''
-      ? image.hash
-      : image?.verification?.data)
+    value &&
+    ('hash' in value && value.hash !== ''
+      ? value.hash
+      : value?.verification?.data)
   )
 }
 
@@ -108,3 +109,39 @@ const validateAsset = (asset: any) => {
       asset.verification.method)
   )
 }
+
+/**
+ * Validate if the given metadata object follows proper structure and contain `hash` property
+ * This is legacy format still used on Testnet.
+ *
+ * @param getDataObject - metadata object to be validated
+ * @returns - hash if validation passes, undefined otherwise
+ */
+export const validateHash = (getDataObject: any) => {
+  return typeof getDataObject === 'object' &&
+    typeof getDataObject?.value === 'object' &&
+    getDataObject?.value !== null &&
+    'hash' in getDataObject?.value &&
+    typeof getDataObject.value?.hash === 'string'
+    ? (getDataObject.value?.hash as string)
+    : undefined
+}
+
+/**
+ * Validates if the given metadata object follows proper structure and contain `verification` property
+ * This is new format used on Mainnet.
+ *
+ * @param getDataObject - metadata object to be validated
+ * @returns - verification object if validation passes, undefined otherwise
+ */
+export const validateVerification = (getDataObject: any) => {
+  return typeof getDataObject === 'object' &&
+    'value' in getDataObject &&
+    typeof getDataObject?.value === 'object' &&
+    getDataObject?.value !== null &&
+    'verification' in getDataObject?.value &&
+    'data' in getDataObject?.value?.verification &&
+    'method' in getDataObject?.value?.verification
+    ? (getDataObject.value?.verification as Verification)
+    : undefined
+}