Add toggle for show all markets and sort markets by volume (#255)

* Add toggle for show all markets and sort markets by volume * comment * dedup
CKS-Systems · Nov 6, 2024 · 5b35c7d · 5b35c7d
1 parent cb60139
commit 5b35c7d
Show file tree

Hide file tree

Showing 5 changed files with 4,542 additions and 1,612 deletions.
diff --git a/debug-ui/app/components/AppWalletProvider.tsx b/debug-ui/app/components/AppWalletProvider.tsx
@@ -147,6 +147,9 @@ const AppWalletProvider = ({
             }
           },
         );
+        marketAddrs.sort((addr1: string, addr2: string) => {
+          return volumeByAddr[addr2] - volumeByAddr[addr1];
+        });
         setMarketAddrs(marketAddrs);
         setMarketVolumes(volumeByAddr);
 

diff --git a/debug-ui/app/page.tsx b/debug-ui/app/page.tsx
@@ -1,14 +1,21 @@
 'use client';
 
-import { ReactElement } from 'react';
+import { ReactElement, useState } from 'react';
 import Link from 'next/link';
 import { useAppState } from './components/AppWalletProvider';
 import { addrToLabel } from '@/lib/address-labels';
+import Toggle from 'react-toggle';
+import 'react-toggle/style.css';
 
 const Home = (): ReactElement => {
   const readOnly = process.env.NEXT_PUBLIC_READ_ONLY === 'true';
   const { marketAddrs, loading, labelsByAddr, marketVolumes, activeByAddr } =
     useAppState();
+  const [showAll, setShowAll] = useState<boolean>(false);
+
+  function handleShowAllChange(event: { target: { checked: any } }) {
+    setShowAll(event.target.checked);
+  }
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-center bg-gray-900 text-gray-200 p-8">
@@ -34,7 +41,7 @@ const Home = (): ReactElement => {
             <ul className="space-y-4 bg-gray-700 p-4 rounded-lg">
               {marketAddrs.map(
                 (market, index) =>
-                  activeByAddr[market] && (
+                  (showAll || activeByAddr[market]) && (
                     <li
                       key={index}
                       className="bg-gray-600 p-2 rounded-lg hover:bg-gray-500 transition-colors"
@@ -52,6 +59,12 @@ const Home = (): ReactElement => {
                   ),
               )}
             </ul>
+            <Toggle
+              defaultChecked={false}
+              icons={false}
+              onChange={handleShowAllChange}
+            />
+            <span>Show All</span>
           </>
         ) : (
           <p className="text-center">No markets found.</p>

diff --git a/debug-ui/lib/types.ts b/debug-ui/lib/types.ts
@@ -4,7 +4,6 @@ export interface LabelsByAddr {
 
 // When true, this is the primary market for a given pair. This is defined by
 // quote volume traded and determines which is shown in UI.
-// TODO: Make a toggle for show all
 export interface ActiveByAddr {
   [addr: string]: boolean;
 }

diff --git a/debug-ui/package.json b/debug-ui/package.json
@@ -33,13 +33,15 @@
     "prom-client": "^15.1.3",
     "react": "^18.2.0",
     "react-dom": "^18",
-    "react-toastify": "^10.0.5"
+    "react-toastify": "^10.0.5",
+    "react-toggle": "^4.1.3"
   },
   "devDependencies": {
     "@solana/spl-token": "^0.4.8",
     "@types/node": "^22.7.8",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-toggle": "^4.0.5",
     "bs58": "^6.0.0",
     "dotenv": "^16.4.5",
     "eslint": "^8",