Adapt TokenTrader for single NFT

macterra · Oct 25, 2023 · e97073c · e97073c
1 parent 9282ce8
commit e97073c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/frontend/src/NftView.js b/frontend/src/NftView.js
@@ -61,7 +61,7 @@ const NftView = ({ navigate }) => {
                     <Tab key="history" value="history" label={'History'} />
                 </Tabs>
                 {tab === 'edition' && <EditionView nft={nft} />}
-                {tab === 'trade' && <TokenTrader metadata={nft.token} setRefreshKey={setRefreshKey} />}
+                {tab === 'trade' && <TokenTrader metadata={nft.token} xid={nft.xid} setRefreshKey={setRefreshKey} />}
                 {tab === 'pfp' && <PfpEditor metadata={nft.token} setTab={setTab} />}
                 {tab === 'history' && <TokenHistory metadata={nft.token} xid={nft.xid} />}
             </div>

diff --git a/frontend/src/TokenTrader.js b/frontend/src/TokenTrader.js
@@ -15,7 +15,7 @@ import {
 import axios from 'axios';
 import InvoiceView from './InvoiceView';
 
-const TokenTrader = ({ metadata, setRefreshKey }) => {
+const TokenTrader = ({ metadata, xid, setRefreshKey }) => {
     const [nfts, setNfts] = useState(0);
     const [exchangeRate, setExchangeRate] = useState(null);
     const [modalOpen, setModalOpen] = useState(false);
@@ -32,11 +32,19 @@ const TokenTrader = ({ metadata, setRefreshKey }) => {
 
                 const nfts = [];
 
-                for (const xid of metadata.token.nfts) {
+                if (xid) {
+                    // single NFT specified from NftView
                     const response = await fetch(`/api/v1/asset/${xid}`);
                     const nft = await response.json();
                     nfts.push(nft);
                 }
+                else {
+                    for (const xid of metadata.token.nfts) {
+                        const response = await fetch(`/api/v1/asset/${xid}`);
+                        const nft = await response.json();
+                        nfts.push(nft);
+                    }
+                }
 
                 setNfts(nfts);
             } catch (error) {
@@ -94,7 +102,7 @@ const TokenTrader = ({ metadata, setRefreshKey }) => {
 
         return (
             <TableRow>
-                <TableCell>{nft.asset.title}</TableCell>
+                <TableCell><a href={`/nft/${nft.xid}`}>{nft.asset.title}</a></TableCell>
                 <TableCell align="right">{usdPrice}</TableCell>
                 {nft.userIsOwner ?
                     (
@@ -217,12 +225,18 @@ const TokenTrader = ({ metadata, setRefreshKey }) => {
                     <TableBody>
                         <TableRow>
                             <TableCell>Title:</TableCell>
-                            <TableCell>{metadata.asset.title}</TableCell>
-                        </TableRow>
-                        <TableRow>
-                            <TableCell>Editions:</TableCell>
-                            <TableCell>{metadata.token.editions > 1 ? metadata.token.editions : "1 of 1"}</TableCell>
+                            {xid ? (
+                                <TableCell>{metadata.asset.title} ({nfts[0].asset.title})</TableCell>
+                            ) : (
+                                <TableCell>{metadata.asset.title}</TableCell>
+                            )}
                         </TableRow>
+                        {!xid &&
+                            <TableRow>
+                                <TableCell>Editions:</TableCell>
+                                <TableCell>{metadata.token.editions > 1 ? metadata.token.editions : "1 of 1"}</TableCell>
+                            </TableRow>
+                        }
                         <TableRow>
                             <TableCell>Exchange rate:</TableCell>
                             <TableCell>{exchangeRate} USD/BTC</TableCell>