mirror of https://github.com/certusone/oyster.git
Some fixes for hooks
This commit is contained in:
parent
a46537221a
commit
e1984d5945
|
@ -5,7 +5,12 @@ import { Auction, Presale } from '../../types';
|
||||||
|
|
||||||
import './index.less';
|
import './index.less';
|
||||||
import { getCountdown } from '../../utils/utils';
|
import { getCountdown } from '../../utils/utils';
|
||||||
import { shortenAddress, useConnection } from '@oyster/common';
|
import {
|
||||||
|
shortenAddress,
|
||||||
|
TokenAccount,
|
||||||
|
useConnection,
|
||||||
|
useUserAccounts,
|
||||||
|
} from '@oyster/common';
|
||||||
import { AuctionView } from '../../hooks';
|
import { AuctionView } from '../../hooks';
|
||||||
|
|
||||||
export const AuctionCard = ({ auctionView }: { auctionView: AuctionView }) => {
|
export const AuctionCard = ({ auctionView }: { auctionView: AuctionView }) => {
|
||||||
|
@ -14,7 +19,15 @@ export const AuctionCard = ({ auctionView }: { auctionView: AuctionView }) => {
|
||||||
const [seconds, setSeconds] = useState<number>(59);
|
const [seconds, setSeconds] = useState<number>(59);
|
||||||
const [clock, setClock] = useState<number>(0);
|
const [clock, setClock] = useState<number>(0);
|
||||||
const connection = useConnection();
|
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(() => {
|
useEffect(() => {
|
||||||
connection.getSlot().then(setClock);
|
connection.getSlot().then(setClock);
|
||||||
}, [connection]);
|
}, [connection]);
|
||||||
|
@ -85,7 +98,7 @@ export const AuctionCard = ({ auctionView }: { auctionView: AuctionView }) => {
|
||||||
className="info-content"
|
className="info-content"
|
||||||
style={{ color: 'rgba(255, 255, 255, 0.7)', fontSize: '0.9rem' }}
|
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>
|
</div>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -5,7 +5,6 @@ import { Art } from '../types';
|
||||||
|
|
||||||
export const useArt = (id: PublicKey | string) => {
|
export const useArt = (id: PublicKey | string) => {
|
||||||
const { metadata } = useMeta();
|
const { metadata } = useMeta();
|
||||||
console.log(metadata);
|
|
||||||
|
|
||||||
const key = typeof id === 'string' ? id : id?.toBase58() || '';
|
const key = typeof id === 'string' ? id : id?.toBase58() || '';
|
||||||
const account = useMemo(
|
const account = useMemo(
|
||||||
|
|
|
@ -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 { useEffect, useState } from 'react';
|
||||||
import { AuctionView, processAccountsIntoAuctionView } from '.';
|
import { AuctionView, processAccountsIntoAuctionView } from '.';
|
||||||
import { useMeta } from '../contexts';
|
import { useMeta } from '../contexts';
|
||||||
import { AuctionManager } from '../models/metaplex';
|
|
||||||
import { sampleAuction } from '../views/home/sampleData';
|
|
||||||
|
|
||||||
export const useAuction = (id: string) => {
|
export const useAuction = (id: string) => {
|
||||||
const connection = useConnection();
|
const connection = useConnection();
|
||||||
|
@ -40,6 +31,12 @@ export const useAuction = (id: string) => {
|
||||||
);
|
);
|
||||||
if (auctionView) setAuctionView(auctionView);
|
if (auctionView) setAuctionView(auctionView);
|
||||||
}
|
}
|
||||||
}, [clock]);
|
}, [
|
||||||
|
clock,
|
||||||
|
auctions,
|
||||||
|
auctionManagers,
|
||||||
|
safetyDepositBoxesByVaultAndIndex,
|
||||||
|
metadataByMint,
|
||||||
|
]);
|
||||||
return auctionView;
|
return auctionView;
|
||||||
};
|
};
|
||||||
|
|
|
@ -62,7 +62,14 @@ export const useAuctions = (state: AuctionViewState) => {
|
||||||
if (auctionView) newAuctionViews.push(auctionView);
|
if (auctionView) newAuctionViews.push(auctionView);
|
||||||
});
|
});
|
||||||
setAuctionViews(newAuctionViews);
|
setAuctionViews(newAuctionViews);
|
||||||
}, [clock, state, auctions]);
|
}, [
|
||||||
|
clock,
|
||||||
|
state,
|
||||||
|
auctions,
|
||||||
|
auctionManagers,
|
||||||
|
safetyDepositBoxesByVaultAndIndex,
|
||||||
|
metadataByMint,
|
||||||
|
]);
|
||||||
|
|
||||||
return auctionViews;
|
return auctionViews;
|
||||||
};
|
};
|
||||||
|
|
|
@ -32,7 +32,7 @@ export const HomeView = () => {
|
||||||
{auctions.map(m => {
|
{auctions.map(m => {
|
||||||
const id = m.auction.pubkey.toBase58();
|
const id = m.auction.pubkey.toBase58();
|
||||||
return (
|
return (
|
||||||
<Link to={`/art/${id}`}>
|
<Link to={`/auction/${id}`}>
|
||||||
<ArtCard
|
<ArtCard
|
||||||
key={id}
|
key={id}
|
||||||
image={m.thumbnail.metadata.info.extended?.image}
|
image={m.thumbnail.metadata.info.extended?.image}
|
||||||
|
|
Loading…
Reference in New Issue