diff --git a/packages/website/lib/api.js b/packages/website/lib/api.js index 1ebe99e397..110dea1d45 100644 --- a/packages/website/lib/api.js +++ b/packages/website/lib/api.js @@ -117,7 +117,7 @@ export async function getNfts({ limit, before }) { * @param {{cid: string }} query */ export async function getNft({ cid }) { - const res = await fetch(`${API}/cid/${cid}}`, { + const res = await fetch(`${API}/cid/${cid}`, { method: 'GET', headers: { 'Content-Type': 'application/json', diff --git a/packages/website/pages/files.js b/packages/website/pages/files.js index 0e9496a47f..660b3c49e3 100644 --- a/packages/website/pages/files.js +++ b/packages/website/pages/files.js @@ -1,7 +1,7 @@ -import { API, getNfts, getToken } from '../lib/api.js' +import { API, getNft, getNfts, getToken } from '../lib/api.js' import { useQuery, useQueryClient } from 'react-query' import { CID } from 'multiformats/cid' -import { VscQuestion } from 'react-icons/vsc' +import { VscLoading, VscQuestion } from 'react-icons/vsc' import Button from '../components/button.js' import Tooltip from '../components/tooltip.js' import Loading from '../components/loading' @@ -110,7 +110,19 @@ export default function Files({ user }) { */ const TableItem = ({ nft }) => { const [showAllDeals, setShowAllDeals] = useState(false) - const deals = nft.deals + const [loadW3upDeals, setLoadW3upDeals] = useState(false) + const { status: w3upDealsStatus, data: w3upDeals } = useQuery( + ['w3updeals', nft.cid], + async () => { + const fetchedNft = await getNft(nft) + return fetchedNft.deals + }, + { + enabled: loadW3upDeals, + refetchOnWindowFocus: false, + } + ) + const deals = [...nft.deals, ...(w3upDeals || [])] .filter((/** @type {any} */ d) => d.status !== 'queued') .map( ( @@ -165,33 +177,65 @@ export default function Files({ user }) { const dealsHidden = deals.splice(3) - const [w3upDeals, setW3upDeals] = useState([]) - async function loadW3upDeals() {} - - if (!nft.deals.length) { - deals.push( - - Queuing - - The content from this upload is being aggregated for redundant - storage on Filecoin. Filecoin deals will be active within 48 - hours of upload. While Queuing, data is still available on the - IPFS network. - - } - overlayClassName="ns-tooltip" - id="all-deals-queued-tooltip" + if (!deals.length) { + if (w3upDealsStatus === 'success' || w3upDealsStatus === 'error') { + deals.push( + - - - - ) + Queuing + + The content from this upload is being aggregated for redundant + storage on Filecoin. Filecoin deals will be active within 48 + hours of upload. While Queuing, data is still available on the + IPFS network. + + } + overlayClassName="ns-tooltip" + id="all-deals-queued-tooltip" + > + + + + ) + } else { + deals.push( + + {w3upDealsStatus === 'loading' ? ( +
+ +
+ ) : ( + Check for Filecoin deals for this upload.
} + overlayClassName="ns-tooltip" + id="load-w3up-deals-tooltip" + > + + + )} + + ) + } } return (