chore: align withdraw warning modal icons and texts correctly

src/app/api/strategies/route.ts

@@ -114,6 +114,7 @@ async function getStrategyInfo(
       };
     }),
     investmentFlows: strategy.investmentFlows,
+    curator: strategy.metadata.curator,
   };
 
   const rewardsInfo = await getRewardsInfo([

src/app/strategy/[strategyId]/_components/Strategy.tsx

@@ -36,12 +36,12 @@ import { DUMMY_BAL_ATOM, returnEmptyBal } from '@/store/balance.atoms';
 import { addressAtom } from '@/store/claims.atoms';
 import { strategiesAtom, StrategyInfo } from '@/store/strategies.atoms';
 import { TxHistoryAtom } from '@/store/transactions.atom';
+import { EkuboTxHistoryAtom } from '@/store/ekuboTransactions.atom';
 import {
   TrovesBaseAPYsAtom,
   TrovesStrategyAPIResult,
 } from '@/store/troves.atoms';
 import { MYSTYLES } from '@/style';
-import { getTokenInfoFromAddr } from '@/utils';
 import MyNumber from '@/utils/MyNumber';
 import { StrategyParams } from '../page';
 import { DetailsTab } from './DetailsTab';
@@ -78,12 +78,19 @@ function HoldingsText({
     console.error('Balance data error:', balData.error);
     return 'Error';
   }
+
+  if (!balData.data.amount) {
+    return '-';
+  }
+
   const value = Number(
     balData.data.amount.toEtherToFixedDecimals(
       balData.data.tokenInfo?.displayDecimals || 2,
     ),
   );
-  if (value === 0) return '-';
+
+  if (isNaN(value) || value === 0) return '-';
+
   return `${balData.data.amount.toEtherToFixedDecimals(
     balData.data.tokenInfo?.displayDecimals || 2,
   )} ${balData.data.tokenInfo?.name}`;
@@ -108,8 +115,8 @@ function NetEarningsText({
   )
     return '-';
   return `${profit?.toFixed(
-    balData.data.tokenInfo?.displayDecimals || 2,
-  )} ${balData.data.tokenInfo?.name}`;
+    balData.data?.tokenInfo?.displayDecimals || 2,
+  )} ${balData.data?.tokenInfo?.name || 'STRK'}`;
 }
 
 function HoldingsAndEarnings({
@@ -272,9 +279,15 @@ const Strategy = ({ params }: StrategyParams) => {
   );
   console.log('balData', balData);
 
+  // Determine if this is an Ekubo strategy
+  const isEkuboStrategy = strategy?.id?.startsWith('ekubo_cl_');
+
   const txHistoryAtom = useMemo(
-    () => TxHistoryAtom(strategyAddress, address!),
-    [address, strategyAddress],
+    () =>
+      isEkuboStrategy
+        ? EkuboTxHistoryAtom(strategyAddress, address!)
+        : TxHistoryAtom(strategyAddress, address!),
+    [address, strategyAddress, isEkuboStrategy],
   );
 
   const txHistoryResult = useAtomValue(txHistoryAtom);
@@ -298,38 +311,42 @@ const Strategy = ({ params }: StrategyParams) => {
   }, [JSON.stringify(txHistoryResult.data)]);
 
   const [profit, setProfit] = useState(0);
-  const computeProfit = useCallback(() => {
+  const computeProfit = useCallback(async () => {
     if (!txHistory.findManyInvestment_flows.length) return 0;
-    const tokenInfo = getTokenInfoFromAddr(
-      txHistory.findManyInvestment_flows[0].asset,
-    );
-    if (!tokenInfo) return 0;
-    const netDeposits = txHistory.findManyInvestment_flows.reduce((acc, tx) => {
-      const sign = tx.type === 'deposit' ? 1 : -1;
-      return (
-        acc +
-        sign *
-          Number(
-            new MyNumber(tx.amount, tokenInfo.decimals).toEtherToFixedDecimals(
-              6,
-            ),
-          )
-      );
-    }, 0);
-    const currentValue = Number(
-      balData.data?.amount.toEtherToFixedDecimals(6) || '0',
-    );
-    if (currentValue === 0) return 0;
 
-    if (netDeposits === 0) return 0;
-    setProfit(currentValue - netDeposits);
-  }, [txHistory, balData]);
+    try {
+      if (strategy) {
+        const netEarnings = await (strategy as any).calculateNetEarnings(
+          txHistory.findManyInvestment_flows,
+        );
+        setProfit(netEarnings);
+      }
+    } catch (error) {
+      console.error('Error calculating net earnings:', error);
+      // Fallback to simple calculation
+      const simpleNetEarnings = txHistory.findManyInvestment_flows.reduce(
+        (acc, tx) => {
+          const amount = Number(
+            new MyNumber(tx.amount, 18).toEtherToFixedDecimals(6),
+          );
+          if (tx.type === 'deposit') {
+            return acc - amount;
+          } else if (tx.type === 'withdraw') {
+            return acc + amount;
+          }
+          return acc;
+        },
+        0,
+      );
+      setProfit(simpleNetEarnings);
+    }
+  }, [txHistory, strategy]);
 
   useEffect(() => {
     if (profit == 0) {
       computeProfit();
     }
-  }, [txHistory, balData]);
+  }, [txHistory, computeProfit]);
 
   useEffect(() => {
     mixpanel.track('Strategy page open', { name: params.strategyId });

src/app/strategy/[strategyId]/_components/TransactionsTab.tsx

@@ -1,4 +1,5 @@
 import {
+  Avatar,
   Box,
   Flex,
   Link,
@@ -31,6 +32,12 @@ interface ITransaction {
   txHash: string;
   asset: string;
   __typename: 'Investment_flows';
+  // Additional fields for Ekubo transactions
+  token0?: string;
+  token1?: string;
+  amount0?: string;
+  amount1?: string;
+  liquidity_delta?: string;
 }
 interface TransactionsTabProps {
   strategy: StrategyInfo<any>;
@@ -165,11 +172,50 @@ function DesktopTransactionHistory(props: { transactions: ITransaction[] }) {
                       {index + 1}.
                     </Td>
                     <Td color={'text_secondary'} fontSize={'14px'}>
-                      {new MyNumber(
-                        tx.amount,
-                        decimals!,
-                      ).toEtherToFixedDecimals(token.displayDecimals)}{' '}
-                      {token?.name}
+                      <Flex alignItems="center" gap={2} flexWrap="wrap">
+                        <Flex alignItems="center" gap={1}>
+                          <Avatar
+                            size="xs"
+                            src={token?.logo}
+                            name={token?.name}
+                          />
+                          <Text>
+                            {Math.abs(
+                              Number(
+                                new MyNumber(
+                                  tx.amount,
+                                  decimals!,
+                                ).toEtherToFixedDecimals(token.displayDecimals),
+                              ),
+                            )}{' '}
+                            {token?.name}
+                          </Text>
+                        </Flex>
+                        {/* Show additional Ekubo info if available */}
+                        {tx.amount1 && tx.token1 && (
+                          <Flex alignItems="center" gap={1}>
+                            <Avatar
+                              size="xs"
+                              src={getTokenInfoFromAddr(tx.token1)?.logo}
+                              name={getTokenInfoFromAddr(tx.token1)?.name}
+                            />
+                            <Text fontSize={'12px'} color={'text_secondary'}>
+                              {Math.abs(
+                                Number(
+                                  new MyNumber(
+                                    tx.amount1,
+                                    getTokenInfoFromAddr(tx.token1).decimals,
+                                  ).toEtherToFixedDecimals(
+                                    getTokenInfoFromAddr(tx.token1)
+                                      .displayDecimals,
+                                  ),
+                                ),
+                              )}{' '}
+                              {getTokenInfoFromAddr(tx.token1).name}
+                            </Text>
+                          </Flex>
+                        )}
+                      </Flex>
                     </Td>
                     <Td color={'text_secondary'} fontSize={'14px'}>
                       {getTransactionIcon(tx.type)}
@@ -266,15 +312,46 @@ function MobileTransactionHistory(props: { transactions: ITransaction[] }) {
                 {displayText}
               </Text>
             </Flex>
-            <Text color="white" fontSize="15px">
-              Amount:{' '}
-              {Number(
-                new MyNumber(tx.amount, decimals!).toEtherToFixedDecimals(
-                  token.displayDecimals,
-                ),
-              ).toLocaleString()}{' '}
-              {token?.name}
-            </Text>
+            <Flex alignItems="center" flexWrap="wrap" gap={1} mb={1}>
+              <Text color="white" fontSize="15px">
+                Amount:
+              </Text>
+              <Flex alignItems="center" gap={1}>
+                <Avatar size="xs" src={token?.logo} name={token?.name} />
+                <Text color="white" fontSize="15px">
+                  {Math.abs(
+                    Number(
+                      new MyNumber(tx.amount, decimals!).toEtherToFixedDecimals(
+                        token.displayDecimals,
+                      ),
+                    ),
+                  ).toLocaleString()}{' '}
+                  {token?.name}
+                </Text>
+              </Flex>
+              {tx.amount1 && tx.token1 && (
+                <Flex alignItems="center" gap={1}>
+                  <Avatar
+                    size="xs"
+                    src={getTokenInfoFromAddr(tx.token1)?.logo}
+                    name={getTokenInfoFromAddr(tx.token1)?.name}
+                  />
+                  <Text fontSize={'13px'} color={'text_secondary'}>
+                    {Math.abs(
+                      Number(
+                        new MyNumber(
+                          tx.amount1,
+                          getTokenInfoFromAddr(tx.token1)?.decimals,
+                        ).toEtherToFixedDecimals(
+                          getTokenInfoFromAddr(tx.token1)?.displayDecimals,
+                        ),
+                      ),
+                    ).toLocaleString()}{' '}
+                    {getTokenInfoFromAddr(tx.token1)?.name || 'Token'}
+                  </Text>
+                </Flex>
+              )}
+            </Flex>
             <Text color="white" fontSize="13px">
               Tx Hash:{' '}
               <Link

src/components/WithdrawalWarningModal.tsx

@@ -130,61 +130,66 @@ export default function WithdrawalWarningModal({
                 more coming.
               </Text>
 
-              <VStack spacing={{ base: 3, md: 2 }}>
-                <HStack justify="center" spacing={'30px'} width="100%">
+              <HStack
+                justify="center"
+                spacing={{ base: '20px', md: '30px' }}
+                width="100%"
+                align="flex-start"
+              >
+                <VStack spacing={1} align="center" flex="1">
                   <Image
                     src={endurExtendedLogo.src}
                     width={{ base: 12, md: 20 }}
                     height={{ base: 12, md: 20 }}
                     alt="Endur and Extended app support"
                   />
-
-                  <Image
-                    src={btcfiLogo.src}
-                    width={{ base: 12, md: 20 }}
-                    height={{ base: 12, md: 20 }}
-                    alt="BTCFI incentives"
-                  />
-                  <Image
-                    src={riskYieldLogo.src}
-                    width={{ base: 12, md: 20 }}
-                    height={{ base: 12, md: 20 }}
-                    alt="Risk diversified and best possible yield"
-                  />
-                </HStack>
-
-                <HStack
-                  align="top"
-                  justify="center"
-                  spacing={{ base: '5px', md: '30px' }}
-                  width="100%"
-                >
                   <Text
                     fontSize={{ base: '10px', md: '12px' }}
                     color="#B8B8B8"
                     textAlign="center"
                     maxWidth={'90px'}
+                    lineHeight="1.2"
                   >
                     Endur and Extended app support
                   </Text>
+                </VStack>
+
+                <VStack spacing={1} align="center" flex="1">
+                  <Image
+                    src={btcfiLogo.src}
+                    width={{ base: 12, md: 20 }}
+                    height={{ base: 12, md: 20 }}
+                    alt="BTCFI incentives"
+                  />
                   <Text
                     fontSize={{ base: '10px', md: '12px' }}
                     color="#B8B8B8"
                     textAlign="center"
                     maxWidth={'90px'}
+                    lineHeight="1.2"
                   >
                     BTCFI incentives
                   </Text>
+                </VStack>
+
+                <VStack spacing={1} align="center" flex="1">
+                  <Image
+                    src={riskYieldLogo.src}
+                    width={{ base: 12, md: 20 }}
+                    height={{ base: 12, md: 20 }}
+                    alt="Risk diversified and best possible yield"
+                  />
                   <Text
                     fontSize={{ base: '10px', md: '12px' }}
                     color="#B8B8B8"
                     textAlign="center"
                     maxWidth={'90px'}
+                    lineHeight="1.2"
                   >
                     Risk diversified and best possible yield
                   </Text>
-                </HStack>
-              </VStack>
+                </VStack>
+              </HStack>
 
               <Text
                 fontSize={{ base: '12px', md: '12px' }}

src/constants.ts

@@ -56,7 +56,6 @@ export const CONSTANTS = {
   },
   Troves: {
     BASE_APR_API: '/api/strategies',
-    // BASE_APR_API: 'https://beta.troves.fi/api/strategies',
   },
   MY_SWAP: {
     POOLS_API: '/myswap/data/pools/all.json',