@@ -21,6 +28,17 @@ function StatusCell(props: CellProps) {
{`${successStep}/${stepsSummary.length}`}
+
+ {swapper && (
+
+ 
+
+ )}
)}
diff --git a/components/detail/SwapSteps/SwapStepChainAmount.tsx b/components/detail/SwapSteps/SwapStepChainAmount.tsx
index 1a86ed0..596786a 100644
--- a/components/detail/SwapSteps/SwapStepChainAmount.tsx
+++ b/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
})`}
)}
diff --git a/components/detail/SwapSteps/SwapStepItem.tsx b/components/detail/SwapSteps/SwapStepItem.tsx
index 99a3c21..6b36e44 100644
--- a/components/detail/SwapSteps/SwapStepItem.tsx
+++ b/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
(false);
const borderColor = BorderColor[status];
@@ -44,7 +44,7 @@ function SwapStepItem(props: SwapStepItemProps) {
-
+
@@ -56,7 +56,7 @@ function SwapStepItem(props: SwapStepItemProps) {
{column.title === 'Output Amount' &&
- (isNaN(to?.realAmount) ? (
+ (isNaN(resultToken?.realAmount) ? (
{`Est. ~${to.expectedAmount} ${to?.symbol}`}
) : (
<>
-
{`${to.realAmount} ${to?.symbol}`}
+
+ {`${resultToken.realAmount} ${resultToken?.symbol}`}
+
{`(Est. ~${to.expectedAmount} ${to?.symbol})`}
))}
diff --git a/components/detail/SwapSteps/SwapSteps.type.ts b/components/detail/SwapSteps/SwapSteps.type.ts
index 9afdf3b..b1d552f 100644
--- a/components/detail/SwapSteps/SwapSteps.type.ts
+++ b/components/detail/SwapSteps/SwapSteps.type.ts
@@ -12,6 +12,7 @@ export interface SwapStepItemProps {
export interface SwapStepChainLogoProps {
token: AssetType;
+ refundedToken?: AssetType;
firstStep?: boolean;
}
diff --git a/components/home/ChartBox/Chart.tsx b/components/home/ChartBox/Chart.tsx
index 8ccfee9..cc68c7c 100644
--- a/components/home/ChartBox/Chart.tsx
+++ b/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 */}
{
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) => (
- {tooltipData.nearestDatum.datum.count}
+ {label &&
{label}
}
+ {AmountConverter(tooltipData.nearestDatum.datum.count)}