add new queries, update filtering, sorting, receiving ensNames

fluidity-money · Dec 7, 2023 · 3701013 · 3701013
1 parent 35bd323
commit 3701013
Show file tree

Hide file tree

Showing 11 changed files with 240 additions and 215 deletions.
diff --git a/web/leaderboard/package.json b/web/leaderboard/package.json
@@ -9,10 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@apollo/client": "^3.8.8",
     "@fluidity-money/surfing": "*",
     "framer-motion": "^10.16.4",
     "graphql": "^16.8.1",
     "next": "14.0.1",
+    "next-urql": "^5.0.2",
     "react": "^18",
     "react-dom": "^18",
     "urql": "^4.0.6",

diff --git a/web/leaderboard/src/app/components/Dropdown/index.tsx b/web/leaderboard/src/app/components/Dropdown/index.tsx
@@ -2,17 +2,19 @@ import { Text } from "@fluidity-money/surfing";
 import styles from "./Dropdown.module.scss";
 
 const sortedBy = [
-  { title: "volume transacted", name: "volume" },
-  { title: "rewards earned", name: "rewards" },
-  { title: "number of transactions", name: "number" },
+  { title: "VOLUME", name: "volume" },
+  { title: "REWARDS", name: "rewards" },
+  { title: "#TX", name: "number" },
 ];
 
 export const DropdownOptions = ({
   setSortedByItem,
   setOpenDropdown,
+  sortData,
 }: {
   setSortedByItem: (value: string) => void;
   setOpenDropdown: (value: boolean) => void;
+  sortData: (value: string) => void;
 }) => {
   return (
     <div className={styles.dropdown_options}>
@@ -24,6 +26,7 @@ export const DropdownOptions = ({
               onClick={() => {
                 setSortedByItem(option.name);
                 setOpenDropdown(false);
+                sortData(option.name);
               }}
             >
               <Text size="xl" prominent={true}>

diff --git a/web/leaderboard/src/app/components/Table/index.tsx b/web/leaderboard/src/app/components/Table/index.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { useSearchParams } from "next/navigation";
 import { AnimatePresence, motion } from "framer-motion";
-import { GeneralButton, LoadingDots, Text } from "@fluidity-money/surfing";
+import { LoadingDots, Text } from "@fluidity-money/surfing";
 import styles from "../../page.module.scss";
 
 type Filter<T> = {

diff --git a/web/leaderboard/src/app/config.ts b/web/leaderboard/src/app/config.ts
@@ -54,7 +54,7 @@ export const tableHeadings = [
 ];
 
 export enum SORTED_ITEM {
-  volume = "volume transacted",
-  rewards = "rewards earned",
-  number = "number of transactions",
+  volume = "VOLUME",
+  rewards = "REWARDS",
+  number = "#TX",
 }
diff --git a/web/leaderboard/src/app/ensName.tsx b/web/leaderboard/src/app/ensName.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { useEnsName } from "wagmi";
+
+const trimAddress = (address: string): string => {
+  const leftSide = address.slice(0, 4);
+
+  const rightSide = address.slice(-4);
+
+  return leftSide + "..." + rightSide;
+};
+
+const UseEnsName = (address: any) => {
+  const ensName = useEnsName({
+    address: address.address,
+    chainId: 1,
+  });
+
+  return (
+    <div>
+      {ensName.data === null ? trimAddress(address.address) : ensName.data}
+    </div>
+  );
+};
+
+export default UseEnsName;
diff --git a/web/leaderboard/src/app/layout.tsx b/web/leaderboard/src/app/layout.tsx
@@ -1,27 +1,31 @@
-import type { Metadata } from "next";
+"use client";
+
+//import type { Metadata } from "next";
 import { inter, spline, aeonik } from "./config";
 import { Providers } from "./providers";
+import { ApolloProvider } from "@apollo/client";
+import { client } from "./utils/client";
 
 import "./globals.css";
 
-export const metadata: Metadata = {
-  title: "Leaderboard",
-  description: "Fluidity Leaderbord page",
-};
+//export const metadata: Metadata = {
+//  title: "Leaderboard",
+//  description: "Fluidity Leaderbord page",
+//};
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html
       lang="en"
       className={`${inter.className} ${spline.className} ${aeonik.className}`}
     >
       <body>
-        <Providers>{children}</Providers>
+        <ApolloProvider client={client}>
+          <Providers>{children}</Providers>
+        </ApolloProvider>
       </body>
     </html>
   );
 }
+
+export default RootLayout;
diff --git a/web/leaderboard/src/app/page.module.scss b/web/leaderboard/src/app/page.module.scss
@@ -217,18 +217,17 @@ $gray: #999999;
 .table_content > tbody > tr.table_row.highlighted_row {
   background: linear-gradient(
     90deg,
-    #f3b8d8 0%,
-    #b793e9 15.1%,
-    #9fd4f3 26.04%,
-    #ffd2c4 36.46%,
-    #fbf3f3 46.88%,
-    #d9abdf 57.29%,
-    #af9ce3 72.4%,
-    #aae4e1 85.42%,
-    #c6ead0 93.23%,
-    #fdb5e4 100%
+    rgba(243, 184, 216, 20%) 0%,
+    rgba(183, 147, 233, 20%) 15.1%,
+    rgba(159, 212, 243, 20%) 26.04%,
+    rgba(255, 210, 196, 20%) 36.46%,
+    rgba(251, 243, 243, 20%) 46.88%,
+    rgba(217, 171, 223, 20%) 57.29%,
+    rgba(175, 156, 227, 20%) 72.4%,
+    rgba(170, 228, 225, 20%) 85.42%,
+    rgba(198, 234, 208, 20%) 93.23%,
+    rgba(253, 181, 228, 20%) 100%
   );
-  opacity: 20%;
 }
 
 .table_content > tbody > tr > td {