From 5673ca567ea76b0aa41501791238f096e1177fbf Mon Sep 17 00:00:00 2001
From: ekzyis <ek@stacker.news>
Date: Fri, 9 Feb 2024 15:21:23 +0100
Subject: [PATCH] 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  | 29 ++++++++++++++++++++++++++---
 components/webln/lnbits.js |  5 ++++-
 components/webln/nwc.js    |  5 ++++-
 3 files changed, 34 insertions(+), 5 deletions(-)

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