wip

components/wallet-card.js

@@ -9,7 +9,7 @@ import { Status } from './webln'
 
 export const isConfigured = status => [Status.Enabled, Status.Locked, Status.Error, true].includes(status)
 
-export function WalletCard ({ title, badges, provider, status }) {
+export function WalletCard ({ title, badges, provider, status, href }) {
   const configured = isConfigured(status)
   let indicator = styles.disabled
   switch (status) {
@@ -42,14 +42,13 @@ export function WalletCard ({ title, badges, provider, status }) {
               </Badge>)}
         </Card.Subtitle>
       </Card.Body>
-      {provider &&
+      <Link href={href}>
-        <Link href={`/settings/wallets/${provider}`}>
+        <Card.Footer className={styles.attach}>
-          <Card.Footer className={styles.attach}>
+          {configured
-            {configured
+            ? <>configure<Gear width={14} height={14} /></>
-              ? <>configure<Gear width={14} height={14} /></>
+            : <>attach<Plug width={14} height={14} /></>}
-              : <>attach<Plug width={14} height={14} /></>}
+        </Card.Footer>
-          </Card.Footer>
+      </Link>
-        </Link>}
     </Card>
   )
 }

components/wallet-configurator.js

@@ -0,0 +1,70 @@
+import { WalletSecurityBanner } from './banners'
+import { Form } from './form'
+import { CenterLayout } from './layout'
+
+export default function WalletConfigurator ({ config }) {
+  const initial = config.provider
+
+  return (
+    <CenterLayout>
+      <h2 className='pb-2'>{config.title}</h2>
+      <h6 className='text-muted text-center pb-3'>use {config.title} for payments</h6>
+      <WalletSecurityBanner />
+      <Form
+        initial={{
+          url: url || '',
+          adminKey: adminKey || '',
+          isDefault: isDefault || false
+        }}
+        schema={lnbitsSchema}
+        onSubmit={async ({ isDefault, ...values }) => {
+          try {
+            await saveConfig(values)
+            if (isDefault) setProvider(lnbits)
+            toaster.success('saved settings')
+            router.push('/settings/wallets')
+          } catch (err) {
+            console.error(err)
+            toaster.danger('failed to attach: ' + err.message || err.toString?.())
+          }
+        }}
+      >
+        <ClientInput
+          initialValue={url}
+          label='lnbits url'
+          name='url'
+          required
+          autoFocus
+        />
+        <PasswordInput
+          initialValue={adminKey}
+          label='admin key'
+          name='adminKey'
+          newPass
+          required
+        />
+        <ClientCheckbox
+          disabled={!configured || isDefault || enabledProviders.length === 1}
+          initialValue={isDefault}
+          label='default payment method'
+          name='isDefault'
+        />
+        <WalletButtonBar
+          status={status} onDelete={async () => {
+            try {
+              await clearConfig()
+              toaster.success('saved settings')
+              router.push('/settings/wallets')
+            } catch (err) {
+              console.error(err)
+              toaster.danger('failed to detach: ' + err.message || err.toString?.())
+            }
+          }}
+        />
+      </Form>
+      <div className='mt-3 w-100'>
+        <WalletLogs wallet={Wallet.LNbits} embedded />
+      </div>
+    </CenterLayout>
+  )
+}

components/webln/lnbits2.js

@@ -2,57 +2,69 @@ import { bolt11Tags } from '@/lib/bolt11'
 
 export const name = 'LNbits'
 
