feat(deployment): ensure usd values in deployments for managed wallets

refs #247
akash-network · Sep 10, 2024 · 2605d7b · 2605d7b
1 parent 2190000
commit 2605d7b
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 43 deletions.
diff --git a/apps/deploy-web/src/components/deployments/DeploymentListRow.tsx b/apps/deploy-web/src/components/deployments/DeploymentListRow.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { ReactNode, useState } from "react";
+import { ReactNode, useMemo, useState } from "react";
 import {
   Button,
   Checkbox,
@@ -172,12 +172,23 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
     router.push(url);
   };
 
-  function onDepositClicked(e?: React.MouseEvent) {
+  function showDepositModal(e?: React.MouseEvent) {
     e?.preventDefault();
     e?.stopPropagation();
     setIsDepositingDeployment(true);
   }
 
+  const escrowBalanceInDenom = useMemo(() => {
+    let uDenomBalance: number | undefined;
+
+    if (isActive && hasActiveLeases && realTimeLeft) {
+      uDenomBalance = realTimeLeft?.escrow;
+    } else {
+      uDenomBalance = escrowBalance;
+    }
+    return uDenomBalance && udenomToDenom(uDenomBalance, 6);
+  }, [isActive, hasActiveLeases, realTimeLeft, escrowBalance]);
+
   return (
     <>
       <TableRow className="cursor-pointer hover:bg-muted-foreground/10 [&>td]:p-2" onClick={() => viewDeployment()}>
@@ -205,7 +216,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
                       {isManagedWallet ? (
                         "Add funds"
                       ) : (
-                        <a href="#" onClick={onDepositClicked}>
+                        <a href="#" onClick={showDepositModal}>
                           Add Funds
                         </a>
                       )}{" "}
@@ -220,25 +231,30 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
           )}
         </TableCell>
         <TableCell className="text-center">
-          {isActive && !!escrowBalance && (
+          {isActive && !!escrowBalanceInDenom && !!escrowBalance && (
             <div className="inline-flex">
-              <PriceValue
-                denom={deployment.escrowAccount.balance.denom}
-                value={udenomToDenom(isActive && hasActiveLeases && realTimeLeft ? realTimeLeft?.escrow : escrowBalance, 6)}
-              />
+              <PriceValue denom={deployment.escrowAccount.balance.denom} value={escrowBalanceInDenom} />
               <CustomTooltip
                 title={
                   <div className="text-left">
                     <div className="space-x-2">
                       <span>Balance:</span>
                       <strong>
-                        {udenomToDenom(isActive && hasActiveLeases && realTimeLeft ? realTimeLeft?.escrow : escrowBalance, 6)}&nbsp;{denomData?.label}
+                        {isManagedWallet ? (
+                          <PriceValue denom={deployment.escrowAccount.balance.denom} value={escrowBalanceInDenom} />
+                        ) : (
+                          `${escrowBalanceInDenom}&nbsp;{denomData?.label}`
+                        )}
                       </strong>
                     </div>
                     <div className="space-x-2">
                       <span>Spent:</span>
                       <strong>
-                        {udenomToDenom(amountSpent || 0, 2)} {denomData?.label}
+                        {isManagedWallet ? (
+                          <PriceValue denom={deployment.escrowAccount.balance.denom} value={udenomToDenom(amountSpent || 0, 2)} />
+                        ) : (
+                          `${udenomToDenom(amountSpent || 0, 2)}&nbsp;${denomData?.label}`
+                        )}
                       </strong>
                     </div>
                     <br />
@@ -265,15 +281,17 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
               <div className="flex items-center">
                 <PricePerMonth denom={deployment.escrowAccount.balance.denom} perBlockValue={udenomToDenom(deploymentCost, 10)} className="whitespace-nowrap" />
 
-                <CustomTooltip
-                  title={
-                    <span>
-                      {avgCost} {denomData?.label} / month
-                    </span>
-                  }
-                >
-                  <InfoCircle className="ml-2 text-xs text-muted-foreground" />
-                </CustomTooltip>
+                {!isManagedWallet && (
+                  <CustomTooltip
+                    title={
+                      <span>
+                        {avgCost} {denomData?.label} / month
+                      </span>
+                    }
+                  >
+                    <InfoCircle className="ml-2 text-xs text-muted-foreground" />
+                  </CustomTooltip>
+                )}
               </div>
             </div>
           )}
@@ -318,8 +336,8 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
                 >
                   <ClickAwayListener onClickAway={() => setOpen(false)}>
                     <div>
-                      {isActive && !isManagedWallet && (
-                        <CustomDropdownLinkItem onClick={onDepositClicked} icon={<Plus fontSize="small" />}>
+                      {isActive && (
+                        <CustomDropdownLinkItem onClick={showDepositModal} icon={<Plus fontSize="small" />}>
                           Add funds
                         </CustomDropdownLinkItem>
                       )}

diff --git a/apps/deploy-web/src/types/coin.ts b/apps/deploy-web/src/types/coin.ts
diff --git a/apps/deploy-web/src/types/index.ts b/apps/deploy-web/src/types/index.ts
@@ -1,19 +1,13 @@
 export * from "./dashboard";
 export * from "./block";
 export * from "./transaction";
-export * from "./coin";
 export * from "./address";
 export * from "./snapshots";
 export * from "./sdlBuilder";
 export * from "./billing";
 export * from "./templates";
 export * from "./providerAttributes";
 
-export type IGraphDataPoint = {
-  date: string;
-  value: number;
-};
-
 export type PaginatedResults<T> = {
   results: T[];
   count: number;

diff --git a/apps/deploy-web/src/utils/mathHelpers.ts b/apps/deploy-web/src/utils/mathHelpers.ts
@@ -1,5 +1,3 @@
-import { Coin } from "@src/types";
-
 export function nFormatter(num: number, digits: number) {
   const lookup = [
     { value: 1, symbol: "" },
@@ -29,10 +27,6 @@ export function denomToUdenom(amount: number, decimals: number = 1_000_000) {
   return amount * decimals;
 }
 
-export function randomInteger(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
 export function roundDecimal(value: number, precision = 2) {
   const multiplier = Math.pow(10, precision || 0);
   return Math.round((value + Number.EPSILON) * multiplier) / multiplier;
@@ -42,12 +36,6 @@ export function ceilDecimal(value: number) {
   return Math.ceil((value + Number.EPSILON) * 1000) / 1000;
 }
 
-export function coinsToAmount(coins: Coin[] | Coin, denom: string) {
-  const currentCoin = (coins as any).length !== undefined ? (coins as Coin[]).find(c => c.denom === denom) : (coins as Coin);
-  if (!currentCoin) return 0;
-  else return currentCoin.amount;
-}
-
 export function percIncrease(a: number, b: number) {
   let percent: number;
   if (b !== 0) {

diff --git a/package-lock.json b/package-lock.json