diff --git a/apps/deploy-web/src/components/layout/WalletStatus.tsx b/apps/deploy-web/src/components/layout/WalletStatus.tsx
index e64d58c2d..0909279fd 100644
--- a/apps/deploy-web/src/components/layout/WalletStatus.tsx
+++ b/apps/deploy-web/src/components/layout/WalletStatus.tsx
@@ -21,13 +21,15 @@ const withBilling = browserEnvConfig.NEXT_PUBLIC_BILLING_ENABLED;
export function WalletStatus() {
const { walletName, isWalletLoaded, isWalletConnected, isManaged, isWalletLoading, isTrialing } = useWallet();
- const { balance: walletBalance } = useWalletBalance();
+ const { balance: walletBalance, isLoading: isWalletBalanceLoading } = useWalletBalance();
const [isSignedInWithTrial] = useAtom(walletStore.isSignedInWithTrial);
const [open, setOpen] = useState(false);
+ const isLoadingBalance = isWalletBalanceLoading && !walletBalance;
+ const isInit = isWalletLoaded && !isWalletLoading && !isLoadingBalance;
return (
<>
- {isWalletLoaded && !isWalletLoading ? (
+ {isInit ? (
isWalletConnected ? (
diff --git a/apps/deploy-web/src/components/wallet/ManagedWalletPopup.tsx b/apps/deploy-web/src/components/wallet/ManagedWalletPopup.tsx
index 9ede25f11..a42f31648 100644
--- a/apps/deploy-web/src/components/wallet/ManagedWalletPopup.tsx
+++ b/apps/deploy-web/src/components/wallet/ManagedWalletPopup.tsx
@@ -4,6 +4,7 @@ import { Button, Separator } from "@akashnetwork/ui/components";
import { CoinsSwap, HandCard } from "iconoir-react";
import { TopUpAmountPicker } from "@src/components/top-up-amount-picker/TopUpAmountPicker";
+import { useSelectedChain } from "@src/context/CustomChainProvider";
import { useWallet } from "@src/context/WalletProvider";
import { useLoginRequiredEventHandler } from "@src/hooks/useLoginRequiredEventHandler";
import { useManagedEscrowFaqModal } from "@src/hooks/useManagedEscrowFaqModal";
@@ -18,9 +19,10 @@ interface ManagedWalletPopupProps extends React.PropsWithChildren {
export const ManagedWalletPopup: React.FC = ({ walletBalance }) => {
const isEmailVerified = useIsEmailVerified();
- const { switchWalletType, isManaged, isTrialing } = useWallet();
+ const { isManaged, isTrialing, switchWalletType } = useWallet();
const whenLoggedIn = useLoginRequiredEventHandler();
const { showManagedEscrowFaqModal } = useManagedEscrowFaqModal();
+ const { connect, isWalletConnected } = useSelectedChain();
const goToCheckout = () => {
window.location.href = "/api/proxy/v1/checkout";
@@ -77,12 +79,17 @@ export const ManagedWalletPopup: React.FC = ({ walletBa
-
-
+
Switch to Wallet Payments
diff --git a/apps/deploy-web/src/context/CustomChainProvider/CustomChainProvider.tsx b/apps/deploy-web/src/context/CustomChainProvider/CustomChainProvider.tsx
index a4db0d5da..80488f5a2 100644
--- a/apps/deploy-web/src/context/CustomChainProvider/CustomChainProvider.tsx
+++ b/apps/deploy-web/src/context/CustomChainProvider/CustomChainProvider.tsx
@@ -69,11 +69,17 @@ export function useSelectedChain() {
}
const ModalWrapper = (props: WalletModalProps) => {
- const [, setIsWalletModalOpen] = useAtom(walletStore.isWalletModalOpen);
+ const { isWalletConnected } = useSelectedChain();
+ const [isWalletModalOpen, setIsWalletModalOpen] = useAtom(walletStore.isWalletModalOpen);
+ const [, setSelectedWalletType] = useAtom(walletStore.selectedWalletType);
useEffect(() => {
setIsWalletModalOpen(props.isOpen);
- }, [props.isOpen]);
+
+ if (isWalletModalOpen && !props.isOpen && isWalletConnected) {
+ setSelectedWalletType("custodial");
+ }
+ }, [isWalletModalOpen, props.isOpen, isWalletConnected]);
return ;
};
diff --git a/apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx b/apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx
index 0ee880187..39a468806 100644
--- a/apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx
+++ b/apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx
@@ -24,7 +24,7 @@ import networkStore from "@src/store/networkStore";
import walletStore from "@src/store/walletStore";
import { AnalyticsCategory, AnalyticsEvents } from "@src/types/analytics";
import { UrlService } from "@src/utils/urlUtils";
-import { getSelectedStorageWallet, getStorageWallets, updateStorageManagedWallet, updateStorageWallets } from "@src/utils/walletUtils";
+import { getStorageWallets, updateStorageManagedWallet, updateStorageWallets } from "@src/utils/walletUtils";
import { useSelectedChain } from "../CustomChainProvider";
import { useSettings } from "../SettingsProvider";
@@ -66,8 +66,6 @@ const MESSAGE_STATES: Record = {
"/akash.deployment.v1beta3.MsgDepositDeployment": "depositingDeployment"
};
-const initialWallet = getSelectedStorageWallet();
-
export const WalletProvider = ({ children }) => {
const [isWalletLoaded, setIsWalletLoaded] = useState(true);
const [loadingState, setLoadingState] = useState(undefined);
@@ -76,11 +74,9 @@ export const WalletProvider = ({ children }) => {
const { settings } = useSettings();
const user = useUser();
const userWallet = useSelectedChain();
- const { wallet: managedWallet, isLoading, create: createManagedWallet } = useManagedWallet();
- const [isWalletModalOpen, setIsWalletModelOpen] = useAtom(walletStore.isWalletModalOpen);
- const [selectedWalletType, selectWalletType] = useState<"managed" | "custodial">(
- initialWallet?.selected && initialWallet?.isManaged ? "managed" : "custodial"
- );
+ const { wallet: managedWallet, isLoading: isManagedWalletLoading, create: createManagedWallet } = useManagedWallet();
+ const [, setIsWalletModelOpen] = useAtom(walletStore.isWalletModalOpen);
+ const [selectedWalletType, setSelectedWalletType] = useAtom(walletStore.selectedWalletType);
const {
address: walletAddress,
username,
@@ -93,11 +89,9 @@ export const WalletProvider = ({ children }) => {
fee: { default: feeGranter }
} = useAllowance(walletAddress as string, isManaged);
const [selectedNetworkId, setSelectedNetworkId] = networkStore.useSelectedNetworkIdStore({ reloadOnChange: true });
- const shouldAutoConnectManagedWallet =
- !isWalletConnected && selectedWalletType === "custodial" && !!managedWallet && !isWalletModalOpen && !userWallet.isWalletConnecting;
+ const isLoading = (selectedWalletType === "managed" && isManagedWalletLoading) || (selectedWalletType === "custodial" && userWallet.isWalletConnecting);
useWhen(walletAddress, loadWallet);
- useWhen(shouldAutoConnectManagedWallet, switchWalletType);
useEffect(() => {
if (!settings.apiEndpoint || !settings.rpcEndpoint) return;
@@ -126,14 +120,14 @@ export const WalletProvider = ({ children }) => {
});
}
- selectWalletType(prev => (prev === "custodial" ? "managed" : "custodial"));
+ setSelectedWalletType(prev => (prev === "custodial" ? "managed" : "custodial"));
}
function connectManagedWallet() {
if (!managedWallet) {
createManagedWallet();
}
- selectWalletType("managed");
+ setSelectedWalletType("managed");
}
function logout() {
@@ -145,6 +139,10 @@ export const WalletProvider = ({ children }) => {
});
router.push(UrlService.home());
+
+ if (managedWallet) {
+ setSelectedWalletType("managed");
+ }
}
async function connectWallet() {
diff --git a/apps/deploy-web/src/store/walletStore.ts b/apps/deploy-web/src/store/walletStore.ts
index acbf2b54c..743e6ecef 100644
--- a/apps/deploy-web/src/store/walletStore.ts
+++ b/apps/deploy-web/src/store/walletStore.ts
@@ -2,9 +2,11 @@ import { atom } from "jotai";
import { atomWithStorage } from "jotai/utils";
const isSignedInWithTrial = atomWithStorage("isSignedInWithTrial", false);
+const selectedWalletType = atomWithStorage<"managed" | "custodial">("selectedWalletType", "custodial");
const isWalletModalOpen = atom(false);
export default {
isSignedInWithTrial,
+ selectedWalletType,
isWalletModalOpen
};