Use validation for WebLN wallet (#1277)

* remove available prop
* 'enabled' checkbox is now always enabled but uses validation
* CheckboxGroup was missing to show error message

pages/settings/wallets/[wallet].js

@@ -1,5 +1,5 @@
 import { getGetServerSideProps } from '@/api/ssrApollo'
-import { Form, ClientInput, ClientCheckbox, PasswordInput } from '@/components/form'
+import { Form, ClientInput, ClientCheckbox, PasswordInput, CheckboxGroup } from '@/components/form'
 import { CenterLayout } from '@/components/layout'
 import { WalletSecurityBanner } from '@/components/banners'
 import { WalletLogs } from '@/components/wallet-logger'
@@ -10,7 +10,6 @@ import Info from '@/components/info'
 import Text from '@/components/text'
 import { AutowithdrawSettings } from '@/components/autowithdraw-shared'
 import dynamic from 'next/dynamic'
-import { useEffect, useState } from 'react'
 
 const WalletButtonBar = dynamic(() => import('@/components/wallet-buttonbar.js'), { ssr: false })
 
@@ -22,14 +21,6 @@ export default function WalletSettings () {
   const { wallet: name } = router.query
   const wallet = useWallet(name)
 
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => {
-    // mounted is required since available might depend
-    // on values that are only available on the client (and not during SSR)
-    // and thus we need to render the component again on the client
-    setMounted(true)
-  }, [])
-
   const initial = wallet.fields.reduce((acc, field) => {
     // We still need to run over all wallet fields via reduce
     // even though we use wallet.config as the initial value
@@ -47,8 +38,6 @@ export default function WalletSettings () {
     ? { validate: wallet.fieldValidation }
     : { schema: wallet.fieldValidation }
 
-  const available = mounted && wallet.available !== undefined ? wallet.available : wallet.isConfigured
-
   return (
     <CenterLayout>
       <h2 className='pb-2'>{wallet.card.title}</h2>
@@ -84,12 +73,15 @@ export default function WalletSettings () {
         {wallet.walletType
           ? <AutowithdrawSettings wallet={wallet} />
           : (
-            <ClientCheckbox
-              disabled={!available}
-              initialValue={wallet.status === Status.Enabled}
-              label='enabled'
-              name='enabled'
-            />
+            <CheckboxGroup name='enabled'>
+              <ClientCheckbox
+                disabled={!wallet.isConfigured}
+                initialValue={wallet.status === Status.Enabled}
+                label='enabled'
+                name='enabled'
+                groupClassName='mb-0'
+              />
+            </CheckboxGroup>
             )}
         <WalletButtonBar
           wallet={wallet} onDelete={async () => {

wallets/README.md

@@ -64,10 +64,6 @@ Since `name` will also be used in [wallet logs](https://stacker.news/wallet/logs
 
 Wallet fields define what this wallet requires for configuration and thus are used to construct the forms like the one you can see at [/settings/wallets/lnbits](https://stacker.news/settings/walletslnbits).
 
-- `available?: boolean`
-
-This property can be used to override the default behavior of the `enabled` checkbox in the wallet configuration form. By default, it will be clickable when a wallet is configured. However, if a wallet does not have any configuration, this checkbox will always be disabled. You can set `available` to an expression that will determine when a wallet can be enabled.
-
 - `card: WalletCard`
 
 Wallet cards are the components you can see at [/settings/wallets](https://stacker.news/settings/wallets). This property customizes this card for this wallet.

wallets/index.js

@@ -137,11 +137,6 @@ function useConfig (wallet) {
     ...(hasServerConfig ? serverConfig : {})
   }
 
-  if (wallet?.available !== undefined && config.enabled !== undefined) {
-    // wallet must be available to be enabled
-    config.enabled &&= wallet.available
-  }
-
   const saveConfig = useCallback(async (config) => {
     if (hasLocalConfig) setLocalConfig(config)
     if (hasServerConfig) await setServerConfig(config)
@@ -265,13 +260,7 @@ export function getEnabledWallet (me) {
       const priority = config?.priority
       return { ...def, config, priority }
     })
-    .filter(({ available, config }) => {
-      if (available !== undefined && config?.enabled !== undefined) {
-        // wallet must be available to be enabled
-        config.enabled &&= available
-      }
-      return config?.enabled
-    })
+    .filter(({ config }) => config?.enabled)
     .sort(walletPrioritySort)[0]
 }
 

wallets/webln/index.js

@@ -1,10 +1,18 @@
-import { SSR } from '@/lib/constants'
-
 export const name = 'webln'
 
 export const fields = []
 
-export const available = SSR ? false : typeof window.webln !== 'undefined'
+export const fieldValidation = ({ enabled }) => {
+  if (typeof window.webln === 'undefined') {
+    // don't prevent disabling WebLN if no WebLN provider found
+    if (enabled) {
+      return {
+        enabled: 'no WebLN provider found'
+      }
+    }
+  }
+  return {}
+}
 
 export const card = {
   title: 'WebLN',