diff --git a/components/webln/index.js b/components/webln/index.js index c21cc83b2..6f97bcd1b 100644 --- a/components/webln/index.js +++ b/components/webln/index.js @@ -20,12 +20,32 @@ const syncProvider = (array, provider) => { ] } +const storageKey = 'webln:providers' + function RawWebLNProvider ({ children }) { // LNbits should only be used during development // since it gives full wallet access on XSS const lnbits = useLNbits() const nwc = useNWC() - const [enabledProviders, setEnabledProviders] = useState([lnbits, nwc].filter(({ enabled }) => enabled)) + const availableProviders = [lnbits, nwc] + const [enabledProviders, setEnabledProviders] = useState([]) + + // restore order on page reload + useEffect(() => { + const storedOrder = window.localStorage.getItem(storageKey) + if (!storedOrder) return + const providerNames = JSON.parse(storedOrder) + setEnabledProviders(providers => { + return providerNames.map(name => { + for (const p of availableProviders) { + if (p.name === name) return p + } + console.warn(`Stored provider with name ${name} not available`) + return null + }) + }) + }, []) + // keep list in sync with underlying providers useEffect(() => { setEnabledProviders(providers => { @@ -35,14 +55,17 @@ function RawWebLNProvider ({ children }) { // This can be the case if we're syncing from a page reload // where the providers are initially not enabled. // If provider is no longer enabled, it is removed from the list. - const newProviders = [lnbits, nwc].reduce(syncProvider, providers) + const isInitialized = p => p.initialized + const newProviders = availableProviders.filter(isInitialized).reduce(syncProvider, providers) + const newOrder = newProviders.map(({ name }) => name) + window.localStorage.setItem(storageKey, JSON.stringify(newOrder)) return newProviders }) }, [lnbits, nwc]) // sanity check for (const p of enabledProviders) { - if (!p.enabled) { + if (!p.enabled && p.initialized) { console.warn('Expected provider to be enabled but is not:', p.name) } } diff --git a/components/webln/lnbits.js b/components/webln/lnbits.js index 578d5c210..fd716a519 100644 --- a/components/webln/lnbits.js +++ b/components/webln/lnbits.js @@ -64,6 +64,7 @@ export function LNbitsProvider ({ children }) { const [url, setUrl] = useState('') const [adminKey, setAdminKey] = useState('') const [enabled, setEnabled] = useState() + const [initialized, setInitialized] = useState(false) const name = 'LNbits' const storageKey = 'webln:provider:lnbits' @@ -115,6 +116,8 @@ export function LNbitsProvider ({ children }) { console.error('invalid LNbits config:', err) setEnabled(false) throw err + } finally { + setInitialized(true) } }, []) @@ -150,7 +153,7 @@ export function LNbitsProvider ({ children }) { loadConfig().catch(console.error) }, []) - const value = { name, url, adminKey, saveConfig, clearConfig, enabled, getInfo, sendPayment } + const value = { name, url, adminKey, initialized, enabled, saveConfig, clearConfig, getInfo, sendPayment } return ( {children} diff --git a/components/webln/nwc.js b/components/webln/nwc.js index c3e887876..0a6175203 100644 --- a/components/webln/nwc.js +++ b/components/webln/nwc.js @@ -11,6 +11,7 @@ export function NWCProvider ({ children }) { const [relayUrl, setRelayUrl] = useState() const [secret, setSecret] = useState() const [enabled, setEnabled] = useState() + const [initialized, setInitialized] = useState(false) const [relay, setRelay] = useState() const name = 'NWC' @@ -40,6 +41,8 @@ export function NWCProvider ({ children }) { console.error('invalid NWC config:', err) setEnabled(false) throw err + } finally { + setInitialized(true) } }, []) @@ -171,7 +174,7 @@ export function NWCProvider ({ children }) { loadConfig().catch(console.error) }, []) - const value = { name, nwcUrl, relayUrl, walletPubkey, secret, saveConfig, clearConfig, enabled, getInfo, sendPayment } + const value = { name, nwcUrl, relayUrl, walletPubkey, secret, initialized, enabled, saveConfig, clearConfig, getInfo, sendPayment } return ( {children}