- )
-}
diff --git a/styles/globals.scss b/styles/globals.scss
index fd470920..05eaaab6 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -782,6 +782,7 @@ div[contenteditable]:focus,
fill: var(--theme-navLink);
}
+.nav-link:hover svg,
.nav-link.active svg {
fill: var(--theme-navLinkActive);
}
diff --git a/styles/wallet.module.css b/styles/wallet.module.css
index a54f5156..9464633b 100644
--- a/styles/wallet.module.css
+++ b/styles/wallet.module.css
@@ -106,6 +106,12 @@
flex-direction: column;
}
+@media (max-width: 768px) {
+ .form {
+ margin-top: 2rem;
+ }
+}
+
.separator {
display: flex;
align-items: center;
diff --git a/svgs/arrow-left-s-fill.svg b/svgs/arrow-left-s-fill.svg
new file mode 100644
index 00000000..57a3648c
--- /dev/null
+++ b/svgs/arrow-left-s-fill.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/svgs/arrow-left-s-line.svg b/svgs/arrow-left-s-line.svg
new file mode 100644
index 00000000..eb6c6cc1
--- /dev/null
+++ b/svgs/arrow-left-s-line.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/wallets/client/components/card.js b/wallets/client/components/card.js
index be8678f7..efe17522 100644
--- a/wallets/client/components/card.js
+++ b/wallets/client/components/card.js
@@ -7,7 +7,7 @@ import Link from 'next/link'
import RecvIcon from '@/svgs/arrow-left-down-line.svg'
import SendIcon from '@/svgs/arrow-right-up-line.svg'
import DragIcon from '@/svgs/draggable.svg'
-import { useWalletImage, useWalletSupport, useWalletStatus, WalletStatus, useProtocolTemplates } from '@/wallets/client/hooks'
+import { useWalletImage, useWalletSupport, useWalletStatus, WalletStatus } from '@/wallets/client/hooks'
import { isWallet, urlify, walletDisplayName } from '@/wallets/lib/util'
import { Draggable } from '@/wallets/client/components'
@@ -55,15 +55,7 @@ export function WalletCard ({ wallet, draggable = false, index, ...props }) {
}
function WalletLink ({ wallet, children }) {
- const support = useWalletSupport(wallet)
- const protocols = useProtocolTemplates(wallet)
- const firstSend = protocols.find(p => p.send)
- const firstRecv = protocols.find(p => !p.send)
-
- let href = '/wallets'
- href += isWallet(wallet) ? `/${wallet.id}` : `/${urlify(wallet.name)}`
- href += support.send ? `/send/${urlify(firstSend.name)}` : `/receive/${urlify(firstRecv.name)}`
-
+ const href = '/wallets' + (isWallet(wallet) ? `/${wallet.id}` : `/${urlify(wallet.name)}`)
return {children}
}
diff --git a/wallets/client/components/form/button.js b/wallets/client/components/form/button.js
new file mode 100644
index 00000000..215bb6fb
--- /dev/null
+++ b/wallets/client/components/form/button.js
@@ -0,0 +1,20 @@
+import classNames from 'classnames'
+import { Button } from 'react-bootstrap'
+import ArrowLeft from '@/svgs/arrow-left-s-fill.svg'
+
+import { usePrev, useNext } from '@/components/multi-step-form'
+
+export function BackButton ({ className }) {
+ const prev = usePrev()
+ return (
+
+ )
+}
+
+export function SkipButton ({ className }) {
+ const next = useNext()
+ return
+}
diff --git a/wallets/client/components/form/hooks.js b/wallets/client/components/form/hooks.js
new file mode 100644
index 00000000..19023f18
--- /dev/null
+++ b/wallets/client/components/form/hooks.js
@@ -0,0 +1,136 @@
+import { isTemplate, isWallet, protocolClientSchema, protocolFields, protocolFormId, walletLud16Domain } from '@/wallets/lib/util'
+import { createContext, useContext, useEffect, useMemo, useCallback, useState } from 'react'
+import { useWalletProtocolUpsert } from '@/wallets/client/hooks'
+import { MultiStepForm, useFormState, useStep } from '@/components/multi-step-form'
+
+export const Step = {
+ SEND: 'send',
+ RECEIVE: 'receive',
+ SETTINGS: 'settings'
+}
+
+const WalletMultiStepFormContext = createContext()
+
+export function WalletMultiStepFormContextProvider ({ wallet, initial, steps, children }) {
+ // save selected protocol, but useProtocol will always return the first protocol if no protocol is selected
+ const [protocol, setProtocol] = useState(null)
+ const value = useMemo(() => ({ wallet, protocol, setProtocol }), [wallet, protocol, setProtocol])
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+export function useWallet () {
+ const { wallet } = useContext(WalletMultiStepFormContext)
+ return wallet
+}
+
+export function useWalletProtocols () {
+ const step = useStep()
+ const wallet = useWallet()
+
+ const protocolFilter = useCallback(p => step === Step.SEND ? p.send : !p.send, [step])
+
+ return useMemo(() => {
+ // all protocols are templates if wallet is a template
+ if (isTemplate(wallet)) {
+ return wallet.protocols.filter(protocolFilter)
+ }
+ // return template for every protocol that isn't configured
+ const configured = wallet.protocols.filter(protocolFilter)
+ const templates = wallet.template.protocols.filter(protocolFilter)
+ return templates.map(p => configured.find(c => c.name === p.name) ?? p)
+ }, [wallet, protocolFilter])
+}
+
+export function useProtocol () {
+ const { protocol, setProtocol } = useContext(WalletMultiStepFormContext)
+ const protocols = useWalletProtocols()
+
+ useEffect(() => {
+ // when we move between send and receive, we need to make sure that we've selected a protocol
+ // that actually exists, so if the protocol is not found, we set it to the first protocol
+ if (!protocol || !protocols.find(p => p.id === protocol.id)) {
+ setProtocol(protocols[0])
+ }
+ }, [protocol, protocols, setProtocol])
+
+ // make sure we always have a protocol, even on first render before useEffect runs
+ return useMemo(() => [protocol ?? protocols[0], setProtocol], [protocol, protocols, setProtocol])
+}
+
+function useProtocolFormState (protocol) {
+ const formId = protocolFormId(protocol)
+ const [formState, setFormState] = useFormState(formId)
+ const setProtocolFormState = useCallback(
+ ({ enabled, ...config }) => {
+ setFormState({ ...protocol, enabled, config })
+ },
+ [setFormState, protocol])
+ return useMemo(() => [formState, setProtocolFormState], [formState, setProtocolFormState])
+}
+
+export function useProtocolForm (protocol) {
+ const [formState, setFormState] = useProtocolFormState(protocol)
+ const [complementaryFormState] = useProtocolFormState({ name: protocol.name, send: !protocol.send })
+ const wallet = useWallet()
+ const lud16Domain = walletLud16Domain(wallet.name)
+ const fields = protocolFields(protocol)
+ const initial = fields.reduce((acc, field) => {
+ // we only fallback to the existing protocol config because formState was not initialized yet on first render
+ // after init, we use formState as the source of truth everywhere
+ let value = formState?.config?.[field.name] ?? protocol.config?.[field.name]
+
+ if (!value && field.share) {
+ value = complementaryFormState?.config?.[field.name]
+ }
+
+ if (field.name === 'address' && lud16Domain && value) {
+ value = value.split('@')[0]
+ }
+
+ return {
+ ...acc,
+ [field.name]: value || ''
+ }
+ }, { enabled: formState?.enabled ?? protocol.enabled })
+
+ let schema = protocolClientSchema(protocol)
+ if (lud16Domain) {
+ schema = schema.transform(({ address, ...rest }) => {
+ return {
+ address: address ? `${address}@${lud16Domain}` : '',
+ ...rest
+ }
+ })
+ }
+
+ return useMemo(() => [{ fields, initial, schema }, setFormState], [fields, initial, schema, setFormState])
+}
+
+export function useSaveWallet () {
+ const wallet = useWallet()
+ const [formState] = useFormState()
+ const upsert = useWalletProtocolUpsert()
+
+ const save = useCallback(async () => {
+ let walletId = isWallet(wallet) ? wallet.id : undefined
+ for (const protocol of Object.values(formState)) {
+ const { id } = await upsert(
+ {
+ ...wallet,
+ id: walletId,
+ __typename: walletId ? 'Wallet' : 'WalletTemplate'
+ },
+ protocol, { ...protocol.config, enabled: protocol.enabled }
+ )
+ walletId ??= id
+ }
+ }, [wallet, formState, upsert])
+
+ return save
+}
diff --git a/wallets/client/components/form/index.js b/wallets/client/components/form/index.js
new file mode 100644
index 00000000..a5c02fbc
--- /dev/null
+++ b/wallets/client/components/form/index.js
@@ -0,0 +1,231 @@
+import { useCallback, useMemo } from 'react'
+import { InputGroup, Nav } from 'react-bootstrap'
+import classNames from 'classnames'
+import styles from '@/styles/wallet.module.css'
+import navStyles from '@/styles/nav.module.css'
+import { Checkbox, Form, Input, PasswordInput, SubmitButton } from '@/components/form'
+import CancelButton from '@/components/cancel-button'
+import Text from '@/components/text'
+import Info from '@/components/info'
+import { useFormState, useMaxSteps, useNext, useStepIndex } from '@/components/multi-step-form'
+import { isTemplate, isWallet, protocolDisplayName, protocolFormId, protocolLogName, walletLud16Domain } from '@/wallets/lib/util'
+import { WalletLayout, WalletLayoutHeader, WalletLayoutImageOrName, WalletLogs } from '@/wallets/client/components'
+import { TemplateLogsProvider, useTestSendPayment, useWalletLogger, useTestCreateInvoice, useWalletSupport } from '@/wallets/client/hooks'
+import ArrowRight from '@/svgs/arrow-right-s-fill.svg'
+
+import { WalletMultiStepFormContextProvider, Step, useWallet, useWalletProtocols, useProtocol, useProtocolForm } from './hooks'
+import { Settings } from './settings'
+import { BackButton, SkipButton } from './button'
+
+export function WalletMultiStepForm ({ wallet }) {
+ const initial = useMemo(() => wallet.protocols
+ .filter(p => !isTemplate(p))
+ .reduce((acc, p) => {
+ const formId = protocolFormId(p)
+ return {
+ ...acc,
+ [formId]: p
+ }
+ }, {}), [wallet])
+
+ const support = useWalletSupport(wallet)
+ const steps = useMemo(() =>
+ [
+ support.send && Step.SEND,
+ support.receive && Step.RECEIVE,
+ Step.SETTINGS
+ ].filter(Boolean),
+ [support])
+
+ return (
+
+
+
+
+
+
+ {steps.map(step => {
+ // WalletForm is aware of the current step via hooks
+ // and can thus render a different form for send vs. receive
+ if (step === Step.SEND) return
+ if (step === Step.RECEIVE) return
+ return
+ })}
+
+