From 275134b68c4debda6016bb999a71c8d1fb9d7d95 Mon Sep 17 00:00:00 2001 From: Marton Lederer Date: Tue, 30 Sep 2025 17:31:29 +0200 Subject: [PATCH 1/8] feat: asset mobile --- src/app/home/AssetRow/AssetRow.module.css | 14 ++++++++++++++ src/app/home/home.module.css | 7 +++++++ 2 files changed, 21 insertions(+) diff --git a/src/app/home/AssetRow/AssetRow.module.css b/src/app/home/AssetRow/AssetRow.module.css index 6d10a5eb..0b7b6d2a 100644 --- a/src/app/home/AssetRow/AssetRow.module.css +++ b/src/app/home/AssetRow/AssetRow.module.css @@ -100,6 +100,20 @@ gap: 5px; } +@media screen and (max-width: 600px) { + .assetRow { + display: grid; + grid-template-columns: auto auto; + gap: 1rem 0; + } + + .actionButtons { + grid-column: 1 / -1; + justify-content: flex-start; + padding-left: 52px; + } +} + .supplyBorrowButton { padding: 9px; border-radius: 50px; diff --git a/src/app/home/home.module.css b/src/app/home/home.module.css index 53b63b07..0cfc5193 100644 --- a/src/app/home/home.module.css +++ b/src/app/home/home.module.css @@ -76,6 +76,13 @@ width: 100%; } +@media screen and (max-width: 600px) { + .grid { + width: 90vw; + grid-template-columns: 1fr; + } +} + .modalOverlay { position: fixed; top: 0; From 182ce6c7e857b8696ca06f342f86d02db9de5b8d Mon Sep 17 00:00:00 2001 From: Marton Lederer Date: Tue, 30 Sep 2025 17:53:01 +0200 Subject: [PATCH 2/8] feat: markets mobile --- src/app/home/AssetRow/AssetRow.module.css | 2 +- src/app/home/home.module.css | 4 ++++ src/app/markets/MarketRow/MarketRow.module.css | 12 ++++++++++++ .../markets/MarketStats/MarketStats.module.css | 15 +++++++++++++++ src/app/markets/markets.module.css | 8 ++++++++ 5 files changed, 40 insertions(+), 1 deletion(-) diff --git a/src/app/home/AssetRow/AssetRow.module.css b/src/app/home/AssetRow/AssetRow.module.css index 0b7b6d2a..87db588b 100644 --- a/src/app/home/AssetRow/AssetRow.module.css +++ b/src/app/home/AssetRow/AssetRow.module.css @@ -104,7 +104,7 @@ .assetRow { display: grid; grid-template-columns: auto auto; - gap: 1rem 0; + gap: .85rem 0; } .actionButtons { diff --git a/src/app/home/home.module.css b/src/app/home/home.module.css index 0cfc5193..15bbbcc6 100644 --- a/src/app/home/home.module.css +++ b/src/app/home/home.module.css @@ -81,6 +81,10 @@ width: 90vw; grid-template-columns: 1fr; } + + .widgetContainer { + width: 90vw; + } } .modalOverlay { diff --git a/src/app/markets/MarketRow/MarketRow.module.css b/src/app/markets/MarketRow/MarketRow.module.css index fe39c932..f0678a54 100644 --- a/src/app/markets/MarketRow/MarketRow.module.css +++ b/src/app/markets/MarketRow/MarketRow.module.css @@ -29,6 +29,18 @@ flex-shrink: 0; } +@media screen and (max-width: 600px) { + .marketRow { + display: grid; + grid-template-columns: auto auto auto; + gap: 1rem; + } + + .assetInfo { + grid-column: 1 / 4; + } +} + .iconWrapper { width: 40px; height: 40px; diff --git a/src/app/markets/MarketStats/MarketStats.module.css b/src/app/markets/MarketStats/MarketStats.module.css index 8f7c84f9..dd9f8b42 100644 --- a/src/app/markets/MarketStats/MarketStats.module.css +++ b/src/app/markets/MarketStats/MarketStats.module.css @@ -15,6 +15,21 @@ border-radius: 24px; } +@media screen and (max-width: 600px) { + .marketStats { + flex-direction: column; + width: 90vw; + gap: 1rem; + } + + .marketContainer { + width: 100%; + justify-content: flex-start; + gap: 30px; + padding: 24px 30px; + } +} + .pieChart { display: flex; justify-content: center; diff --git a/src/app/markets/markets.module.css b/src/app/markets/markets.module.css index 25b2a08e..535a17f0 100644 --- a/src/app/markets/markets.module.css +++ b/src/app/markets/markets.module.css @@ -38,3 +38,11 @@ padding: 24px; border-radius: 24px; } + +@media screen and (max-width: 600px) { + .marketsList { + width: 90vw; + padding: 14px; + gap: .7rem; + } +} From 75a091cf2684d715778b9bf7be09cae52a190c9f Mon Sep 17 00:00:00 2001 From: Marton Lederer Date: Wed, 1 Oct 2025 08:47:20 +0200 Subject: [PATCH 3/8] feat: simple mobile optimizations --- .../PositionSummary/PositionSummary.tsx | 30 +++++--- .../[ticker]/TickerInfo/TickerInfo.module.css | 32 ++++++++ src/app/[ticker]/ticker.module.css | 27 +++++++ src/app/home/AssetRow/AssetRow.module.css | 2 +- src/app/home/WithdrawRepay/WithdrawRepay.tsx | 76 +++++++++++-------- src/app/markets/markets.module.css | 2 +- .../PercentagePicker/PercentagePicker.tsx | 4 +- src/hooks/LiquidOpsData/useGlobalPosition.ts | 4 +- 8 files changed, 131 insertions(+), 46 deletions(-) diff --git a/src/app/[ticker]/PositionSummary/PositionSummary.tsx b/src/app/[ticker]/PositionSummary/PositionSummary.tsx index 0a562850..3a002b50 100644 --- a/src/app/[ticker]/PositionSummary/PositionSummary.tsx +++ b/src/app/[ticker]/PositionSummary/PositionSummary.tsx @@ -24,10 +24,7 @@ const PositionSummary: React.FC<{ const denomination = 12n; // USD denomination const maxBorrow = useMemo( - () => new Quantity( - globalPosition?.borrowCapacityUSD || 0, - denomination, - ), + () => new Quantity(globalPosition?.borrowCapacityUSD || 0, denomination), [globalPosition], ); @@ -55,12 +52,25 @@ const PositionSummary: React.FC<{ const pos = globalPosition?.tokenPositions?.[ticker]; if (!pos) return; - if (Quantity.le(new Quantity(0, pos.collateralization.denomination).fromNumber(0.0001), pos.collateralization)) { - let maximumFractionDigits = Quantity.le(Quantity.__one(), pos.collateralization) ? 2 : 4; + if ( + Quantity.le( + new Quantity(0, pos.collateralization.denomination).fromNumber(0.0001), + pos.collateralization, + ) + ) { + let maximumFractionDigits = Quantity.le( + Quantity.__one(), + pos.collateralization, + ) + ? 2 + : 4; setTooltipContent( // @ts-expect-error - pos.collateralization.toLocaleString(undefined, { maximumFractionDigits }) - + " " + ticker + pos.collateralization.toLocaleString(undefined, { + maximumFractionDigits, + }) + + " " + + ticker, ); } else { setTooltipContent(">0.0001 " + ticker); @@ -194,7 +204,9 @@ const PositionSummary: React.FC<{ style={{ zIndex: globalPosition.collateralLogos.length - i, }} - onMouseMove={(e) => handleMouseMoveCollateral(collateral.ticker, e)} + onMouseMove={(e) => + handleMouseMoveCollateral(collateral.ticker, e) + } onMouseLeave={handleMouseLeave} /> ))} diff --git a/src/app/[ticker]/TickerInfo/TickerInfo.module.css b/src/app/[ticker]/TickerInfo/TickerInfo.module.css index b7a1d3d7..4837e1fa 100644 --- a/src/app/[ticker]/TickerInfo/TickerInfo.module.css +++ b/src/app/[ticker]/TickerInfo/TickerInfo.module.css @@ -6,6 +6,7 @@ height: auto; min-height: 100%; } + .assetInfo { display: flex; justify-content: center; @@ -146,3 +147,34 @@ font-weight: 600; margin: 0; } + +@media screen and (max-width: 600px) { + .container { + gap: 1rem; + } + + .assetInfo { + gap: 10px; + } + + .tickerTitle { + font-size: 20px; + } + + .assetInfo img { + width: 34px; + height: 34px; + } + + .actionButtons { + display: grid; + grid-template-columns: repeat(4, auto); + justify-content: stretch; + gap: 7px; + width: 100%; + } + + .supplyButton, .borrowButton, .withdrawButton, .repayButton { + min-width: unset; + } +} diff --git a/src/app/[ticker]/ticker.module.css b/src/app/[ticker]/ticker.module.css index 0124273f..9b1ea0fc 100644 --- a/src/app/[ticker]/ticker.module.css +++ b/src/app/[ticker]/ticker.module.css @@ -91,6 +91,33 @@ width: 100%; } +@media screen and (max-width: 600px) { + .titleWrapper { + width: 90vw; + } + + .title { + font-size: 20px; + } + + .backIcon { + width: 20px; + height: 20px; + } + + .topContainer { + width: 90vw; + flex-direction: column; + justify-content: unset; + gap: 1.6rem; + } + + .grid { + grid-template-columns: auto; + width: 90vw; + } +} + .modalOverlay { position: fixed; top: 0; diff --git a/src/app/home/AssetRow/AssetRow.module.css b/src/app/home/AssetRow/AssetRow.module.css index 87db588b..a8a5f41d 100644 --- a/src/app/home/AssetRow/AssetRow.module.css +++ b/src/app/home/AssetRow/AssetRow.module.css @@ -104,7 +104,7 @@ .assetRow { display: grid; grid-template-columns: auto auto; - gap: .85rem 0; + gap: 0.85rem 0; } .actionButtons { diff --git a/src/app/home/WithdrawRepay/WithdrawRepay.tsx b/src/app/home/WithdrawRepay/WithdrawRepay.tsx index 3ac19580..e98da1c1 100644 --- a/src/app/home/WithdrawRepay/WithdrawRepay.tsx +++ b/src/app/home/WithdrawRepay/WithdrawRepay.tsx @@ -14,7 +14,10 @@ import { tokenInput } from "liquidops"; import { useGetPosition } from "@/hooks/LiquidOpsData/useGetPosition"; import { useLoadingScreen } from "@/components/LoadingScreen/useLoadingScreen"; import { useValueLimit } from "@/hooks/data/useValueLimit"; -import { useInfo, useProtocolStats } from "@/hooks/LiquidOpsData/useProtocolStats"; +import { + useInfo, + useProtocolStats, +} from "@/hooks/LiquidOpsData/useProtocolStats"; import { AnimatePresence, motion } from "framer-motion"; import { warningVariants } from "@/components/DropDown/FramerMotion"; import { useCooldown } from "@/hooks/data/useCooldown"; @@ -43,12 +46,12 @@ const WithdrawRepay: React.FC = ({ useUserBalance(oTokenAddress); const currentBalance = useMemo( - () => mode === "withdraw" ? lentBalance : positionBalance, - [mode, lentBalance, positionBalance] + () => (mode === "withdraw" ? lentBalance : positionBalance), + [mode, lentBalance, positionBalance], ); const isLoadingCurrentBalance = useMemo( - () => mode === "withdraw" ? isLoadingBalance : isLoadingPosition, - [mode, isLoadingBalance, isLoadingPosition] + () => (mode === "withdraw" ? isLoadingBalance : isLoadingPosition), + [mode, isLoadingBalance, isLoadingPosition], ); const { unlend, isUnlending, unlendError } = useLend({ @@ -125,38 +128,40 @@ const WithdrawRepay: React.FC = ({ } const amount = Quantity.__div( - Quantity.__mul(currentBalance, new Quantity(0n, 12n).fromNumber(percentage)), + Quantity.__mul( + currentBalance, + new Quantity(0n, 12n).fromNumber(percentage), + ), new Quantity(0n, 12n).fromNumber(100), ); setInputValue(amount.toString()); }; - const currentPercentage = useMemo( - () => { - // no data - if ( - !currentBalance || - !inputValue || - Quantity.eq(currentBalance, new Quantity(0n, 12n)) - ) { - return 0; - } + const currentPercentage = useMemo(() => { + // no data + if ( + !currentBalance || + !inputValue || + Quantity.eq(currentBalance, new Quantity(0n, 12n)) + ) { + return 0; + } - if (isNaN(Number(inputValue.replace(/,/g, "")))) return 0; + if (isNaN(Number(inputValue.replace(/,/g, "")))) return 0; - const percentage = Quantity.__div( - Quantity.__mul( - new Quantity(0n, currentBalance.denomination).fromString(inputValue), - new Quantity(0n, currentBalance.denomination).fromNumber(100), - ), - currentBalance, - ); - return Math.min(100, Math.max(0, percentage.toNumber())); - }, - [currentBalance, inputValue] - ); + const percentage = Quantity.__div( + Quantity.__mul( + new Quantity(0n, currentBalance.denomination).fromString(inputValue), + new Quantity(0n, currentBalance.denomination).fromNumber(100), + ), + currentBalance, + ); + return Math.min(100, Math.max(0, percentage.toNumber())); + }, [currentBalance, inputValue]); - const { data: tokenInfo, isLoading: isLoadingTokenInfo } = useInfo(ticker.toUpperCase()); + const { data: tokenInfo, isLoading: isLoadingTokenInfo } = useInfo( + ticker.toUpperCase(), + ); const handleSubmit = () => { setHasUserInteracted(true); @@ -179,13 +184,18 @@ const WithdrawRepay: React.FC = ({ // x _underlying_ = x * totalSupply / totalPooled _oToken_ const { collateralDenomination, denomination } = tokenInfo; const totalPooled = new Quantity( - BigInt(tokenInfo.cash) + BigInt(tokenInfo.totalBorrows) - BigInt(tokenInfo.totalReserves), - BigInt(collateralDenomination) + BigInt(tokenInfo.cash) + + BigInt(tokenInfo.totalBorrows) - + BigInt(tokenInfo.totalReserves), + BigInt(collateralDenomination), + ); + const totalSupply = new Quantity( + tokenInfo.totalSupply, + BigInt(denomination), ); - const totalSupply = new Quantity(tokenInfo.totalSupply, BigInt(denomination)); quantity = Quantity.__convert( Quantity.__div(Quantity.__mul(quantity, totalSupply), totalPooled), - BigInt(denomination) + BigInt(denomination), ); if (oTokenBalance) { diff --git a/src/app/markets/markets.module.css b/src/app/markets/markets.module.css index 535a17f0..4fc28625 100644 --- a/src/app/markets/markets.module.css +++ b/src/app/markets/markets.module.css @@ -43,6 +43,6 @@ .marketsList { width: 90vw; padding: 14px; - gap: .7rem; + gap: 0.7rem; } } diff --git a/src/components/PercentagePicker/PercentagePicker.tsx b/src/components/PercentagePicker/PercentagePicker.tsx index ada561e1..5e1ef842 100644 --- a/src/components/PercentagePicker/PercentagePicker.tsx +++ b/src/components/PercentagePicker/PercentagePicker.tsx @@ -45,7 +45,9 @@ const PercentagePicker: React.FC = ({