fix(billing): enable balances fetching back

akash-network · Dec 30, 2024 · eaa42a5 · eaa42a5
1 parent 4e9d227
commit eaa42a5
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 41 deletions.
diff --git a/apps/deploy-web/src/components/deployments/DeploymentDepositModal.tsx b/apps/deploy-web/src/components/deployments/DeploymentDepositModal.tsx
@@ -193,8 +193,8 @@ export const DeploymentDepositModal: React.FunctionComponent<DeploymentDepositMo
         label: "Use depositor to deposit in deployment"
       });
     } else if (depositData && amountInDenom > depositData?.balance) {
-      // setError(`You can't deposit more than you currently have in your balance. Current balance is: ${depositData?.balance} ${depositData?.label}.`);
-      // return;
+      setError(`You can't deposit more than you currently have in your balance. Current balance is: ${depositData?.balance} ${depositData?.label}.`);
+      return;
     }
 
     onDeploymentDeposit(deposit, isManaged ? browserEnvConfig.NEXT_PUBLIC_MASTER_WALLET_ADDRESS : (depositorAddress as string));
@@ -218,6 +218,7 @@ export const DeploymentDepositModal: React.FunctionComponent<DeploymentDepositMo
           color: "secondary",
           variant: "default",
           side: "right",
+          disabled: !amount || isCheckingDepositor || (useDepositor && validGrants.length === 0) || !walletBalance,
           isLoading: isCheckingDepositor,
           onClick: onDepositClick,
           "data-testid": "deposit-modal-continue-button"

diff --git a/apps/deploy-web/src/components/layout/CreditCardBanner.tsx b/apps/deploy-web/src/components/layout/CreditCardBanner.tsx
@@ -1,14 +1,14 @@
+import { useWallet } from "@src/context/WalletProvider/WalletProvider";
+import { ConnectManagedWalletButton } from "../wallet/ConnectManagedWalletButton";
+
 export function CreditCardBanner() {
+  const { hasManagedWallet } = useWallet();
+
   return (
     <div className="fixed top-0 z-10 flex h-[40px] w-full items-center justify-center bg-primary px-3 py-2 md:space-x-4">
-      <span className="text-xs font-semibold text-white md:text-sm">
-        Console is experiencing issues causing balance not being reflected accurately. Other functionality should work as expected. Reach out to the console
-        team on{" "}
-        <a href="https://discord.com/invite/akash" className="text-white underline">
-          discord
-        </a>
-        , if you experience issues.
-      </span>
+      <span className="text-xs font-semibold text-white md:text-sm">Credit Card payments are now available!</span>
+
+      {!hasManagedWallet && <ConnectManagedWalletButton className="flex-shrink-0 text-white hover:text-white" size="sm" variant="text" />}
     </div>
   );
 }
diff --git a/apps/deploy-web/src/components/layout/Layout.tsx b/apps/deploy-web/src/components/layout/Layout.tsx
@@ -5,6 +5,7 @@ import { IntlProvider } from "react-intl";
 import { ErrorFallback, Spinner } from "@akashnetwork/ui/components";
 import { cn } from "@akashnetwork/ui/utils";
 import { useMediaQuery, useTheme as useMuiTheme } from "@mui/material";
+import { millisecondsInMinute } from "date-fns/constants";
 
 import { ACCOUNT_BAR_HEIGHT } from "@src/config/ui.config";
 import { useSettings } from "@src/context/SettingsProvider";
@@ -55,8 +56,7 @@ const LayoutApp: React.FunctionComponent<Props> = ({ children, isLoading, isUsin
   const { refreshNodeStatuses, isSettingsInit } = useSettings();
   const { isWalletLoaded } = useWallet();
   const smallScreen = useMediaQuery(muiTheme.breakpoints.down("md"));
-  // const hasCreditCardBanner = useHasCreditCardBanner();
-  const hasCreditCardBanner = true;
+  const hasCreditCardBanner = useHasCreditCardBanner();
 
   useEffect(() => {
     const _isNavOpen = localStorage.getItem("isNavOpen");
@@ -67,7 +67,7 @@ const LayoutApp: React.FunctionComponent<Props> = ({ children, isLoading, isUsin
 
     const refreshNodeIntervalId = setInterval(async () => {
       await refreshNodeStatuses();
-    }, 60_000); // refresh every 1min
+    }, millisecondsInMinute);
 
     return () => {
       clearInterval(refreshNodeIntervalId);

diff --git a/apps/deploy-web/src/hooks/useManagedDeploymentConfirm.tsx b/apps/deploy-web/src/hooks/useManagedDeploymentConfirm.tsx
@@ -44,34 +44,34 @@ export const useManagedDeploymentConfirm = () => {
         title: "Confirm deployment creation?",
         message: (
           <div className="space-y-2">
-            {/*{!hasEnoughForDeposit && (*/}
-            {/*  <Alert variant="destructive" className="text-primary">*/}
-            {/*    <AlertTitle className="font-bold">Insufficient funds</AlertTitle>*/}
-            {/*    <AlertDescription>*/}
-            {/*      <p>*/}
-            {/*        You need more than{" "}*/}
-            {/*        <FormattedNumber*/}
-            {/*          value={minDeposit.usdc}*/}
-            {/*          // eslint-disable-next-line react/style-prop-object*/}
-            {/*          style="currency"*/}
-            {/*          currency="USD"*/}
-            {/*        />{" "}*/}
-            {/*        available to create a deployment.*/}
-            {/*      </p>*/}
-            {/*      <p>*/}
-            {/*        Current available balance:{" "}*/}
-            {/*        <span className="font-bold">*/}
-            {/*          <FormattedNumber*/}
-            {/*            value={walletBalance?.totalDeploymentGrantsUSD || 0}*/}
-            {/*            // eslint-disable-next-line react/style-prop-object*/}
-            {/*            style="currency"*/}
-            {/*            currency="USD"*/}
-            {/*          />*/}
-            {/*        </span>*/}
-            {/*      </p>*/}
-            {/*    </AlertDescription>*/}
-            {/*  </Alert>*/}
-            {/*)}*/}
+            {!hasEnoughForDeposit && (
+              <Alert variant="destructive" className="text-primary">
+                <AlertTitle className="font-bold">Insufficient funds</AlertTitle>
+                <AlertDescription>
+                  <p>
+                    You need more than{" "}
+                    <FormattedNumber
+                      value={minDeposit.usdc}
+                      // eslint-disable-next-line react/style-prop-object
+                      style="currency"
+                      currency="USD"
+                    />{" "}
+                    available to create a deployment.
+                  </p>
+                  <p>
+                    Current available balance:{" "}
+                    <span className="font-bold">
+                      <FormattedNumber
+                        value={walletBalance?.totalDeploymentGrantsUSD || 0}
+                        // eslint-disable-next-line react/style-prop-object
+                        style="currency"
+                        currency="USD"
+                      />
+                    </span>
+                  </p>
+                </AlertDescription>
+              </Alert>
+            )}
 
             {services.map(service => {
               return (