scale token price by decimals of both tokens

fluidity-money · Jun 11, 2024 · 2291e75 · 2291e75
1 parent 4250be7
commit 2291e75
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/web/src/app/SwapForm.tsx b/web/src/app/SwapForm.tsx
@@ -42,6 +42,7 @@ import { useGraphqlGlobal } from "@/hooks/useGraphql";
 import { usdFormat } from "@/lib/usdFormat";
 import { useToast } from "@/components/ui/use-toast";
 import { estimateContractGas } from "viem/actions";
+import { getFormattedPriceFromAmount } from "@/lib/amounts";
 
 const SwapFormFragment = graphql(`
   fragment SwapFormFragment on SeawaterPool {
@@ -485,7 +486,7 @@ export const SwapForm = () => {
 
               <div className={"flex flex-row items-center justify-between"}>
                 <div className={"text-[10px] text-zinc-400"}>
-                  ${token0.address === fUSDC.address ? token0AmountFloat : token0AmountFloat * Number(tokenPrice)}
+                  ${token0.address === fUSDC.address ? token0AmountFloat : getFormattedPriceFromAmount(token0AmountFloat.toString(), tokenPrice, token0.decimals, token1.decimals)}
                 </div>
 
                 <div
@@ -561,7 +562,7 @@ export const SwapForm = () => {
 
               <div className={"flex flex-row items-center justify-between"}>
                 <div className={"text-[10px] text-zinc-400"}>
-                  ${token1.address === fUSDC.address ? token1AmountFloat : token1AmountFloat * Number(tokenPrice)}
+                  ${token1.address === fUSDC.address ? token1AmountFloat : getFormattedPriceFromAmount(token1AmountFloat.toString(), tokenPrice, token1.decimals, token0.decimals)}
                 </div>
 
                 <div

diff --git a/web/src/components/ConfirmStake.tsx b/web/src/components/ConfirmStake.tsx
@@ -23,6 +23,7 @@ import Confirm from "@/components/sequence/Confirm";
 import { EnableSpending } from "@/components/sequence/EnableSpending";
 import { Fail } from "@/components/sequence/Fail";
 import { Success } from "@/components/sequence/Success";
+import { getFormattedPriceFromAmount } from "@/lib/amounts";
 
 type ConfirmStakeProps = {
   mode: "new"
@@ -341,7 +342,7 @@ export const ConfirmStake = ({ mode, positionId }: ConfirmStakeProps) => {
             </span>
           </div>
           <div className="mt-[4px] text-2xl font-medium md:text-3xl">
-            ${Number(token1Amount) + (Number(token0Amount) * Number(tokenPrice))}
+            ${getFormattedPriceFromAmount(token0Amount, tokenPrice, token0.decimals, token1.decimals) + Number(token1Amount)}
           </div>
           <div className="mt-[4px] text-3xs font-medium text-gray-2 md:text-2xs">
             The amount is split into{" "}
@@ -424,7 +425,7 @@ export const ConfirmStake = ({ mode, positionId }: ConfirmStakeProps) => {
           <div className="mt-1 flex flex-row items-center gap-1 text-2xl">
             <Ethereum className={"invert"} /> {token0Amount}
           </div>
-          <div className="mt-0.5 text-2xs text-gray-2 md:text-xs">= ${Number(token0Amount) * Number(tokenPrice)}</div>
+          <div className="mt-0.5 text-2xs text-gray-2 md:text-xs">= ${getFormattedPriceFromAmount(token0Amount, tokenPrice, token0.decimals, token1.decimals)}</div>
         </div>
 
         <div

diff --git a/web/src/components/StakeForm.tsx b/web/src/components/StakeForm.tsx
@@ -44,6 +44,7 @@ import { graphql, useFragment } from "@/gql";
 import { useGraphqlGlobal } from "@/hooks/useGraphql";
 import { usdFormat } from "@/lib/usdFormat";
 import { Token as TokenType, fUSDC } from "@/config/tokens";
+import { getFormattedPriceFromAmount } from "@/lib/amounts";
 
 const colorGradient = new echarts.graphic.LinearGradient(
   0,
@@ -390,7 +391,7 @@ export const StakeForm = ({ mode, poolId, positionId }: StakeFormProps) => {
 
             <div className="mt-[5px] flex w-full flex-row items-center justify-between">
               <div className="text-2xs md:text-gray-1">
-                ${token0.address === fUSDC.address ? token0Amount : Number(token0Amount) * Number(tokenPrice)}
+                ${token0.address === fUSDC.address ? token0Amount : getFormattedPriceFromAmount(token0Amount, tokenPrice, token0.decimals, token1.decimals)}
               </div>
 
               <div className="flex flex-row gap-[8px] text-3xs md:text-2xs">
@@ -449,7 +450,7 @@ export const StakeForm = ({ mode, poolId, positionId }: StakeFormProps) => {
 
               <div className="mt-[5px] flex w-full flex-row items-center justify-between">
                 <div className="text-2xs md:text-gray-1">
-                  ${token1.address === fUSDC.address ? token1Amount : Number(token1Amount) * Number(tokenPrice)}
+                  ${token1.address === fUSDC.address ? token1Amount : getFormattedPriceFromAmount(token1Amount, tokenPrice, token1.decimals, token0.decimals)}
                 </div>
                 <div className="flex flex-row gap-[8px] text-3xs md:text-2xs">
                   {token1Balance && (

diff --git a/web/src/lib/amounts.ts b/web/src/lib/amounts.ts
@@ -60,8 +60,20 @@ const getTokenAmountFromFormattedString = (amount: string, decimals: number): bi
   return wholeBig + decimalsBig
 }
 
+/**
+ * @description scale a formatted amount string by the price of the pool
+ * @param amount - formatted string
+ * @param price - the pool price as obtained from sqrtPriceX96 then converted to a price
+ * @param decimals0 - the decimals of the non-fUSDC token
+ * @param decimals1 - the decimals of fUSDC
+ * @returns the scaled price amount in USD
+ */
+const getFormattedPriceFromAmount = (amount: string, price: string | bigint, decimals0: number, decimals1: number): number =>
+  Number(amount) * Number(price) * 10 ** (decimals0 - decimals1)
+
 export {
-    getFormattedStringFromTokenAmount,
-    getTokenAmountFromFormattedString,
+  getFormattedStringFromTokenAmount,
+  getTokenAmountFromFormattedString,
+  getFormattedPriceFromAmount
 }