chore: fix paginations & dropdown & remove percentage

components/common/Dropdown/index.tsx

@@ -1,5 +1,5 @@
 import { ChevronDownIcon } from 'components/icons';
-import React, { ChangeEvent, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { DropdownProps } from './Dropdown.types';
 import useClickOutside from 'hooks/useClickOutside';
 
@@ -11,18 +11,17 @@ export const Dropdown = (props: DropdownProps) => {
   useClickOutside(dropdownRef, () => {
     setOpen(false);
   });
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    onChange(e.target.value);
-  };
 
   return (
     <div ref={dropdownRef} className="relative w-52">
       <button
-        className="w-full bg-gray-100 hover:bg-blue-100 ocus:outline-none text-sm px-10 py-2.5 items-center
-rounded-micro"
+        className="w-full bg-gray-100 hover:bg-blue-100 ocus:outline-none text-sm px-10 py-2.5 items-center rounded-micro"
         onClick={() => setOpen(!open)}>
         <div className="flex justify-between w-full items-center">
-          <p>{placeholder}</p> <ChevronDownIcon size="10" color="black" />
+          <p>
+            {placeholder} <span className="capitalize">{value || ''}</span>
+          </p>
+          <ChevronDownIcon size="10" color="black" />
         </div>
       </button>
 
@@ -32,20 +31,11 @@ rounded-micro"
             {items.map((item) => (
               <li key={item.name}>
                 <div className="w-full flex items-center p-2 rounded-micro hover:bg-gray-100">
-                  <input
-                    id="default-radio-4"
-                    type="radio"
-                    value={item.name}
-                    name="default-radio"
-                    className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2"
-                    checked={value === item.name}
-                    onChange={handleChange}
-                  />
-                  <label
-                    htmlFor="default-radio-4"
-                    className="w-full ms-2 text-sm font-medium text-gray-900 rounded-micro">
+                  <div
+                    onClick={() => onChange(item.name)}
+                    className="w-full ms-2 text-sm font-medium text-gray-900 rounded-micro cursor-pointer">
                     {item.title}
-                  </label>
+                  </div>
                 </div>
               </li>
             ))}

components/common/Table/cells/AmountCell.tsx

@@ -1,18 +1,18 @@
 import { GassIcon } from 'components/icons';
 import { CellProps } from '../Table.type';
-import { getPercentageChange } from 'utils/amountConverter';
+// import { getPercentageChange } from 'utils/amountConverter';
 
 function AmountCell(props: CellProps) {
   const { swapItem, column } = props;
   const { stepsSummary } = swapItem;
-  const fromToken = stepsSummary.length ? stepsSummary[0]?.fromToken : null;
+  // const fromToken = stepsSummary.length ? stepsSummary[0]?.fromToken : null;
   const toToken = stepsSummary.length
     ? stepsSummary[stepsSummary.length - 1]?.toToken
     : null;
 
-  const usdFromAmount = fromToken?.price
-    ? fromToken.price * (fromToken.realAmount || fromToken.expectedAmount)
-    : null;
+  // const usdFromAmount = fromToken?.price
+  //   ? fromToken.price * (fromToken.realAmount || fromToken.expectedAmount)
+  //   : null;
 
   const usdToRealAmount =
     toToken?.price && toToken?.realAmount
@@ -24,14 +24,14 @@ function AmountCell(props: CellProps) {
       ? toToken.price * toToken.expectedAmount
       : null;
 
-  const realChangePercentage = getPercentageChange(
-    usdFromAmount,
-    usdToRealAmount,
-  );
-  const expectedChangePercentage = getPercentageChange(
-    usdFromAmount,
-    usdToExpectedAmount,
-  );
+  // const realChangePercentage = getPercentageChange(
+  //   usdFromAmount,
+  //   usdToRealAmount,
+  // );
+  // const expectedChangePercentage = getPercentageChange(
+  //   usdFromAmount,
+  //   usdToExpectedAmount,
+  // );
   const gasFee = stepsSummary.reduce((acc, cur) => {
     if (cur?.feeUsd) return acc + cur.feeUsd;
     return acc;
@@ -52,13 +52,13 @@ function AmountCell(props: CellProps) {
               ? `$${usdToRealAmount.toFixed(2)}`
               : `~$${usdToExpectedAmount?.toFixed(2)}`}
           </span>
-          <span>
+          {/* <span>
             {usdToRealAmount
               ? `(${realChangePercentage}%)`
               : expectedChangePercentage
                 ? `(${expectedChangePercentage}%)`
                 : ''}
-          </span>
+          </span> */}
         </div>
       )}
       <div className="text-12 md:text-14 flex items-center">

components/transactions/Loading/index.tsx

@@ -0,0 +1,135 @@
+import { useId } from 'react';
+import Link from 'next/link';
+import { Skeleton } from 'components/common/Skeleton';
+import TableHead from 'components/common/Table/TableHead';
+
+function Loading() {
+  const id = useId();
+  return (
+    <div className="w-[calc(100%-3.125rem)] md:container mt-30  md:mt-[3.125rem] rounded-normal bg-baseForeground  px-15 py-20 md:p-35 overflow-hidden">
+      <div className="flex flex-col">
+        <div className="flex flex-col h-20">
+          <h2 className="text-14 md:text-28 font-semibold text-primary-500">
+            Transactions Results
+          </h2>
+          <div className="text-12 md:text-16 text-neutral-800">
+            <Skeleton width={300} height={24} />
+          </div>
+        </div>
+        <div className="md:mt-25">
+          <div className="w-full">
+            <TableHead />
+            <div className="w-full">
+              {Array.from({ length: 14 }, () => {
+                return (
+                  <div
+                    key={id}
+                    className={`flex flex-col p-15 mt-15  md:mt-0 md:p-0 rounded-micro md:-rounded-none md:grid bg-surfacesBackground md:bg-transparent md:hover:bg-hoverBackground md:border-b md:border-neutral-300 md:even:bg-surfacesBackground md:grid-cols-11 w-full`}>
+                    <div
+                      className={`flex flex-col md:py-[27px] md:px-15 lg:px-20 col-span-3`}>
+                      <div className="text-12 md:hidden text-primary-500">
+                        Request ID
+                      </div>
+                      <Skeleton
+                        className="mt-5 md:mt-0 w-[220px] md:w-[178px]"
+                        height={15}
+                      />
+                      <Skeleton className="mt-5" width={169} height={10} />
+                    </div>
+                    <div className="flex items-center mt-15 md:mt-0 md:py-[27px] md:px-15 lg:px-20 col-span-2">
+                      <div className="relative">
+                        <Skeleton
+                          className="w-[27px] md:w-[30px] h-[27px] md:h-[30px]"
+                          variant="circular"
+                        />
+                        <Skeleton
+                          className="absolute w-[12px] md:w-[15px] h-[12px] md:h-[15px] right-[-2px] bottom-[-2px] md:right-[-3px] md:bottom-[-3px]"
+                          variant="circular"
+                        />
+                      </div>
+                      <div className="flex flex-col ml-5 justify-center">
+                        <Skeleton width={92} height={15} />
+                        <Skeleton
+                          className="mt-[2px] md:mt-5"
+                          width={60}
+                          height={10}
+                        />
+                      </div>
+                    </div>
+                    <div className="md:hidden ml-[0.875rem] h-[15px] border-l border-neutral-400"></div>
+                    <div className="flex items-center md:py-[27px] md:px-15 lg:px-20 col-span-2">
+                      <div className="relative">
+                        <Skeleton
+                          className="w-[27px] md:w-[30px] h-[27px] md:h-[30px]"
+                          variant="circular"
+                        />
+                        <Skeleton
+                          className="absolute w-[12px] md:w-[15px] h-[12px] md:h-[15px] right-[-2px] bottom-[-2px] md:right-[-3px] md:bottom-[-3px]"
+                          variant="circular"
+                        />
+                      </div>
+                      <div className="flex flex-col ml-5 justify-center">
+                        <Skeleton width={92} height={15} />
+                        <Skeleton
+                          className="mt-[2px] md:mt-5"
+                          width={60}
+                          height={10}
+                        />
+                      </div>
+                    </div>
+                    <div
+                      className={`flex flex-col md:py-[27px] mt-15 md:mt-0  md:px-15 lg:px-20 col-span-2`}>
+                      <div className="text-12 md:hidden text-primary-500">
+                        Amount
+                      </div>
+                      <Skeleton
+                        className="mt-5 md:mt-0 w-[114px] md:w-[145px]"
+                        height={15}
+                      />
+                      <Skeleton
+                        className="mt-5 w-[86px] md:w-[108px]"
+                        height={10}
+                      />
+                    </div>
+                    <div
+                      className={`flex flex-col mt-25 md:mt-0 md:py-[27px] md:px-15 lg:px-20 col-span-2`}>
+                      <div className="text-12 md:hidden text-primary-500">
+                        Status
+                      </div>
+                      <Skeleton
+                        className="mt-5 md:mt-0 w-[114px] md:w-[108px]"
+                        height={15}
+                      />
+                      <Skeleton
+                        className="mt-5 w-[86px] md:w-[70px]"
+                        height={10}
+                      />
+                    </div>
+                    <Link
+                      href="#"
+                      className={`w-full md:hidden text-center rounded-micro mt-30 border border-primary-600 py-10 text-primary-600 text-16 font-semibold`}>
+                      Detail
+                    </Link>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+        <div className="mt-15 md:mt-25">
+          <div className="flex items-center justify-center">
+            <Skeleton className="rounded-micro w-[2.25rem] md:w-[2.5rem] h-[2.25rem] md:h-[2.5rem]" />
+            <Skeleton className="mx-5 md:mx-10 rounded-micro w-[2.25rem] md:w-[2.5rem] h-[2.25rem] md:h-[2.5rem]" />
+
+            <Skeleton className="w-[5.375rem] h-[2.25rem]  md:w-[7.125rem] md:h-[2.5rem] rounded-micro" />
+
+            <Skeleton className="mx-5 md:mx-10 rounded-micro w-[2.25rem] md:w-[2.5rem] h-[2.25rem] md:h-[2.5rem]" />
+            <Skeleton className="rounded-micro w-[2.25rem] md:w-[2.5rem] h-[2.25rem] md:h-[2.5rem]" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Loading;

components/transactions/Pagination/Pagination.type.ts

@@ -0,0 +1,4 @@
+export interface PropsType {
+  total: number;
+  page: number;
+}

components/transactions/Pagination/index.tsx

@@ -0,0 +1,71 @@
+import { SEARCH_RESULT_OFFSET as offsetPage } from 'constant';
+import { PropsType } from './Pagination.type';
+import {
+  FirstPageIcon,
+  LastPageIcon,
+  NextPageIcon,
+  PrevPageIcon,
+} from 'components/icons';
+import Link from 'next/link';
+
+function Pagination(props: PropsType) {
+  const { page, total } = props;
+  const totalPage = Math.ceil(total / offsetPage);
+
+  return (
+    <div className="flex items-center justify-center">
+      {page > 0 && totalPage > 1 ? (
+        <>
+          <Link
+            href={`/transactions?&page=0`}
+            className="flex items-center rounded-micro justify-center w-[2.25rem] md:w-[2.5rem] h-[2.25rem] md:h-[2.5rem] text-neutral-400 bg-surfacesBackground hover:text-hoverIcon hover:bg-hoverBackground cursor-pointer">
+            <FirstPageIcon size="0.625rem" />
+          </Link>
+          <Link
+            href={`/transactions?&page=${page - 1}`}
+            className="flex items-center mx-5 md:mx-10 rounded-micro justify-center w-[2.25rem] md:w-[2.5rem] h-[2.25rem] md:h-[2.5rem] text-neutral-400 bg-surfacesBackground hover:text-hoverIcon hover:bg-hoverBackground cursor-pointer">
+            <PrevPageIcon />
+          </Link>
+        </>
+      ) : (
+        <>
+          <button className="flex items-center justify-center w-[2.25rem] md:w-[2.5rem] h-[2.25rem] md:h-[2.5rem]  text-neutral-800 bg-transparent border border-solid border-neutral-300 cursor-not-allowed">
+            <FirstPageIcon size="0.625rem" />
+          </button>
+          <button className="flex items-center mx-5 md:mx-10 justify-center w-[2.25rem] md:w-[2.5rem] h-[2.25rem] md:h-[2.5rem] text-neutral-800 bg-transparent border border-solid border-neutral-300 cursor-not-allowed">
+            <PrevPageIcon />
+          </button>
+        </>
+      )}
+      <div className="flex w-[5.375rem] h-[2.25rem]  md:w-[7.125rem] md:h-[2.5rem] items-center justify-center px-10 py-5 rounded-micro bg-surfacesBackground text-10 md:text-12 font-medium text-neutral-800">{`Page ${
+        page + 1
+      } of ${totalPage}`}</div>
+
+      {page + 1 < totalPage && totalPage > 1 ? (
+        <>
+          <Link
+            href={`/transactions?&page=${page + 1}`}
+            className="flex items-center mx-5 md:mx-10 rounded-micro justify-center w-[2.25rem] md:w-[2.5rem] h-[2.25rem] md:h-[2.5rem] text-neutral-400 bg-surfacesBackground hover:text-hoverIcon hover:bg-hoverBackground cursor-pointer">
+            <NextPageIcon />
+          </Link>
+          <Link
+            href={`/transactions?&page=${totalPage - 1}`}
+            className="flex items-center rounded-micro justify-center w-[2.25rem] md:w-[2.5rem] h-[2.25rem] md:h-[2.5rem] text-neutral-400 bg-surfacesBackground hover:text-hoverIcon hover:bg-hoverBackground cursor-pointer">
+            <LastPageIcon size="0.625rem" />
+          </Link>
+        </>
+      ) : (
+        <>
+          <button className="flex items-center mx-5 md:mx-10 justify-center w-[2.25rem] md:w-[2.5rem] h-[2.25rem] md:h-[2.5rem] text-neutral-800 bg-transparent border border-solid border-neutral-300 cursor-not-allowed">
+            <NextPageIcon />
+          </button>
+          <button className="flex items-center  justify-center  w-[2.25rem] md:w-[2.5rem] h-[2.25rem] md:h-[2.5rem]  text-neutral-800 bg-transparent border border-solid border-neutral-300 cursor-not-allowed">
+            <LastPageIcon size="0.625rem" />
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default Pagination;

components/transactions/Result/Result.type.ts

@@ -2,7 +2,6 @@ import { SwapType } from 'types';
 
 export interface PropsType {
   data: SwapType[];
-  query: string;
   total: number;
   page: number;
   status: string;

components/transactions/Result/index.tsx

@@ -1,13 +1,14 @@
 import Table from 'components/common/Table';
 import { Dropdown } from 'components/common/Dropdown';
 import { PropsType } from './Result.type';
-import Pagination from 'components/search/Pagination';
+import Pagination from '../Pagination';
 
 function Result(props: PropsType) {
-  const { data, query, total, page, status, setStatus, filterItems } = props;
+  const { data, total, page, status, setStatus, filterItems } = props;
+
   return (
     <div className="w-[calc(100%-3.125rem)] md:container mt-30  md:mt-[3.125rem] rounded-normal bg-baseForeground  px-15 py-20 md:p-35 overflow-hidden">
-      <div className="flex flex-col">
+      <div className="flex flex-col h-20">
         <div className="flex justify-between items-center">
           <div className="flex flex-col justify-center">
             <h2 className="text-14 md:text-28 font-semibold text-primary-500">
@@ -17,19 +18,30 @@ function Result(props: PropsType) {
               {`Found ${total} swaps`}
             </p>
           </div>
-          <Dropdown
-            items={filterItems}
-            value={status}
-            placeholder="Filter by"
-            onChange={setStatus}
-          />
+          <div className="flex flex-col">
+            {/* <div className="flex items-center pb-10">
+              <RefreshButton
+                refreshTime={REFRESH_TIME - 1}
+                onClick={onRefresh}
+              />
+              <span className="text-10 md:text-14 text-neutral-400 pt-1">
+                Refresh in {second > 9 ? second : `0${second}`} seconds
+              </span>
+            </div> */}
+            <Dropdown
+              items={filterItems}
+              value={status}
+              placeholder="Filter by"
+              onChange={setStatus}
+            />
+          </div>
         </div>
       </div>
       <div className="md:mt-25">
         <Table data={data} />
       </div>
       <div className="mt-15 md:mt-25">
-        <Pagination page={page} total={total} query={query} />
+        <Pagination page={page} total={total} />
       </div>
     </div>
   );