Fix sendPayment called with empty config

* removed useEffect such that config is available on first render
* fix hydration error using dynamic import without SSR

components/use-local-state.js

@@ -1,12 +1,11 @@
-import { useCallback, useEffect, useState } from 'react'
+import { SSR } from '@/lib/constants'
+import { useCallback, useState } from 'react'
 
 export default function useLocalState (storageKey, initialValue = '') {
-  const [value, innerSetValue] = useState(initialValue)
-
-  useEffect(() => {
-    const value = window.localStorage.getItem(storageKey)
-    innerSetValue(JSON.parse(value))
-  }, [storageKey])
+  const [value, innerSetValue] = useState(
+    initialValue ||
+    (SSR ? null : JSON.parse(window.localStorage.getItem(storageKey)))
+  )
 
   const setValue = useCallback((newValue) => {
     window.localStorage.setItem(storageKey, JSON.stringify(newValue))

components/wallet-buttonbar.js

@@ -0,0 +1,23 @@
+import { Button } from 'react-bootstrap'
+import CancelButton from './cancel-button'
+import { SubmitButton } from './form'
+
+export default function WalletButtonBar ({
+  wallet, disable,
+  className, children, onDelete, onCancel, hasCancel = true,
+  createText = 'attach', deleteText = 'detach', editText = 'save'
+}) {
+  return (
+    <div className={`mt-3 ${className}`}>
+      <div className='d-flex justify-content-between'>
+        {wallet.isConfigured &&
+          <Button onClick={onDelete} variant='grey-medium'>{deleteText}</Button>}
+        {children}
+        <div className='d-flex align-items-center ms-auto'>
+          {hasCancel && <CancelButton onClick={onCancel} />}
+          <SubmitButton variant='primary' disabled={disable}>{wallet.isConfigured ? editText : createText}</SubmitButton>
+        </div>
+      </div>
+    </div>
+  )
+}

components/wallet-card.js

@@ -1,10 +1,8 @@
-import { Badge, Button, Card } from 'react-bootstrap'
+import { Badge, Card } from 'react-bootstrap'
 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 CancelButton from './cancel-button'
-import { SubmitButton } from './form'
 import { useWallet, Status } from './wallet'
 
 export function WalletCard ({ name, title, badges, status }) {
@@ -51,23 +49,3 @@ export function WalletCard ({ name, title, badges, status }) {
     </Card>
   )
 }
-
-export function WalletButtonBar ({
-  wallet, disable,
-  className, children, onDelete, onCancel, hasCancel = true,
-  createText = 'attach', deleteText = 'detach', editText = 'save'
-}) {
-  return (
-    <div className={`mt-3 ${className}`}>
-      <div className='d-flex justify-content-between'>
-        {wallet.isConfigured &&
-          <Button onClick={onDelete} variant='grey-medium'>{deleteText}</Button>}
-        {children}
-        <div className='d-flex align-items-center ms-auto'>
-          {hasCancel && <CancelButton onClick={onCancel} />}
-          <SubmitButton variant='primary' disabled={disable}>{wallet.isConfigured ? editText : createText}</SubmitButton>
-        </div>
-      </div>
-    </div>
-  )
-}

pages/settings/wallets/[wallet].js

@@ -1,7 +1,6 @@
 import { getGetServerSideProps } from '@/api/ssrApollo'
 import { Form, ClientInput, ClientCheckbox, PasswordInput } from '@/components/form'
 import { CenterLayout } from '@/components/layout'
-import { WalletButtonBar } from '@/components/wallet-card'
 import { WalletSecurityBanner } from '@/components/banners'
 import { WalletLogs } from '@/components/wallet-logger'
 import { useToast } from '@/components/toast'
@@ -10,6 +9,9 @@ import { useWallet, Status } from '@/components/wallet'
 import Info from '@/components/info'
 import Text from '@/components/text'
 import { AutowithdrawSettings } from '@/components/autowithdraw-shared'
+import dynamic from 'next/dynamic'
+
+const WalletButtonBar = dynamic(() => import('@/components/wallet-buttonbar.js'), { ssr: false })
 
 export const getServerSideProps = getGetServerSideProps({ authRequired: true })