Save order as priority

components/wallet-card.js

@@ -3,10 +3,10 @@ import styles from '@/styles/wallet.module.css'
 import Plug from '@/svgs/plug.svg'
 import Gear from '@/svgs/settings-5-fill.svg'
 import Link from 'next/link'
-import { useWallet, Status } from './wallet'
+import { Status } from './wallet'
 
-export default function WalletCard ({ name, title, badges, status }) {
+export default function WalletCard ({ wallet }) {
-  const wallet = useWallet(name)
+  const { card: { title, badges } } = wallet
 
   let indicator = styles.disabled
   switch (wallet.status) {
@@ -39,7 +39,7 @@ export default function WalletCard ({ name, title, badges, status }) {
               </Badge>)}
         </Card.Subtitle>
       </Card.Body>
-      <Link href={`/settings/wallets/${name}`}>
+      <Link href={`/settings/wallets/${wallet.name}`}>
         <Card.Footer className={styles.attach}>
           {wallet.isConfigured
             ? <>configure<Gear width={14} height={14} /></>

components/wallet/index.js

@@ -32,6 +32,10 @@ export function useWallet (name) {
   const [config, saveConfig, clearConfig] = useConfig(wallet)
   const _isConfigured = isConfigured({ ...wallet, config })
 
+  const status = (config?.enabled || config?.priority) ? Status.Enabled : Status.Initialized
+  const enabled = status === Status.Enabled
+  const priority = config?.priority
+
   const sendPayment = useCallback(async (bolt11) => {
     const hash = bolt11Tags(bolt11).payment_hash
     logger.info('sending payment:', `payment_hash=${hash}`)
@@ -55,6 +59,12 @@ export function useWallet (name) {
     logger.info('wallet disabled')
   }, [name, me, logger])
 
+  const setPriority = useCallback(async (priority) => {
+    if (_isConfigured && priority !== config.priority) {
+      await saveConfig({ ...config, priority })
+    }
+  }, [wallet, config, logger])
+
   const save = useCallback(async (newConfig) => {
     try {
       // validate should log custom INFO and OK message
@@ -91,8 +101,11 @@ export function useWallet (name) {
     delete: delete_,
     enable,
     disable,
+    setPriority,
     isConfigured: _isConfigured,
-    status: config?.enabled || config?.priority ? Status.Enabled : Status.Initialized,
+    status,
+    enabled,
+    priority,
     logger
   }
 }
@@ -149,7 +162,7 @@ function useServerConfig (wallet) {
   const walletId = data?.walletByType?.id
   const serverConfig = { id: walletId, priority: data?.walletByType?.priority, ...data?.walletByType?.wallet }
   const autowithdrawSettings = autowithdrawInitial({ me, priority: serverConfig?.priority })
-  const config = { ...serverConfig, autowithdrawSettings }
+  const config = { ...serverConfig, ...autowithdrawSettings }
 
   const saveConfig = useCallback(async ({
     autoWithdrawThreshold,
@@ -210,6 +223,10 @@ export function getEnabledWallet (me) {
     })
 }
 
+export function useWallets () {
+  return WALLET_DEFS.map(def => useWallet(def.name))
+}
+
 function getStorageKey (name, me) {
   let storageKey = `wallet:${name}`
   if (me) {

pages/settings/wallets/index.js

@@ -3,7 +3,7 @@ import Layout from '@/components/layout'
 import styles from '@/styles/wallet.module.css'
 import { WALLETS as WALLETS_QUERY } from '@/fragments/wallet'
 import Link from 'next/link'
-import { WALLET_DEFS } from '@/components/wallet'
+import { useWallets } from '@/components/wallet'
 import { useState } from 'react'
 import dynamic from 'next/dynamic'
 
@@ -12,7 +12,8 @@ const WalletCard = dynamic(() => import('@/components/wallet-card'), { ssr: fals
 export const getServerSideProps = getGetServerSideProps({ query: WALLETS_QUERY, authRequired: true })
 
 export default function Wallet ({ ssrData }) {
-  const [wallets, setWallets] = useState(WALLET_DEFS)
+  const wallets = useWallets()
+
   const [sourceIndex, setSourceIndex] = useState()
   const [targetIndex, setTargetIndex] = useState()
 
@@ -29,20 +30,25 @@ export default function Wallet ({ ssrData }) {
     setTargetIndex(i)
   }
 
-  const onDragEnd = (e) => {
+  const onDragEnd = async (e) => {
     setSourceIndex(null)
     setTargetIndex(null)
+
     if (sourceIndex === targetIndex) return
-    setWallets(wallets => {
-      const copy = [...wallets]
 
-      const [source] = copy.splice(sourceIndex, 1)
+    const newOrder = [...wallets]
-      const newTargetIndex = sourceIndex < targetIndex ? targetIndex - 1 : targetIndex
-      const append = sourceIndex < targetIndex
 
-      copy.splice(newTargetIndex + (append ? 1 : 0), 0, source)
+    const [source] = newOrder.splice(sourceIndex, 1)
-      return copy
+    const newTargetIndex = sourceIndex < targetIndex ? targetIndex - 1 : targetIndex
-    })
+    const append = sourceIndex < targetIndex
+
+    newOrder.splice(newTargetIndex + (append ? 1 : 0), 0, source)
+
+    await Promise.all(
+      newOrder.map((w, i) =>
+        w.setPriority(i).catch(console.error)
+      )
+    )
   }
 
   return (
@@ -57,17 +63,34 @@ export default function Wallet ({ ssrData }) {
         </div>
         <div className={styles.walletGrid} onDragEnd={onDragEnd}>
           {wallets
-            .map((def, i) =>
+            .sort((w1, w2) => {
-              <div
+              if (!w2.isConfigured || !w2.enabled) {
-                key={def.name}
+                return -1
-                draggable
+              }
-                onDragStart={onDragStart(i)}
+              return w1.priority - w2.priority
-                onDragEnter={onDragEnter(i)}
+            })
-                className={`${sourceIndex === i ? styles.drag : ''} ${targetIndex === i ? styles.drop : ''}`}
+            .map((w, i) => {
-              >
+              const draggable = w.isConfigured
-                <WalletCard name={def.name} {...def.card} />
+              return (
-              </div>
+                <div
+                  key={w.name}
+                  draggable={draggable}
+                  style={{ cursor: draggable ? 'move' : 'default' }}
+                  onDragStart={draggable ? onDragStart(i) : undefined}
+                  onDragEnter={draggable ? onDragEnter(i) : undefined}
+                  className={
+                    !draggable
+                      ? ''
+                      : (`${sourceIndex === i ? styles.drag : ''} ${draggable && targetIndex === i ? styles.drop : ''}`)
+                    }
+                  suppressHydrationWarning
+                >
+                  <WalletCard wallet={w} />
+                </div>
+              )
+            }
             )}
+
         </div>
       </div>
     </Layout>

styles/wallet.module.css

@@ -18,7 +18,6 @@
 .card {
   width: 160px;
   height: 180px;
-  cursor: move;
 }
 
 .badge {