wallet-amount

components/UI/profileCard/profileCard.tsx

@@ -21,6 +21,7 @@ import { getTweetLink } from "@utils/browserService";
 import { hexToDecimal } from "@utils/feltService";
 import { TEXT_TYPE } from "@constants/typography";
 import Typography from "../typography/typography";
+import { calculateTotalBalance } from '../../../services/argentPortfolioService';
 
 type ProfileCardProps = {
   rankingData: RankingData;
@@ -36,6 +37,7 @@ const ProfileCard: FunctionComponent<ProfileCardProps> = ({
   isOwner,
 }) => {
   const [userXp, setUserXp] = useState<number>();
+  const [totalBalance, setTotalBalance] = useState<number | null>(null);
   const sinceDate = useCreationDate(identity);
   const formattedAddress = (
     identity.owner.startsWith("0x") ? identity.owner : `0x${identity.owner}`
@@ -48,6 +50,19 @@ const ProfileCard: FunctionComponent<ProfileCardProps> = ({
     return rank;
   }, []);
 
+  useEffect(() => {
+    const fetchTotalBalance = async () => {
+      try {
+        const balance = await calculateTotalBalance(formattedAddress, "USD");
+        setTotalBalance(balance);
+      } catch (err) {
+        console.error("Error fetching total balance:", err);
+      }
+    };
+
+    fetchTotalBalance();
+  }, [formattedAddress]);
+
   const computeData = useCallback(() => {
     if (
       rankingData &&
@@ -108,7 +123,7 @@ const ProfileCard: FunctionComponent<ProfileCardProps> = ({
                 type={TEXT_TYPE.BODY_SMALL}
                 className={`${styles.wallet_amount} font-extrabold`}
               >
-                $2,338.34
+                {totalBalance !== null ? `$${totalBalance.toFixed(2)}` : "Loading..."}
               </Typography>
               <EyeIcon />
             </div>

services/argentPortfolioService.ts

@@ -64,3 +64,32 @@ export const calculateTokenPrice = async (
     throw err;
   }
 };
+
+export const calculateTotalBalance = async (
+  walletAddress: string,
+  currency: "USD" | "EUR" | "GBP" = "USD"
+): Promise<number> => {
+  try {
+    const tokens = await fetchUserTokens(walletAddress); // Fetch all tokens in wallet
+    let totalBalance = 0;
+
+    for (const token of tokens) {
+      try {
+        // Calculate the price of each token and add it to the total balance
+        const tokenValue = await calculateTokenPrice(
+          token.tokenAddress,
+          token.tokenBalance,
+          currency
+        );
+        totalBalance += tokenValue;
+      } catch (err) {
+        console.error(`Error calculating price for token ${token.tokenAddress}:`, err);
+      }
+    }
+
+    return totalBalance;
+  } catch (err) {
+    console.error("Error calculating total balance:", err);
+    throw err;
+  }
+};