diff --git a/packages/metavinci/src/components/AuctionCard/index.tsx b/packages/metavinci/src/components/AuctionCard/index.tsx index 50d881e..3c36a93 100644 --- a/packages/metavinci/src/components/AuctionCard/index.tsx +++ b/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(59); const [clock, setClock] = useState(0); const connection = useConnection(); + const { userAccounts } = useUserAccounts(); + const accountByMint = userAccounts.reduce((prev, acc) => { + prev.set(acc.info.mint.toBase58(), acc); + return prev; + }, new Map()); + 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}