feat: improve load time

js/packages/web/src/contexts/meta.tsx

@@ -375,7 +375,7 @@ export function MetaProvider({ children = null as any }) {
           setState(data => ({
             ...data,
             metadata: [
-              ...data.metadata.filter(m => m.pubkey.equals(pubkey)),
+              ...data.metadata.filter(m => !m.pubkey.equals(pubkey)),
               result,
             ],
             metadataByMasterEdition: {

js/packages/web/src/hooks/useAuctions.ts

@@ -101,9 +101,7 @@ export function useCachedRedemptionKeysByWallet() {
 }
 
 export const useAuctions = (state?: AuctionViewState) => {
-  const [auctionViews, setAuctionViews] = useState<
-    Record<string, AuctionView | undefined>
-  >({});
+  const [auctionViews, setAuctionViews] = useState<AuctionView[]>([]);
   const { wallet } = useWallet();
 
   const pubkey = wallet?.publicKey;
@@ -124,9 +122,8 @@ export const useAuctions = (state?: AuctionViewState) => {
   } = useMeta();
 
   useEffect(() => {
-    Object.keys(auctions).forEach(a => {
+    const map = Object.keys(auctions).reduce((agg, a) => {
       const auction = auctions[a];
-      const existingAuctionView = auctionViews[a];
       const nextAuctionView = processAccountsIntoAuctionView(
         pubkey,
         auction,
@@ -142,10 +139,20 @@ export const useAuctions = (state?: AuctionViewState) => {
         metadataByMasterEdition,
         cachedRedemptionKeys,
         state,
-        existingAuctionView,
       );
-      setAuctionViews(nA => ({ ...nA, [a]: nextAuctionView }));
-    });
+      agg[a] = nextAuctionView;
+      return agg;
+    }, {} as Record<string, AuctionView | undefined>);
+
+    setAuctionViews(
+      (Object.values(map).filter(v => v) as AuctionView[]).sort((a, b) => {
+        return (
+          b?.auction.info.endedAt
+            ?.sub(a?.auction.info.endedAt || new BN(0))
+            .toNumber() || 0
+        );
+      }),
+    );
   }, [
     state,
     auctions,
@@ -161,17 +168,10 @@ export const useAuctions = (state?: AuctionViewState) => {
     metadataByMasterEdition,
     pubkey,
     cachedRedemptionKeys,
+    setAuctionViews,
   ]);
 
-  return (Object.values(auctionViews).filter(v => v) as AuctionView[]).sort(
-    (a, b) => {
-      return (
-        b?.auction.info.endedAt
-          ?.sub(a?.auction.info.endedAt || new BN(0))
-          .toNumber() || 0
-      );
-    },
-  );
+  return auctionViews;
 };
 
 export function processAccountsIntoAuctionView(

js/packages/web/src/hooks/useBidsForAuction.ts

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { PublicKey } from '@solana/web3.js';
 import {
   BidderMetadata,
@@ -21,12 +21,34 @@ export const useBidsForAuction = (auctionPubkey: PublicKey | string) => {
   const id = useMemo(
     () =>
       typeof auctionPubkey === 'string'
-        ? auctionPubkey
-        : auctionPubkey.toBase58(),
+        ? auctionPubkey !== ''
+          ? new PublicKey(auctionPubkey)
+          : undefined
+        : auctionPubkey,
     [auctionPubkey],
   );
 
-  const bids = cache
+  const [bids, setBids] = useState<ParsedAccount<BidderMetadata>[]>([]);
+
+  useEffect(() => {
+    const dispose = cache.emitter.onCache(args => {
+      if (args.parser === BidderMetadataParser) {
+        setBids(getBids(id));
+      }
+    });
+
+    setBids(getBids(id));
+
+    return () => {
+      dispose();
+    };
+  }, [id]);
+
+  return bids;
+};
+
+const getBids = (id?: PublicKey) => {
+  return cache
     .byParser(BidderMetadataParser)
     .filter(key => {
       const bidder = cache.get(key) as ParsedAccount<BidderMetadata>;
@@ -34,7 +56,7 @@ export const useBidsForAuction = (auctionPubkey: PublicKey | string) => {
         return false;
       }
 
-      return bidder.info.auctionPubkey.toBase58() === id;
+      return id?.equals(bidder.info.auctionPubkey);
     })
     .map(key => {
       const bidder = cache.get(key) as ParsedAccount<BidderMetadata>;
@@ -49,10 +71,6 @@ export const useBidsForAuction = (auctionPubkey: PublicKey | string) => {
       return lastBidDiff;
     })
     .map(item => {
-      return {
-        ...item,
-      };
+      return item;
     });
-
-  return bids;
 };