feat: plugin gets listings

README.md

@@ -71,6 +71,12 @@ DF plugins are esbuild bundled then served as a single JS file, which is limitin
 - Rolluped NPM snarkjs into a `helpers/snarkjs.js` (DF game currently has older version in /Public)
 - `fullprove` fetches an external `raw.githubusercontent` URL (plugin builders can't write files to server)
 
+## Benchmarking
+- `List` circuit constraints: 23850
+- `List` smart contract call: 533k gas
+- `Sale` circuit constraints: 3421
+- `Sale` smart contract call: ~TBA gas 
+
 ## Warning
 The circuits and smart contracts written for this marketplace has not been audited, use at your own risk.
 

client/plugin/components/MyListings.tsx

@@ -0,0 +1,21 @@
+import { h } from "preact";
+import { useState } from "preact/hooks";
+const styles = {
+	artifacts: {
+		display: "grid",
+		gridRowGap: "4px",
+	},
+	empty: {
+		color: "#838383",
+	},
+};
+
+export function MyListings({ listings = [] }) {
+	return (
+		<div>
+			This is the MyListings View
+			<div>{listings}</div>
+		</div>
+
+	)
+}

client/plugin/components/MyTransactionContext.tsx

@@ -7,12 +7,16 @@ import { useState } from "preact/hooks";
 export const MyTransactionContext = createContext([] as any);
 
 export const MyTransactionProvider = (props) => {
-	const [transactions, setTransactions] = useState([]);
+	const [transactions, setTransactions] = useState([] as transaction);
 
 	return (
 		<MyTransactionContext.Provider
 			value={{ transactions, setTransactions }}
 			children={props.children}
 		/>
 	);
-};
+};
+
+export interface transaction {
+
+};

client/plugin/hooks/use-market.ts

@@ -1,14 +1,20 @@
 import { useState, useEffect } from "preact/hooks";
 import { useContract } from "./use-contract";
 import { useTransactions } from "./use-mytransactions";
+import { POLL_INTERVAL } from "../helpers/constants";
 
 // Notice functions are a property inside of useMarket() component
 // TODO: it should add to mytransactions history
 export function useMarket() {
 	// @ts-expect-error
 	const { market } = useContract();
+	// Tracks context on my pending transactions, not implemented.
 	const { myTransactions, setTransactions } = useTransactions();
 
+	// Contract states (stores all listings, views are filtered for user)
+	const [listings, setListings] = useState([]);
+
+
 	const list = (proof, price, escrowTime, password) => {
 		console.log("useMarket hook: listing coordinate with args: ");
 		console.log(proof);
@@ -18,13 +24,14 @@ export function useMarket() {
 		console.log(escrowTime);
 		return market.list(
 			...proof, price, escrowTime, {
-			gasLimit: 1000000,
+			gasLimit: 700000, // expected: 533k gas
 		}
 		).then(
 			(res) => {
 				console.log("contract.list response");
 				console.log(res); //res.? is the response i think.. 0x00 hex. listingid index.
-				console.log("Updated: myTransactins context");
+				console.log("Updated: myTransactions context");
+				// TODO: add to pending trx
 				// myTransactions.addTransaction(password);
 				// console.log(myTransactions);
 			}
@@ -38,7 +45,49 @@ export function useMarket() {
 		console.log("delisting planet....");
 	};
 
+	// Gets total listings
+	// Fills listings[] with listings
+	const fetchMarket = () =>
+		market
+			.numListings()
+			.then((i) => {
+				console.log("numListings resposne:");
+				console.log(i);
+				return Promise.all(
+					Array(i.toNumber()).fill(0).map(async (i) =>
+						market
+							.listings(i)
+							.then(([seller, keyCommitment, price, escrowTime, numOrders, isActive, orders]) => {
+								console.log("received 1 listing");
+								return {
+									seller,
+									keyCommitment,
+									price,
+									escrowTime,
+									numOrders,
+									isActive
+								}
+							})
+							.catch((e) => console.log(e))
+					)
+				)
+			})
+			.then((res) => {
+				console.log("final listings array");
+				console.log(res);
+				setListings(res);
+			})
+			.then()
+			.catch((e) => console.log(e));
+
+	useEffect(() => {
+		fetchMarket();
+		const poll = setInterval(fetchMarket, POLL_INTERVAL * 6); // fetch every 30s
+		return () => clearInterval(poll);
+	}, []);
+
 	return {
+		listings,
 		list,
 	}
 }

client/plugin/hooks/use-mytransactions.ts

@@ -8,7 +8,6 @@ export const useTransactions = () => {
 		myTransactions,
 		setTransactions,
 		addTransaction: (a) => setTransactions([...myTransactions, a]),
-		// Not sure I need this
-		isTrxPending: (a) => myTransactions.map((b) => b.id).includes(a.id),
+		isTransactionPending: (a) => myTransactions.map((b) => b.id).includes(a.id),
 	};
-};
+};

client/plugin/views/MyListingsView.tsx

@@ -1,9 +1,26 @@
 import { h } from "preact";
+import { MyListings } from "../components/MyListings";
+import { useMarket } from "../hooks/use-market";
+
+const styles = {
+	display: "grid",
+	width: "100%",
+	padding: "8px",
+	gridRowGap: "16px",
+};
 
 export function MyListingsView() {
+	const { listings } = useMarket();
+	// TOdo filter for must my listings
+
 	return (
-		<div>
+		<div style={styles}>
 			My listings...
+			<MyListings
+				// title="My listings for sale"
+				// empty="You don't have any listings listed for sale"
+				listings={listings}
+			/>
 		</div>
 	)
 }