Add NFT support

Author: paulmillr

src/App.vue

@@ -87,9 +87,8 @@ const handleConnect = async (url: string) => {
   <RpcField v-if="!connected" :connectionError="connectionError" @connect="handleConnect" />
 
   <div v-if="!connected">
-    The app needs an archive node as a backend because of specific API calls.
-    <code>https://api.securerpc.com/v1</code> and other non-archive nodes from the list below can
-    still be used, but the functionality would become limited:<br />
+    The app needs an archive node as a backend because of specific API calls.<br />
+    Non-archive nodes from the list below can still be used, but the functionality would become limited:<br />
     <ul style="margin-top: 5px">
       <li>
         <a target="_blank" href="https://chainlist.org/chain/1">chainlist.org</a>

src/cache/address/address-storage.ts

@@ -4,6 +4,7 @@ import type {
   TokenBalance,
   TransactionListItem,
   UnspentWithUsd,
+  NftLog,
 } from '@/types';
 
 export interface AddressStorage {
@@ -73,4 +74,10 @@ export interface AddressStorage {
   addFavoriteAddress(address: string): void;
   isFavoriteAddress(address: string): boolean;
   removeFavoriteAddress(address: string): void;
+
+  addAllNftLogs(logs: Map<string, NftLog[]>): void;
+  getAllNftLogs(): Map<string, NftLog[]>;
+  getNftLogs(address: string): NftLog[];
+  addNftLogs(address: string, logs: NftLog[]): void;
+  hasNftLogs(address: string): boolean;
 }

src/cache/address/address.ts

@@ -4,6 +4,7 @@ import type {
   TokenBalance,
   TransactionListItem,
   UnspentWithUsd,
+  NftLog
 } from '@/types';
 import { MemoryAddressStorage } from '@/cache/address/memory-address-storage';
 import { LocalStorageAddressStorage } from '@/cache/address/localstorage-address-storage';
@@ -58,6 +59,7 @@ export class AddressCache {
     to.addAllTokenCreator(from.getAllTokenCreator());
     to.addAllEns(from.getAllEns());
     to.addAllFavoriteAddresses(from.getFavoriteAddresses());
+    to.addAllNftLogs(from.getAllNftLogs());
 
     from.clearAll();
   }
@@ -257,4 +259,20 @@ export class AddressCache {
   removeFavoriteAddress(address: string): void {
     AddressCache.strategy.removeFavoriteAddress(address);
   }
+
+  /**
+   * NFT Cache
+   */
+
+  getNftLogs(address: string): NftLog[] {
+    return AddressCache.strategy.getNftLogs(address);
+  }
+
+  addNftLogs(address: string, logs: NftLog[]): void {
+    AddressCache.strategy.addNftLogs(address, logs);
+  }
+
+  hasNftLogs(address: string): boolean {
+    return AddressCache.strategy.hasNftLogs(address);
+  }
 }

src/cache/address/localstorage-address-storage.ts

@@ -4,6 +4,7 @@ import type {
   TokenBalance,
   TransactionListItem,
   UnspentWithUsd,
+  NftLog
 } from '@/types';
 import { type AddressStorage } from '@/cache/address/address-storage';
 import { stringify, parse } from '@/utils/json';
@@ -75,6 +76,7 @@ export class LocalStorageAddressStorage implements AddressStorage {
     this.removeFromLocalStorage('tokenInfo');
     this.removeFromLocalStorage('tokenCreator');
     this.removeFromLocalStorage('ens');
+    this.removeFromLocalStorage('nftLogs');
   }
 
   // tokenTransfersTransactions is not cleared here (because we are not loading them from scratch later for optimization)
@@ -87,6 +89,7 @@ export class LocalStorageAddressStorage implements AddressStorage {
       tokenInfo,
       tokenCreator,
       ens,
+      nftLogs
     } = this.getAllCachedData();
 
     addresses.forEach((address) => {
@@ -97,6 +100,7 @@ export class LocalStorageAddressStorage implements AddressStorage {
       delete tokenInfo[address];
       delete tokenCreator[address];
       delete ens[address];
+      delete nftLogs[address];
     });
 
     this.saveToLocalStorage('tokens', tokens);
@@ -106,6 +110,7 @@ export class LocalStorageAddressStorage implements AddressStorage {
     this.saveToLocalStorage('tokenInfo', tokenInfo);
     this.saveToLocalStorage('tokenCreator', tokenCreator);
     this.saveToLocalStorage('ens', ens);
+    this.saveToLocalStorage('nftLogs', nftLogs);
   }
 
   clearFavorites(): void {
@@ -118,6 +123,7 @@ export class LocalStorageAddressStorage implements AddressStorage {
       tokenInfo,
       tokenCreator,
       ens,
+      nftLogs
     } = this.getAllCachedData();
 
     const favorites = this.getFavoriteAddresses();
@@ -131,6 +137,7 @@ export class LocalStorageAddressStorage implements AddressStorage {
       delete tokenInfo[address];
       delete tokenCreator[address];
       delete ens[address];
+      delete nftLogs[address];
     });
 
     this.saveToLocalStorage('tokens', tokens);
@@ -141,6 +148,7 @@ export class LocalStorageAddressStorage implements AddressStorage {
     this.saveToLocalStorage('tokenInfo', tokenInfo);
     this.saveToLocalStorage('tokenCreator', tokenCreator);
     this.saveToLocalStorage('ens', ens);
+    this.saveToLocalStorage('nftLogs', nftLogs);
 
     this.removeFromLocalStorage('favoriteAddresses');
   }
@@ -155,6 +163,7 @@ export class LocalStorageAddressStorage implements AddressStorage {
       tokenInfo,
       tokenCreator,
       ens,
+      nftLogs
     } = this.getAllCachedData();
 
     return Array.from(
@@ -167,6 +176,7 @@ export class LocalStorageAddressStorage implements AddressStorage {
         ...Object.keys(tokenInfo),
         ...Object.keys(tokenCreator),
         ...Object.keys(ens),
+        ...Object.keys(nftLogs)
       ])
     );
   }
@@ -180,6 +190,7 @@ export class LocalStorageAddressStorage implements AddressStorage {
     const tokenInfo = this.getFromLocalStorage('tokenInfo') ?? {};
     const tokenCreator = this.getFromLocalStorage('tokenCreator') ?? {};
     const ens = this.getFromLocalStorage('ens') ?? {};
+    const nftLogs = this.getFromLocalStorage('nftLogs') ?? {};
 
     return {
       tokens,
@@ -190,6 +201,7 @@ export class LocalStorageAddressStorage implements AddressStorage {
       tokenInfo,
       tokenCreator,
       ens,
+      nftLogs
     };
   };
 
@@ -512,4 +524,32 @@ export class LocalStorageAddressStorage implements AddressStorage {
     const updated = cached.filter((item: string) => item !== addr);
     this.saveToLocalStorage('favoriteAddresses', updated);
   }
+
+  /**
+   * NFT Cache
+   */
+
+  addAllNftLogs(logs: Map<string, NftLog[]>): void {
+    this.addAllUnitToCache('nftLogs', logs);
+  }
+
+  getAllNftLogs(): Map<string, NftLog[]> {
+    return this.getAllCachedUnitAsMap('nftLogs');
+  }
+
+  getNftLogs(address: string): NftLog[] {
+    const cached = this.getFromLocalStorage('nftLogs') ?? {};
+    return cached[address] || [];
+  }
+
+  addNftLogs(address: string, logs: NftLog[]): void {
+    const cached = this.getFromLocalStorage('nftLogs') ?? {};
+    cached[address] = logs;
+    this.saveToLocalStorage('nftLogs', cached);
+  }
+
+  hasNftLogs(address: string): boolean {
+    const cached = this.getFromLocalStorage('nftLogs') ?? {};
+    return address in cached;
+  }
 }

src/cache/address/memory-address-storage.ts

@@ -4,6 +4,7 @@ import type {
   TokenBalance,
   TransactionListItem,
   UnspentWithUsd,
+  NftLog
 } from '@/types';
 import { type AddressStorage } from '@/cache/address/address-storage';
 
@@ -22,6 +23,8 @@ export class MemoryAddressStorage implements AddressStorage {
 
   private favoriteAddresses = new Set<string>();
 
+  private nftLogs: Map<string, NftLog[]> = new Map();
+
   private constructor() {}
 
   static getInstance(): MemoryAddressStorage {
@@ -49,6 +52,7 @@ export class MemoryAddressStorage implements AddressStorage {
     this.tokenInfo.clear();
     this.tokenCreator.clear();
     this.ens.clear();
+    this.nftLogs.clear();
   }
 
   // tokenTransfersTransactions is not cleared here (because we are not loading them from scratch later for optimization)
@@ -60,6 +64,7 @@ export class MemoryAddressStorage implements AddressStorage {
     this.tokenInfo.delete(address);
     this.tokenCreator.delete(address);
     this.ens.delete(address);
+    this.nftLogs.delete(address);
   }
 
   clearFavorites(): void {
@@ -72,6 +77,7 @@ export class MemoryAddressStorage implements AddressStorage {
       this.tokenInfo.delete(address);
       this.tokenCreator.delete(address);
       this.ens.delete(address);
+      this.nftLogs.delete(address);
     });
     this.favoriteAddresses.clear();
   }
@@ -93,6 +99,7 @@ export class MemoryAddressStorage implements AddressStorage {
         ...this.tokenInfo.keys(),
         ...this.tokenCreator.keys(),
         ...this.ens.keys(),
+        ...this.nftLogs.keys()
       ])
     );
   }
