diff --git a/components/common/Dropdown/index.tsx b/components/common/Dropdown/index.tsx index 6e70002..ae099b7 100644 --- a/components/common/Dropdown/index.tsx +++ b/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) => { - onChange(e.target.value); - }; return (
@@ -32,20 +31,11 @@ rounded-micro" {items.map((item) => (
  • - -
    • ))} diff --git a/components/common/Table/cells/AmountCell.tsx b/components/common/Table/cells/AmountCell.tsx index e237805..97777f1 100644 --- 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)}`} - + {/* {usdToRealAmount ? `(${realChangePercentage}%)` : expectedChangePercentage ? `(${expectedChangePercentage}%)` : ''} - + */}
    )}
    diff --git a/components/transactions/Loading/index.tsx b/components/transactions/Loading/index.tsx new file mode 100644 index 0000000..8453a55 --- /dev/null +++ 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 ( +
    +
    +
    +

    + Transactions Results +

    +
    + +
    +
    +
    +
    + +
    + {Array.from({ length: 14 }, () => { + return ( +
    +
    +
    + Request ID +
    + + +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + Amount +
    + + +
    +
    +
    + Status +
    + + +
    + + Detail + +
    + ); + })} +
    +
    +
    +
    +
    + + + + + + + +
    +
    +
    +
    + ); +} + +export default Loading; diff --git a/components/transactions/Pagination/Pagination.type.ts b/components/transactions/Pagination/Pagination.type.ts new file mode 100644 index 0000000..102cdc2 --- /dev/null +++ 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 new file mode 100644 index 0000000..ec18367 --- /dev/null +++ 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 ( +
    + {page > 0 && totalPage > 1 ? ( + <> + + + + + + + + ) : ( + <> + + + + )} +
    {`Page ${ + page + 1 + } of ${totalPage}`}
    + + {page + 1 < totalPage && totalPage > 1 ? ( + <> + + + + + + + + ) : ( + <> + + + + )} +
    + ); +} + +export default Pagination; diff --git a/components/transactions/Result/Result.type.ts b/components/transactions/Result/Result.type.ts index 5257e67..fca9679 100644 --- a/components/transactions/Result/Result.type.ts +++ b/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; diff --git a/components/transactions/Result/index.tsx b/components/transactions/Result/index.tsx index 795933d..f12a997 100644 --- a/components/transactions/Result/index.tsx +++ b/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 (
    -
    +

    @@ -17,19 +18,30 @@ function Result(props: PropsType) { {`Found ${total} swaps`}

    - +
    + {/*
    + + + Refresh in {second > 9 ? second : `0${second}`} seconds + +
    */} + +
    - +
    ); diff --git a/pages/index.tsx b/pages/index.tsx index 6fa67e9..ed72175 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -9,6 +9,7 @@ import Summary from 'components/home/Summary'; import Table from 'components/common/Table'; import Error from 'components/common/Error'; import RefreshButton from 'components/common/RefreshButton'; +import Link from 'next/link'; interface PropsType { swaps: SwapType[]; @@ -85,6 +86,9 @@ function Home(props: PropsType) { +
    + See All Transactions +
    ); diff --git a/pages/transactions.tsx b/pages/transactions.tsx index 981df77..9ecc6fd 100644 --- a/pages/transactions.tsx +++ b/pages/transactions.tsx @@ -4,9 +4,9 @@ import useSWR from 'swr'; import Layout from 'components/common/Layout'; import Result from 'components/transactions/Result'; import NotFound from 'components/search/NotFound'; -import TableLoading from 'components/common/Table/TableLoading'; import Error from 'components/common/Error'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; +import Loading from 'components/transactions/Loading'; const FILTER_ITEMS = [ { @@ -15,7 +15,7 @@ const FILTER_ITEMS = [ }, { name: 'success', - title: 'Complete', + title: 'Success', }, { name: 'running', @@ -28,11 +28,26 @@ const FILTER_ITEMS = [ ]; function Transactions() { const [status, setStatus] = useState(FILTER_ITEMS[0].name); + const [count, setCount] = useState(0); const router = useRouter(); const { query, page } = router.query; - const { data } = useSWR([page, status], getTransactions); + const { data } = useSWR([count], () => + getTransactions(page as unknown as number, status), + ); const { transactions, total } = data || {}; + useEffect(() => { + if (page === '0') setCount((prev) => prev + 1); + router.push({ + pathname: router.pathname, + query: { page: 0 }, + }); + }, [status]); + + useEffect(() => { + setCount((prev) => prev + 1); + }, [page]); + return data && data?.hasError ? ( ) : ( @@ -41,13 +56,12 @@ function Transactions() {
    {data && ( <> - {transactions && transactions.length ? ( + {transactions?.length ? ( @@ -56,7 +70,7 @@ function Transactions() { )} )} - {!data && } + {!data && }
    diff --git a/services/index.ts b/services/index.ts index 6cd22c7..ebda422 100644 --- a/services/index.ts +++ b/services/index.ts @@ -60,7 +60,10 @@ export const getTxDetails = async (requestId: string) => return { hasError: true, status: error }; }); -export const getTransactions = async (page?: number, status?: string) => { +export const getTransactions = async ( + page?: number | string, + status?: string, +) => { let statusParam = ''; if (status && status !== 'all') { statusParam = status;