ekzyis b3d485e8c4
Refactor default payment method setting (#803)
* Refactor setting of default providers

* fixed warning about component update while rendering another component
* individual providers no longer need to know if they are the default or not
* default setting is now handled by WebLNContext -- the same context that returns the provider. this makes a lot more sense and is a lot easier to read
* default payment checkbox is now also disabled if there is only one enabled provider or if it is the default provider

* Fix order lost on page reload

On page reload, the providers were synced in the order they were loaded.

This means that the default payment provider setting was lost.

Fixed this by syncing order to local storage and on page reload, only syncing providers when they were initialized (else the order would have been lost again).
2024-02-09 09:42:26 -06:00

94 lines
2.9 KiB
JavaScript

import { getGetServerSideProps } from '../../../api/ssrApollo'
import { Form, ClientInput, ClientCheckbox } from '../../../components/form'
import { CenterLayout } from '../../../components/layout'
import { WalletButtonBar, WalletCard } from '../../../components/wallet-card'
import { lnbitsSchema } from '../../../lib/validate'
import { useToast } from '../../../components/toast'
import { useRouter } from 'next/router'
import { useLNbits } from '../../../components/webln/lnbits'
import { WalletSecurityBanner } from '../../../components/banners'
import { useWebLNConfigurator } from '../../../components/webln'
export const getServerSideProps = getGetServerSideProps({ authRequired: true })
export default function LNbits () {
const { provider, enabledProviders, setProvider } = useWebLNConfigurator()
const lnbits = useLNbits()
const { name, url, adminKey, saveConfig, clearConfig, enabled } = lnbits
const isDefault = provider?.name === name
const toaster = useToast()
const router = useRouter()
return (
<CenterLayout>
<h2 className='pb-2'>LNbits</h2>
<h6 className='text-muted text-center pb-3'>use LNbits 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
/>
<ClientInput
initialValue={adminKey}
type='password'
autoComplete='false'
label='admin key'
name='adminKey'
/>
<ClientCheckbox
disabled={!enabled || isDefault || enabledProviders.length === 1}
initialValue={isDefault}
label='default payment method'
name='isDefault'
/>
<WalletButtonBar
enabled={enabled} onDelete={async () => {
try {
await clearConfig()
toaster.success('saved settings')
router.push('/settings/wallets')
} catch (err) {
console.error(err)
toaster.danger('failed to unattach: ' + err.message || err.toString?.())
}
}}
/>
</Form>
</CenterLayout>
)
}
export function LNbitsCard () {
const { enabled } = useLNbits()
return (
<WalletCard
title='LNbits'
badges={['send only', 'non-custodialish']}
provider='lnbits'
enabled={enabled}
/>
)
}