diff --git a/components/wallet-indicator.js b/components/wallet-indicator.js index ee549870..a4e7365f 100644 --- a/components/wallet-indicator.js +++ b/components/wallet-indicator.js @@ -1,6 +1,6 @@ import { useConfiguredWallets } from '@/wallets' export function useWalletIndicator () { - const wallets = useConfiguredWallets() - return wallets.length === 0 + const { wallets, loading } = useConfiguredWallets() + return !loading && wallets.length === 0 } diff --git a/pages/wallets/index.js b/pages/wallets/index.js index a6d2d5cf..55861f35 100644 --- a/pages/wallets/index.js +++ b/pages/wallets/index.js @@ -3,7 +3,7 @@ import Layout from '@/components/layout' import styles from '@/styles/wallet.module.css' import Link from 'next/link' import { useWallets } from '@/wallets/index' -import { useCallback, useState } from 'react' +import { useCallback, useEffect, useState } from 'react' import { useIsClient } from '@/components/use-client' import WalletCard from '@/components/wallet-card' import { useToast } from '@/components/toast' @@ -87,6 +87,7 @@ export default function Wallet ({ ssrData }) { const indicator = useWalletIndicator() const [showWallets, setShowWallets] = useState(!indicator) + useEffect(() => { setShowWallets(!indicator) }, [indicator]) if (indicator && !showWallets) { return ( diff --git a/wallets/index.js b/wallets/index.js index c63ded59..167a3428 100644 --- a/wallets/index.js +++ b/wallets/index.js @@ -67,6 +67,7 @@ export function WalletsProvider ({ children }) { const [setWalletPriority] = useMutation(SET_WALLET_PRIORITY) const [serverWallets, setServerWallets] = useState([]) const client = useApolloClient() + const [loading, setLoading] = useState(true) const { data, refetch } = useQuery(WALLETS, SSR ? {} : { nextFetchPolicy: 'cache-and-network' }) @@ -102,6 +103,7 @@ export function WalletsProvider ({ children }) { } setServerWallets(wallets) + setLoading(false) } loadWallets() }, [data?.wallets, decrypt, isActive]) @@ -198,12 +200,13 @@ export function WalletsProvider ({ children }) { // and a function to set priorities const value = useMemo(() => ({ wallets, + loading, reloadLocalWallets, setPriorities, onVaultKeySet: syncLocalWallets, beforeDisconnectVault: unsyncLocalWallets, removeLocalWallets - }), [wallets, reloadLocalWallets, setPriorities, syncLocalWallets, unsyncLocalWallets, removeLocalWallets]) + }), [wallets, loading, reloadLocalWallets, setPriorities, syncLocalWallets, unsyncLocalWallets, removeLocalWallets]) return ( @@ -223,8 +226,11 @@ export function useWallet (name) { } export function useConfiguredWallets () { - const { wallets } = useWallets() - return useMemo(() => wallets.filter(w => isConfigured(w)), [wallets]) + const { wallets, loading } = useWallets() + return useMemo(() => ({ + wallets: wallets.filter(w => isConfigured(w)), + loading + }), [wallets, loading]) } export function useSendWallets () {