diff --git a/components/lightning-auth.js b/components/lightning-auth.js
index 5efddc4cc..4e6c1dbef 100644
--- a/components/lightning-auth.js
+++ b/components/lightning-auth.js
@@ -27,6 +27,18 @@ function QrAuth ({ k1, encodedUrl, callbackUrl }) {
}
}, [data?.lnAuth])
+ useEffect(() => {
+ if (typeof window.webln === 'undefined') return
+
+ // optimistically use WebLN for authentication
+ async function effect () {
+ // this will also enable our WebLN wallet
+ await window.webln.enable()
+ await window.webln.lnurl(encodedUrl)
+ }
+ effect()
+ }, [encodedUrl])
+
// output pubkey and k1
return (
diff --git a/jsconfig.json b/jsconfig.json
index bb96307cd..9b5c18ac9 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -17,6 +17,9 @@
"@/components/*": [
"components/*"
],
+ "@/wallets/*": [
+ "wallets/*"
+ ],
"@/styles/*": [
"styles/*"
],
diff --git a/pages/_app.js b/pages/_app.js
index 9161017e6..c018094be 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -21,6 +21,7 @@ import { WalletLoggerProvider } from '@/components/wallet-logger'
import { ChainFeeProvider } from '@/components/chain-fee.js'
import dynamic from 'next/dynamic'
import { HasNewNotesProvider } from '@/components/use-has-new-notes'
+import WebLnProvider from '@/wallets/webln'
const PWAPrompt = dynamic(() => import('react-ios-pwa-prompt'), { ssr: false })
@@ -106,24 +107,26 @@ export default function MyApp ({ Component, pageProps: { ...props } }) {
-
-
-
-
-
-
-
-
-
- {!router?.query?.disablePrompt && }
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ {!router?.query?.disablePrompt && }
+
+
+
+
+
+
+
+
+
diff --git a/wallets/index.js b/wallets/index.js
index 5a910f443..4d1cbf8fc 100644
--- a/wallets/index.js
+++ b/wallets/index.js
@@ -412,24 +412,26 @@ export function useWallets () {
function getStorageKey (name, me) {
let storageKey = `wallet:${name}`
- if (me) {
+
+ // WebLN has no credentials we need to scope to users
+ // so we can use the same storage key for all users
+ if (me && name !== 'webln') {
storageKey = `${storageKey}:${me.id}`
}
+
return storageKey
}
function enableWallet (name, me) {
const key = getStorageKey(name, me)
- const config = JSON.parse(window.localStorage.getItem(key))
- if (!config) return
+ const config = JSON.parse(window.localStorage.getItem(key)) || {}
config.enabled = true
window.localStorage.setItem(key, JSON.stringify(config))
}
function disableWallet (name, me) {
const key = getStorageKey(name, me)
- const config = JSON.parse(window.localStorage.getItem(key))
- if (!config) return
+ const config = JSON.parse(window.localStorage.getItem(key)) || {}
config.enabled = false
window.localStorage.setItem(key, JSON.stringify(config))
}
diff --git a/wallets/webln/index.js b/wallets/webln/index.js
index f1d970af3..6bfb26d5d 100644
--- a/wallets/webln/index.js
+++ b/wallets/webln/index.js
@@ -1,3 +1,6 @@
+import { useEffect } from 'react'
+import { useWallet } from 'wallets'
+
export const name = 'webln'
export const fields = []
@@ -19,3 +22,27 @@ export const card = {
subtitle: 'use a [WebLN provider](https://www.webln.guide/ressources/webln-providers) for payments',
badges: ['send only']
}
+
+export default function WebLnProvider ({ children }) {
+ const wallet = useWallet(name)
+
+ useEffect(() => {
+ const onEnable = () => {
+ wallet.enablePayments()
+ }
+
+ const onDisable = () => {
+ wallet.disablePayments()
+ }
+
+ window.addEventListener('webln:enabled', onEnable)
+ // event is not fired by Alby browser extension but added here for sake of completeness
+ window.addEventListener('webln:disabled', onDisable)
+ return () => {
+ window.removeEventListener('webln:enabled', onEnable)
+ window.removeEventListener('webln:disabled', onDisable)
+ }
+ }, [])
+
+ return children
+}