add useBusdExpectation

app/javascript/src/hooks/useBusdExpectation.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+import type { Token } from "../constants/pancake/Tokens";
+import { getPriceInBusd } from "../utils/getPrice";
+
+export const useBusdExpectation = (token: Token, amount: number) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [total, setTotal] = useState<string>("0.00");
+
+  useEffect(() => {
+    getPriceInBusd(token).then((price) => {
+      setTotal(price.multipliedBy(amount).toFixed(2));
+      setIsLoading(false);
+    });
+  });
+
+  return {
+    total,
+    isLoading,
+  };
+};

app/javascript/src/pages/Home/Pool.tsx

@@ -31,8 +31,8 @@ export const Pool: FC<PoolProps> = ({ pool, balance }) => {
 
   React.useEffect(() => {
     (async () => {
-      const stakingPrice = await getPriceInBusd(router, pool.stakingToken);
-      const earningPrice = await getPriceInBusd(router, pool.earningToken);
+      const stakingPrice = await getPriceInBusd(pool.stakingToken);
+      const earningPrice = await getPriceInBusd(pool.earningToken);
 
       const totalStaked = await getTotalStaked(provider, pool);
 

app/javascript/src/pages/Wallet/Balance.tsx

@@ -4,6 +4,8 @@ import React from "react";
 import { useFragment } from "react-relay";
 
 import { Table, TableRow } from "../../components";
+import { tokens } from "../../constants/pancake/Tokens";
+import { useBusdExpectation } from "../../hooks/useBusdExpectation";
 import { formatCake } from "../../utils/cake";
 import { getCurrencyLogo } from "../../utils/getCurrencyLogo";
 import type { Balance_wallet$key } from "./__generated__/Balance_wallet.graphql";
@@ -26,10 +28,15 @@ export const Balance: FC<Props> = ({ userRef }) => {
 
   const cakeBalance = formatCake(wallet.cakeBalance);
 
+  const { total } = useBusdExpectation(
+    tokens.cake,
+    parseFloat(wallet.cakeBalance)
+  );
+
   return (
     <div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
       <div className="inline-block min-w-full shadow rounded-lg overflow-hidden">
-        <Table columns={["Moeda", "Saldo"]}>
+        <Table columns={["Moeda", "Saldo", "Expectativa em Dólar"]}>
           <TableRow
             items={[
               <div className="flex items-center" key="pancake coin">
@@ -45,6 +52,7 @@ export const Balance: FC<Props> = ({ userRef }) => {
                 </div>
               </div>,
               cakeBalance,
+              total,
             ]}
           />
         </Table>

app/javascript/src/utils/getPrice.ts

@@ -1,16 +1,19 @@
-import type { Contract } from "ethers";
-import { ethers } from "ethers";
 import BigNumber from "bignumber.js";
 
-import { tokens } from "../constants/pancake/Tokens";
 import type { Token } from "../constants/pancake/Tokens";
-import { BIG_TEN } from "./getTotalStaked";
 
-// 1 Wei = 1*10^18 Ether
-const ONE_BUSD_IN_WEI = ethers.utils.parseUnits("1", 18);
+type Response = {
+  updated_at: number;
+  data: {
+    name: string;
+    symbol: string;
+    price: string;
+    price_BNB: string;
+  };
+};
 
-export const getPriceInBusd = async (router: Contract, token: Token) => {
-  const response = await fetch(
+export const getPriceInBusd = async (token: Token) => {
+  const response: Response = await fetch(
     `https://api.pancakeswap.info/api/v2/tokens/${token.address["56"]}`
   ).then((r) => r.json());