Skip to content

Commit

Permalink
feat: more responsive changes for trade tool
Browse files Browse the repository at this point in the history
  • Loading branch information
@crnbarr93
crnbarr93 committed Aug 8, 2024
1 parent 0d2daf7 commit 906ac9e
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 45 deletions.
5 changes: 2 additions & 3 deletions packages/web/components/complex/asset-fieldset.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,12 +118,11 @@ const AssetFieldsetInput = forwardRef<
>(({ inputPrefix, inputValue, onInputChange, outputValue, ...rest }, ref) => {
const { isMobile } = useWindowSize(Breakpoint.sm);
const fontSize = calcFontSize((inputValue ?? "").length, isMobile);

return (
<div
className="flex h-[72px] flex-1 items-center overflow-visible font-h3 sm:h-[48px]"
className="flex h-[72px] flex-1 items-center overflow-visible text-h3 font-h3 sm:h-[48px] sm:text-[30px] sm:font-h5"
style={{
fontSize,
fontSize: !!inputValue ? fontSize : undefined,
}}
>
{inputPrefix}
Expand Down
8 changes: 4 additions & 4 deletions packages/web/components/swap-tool/alt.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -431,9 +431,9 @@ export const AltSwapTool: FunctionComponent<SwapToolProps> = observer(
<div className="flex items-center justify-between py-3">
<AssetFieldsetInput
outputValue={
<h3
<span
className={classNames(
"whitespace-nowrap transition-opacity",
"whitespace-nowrap text-h3 font-h3 transition-opacity sm:text-[30px] sm:font-h5",
swapState.quote?.amount.toDec().isPositive() &&
!swapState.inAmountInput.isTyping &&
!swapState.isQuoteLoading
Expand All @@ -451,7 +451,7 @@ export const AltSwapTool: FunctionComponent<SwapToolProps> = observer(
maximumSignificantDigits: 6,
maxDecimals: 10,
notation: "standard",
}).length,
}).replace(/[,\.]/g, "").length,
isMobile
)
: undefined,
Expand All @@ -465,7 +465,7 @@ export const AltSwapTool: FunctionComponent<SwapToolProps> = observer(
notation: "standard",
})
: "0"}
</h3>
</span>
}
/>
<AssetFieldsetTokenSelector
Expand Down
2 changes: 1 addition & 1 deletion packages/web/components/ui/recap-row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function RecapRow({
className
)}
>
<span className="text-osmoverse-300">{left}</span>
<span className="sm:caption text-osmoverse-300">{left}</span>
{right}
</div>
);
Expand Down
73 changes: 37 additions & 36 deletions packages/web/modals/review-order.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,11 @@ import { RecapRow } from "~/components/ui/recap-row";
import { Skeleton } from "~/components/ui/skeleton";
import { EventName, EventPage } from "~/config/analytics-events";
import {
Breakpoint,
useAmplitudeAnalytics,
useOneClickTradingSession,
useTranslation,
useWindowSize,
} from "~/hooks";
import { isValidNumericalRawInput } from "~/hooks/input/use-amount-input";
import { useSwap } from "~/hooks/use-swap";
Expand Down Expand Up @@ -95,6 +97,7 @@ export function ReviewOrder({
"type",
parseAsString.withDefault("market")
);
const { isMobile } = useWindowSize(Breakpoint.sm);

const isManualSlippageTooHigh = +manualSlippage > 1;
const isManualSlippageTooLow = manualSlippage !== "" && +manualSlippage < 0.1;
Expand Down Expand Up @@ -173,11 +176,11 @@ export function ReviewOrder({
title={t("swap.gas.gasEstimationError")}
body={gasFeeError}
>
<span className="flex items-center gap-1">
<span className="sm:caption flex items-center gap-1">
<Icon
id="question"
width={24}
height={24}
width={isMobile ? 20 : 24}
height={isMobile ? 20 : 24}
className="scale-75 text-osmoverse-300"
/>{" "}
{t("swap.gas.unknown")}
Expand All @@ -186,15 +189,15 @@ export function ReviewOrder({
) : (
<span
className={classNames(
"inline-flex items-center gap-1 text-osmoverse-100",
"sm:caption inline-flex items-center gap-1 text-osmoverse-100",
{ "animate-pulse": isGasLoading }
)}
>
<Icon id="gas" width={16} height={16} />
{gasAmount && gasAmount.toString()}
</span>
);
}, [gasAmount, isGasLoading, gasFeeError, t]);
}, [gasAmount, isGasLoading, gasFeeError, isMobile, t]);

