fix: Build Listing Discovery Engine (PWA or React UI)

[Xanoutas]

Fix for #2: Build Listing Discovery Engine (PWA or React UI)

// src/components/Listing.js
import React from 'react';

const Listing = ({ listing }) => {
  return (
    <div className="listing">
      <h3>{listing.title}</h3>
      <p>{listing.description}</p> {/* Added missing closing tag */}
      <p>Trust Tier: {listing.trustTier}</p>
      <p>Timestamp: {new Date(listing.timestamp * 1000).toLocaleString()}</p>
    </div>
  );
};

export default Listing;

// src/App.js
import React, { useState, useEffect } from 'react';
import Web3 from 'web3';
import Listing from './components/Listing';
import './App.css';

const App = () => {
  const [listings, setListings] = useState([]);
  const [filter, setFilter] = useState({ keyword: '', trustTier: '', timestamp: '' });

  useEffect(() => {
    const fetchListings = async () => {
      try {
        const web3 = new Web3(window.ethereum);
        await window.ethereum.enable();

        const listingRegistryABI = require('../config/ListingRegistryABI.json');
        const stakingModuleABI = require('../config/StakingModuleABI.json');

        const listingRegistryAddress = process.env.REACT_APP_LISTING_REGISTRY_ADDRESS;
        const stakingModuleAddress = process.env.REACT_APP_STAKING_MODULE_ADDRESS;

        const listingRegistryContract = new web3.eth.Contract(listingRegistryABI, listingRegistryAddress);
        const stakingModuleContract = new web3.eth.Contract(stakingModuleABI, stakingModuleAddress);

        const events = await listingRegistryContract.getPastEvents('ListingVerified', { fromBlock: 0 });
        const listingsData = await Promise.all(
          events.map(async (event) => {
            const trustTier = await stakingModuleContract.methods.getTrustTier(event.returnValues.seller).call();
            return {
              title: event.returnValues.title,
              description: event.returnValues.description,
              trustTier,
              timestamp: event.returnValues.timestamp,
            };
          })
        );

        setListings(listingsData);
      } catch (error) {
        console.error('Error fetching listings:', error);
      }
    };

    fetchListings();
  }, []);

  const filteredListings = listings.filter((listing) => {
    return (
      (filter.keyword === '' || listing.title.toLowerCase().includes(filter.keyword.toLowerCase())) &&
      (filter.trustTier === '' || listing.trustTier === filter.trustTier) &&
      (filter.timestamp === '' || listing.timestamp === filter.timestamp)
    );
  });

  return (
    <div className="App">
      <h1>Nobay Protocol Listings</h1>
      <div className="filter">
        <input
          type="text"
          placeholder="Keyword"
          value={filter.keyword}
          onChange={(e) => setFilter({ ...filter, keyword: e.target.value })}
        />
        <input
          type="text"
          placeholder="Trust Tier"
          value={filter.trustTier}
          onChange={(e) => setFilter({ ...filter, trustTier: e.target.value })}
        />
 

---
Closes #2