add table for testworld

Staketab · Dec 14, 2023 · 6622ccd · 6622ccd
1 parent 6bbbd7a
commit 6622ccd
Show file tree

Hide file tree

Showing 6 changed files with 234 additions and 3 deletions.
diff --git a/apps/ui/src/comman/config/tableConfig.ts b/apps/ui/src/comman/config/tableConfig.ts
@@ -59,3 +59,60 @@ export const ScoringConfig: TableConfig[] = [
         headerText: 'Win Rate',
     },
 ];
+
+export const testWorldConfig: TableConfig[] = [
+    {
+        colName: 'stake',
+        headerText: 'Validator',
+        columnTemplate: 'accountTemplate',
+        fields: {
+            name: 'valName',
+            img: 'valImg',
+            pk: 'pk',
+            noRedirect: true,
+        },
+    },
+    {
+        colName: 'stake',
+        columnTemplate: 'amount',
+        headerText: 'Stake',
+        fields: {
+            value: 'stake',
+            additionValue: 'protocol',
+        },
+        sortBy: SORT_BY.STAKE,
+    },
+    {
+        colName: 'score',
+        columnTemplate: 'string',
+        headerText: 'Score',
+        fields: {
+            value: 'score',
+        },
+        sortBy: SORT_BY.SCORE,
+    },
+    {
+        colName: 'uptimeBySnark',
+        columnTemplate: 'string',
+        fields: {
+            value: 'uptimePercent',
+        },
+        headerText: 'Uptime by Snark',
+    },
+    {
+        colName: 'votedMIPs',
+        columnTemplate: 'string',
+        fields: {
+            value: 'votedMIPs',
+        },
+        headerText: '% Voted MIPs',
+    },
+    {
+        colName: 'win_Rate',
+        columnTemplate: 'string',
+        fields: {
+            value: 'winRateAvg',
+        },
+        headerText: 'Win Rate',
+    },
+];
diff --git a/apps/ui/src/comman/types.ts b/apps/ui/src/comman/types.ts
@@ -31,6 +31,7 @@ export type TableConfig = {
 };
 
 export type LimitOptions = { text: string; value: number }[];
