fix/usdc-display-deployment-detail

deploy-web/src/components/deploymentDetail/DeploymentSubHeader.tsx

@@ -3,7 +3,7 @@ import WarningIcon from "@mui/icons-material/Warning";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
 import isValid from "date-fns/isValid";
 import { makeStyles } from "tss-react/mui";
-import { getAvgCostPerMonth, uaktToAKT, useRealTimeLeft } from "@src/utils/priceUtils";
+import { getAvgCostPerMonth, useRealTimeLeft } from "@src/utils/priceUtils";
 import { Box } from "@mui/material";
 import { PriceValue } from "../shared/PriceValue";
 import { PricePerMonth } from "../shared/PricePerMonth";
@@ -12,6 +12,8 @@ import { CustomTooltip } from "../shared/CustomTooltip";
 import { LabelValue } from "../shared/LabelValue";
 import { ReactNode } from "react";
 import { DeploymentDto, LeaseDto } from "@src/types/deployment";
+import { udenomToDenom } from "@src/utils/mathHelpers";
+import { useDenomData } from "@src/hooks/useWalletBalance";
 
 const useStyles = makeStyles()(theme => ({
   warningIcon: {
@@ -30,9 +32,10 @@ export const DeploymentSubHeader: React.FunctionComponent<Props> = ({ deployment
   const hasLeases = leases && leases.length > 0;
   const deploymentCost = hasLeases ? leases.reduce((prev, current) => prev + parseFloat(current.price.amount), 0) : 0;
   const realTimeLeft = useRealTimeLeft(deploymentCost, deployment.escrowBalance, parseFloat(deployment.escrowAccount.settled_at), deployment.createdAt);
-  const avgCost = uaktToAKT(getAvgCostPerMonth(deploymentCost));
+  const avgCost = udenomToDenom(getAvgCostPerMonth(deploymentCost));
   const isActive = deployment.state === "active";
   const hasActiveLeases = hasLeases && leases.some(l => l.state === "active");
+  const denomData = useDenomData(deployment.escrowAccount.balance.denom);
 
   return (
     <Box
@@ -51,13 +54,15 @@ export const DeploymentSubHeader: React.FunctionComponent<Props> = ({ deployment
             <Box sx={{ display: "flex", alignItems: "center" }}>
               <PriceValue
                 denom={deployment.escrowAccount.balance.denom}
-                value={uaktToAKT(isActive && hasActiveLeases ? realTimeLeft?.escrow : deployment.escrowBalance, 6)}
+                value={udenomToDenom(isActive && hasActiveLeases ? realTimeLeft?.escrow : deployment.escrowBalance, 6)}
               />
               <CustomTooltip
                 arrow
                 title={
                   <>
-                    <strong>{uaktToAKT(isActive && hasActiveLeases ? realTimeLeft?.escrow : deployment.escrowBalance, 6)}&nbsp;AKT</strong>
+                    <strong>
+                      {udenomToDenom(isActive && hasActiveLeases ? realTimeLeft?.escrow : deployment.escrowBalance, 6)}&nbsp;{denomData?.label}
+                    </strong>
                     <br />
                     The escrow account balance will be fully returned to your wallet balance when the deployment is closed.{" "}
                   </>
@@ -83,9 +88,16 @@ export const DeploymentSubHeader: React.FunctionComponent<Props> = ({ deployment
           value={
             !!deploymentCost && (
               <Box sx={{ display: "flex", alignItems: "center" }}>
-                <PricePerMonth denom={deployment.escrowAccount.balance.denom} perBlockValue={uaktToAKT(deploymentCost, 6)} typoVariant="body1" />
+                <PricePerMonth denom={deployment.escrowAccount.balance.denom} perBlockValue={udenomToDenom(deploymentCost, 6)} typoVariant="body1" />
 
-                <CustomTooltip arrow title={<span>{avgCost} AKT / month</span>}>
+                <CustomTooltip
+                  arrow
+                  title={
+                    <span>
+                      {avgCost} {denomData?.label} / month
+                    </span>
+                  }
+                >
                   <InfoIcon fontSize="small" color="disabled" sx={{ marginLeft: ".5rem" }} />
                 </CustomTooltip>
               </Box>
@@ -99,12 +111,16 @@ export const DeploymentSubHeader: React.FunctionComponent<Props> = ({ deployment
             <Box sx={{ display: "flex", alignItems: "center" }}>
               <PriceValue
                 denom={deployment.escrowAccount.balance.denom}
-                value={uaktToAKT(isActive && hasActiveLeases ? realTimeLeft?.amountSpent : parseFloat(deployment.transferred.amount), 6)}
+                value={udenomToDenom(isActive && hasActiveLeases ? realTimeLeft?.amountSpent : parseFloat(deployment.transferred.amount), 6)}
               />
 
               <CustomTooltip
                 arrow
-                title={<span>{uaktToAKT(isActive && hasActiveLeases ? realTimeLeft?.amountSpent : parseFloat(deployment.transferred.amount), 6)} AKT</span>}
+                title={
+                  <span>
+                    {udenomToDenom(isActive && hasActiveLeases ? realTimeLeft?.amountSpent : parseFloat(deployment.transferred.amount), 6)} {denomData?.label}
+                  </span>
+                }
               >
                 <InfoIcon fontSize="small" color="disabled" sx={{ marginLeft: ".5rem" }} />
               </CustomTooltip>

deploy-web/src/hooks/useWalletBalance.ts

@@ -56,11 +56,11 @@ export const useDenomData = (denom: string) => {
         default:
           break;
       }
-      console.log(denom, depositData);
+      console.log(walletBalances, denom, depositData);
 
       setDepositData(depositData);
     }
-  }, [isLoaded, price, walletBalances]);
+  }, [isLoaded, price, walletBalances, usdcIbcDenom]);
 
   return depositData;
 };

deploy-web/src/types/deployment.ts

@@ -210,6 +210,7 @@ export interface DeploymentDto {
   dseq: string;
   state: string;
   version: string;
+  denom: string;
   createdAt: number;
   escrowBalance: number;
   transferred: {

deploy-web/src/utils/deploymentDetailUtils.ts

@@ -1,8 +1,10 @@
 import { DeploymentDto, LeaseDto, RpcDeployment, RpcLease } from "@src/types/deployment";
-import { coinToUAkt } from "./priceUtils";
+import { coinToUAkt, coinToUDenom } from "./priceUtils";
 
 export function deploymentResourceSum(deployment: RpcDeployment, resourceSelector) {
-  return deployment.groups.map(g => g.group_spec.resources.map(r => r.count * resourceSelector(r.resources ?? r.resource)).reduce((a, b) => a + b)).reduce((a, b) => a + b);
+  return deployment.groups
+    .map(g => g.group_spec.resources.map(r => r.count * resourceSelector(r.resources ?? r.resource)).reduce((a, b) => a + b))
+    .reduce((a, b) => a + b);
 }
 
 export function deploymentGroupResourceSum(group, resourceSelector) {
@@ -12,15 +14,16 @@ export function deploymentGroupResourceSum(group, resourceSelector) {
 }
 
 export function deploymentToDto(d: RpcDeployment): DeploymentDto {
-  let escrowBalanceUAkt = coinToUAkt(d.escrow_account.balance);
+  let escrowBalanceUAkt = coinToUDenom(d.escrow_account.balance);
   if (d.escrow_account.funds) {
-    escrowBalanceUAkt += coinToUAkt(d.escrow_account.funds);
+    escrowBalanceUAkt += coinToUDenom(d.escrow_account.funds);
   }
 
   return {
     dseq: d.deployment.deployment_id.dseq,
     state: d.deployment.state,
     version: d.deployment.version,
+    denom: d.escrow_account.balance.denom,
     createdAt: parseInt(d.deployment.created_at),
     escrowBalance: escrowBalanceUAkt,
     transferred: d.escrow_account.transferred,

deploy-web/src/utils/mathHelpers.ts

@@ -21,7 +21,7 @@ export function nFormatter(num: number, digits: number) {
 }
 
 export function udenomToDenom(_amount: string | number, precision = 6, decimals: number = 1_000_000) {
-  const amount = typeof _amount === "string" ? parseInt(_amount) : _amount;
+  const amount = typeof _amount === "string" ? parseFloat(_amount) : _amount;
   return roundDecimal(amount / decimals, precision);
 }
 
@@ -39,7 +39,7 @@ export function roundDecimal(value: number, precision = 2) {
 }
 
 export function ceilDecimal(value: number) {
-  return Math.ceil((value + Number.EPSILON) * 100) / 100;
+  return Math.ceil((value + Number.EPSILON) * 1000) / 1000;
 }
 
 export function coinsToAmount(coins: Coin[] | Coin, denom: string) {

deploy-web/src/utils/priceUtils.ts

@@ -2,6 +2,8 @@ import { useBlock } from "@src/queries/useBlocksQuery";
 import add from "date-fns/add";
 import { averageDaysInMonth } from "./dateUtils";
 import { Coin } from "@cosmjs/stargate";
+import { denomToUdenom } from "./mathHelpers";
+import { getUsdcDenom } from "@src/hooks/useDenom";
 
 export const averageBlockTime = 6.098;
 
@@ -26,6 +28,21 @@ export function coinToUAkt(coin: Coin) {
   return uakt;
 }
 
+export function coinToUDenom(coin: Coin) {
+  let uakt: number = null;
+  const usdcDenom = getUsdcDenom();
+
+  if (coin.denom === "akt") {
+    uakt = denomToUdenom(parseFloat(coin.amount));
+  } else if (coin.denom === "uakt" || coin.denom === usdcDenom) {
+    uakt = parseFloat(coin.amount);
+  } else {
+    throw Error("Unrecognized denom: " + coin.denom);
+  }
+
+  return uakt;
+}
+
 export function coinToAkt(coin: Coin) {
   let akt: number = null;
   if (coin.denom === "akt") {