feat: add transactions page

rango-exchange · Feb 28, 2024 · 82d632c · 82d632c
1 parent 55d812a
commit 82d632c
Show file tree

Hide file tree

Showing 16 changed files with 483 additions and 37 deletions.
diff --git a/.github/workflows/production-dapp-deployment.yml b/.github/workflows/production-dapp-deployment.yml
@@ -2,6 +2,7 @@ name: Vercel Dapp Production Deployment
 env:
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
   VERCEL_PROJECT_ID: ${{ secrets.VERCEL_DAPP_EXPLORER_PROJECT_ID }}
+  NEXT_PUBLIC_BASE_URL: ${{ secrets.NEXT_PUBLIC_BASE_URL }}
   NEXT_PUBLIC_API_KEY: ${{ secrets.NEXT_DAPP_EXPLORER_PUBLIC_API_KEY }} 
   NEXT_PUBLIC_SECRET_KEY: ${{ secrets.NEXT_DAPP_EXPLORER_PUBLIC_SECRET_KEY }} 
 on:

diff --git a/components/common/Dropdown/Dropdown.types.ts b/components/common/Dropdown/Dropdown.types.ts
@@ -0,0 +1,6 @@
+export interface DropdownProps {
+  items: { title: string; name: string }[];
+  placeholder: string;
+  onChange: (item: string) => void;
+  value: string;
+}
diff --git a/components/common/Dropdown/index.tsx b/components/common/Dropdown/index.tsx
@@ -0,0 +1,47 @@
+import { ChevronDownIcon } from 'components/icons';
+import React, { useRef, useState } from 'react';
+import { DropdownProps } from './Dropdown.types';
+import useClickOutside from 'hooks/useClickOutside';
+
+export const Dropdown = (props: DropdownProps) => {
+  const { items, value, onChange, placeholder } = props;
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(dropdownRef, () => {
+    setOpen(false);
+  });
+
+  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"
+        onClick={() => setOpen(!open)}>
+        <div className="flex justify-between w-full items-center">
+          <p>
+            {placeholder} <span className="capitalize">{value || ''}</span>
+          </p>
+          <ChevronDownIcon size="10" color="black" />
+        </div>
+      </button>
+
+      {open && (
+        <div className="w-full mt-1 absolute z-10 rounded-micro bg-white divide-y shadow">
+          <ul className="py-2 px-1 space-y-1 text-sm text-gray-700">
+            {items.map((item) => (
+              <li key={item.name}>
+                <div className="w-full flex items-center p-2 rounded-micro hover:bg-gray-100">
+                  <div
+                    onClick={() => onChange(item.name)}
+                    className="w-full ms-2 text-sm font-medium text-gray-900 rounded-micro cursor-pointer">
+                    {item.title}
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/components/common/Navbar/Navbar.helper.ts b/components/common/Navbar/Navbar.helper.ts
@@ -15,11 +15,11 @@ export const links: Array<LinkTypes | MenuTypes> = [
     openInNewTab: false,
   },
   {
-    location: 'https://app.rango.exchange',
-    title: 'Rango App',
+    location: '/transactions',
+    title: 'Transactions',
     id: 2,
     type: 'link',
-    openInNewTab: true,
+    openInNewTab: false,
   },
   {
     title: 'Resources',

diff --git a/components/common/Table/cells/AmountCell.tsx b/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">

diff --git a/components/transactions/Loading/index.tsx b/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;
diff --git a/components/transactions/Pagination/Pagination.type.ts b/components/transactions/Pagination/Pagination.type.ts
@@ -0,0 +1,4 @@
+export interface PropsType {
+  total: number;
+  page: number;
+}
diff --git a/components/transactions/Pagination/index.tsx b/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;
diff --git a/components/transactions/Result/Result.type.ts b/components/transactions/Result/Result.type.ts
@@ -0,0 +1,10 @@
+import { SwapType } from 'types';
+
+export interface PropsType {
+  data: SwapType[];
+  total: number;
+  page: number;
+  status: string;
+  setStatus: (value: string) => void;
+  filterItems: { title: string; name: string }[];
+}