+export type TabSwitcherOptions = { text: string; value: string }[];
 
 export type DataTable = {
     data: any[];

diff --git a/apps/ui/src/components/atoms/tabSwitcher/index.module.css b/apps/ui/src/components/atoms/tabSwitcher/index.module.css
@@ -0,0 +1,68 @@
+.doubleTabSwitcherWrapper {
+    overflow-x: auto;
+    width: 100%;
+    scrollbar-width: 0;
+}
+.secDoubleTabSwitcher {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    width: max-content;
+}
+
+.doubleTabSwitcher {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    user-select: none;
+    width: max-content;
+    flex-wrap: nowrap;
+}
+
+.tab {
+    height: 34px;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 5px 12px;
+    transition: background-color ease 300ms;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.8);
+    line-height: 16px;
+    letter-spacing: 0.02em;
+    flex-grow: 1;
+}
+
+.tab:hover {
+    background-color: rgba(249, 249, 249, 1);
+}
+.tabActive {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 1);
+    background-color: rgba(89, 127, 255, 1);
+}
+
+.tabActive:hover {
+    background-color: rgba(89, 127, 255, 0.8);
+}
+
+.ActiveDisabled {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 1);
+    background-color: rgba(89, 127, 255, 0.3);
+}
+
+.ActiveDisabled:hover {
+    color: rgba(255, 255, 255, 1);
+}
+
+.DisabledNotSelected {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.3);
+}
+.DisabledNotSelected:hover {
+    color: rgba(0, 0, 0, 0.3);
+    background-color: rgba(255, 255, 255, 1);
+}
diff --git a/apps/ui/src/components/atoms/tabSwitcher/index.ts b/apps/ui/src/components/atoms/tabSwitcher/index.ts
@@ -0,0 +1 @@
+export { default as TabSwitcher } from './tabSwitcher';
diff --git a/apps/ui/src/components/atoms/tabSwitcher/tabSwitcher.tsx b/apps/ui/src/components/atoms/tabSwitcher/tabSwitcher.tsx
@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+
+import styles from './index.module.css';
+import { TabSwitcherOptions } from '../../../comman/types';
+
+type TabSwitcher = {
+    initialValue?: string;
+    options: TabSwitcherOptions;
+    onClick: (value: string) => void;
+    disabled?: boolean;
+};
+
+const TabSwitcher = ({ initialValue, options, onClick, disabled }: TabSwitcher): JSX.Element => {
+    const [current, setCurrent] = useState(initialValue);
+
+    useEffect(() => {
+        setCurrent(!initialValue ? options[0].value : initialValue);
+    }, [initialValue]);
+
+    const clickOption = (val) => {
+        setCurrent(val);
+        onClick(val);
+    };
+
+    return (
+        <div className={classNames(styles.doubleTabSwitcherWrapper, 't-inter-medium')}>
+            <div className={styles.doubleTabSwitcher}>
+                {options.map((elem) => (
+                    <div
+                        key={elem.value}
+                        className={classNames(styles.tab, {
+                            [styles.tabActive]: current === elem.value && !disabled,
+                            [styles.tabActiveDisabled]: current === elem.value && disabled,
+                            [styles.tabDisabledNotSelected]: current !== elem.value && disabled,
+                        })}
+                        onClick={() => (disabled ? null : clickOption(elem.value))}
+                    >
+                        {elem.text}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default TabSwitcher;
diff --git a/apps/ui/src/pages/index.tsx b/apps/ui/src/pages/index.tsx
@@ -3,16 +3,22 @@ import { useEffect, useState } from 'react';
 import { DataTable, LimitOptions, ORDER_BY, SORT_BY } from '../comman/types';
 import { useTable } from '../hooks';
 import Table from '../components/organisms/table';
-import { ScoringConfig } from '../comman/config/tableConfig';
+import { ScoringConfig, testWorldConfig } from '../comman/config/tableConfig';
 import styles from './index.module.css';
 import { Header } from '../components/atoms/header';
+import { TabSwitcher } from '../components/atoms/tabSwitcher';
 
 export const limitOptions: LimitOptions = [
     { text: '50', value: 50 },
     { text: '100', value: 100 },
     { text: '200', value: 200 },
 ];
 
+const tabSwitcherOptions = [
+    { text: 'Mainnet', value: 'mainnet' },
+    { text: 'Testworld', value: 'testworld' },
+];
+
 export default function Home() {
     const [dataTable, setDataTable] = useState<DataTable | null>(null);
     const [loading, setLoading] = useState<boolean>(true);
@@ -21,10 +27,14 @@ export default function Home() {
         limit,
         orderBy,
         sortBy,
+        resetFilter,
         actions: { setPage, setLimit, setOrderBy, setSortBy },
     } = useTable({ defaultState: { page: 0, limit: 100, orderBy: ORDER_BY.DESC, sortBy: SORT_BY.SCORE } });
+    const [tabOptin, setTabOption] = useState(tabSwitcherOptions[0].value);
+    const isFirstTab = tabOptin === tabSwitcherOptions[0].value;
 
     const fetchData = async () => {
+        setDataTable(null);
         setLoading(true);
         try {
             const response = await fetch(
@@ -45,8 +55,44 @@ export default function Home() {
         }
     };
 
+    const fetchTestworldData = async () => {
+        setDataTable(null);
+
+        setLoading(true);
+        try {
+            const response = await fetch(
+                `https://minascan.io/testworld/api//api/validators/?page=${page}&sortBy=amount_staked&orderBy=${orderBy}&searchStr=&size=${limit}&stake=1000&epoch=3&isFullyUnlocked=true&type=active&isNotAnonymous=false&isWithFee=false&isVerifOnly=false`,
+                {
+                    method: 'GET',
+                }
+            );
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            const data = await response.json();
+            const content = data?.content.map((item) => {
+                return {
+                    pk: item.pk,
+                    valName: item.name,
+                    valImg: item.img,
+                    stake: item.amountStaked,
+                    score: '-',
+                    uptimePercent: '-',
+                    votedMIPs: '-',
+                    winRateAvg: '-',
+                };
+            });
+
+            setDataTable({ ...data, data: content });
+        } catch (error) {
+            console.error('Error:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
     useEffect(() => {
-        fetchData();
+        isFirstTab ? fetchData() : fetchTestworldData();
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [limit, orderBy, page, sortBy]);
@@ -62,6 +108,16 @@ export default function Home() {
         };
     });
 
+    const handleTabSwitcher = (value: string) => {
+        setTabOption(value);
+        resetFilter();
+        if (value === tabSwitcherOptions[0].value) {
+            fetchData();
+        } else {
+            fetchTestworldData();
+        }
+    };
+
     return (
         <>
             <Head>
@@ -71,10 +127,11 @@ export default function Home() {
             </Head>
             <div className={styles.content}>
                 <Header title="Leaderboard" />
+                <TabSwitcher options={tabSwitcherOptions} onClick={handleTabSwitcher} />
                 <Table
                     data={data}
                     isLoading={loading}
-                    config={ScoringConfig}
+                    config={isFirstTab ? ScoringConfig : testWorldConfig}
                     currentPage={page}
                     pageLimit={limit}
                     sortBy={sortBy}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as TabSwitcher } from './tabSwitcher';