Merge pull request #35 from Monobladegg/main

add visual and fix link to github

src/pages/public/assets/AssetsListItem.tsx

@@ -0,0 +1,55 @@
+import { FC } from "react";
+import { useStore } from "@/features/store";
+import { useShallow } from "zustand/react/shallow";
+import Link from "next/link";
+
+export interface AssetsItem {
+  code: string;
+  issuer: string;
+  tag: string;
+}
+
+type Props = {
+  item: AssetsItem;
+};
+
+const AssetsListItem: FC<Props> = ({ item }) => {
+  const { net } = useStore(
+    useShallow((state) => ({
+      net: state.net,
+    }))
+  );
+
+  return (
+    <li style={{ padding: "1em", lineHeight: "1.6", overflow: "hidden" }}>
+      <div>
+        <b>
+          <Link
+            title={item?.issuer}
+            aria-label={item?.issuer}
+            className="account-address"
+            href={`/${net}/account?id=${item?.issuer}`}
+            style={{ marginRight: "1em" }}
+          >
+            <span className="account-key">{item?.issuer}</span>
+          </Link>
+        </b>
+        <a href="#" className="text-small">
+          {item?.code}
+        </a>
+        {" "}
+        {item?.tag ? (
+          <a href="#" className="inline-tag">
+            #{item?.tag}
+          </a>
+        ) : (
+          <a href="#" className="inline-tag">
+            #other
+          </a>
+        )}
+      </div>
+    </li>
+  );
+};
+
+export default AssetsListItem;

src/pages/public/assets/CurrencyListItem.tsx

@@ -13,7 +13,7 @@ const CurrencyListItem: FC<Props> = ({ RecordEnemy, net, paramsTags }) => (
     <div>
       <b>{RecordEnemy?.name}</b>{" "}
 
-      <a href="https://null" className="text-small">
+      <a href="#" className="text-small">
         {RecordEnemy?.domain}
       </a>
       {RecordEnemy?.tags.map((tag: string, index: number) =>

src/pages/public/assets/page.tsx

@@ -1,126 +1,65 @@
 "use client";
 
-import React, {
-  // useEffect,
-  // useCallback,
-  useState,
-  FC,
-  FormEvent,
-  useMemo,
-} from "react";
-// import { useStore } from "@/features/store";
-// import { useShallow } from "zustand/react/shallow";
-// import axios, { AxiosError } from "axios";
-// import CurrencyListItem from "./CurrencyListItem";
-// const API_URL = "https://api.stellar.expert/explorer/directory";
+import React, { useState, useEffect, useRef, FC, FormEvent } from "react";
 import { useSearchParams } from "next/navigation";
-import Link from "next/link";
 import { MainLayout } from "@/widgets";
-import { CurrencyInfo } from "@/shared/types";
-import { ITag, popularTags } from "@/shared/lib/popularTags";
+import AssetsListItem, { AssetsItem } from "./AssetsListItem";
 import trustedMtlAssets from "@/shared/configs/trusted-mtl-assets.json";
 
+const ITEMS_PER_PAGE = 20;
+
 const Assets: FC = () => {
   const searchParams = useSearchParams();
-  const paramsTagsString = searchParams?.get("tag[]");
-  const paramsCursor = searchParams?.get("cursor");
   const paramsSearch = searchParams?.get("search");
-  const paramsTags = useMemo(
-    () => (paramsTagsString ? paramsTagsString.split(",") : []),
-    [paramsTagsString]
-  );
-  // const router = useRouter();
-  const [filter, setFilter] = useState<string>(paramsSearch || "");
-  const [currency] = useState<CurrencyInfo>({} as CurrencyInfo);
-  // const { net } = useStore(useShallow((state) => ({ net: state.net })));
 
-  // const fetchAssetInfo = useCallback(
-  //   async (searchTerm: string) => {
-  //     try {
-  //       const { data } = await axios.get(API_URL, {
-  //         params: searchTerm
-  //           ? {
-  //               limit: 20,
-  //               search: searchTerm,
-  //               "tag[]": paramsTags,
-  //               cursor: paramsCursor,
-  //             }
-  //           : {
-  //               limit: 20,
-  //               "tag[]": paramsTags,
-  //               cursor: paramsCursor,
-  //             },
-  //       });
-  //       setCurrency(data);
-  //     } catch (error) {
-  //       if (error instanceof AxiosError && error.response?.status === 400) {
-  //         setCurrency({} as CurrencyInfo);
-  //       }
-  //       console.error("Error fetching asset info:", error);
-  //     }
-  //   },
-  //   [paramsTags, paramsCursor]
-  // );
-
-  // useEffect(() => {
-  //   fetchAssetInfo("");
-  // }, []);
+  const [filter, setFilter] = useState<string>(paramsSearch || "");
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [displayedItems, setDisplayedItems] = useState<AssetsItem[]>([]);
+  const observerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const filteredItems = trustedMtlAssets.filter(
+      (item) => item.code.includes(filter) || item.issuer.includes(filter)
+    );
+    setDisplayedItems(filteredItems.slice(0, currentPage * ITEMS_PER_PAGE));
+  }, [filter, currentPage]);
+
+  useEffect(() => {
+    // Set up IntersectionObserver for infinite scrolling
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          setCurrentPage((prevPage) => prevPage + 1);
+        }
+      },
+      { threshold: 1 }
+    );
+
+    if (observerRef.current) {
+      observer.observe(observerRef.current);
+    }
 
-  // useEffect(() => {
-  //   fetchAssetInfo(filter);
-  // }, [filter, searchParams]);
+    return () => {
+      if (observerRef.current) {
+        observer.unobserve(observerRef.current);
+      }
+    };
+  }, []);
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
     setFilter(formData.get("search") as string);
