diff --git a/components/wallet-card.js b/components/wallet-card.js index cd7211a1..5cbb13cb 100644 --- a/components/wallet-card.js +++ b/components/wallet-card.js @@ -4,12 +4,19 @@ import Plug from '@/svgs/plug.svg' import Gear from '@/svgs/settings-5-fill.svg' import Link from 'next/link' import { useWallet, Status } from './wallet' +import { useEffect, useState } from 'react' export function WalletCard ({ name, title, badges, status }) { const wallet = useWallet(name) + const [mounted, setMounted] = useState(false) + + useEffect(() => { + // fix mismatched className props during hydration + setMounted(true) + }, []) let indicator = styles.disabled - switch (wallet.status) { + switch (mounted && wallet.status) { case Status.Enabled: case true: indicator = styles.success diff --git a/components/wallet/index.js b/components/wallet/index.js index 6940b008..d01bbc88 100644 --- a/components/wallet/index.js +++ b/components/wallet/index.js @@ -89,7 +89,7 @@ export function useWallet (name) { delete: delete_, enable, disable, - isConfigured: !!config, + isConfigured: isConfigured({ ...wallet, config }), status: config?.enabled || config?.priority ? Status.Enabled : Status.Initialized, logger } @@ -122,6 +122,17 @@ function useConfig (wallet) { return [config, saveConfig, clearConfig] } +function isConfigured (wallet) { + if (!wallet.config) return false + + // a wallet is configured if all of it's required fields are set + const val = wallet.fields.every(field => { + return field.optional ? true : !!wallet.config?.[field.name] + }) + + return val +} + function useServerConfig (wallet) { const client = useApolloClient() const me = useMe()