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 - - 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 };