-let config, logger
+export const config = {
-
+  provider: {
-export function setConfig (_config) {
+    url: {
-  config = _config
+      label: 'lnbits url',
-}
+      type: 'text'
-
-export function setLogger (_logger) {
-  logger = _logger
-}
-
-export async function getInfo () {
-  const response = await getWallet(config.url, config.adminKey)
-  return {
-    node: {
-      alias: response.name,
-      pubkey: ''
     },
-    methods: [
+    adminKey: {
-      'getInfo',
+      label: 'admin key',
-      'getBalance',
+      type: 'password'
-      'sendPayment'
-    ],
-    version: '1.0',
-    supports: ['lightning']
-  }
-}
-
-export async function sendPayment (bolt11) {
-  const { url, adminKey } = config
-
-  const hash = bolt11Tags(bolt11).payment_hash
-  logger.info('sending payment:', `payment_hash=${hash}`)
-
-  try {
-    const response = await postPayment(url, adminKey, bolt11)
-
-    const checkResponse = await getPayment(url, adminKey, response.payment_hash)
-    if (!checkResponse.preimage) {
-      throw new Error('No preimage')
     }
-
+  },
-    const preimage = checkResponse.preimage
+  card: {
-    logger.ok('payment successful:', `payment_hash=${hash}`, `preimage=${preimage}`)
+    title: 'LNbits',
-    return { preimage }
+    badges: ['send only', 'non-custodialish'],
-  } catch (err) {
+    href: '/settings/wallets/lnbits'
-    logger.error('payment failed:', `payment_hash=${hash}`, err.message || err.toString?.())
-    throw err
   }
 }
 
-const getWallet = async (baseUrl, adminKey) => {
+export function getInfo ({ config, logger }) {
+  return async function () {
+    const response = await getWallet(config.url, config.adminKey)
+    return {
+      node: {
+        alias: response.name,
+        pubkey: ''
+      },
+      methods: [
+        'getInfo',
+        'getBalance',
+        'sendPayment'
+      ],
+      version: '1.0',
+      supports: ['lightning']
+    }
+  }
+}
+
+export function sendPayment ({ config, logger }) {
+  return async function (bolt11) {
+    const { url, adminKey } = config
+
+    const hash = bolt11Tags(bolt11).payment_hash
+    logger.info('sending payment:', `payment_hash=${hash}`)
+
+    try {
+      const response = await postPayment(url, adminKey, bolt11)
+
+      const checkResponse = await getPayment(url, adminKey, response.payment_hash)
+      if (!checkResponse.preimage) {
+        throw new Error('No preimage')
+      }
+
+      const preimage = checkResponse.preimage
+      logger.ok('payment successful:', `payment_hash=${hash}`, `preimage=${preimage}`)
+      return { preimage }
+    } catch (err) {
+      logger.error('payment failed:', `payment_hash=${hash}`, err.message || err.toString?.())
+      throw err
+    }
+  }
+}
+
+async function getWallet (baseUrl, adminKey) {
   const url = baseUrl.replace(/\/+$/, '')
   const path = '/api/v1/wallet'
 

pages/settings/wallets/index.js

@@ -2,28 +2,32 @@ import { getGetServerSideProps } from '@/api/ssrApollo'
 import Layout from '@/components/layout'
 import styles from '@/styles/wallet.module.css'
 import { WalletCard } from '@/components/wallet-card'
-import { LightningAddressWalletCard } from './lightning-address'
+// import { LightningAddressWalletCard } from './lightning-address'
-import { LNbitsCard } from './lnbits'
+// import { LNbitsCard } from './lnbits'
-import { NWCCard } from './nwc'
+// import { NWCCard } from './nwc'
-import { LNDCard } from './lnd'
+// import { LNDCard } from './lnd'
-import { CLNCard } from './cln'
+// import { CLNCard } from './cln'
 import { WALLETS } from '@/fragments/wallet'
-import { useQuery } from '@apollo/client'
+// import { useQuery } from '@apollo/client'
-import PageLoading from '@/components/page-loading'
+// import PageLoading from '@/components/page-loading'
-import { LNCCard } from './lnc'
+// import { LNCCard } from './lnc'
 import Link from 'next/link'
-import { Wallet as W } from '@/lib/constants'
+// import { Wallet as W } from '@/lib/constants'
+import { config as lnbitsConfig } from '@/components/webln/lnbits2'
+
+// TODO: load configs without individual imports?
+const walletConfigs = [lnbitsConfig]
 
 export const getServerSideProps = getGetServerSideProps({ query: WALLETS, authRequired: true })
 
 export default function Wallet ({ ssrData }) {
-  const { data } = useQuery(WALLETS)
+  // const { data } = useQuery(WALLETS)
-
+  //
-  if (!data && !ssrData) return <PageLoading />
+  // if (!data && !ssrData) return <PageLoading />
-  const { wallets } = data || ssrData
+  // const { wallets } = data || ssrData
-  const lnd = wallets.find(w => w.type === W.LND.type)
+  // const lnd = wallets.find(w => w.type === W.LND.type)
-  const lnaddr = wallets.find(w => w.type === W.LnAddr.type)
+  // const lnaddr = wallets.find(w => w.type === W.LnAddr.type)
-  const cln = wallets.find(w => w.type === W.CLN.type)
+  // const cln = wallets.find(w => w.type === W.CLN.type)
 
   return (
     <Layout>
@@ -36,15 +40,9 @@ export default function Wallet ({ ssrData }) {
           </Link>
         </div>
         <div className={styles.walletGrid}>
-          <LightningAddressWalletCard wallet={lnaddr} />
+          {walletConfigs.map((config, i) => (
-          <LNDCard wallet={lnd} />
+            <WalletCard key={i} {...config.card} />
-          <CLNCard wallet={cln} />
+          ))}
-          <LNbitsCard />
-          <NWCCard />
-          <LNCCard />
-          <WalletCard title='coming soon' badges={['probably']} />
-          <WalletCard title='coming soon' badges={['we hope']} />
-          <WalletCard title='coming soon' badges={['tm']} />
         </div>
       </div>
     </Layout>