Merge pull request #516 from Itheum/test

feature: ai data workforce home screen top 5 widget
Itheum · Sep 4, 2024 · 5fe71f6 · 5fe71f6
2 parents ddfc352 + a35ab97
commit 5fe71f6
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "explorer-dapp",
   "description": "Itheum Explorer is a DApp for the public to explore and visualize data within the Itheum protocol",
-  "version": "1.22.1",
+  "version": "1.22.2",
   "author": "Itheum",
   "license": "GPL-3.0-or-later",
   "dependencies": {

diff --git a/src/pages/AIWorkforce/AIWorkforce.tsx b/src/pages/AIWorkforce/AIWorkforce.tsx
@@ -180,3 +180,34 @@ export const AIWorkforce = () => {
     </div>
   );
 };
+
+export const AIWorkforceTopN = ({ showItems }: { showItems?: number }) => {
+  const [appBootingUp, setAppBootingUp] = useState<boolean>(true);
+  const [rankedWorkforce, setRankedWorkforce] = useState<any[]>([]);
+
+  useEffect(() => {
+    async function getDataAndInitGraphData() {
+      setAppBootingUp(true);
+      const workforceDataList = await getWorkforceData();
+      setRankedWorkforce(workforceDataList);
+      setAppBootingUp(false);
+    }
+
+    getDataAndInitGraphData();
+  }, []);
+
+  async function getWorkforceData() {
+    const apiResponse = await axios.get(`${backendApi()}/workforce?size=${showItems || 5}`);
+    const dataResponse = apiResponse.data;
+
+    return dataResponse;
+  }
+
+  return (
+    <div className="w-[100%] py-2">
+      <div className="mt-1 mb-10">
+        <div className="flex flex-col justify-center items-center">{appBootingUp ? <>Loading</> : <WorkersSnapShotGrid snapShotData={rankedWorkforce} />}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/AIWorkforce/SharedComps.tsx b/src/pages/AIWorkforce/SharedComps.tsx
@@ -20,12 +20,15 @@ export function WorkersSnapShotGrid({ snapShotData }: { snapShotData: any[] }) {
                 Rank: {idx + 1}
               </span>
             </div>
-            <img className="h-auto max-w-full" src={worker.vaultImg} alt={worker.vault} />
-            <div className="h-[78px] -mt-[78px] bg-black opacity-75 p-[10px] pl-[15px] text-white rounded-[20px] md:rounded-[27px]">
-              <p className="text-[10px]">{worker.vault}</p>
-              <p className="text-[10px]">Score: {worker.rankScore?.toLocaleString()}</p>
-              <p className="text-[10px]">Bonded Amount: {worker.bondAmount?.toLocaleString()}</p>
-              <p className="text-[10px]">Liveliness Score: {worker.livelinessScore?.toLocaleString()}</p>
+            <div className="group">
+              <img className="h-auto max-w-full" src={worker.vaultImg} alt={worker.vault} />
+              <div className="h-[95px] -mt-[95px] bg-black opacity-75 p-[10px] pl-[15px] rounded-b-3xl text-white hidden group-hover:block">
+                <p className="text-[10px]">{worker.vault}</p>
+                <p className="text-[10px]">Rank Score: {worker.rankScore?.toLocaleString()}</p>
+                <p className="text-[10px]">Total Bond: {worker.bondAmount?.toLocaleString()}</p>
+                <p className="text-[10px]">Liveliness Score: {worker.livelinessScore?.toLocaleString()}</p>
+                <p className="text-[10px]">BiTz XP: {worker.bitzXp?.toLocaleString()}</p>
+              </div>
             </div>
           </div>
         ))}

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -8,6 +8,7 @@ import TrendingSection from "components/TrendingSection";
 import { APP_MAPPINGS } from "libs/utils/constant";
 import { routeNames } from "routes";
 import { Button } from "../libComponents/Button";
+import { AIWorkforceTopN } from "../pages/AIWorkforce/AIWorkforce";
 import { AnalyticsSnapshot } from "../pages/Analytics/AnalyticsSnapshot";
 
 export function returnRoute(routeKey: string) {
@@ -50,7 +51,7 @@ export const Home = () => {
         </div>
       </div>
 
-      <hr className="w-48 h-1 mx-auto my-4 bg-gray-300 border-0 rounded md:my-10 dark:bg-gray-700"></hr>
+      <hr className="w-48 h-1 mx-auto my-10 bg-gray-300 border-0 rounded dark:bg-gray-700"></hr>
 
       <div className="">
         <h2 className="!text-2xl md:!text-3xl text-center">Featured Apps</h2>
@@ -80,7 +81,27 @@ export const Home = () => {
         </div>
       </div>
 
-      <hr className="w-48 h-1 mx-auto my-4 bg-gray-300 border-0 rounded md:my-10 dark:bg-gray-700"></hr>
+      <hr className="w-48 h-1 mx-auto my-10 bg-gray-300 border-0 rounded dark:bg-gray-700"></hr>
+
+      <div className="">
+        <h2 className="!text-2xl md:!text-3xl text-center">Top 5 Ranked Itheum AI Workforce</h2>
+        <div className="flex flex-row flex-wrap gap-x-8 mt-5">
+          <AIWorkforceTopN showItems={5} />
+        </div>
+        <div className="flex justify-center">
+          <Link to={routeNames.aiworkforce} className="text-base hover:!no-underline hover:text-black">
+            <div className="w-[7.5rem] relative bg-gradient-to-r from-yellow-300 to-orange-500 px-[1px] py-[1px] rounded-md justify-center">
+              <div className="bg-background rounded-md">
+                <Button className="text-sm tracking-tight relative px-[2.35rem] left-2 bottom-1.5 bg-gradient-to-r from-yellow-300 to-orange-500 transition ease-in-out delay-150 duration-300 hover:translate-y-1.5 hover:-translate-x-[8px] hover:scale-100">
+                  View All
+                </Button>
+              </div>
+            </div>
+          </Link>
+        </div>
+      </div>
+
+      <hr className="w-48 h-1 mx-auto my-10 bg-gray-300 border-0 rounded dark:bg-gray-700"></hr>
 
       <div className="">
         <h2 className="!text-2xl md:!text-3xl text-center">Protocol Activity</h2>
@@ -100,7 +121,7 @@ export const Home = () => {
         </div>
       </div>
 
-      <hr className="w-48 h-1 mx-auto my-4 bg-gray-300 border-0 rounded md:my-10 dark:bg-gray-700"></hr>
+      <hr className="w-48 h-1 mx-auto my-10 bg-gray-300 border-0 rounded dark:bg-gray-700"></hr>
 
       <div className="mt-5">
         <h2 className="!text-2xl md:!text-3xl text-center">All Apps</h2>
@@ -130,14 +151,14 @@ export const Home = () => {
         </div>
       </div>
 
-      <hr className="w-48 h-1 mx-auto my-4 bg-gray-300 border-0 rounded md:my-10 dark:bg-gray-700"></hr>
+      <hr className="w-48 h-1 mx-auto my-10 bg-gray-300 border-0 rounded dark:bg-gray-700"></hr>
 
       <div className="flex flex-col">
         <TrendingSection />
         <RecentDataNFTsSection />
       </div>
 
-      <hr className="w-48 h-1 mx-auto my-4 bg-gray-300 border-0 rounded md:my-10 dark:bg-gray-700"></hr>
+      <hr className="w-48 h-1 mx-auto my-10 bg-gray-300 border-0 rounded dark:bg-gray-700"></hr>
     </div>
   );
 };