+    setCurrentPage(1); // Reset pagination when a new search is made
   };
 
-  const toggleTag = (tag: ITag) => {
-    const tagWithoutHash = tag.name.replace("#", "");
-    let newTags = [...paramsTags];
-
-    if (newTags.includes(tagWithoutHash)) {
-      newTags = newTags.filter((t) => t !== tagWithoutHash);
-    } else {
-      newTags.push(tagWithoutHash);
-    }
-
-    return `?tag[]=${newTags.join(",")}`;
-  };
-
-  // const changePage = (direction: "next" | "prev") => {
-  //   const records = currency?._embedded?.records;
-  //   if (!records) return;
-
-  //   const cursor =
-  //     direction === "next"
-  //       ? records[records.length - 1].address
-  //       : records[0].address;
-  //   const order = direction === "next" ? "asc" : "desc";
-
-  //   router.push(
-  //     `?tag[]=${paramsTags.join(",")}&cursor=${cursor}&order=${order}`
-  //   );
-  // };
-
-  const isPrevDisabled: boolean =
-    Boolean(filter) ||
-    currency?._embedded?.records.length === 0 ||
-    !paramsCursor;
-
-  const isNextDisabled: boolean =
-    !(currency?._embedded?.records.length < 20) || Boolean(filter);
-
-  console.log(trustedMtlAssets)
-
   return (
     <MainLayout>
       <div className="container narrow">
         <h2>Trusted MTL Assets</h2>
         <div className="text-right mobile-left" style={{ marginTop: "-2.2em" }}>
           <a
-            href="#"
+            href="https://github.com/montelibero-org/stellar-multisig/blob/main/src/shared/configs/trusted-mtl-assets.json"
             className="icon icon-github"
             title="Log in with Github"
             style={{ fontSize: "1.4em" }}
@@ -140,54 +79,15 @@ const Assets: FC = () => {
             </form>
             <div>
               <div className="dimmed text-small">Filter by tag:</div>
-              <div className="row">
-                {popularTags.map((tag: ITag, index: number) => (
-                  <div key={index} className="column column-25">
-                    <Link
-                      className={`tag-block ${paramsTags.includes(tag.name.replace("#", ""))
-                        ? "active"
-                        : ""
-                        }`}
-                      href={toggleTag(tag)}
-                    >
-                      {tag.name}
-                      <span className="description">{tag.desc}</span>
-                    </Link>
-                  </div>
-                ))}
-              </div>
+              <div className="row"></div>
             </div>
           </div>
           <ul className="striped space">
-            {/* {currency?._embedded?.records?.map(
-              (value: RecordEnemy, index: number) => (
-                <CurrencyListItem
-                  key={index}
-                  paramsTags={paramsTags}
-                  RecordEnemy={value}
-                  net={net}
-                />
-              )
-            )} */}
+            {displayedItems.map((value: AssetsItem, index: number) => (
+              <AssetsListItem key={index} item={value} />
+            ))}
           </ul>
-          <div className="grid-actions text-center space relative">
-            <div className="button-group">
-              <button
-                className={`button ${isPrevDisabled ? "disabled" : ""}`}
-                disabled={isPrevDisabled}
-              // onClick={() => !isPrevDisabled && changePage("prev")}
-              >
-                Prev Page
-              </button>
-              <button
-                className={`button ${isNextDisabled ? "disabled" : ""}`}
-                disabled={isNextDisabled}
-              // onClick={() => !isNextDisabled && changePage("next")}
-              >
-                Next Page
-              </button>
-            </div>
-          </div>
+          <div ref={observerRef} />
         </div>
       </div>
     </MainLayout>

src/shared/configs/trusted-mtl-assets.json

@@ -34,4 +34,4 @@
     "issuer": "GACKTN5DAZGWXRWB2WLM6OPBDHAMT6SJNGLJZPQMEZBUR4JUGBX2UK7V",
     "tag": "etf"
   }
-]
+]