fix: show user position on mobile

CarmineOptions · Sep 29, 2024 · a0915a8 · a0915a8
1 parent 3676578
commit a0915a8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 33 deletions.
diff --git a/src/components/Yield/PoolItem.tsx b/src/components/Yield/PoolItem.tsx
@@ -165,38 +165,38 @@ export const PoolItem = ({ pool }: Props) => {
           )}
         </div>
       )}
-      <div>
-        <div>
-          {price === undefined ? (
-            <LoadingAnimation size={20} />
-          ) : (
-            <p>${formatNumber(tvl * price)}</p>
-          )}
-          <p className="p4 secondary-col">
-            {formatNumber(tvl)} {pool.underlying.symbol}
-          </p>
-        </div>
-      </div>
       {isWideScreen && (
         <div>
           <div>
-            {price === undefined ||
-            userPosition === undefined ||
-            userPosition === 0 ? (
-              <p>-</p>
-            ) : (
-              <p>${formatNumber(userPosition * price)}</p>
-            )}
-            {userPosition === undefined || userPosition === 0 ? (
-              <p>- {pool.underlying.symbol}</p>
+            {price === undefined ? (
+              <LoadingAnimation size={20} />
             ) : (
-              <p className="p4 secondary-col">
-                {formatNumber(userPosition)} {pool.underlying.symbol}
-              </p>
+              <p>${formatNumber(tvl * price)}</p>
             )}
+            <p className="p4 secondary-col">
+              {formatNumber(tvl)} {pool.underlying.symbol}
+            </p>
           </div>
         </div>
       )}
+      <div>
+        <div>
+          {price === undefined ||
+          userPosition === undefined ||
+          userPosition === 0 ? (
+            <p>-</p>
+          ) : (
+            <p>${formatNumber(userPosition * price)}</p>
+          )}
+          {userPosition === undefined || userPosition === 0 ? (
+            <p>- {pool.underlying.symbol}</p>
+          ) : (
+            <p className="p4 secondary-col">
+              {formatNumber(userPosition)} {pool.underlying.symbol}
+            </p>
+          )}
+        </div>
+      </div>
       <div>
         <button onClick={handleClick} className="primary active mainbutton">
           {userPosition === undefined || userPosition === 0 ? "View" : "Manage"}

diff --git a/src/components/Yield/PoolTable.tsx b/src/components/Yield/PoolTable.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { useIsMobile } from "../../hooks/useIsMobile";
 import { Pool } from "../../classes/Pool";
 import {
@@ -14,7 +13,6 @@ import styles from "./pooltable.module.css";
 
 export const PoolTable = () => {
   const isWideScreen = !useIsMobile();
-  const [showPools, setShowPools] = useState<"all" | "call" | "put">("all");
 
   const pools = [
     new Pool(STRK_ADDRESS, USDC_ADDRESS, OptionType.Call),
@@ -27,13 +25,6 @@ export const PoolTable = () => {
     new Pool(BTC_ADDRESS, USDC_ADDRESS, OptionType.Put),
   ];
 
-  const selectedPools =
-    showPools === "all"
-      ? pools
-      : showPools === "call"
-      ? pools.filter((p) => p.isCall)
-      : pools.filter((p) => p.isPut);
-
   return (
     <div className={styles.outer} style={{ marginTop: "20px" }}>
       <div className={styles.inner + " " + styles.mobilewidth}>