return (
<ModalBase
Expand All @@ -219,7 +222,7 @@ export function ReviewOrder({
})}
>
{orderType === "limit" && tab !== "swap" && (
<div className="flex flex-col rounded-t-2xl border border-osmoverse-700 px-4 py-2">
<div className="sm:subtitle2 flex flex-col rounded-t-2xl border border-osmoverse-700 px-4 py-2">
<div className="flex items-center gap-4">
<div className="flex h-10 min-w-10 items-center justify-center">
{(tab === "buy" && !isBeyondOppositePrice) ||
Expand All @@ -241,7 +244,7 @@ export function ReviewOrder({
/>
)}
</div>
<span className="w-full text-osmoverse-300">
<span className="flex-1 text-osmoverse-300">
If {baseDenom} price reaches{" "}
{limitPriceFiat &&
formatPretty(
Expand Down Expand Up @@ -300,29 +303,27 @@ export function ReviewOrder({
/>
)}
<div className="flex flex-col">
<p className="text-osmoverse-300">
<p className="sm:caption text-osmoverse-300">
{tab === "buy"
? t("limitOrders.pay")
: t("limitOrders.sell")}
</p>
{inAmountToken && (
<span className="subtitle1">
<span className="subtitle1 sm:subtitle2">
{formatPretty(inAmountToken)}
</span>
)}
</div>
</div>
<div className="flex flex-col items-end">
<p>
{formatPretty(
inAmountFiat ?? new PricePretty(DEFAULT_VS_CURRENCY, 0),
{
...getPriceExtendedFormatOptions(
inAmountFiat?.toDec() ?? new Dec(0)
),
}
)}
</p>
<div className="sm:subtitle2 flex flex-col items-end">
{formatPretty(
inAmountFiat ?? new PricePretty(DEFAULT_VS_CURRENCY, 0),
{
...getPriceExtendedFormatOptions(
inAmountFiat?.toDec() ?? new Dec(0)
),
}
)}
</div>
</div>
<div className="flex items-center justify-between p-2">
Expand All @@ -347,12 +348,12 @@ export function ReviewOrder({
/>
)}
<div className="flex flex-col">
<p className="text-osmoverse-300">
<p className="sm:caption text-osmoverse-300">
{tab === "sell"
? t("limitOrders.receive")
: t("portfolio.buy")}
</p>
<span className="subtitle1">
<span className="subtitle1 sm:subtitle2">
{expectedOutput && (
<>
{formatPretty(expectedOutput.toDec(), {
Expand All @@ -372,14 +373,14 @@ export function ReviewOrder({
{outputDifference && (
<span
className={classNames(
"body2",
"body2 sm:caption",
showOutputDifferenceWarning
? "text-rust-400"
: "text-osmoverse-300"
)}
>{`-${outputDifference}`}</span>
)}
<span>
<span className="sm:subtitle2">
{formatPretty(expectedOutputFiat ?? new Dec(0), {
...getPriceExtendedFormatOptions(
expectedOutputFiat?.toDec() ?? new Dec(0)
Expand Down Expand Up @@ -416,7 +417,7 @@ export function ReviewOrder({
</span>
}
>
<div className="flex items-center justify-center">
<div className="sm:caption flex items-center justify-center">
{isBeyondOppositePrice && (
<Icon
id="alert-circle"
Expand Down Expand Up @@ -453,7 +454,7 @@ export function ReviewOrder({
placeholder={
slippageConfig?.defaultManualSlippage + "%"
}
className="w-fit bg-transparent px-0"
className="sm:caption w-fit bg-transparent px-0"
inputClassName={classNames(
"!bg-transparent focus:text-center text-right placeholder:text-wosmongton-300 transition-all focus-visible:outline-none",
{
Expand Down Expand Up @@ -514,10 +515,10 @@ export function ReviewOrder({
className="text-rust-400"
/>
<div className="flex flex-col gap-1">
<span className="body2">
<span className="body2 sm:caption">
{t("limitOrders.errors.tradeMayResultInLossOfValue")}
</span>
<span className="body2 text-osmoverse-300">
<span className="body2 sm:caption text-osmoverse-300">
{t("limitOrders.lowerSlippageToleranceRecommended")}
</span>
</div>
Expand All @@ -540,10 +541,10 @@ export function ReviewOrder({
/>
</svg>
<div className="flex flex-col gap-1">
<span className="body2">
<span className="body2 sm:caption">
{t("limitOrders.errors.tradeMayNotExecuted")}
</span>
<span className="body2 text-osmoverse-300">
<span className="body2 sm:caption text-osmoverse-300">
{t("limitOrders.tryHigherSlippage")}
</span>
</div>
Expand All @@ -558,7 +559,7 @@ export function ReviewOrder({
<RecapRow
left="Receive at least"
right={
<span>
<span className="sm:caption">
{outAmountLessSlippage &&
outFiatAmountLessSlippage &&
toAsset && (
Expand Down Expand Up @@ -587,7 +588,7 @@ export function ReviewOrder({
<RecapRow
left="Trade fee"
right={
<span className="text-bullish-400">
<span className="sm:caption text-bullish-400">
{t("transfer.free")}
</span>
}
Expand All @@ -614,13 +615,13 @@ export function ReviewOrder({
height={24}
className="text-rust-400"
/>
<div className="flex flex-col gap-1">
<span className="body2">
<div className="body2 sm:caption flex flex-col gap-1">
<span>
{tab === "buy"
? t("limitOrders.aboveMarket.title")
: t("limitOrders.belowMarket.title")}
</span>
<span className="body2 text-osmoverse-300">
<span className="text-osmoverse-300">
{tab === "buy"
? t("limitOrders.aboveMarket.description")
: t("limitOrders.belowMarket.description")}
Expand All @@ -634,7 +635,7 @@ export function ReviewOrder({
mode="primary"
onClick={confirmAction}
disabled={isConfirmationDisabled}
className="body2 !rounded-2xl"
className="body2 sm:caption !rounded-2xl"
>
<h6>{t("limitOrders.confirm")}</h6>
</Button>
Expand Down
1 change: 0 additions & 1 deletion packages/web/utils/formatter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -389,7 +389,6 @@ export function calcFontSize(numChars: number, isMobile: boolean): string {
16: "28px",
33: "24px",
};

for (const [key, value] of Object.entries(sizeMapping)) {
if (numChars <= Number(key)) {
return value;
Expand Down

0 comments on commit 906ac9e

Please sign in to comment.