Added XP table in rewards page

packages/commonwealth/client/scripts/views/pages/RewardsPage/RewardsPage.tsx

@@ -109,16 +109,20 @@ const RewardsPage = () => {
 
         <div className="rewards-tab-container">
           <CWTabsRow>
-            {Object.values(TableType).map((type) => (
-              <CWTab
-                key={type}
-                label={type}
-                isSelected={tableTab === type}
-                onClick={() => {
-                  setTableTab(type);
-                }}
-              />
-            ))}
+            {Object.values(TableType).map((type) =>
+              type === TableType.XPEarnings && !xpEnabled ? (
+                <></>
+              ) : (
+                <CWTab
+                  key={type}
+                  label={type}
+                  isSelected={tableTab === type}
+                  onClick={() => {
+                    setTableTab(type);
+                  }}
+                />
+              ),
+            )}
           </CWTabsRow>
         </div>
 

packages/commonwealth/client/scripts/views/pages/RewardsPage/cards/WalletCard/WalletCard.scss

@@ -6,7 +6,7 @@
   gap: 8px;
   width: 100%;
 
-  >.CWSelectList>.SelectList {
+  > .CWSelectList > .SelectList {
     padding: 4px 8px !important;
     line-height: initial;
     min-height: initial;
@@ -39,4 +39,4 @@
       border-bottom: 1px solid $neutral-50;
     }
   }
-}
+}

packages/commonwealth/client/scripts/views/pages/RewardsPage/tables/WalletTable/XPTable/XPTable.scss

@@ -0,0 +1,19 @@
+@import '../../../../../../styles/shared';
+
+.XPTable {
+  .table-header {
+    display: flex;
+    gap: 4px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  tr {
+    td,
+    th {
+      &:first-of-type {
+        width: 80px;
+      }
+    }
+  }
+}

packages/commonwealth/client/scripts/views/pages/RewardsPage/tables/WalletTable/XPTable/XPTable.tsx

@@ -0,0 +1,97 @@
+import { APIOrderDirection } from 'helpers/constants';
+import React from 'react';
+import { CWIcon } from 'views/components/component_kit/cw_icons/cw_icon';
+import { CWText } from 'views/components/component_kit/cw_text';
+import { CWTable } from 'views/components/component_kit/new_designs/CWTable';
+import { CWTableColumnInfo } from 'views/components/component_kit/new_designs/CWTable/CWTable';
+import { useCWTableState } from 'views/components/component_kit/new_designs/CWTable/useCWTableState';
+import './XPTable.scss';
+
+const columns: CWTableColumnInfo[] = [
+  {
+    key: 'rank',
+    header: 'Rank',
+    numeric: false,
+    sortable: true,
+  },
+  {
+    key: 'username',
+    header: 'Username',
+    numeric: false,
+    sortable: true,
+  },
+  {
+    key: 'xp',
+    header: () => (
+      <CWText className="table-header">
+        <CWIcon iconName="help" iconSize="regular" /> XP
+      </CWText>
+    ),
+    numeric: true,
+    sortable: true,
+  },
+];
+
+const sampleData = [
+  {
+    rank: 1,
+    username: 'Commoner.eth',
+    xp: 126,
+  },
+  {
+    rank: 2,
+    username: 'Commoner.eth',
+    xp: 125,
+  },
+  {
+    rank: 3,
+    username: 'Commoner.eth',
+    xp: 124,
+  },
+  {
+    rank: 4,
+    username: 'Commoner.eth',
+    xp: 123,
+  },
+  {
+    rank: 5,
+    username: 'Commoner.eth',
+    xp: 122,
+  },
+  {
+    rank: 6,
+    username: 'Commoner.eth',
+    xp: 121,
+  },
+  {
+    rank: 7,
+    username: 'Commoner.eth',
+    xp: 120,
+  },
+  {
+    rank: 8,
+    username: 'Commoner.eth',
+    xp: 119,
+  },
+];
+
+const XPTable = () => {
+  const tableState = useCWTableState({
+    columns,
+    initialSortColumn: 'rank',
+    initialSortDirection: APIOrderDirection.Asc,
+  });
+
+  return (
+    <section className="XPTable">
+      <CWTable
+        columnInfo={tableState.columns}
+        sortingState={tableState.sorting}
+        setSortingState={tableState.setSorting}
+        rowData={sampleData}
+      />
+    </section>
+  );
+};
+
+export default XPTable;

packages/commonwealth/client/scripts/views/pages/RewardsPage/tables/WalletTable/XPTable/index.ts

@@ -0,0 +1,3 @@
+import XPTable from './XPTable';
+
+export default XPTable;