Allow users list NFT

package.json

@@ -20,6 +20,7 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-lazyload": "^3.0.0",
     "antd": "^4.6.0",
+    "aws-sdk": "^2.792.0",
     "bn.js": "^5.1.3",
     "craco-less": "^1.17.0",
     "immutable-tuple": "^0.4.10",
@@ -33,7 +34,8 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "styled-components": "^5.1.1",
-    "typescript": "^3.9.7"
+    "typescript": "^3.9.7",
+    "uuid": "^8.3.1"
   },
   "scripts": {
     "predeploy": "git pull --ff-only && yarn && yarn build",

src/App.tsx

@@ -18,7 +18,7 @@ export default function App() {
           <MarketProvider>
             <WalletProvider>
               <PreferencesProvider>
-                <Suspense fallback={() => <Spin size="large" />}>
+                <Suspense fallback={<Spin size="large" />}>
                   <Routes />
                 </Suspense>
               </PreferencesProvider>

src/components/Orderbook.jsx

@@ -7,7 +7,7 @@ import { useInterval } from '../utils/useInterval';
 import FloatingElement from './layout/FloatingElement';
 import usePrevious from '../utils/usePrevious';
 import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
-import { USE_ALL_NFTS } from '../nfts';
+import { useNFTs } from '../nfts';
 
 const Title = styled.div`
   color: rgba(255, 255, 255, 1);
@@ -56,11 +56,10 @@ export default function Orderbook({ smallScreen, depth = 7, onPrice, onSize }) {
   const [orderbookData, setOrderbookData] = useState(null);
 
   let NFT;
-  if (market) {
-    NFT = USE_ALL_NFTS.filter(
-      (nft) => nft.marketAddress.toBase58() === market.address.toBase58(),
-    )[0];
-  }
+  const [NFTs, setFilter] = useNFTs({
+    marketAddress: market.address.toBase58(),
+  });
+  if (market && NFTs.length > 0) NFT = NFTs[0];
 
   useInterval(() => {
     if (

src/components/StandaloneBalancesDisplay.tsx

@@ -17,7 +17,7 @@ import { settleFunds } from '../utils/send';
 import { useSendConnection } from '../utils/connection';
 import { notify } from '../utils/notifications';
 import { Balances } from '../utils/types';
-import USE_NFTS from '../nfts';
+import { useNFTs } from '../nfts';
 import StandaloneTokenAccountsSelect from './StandaloneTokenAccountSelect';
 
 const RowBox = styled(Row)`
@@ -55,11 +55,11 @@ export default function StandaloneBalancesDisplay() {
   const quoteCurrencyBalances =
     balances && balances.find((b) => b.coin === quoteCurrency);
 
+  const [NFTs, setFilter] = useNFTs({marketAddress: market?.address.toBase58()});
+
   let NFT: any;
-  if (market) {
-    NFT = USE_NFTS.filter(
-      (nft) => nft.marketAddress.toBase58() === market.address.toBase58(),
-    )[0];
+  if (market && NFTs.length > 0) {
+    NFT = NFTs[0];
   }
 
   async function onSettleFunds() {

src/components/TopBar.tsx

@@ -141,6 +141,9 @@ export default function TopBar() {
             Redeemable
             <Emoji symbol="🔥" label="burn" class="emoji-redeem-top-bar" />
           </Menu.Item>
+          <Menu.Item key="/list-nft">
+            List Your NFT
+          </Menu.Item>
         </Menu>
 
         {windowDimensions.width > 1000 && (

src/components/TradeForm.tsx

@@ -20,7 +20,7 @@ import {
 import { useSendConnection } from '../utils/connection';
 import FloatingElement from './layout/FloatingElement';
 import { placeOrder } from '../utils/send';
-import { USE_ALL_NFTS } from '../nfts';
+import { useNFTs } from '../nfts';
 
 const SellButton = styled(Button)`
   margin: 20px 0px 0px 0px;
@@ -74,12 +74,9 @@ export default function TradeForm({
   const [submitting, setSubmitting] = useState(false);
   const [sizeFraction, setSizeFraction] = useState(0);
 
+  const [NFTs, setFilter] = useNFTs({marketAddress: market?.address.toBase58()})
   let NFT: any;
-  if (market) {
-    NFT = USE_ALL_NFTS.filter(
-      (nft) => nft.marketAddress.toBase58() === market.address.toBase58(),
-    )[0];
-  }
+  if (NFTs.length > 0) NFT = NFTs[0];
 
   const availableQuote =
     openOrdersAccount && market

src/components/UserInfoTable/BalancesTable.jsx

@@ -10,7 +10,7 @@ import { useSendConnection } from '../../utils/connection';
 import { useWallet } from '../../utils/wallet';
 import { settleFunds } from '../../utils/send';
 import { notify } from '../../utils/notifications';
-import { USE_ALL_NFTS } from '../../nfts';
+import { useNFTs } from '../../nfts';
 
 export default function BalancesTable({
   balances,
@@ -22,12 +22,13 @@ export default function BalancesTable({
   const connection = useSendConnection();
   const { wallet } = useWallet();
   const { market } = useMarket();
+  const [NFTs, setFilter] = useNFTs({
+    marketAddress: market.address.toBase58(),
+  });
 
   let NFT;
-  if (market) {
-    NFT = USE_ALL_NFTS.filter(
-      (nft) => nft.marketAddress.toBase58() === market.address.toBase58(),
-    )[0];
+  if (market && NFTs.length > 0) {
+    NFT = NFTs[0];
   }
 
   balances.forEach((item, i) => {