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).

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)
     }
   }

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 (
     <LNbitsContext.Provider value={value}>
       {children}

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 (
     <NWCContext.Provider value={value}>
       {children}