diff --git a/components/common/Button/LinkButton.tsx b/components/common/Button/LinkButton.tsx index e3b70b7..efcb29a 100644 --- a/components/common/Button/LinkButton.tsx +++ b/components/common/Button/LinkButton.tsx @@ -24,7 +24,7 @@ export function LinkButton(props: PropsWithChildren) { return ( diff --git a/components/common/Button/index.tsx b/components/common/Button/index.tsx index dbbf495..738afc9 100644 --- a/components/common/Button/index.tsx +++ b/components/common/Button/index.tsx @@ -25,7 +25,7 @@ export function Button(props: PropsWithChildren) { return ( diff --git a/components/common/SearchBox/index.tsx b/components/common/SearchBox/index.tsx index 7ab42fa..f257e64 100644 --- a/components/common/SearchBox/index.tsx +++ b/components/common/SearchBox/index.tsx @@ -2,11 +2,11 @@ import SearchInput from './SearchInput'; function SearchBox() { return ( -
-

+
+

Rango Swaps Explorer

-

+

Track all transactions on Rango Exchange

diff --git a/components/common/Table/TableBody.tsx b/components/common/Table/TableBody.tsx index f4ebeda..814e7f1 100644 --- a/components/common/Table/TableBody.tsx +++ b/components/common/Table/TableBody.tsx @@ -3,12 +3,14 @@ import { TableBodyProps } from './Table.type'; import dayjs from 'dayjs'; import utc from 'dayjs/plugin/utc'; import { columns } from './Table.helper'; +import isMobile from 'is-mobile'; +import Link from 'next/link'; dayjs.extend(utc); function TableBody(props: TableBodyProps) { const { data } = props; - + const IsMobile = isMobile(); return (
{data.map((item) => { @@ -16,13 +18,20 @@ function TableBody(props: TableBodyProps) { return (
+ className="w-full flex flex-col p-15 mt-15 md:mt-0 md:p-0 rounded-micro md:-rounded-none md:grid md:grid-cols-11 bg-surfacesBackground md:bg-transparent md:hover:bg-hoverBackground md:even:bg-surfacesBackground "> {columns.map((col) => { const CellComponent = col.component; return CellComponent ? ( ) : null; })} + {IsMobile && ( + + Detail + + )}
); })} diff --git a/components/common/Table/cells/AmountCell.tsx b/components/common/Table/cells/AmountCell.tsx index 1ae6bfd..43caeff 100644 --- a/components/common/Table/cells/AmountCell.tsx +++ b/components/common/Table/cells/AmountCell.tsx @@ -1,9 +1,10 @@ import { GassIcon } from 'components/icons'; import { CellProps } from '../Table.type'; import { getPercentageChange } from 'utils/amountConverter'; +import isMobile from 'is-mobile'; function AmountCell(props: CellProps) { - const { swapItem } = props; + const { swapItem, column } = props; const { stepsSummary } = swapItem; const fromToken = stepsSummary.length ? stepsSummary[0]?.fromToken : null; const toToken = stepsSummary.length @@ -24,18 +25,23 @@ function AmountCell(props: CellProps) { return acc; }, 0); + const IsMobile = isMobile(); + return ( -
-
+
+ {IsMobile && ( +
{column.title}
+ )} +
{usdToAmount && `~$${usdToAmount.toFixed(2)}`} {changePercentage ? `(${changePercentage}%)` : ''}
-
+
- Fee - {`$${ + Fee + {`$${ gasFee ? gasFee.toFixed(2) : '--' }`}
diff --git a/components/common/Table/cells/RequestIDCell.tsx b/components/common/Table/cells/RequestIDCell.tsx index ee3b359..8ec8caf 100644 --- a/components/common/Table/cells/RequestIDCell.tsx +++ b/components/common/Table/cells/RequestIDCell.tsx @@ -3,24 +3,29 @@ import dayjs from 'dayjs'; import utc from 'dayjs/plugin/utc'; import { CellProps } from '../Table.type'; import ButtonCopyIcon from 'components/common/ButtonCopyIcon'; +import isMobile from 'is-mobile'; dayjs.extend(utc); function RequestIDCell(props: CellProps) { - const { swapItem } = props; + const { swapItem, column } = props; const { requestId, transactionTime } = swapItem; const router = useRouter(); + const IsMobile = isMobile(); const handleSwapDetails = (id: string) => { router.push(`/swap/${id}`); }; return ( -
-
+
+ {IsMobile && ( +
{column.title}
+ )} +
-
+
{dayjs .utc(transactionTime) .local() diff --git a/components/common/Table/cells/StatusCell.tsx b/components/common/Table/cells/StatusCell.tsx index b3237c6..c952536 100644 --- a/components/common/Table/cells/StatusCell.tsx +++ b/components/common/Table/cells/StatusCell.tsx @@ -1,23 +1,29 @@ import { StepsIcon } from 'components/icons'; import { CellProps } from '../Table.type'; import IconStatus from 'components/common/IconStatus'; +import isMobile from 'is-mobile'; function StatusCell(props: CellProps) { - const { swapItem } = props; + const { swapItem, column } = props; const { status, stepsSummary } = swapItem; const successStep = stepsSummary.filter( (item) => item.status === 'success', ).length; + const IsMobile = isMobile(); + return ( -
+
+ {IsMobile && ( +
{column.title}
+ )}
{stepsSummary?.length && ( -
+
- {`${successStep}/${stepsSummary.length}`} + {`${successStep}/${stepsSummary.length}`}
)}
diff --git a/components/common/Table/cells/TokenCell.tsx b/components/common/Table/cells/TokenCell.tsx index c22baa2..a222a1b 100644 --- a/components/common/Table/cells/TokenCell.tsx +++ b/components/common/Table/cells/TokenCell.tsx @@ -1,4 +1,5 @@ /* eslint-disable @next/next/no-img-element */ +import isMobile from 'is-mobile'; import { CellProps } from '../Table.type'; function TokenCell(props: CellProps) { @@ -16,43 +17,60 @@ function TokenCell(props: CellProps) { const amount = token?.realAmount ? token.realAmount : token?.expectedAmount; const { blockchain, blockchainLogo, logo, name, symbol } = token || {}; + const IsMobile = isMobile(); return ( -
-
- {name - {blockchain} -
-
-
- - {`${column.tokenType === 'destination' ? '~' : ''}${parseFloat( - Number(amount).toFixed(3), - )}`} - - - {symbol || name} - + <> + {IsMobile && + (column.tokenType === 'source' ? ( +
+ ) : ( +
+ ))} +
+
+ {name + {blockchain} +
+
+
+ + {`${column.tokenType === 'destination' ? '~' : ''}${parseFloat( + Number(amount).toFixed(3), + )}`} + + + {symbol || name} + +
+
+ {blockchain} +
-
{blockchain}
-
+ ); } diff --git a/components/common/Table/index.tsx b/components/common/Table/index.tsx index 40782d2..7bdb1df 100644 --- a/components/common/Table/index.tsx +++ b/components/common/Table/index.tsx @@ -1,13 +1,14 @@ import { TableProps } from './Table.type'; import TableHead from './TableHead'; import TableBody from './TableBody'; +import isMobile from 'is-mobile'; function Table(props: TableProps) { const { data } = props; - + const IsMobile = isMobile(); return (
- + {!IsMobile && }
); diff --git a/components/common/media.tsx b/components/common/media.tsx index 8a3c784..539bc94 100644 --- a/components/common/media.tsx +++ b/components/common/media.tsx @@ -1,7 +1,7 @@ import { createMedia } from '@artsy/fresnel'; const ExampleAppMedia = createMedia({ - breakpoints: { xs: 0, sm: 640, md: 768, lg: 1024, xl: 1280 }, + breakpoints: { xs: 0, sm: 640, md: 768, lg: 1024, xl: 1180 }, }); export const mediaStyles = ExampleAppMedia.createMediaStyle(); diff --git a/components/detail/SwapDetailSummary/SwapDetail.helper.ts b/components/detail/SwapDetailSummary/SwapDetail.helper.ts index dcfdc5f..4a108a7 100644 --- a/components/detail/SwapDetailSummary/SwapDetail.helper.ts +++ b/components/detail/SwapDetailSummary/SwapDetail.helper.ts @@ -2,8 +2,10 @@ import { ColumnType } from './SwapDetail.type'; import SwapDetailValue from './SwapDetailValue'; import SwapDetailAddress from './SwapDetailAddress'; import SwapDetailChain from './SwapDetailChain'; +import SwapDetailMobileToken from './SwapDetailMobileToken'; +import SwapDetailMobileValue from './SwapDetailMobileValue'; -export const columns: ColumnType[] = [ +export const DesktopColumns: ColumnType[] = [ { id: 1, title: 'Swap Status', @@ -50,3 +52,31 @@ export const columns: ColumnType[] = [ component: SwapDetailValue, }, ]; + +export const mobileColumns: ColumnType[] = [ + { + id: 1, + title: 'Swap Status', + component: SwapDetailMobileValue, + }, + { + id: 2, + title: 'input', + component: SwapDetailMobileToken, + }, + { + id: 3, + title: 'output', + component: SwapDetailMobileToken, + }, + { + id: 4, + title: 'Initiation Date And Time', + component: SwapDetailMobileValue, + }, + { + id: 5, + title: 'Duration', + component: SwapDetailMobileValue, + }, +]; diff --git a/components/detail/SwapDetailSummary/SwapDetailMobileToken.tsx b/components/detail/SwapDetailSummary/SwapDetailMobileToken.tsx new file mode 100644 index 0000000..4eacb65 --- /dev/null +++ b/components/detail/SwapDetailSummary/SwapDetailMobileToken.tsx @@ -0,0 +1,93 @@ +/* eslint-disable @next/next/no-img-element */ +import ButtonCopyIcon from 'components/common/ButtonCopyIcon'; +import { SwapDetailItem } from './SwapDetail.type'; + +function SwapDetailMobileToken(props: SwapDetailItem) { + const { details, column } = props; + const { steps, sourceWallet, destinationWallet } = details; + + const from = steps?.length ? steps[0].from : null; + const to = steps?.length ? steps[steps.length - 1].to : null; + const token = column.title === 'input' ? from : to; + const { + blockchain, + symbol, + blockchainLogo, + logo, + name, + realAmount, + expectedAmount, + } = token || {}; + + const wallet = column.title === 'input' ? sourceWallet : destinationWallet; + + const handleClick = () => { + if (wallet?.explorer) window.open(wallet.explorer, '_blank'); + }; + + return ( +
+
+
+ {column.title === 'input' ? 'Input Amount' : 'Output Amount'} +
+ {column.title === 'input' && ( +
{`${realAmount} ${symbol}`}
+ )} + + {column.title === 'output' && ( + <> + {isNaN(Number(realAmount)) ? ( +
{`Est. ~${expectedAmount} ${symbol}`}
+ ) : ( +
{`${realAmount} ${symbol}`}
+ )} + + )} +
+ +
+ +
+
+ {column.title === 'input' ? 'Source Address' : 'Destination Address '} +
+
+ + +
+
+ +
+ +
+
+ {column.title === 'input' ? 'Source Token' : 'Destination Token '} +
+ +
+
+ {name + {blockchain} +
+
+ {symbol || name} +
+
{blockchain}
+
+
+
+ ); +} + +export default SwapDetailMobileToken; diff --git a/components/detail/SwapDetailSummary/SwapDetailMobileValue.tsx b/components/detail/SwapDetailSummary/SwapDetailMobileValue.tsx new file mode 100644 index 0000000..8458dd3 --- /dev/null +++ b/components/detail/SwapDetailSummary/SwapDetailMobileValue.tsx @@ -0,0 +1,59 @@ +import { SecondsTohms } from 'utils/secondsTohms'; +import { SwapDetailItem } from './SwapDetail.type'; +import dayjs from 'dayjs'; +import utc from 'dayjs/plugin/utc'; +import IconStatus from 'components/common/IconStatus'; +import { StepsIcon } from 'components/icons'; + +dayjs.extend(utc); + +function SwapDetailMobileValue(props: SwapDetailItem) { + const { details, column } = props; + const { estimatedTimeInSeconds, status, steps, creationDate } = details; + const successStep = steps.filter((item) => item.status === 'success').length; + + return ( + <> +
+
{column.title}
+ {column.title === 'Swap Status' && ( +
+
+ +
+ | + {steps?.length && ( +
+ + {`${successStep}/${steps.length}`} +
+ )} +
+ )} + {column.title === 'Initiation Date And Time' && creationDate && ( +
+ {dayjs + .utc(creationDate) + .local() + .format('MMMM DD, YYYY | HH:mm:ss') + .toString()} +
+ )} + {column.title === 'Duration' && ( +
+ {`Est. ~${ + estimatedTimeInSeconds + ? SecondsTohms(estimatedTimeInSeconds) + : '--' + }`} +
+ )} +
+ {column.title === 'Initiation Date And Time' && ( +
+ )} + + ); +} + +export default SwapDetailMobileValue; diff --git a/components/detail/SwapDetailSummary/index.tsx b/components/detail/SwapDetailSummary/index.tsx index d55d1b1..0a9569d 100644 --- a/components/detail/SwapDetailSummary/index.tsx +++ b/components/detail/SwapDetailSummary/index.tsx @@ -1,45 +1,78 @@ import React from 'react'; -import { columns } from './SwapDetail.helper'; +import { DesktopColumns, mobileColumns } from './SwapDetail.helper'; import { PropsType } from './SwapDetail.type'; import ButtonCopyIcon from 'components/common/ButtonCopyIcon'; +import isMobile from 'is-mobile'; function SwapDetailSummary(props: PropsType) { const { details, id } = props; const { from, to } = details; + const IsMobile = isMobile(); + + const columns = IsMobile ? mobileColumns : DesktopColumns; + return ( -
-

Swap Details

-

+

+

+ Swap Details +

+

{`Swap from ${from.symbol} (on ${from.blockchain}) to ${to.symbol} (on ${to.blockchain})`}

-

- +

+ Request ID : - {id} - +

+ + {IsMobile ? `${id.slice(0, 20)}...` : id} + + +

-
- {columns.map((col, index) => { - const DetailValueComponent = col.component; - const { title, id } = col; - return ( - <> -
-
- {`${title} : `} + {IsMobile && ( + <> +
+
+ {columns.map((col) => { + const DetailValueComponent = col.component; + return ( + DetailValueComponent && ( + + ) + ); + })} +
+ + )} + + {!IsMobile && ( +
+ {columns.map((col, index) => { + const DetailValueComponent = col.component; + const { title, id } = col; + return ( + <> +
+
+ {`${title} : `} +
+ {DetailValueComponent && ( + + )}
- {DetailValueComponent && ( - + {index !== columns.length - 1 && ( +
)} -
- {index !== columns.length - 1 && ( -
- )} - - ); - })} -
+ + ); + })} +
+ )}
); } diff --git a/components/detail/SwapSteps/SwapStepAddress.tsx b/components/detail/SwapSteps/SwapStepAddress.tsx index 4de06fa..d4b72a8 100644 --- a/components/detail/SwapSteps/SwapStepAddress.tsx +++ b/components/detail/SwapSteps/SwapStepAddress.tsx @@ -15,11 +15,11 @@ function SwapStepAddress(props: SwapStepItemValueProps) { return ( address && ( -
-
diff --git a/components/detail/SwapSteps/SwapStepChainLogo.tsx b/components/detail/SwapSteps/SwapStepChainLogo.tsx index 4ab955d..e3ce07e 100644 --- a/components/detail/SwapSteps/SwapStepChainLogo.tsx +++ b/components/detail/SwapSteps/SwapStepChainLogo.tsx @@ -9,18 +9,14 @@ function SwapStepChainLogo(props: SwapStepChainLogoProps) { return (
{symbol {blockchain}
); diff --git a/components/detail/SwapSteps/SwapStepItem.tsx b/components/detail/SwapSteps/SwapStepItem.tsx index b1c663f..a64d4cc 100644 --- a/components/detail/SwapSteps/SwapStepItem.tsx +++ b/components/detail/SwapSteps/SwapStepItem.tsx @@ -7,42 +7,65 @@ import { ChevronDownIcon, ChevronUpIcon, NextIcon } from 'components/icons'; import SwapStepChainLogo from './SwapStepChainLogo'; import SwapStepChainAmount from './SwapStepChainAmount'; import SwapStepSwapper from './SwapStepSwapper'; +import isMobile from 'is-mobile'; function SwapStepItem(props: SwapStepItemProps) { const { step, firstStep, lastStep } = props; const { from, to, status, explorerUrls } = step; const [isOpen, setIsOpen] = useState(false); const borderColor = BorderColor[status]; + const IsMobile = isMobile(); return ( <>
setIsOpen(!isOpen)} - className={`p-25 w-full cursor-pointer rounded-normal border-solid ${borderColor} border`}> + className={`py-15 px-10 md:p-25 w-full cursor-pointer rounded-soft md:rounded-normal border-solid ${borderColor} border`}>
- + {!IsMobile && ( + + )}
-
-
- - - - - - - - - -
+
+ {IsMobile ? ( +
+
+ + + + +
+
+
+ + + + +
+
+ ) : ( +
+ + + + + + + + + +
+ )} {!lastStep && (
+ className={`bg-transaction ml-15 md:ml-25 border-l border-dotted ${borderColor} w-fll h-[20px]`}>
)} ); diff --git a/components/detail/SwapSteps/SwapStepItemExpanded.tsx b/components/detail/SwapSteps/SwapStepItemExpanded.tsx index 687c291..5e19c11 100644 --- a/components/detail/SwapSteps/SwapStepItemExpanded.tsx +++ b/components/detail/SwapSteps/SwapStepItemExpanded.tsx @@ -14,23 +14,25 @@ function SwapStepItemExpanded(props: SwapStepItemExpandedProps) { return (
-
+
{`Swap from ${fromSymbol || fromName} (on ${fromBlockchain}) to ${ toSymbol || toName } (on ${toBlockchain})`}
-
+
{columns.map((col, index) => { const StepValueComponent = col.component; const { title, id } = col; return ( <> -
-
+
+
{`${title} : `}
{StepValueComponent && ( @@ -42,7 +44,7 @@ function SwapStepItemExpanded(props: SwapStepItemExpandedProps) { )}
{index !== columns.length - 1 && ( -
+
)} ); diff --git a/components/detail/SwapSteps/SwapStepSwapper.tsx b/components/detail/SwapSteps/SwapStepSwapper.tsx index 6d8b89e..544bee3 100644 --- a/components/detail/SwapSteps/SwapStepSwapper.tsx +++ b/components/detail/SwapSteps/SwapStepSwapper.tsx @@ -27,17 +27,17 @@ function SwapStepSwapper(props: SwapStepItemProps) { <> {index !== 0 && (
+ className={`bg-transaction ml-[0.6875rem] md:ml-[0.875rem] border-l border-solid ${borderColor} w-fll h-[0.3rem] md:h-[0.5rem]`}>
)}
{internalSwapper?.swapperTitle} -
+
{internalSwapper?.swapperType === 'DEX' ? `Swap on ${internalFrom?.blockchain} via ${internalSwapper?.swapperTitle}` : `Swap from ${internalFrom?.blockchain} to ${internalTo?.blockchain} via ${internalSwapper?.swapperTitle}`} diff --git a/components/detail/SwapSteps/SwapStepValue.tsx b/components/detail/SwapSteps/SwapStepValue.tsx index fdb0108..c7e655e 100644 --- a/components/detail/SwapSteps/SwapStepValue.tsx +++ b/components/detail/SwapSteps/SwapStepValue.tsx @@ -16,7 +16,7 @@ function SwapStepValue(props: SwapStepItemValueProps) { } = step; return ( -
+
{column.title === 'Output Amount' && (isNaN(to?.realAmount) ? ( {`Est. ~${to.expectedAmount} ${to?.symbol}`} diff --git a/components/detail/SwapSteps/SwapSteps.type.ts b/components/detail/SwapSteps/SwapSteps.type.ts index 5db3e6a..c61b454 100644 --- a/components/detail/SwapSteps/SwapSteps.type.ts +++ b/components/detail/SwapSteps/SwapSteps.type.ts @@ -25,6 +25,12 @@ export interface TransactionURLProps { explorerUrls: ExplorerUrlsType[]; } +export interface TransactionURLItemProps { + url: string; + description: string; + transactionStatus: SwapStatus; +} + export interface ColumnType { id: number; title: string; diff --git a/components/detail/SwapSteps/TransactionURL.tsx b/components/detail/SwapSteps/TransactionURL.tsx index 2f7449c..0cb3b5f 100644 --- a/components/detail/SwapSteps/TransactionURL.tsx +++ b/components/detail/SwapSteps/TransactionURL.tsx @@ -4,10 +4,12 @@ import { TransactionURLProps } from './SwapSteps.type'; import { SwapStatus } from 'types'; import ButtonCopyIcon from 'components/common/ButtonCopyIcon'; import { LinkIcon } from 'components/icons'; +import isMobile from 'is-mobile'; +import TransactionURLItem from './TransactionURLItem'; function TransactionURL(props: TransactionURLProps) { const { explorerUrls, status } = props; - + const IsMobile = isMobile(); const handleLink = (value: string) => { if (value) window.open(value, '_blank'); }; @@ -19,22 +21,37 @@ function TransactionURL(props: TransactionURLProps) { const transactionStatus: SwapStatus = index === explorerUrls.length - 1 ? status : 'success'; return ( -
-
- - - {description || 'Swap transaction'} - -
-
- - -
-
+ <> + {IsMobile ? ( + + ) : ( +
+
+ + + {description || 'Swap transaction'} + +
+
+ + +
+
+ )} + ); })} diff --git a/components/detail/SwapSteps/TransactionURLItem.tsx b/components/detail/SwapSteps/TransactionURLItem.tsx new file mode 100644 index 0000000..2716340 --- /dev/null +++ b/components/detail/SwapSteps/TransactionURLItem.tsx @@ -0,0 +1,96 @@ +import React, { useEffect, useRef, useState } from 'react'; +import IconStatus from 'components/common/IconStatus'; +import { TransactionURLItemProps } from './SwapSteps.type'; +import { CopyIcon, InfoIcon, LinkIcon, MoreIcon } from 'components/icons'; +import { CopyText } from 'utils/copyText'; + +function TransactionURLItem(props: TransactionURLItemProps) { + const { description, url, transactionStatus } = props; + const [open, setOpen] = useState(false); + const ref = useRef(null); + + const handleCopy = ( + e: React.MouseEvent, + text: string, + ) => { + e.stopPropagation(); + if (text) { + CopyText(text); + setOpen(false); + } + }; + + const handleLink = ( + e: React.MouseEvent, + value: string, + ) => { + if (e) e.stopPropagation(); + setOpen(false); + if (value) window.open(value, '_blank'); + }; + + const handleOpen = (e: React.MouseEvent) => { + if (e) e.stopPropagation(); + setOpen(open ? false : true); + }; + + useEffect(() => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + function handleClickOutside(event: any) { + if (ref?.current && !ref.current.contains(event.target)) { + setOpen(false); + } + } + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [ref]); + + return ( +
+
+ + + {description || 'Swap transaction'} + +
+
+ + {open && ( +
+ + + +
+ )} +
+
+ ); +} + +export default TransactionURLItem; diff --git a/components/detail/SwapSteps/index.tsx b/components/detail/SwapSteps/index.tsx index b8e017e..744f6c3 100644 --- a/components/detail/SwapSteps/index.tsx +++ b/components/detail/SwapSteps/index.tsx @@ -6,9 +6,11 @@ import { StepType } from 'types'; function SwapSteps(props: PropsType) { const { steps } = props; return ( -
-

Swap Steps

-
+
+

+ Swap Steps +

+
{steps.map((step: StepType, key: number) => ( { + const IsMobile = isMobile(); const { data, days } = props; const currentFilter = daysFilter.find((item) => item.days === days); const currentPeriod = currentFilter?.hasPrevious @@ -31,7 +33,7 @@ export const Chart = (props: ChartProps) => {
{ )} orientation="bottom" hideTicks - numTicks={7} + numTicks={IsMobile ? 3 : 7} tickFormat={(d) => getDayOfMonth(d)} /> (7); return ( -
-
+
+
{daysFilter.map((filterItem) => { return ( - )} -
{`Page ${ +
{`Page ${ page + 1 } of ${totalPage}`}
@@ -45,21 +45,21 @@ function Pagination(props: PropsType) { <> + 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"> + 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"> ) : ( <> - - diff --git a/components/search/Result/index.tsx b/components/search/Result/index.tsx index 4f6621f..4ba19c2 100644 --- a/components/search/Result/index.tsx +++ b/components/search/Result/index.tsx @@ -5,20 +5,20 @@ import Pagination from '../Pagination/idnex'; function Result(props: PropsType) { const { data, query, total, page } = props; return ( -
+
-

+

Search Results

-

- {`Found ${total} Rango swaps for ${query}`} +

+ {`Found ${total} Rango swaps for this wallet address`}

-
+
-
+
diff --git a/pages/index.tsx b/pages/index.tsx index 0dc581d..77bd21b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -9,6 +9,7 @@ import SearchBox from 'components/common/SearchBox'; import Summary from 'components/home/Summary'; import Table from 'components/common/Table'; import { RefreshIcon } from 'components/icons'; +import isMobile from 'is-mobile'; interface PropsType { swaps: SwapType[]; @@ -17,6 +18,7 @@ interface PropsType { } function Home(props: PropsType) { + const IsMobile = isMobile(); const { swaps, summary, status } = props; const [lastSwaps, setLastSwaps] = useState([]); const [second, setSecond] = useState(30); @@ -41,32 +43,35 @@ function Home(props: PropsType) { ) : (
-
+
-
-
+
+
-
+
-
-
+
+
-
-
-

+
+
+

Recent Swaps

-

+

Latest 25 swaps on Rango

- - + + Refresh in {second} seconds
diff --git a/pages/search.tsx b/pages/search.tsx index b341bc2..05f37f4 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -27,7 +27,7 @@ function Search(props: PropsType) {
-
+
{data && ( <> {transactions && transactions.length ? ( diff --git a/pages/swap/[id]/index.tsx b/pages/swap/[id]/index.tsx index c6af954..59c2e37 100644 --- a/pages/swap/[id]/index.tsx +++ b/pages/swap/[id]/index.tsx @@ -28,14 +28,16 @@ function SwapDetails(props: PropsType) {
-
-
-
- +
+
+
+ Home - Swap Details + + Swap Details +
diff --git a/svgs/resources/info.svg b/svgs/resources/info.svg new file mode 100644 index 0000000..0e722ba --- /dev/null +++ b/svgs/resources/info.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/svgs/resources/more.svg b/svgs/resources/more.svg new file mode 100644 index 0000000..dffa06e --- /dev/null +++ b/svgs/resources/more.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/tailwind.config.js b/tailwind.config.js index 5f50fe5..64b2b6a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -16,7 +16,9 @@ module.exports = { }, container: { screens: { - sm: '360px', + sm: '640px', + md: '768px', + lg: '1024px', xl: '1180px', }, }, @@ -25,6 +27,7 @@ module.exports = { micro: '0.312rem', soft: '0.625rem', normal: '0.937rem', + large: '1.5625rem', full: '9999px', }, extend: { @@ -48,6 +51,7 @@ module.exports = { 25: '1.56rem', 30: '1.875rem', 35: '2.1875rem', + 40: '2.5rem', 50: '3.125rem', }, margin: { @@ -56,12 +60,18 @@ module.exports = { 15: '0.937rem', 20: '1.25rem', 25: '1.56rem', + 30: '1.875rem', + 35: '2.1875rem', + 40: '2.5rem', 50: '3.125rem', 60: '3.75rem', }, lineHeight: { 7.5: '1.875rem', + 12: '0.75rem', 13: '3.2rem', + 14: '0.875rem', + 16: '1rem', }, backgroundImage: { 'body-mask': "url('/img/backgrounds/mask.svg')", @@ -72,6 +82,7 @@ module.exports = { 'cover-2': "url('/img/videos/video2-cover.jpg')", }, fontSize: { + 10: '0.625rem', 11: '0.6875rem', 12: '0.75rem', 14: '0.875rem', @@ -93,6 +104,7 @@ module.exports = { surfacesBackground: '#F9F9F9', surfacesTooltip: '#F6F6F6', hoverBackground: '#E9F3FF', + hoverBackgroundIcon: '#E6E6E6', hoverIcon: '#2284ED', error: '#F40000', success: '#06C270',