Some fixes for hooks

packages/metavinci/src/components/AuctionCard/index.tsx

@@ -5,7 +5,12 @@ import { Auction, Presale } from '../../types';
 
 import './index.less';
 import { getCountdown } from '../../utils/utils';
-import { shortenAddress, useConnection } from '@oyster/common';
+import {
+  shortenAddress,
+  TokenAccount,
+  useConnection,
+  useUserAccounts,
+} from '@oyster/common';
 import { AuctionView } from '../../hooks';
 
 export const AuctionCard = ({ auctionView }: { auctionView: AuctionView }) => {
@@ -14,7 +19,15 @@ export const AuctionCard = ({ auctionView }: { auctionView: AuctionView }) => {
   const [seconds, setSeconds] = useState<number>(59);
   const [clock, setClock] = useState<number>(0);
   const connection = useConnection();
+  const { userAccounts } = useUserAccounts();
+  const accountByMint = userAccounts.reduce((prev, acc) => {
+    prev.set(acc.info.mint.toBase58(), acc);
+    return prev;
+  }, new Map<string, TokenAccount>());
 
+  const myPayingAccount = accountByMint.get(
+    auctionView.auction.info.tokenMint.toBase58(),
+  );
   useEffect(() => {
     connection.getSlot().then(setClock);
   }, [connection]);
@@ -85,7 +98,7 @@ export const AuctionCard = ({ auctionView }: { auctionView: AuctionView }) => {
         className="info-content"
         style={{ color: 'rgba(255, 255, 255, 0.7)', fontSize: '0.9rem' }}
       >
-        Your Balance: ◎ {0.0} (${0.0})
+        Your Balance: ${myPayingAccount ? myPayingAccount.info.amount : 0.0}
       </div>
 
       <Button

packages/metavinci/src/hooks/useArt.ts

@@ -5,7 +5,6 @@ import { Art } from '../types';
 
 export const useArt = (id: PublicKey | string) => {
   const { metadata } = useMeta();
-  console.log(metadata);
 
   const key = typeof id === 'string' ? id : id?.toBase58() || '';
   const account = useMemo(

packages/metavinci/src/hooks/useAuction.ts

@@ -1,16 +1,7 @@
-import {
+import { useConnection } from '@oyster/common';
-  ParsedAccount,
-  Metadata,
-  SafetyDepositBox,
-  AuctionData,
-  useConnection,
-  AuctionState,
-} from '@oyster/common';
 import { useEffect, useState } from 'react';
 import { AuctionView, processAccountsIntoAuctionView } from '.';
 import { useMeta } from '../contexts';
-import { AuctionManager } from '../models/metaplex';
-import { sampleAuction } from '../views/home/sampleData';
 
 export const useAuction = (id: string) => {
   const connection = useConnection();
@@ -40,6 +31,12 @@ export const useAuction = (id: string) => {
       );
       if (auctionView) setAuctionView(auctionView);
     }
-  }, [clock]);
+  }, [
+    clock,
+    auctions,
+    auctionManagers,
+    safetyDepositBoxesByVaultAndIndex,
+    metadataByMint,
+  ]);
   return auctionView;
 };

packages/metavinci/src/hooks/useAuctions.ts

@@ -62,7 +62,14 @@ export const useAuctions = (state: AuctionViewState) => {
       if (auctionView) newAuctionViews.push(auctionView);
     });
     setAuctionViews(newAuctionViews);
-  }, [clock, state, auctions]);
+  }, [
+    clock,
+    state,
+    auctions,
+    auctionManagers,
+    safetyDepositBoxesByVaultAndIndex,
+    metadataByMint,
+  ]);
 
   return auctionViews;
 };

packages/metavinci/src/views/home/index.tsx

@@ -32,7 +32,7 @@ export const HomeView = () => {
       {auctions.map(m => {
         const id = m.auction.pubkey.toBase58();
         return (
-          <Link to={`/art/${id}`}>
+          <Link to={`/auction/${id}`}>
             <ArtCard
               key={id}
               image={m.thumbnail.metadata.info.extended?.image}