[#24]feat: add pagination component

src/components/layouts/Dashboard/modules/Table/Pagination/Pagination.tsx

@@ -0,0 +1,69 @@
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/outline';
+
+function Pagination() {
+  return (
+    <ul className="inline-flex items-center -space-x-px">
+      <li>
+        <a
+          href="#"
+          className="block py-2 px-3 ml-0 leading-tight text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        >
+          <span className="sr-only">Previous</span>
+          <ArrowLeftIcon className="w-5 h-5" />
+        </a>
+      </li>
+      <li>
+        <a
+          href="#"
+          className="py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        >
+          1
+        </a>
+      </li>
+      <li>
+        <a
+          href="#"
+          className="py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        >
+          2
+        </a>
+      </li>
+      <li>
+        <a
+          href="#"
+          aria-current="page"
+          className="z-10 py-2 px-3 leading-tight text-blue-600 bg-blue-50 border border-blue-300 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
+        >
+          3
+        </a>
+      </li>
+      <li>
+        <a
+          href="#"
+          className="py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        >
+          4
+        </a>
+      </li>
+      <li>
+        <a
+          href="#"
+          className="py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        >
+          5
+        </a>
+      </li>
+      <li>
+        <a
+          href="#"
+          className="block py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        >
+          <span className="sr-only">Next</span>
+          <ArrowRightIcon className="w-5 h-5" />
+        </a>
+      </li>
+    </ul>
+  );
+}
+
+export default Pagination;

src/components/layouts/Dashboard/modules/Table/Table.tsx

@@ -10,10 +10,10 @@ const Table = ({ data }: Props) => {
 
   return (
     <div className="min-h-full max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-      <div className="relative overflow-x-auto shadow-lg sm:rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 dark:from-cyan-800 dark:to-cyan-800">
+      <div className="relative overflow-x-auto mb-5 shadow-lg sm:rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500">
         <SearchInput search={search} />
-        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-          <thead className="text-xs text-white uppercase dark:bg-gray-700 dark:text-gray-400">
+        <table className="w-full text-sm text-left text-gray-500">
+          <thead className="text-xs text-white uppercase">
             <tr>
               <th scope="col" className="px-6 py-3">
                 {col1}
@@ -33,10 +33,10 @@ const Table = ({ data }: Props) => {
             </tr>
           </thead>
           {/* TODO: pagination */}
-          <TableBody data={others} offset={0} />
-          {/* offset: 0 - 10 - 20 */}
+          <TableBody data={others} />
         </table>
       </div>
+      {/* <Pagination /> */}
     </div>
   );
 };

src/components/layouts/Dashboard/modules/Table/index.tsx

@@ -2,3 +2,4 @@ export { default as Table } from './Table';
 export { default as SearchInput } from './SearchInput/SearchInput';
 export { default as TableBody } from './TableBody/TableBody';
 export { default as TableRow } from './TableRow/TableRow';
+export { default as Pagination } from './Pagination/Pagination';

src/hooks/useEthTransactions.ts

@@ -12,6 +12,8 @@ export const useEthTransactions = ({ offset = 0 }: Props) => {
   const ethAddress: string = user?.get('ethAddress') || '';
   const [isLoading, setIsLoading] = useState(true);
   const [transactions, setTransactions] = useState<Transactions>();
+  // const [page, setPage] = useState(0);
+  // const [totalPages, setTotalPages] = useState(0);
 
   const fetchEthTransaction = useCallback(
     async () => {
@@ -24,7 +26,7 @@ export const useEthTransactions = ({ offset = 0 }: Props) => {
               chain: 'rinkeby',
               address: ethAddress,
               offset: offset || 0, // offset is used for pagination
-              limit: 5, // 5 transactions per page
+              // limit: 100, // 5 transactions per page
             });
           setTransactions(ethTransactions);
         } catch (error) {
@@ -40,12 +42,20 @@ export const useEthTransactions = ({ offset = 0 }: Props) => {
 
   useEffect(() => {
     fetchEthTransaction();
+
+    // transactions?.result &&
+    //   transactions?.result.length > 0 &&
+    //   setTotalPages(Math.ceil(transactions?.result?.length / 5));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetchEthTransaction]);
 
   return {
     ethAddress,
     transactions,
     isLoading,
     offset,
+    // totalPages,
+    // page,
+    // setPage,
   };
 };