Fix isConfigured

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

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()