Skip to content

Commit 2456ddf

Browse files
arentantarentant
authored
Merge pull request #164 from TrainProtocol/summary-improvments
summary: USD mode swap, truncated-amount tooltips, mobile popover restyle
2 parents bf473fa + d68f026 commit 2456ddf

2 files changed

Lines changed: 87 additions & 21 deletions

File tree

‎apps/app/components/Modal/mobileTooltip.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ const MobileTooltip: FC<MobileTooltipProps> = ({ children, trigger }) => {
1919
<PopoverTrigger asChild>
2020
{trigger}
2121
</PopoverTrigger>
22-
<PopoverContent side="top" className="max-w-[300px] text-sm">
22+
<PopoverContent
23+
side="top"
24+
className="inline-flex w-fit max-w-xs items-center gap-1.5 rounded-xl bg-foreground px-3 py-1.5 text-xs text-background shadow-none ring-0 flex-row"
25+
>
2326
{children}
2427
</PopoverContent>
2528
</Popover>

‎apps/app/components/Swap/AtomicChat/AtomicContent/Summary/Summary.tsx‎

Lines changed: 83 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { ArrowDown } from "lucide-react";
66
import NumberFlow from "@number-flow/react";
77
import { resolveTokenLogoUrl } from "@/components/utils/resolveTokenLogoUrl";
88
import useWindowDimensions from "@/hooks/useWindowDimensions";
9+
import MobileTooltip from "@/components/Modal/mobileTooltip";
10+
import { useUsdModeStore } from "@/stores/usdModeStore";
911

1012

1113
type AtomicSummaryProps = {
@@ -17,18 +19,45 @@ type AtomicSummaryProps = {
1719
receiveAmount: string | undefined;
1820
}
1921

20-
const RECEIVE_MAX_FRACTION_DIGITS_MOBILE = 8;
21-
const RECEIVE_MAX_FRACTION_DIGITS_DESKTOP = 12;
22+
const TOKEN_MAX_FRACTION_DIGITS_MOBILE = 8;
23+
const TOKEN_MAX_FRACTION_DIGITS_DESKTOP = 12;
24+
25+
const TokenAmount: FC<{ amount: number; decimals: number; maxFractionDigits: number; symbol: string }> = ({ amount, decimals, maxFractionDigits, symbol }) => {
26+
const full = truncateDecimals(amount, decimals)
27+
const truncated = amount > 0 && isFinite(amount) && Number(amount.toFixed(maxFractionDigits)) !== amount
28+
29+
const node = (
30+
<span className="inline-flex items-center min-w-0 gap-1">
31+
<span className="truncate min-w-0">
32+
<NumberFlow value={amount} trend={0} format={{ maximumFractionDigits: maxFractionDigits }} />
33+
</span>
34+
{truncated && <span className="shrink-0">...</span>}
35+
<span className="shrink-0">{symbol}</span>
36+
</span>
37+
)
38+
if (!truncated) return node
39+
return (
40+
<MobileTooltip trigger={<span>{node}</span>}>
41+
{full} {symbol}
42+
</MobileTooltip>
43+
)
44+
}
45+
46+
const UsdAmount: FC<{ value: number | string | undefined }> = ({ value }) => (
47+
<NumberFlow value={Number(value) || 0} prefix="$" trend={0} />
48+
)
2249

2350
const Summary: FC<AtomicSummaryProps> = ({ sourceCurrency, destinationCurrency, source, destination, requestedAmount, receiveAmount, }) => {
2451

2552
const { isMobile } = useWindowDimensions()
26-
const receiveMaxFractionDigits = isMobile ? RECEIVE_MAX_FRACTION_DIGITS_MOBILE : RECEIVE_MAX_FRACTION_DIGITS_DESKTOP
53+
const maxFractionDigits = isMobile ? TOKEN_MAX_FRACTION_DIGITS_MOBILE : TOKEN_MAX_FRACTION_DIGITS_DESKTOP
54+
const isUsdMode = useUsdModeStore(s => s.isUsdMode)
2755

2856
const requestedAmountInUsd = (requestedAmount && sourceCurrency?.priceInUsd) ? (sourceCurrency.priceInUsd * Number(requestedAmount)).toFixed(2) : undefined
2957
const receiveAmountInUsd = (receiveAmount && destinationCurrency?.priceInUsd) ? (destinationCurrency.priceInUsd * Number(receiveAmount)).toFixed(2) : undefined
58+
59+
const requestedAmountNum = Number(requestedAmount)
3060
const receiveAmountNum = Number(receiveAmount)
31-
const isReceiveTruncated = receiveAmountNum > 0 && isFinite(receiveAmountNum) && Number(receiveAmountNum.toFixed(receiveMaxFractionDigits)) !== receiveAmountNum
3261

3362
return (
3463
<>
@@ -40,14 +69,34 @@ const Summary: FC<AtomicSummaryProps> = ({ sourceCurrency, destinationCurrency,
4069
token={sourceCurrency}
4170
/>
4271
<div className="flex flex-col col-start-6 col-span-5 items-end min-w-0">
43-
{
44-
requestedAmount &&
45-
<p className="text-primary-text text-xl leading-6 font-normal flex items-center justify-end min-w-0 w-full space-x-1">
46-
<span className="truncate min-w-0">{truncateDecimals(Number(requestedAmount), sourceCurrency.decimals)}</span>
47-
<span className="shrink-0">{sourceCurrency.symbol}</span>
48-
</p>
49-
}
50-
<p className="text-secondary-text text-sm leading-5 flex font-medium justify-end"><NumberFlow value={Number(requestedAmountInUsd) || 0} prefix="$" trend={0} /></p>
72+
{requestedAmount && (
73+
<>
74+
<p className="text-primary-text text-xl leading-6 h-6 font-normal flex items-center justify-end min-w-0 w-full">
75+
{isUsdMode ? (
76+
<UsdAmount value={requestedAmountInUsd} />
77+
) : (
78+
<TokenAmount
79+
amount={requestedAmountNum}
80+
decimals={sourceCurrency.decimals}
81+
maxFractionDigits={maxFractionDigits}
82+
symbol={sourceCurrency.symbol}
83+
/>
84+
)}
85+
</p>
86+
<p className="text-secondary-text text-sm leading-5 flex items-center font-medium justify-end gap-1">
87+
{isUsdMode ? (
88+
<TokenAmount
89+
amount={requestedAmountNum}
90+
decimals={sourceCurrency.decimals}
91+
maxFractionDigits={maxFractionDigits}
92+
symbol={sourceCurrency.symbol}
93+
/>
94+
) : (
95+
<UsdAmount value={requestedAmountInUsd} />
96+
)}
97+
</p>
98+
</>
99+
)}
51100
</div>
52101
</div>
53102
<div className="relative text-secondary-text">
@@ -62,15 +111,29 @@ const Summary: FC<AtomicSummaryProps> = ({ sourceCurrency, destinationCurrency,
62111
{
63112
receiveAmount && (
64113
<div className="flex flex-col items-end w-full col-start-6 col-span-5 min-w-0">
65-
<p className="text-primary-text text-xl leading-6 h-6 font-normal flex items-center justify-end min-w-0 w-full space-x-1">
66-
<span className="flex items-center min-w-0">
67-
<NumberFlow value={receiveAmountNum} trend={0} format={{ maximumFractionDigits: receiveMaxFractionDigits }} />
68-
{isReceiveTruncated && <span className="shrink-0">...</span>}
69-
</span>
70-
<span className="shrink-0">{destinationCurrency.symbol}</span>
114+
<p className="text-primary-text text-xl leading-6 h-6 font-normal flex items-center justify-end min-w-0 w-full">
115+
{isUsdMode ? (
116+
<UsdAmount value={receiveAmountInUsd} />
117+
) : (
118+
<TokenAmount
119+
amount={receiveAmountNum}
120+
decimals={destinationCurrency.decimals}
121+
maxFractionDigits={maxFractionDigits}
122+
symbol={destinationCurrency.symbol}
123+
/>
124+
)}
71125
</p>
72126
<p className="text-secondary-text text-sm leading-5 flex items-center gap-1 font-medium">
73-
<NumberFlow value={Number(receiveAmountInUsd) || 0} prefix="$" trend={0} />
127+
{isUsdMode ? (
128+
<TokenAmount
129+
amount={receiveAmountNum}
130+
decimals={destinationCurrency.decimals}
131+
maxFractionDigits={maxFractionDigits}
132+
symbol={destinationCurrency.symbol}
133+
/>
134+
) : (
135+
<UsdAmount value={receiveAmountInUsd} />
136+
)}
74137
</p>
75138
</div>
76139
)
@@ -124,4 +187,4 @@ const RouteTokenPair: FC<RouteTokenPairProps> = ({ route, token }) => {
124187
}
125188

126189

127-
export default Summary
190+
export default Summary

0 commit comments

Comments
 (0)