@@ -351,4 +358,28 @@ export class MemoryAddressStorage implements AddressStorage {
     const addr = address.toLowerCase();
     this.favoriteAddresses.delete(addr);
   }
+
+  /**
+   * NFT Cache
+   */
+
+  addAllNftLogs(nftLogs: Map<string, NftLog[]>): void {
+    this.nftLogs = nftLogs;
+  }
+
+  getAllNftLogs(): Map<string, NftLog[]> {
+    return this.nftLogs;
+  }
+
+  getNftLogs(address: string): NftLog[] {
+    return this.nftLogs.get(address) || [];
+  }
+
+  addNftLogs(address: string, logs: NftLog[]): void {
+    this.nftLogs.set(address, logs);
+  }
+ 
+  hasNftLogs(address: string): boolean {
+    return this.nftLogs.has(address);
+  }
 }

src/components/Breadcrumbs.vue

@@ -73,14 +73,14 @@ const addressBreadcrumb = (address: string) => {
 <template>
   <div v-if="$route.name !== 'main'" class="breadcrumbs">
     <span
-      v-if="$route.name !== 'settings' && $route.name !== 'address' && $route.name !== 'sourcify'"
+      v-if="$route.name !== 'settings' && $route.name !== 'address' && $route.name !== 'sourcify' && $route.name !== 'nft'"
     >
       / {{ $route.name }} {{ pageHasParams ? '/' : '' }}
       {{ $route.params.tx?.length ? shortenTx($route.params.tx as string) : '' }}
       {{ $route.params.block?.length ? $route.params.block : '' }}
     </span>
 
-    <span v-if="$route.name === 'address' || $route.name === 'sourcify'">
+    <span v-if="$route.name === 'address' || $route.name === 'sourcify' || $route.name === 'nft'">
       {{ $route.params.address?.length ? addressBreadcrumb($route.params.address as string) : '' }}
     </span>
 

src/components/address-view/AddressHeader.vue

@@ -3,6 +3,7 @@ import { shortenTx } from '@/utils/utils';
 import type { TokenBalance, OtsGetContractCreatorResponse, ERC20TokenInfo } from '@/types';
 import TokensList from '@/components/address-view/TokensList.vue';
 import AddressHeaderAddrInfo from '@/components/address-view/AddressHeaderAddrInfo.vue';
+import NFTsList from '@/components/address-view/NFTsList.vue';
 
 const emit = defineEmits(['updateData']);
 
@@ -23,6 +24,7 @@ const props = defineProps<{
   unspentPriceError: boolean;
   unspentError: boolean;
   isSourcify: boolean;
+  isNFT: boolean;
 }>();
 
 const handleUpdateData = (addresses: string[]) => {
@@ -41,6 +43,7 @@ const handleUpdateData = (addresses: string[]) => {
       :loadingUnspent="loadingUnspent"
       :unspentError="unspentError"
       :isSourcify="isSourcify"
+      :isNFT="isNFT"
       @updateData="handleUpdateData"
     />
   </div>
@@ -63,8 +66,10 @@ const handleUpdateData = (addresses: string[]) => {
       </RouterLink>
     </div>
 
+    <NFTsList v-if="isNFT" :address="address" />
+
     <TokensList
-      v-if="!isSourcify"
+      v-if="!isSourcify && !isNFT"
       :unspentEth="sumBalance"
       :unspentEthUsd="unspentEthUsd"
       :tokens="tokens"