Link to wallet guide if exists (#2490)

* Link to guide if exists

* Add LNbits guide

* Update id to LNbits guide

also update guide and add id to ADMIN_ITEMS for perpetual edits

* Use button instead of link

This fixes following console warning:

> Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

* Fix alignment

* Fix wrong mention of super user requirement

* Move guideUrl to wallets.json

lib/constants.js

@@ -183,7 +183,9 @@ export const LOST_BLURBS = {
 
 export const ADMIN_ITEMS = [
   // FAQ, old privacy policy, changelog, content guidelines, tos, new privacy policy, copyright policy
-  349, 76894, 78763, 81862, 338393, 338369, 338453
+  349, 76894, 78763, 81862, 338393, 338369, 338453,
+  // LNbits guide
+  1212223
 ]
 
 export const INVOICE_RETENTION_DAYS = 7

wallets/client/components/form/index.js

@@ -8,10 +8,12 @@ import CancelButton from '@/components/cancel-button'
 import Text from '@/components/text'
 import Info from '@/components/info'
 import { useFormState, useMaxSteps, useNext, useStepIndex } from '@/components/multi-step-form'
-import { isTemplate, isWallet, protocolDisplayName, protocolFormId, protocolLogName, walletLud16Domain } from '@/wallets/lib/util'
+import { isTemplate, isWallet, protocolDisplayName, protocolFormId, protocolLogName, walletGuideUrl, walletLud16Domain } from '@/wallets/lib/util'
 import { WalletLayout, WalletLayoutHeader, WalletLayoutImageOrName, WalletLogs } from '@/wallets/client/components'
 import { TemplateLogsProvider, useTestSendPayment, useWalletLogger, useTestCreateInvoice, useWalletSupport } from '@/wallets/client/hooks'
 import ArrowRight from '@/svgs/arrow-right-s-fill.svg'
+import InfoIcon from '@/svgs/information-fill.svg'
+import Link from 'next/link'
 
 import { WalletMultiStepFormContextProvider, Step, useWallet, useWalletProtocols, useProtocol, useProtocolForm } from './hooks'
 import { Settings } from './settings'
@@ -37,12 +39,20 @@ export function WalletMultiStepForm ({ wallet }) {
     ].filter(Boolean),
   [support])
 
+  const guideUrl = walletGuideUrl(wallet.name)
+
   return (
     <WalletLayout>
       <div className={styles.form}>
         <WalletLayoutHeader>
           <WalletLayoutImageOrName name={wallet.name} maxHeight='80px' />
         </WalletLayoutHeader>
+        {guideUrl && (
+          <Link href={guideUrl} className='text-center text-reset fw-bold text-underline'>
+            <InfoIcon width={18} height={18} className='mx-1' />
+            guide
+          </Link>
+        )}
         <WalletMultiStepFormContextProvider wallet={wallet} initial={initial} steps={steps}>
           {steps.map(step => {
             // WalletForm is aware of the current step via hooks

wallets/lib/protocols/docs/user/lnbits.md

@@ -0,0 +1,38 @@
+---
+title: Official LNbits Guide
+id: 1212223
+sub: meta
+---
+
+# Official LNbits Guide
+
+last updated: September 8, 2025
+
+Requirements:
+
+- [LNbits](https://lnbits.com/) v1.0.0 or later
+- reachable from the internet via clearnet or tor (receive only)
+- HTTPS required if not accessing over tor
+
+## Attach send
+
+For **url**, enter the URL to your LNbits web interface. It must start with https://. Onion URLs are not supported for sending.
+
+For **admin key**, follow these steps:
+
+1. Go to your LNbits web interface
+2. Create a new wallet for Stacker News:
+
+![](https://m.stacker.news/107021)
+
+3. Copy and paste the admin key:
+
+![](https://m.stacker.news/107022)
+
+## Attach receive
+
+For **url**, enter the URL to your LNbits web interface. http:// is supported for onion URLs.
+
+For **invoice key**, follow the steps to [attach send](#attach-send) and copy the invoice/read key instead of the admin key:
+
+![](https://m.stacker.news/107024)

wallets/lib/util.js

@@ -22,6 +22,10 @@ export function walletLud16Domain (name) {
   return typeof url === 'string' ? new URL(url).hostname : url.lud16Domain
 }
 
+export function walletGuideUrl (name) {
+  return walletJson(name)?.guide
+}
+
 function protocol ({ name, send }) {
   return protocols.find(protocol => protocol.name === name && protocol.send === send)
 }

wallets/lib/wallets.json

@@ -15,7 +15,8 @@
         "name": "LNBITS",
         "displayName": "LNbits",
         "image": "/wallets/lnbits.svg",
-        "url": "https://lnbits.com/"
+        "url": "https://lnbits.com/",
+        "guide": "/items/1212223"
     },
     {
         "name": "LND",