chore: add design updates

components/common/Footer/index.tsx

@@ -72,7 +72,7 @@ function Footer() {
       </div>
 
       <span className="w-full bg-neutral-500 p-2.5 text-center text-10 md:text-16 text-baseForeground md:text-base md:leading-6">
-        Copyright © 2023 Rango Exchange. All rights reserved.
+        Copyright © 2024 Rango Exchange. All rights reserved.
       </span>
     </footer>
   );

components/common/SearchBox/SearchInput.tsx

@@ -26,7 +26,7 @@ function SearchInput() {
         <SearchIcon className="mr-5 text-neutral-400" />
         <input
           className="w-full text-neutral-200 bg-neutral-500 focus:outline-0 overflow-hidden text-14 md:text-16"
-          placeholder="Search by Request ID / Wallet..."
+          placeholder="Search by Request ID, Wallet or Tx Hash"
           onChange={(e) => setQuery(e.target.value)}
         />
       </div>

components/common/Table/Table.helper.ts

@@ -12,13 +12,13 @@ export const columns: ColumnType[] = [
   },
   {
     id: 2,
-    title: 'Source Transaction',
+    title: 'Source Token',
     tokenType: 'source',
     component: TokenCell,
   },
   {
     id: 3,
-    title: 'Destination Transaction',
+    title: 'Destination Token',
     tokenType: 'destination',
     component: TokenCell,
   },

components/common/Table/cells/StatusCell.tsx

@@ -1,6 +1,7 @@
 import { StepsIcon } from 'components/icons';
 import { CellProps } from '../Table.type';
 import IconStatus from 'components/common/IconStatus';
+import Tooltip from 'components/common/Tooltip';
 
 function StatusCell(props: CellProps) {
   const { swapItem, column } = props;
@@ -9,6 +10,12 @@ function StatusCell(props: CellProps) {
     (item) => item.status === 'success',
   ).length;
 
+  const currentStep =
+    stepsSummary.find((step) => step.status === 'running') ||
+    stepsSummary[stepsSummary.length - 1];
+
+  const swapper = currentStep?.swapper;
+
   return (
     <div className="flex flex-col col-span-2 justify-center md:p-15 lg:p-20">
       <div className="md:hidden text-12 mt-25 text-primary-500">
@@ -21,6 +28,17 @@ function StatusCell(props: CellProps) {
         <div className="flex items-center md:mt-5">
           <StepsIcon className="text-neutral-400 mr-5" />
           <span className="text-12 md:text-14 text-neutral-400">{`${successStep}/${stepsSummary.length}`}</span>
+          &nbsp;&nbsp;
+          {swapper && (
+            <Tooltip label={swapper?.swapperTitle}>
+              <img
+                src={swapper?.swapperLogo}
+                alt={swapper?.swapperTitle}
+                width={20}
+                height={20}
+              />
+            </Tooltip>
+          )}
         </div>
       )}
     </div>

components/detail/SwapSteps/SwapStepChainAmount.tsx

@@ -3,19 +3,22 @@ import React from 'react';
 import { SwapStepChainLogoProps } from './SwapSteps.type';
 
 function SwapStepChainAmount(props: SwapStepChainLogoProps) {
-  const { token, firstStep } = props;
-  const { symbol, name, realAmount, expectedAmount } = token;
+  const { token, refundedToken, firstStep } = props;
+  const resultToken = refundedToken ? refundedToken : token;
+
   return (
     <>
-      {firstStep && `${realAmount.toFixed(2)} ${symbol}`}
+      {firstStep && `${token.realAmount.toFixed(2)} ${token.symbol}`}
       {!firstStep && (
         <>
-          {isNaN(realAmount)
-            ? `Est. ~${expectedAmount.toFixed(2)} ${symbol || name}`
-            : `${realAmount.toFixed(
-                2,
-              )} ${symbol}  (Est. ~${expectedAmount.toFixed(2)} ${
-                symbol || name
+          {isNaN(token.realAmount)
+            ? `Est. ~${token.expectedAmount.toFixed(2)} ${
+                token.symbol || token.name
+              }`
+            : `${resultToken.realAmount.toFixed(2)} ${
+                resultToken.symbol
+              }  (Est. ~${token.expectedAmount.toFixed(2)} ${
+                token.symbol || token.name
               })`}
         </>
       )}

components/detail/SwapSteps/SwapStepItem.tsx

@@ -10,7 +10,7 @@ import SwapStepSwapper from './SwapStepSwapper';
 
 function SwapStepItem(props: SwapStepItemProps) {
   const { step, firstStep, lastStep } = props;
-  const { from, to, status, explorerUrls } = step;
+  const { from, to, status, explorerUrls, outputToken } = step;
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const borderColor = BorderColor[status];
 
@@ -44,7 +44,7 @@ function SwapStepItem(props: SwapStepItemProps) {
             <div className="flex items-center">
               <SwapStepChainLogo token={to} />
               <span className="text-12 ml-5 text-neutral-400">
-                <SwapStepChainAmount token={to} />
+                <SwapStepChainAmount token={to} refundedToken={outputToken} />
               </span>
             </div>
           </div>
@@ -56,7 +56,7 @@ function SwapStepItem(props: SwapStepItemProps) {
             <NextIcon className="mx-10 text-primary-500" />
             <SwapStepChainLogo token={to} />
             <span className="text-14 text-neutral-400">
-              <SwapStepChainAmount token={to} />
+              <SwapStepChainAmount token={to} refundedToken={outputToken} />
             </span>
           </div>
           <TransactionURL explorerUrls={explorerUrls} status={status} />

components/detail/SwapSteps/SwapStepValue.tsx

@@ -13,16 +13,21 @@ function SwapStepValue(props: SwapStepItemValueProps) {
     estimatedTimeInSeconds,
     executionTimeInSeconds,
     startTime,
+    outputToken,
   } = step;
 
+  const resultToken = outputToken ? outputToken : to;
+
   return (
     <div className="flex md:col-span-4 items-center md:p-16 text-14 md:text-16">
       {column.title === 'Output Amount' &&
-        (isNaN(to?.realAmount) ? (
+        (isNaN(resultToken?.realAmount) ? (
           <span className="text-neutral-400">{`Est. ~${to.expectedAmount} ${to?.symbol}`}</span>
         ) : (
           <>
-            <span className="text-primary-500 mr-5">{`${to.realAmount} ${to?.symbol}`}</span>
+            <span className="text-primary-500 mr-5">
+              {`${resultToken.realAmount} ${resultToken?.symbol}`}
+            </span>
             <span className="text-neutral-400">{`(Est. ~${to.expectedAmount} ${to?.symbol})`}</span>
           </>
         ))}

components/detail/SwapSteps/SwapSteps.type.ts

@@ -12,6 +12,7 @@ export interface SwapStepItemProps {
 
 export interface SwapStepChainLogoProps {
   token: AssetType;
+  refundedToken?: AssetType;
   firstStep?: boolean;
 }
 

components/home/ChartBox/Chart.tsx

@@ -1,4 +1,4 @@
-import { curveCardinal } from '@visx/curve';
+import { curveMonotoneX } from '@visx/curve';
 import {
   AnimatedAxis,
   AnimatedGrid,
@@ -13,10 +13,11 @@ import { ChartProps } from './Chart.type';
 import isMobile from 'is-mobile';
 
 import { LinearGradient } from '@visx/gradient';
+import { AmountConverter } from 'utils/amountConverter';
 
 const Chart = (props: ChartProps) => {
   const IsMobile = isMobile({ tablet: true });
-  const { data, days } = props;
+  const { data, days, label } = props;
   const currentFilter = daysFilter.find((item) => item.days === days);
   const currentPeriod = currentFilter?.hasPrevious
     ? data.slice(days * -1).map((item) => ({ ...item }))
@@ -70,7 +71,7 @@ const Chart = (props: ChartProps) => {
             data={data}
             xAccessor={(d) => d.date}
             yAccessor={(d) => d.count}
-            curve={curveCardinal}
+            curve={curveMonotoneX}
             strokeWidth={1}
             stroke="url(#area-gradient)"
             fill="url(#area-gradient)"
@@ -89,7 +90,7 @@ const Chart = (props: ChartProps) => {
         <>
           {/* previous chart only for week and month */}
           <AnimatedLineSeries
-            curve={curveCardinal}
+            curve={curveMonotoneX}
             dataKey={`Prev ${currentFilter ? currentFilter.name : ''}`}
             data={prevPeriod}
             stroke="#242D5B"
@@ -103,7 +104,7 @@ const Chart = (props: ChartProps) => {
             data={currentPeriod}
             xAccessor={(d) => d.date}
             yAccessor={(d) => d.count}
-            curve={curveCardinal}
+            curve={curveMonotoneX}
             strokeWidth={1}
             stroke="url(#area-gradient)"
             fill="url(#area-gradient)"
@@ -130,7 +131,8 @@ const Chart = (props: ChartProps) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         renderTooltip={({ tooltipData }: any) => (
           <div className="bg-tooltipBackground px-[8px] py-[4px] rounded-[8px] text-baseForeground text-12">
-            {tooltipData.nearestDatum.datum.count}
+            {label && <p className="text-10 text-neutral-200">{label}</p>}
+            {AmountConverter(tooltipData.nearestDatum.datum.count)}
           </div>
         )}
       />

components/home/ChartBox/Chart.type.ts

@@ -8,6 +8,7 @@ export interface PropsType {
 export interface ChartProps {
   data: DailyIntervalType[];
   days: number;
+  label: string;
 }
 
 export type ValidDaysFilter = 7 | 30 | 90;

components/home/ChartBox/index.tsx

@@ -57,7 +57,11 @@ function ChartBox(props: PropsType) {
         })}
       </div>
       <div className="w-[calc(100%+1.625rem)] md:w-[calc(100%+0.6rem)] h-[240px] md:h-[338px]">
-        <Chart days={currentDays} data={[...data]} />
+        <Chart
+          days={currentDays}
+          data={[...data]}
+          label="Number of Transactions"
+        />
       </div>
     </div>
   );

services/index.ts

@@ -4,7 +4,7 @@ import { API_URL, SEARCH_RESULT_OFFSET } from '../constant';
 
 export const getLastSwaps = async () =>
   await fetch(
-    `${API_URL}/tx/latest?count=20&apiKey=${process.env.NEXT_PUBLIC_API_KEY}`,
+    `${API_URL}/scanner/tx/latest?count=20&apiKey=${process.env.NEXT_PUBLIC_API_KEY}`,
   )
     .then(async (res) => await res.json())
     .then((data) => data?.transactions || data)
@@ -14,7 +14,9 @@ export const getLastSwaps = async () =>
     });
 
 export const getSummary = async () =>
-  await fetch(`${API_URL}/summary?apiKey=${process.env.NEXT_PUBLIC_API_KEY}`)
+  await fetch(
+    `${API_URL}/scanner/summary?apiKey=${process.env.NEXT_PUBLIC_API_KEY}`,
+  )
     .then(async (res) => await res.json())
     .then((data) => data)
     .catch((error) => {
@@ -24,7 +26,7 @@ export const getSummary = async () =>
 
 export const getSearchResult = async (query: string) =>
   await fetch(
-    `${API_URL}/tx/search?query=${query}&apiKey=${process.env.NEXT_PUBLIC_API_KEY}`,
+    `${API_URL}/scanner/tx/search?query=${query}&apiKey=${process.env.NEXT_PUBLIC_API_KEY}`,
   )
     .then(async (res) => await res.json())
     .then((data) => data?.searchResult || data)
@@ -35,7 +37,7 @@ export const getSearchResult = async (query: string) =>
 
 export const getWalletSwaps = async (address: string, page?: number) =>
   await fetch(
-    `${API_URL}/tx/wallet?walletAddress=${address}&offset=${SEARCH_RESULT_OFFSET}&page=${
+    `${API_URL}/scanner/tx/wallet?walletAddress=${address}&offset=${SEARCH_RESULT_OFFSET}&page=${
       page || 0
     }&apiKey=${process.env.NEXT_PUBLIC_API_KEY}`,
   )
@@ -47,7 +49,7 @@ export const getWalletSwaps = async (address: string, page?: number) =>
 
 export const getTxDetails = async (requestId: string) =>
   await fetch(
-    `${API_URL}/tx/detail?requestId=${requestId}&apiKey=${process.env.NEXT_PUBLIC_API_KEY}`,
+    `${API_URL}/scanner/tx/detail?requestId=${requestId}&apiKey=${process.env.NEXT_PUBLIC_API_KEY}`,
   )
     .then(async (res) => await res.json())
     .then((data) => data?.detailedTransaction || data)

tailwind.config.js

@@ -15,10 +15,10 @@ module.exports = {
       heading: ['Roboto'],
     },
     screens: {
-      'xs': '330px',
-      'sm': '640px',
-      'md': '1024px',
-      'lg': '1280px',
+      xs: '330px',
+      sm: '640px',
+      md: '1024px',
+      lg: '1280px',
     },
     container: {
       screens: {

types/transations.ts

@@ -25,6 +25,7 @@ export interface StepSummary {
   stepNumber: number;
   fromToken: RouteType;
   toToken: RouteType;
+  swapper?: SwapperType;
 }
 export interface SwapType {
   requestId: string;
@@ -84,6 +85,9 @@ export interface StepType {
   sourceWallet: WalletType;
   destinationWallet: WalletType;
   startTime: number;
+  failureType?: string;
+  failureReason?: string;
+  outputToken?: AssetType;
 }
 
 export interface DetailsType {