Mobile UI support

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,37 @@
   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;
+  }
+}

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;

src/app/earn/earn.module.css

@@ -88,6 +88,37 @@
   gap: 25px;
 }
 
+@media screen and (max-width: 600px) {
+  .bodyContainer {
+    width: 90vw;
+    padding: 2rem 0;
+  }
+
+  .topSection {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.25rem;
+  }
+
+  .titleContainer {
+    gap: 0;
+  }
+
+  .loBalanceContainer {
+    flex-direction: column-reverse;
+  }
+
+  .loTitle {
+    text-align: left;
+  }
+
+  .depositSection {
+    flex-direction: column;
+    justify-content: unset;
+    gap: 1rem;
+  }
+}
+
 .assetSquareContainer {
   position: relative;
   display: flex;

src/app/home/ActionTab/ActionTab.tsx

@@ -34,17 +34,13 @@ const ActionTab: React.FC<ActionTabProps> = ({ ticker, mode, onClose }) => {
   const { data: walletBalance, isLoading: isLoadingBalance } =
     useUserBalance(tokenAddress);
 
-  const { data: aoBalance, isLoading: isLoadingAoBalance } = useUserBalance("0syT13r0s0tgPmIed95bJnuSqaD29HQNN8D3ElLSrsc");
-  const hasAoForAction = useMemo(
-    () => {
-      if (isLoadingAoBalance) return true;
-      return Quantity.lt(
-        new Quantity(1n, 2n),
-        new Quantity(aoBalance, 12n)
-      );
-    },
-    [aoBalance, isLoadingAoBalance]
+  const { data: aoBalance, isLoading: isLoadingAoBalance } = useUserBalance(
+    "0syT13r0s0tgPmIed95bJnuSqaD29HQNN8D3ElLSrsc",
   );
+  const hasAoForAction = useMemo(() => {
+    if (isLoadingAoBalance) return true;
+    return Quantity.lt(new Quantity(1n, 2n), new Quantity(aoBalance, 12n));
+  }, [aoBalance, isLoadingAoBalance]);
 
   const { lend, isLending, lendError } = useLend({
     onSuccess: onClose,
@@ -241,7 +237,8 @@ const ActionTab: React.FC<ActionTabProps> = ({ ticker, mode, onClose }) => {
                 exit="hidden"
               >
                 <span className={styles.aoNotice}>
-                  You will need a minimal amount of AO for this message to be executed.
+                  You will need a minimal amount of AO for this message to be
+                  executed.
                 </span>
               </motion.div>
             )}

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: 0.85rem 0;
+  }
+
+  .actionButtons {
+    grid-column: 1 / -1;
+    justify-content: flex-start;
+    padding-left: 52px;
+  }
+}
+
 .supplyBorrowButton {
   padding: 9px;
   border-radius: 50px;

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";
@@ -42,25 +45,21 @@ const WithdrawRepay: React.FC<WithdrawRepayProps> = ({
   const { data: oTokenBalance, isLoading: isLoadingOTokenBalance } =
     useUserBalance(oTokenAddress);
 
-  const { data: aoBalance, isLoading: isLoadingAoBalance } = useUserBalance("0syT13r0s0tgPmIed95bJnuSqaD29HQNN8D3ElLSrsc");
-  const hasAoForAction = useMemo(
-    () => {
-      if (isLoadingAoBalance) return true;
-      return Quantity.lt(
-        new Quantity(1n, 2n),
-        new Quantity(aoBalance, 12n)
-      );
-    },
-    [aoBalance, isLoadingAoBalance]
+  const { data: aoBalance, isLoading: isLoadingAoBalance } = useUserBalance(
+    "0syT13r0s0tgPmIed95bJnuSqaD29HQNN8D3ElLSrsc",
   );
+  const hasAoForAction = useMemo(() => {
+    if (isLoadingAoBalance) return true;
+    return Quantity.lt(new Quantity(1n, 2n), new Quantity(aoBalance, 12n));
+  }, [aoBalance, isLoadingAoBalance]);
 
   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({
@@ -137,38 +136,40 @@ const WithdrawRepay: React.FC<WithdrawRepayProps> = ({
     }
 
     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);
@@ -191,13 +192,18 @@ const WithdrawRepay: React.FC<WithdrawRepayProps> = ({
         // 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) {
@@ -267,7 +273,8 @@ const WithdrawRepay: React.FC<WithdrawRepayProps> = ({
               exit="hidden"
               className={styles.aoNotice}
             >
-              You will need a minimal amount of AO for this message to be executed.
+              You will need a minimal amount of AO for this message to be
+              executed.
             </motion.span>
           )}
         </AnimatePresence>

src/app/home/home.module.css

@@ -76,6 +76,17 @@
   width: 100%;
 }
 
+@media screen and (max-width: 600px) {
+  .grid {
+    width: 90vw;
+    grid-template-columns: 1fr;
+  }
+
+  .widgetContainer {
+    width: 90vw;
+  }
+}
+
 .modalOverlay {
   position: fixed;
   top: 0;

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;

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;

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: 0.7rem;
+  }
+}