/client'
->
-> - export default [lnd, cln, lnAddr]
-> + export default [lnd, cln, lnAddr, newWallet]
-> ```
\ No newline at end of file
+## How to add a new wallet
+
+**1. Insert a new row to the `WalletTemplate` table with which protocols it supports**
+
+Example:
+
+```sql
+INSERT INTO "WalletTemplate" (name, "sendProtocols", "recvProtocols")
+VALUES (
+ 'PHOENIX',
+ ARRAY[]::"WalletSendProtocolName"[],
+ ARRAY['BOLT12']::"WalletRecvProtocolName"[]
+);
+```
+
+**2. Customize how the wallet looks on the client via [wallets/lib/wallets.json](/wallets/lib/wallets.json)**
+
+Example:
+
+```json
+{
+ // must be same name as wallet template
+ "name": "PHOENIX",
+ // name to show in client
+ "displayName": "Phoenix",
+ // image to show in client
+ "image": "/path/to/image.png",
+ // url (planned) to show in client
+ "url": "https://phoenix.acinq.co/"
+}
+```
+
+_If the wallet supports a lightning address and the domain is different than the url, you can pass an object to `url`. Here is Zeus as an example:_
+
+```json
+{
+ "templateId": 23,
+ "name": "ZEUS",
+ "displayName": "Zeus",
+ "image": "/wallets/zeus.svg",
+ "url": {
+ "wallet": "https://zeusln.com/",
+ // different domain for lightning address
+ "lud16Domain": "zeuspay.com"
+ }
+},
+```
+
+That's it!
+
+## How to add a new protocol
+
+**1. Update prisma.schema**
+
+- add enum value to `WalletProtocolName` enum
+- add enum value to `WalletRecvProtocolName` or `WalletSendProtocolName`
+- add table to store protocol config
+- run `npx prisma migrate dev --create-only`
+
+
+Example
+
+```diff
+diff --git a/prisma/schema.prisma b/prisma/schema.prisma
+index 9a113797..12505333 100644
+--- a/prisma/schema.prisma
++++ b/prisma/schema.prisma
+@@ -1199,6 +1199,7 @@ enum WalletProtocolName {
+ LNC
+ CLN_REST
+ LND_GRPC
++ BOLT12
+ }
+
+ enum WalletSendProtocolName {
+@@ -1218,6 +1219,7 @@ enum WalletRecvProtocolName {
+ LN_ADDR
+ CLN_REST
+ LND_GRPC
++ BOLT12
+ }
+
+ enum WalletProtocolStatus {
+@@ -1288,6 +1290,7 @@ model WalletProtocol {
+ walletRecvLightningAddress WalletRecvLightningAddress?
+ walletRecvCLNRest WalletRecvCLNRest?
+ walletRecvLNDGRPC WalletRecvLNDGRPC?
++ walletRecvBolt12 WalletRecvBolt12?
+
+ @@unique(name: "WalletProtocol_walletId_send_name_key", [walletId, send, name])
+ }
+@@ -1429,3 +1432,12 @@ model WalletRecvLNDGRPC {
+ macaroon String
+ cert String?
+ }
++
++model WalletRecvBolt12 {
++ id Int @id @default(autoincrement())
++ createdAt DateTime @default(now()) @map("created_at")
++ updatedAt DateTime @default(now()) @updatedAt @map("updated_at")
++ protocolId Int @unique
++ protocol WalletProtocol @relation(fields: [protocolId], references: [id], onDelete: Cascade)
++ offer String
++}
+```
+
+
+
+
+Example
+
+```sql
+-- AlterEnum
+ALTER TYPE "WalletProtocolName" ADD VALUE 'BOLT12';
+
+-- AlterEnum
+ALTER TYPE "WalletRecvProtocolName" ADD VALUE 'BOLT12';
+
+-- CreateTable
+CREATE TABLE "WalletRecvBolt12" (
+ "id" SERIAL NOT NULL,
+ "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ "protocolId" INTEGER NOT NULL,
+ "offer" TEXT NOT NULL,
+
+ CONSTRAINT "WalletRecvBolt12_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "WalletRecvBolt12_protocolId_key" ON "WalletRecvBolt12"("protocolId");
+
+-- AddForeignKey
+ALTER TABLE "WalletRecvBolt12" ADD CONSTRAINT "WalletRecvBolt12_protocolId_fkey" FOREIGN KEY ("protocolId") REFERENCES "WalletProtocol"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- vvv Add trigger below manually vvv
+
+CREATE TRIGGER wallet_to_jsonb
+ AFTER INSERT OR UPDATE ON "WalletRecvBolt12"
+ FOR EACH ROW
+ EXECUTE PROCEDURE wallet_to_jsonb();
+
+
+-- if protocol is for sending you also need to add the wallet_clear_vault trigger:
+-- CREATE TRIGGER wallet_clear_vault
+-- AFTER DELETE ON "WalletSendClinkDebit"
+-- FOR EACH ROW
+-- EXECUTE PROCEDURE wallet_clear_vault();
+
+```
+
+
+
+
+Example
+
+```js
+// wallets/lib/protocols/bolt12.js
+
+export default [
+ {
+ // same as enum value we added
+ name: 'BOLT12',
+ displayName: 'BOLT12',
+ send: false,
+ fields: [
+ {
+ name: 'offer',
+ type: 'text',
+ label: 'offer',
+ placeholder: 'lno...',
+ validate: offerValidator,
+ required: true,
+ }
+ ],
+ relationName: 'walletRecvBolt12'
+ }
+]
+```
+
+```diff
+diff --git a/wallets/lib/protocols/index.js b/wallets/lib/protocols/index.js
+index 8caa5f52..58f5ab86 100644
+--- a/wallets/lib/protocols/index.js
++++ b/wallets/lib/protocols/index.js
+@@ -7,6 +7,7 @@ import lnbitsSuite from './lnbits'
+ import phoenixdSuite from './phoenixd'
+ import blinkSuite from './blink'
+ import webln from './webln'
++import bolt12 from './bolt12'
+
+ /**
+ * Protocol names as used in the database
+@@ -44,5 +45,6 @@ export default [
+ ...phoenixdSuite,
+ ...lnbitsSuite,
+ ...blinkSuite,
+- webln
++ webln,
++ bolt12
+ ]
+```
+
+
+
+
+Example
+
+```js
+// wallets/server/protocols/bolt12.js
+
+// same as enum value we added
+export const name = 'BOLT12'
+
+export async function createInvoice ({ msats, description, expiry }, config, { signal }) {
+ /* ... code to create invoice using protocol config ... */
+}
+
+export async function testCreateInvoice ({ url }, { signal }) {
+ return await createInvoice(
+ { msats: 1000, description: 'SN test invoice', expiry: 1 },
+ { url },
+ { signal }
+ )
+}
+```
+
+```diff
+diff --git a/wallets/server/protocols/index.js b/wallets/server/protocols/index.js
+index 26c292d9..3ac88ae1 100644
+--- a/wallets/server/protocols/index.js
++++ b/wallets/server/protocols/index.js
+@@ -5,6 +5,7 @@ import * as clnRest from './clnRest'
+ import * as phoenixd from './phoenixd'
+ import * as blink from './blink'
+ import * as lndGrpc from './lndGrpc'
++import * as bolt12 from './bolt12'
+
+ export * from './util'
+
+@@ -56,5 +57,6 @@ export default [
+ clnRest,
+ phoenixd,
+ blink,
+- lndGrpc
++ lndGrpc,
++ bolt12
+ ]
+```
+
+
+
+
+Example
+
+```diff
+diff --git a/api/typeDefs/wallet.js b/api/typeDefs/wallet.js
+index 3c1fffd1..af3858a5 100644
+--- a/api/typeDefs/wallet.js
++++ b/api/typeDefs/wallet.js
+@@ -38,6 +38,7 @@ const typeDefs = gql`
+ upsertWalletRecvLNDGRPC(walletId: ID, templateId: ID, enabled: Boolean!, networkTests: Boolean, socket: String!, macaroon: String!, cert: String): WalletRecvLNDGRPC!
+ upsertWalletSendLNC(walletId: ID, templateId: ID, enabled: Boolean!, pairingPhrase: VaultEntryInput!, localKey: VaultEntryInput!, remoteKey: VaultEntryInput!, serverHost: VaultEntryInput!): WalletSendLNC!
+ upsertWalletSendWebLN(walletId: ID, templateId: ID, enabled: Boolean!): WalletSendWebLN!
++ upsertWalletRecvBolt12(walletId: ID, templateId: ID, enabled: Boolean!, networkTests: Boolean, offer: String!): WalletRecvBolt12!
+ removeWalletProtocol(id: ID!): Boolean
+ updateWalletEncryption(keyHash: String!, wallets: [WalletEncryptionUpdate!]!): Boolean
+ updateKeyHash(keyHash: String!): Boolean
+@@ -111,6 +112,7 @@ const typeDefs = gql`
+ | WalletRecvLightningAddress
+ | WalletRecvCLNRest
+ | WalletRecvLNDGRPC
++ | WalletRecvBolt12
+
+ type WalletSettings {
+ receiveCreditsBelowSats: Int!
+@@ -207,6 +209,11 @@ const typeDefs = gql`
+ cert: String
+ }
+
++ type WalletRecvBolt12 {
++ id: ID!
++ offer: String!
++ }
++
+ input AutowithdrawSettings {
+ autoWithdrawThreshold: Int!
+ autoWithdrawMaxFeePercent: Float!
+diff --git a/wallets/client/fragments/protocol.js b/wallets/client/fragments/protocol.js
+index d1a65ff4..138d1a62 100644
+--- a/wallets/client/fragments/protocol.js
++++ b/wallets/client/fragments/protocol.js
+@@ -109,3 +109,11 @@ export const UPSERT_WALLET_SEND_WEBLN = gql`
+ }
+ }
+ `
++
++export const UPSERT_WALLET_RECEIVE_BOLT12 = gql`
++ mutation upsertWalletRecvBolt12($walletId: ID, $templateId: ID, $enabled: Boolean!, $networkTests: Boolean, $offer: String!) {
++ upsertWalletRecvBolt12(walletId: $walletId, templateId: $templateId, enabled: $enabled, networkTests: $networkTests, offer: $offer) {
++ id
++ }
++ }
++`
+diff --git a/wallets/client/fragments/wallet.js b/wallets/client/fragments/wallet.js
+index c301f5c1..73d59e6d 100644
+--- a/wallets/client/fragments/wallet.js
++++ b/wallets/client/fragments/wallet.js
+@@ -106,6 +106,10 @@ const WALLET_PROTOCOL_FIELDS = gql`
+ macaroon
+ cert
+ }
++ ... on WalletRecvBolt12 {
++ id
++ offer
++ }
+ }
+ }
+ `
+diff --git a/wallets/server/resolvers/util.js b/wallets/server/resolvers/util.js
+index 0155a422..ced4b399 100644
+--- a/wallets/server/resolvers/util.js
++++ b/wallets/server/resolvers/util.js
+@@ -19,6 +19,8 @@ export function mapWalletResolveTypes (wallet) {
+ return 'WalletRecvCLNRest'
+ case 'LND_GRPC':
+ return 'WalletRecvLNDGRPC'
++ case 'BOLT12':
++ return 'WalletRecvBolt12'
+ default:
+ return null
+ }
+```
+
+
diff --git a/wallets/blink/common.js b/wallets/blink/common.js
deleted file mode 100644
index 75540115..00000000
--- a/wallets/blink/common.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { fetchWithTimeout } from '@/lib/fetch'
-import { assertContentTypeJson, assertResponseOk } from '@/lib/url'
-
-export const galoyBlinkUrl = 'https://api.blink.sv/graphql'
-export const galoyBlinkDashboardUrl = 'https://dashboard.blink.sv/'
-
-export const SCOPE_READ = 'READ'
-export const SCOPE_WRITE = 'WRITE'
-export const SCOPE_RECEIVE = 'RECEIVE'
-
-export async function getWallet ({ apiKey, currency }, { signal }) {
- const out = await request({
- apiKey,
- query: `
- query me {
- me {
- defaultAccount {
- wallets {
- id
- walletCurrency
- }
- }
- }
- }`
- }, { signal })
-
- const wallets = out.data.me.defaultAccount.wallets
- for (const wallet of wallets) {
- if (wallet.walletCurrency === currency) {
- return wallet
- }
- }
-
- throw new Error(`wallet ${currency} not found`)
-}
-
-export async function request ({ apiKey, query, variables = {} }, { signal }) {
- const method = 'POST'
- const res = await fetchWithTimeout(galoyBlinkUrl, {
- method,
- headers: {
- 'Content-Type': 'application/json',
- 'X-API-KEY': apiKey
- },
- body: JSON.stringify({ query, variables }),
- signal
- })
-
- assertResponseOk(res, { method })
- assertContentTypeJson(res, { method })
-
- return res.json()
-}
-
-export async function getScopes ({ apiKey }, { signal }) {
- const out = await request({
- apiKey,
- query: `
- query scopes {
- authorization {
- scopes
- }
- }`
- }, { signal })
- const scopes = out?.data?.authorization?.scopes
- return scopes || []
-}
diff --git a/wallets/blink/index.js b/wallets/blink/index.js
deleted file mode 100644
index d870592c..00000000
--- a/wallets/blink/index.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { string } from '@/lib/yup'
-import { galoyBlinkDashboardUrl } from '@/wallets/blink/common'
-
-export const name = 'blink'
-export const walletType = 'BLINK'
-export const walletField = 'walletBlink'
-
-export const fields = [
- {
- name: 'apiKey',
- label: 'api key',
- type: 'password',
- placeholder: 'blink_...',
- clientOnly: true,
- validate: string()
- .matches(/^blink_[A-Za-z0-9]+$/, { message: 'must match pattern blink_A-Za-z0-9' }),
- help: `you can get an API key from [Blink Dashboard](${galoyBlinkDashboardUrl}).\nPlease make sure to select ONLY the 'Read' and 'Write' scopes when generating this API key.`,
- requiredWithout: 'apiKeyRecv',
- optional: 'for sending'
- },
- {
- name: 'currency',
- label: 'wallet type',
- type: 'text',
- help: 'the blink wallet to use for sending (BTC or USD for stablesats)',
- placeholder: 'BTC',
- defaultValue: 'BTC',
- clear: true,
- autoComplete: 'off',
- clientOnly: true,
- validate: string()
- .transform(value => value ? value.toUpperCase() : 'BTC')
- .oneOf(['USD', 'BTC'], 'must be BTC or USD'),
- optional: 'for sending',
- requiredWithout: 'currencyRecv'
- },
- {
- name: 'apiKeyRecv',
- label: 'receive api key',
- type: 'password',
- help: `you can get an API key from [Blink Dashboard](${galoyBlinkDashboardUrl}).\nPlease make sure to select ONLY the 'Read' and 'Receive' scopes when generating this API key.`,
- placeholder: 'blink_...',
- serverOnly: true,
- validate: string()
- .matches(/^blink_[A-Za-z0-9]+$/, { message: 'must match pattern blink_A-Za-z0-9' }),
- optional: 'for receiving',
- requiredWithout: 'apiKey'
- },
- {
- name: 'currencyRecv',
- label: 'receive wallet type',
- type: 'text',
- help: 'the blink wallet to use for receiving (only BTC available)',
- defaultValue: 'BTC',
- clear: true,
- autoComplete: 'off',
- placeholder: 'BTC',
- serverOnly: true,
- validate: string()
- .transform(value => value ? value.toUpperCase() : 'BTC')
- .oneOf(['BTC'], 'must be BTC'),
- optional: 'for receiving',
- requiredWithout: 'currency'
- }
-]
-
-export const card = {
- title: 'Blink',
- subtitle: 'use [Blink](https://blink.sv/) for payments',
- image: { src: '/wallets/blink.svg' }
-}
diff --git a/wallets/buttonbar.js b/wallets/buttonbar.js
deleted file mode 100644
index 04b8c1b8..00000000
--- a/wallets/buttonbar.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Button } from 'react-bootstrap'
-import CancelButton from '@/components/cancel-button'
-import { SubmitButton } from '@/components/form'
-import { isConfigured } from '@/wallets/common'
-
-export default function WalletButtonBar ({
- wallet, disable,
- className, children, onDelete, onCancel, hasCancel = true,
- createText = 'attach', deleteText = 'detach', editText = 'save'
-}) {
- return (
-
-
- {isConfigured(wallet) && wallet.def.requiresConfig &&
-
{deleteText} }
- {children}
-
- {hasCancel && {isConfigured(wallet) ? editText : createText}
-
-
-
-
- {status.any !== Status.Disabled &&
-
-
- {image
- ?
- :
{wallet.def.card.title} }
-
-
- {isConfigured(wallet)
- ? <>configure
-
-
- )
-}
diff --git a/wallets/client.js b/wallets/client.js
deleted file mode 100644
index 8bd44698..00000000
--- a/wallets/client.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as nwc from '@/wallets/nwc/client'
-import * as lnbits from '@/wallets/lnbits/client'
-import * as lnc from '@/wallets/lnc/client'
-import * as lnAddr from '@/wallets/lightning-address/client'
-import * as cln from '@/wallets/cln/client'
-import * as lnd from '@/wallets/lnd/client'
-import * as webln from '@/wallets/webln/client'
-import * as blink from '@/wallets/blink/client'
-import * as phoenixd from '@/wallets/phoenixd/client'
-
-export default [nwc, lnbits, lnc, lnAddr, cln, lnd, webln, blink, phoenixd]
diff --git a/wallets/client/components/card.js b/wallets/client/components/card.js
new file mode 100644
index 00000000..26a061a6
--- /dev/null
+++ b/wallets/client/components/card.js
@@ -0,0 +1,71 @@
+import { Card } from 'react-bootstrap'
+import classNames from 'classnames'
+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 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 } from '@/wallets/client/hooks'
+import { isWallet, urlify, walletDisplayName } from '@/wallets/lib/util'
+import { Draggable } from '@/wallets/client/components'
+
+export function WalletCard ({ wallet, draggable = false, index, ...props }) {
+ const image = useWalletImage(wallet.name)
+ const status = useWalletStatus(wallet)
+ const support = useWalletSupport(wallet)
+
+ const card = (
+
+
+ {draggable &&
+
+
+ {image
+ ?
+ :
{walletDisplayName(wallet.name)} }
+
+
+
+ {isWallet(wallet)
+ ? <>configure
+
+
+ )
+
+ if (draggable) {
+ return (
+
+ {card}
+
+ )
+ }
+
+ return card
+}
+
+function WalletLink ({ wallet, children }) {
+ const support = useWalletSupport(wallet)
+ const sendRecvParam = support.send ? 'send' : 'receive'
+ const href = '/wallets' + (isWallet(wallet) ? `/${wallet.id}` : `/${urlify(wallet.name)}`) + `/${sendRecvParam}`
+ return
+ {children}
+
+ )
+}
diff --git a/wallets/client/components/forms.js b/wallets/client/components/forms.js
new file mode 100644
index 00000000..fd634b34
--- /dev/null
+++ b/wallets/client/components/forms.js
@@ -0,0 +1,359 @@
+import { useEffect, useCallback, useMemo, createContext, useContext } from 'react'
+import { Button, InputGroup, Nav } from 'react-bootstrap'
+import Link from 'next/link'
+import { useParams, usePathname } from 'next/navigation'
+import { useRouter } from 'next/router'
+import { WalletLayout, WalletLayoutHeader, WalletLayoutImageOrName, WalletLogs } from '@/wallets/client/components'
+import { protocolDisplayName, protocolFields, protocolClientSchema, unurlify, urlify, isWallet, isTemplate, walletLud16Domain } from '@/wallets/lib/util'
+import styles from '@/styles/wallet.module.css'
+import { Checkbox, Form, Input, PasswordInput, SubmitButton } from '@/components/form'
+import CancelButton from '@/components/cancel-button'
+import { useWalletProtocolUpsert, useWalletProtocolRemove, useWalletQuery, TemplateLogsProvider } from '@/wallets/client/hooks'
+import { useToast } from '@/components/toast'
+import Text from '@/components/text'
+import Info from '@/components/info'
+
+const WalletFormsContext = createContext()
+
+export function WalletForms ({ id, name }) {
+ // TODO(wallet-v2): handle loading and error states
+ const { data, refetch } = useWalletQuery({ name, id })
+ const wallet = data?.wallet
+
+ return (
+
+
+
+ {wallet &&
+ {wallet && (
+
+
+ )}
+
+
+ )
+}
+
+function WalletFormsProvider ({ children, wallet, refetch }) {
+ const value = useMemo(() => ({ refetch, wallet }), [refetch, wallet])
+ return (
+
+ {children}
+
+ )
+}
+
+function useWalletRefetch () {
+ const { refetch } = useContext(WalletFormsContext)
+ return refetch
+}
+
+function useWallet () {
+ const { wallet } = useContext(WalletFormsContext)
+ return wallet
+}
+
+function WalletFormSelector () {
+ const sendRecvParam = useSendRecvParam()
+ const protocolParam = useWalletProtocolParam()
+
+ return (
+ <>
+
+
+
+
+ )}
+
+
+
+ SEND
+
+
+
+ RECEIVE
+
+
+
+ )
+}
+
+function WalletProtocolSelector () {
+ const walletPath = useWalletPathname()
+ const sendRecvParam = useSendRecvParam()
+ const path = `${walletPath}/${sendRecvParam}`
+
+ const protocols = useWalletProtocols()
+ const selected = useWalletProtocolParam()
+ const router = useRouter()
+
+ useEffect(() => {
+ if (!selected && protocols.length > 0) {
+ router.replace(`/${path}/${urlify(protocols[0].name)}`, null, { shallow: true })
+ }
+ }, [path])
+
+ if (protocols.length === 0) {
+ // TODO(wallet-v2): let user know how to request support if the wallet actually does support sending
+ return (
+
+ {sendRecvParam === 'send' ? 'sending' : 'receiving'} not supported
+
+ )
+ }
+
+ return (
+
+ {
+ protocols.map(p => (
+
+ {protocolDisplayName(p)}
+
+
+ ))
+ }
+
+ )
+}
+
+function WalletProtocolForm () {
+ const sendRecvParam = useSendRecvParam()
+ const router = useRouter()
+ const protocol = useSelectedProtocol()
+ if (!protocol) return null
+
+ // I think it is okay to skip this hook if the protocol is not found
+ // because we will need to change the URL to get a different protocol
+ // so the amount of rendered hooks should stay the same during the lifecycle of this component
+ const wallet = useWallet()
+ const upsertWalletProtocol = useWalletProtocolUpsert(wallet, protocol)
+ const toaster = useToast()
+ const refetch = useWalletRefetch()
+
+ const { fields, initial, schema } = useProtocolForm(protocol)
+
+ // create a copy of values to avoid mutating the original
+ const onSubmit = useCallback(async ({ ...values }) => {
+ const lud16Domain = walletLud16Domain(wallet.name)
+ if (values.address && lud16Domain) {
+ values.address = `${values.address}@${lud16Domain}`
+ }
+
+ const upsert = await upsertWalletProtocol(values)
+ if (isWallet(wallet)) {
+ toaster.success('wallet saved')
+ refetch()
+ return
+ }
+ // we just created a new user wallet from a template
+ router.replace(`/wallets/${upsert.id}/${sendRecvParam}`, null, { shallow: true })
+ toaster.success('wallet attached', { persistOnNavigate: true })
+ }, [upsertWalletProtocol, toaster, wallet, router])
+
+ return (
+ <>
+
+
+ {!isTemplate(protocol) && detach }
+ cancel
+ {isWallet(wallet) ? 'save' : 'attach'}
+
+ )
+}
+
+function WalletProtocolFormField ({ type, ...props }) {
+ const wallet = useWallet()
+ const protocol = useSelectedProtocol()
+
+ function transform ({ validate, encrypt, editable, help, ...props }) {
+ const [upperHint, bottomHint] = Array.isArray(props.hint) ? props.hint : [null, props.hint]
+
+ const parseHelpText = text => Array.isArray(text) ? text.join('\n\n') : text
+ const _help = help
+ ? (
+ typeof help === 'string'
+ ? { label: null, text: help }
+ : (
+ Array.isArray(help)
+ ? { label: null, text: parseHelpText(help) }
+ : { label: help.label, text: parseHelpText(help.text) }
+ )
+ )
+ : null
+
+ const readOnly = !!protocol.config?.[props.name] && editable === false
+
+ const label = (
+
+ {props.label}
+ {_help && (
+
+ {_help.text}
+
+ )}
+
+ {upperHint
+ ? {upperHint}
+ : (!props.required ? 'optional' : null)}
+
+
+ )
+
+ return { ...props, hint: bottomHint, label, readOnly }
+ }
+
+ switch (type) {
+ case 'text': {
+ let append
+ const lud16Domain = walletLud16Domain(wallet.name)
+ if (props.name === 'address' && lud16Domain) {
+ append = @{lud16Domain}
+ }
+ return
+ {children}
+
+ )
+}
+
+export function WalletLayoutHeader ({ children }) {
+ return (
+
+ {children}
+
+ )
+}
+
+export function WalletLayoutSubHeader ({ children }) {
+ return (
+
+ {children}
+
+ )
+}
+
+export function WalletLayoutLink ({ children, href }) {
+ return (
+
+ {img
+ ? (
+
+ )
+ : walletDisplayName(name)}
+
+ clear logs
+
+
+
+ {logs.map((log, i) => (
+
+ ))}
+ {loading
+ ?
loading...
+ : logs.length === 0 &&
empty
}
+ {hasMore
+ ?
more
+ :
------ start of logs ------
}
+
+
+
{`[${nameToTag(tag)}]`}
+
{level}
+
{message}
+
{indicator}
+
+ {Object.entries(filtered)
+ .map(([key, value], i) => {
+ return (
+
+ {key}:
+ {value}
+
+ )
+ })}
+
{time}
+}
diff --git a/wallets/client/components/passphrase.js b/wallets/client/components/passphrase.js
new file mode 100644
index 00000000..01a65ee7
--- /dev/null
+++ b/wallets/client/components/passphrase.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { CopyButton } from '@/components/form'
+import { QRCodeSVG } from 'qrcode.react'
+import styles from '@/styles/wallet.module.css'
+
+export function Passphrase ({ passphrase }) {
+ const words = passphrase.trim().split(/\s+/)
+ return (
+ <>
+
+ Make sure to copy your passphrase now.
+
+
+ This is the only time we will show it to you.
+
+
+
+
+ {words.map((word, index) => (
+
+ {index + 1}.
+ {word}
+
+ ))}
+
+
+
+ )
+}
diff --git a/wallets/client/components/search.js b/wallets/client/components/search.js
new file mode 100644
index 00000000..9ef673e3
--- /dev/null
+++ b/wallets/client/components/search.js
@@ -0,0 +1,41 @@
+import { useCallback, useState } from 'react'
+import { Form, InputGroup, Button } from 'react-bootstrap'
+import SearchIcon from '@/svgs/search-line.svg'
+
+function fuzzySearch (query) {
+ return (text) => {
+ const pattern = query.toLowerCase().split('').join('.*')
+ const regex = new RegExp(pattern)
+ return regex.test(text.toLowerCase())
+ }
+}
+
+export function WalletSearch ({ setSearchFilter }) {
+ const [searchQuery, setSearchQuery] = useState('')
+
+ const onChange = useCallback((e) => {
+ const query = e.target.value
+ setSearchQuery(query)
+ setSearchFilter(() => fuzzySearch(query))
+ }, [])
+
+ return (
+
+ )
+}
diff --git a/wallets/client/context/dnd.js b/wallets/client/context/dnd.js
new file mode 100644
index 00000000..198810ed
--- /dev/null
+++ b/wallets/client/context/dnd.js
@@ -0,0 +1,235 @@
+import { createContext, useContext, useCallback, useReducer, useState } from 'react'
+
+const DndContext = createContext(null)
+const DndDispatchContext = createContext(null)
+
+export const DRAG_START = 'DRAG_START'
+export const DRAG_ENTER = 'DRAG_ENTER'
+export const DRAG_DROP = 'DRAG_DROP'
+export const DRAG_END = 'DRAG_END'
+export const DRAG_LEAVE = 'DRAG_LEAVE'
+
+const initialState = {
+ isDragging: false,
+ dragIndex: null,
+ dragOverIndex: null,
+ items: []
+}
+
+function useDndState () {
+ const context = useContext(DndContext)
+ if (!context) {
+ throw new Error('useDndState must be used within a DndProvider')
+ }
+ return context
+}
+
+function useDndDispatch () {
+ const context = useContext(DndDispatchContext)
+ if (!context) {
+ throw new Error('useDndDispatch must be used within a DndProvider')
+ }
+ return context
+}
+
+export function useDndHandlers (index) {
+ const dispatch = useDndDispatch()
+ const { isDragging, dragOverIndex, dragIndex } = useDndState()
+ const [isTouchDragging, setIsTouchDragging] = useState(false)
+ const [touchStartY, setTouchStartY] = useState(0)
+ const [touchStartX, setTouchStartX] = useState(0)
+
+ const isBeingDragged = (isDragging || isTouchDragging) && dragIndex === index
+ const isDragOver = (isDragging || isTouchDragging) && dragOverIndex === index && dragIndex !== index
+
+ const handleDragStart = useCallback((e) => {
+ e.dataTransfer.effectAllowed = 'move'
+ e.dataTransfer.setData('text/html', e.target.outerHTML)
+ e.dataTransfer.setData('text/plain', index.toString())
+
+ // Remove browser default drag image by setting it to an invisible element
+ const invisibleElement = document.createElement('div')
+ invisibleElement.style.width = '1px'
+ invisibleElement.style.height = '1px'
+ invisibleElement.style.opacity = '0'
+ invisibleElement.style.position = 'absolute'
+ invisibleElement.style.top = '-9999px'
+ invisibleElement.style.left = '-9999px'
+ document.body.appendChild(invisibleElement)
+ e.dataTransfer.setDragImage(invisibleElement, 0, 0)
+
+ // Remove the invisible element after a short delay
+ setTimeout(() => {
+ if (document.body.contains(invisibleElement)) {
+ document.body.removeChild(invisibleElement)
+ }
+ }, 100)
+
+ dispatch({ type: DRAG_START, index })
+ }, [index, dispatch])
+
+ const handleDragOver = useCallback((e) => {
+ e.preventDefault()
+ e.dataTransfer.dropEffect = 'move'
+ }, [])
+
+ const handleDragEnter = useCallback((e) => {
+ e.preventDefault()
+ dispatch({ type: DRAG_ENTER, index })
+ }, [index, dispatch])
+
+ const handleDragLeave = useCallback((e) => {
+ e.preventDefault()
+ // Only clear if we're leaving the element (not entering a child)
+ if (!e.currentTarget.contains(e.relatedTarget)) {
+ dispatch({ type: DRAG_LEAVE })
+ }
+ }, [dispatch])
+
+ const handleDrop = useCallback((e) => {
+ e.preventDefault()
+ const draggedIndex = parseInt(e.dataTransfer.getData('text/plain'))
+ if (draggedIndex !== index) {
+ dispatch({ type: DRAG_DROP, fromIndex: draggedIndex, toIndex: index })
+ }
+ }, [index, dispatch])
+
+ const handleDragEnd = useCallback(() => {
+ dispatch({ type: DRAG_END })
+ }, [dispatch])
+
+ // Touch event handlers for mobile
+ const handleTouchStart = useCallback((e) => {
+ if (e.touches.length === 1) {
+ const touch = e.touches[0]
+ setTouchStartX(touch.clientX)
+ setTouchStartY(touch.clientY)
+ setIsTouchDragging(false)
+ }
+ }, [])
+
+ const handleTouchMove = useCallback((e) => {
+ if (e.touches.length === 1) {
+ const touch = e.touches[0]
+ const deltaX = Math.abs(touch.clientX - touchStartX)
+ const deltaY = Math.abs(touch.clientY - touchStartY)
+
+ // Start dragging if moved more than 10px in any direction
+ if (!isTouchDragging && (deltaX > 10 || deltaY > 10)) {
+ setIsTouchDragging(true)
+ dispatch({ type: DRAG_START, index })
+ }
+
+ if (isTouchDragging) {
+ // Find the element under the touch point
+ const elementUnderTouch = document.elementFromPoint(touch.clientX, touch.clientY)
+ if (elementUnderTouch) {
+ const element = elementUnderTouch.closest('[data-index]')
+ if (element) {
+ const elementIndex = parseInt(element.dataset.index)
+ if (elementIndex !== index) {
+ dispatch({ type: DRAG_ENTER, index: elementIndex })
+ }
+ }
+ }
+ }
+ }
+ }, [touchStartX, touchStartY, isTouchDragging, index, dispatch])
+
+ const handleTouchEnd = useCallback((e) => {
+ if (isTouchDragging) {
+ const touch = e.changedTouches[0]
+ const elementUnderTouch = document.elementFromPoint(touch.clientX, touch.clientY)
+
+ if (elementUnderTouch) {
+ const element = elementUnderTouch.closest('[data-index]')
+ if (element) {
+ const elementIndex = parseInt(element.dataset.index)
+ if (elementIndex !== index) {
+ dispatch({ type: DRAG_DROP, fromIndex: index, toIndex: elementIndex })
+ }
+ }
+ }
+
+ setIsTouchDragging(false)
+ dispatch({ type: DRAG_END })
+ }
+ }, [isTouchDragging, index, dispatch])
+
+ return {
+ handleDragStart,
+ handleDragOver,
+ handleDragEnter,
+ handleDragLeave,
+ handleDrop,
+ handleDragEnd,
+ handleTouchStart,
+ handleTouchMove,
+ handleTouchEnd,
+ isBeingDragged,
+ isDragOver
+ }
+}
+
+export function DndProvider ({ children, items, onReorder }) {
+ const [state, dispatch] = useReducer(dndReducer, { ...initialState, items })
+
+ const dispatchWithCallback = useCallback((action) => {
+ if (action.type !== DRAG_DROP) {
+ dispatch(action)
+ return
+ }
+
+ const { fromIndex, toIndex } = action
+ if (fromIndex === toIndex) {
+ // nothing changed, just dispatch action but don't run onReorder callback
+ dispatch(action)
+ return
+ }
+
+ const newItems = [...items]
+ const [movedItem] = newItems.splice(fromIndex, 1)
+ newItems.splice(toIndex, 0, movedItem)
+ onReorder(newItems)
+ }, [items, onReorder])
+
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+function dndReducer (state, action) {
+ switch (action.type) {
+ case DRAG_START:
+ return {
+ ...state,
+ isDragging: true,
+ dragIndex: action.index,
+ dragOverIndex: null
+ }
+ case DRAG_ENTER:
+ return {
+ ...state,
+ dragOverIndex: action.index
+ }
+ case DRAG_LEAVE:
+ return {
+ ...state,
+ dragOverIndex: null
+ }
+ case DRAG_DROP:
+ case DRAG_END:
+ return {
+ ...state,
+ isDragging: false,
+ dragIndex: null,
+ dragOverIndex: null
+ }
+ default:
+ return state
+ }
+}
diff --git a/wallets/client/context/hooks.js b/wallets/client/context/hooks.js
new file mode 100644
index 00000000..a2c78a99
--- /dev/null
+++ b/wallets/client/context/hooks.js
@@ -0,0 +1,245 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useLazyQuery } from '@apollo/client'
+import { FAILED_INVOICES } from '@/fragments/invoice'
+import { NORMAL_POLL_INTERVAL } from '@/lib/constants'
+import useInvoice from '@/components/use-invoice'
+import { useMe } from '@/components/me'
+import {
+ useWalletsQuery, useWalletPayment, useGenerateRandomKey, useSetKey, useLoadKey, useLoadOldKey,
+ useWalletMigrationMutation, CryptoKeyRequiredError, useIsWrongKey
+} from '@/wallets/client/hooks'
+import { WalletConfigurationError } from '@/wallets/client/errors'
+import { SET_WALLETS, WRONG_KEY, KEY_MATCH, NO_KEY, useWalletsDispatch } from '@/wallets/client/context'
+import { useIndexedDB } from '@/components/use-indexeddb'
+
+export function useServerWallets () {
+ const dispatch = useWalletsDispatch()
+ const query = useWalletsQuery()
+
+ useEffect(() => {
+ if (query.error) {
+ console.error('failed to fetch wallets:', query.error)
+ return
+ }
+ if (query.loading) return
+ dispatch({ type: SET_WALLETS, wallets: query.data.wallets })
+ }, [query])
+}
+
+export function useKeyCheck () {
+}
+
+export function useAutomatedRetries () {
+ const waitForWalletPayment = useWalletPayment()
+ const invoiceHelper = useInvoice()
+ const [getFailedInvoices] = useLazyQuery(FAILED_INVOICES, { fetchPolicy: 'network-only', nextFetchPolicy: 'network-only' })
+ const { me } = useMe()
+
+ const retry = useCallback(async (invoice) => {
+ const newInvoice = await invoiceHelper.retry({ ...invoice, newAttempt: true })
+
+ try {
+ await waitForWalletPayment(newInvoice)
+ } catch (err) {
+ if (err instanceof WalletConfigurationError) {
+ // consume attempt by canceling invoice
+ await invoiceHelper.cancel(newInvoice)
+ }
+ throw err
+ }
+ }, [invoiceHelper, waitForWalletPayment])
+
+ useEffect(() => {
+ // we always retry failed invoices, even if the user has no wallets on any client
+ // to make sure that failed payments will always show up in notifications eventually
+
+ if (!me) return
+
+ const retryPoll = async () => {
+ let failedInvoices
+ try {
+ const { data, error } = await getFailedInvoices()
+ if (error) throw error
+ failedInvoices = data.failedInvoices
+ } catch (err) {
+ console.error('failed to fetch invoices to retry:', err)
+ return
+ }
+
+ for (const inv of failedInvoices) {
+ try {
+ await retry(inv)
+ } catch (err) {
+ // some retries are expected to fail since only one client at a time is allowed to retry
+ // these should show up as 'invoice not found' errors
+ console.error('retry failed:', err)
+ }
+ }
+ }
+
+ let timeout, stopped
+ const queuePoll = () => {
+ timeout = setTimeout(async () => {
+ try {
+ await retryPoll()
+ } catch (err) {
+ // every error should already be handled in retryPoll
+ // but this catch is a safety net to not trigger an unhandled promise rejection
+ console.error('retry poll failed:', err)
+ }
+ if (!stopped) queuePoll()
+ }, NORMAL_POLL_INTERVAL)
+ }
+
+ const stopPolling = () => {
+ stopped = true
+ clearTimeout(timeout)
+ }
+
+ queuePoll()
+ return stopPolling
+ }, [me?.id, getFailedInvoices, retry])
+}
+
+export function useKeyInit () {
+ const { me } = useMe()
+
+ const dispatch = useWalletsDispatch()
+ const wrongKey = useIsWrongKey()
+
+ useEffect(() => {
+ if (typeof window.indexedDB === 'undefined') {
+ dispatch({ type: NO_KEY })
+ } else if (wrongKey) {
+ dispatch({ type: WRONG_KEY })
+ } else {
+ dispatch({ type: KEY_MATCH })
+ }
+ }, [wrongKey, dispatch])
+
+ const generateRandomKey = useGenerateRandomKey()
+ const setKey = useSetKey()
+ const loadKey = useLoadKey()
+ const loadOldKey = useLoadOldKey()
+ const [db, setDb] = useState(null)
+ const { open } = useIndexedDB()
+
+ useEffect(() => {
+ if (!me?.id) return
+ let db
+
+ async function openDb () {
+ db = await open()
+ setDb(db)
+ }
+ openDb()
+
+ return () => {
+ db?.close()
+ setDb(null)
+ }
+ }, [me?.id, open])
+
+ useEffect(() => {
+ if (!me?.id || !db) return
+
+ async function keyInit () {
+ try {
+ // TODO(wallet-v2): remove migration code
+ // and delete the old IndexedDB after wallet v2 has been released for some time
+ const oldKeyAndHash = await loadOldKey()
+ if (oldKeyAndHash) {
+ // return key found in old db and save it to new db
+ await setKey(oldKeyAndHash)
+ return
+ }
+
+ // create random key before opening transaction in case we need it
+ // and because we can't run async code in a transaction because it will close the transaction
+ // see https://javascript.info/indexeddb#transactions-autocommit
+ const { key: randomKey, hash: randomHash } = await generateRandomKey()
+
+ // run read and write in one transaction to avoid race conditions
+ const { key, hash } = await new Promise((resolve, reject) => {
+ const tx = db.transaction('vault', 'readwrite')
+ const read = tx.objectStore('vault').get('key')
+
+ read.onerror = () => {
+ reject(read.error)
+ }
+
+ read.onsuccess = () => {
+ if (read.result) {
+ // return key+hash found in db
+ return resolve(read.result)
+ }
+
+ // no key found, write and return generated random key
+ const write = tx.objectStore('vault').put({ key: randomKey, hash: randomHash }, 'key')
+
+ write.onerror = () => {
+ reject(write.error)
+ }
+
+ write.onsuccess = (event) => {
+ // return key+hash we just wrote to db
+ resolve({ key: randomKey, hash: randomHash })
+ }
+ }
+ })
+
+ await setKey({ key, hash })
+ } catch (err) {
+ console.error('key init failed:', err)
+ }
+ }
+ keyInit()
+ }, [me?.id, db, generateRandomKey, loadOldKey, setKey, loadKey])
+}
+
+// TODO(wallet-v2): remove migration code
+// =============================================================
+// ****** Below is the migration code for WALLET v1 -> v2 ******
+// remove when we can assume migration is complete (if ever)
+// =============================================================
+
+export function useWalletMigration () {
+ const { me } = useMe()
+ const { migrate: walletMigration, ready } = useWalletMigrationMutation()
+
+ useEffect(() => {
+ if (!me?.id || !ready) return
+
+ async function migrate () {
+ const localWallets = Object.entries(window.localStorage)
+ .filter(([key]) => key.startsWith('wallet:'))
+ .filter(([key]) => key.split(':').length < 3 || key.endsWith(me.id))
+ .reduce((acc, [key, value]) => {
+ try {
+ const config = JSON.parse(value)
+ acc.push({ key, ...config })
+ } catch (err) {
+ console.error(`useLocalWallets: ${key}: invalid JSON:`, err)
+ }
+ return acc
+ }, [])
+
+ await Promise.allSettled(
+ localWallets.map(async ({ key, ...localWallet }) => {
+ const name = key.split(':')[1].toUpperCase()
+ try {
+ await walletMigration({ ...localWallet, name })
+ window.localStorage.removeItem(key)
+ } catch (err) {
+ if (err instanceof CryptoKeyRequiredError) {
+ // key not set yet, skip this wallet
+ return
+ }
+ console.error(`${name}: wallet migration failed:`, err)
+ }
+ })
+ )
+ }
+ migrate()
+ }, [ready, me?.id, walletMigration])
+}
diff --git a/wallets/client/context/index.js b/wallets/client/context/index.js
new file mode 100644
index 00000000..c2d2ca8a
--- /dev/null
+++ b/wallets/client/context/index.js
@@ -0,0 +1,7 @@
+import WalletsProvider from './provider'
+
+export * from './provider'
+export * from './dnd'
+export * from './reducer'
+
+export default WalletsProvider
diff --git a/wallets/client/context/provider.js b/wallets/client/context/provider.js
new file mode 100644
index 00000000..321e2e3d
--- /dev/null
+++ b/wallets/client/context/provider.js
@@ -0,0 +1,81 @@
+import { createContext, useContext, useReducer } from 'react'
+import walletsReducer, { Status } from './reducer'
+import { useServerWallets, useKeyCheck, useAutomatedRetries, useKeyInit, useWalletMigration } from './hooks'
+import { WebLnProvider } from '@/wallets/lib/protocols/webln'
+
+// https://react.dev/learn/scaling-up-with-reducer-and-context
+const WalletsContext = createContext(null)
+const WalletsDispatchContext = createContext(null)
+
+export function useWallets () {
+ const { wallets } = useContext(WalletsContext)
+ return wallets
+}
+
+export function useTemplates () {
+ const { templates } = useContext(WalletsContext)
+ return templates
+}
+
+export function useLoading () {
+ const { status } = useContext(WalletsContext)
+ return status === Status.LOADING_WALLETS
+}
+
+export function useStatus () {
+ const { status } = useContext(WalletsContext)
+ return status
+}
+
+export function useWalletsDispatch () {
+ return useContext(WalletsDispatchContext)
+}
+
+export function useKey () {
+ const { key } = useContext(WalletsContext)
+ return key
+}
+
+export function useKeyHash () {
+ const { keyHash } = useContext(WalletsContext)
+ return keyHash
+}
+
+export default function WalletsProvider ({ children }) {
+ const [state, dispatch] = useReducer(walletsReducer, {
+ status: Status.LOADING_WALLETS,
+ wallets: [],
+ templates: [],
+ key: null,
+ keyHash: null
+ })
+
+ return (
+
+
+
+
+ {children}
+
+
+
+
+ )
+}
+
+function WalletHooks ({ children }) {
+ useServerWallets()
+ useKeyCheck()
+ useAutomatedRetries()
+ useKeyInit()
+
+ // TODO(wallet-v2): remove migration code
+ // =============================================================
+ // ****** Below is the migration code for WALLET v1 -> v2 ******
+ // remove when we can assume migration is complete (if ever)
+ // =============================================================
+
+ useWalletMigration()
+
+ return children
+}
diff --git a/wallets/client/context/reducer.js b/wallets/client/context/reducer.js
new file mode 100644
index 00000000..9b2d3733
--- /dev/null
+++ b/wallets/client/context/reducer.js
@@ -0,0 +1,73 @@
+import { isTemplate, isWallet } from '@/wallets/lib/util'
+
+// states that dictate if we show a button or wallets on the wallets page
+export const Status = {
+ LOADING_WALLETS: 'LOADING_WALLETS',
+ NO_WALLETS: 'NO_WALLETS',
+ HAS_WALLETS: 'HAS_WALLETS',
+ PASSPHRASE_REQUIRED: 'PASSPHRASE_REQUIRED',
+ WALLETS_UNAVAILABLE: 'WALLETS_UNAVAILABLE'
+}
+
+// wallet actions
+export const SET_WALLETS = 'SET_WALLETS'
+export const SET_KEY = 'SET_KEY'
+export const WRONG_KEY = 'WRONG_KEY'
+export const KEY_MATCH = 'KEY_MATCH'
+export const NO_KEY = 'KEY_UNAVAILABLE'
+
+export default function reducer (state, action) {
+ switch (action.type) {
+ case SET_WALLETS: {
+ const wallets = action.wallets
+ .filter(isWallet)
+ .sort((a, b) => a.priority === b.priority ? a.id - b.id : a.priority - b.priority)
+ const templates = action.wallets
+ .filter(isTemplate)
+ .sort((a, b) => a.name.localeCompare(b.name))
+ return {
+ ...state,
+ status: statusLocked(state.status)
+ ? state.status
+ : walletStatus(wallets),
+ wallets,
+ templates
+ }
+ }
+ case SET_KEY:
+ return {
+ ...state,
+ key: action.key,
+ keyHash: action.hash
+ }
+ case WRONG_KEY:
+ return {
+ ...state,
+ status: Status.PASSPHRASE_REQUIRED
+ }
+ case KEY_MATCH:
+ return {
+ ...state,
+ status: state.status === Status.LOADING_WALLETS
+ ? state.status
+ : walletStatus(state.wallets)
+ }
+ case NO_KEY:
+ return {
+ ...state,
+ status: Status.WALLETS_UNAVAILABLE
+ }
+ default:
+ return state
+ }
+}
+
+function statusLocked (status) {
+ return [Status.PASSPHRASE_REQUIRED, Status.WALLETS_UNAVAILABLE].includes(status)
+}
+
+function walletStatus (wallets) {
+ return wallets.length > 0
+ ? Status.HAS_WALLETS
+ : Status.NO_WALLETS
+}
diff --git a/wallets/errors.js b/wallets/client/errors.js
similarity index 100%
rename from wallets/errors.js
rename to wallets/client/errors.js
diff --git a/wallets/client/fragments/index.js b/wallets/client/fragments/index.js
new file mode 100644
index 00000000..3410da85
--- /dev/null
+++ b/wallets/client/fragments/index.js
@@ -0,0 +1,2 @@
+export * from './protocol'
+export * from './wallet'
diff --git a/wallets/client/fragments/protocol.js b/wallets/client/fragments/protocol.js
new file mode 100644
index 00000000..65b08503
--- /dev/null
+++ b/wallets/client/fragments/protocol.js
@@ -0,0 +1,111 @@
+import { gql } from '@apollo/client'
+
+export const REMOVE_WALLET_PROTOCOL = gql`
+ mutation removeWalletProtocol($id: ID!) {
+ removeWalletProtocol(id: $id)
+ }
+`
+
+export const UPSERT_WALLET_SEND_LNBITS = gql`
+ mutation upsertWalletSendLNbits($walletId: ID, $templateName: ID, $enabled: Boolean!, $url: String!, $apiKey: VaultEntryInput!) {
+ upsertWalletSendLNbits(walletId: $walletId, templateName: $templateName, enabled: $enabled, url: $url, apiKey: $apiKey) {
+ id
+ }
+ }
+`
+
+export const UPSERT_WALLET_RECEIVE_LNBITS = gql`
+ mutation upsertWalletRecvLNbits($walletId: ID, $templateName: ID, $enabled: Boolean!, $networkTests: Boolean, $url: String!, $apiKey: String!) {
+ upsertWalletRecvLNbits(walletId: $walletId, templateName: $templateName, enabled: $enabled, networkTests: $networkTests, url: $url, apiKey: $apiKey) {
+ id
+ }
+ }
+`
+
+export const UPSERT_WALLET_SEND_PHOENIXD = gql`
+ mutation upsertWalletSendPhoenixd($walletId: ID, $templateName: ID, $enabled: Boolean!, $url: String!, $apiKey: VaultEntryInput!) {
+ upsertWalletSendPhoenixd(walletId: $walletId, templateName: $templateName, enabled: $enabled, url: $url, apiKey: $apiKey) {
+ id
+ }
+ }
+`
+
+export const UPSERT_WALLET_RECEIVE_PHOENIXD = gql`
+ mutation upsertWalletRecvPhoenixd($walletId: ID, $templateName: ID, $enabled: Boolean!, $networkTests: Boolean, $url: String!, $apiKey: String!) {
+ upsertWalletRecvPhoenixd(walletId: $walletId, templateName: $templateName, enabled: $enabled, networkTests: $networkTests, url: $url, apiKey: $apiKey) {
+ id
+ }
+ }
+`
+
+export const UPSERT_WALLET_SEND_BLINK = gql`
+ mutation upsertWalletSendBlink($walletId: ID, $templateName: ID, $enabled: Boolean!, $currency: VaultEntryInput!, $apiKey: VaultEntryInput!) {
+ upsertWalletSendBlink(walletId: $walletId, templateName: $templateName, enabled: $enabled, currency: $currency, apiKey: $apiKey) {
+ id
+ }
+ }
+`
+
+export const UPSERT_WALLET_RECEIVE_BLINK = gql`
+ mutation upsertWalletRecvBlink($walletId: ID, $templateName: ID, $enabled: Boolean!, $networkTests: Boolean, $currency: String!, $apiKey: String!) {
+ upsertWalletRecvBlink(walletId: $walletId, templateName: $templateName, enabled: $enabled, networkTests: $networkTests, currency: $currency, apiKey: $apiKey) {
+ id
+ }
+ }
+`
+
+export const UPSERT_WALLET_RECEIVE_LIGHTNING_ADDRESS = gql`
+ mutation upsertWalletRecvLightningAddress($walletId: ID, $templateName: ID, $enabled: Boolean!, $networkTests: Boolean, $address: String!) {
+ upsertWalletRecvLightningAddress(walletId: $walletId, templateName: $templateName, enabled: $enabled, networkTests: $networkTests, address: $address) {
+ id
+ }
+ }
+`
+
+export const UPSERT_WALLET_SEND_NWC = gql`
+ mutation upsertWalletSendNWC($walletId: ID, $templateName: ID, $enabled: Boolean!, $url: VaultEntryInput!) {
+ upsertWalletSendNWC(walletId: $walletId, templateName: $templateName, enabled: $enabled, url: $url) {
+ id
+ }
+ }
+`
+
+export const UPSERT_WALLET_RECEIVE_NWC = gql`
+ mutation upsertWalletRecvNWC($walletId: ID, $templateName: ID, $enabled: Boolean!, $networkTests: Boolean, $url: String!) {
+ upsertWalletRecvNWC(walletId: $walletId, templateName: $templateName, enabled: $enabled, networkTests: $networkTests, url: $url) {
+ id
+ }
+ }
+`
+
+export const UPSERT_WALLET_RECEIVE_CLN_REST = gql`
+ mutation upsertWalletRecvCLNRest($walletId: ID, $templateName: ID, $enabled: Boolean!, $networkTests: Boolean, $socket: String!, $rune: String!, $cert: String) {
+ upsertWalletRecvCLNRest(walletId: $walletId, templateName: $templateName, enabled: $enabled, networkTests: $networkTests, socket: $socket, rune: $rune, cert: $cert) {
+ id
+ }
+ }
+`
+
+export const UPSERT_WALLET_RECEIVE_LNDGRPC = gql`
+ mutation upsertWalletRecvLNDGRPC($walletId: ID, $templateName: ID, $enabled: Boolean!, $networkTests: Boolean, $socket: String!, $macaroon: String!, $cert: String) {
+ upsertWalletRecvLNDGRPC(walletId: $walletId, templateName: $templateName, enabled: $enabled, networkTests: $networkTests, socket: $socket, macaroon: $macaroon, cert: $cert) {
+ id
+ }
+ }
+`
+
+export const UPSERT_WALLET_SEND_LNC = gql`
+ mutation upsertWalletSendLNC($walletId: ID, $templateName: ID, $enabled: Boolean!, $pairingPhrase: VaultEntryInput!, $localKey: VaultEntryInput!, $remoteKey: VaultEntryInput!, $serverHost: VaultEntryInput!) {
+ upsertWalletSendLNC(walletId: $walletId, templateName: $templateName, enabled: $enabled, pairingPhrase: $pairingPhrase, localKey: $localKey, remoteKey: $remoteKey, serverHost: $serverHost) {
+ id
+ }
+ }
+`
+
+export const UPSERT_WALLET_SEND_WEBLN = gql`
+ mutation upsertWalletSendWebLN($walletId: ID, $templateName: ID, $enabled: Boolean!) {
+ upsertWalletSendWebLN(walletId: $walletId, templateName: $templateName, enabled: $enabled) {
+ id
+ }
+ }
+`
diff --git a/wallets/client/fragments/wallet.js b/wallets/client/fragments/wallet.js
new file mode 100644
index 00000000..5ef7fc64
--- /dev/null
+++ b/wallets/client/fragments/wallet.js
@@ -0,0 +1,259 @@
+import { gql } from '@apollo/client'
+
+const VAULT_ENTRY_FIELDS = gql`
+ fragment VaultEntryFields on VaultEntry {
+ id
+ iv
+ value
+ }
+`
+
+export const CLEAR_VAULT = gql`
+ mutation ClearVault {
+ clearVault
+ }
+`
+
+const WALLET_PROTOCOL_FIELDS = gql`
+ ${VAULT_ENTRY_FIELDS}
+ # need to use field aliases because of https://github.com/graphql/graphql-js/issues/53
+ fragment WalletProtocolFields on WalletProtocol {
+ id
+ name
+ send
+ enabled
+ config {
+ __typename
+ ... on WalletSendNWC {
+ id
+ encryptedUrl: url {
+ ...VaultEntryFields
+ }
+ }
+ ... on WalletSendLNbits {
+ id
+ url
+ encryptedApiKey: apiKey {
+ ...VaultEntryFields
+ }
+ }
+ ... on WalletSendPhoenixd {
+ id
+ url
+ encryptedApiKey: apiKey {
+ ...VaultEntryFields
+ }
+ }
+ ... on WalletSendBlink {
+ id
+ encryptedCurrency: currency {
+ ...VaultEntryFields
+ }
+ encryptedApiKey: apiKey {
+ ...VaultEntryFields
+ }
+ }
+ ... on WalletSendWebLN {
+ id
+ }
+ ... on WalletSendLNC {
+ id
+ encryptedPairingPhrase: pairingPhrase {
+ ...VaultEntryFields
+ }
+ encryptedLocalKey: localKey {
+ ...VaultEntryFields
+ }
+ encryptedRemoteKey: remoteKey {
+ ...VaultEntryFields
+ }
+ encryptedServerHost: serverHost {
+ ...VaultEntryFields
+ }
+ }
+ ... on WalletRecvNWC {
+ id
+ url
+ }
+ ... on WalletRecvLNbits {
+ id
+ url
+ apiKey
+ }
+ ... on WalletRecvPhoenixd {
+ id
+ url
+ apiKey
+ }
+ ... on WalletRecvBlink {
+ id
+ currency
+ apiKey
+ }
+ ... on WalletRecvLightningAddress {
+ id
+ address
+ }
+ ... on WalletRecvCLNRest {
+ id
+ socket
+ rune
+ cert
+ }
+ ... on WalletRecvLNDGRPC {
+ id
+ socket
+ macaroon
+ cert
+ }
+ }
+ }
+`
+
+const WALLET_TEMPLATE_FIELDS = gql`
+ fragment WalletTemplateFields on WalletTemplate {
+ # need to use field alias because of https://github.com/graphql/graphql-js/issues/53
+ id: name
+ send
+ receive
+ protocols {
+ id
+ name
+ send
+ }
+ }
+`
+
+const USER_WALLET_FIELDS = gql`
+ ${WALLET_PROTOCOL_FIELDS}
+ ${WALLET_TEMPLATE_FIELDS}
+ fragment WalletFields on Wallet {
+ id
+ name
+ priority
+ send
+ receive
+ protocols {
+ ...WalletProtocolFields
+ }
+ template {
+ ...WalletTemplateFields
+ }
+ }
+`
+
+const WALLET_OR_TEMPLATE_FIELDS = gql`
+ ${USER_WALLET_FIELDS}
+ ${WALLET_TEMPLATE_FIELDS}
+ fragment WalletOrTemplateFields on WalletOrTemplate {
+ ... on Wallet {
+ ...WalletFields
+ }
+ ... on WalletTemplate {
+ ...WalletTemplateFields
+ }
+ }
+`
+
+export const WALLETS = gql`
+ ${WALLET_OR_TEMPLATE_FIELDS}
+ query Wallets {
+ wallets {
+ ...WalletOrTemplateFields
+ }
+ }
+`
+
+export const WALLET = gql`
+ ${WALLET_OR_TEMPLATE_FIELDS}
+ query Wallet($id: ID, $name: String) {
+ wallet(id: $id, name: $name) {
+ ...WalletOrTemplateFields
+ }
+ }
+`
+
+export const REMOVE_WALLET = gql`
+ mutation removeWallet($id: ID!) {
+ removeWallet(id: $id)
+ }
+`
+
+export const SET_WALLET_PRIORITIES = gql`
+ mutation SetWalletPriorities($priorities: [WalletPriorityUpdate!]!) {
+ setWalletPriorities(priorities: $priorities)
+ }
+`
+
+export const UPDATE_WALLET_ENCRYPTION = gql`
+ mutation UpdateWalletEncryption($keyHash: String!, $wallets: [WalletEncryptionUpdate!]!) {
+ updateWalletEncryption(keyHash: $keyHash, wallets: $wallets)
+ }
+`
+
+export const UPDATE_KEY_HASH = gql`
+ mutation UpdateKeyHash($keyHash: String!) {
+ updateKeyHash(keyHash: $keyHash)
+ }
+`
+
+export const RESET_WALLETS = gql`
+ mutation ResetWallets($newKeyHash: String!) {
+ resetWallets(newKeyHash: $newKeyHash)
+ }
+`
+
+export const DISABLE_PASSPHRASE_EXPORT = gql`
+ mutation DisablePassphraseExport {
+ disablePassphraseExport
+ }
+`
+
+export const WALLET_SETTINGS = gql`
+ query WalletSettings {
+ walletSettings {
+ receiveCreditsBelowSats
+ sendCreditsBelowSats
+ proxyReceive
+ autoWithdrawMaxFeePercent
+ autoWithdrawMaxFeeTotal
+ autoWithdrawThreshold
+ }
+ }
+`
+
+export const SET_WALLET_SETTINGS = gql`
+ mutation SetWalletSettings($settings: WalletSettingsInput!) {
+ setWalletSettings(settings: $settings)
+ }
+`
+
+export const ADD_WALLET_LOG = gql`
+ mutation AddWalletLog($protocolId: Int!, $level: String!, $message: String!, $timestamp: Date!, $invoiceId: Int) {
+ addWalletLog(protocolId: $protocolId, level: $level, message: $message, timestamp: $timestamp, invoiceId: $invoiceId)
+ }
+`
+
+export const WALLET_LOGS = gql`
+ query WalletLogs($protocolId: Int, $cursor: String) {
+ walletLogs(protocolId: $protocolId, cursor: $cursor) {
+ entries {
+ id
+ level
+ message
+ createdAt
+ wallet {
+ name
+ }
+ context
+ }
+ cursor
+ }
+ }
+`
+
+export const DELETE_WALLET_LOGS = gql`
+ mutation DeleteWalletLogs($protocolId: Int) {
+ deleteWalletLogs(protocolId: $protocolId)
+ }
+`
diff --git a/wallets/client/hooks/crypto.js b/wallets/client/hooks/crypto.js
new file mode 100644
index 00000000..d4016ee2
--- /dev/null
+++ b/wallets/client/hooks/crypto.js
@@ -0,0 +1,355 @@
+import { useCallback, useMemo } from 'react'
+import { fromHex, toHex } from '@/lib/hex'
+import { useMe } from '@/components/me'
+import { useIndexedDB } from '@/components/use-indexeddb'
+import { useShowModal } from '@/components/modal'
+import { Button } from 'react-bootstrap'
+import { Passphrase } from '@/wallets/client/components'
+import bip39Words from '@/lib/bip39-words'
+import { Form, PasswordInput, SubmitButton } from '@/components/form'
+import { object, string } from 'yup'
+import { SET_KEY, useKey, useKeyHash, useWalletsDispatch } from '@/wallets/client/context'
+import { useDisablePassphraseExport, useUpdateKeyHash, useWalletEncryptionUpdate, useWalletReset } from '@/wallets/client/hooks'
+import { useToast } from '@/components/toast'
+
+export class CryptoKeyRequiredError extends Error {
+ constructor () {
+ super('CryptoKey required')
+ this.name = 'CryptoKeyRequiredError'
+ }
+}
+
+export function useLoadKey () {
+ const { get } = useIndexedDB()
+
+ return useCallback(async () => {
+ return await get('vault', 'key')
+ }, [get])
+}
+
+export function useLoadOldKey () {
+ const { me } = useMe()
+ const oldDbName = me?.id ? `app:storage:${me?.id}:vault` : undefined
+ const { get } = useIndexedDB(oldDbName)
+
+ return useCallback(async () => {
+ return await get('vault', 'key')
+ }, [get])
+}
+
+export function useSetKey () {
+ const { set } = useIndexedDB()
+ const dispatch = useWalletsDispatch()
+ const updateKeyHash = useUpdateKeyHash()
+
+ return useCallback(async ({ key, hash }) => {
+ await set('vault', 'key', { key, hash })
+ await updateKeyHash(hash)
+ dispatch({ type: SET_KEY, key, hash })
+ }, [set, dispatch, updateKeyHash])
+}
+
+export function useEncryption () {
+ const defaultKey = useKey()
+ const defaultKeyHash = useKeyHash()
+
+ const encrypt = useCallback(
+ (value, { key, hash } = {}) => {
+ const k = key ?? defaultKey
+ const h = hash ?? defaultKeyHash
+ if (!k || !h) throw new CryptoKeyRequiredError()
+ return _encrypt({ key: k, hash: h }, value)
+ }, [defaultKey, defaultKeyHash])
+
+ return useMemo(() => ({
+ encrypt,
+ ready: !!defaultKey
+ }), [encrypt, defaultKey])
+}
+
+export function useDecryption () {
+ const key = useKey()
+
+ const decrypt = useCallback(value => {
+ if (!key) throw new CryptoKeyRequiredError()
+ return _decrypt(key, value)
+ }, [key])
+
+ return useMemo(() => ({
+ decrypt,
+ ready: !!key
+ }), [decrypt, key])
+}
+
+export function useRemoteKeyHash () {
+ const { me } = useMe()
+ return me?.privates?.vaultKeyHash
+}
+
+export function useIsWrongKey () {
+ const localHash = useKeyHash()
+ const remoteHash = useRemoteKeyHash()
+ return localHash && remoteHash && localHash !== remoteHash
+}
+
+export function useKeySalt () {
+ // TODO(wallet-v2): random salt
+ const { me } = useMe()
+ return `stacker${me?.id}`
+}
+
+export function useShowPassphrase () {
+ const { me } = useMe()
+ const showModal = useShowModal()
+ const generateRandomKey = useGenerateRandomKey()
+ const updateWalletEncryption = useWalletEncryptionUpdate()
+ const toaster = useToast()
+
+ const onShow = useCallback(async () => {
+ let passphrase, key, hash
+ try {
+ ({ passphrase, key, hash } = await generateRandomKey())
+ await updateWalletEncryption({ key, hash })
+ } catch (err) {
+ toaster.danger('failed to update wallet encryption: ' + err.message)
+ return
+ }
+ showModal(
+ close =>
+
+ The next screen will show the passphrase that was used to encrypt your wallets.
+
+
+ You will not be able to see the passphrase again.
+
+
+ Do you want to see it now?
+
+
+ cancel
+ yes, show me
+
+
+
Reset passphrase
+
+ This will delete all your sending credentials. Your credentials for receiving will not be affected.
+
+
+ After the reset, you will be issued a new passphrase.
+
+
+ cancel
+ reset
+
+
+
Wallet decryption
+
+ Your wallets have been encrypted on another device. Enter your passphrase to use your wallets on this device.
+
+
+ {showPassphrase && 'You can find the button to reveal your passphrase above your wallets on the other device.'}
+
+
+ Press reset if you lost your passphrase.
+
+
+
+ {children}
+
+ )
+}
+
+export function useWalletLoggerFactory () {
+ const { addTemplateLog } = useContext(TemplateLogsContext)
+ const [addWalletLog] = useMutation(ADD_WALLET_LOG)
+
+ const log = useCallback(({ protocol, level, message, invoiceId }) => {
+ console[mapLevelToConsole(level)](`[${protocol.name}] ${message}`)
+
+ if (isTemplate(protocol)) {
+ // this is a template, so there's no protocol yet to which we could attach logs in the db
+ addTemplateLog?.({ level, message })
+ return
+ }
+
+ return addWalletLog({ variables: { protocolId: Number(protocol.id), level, message, invoiceId, timestamp: new Date() } })
+ .catch(err => {
+ console.error('error adding wallet log:', err)
+ })
+ }, [addWalletLog, addTemplateLog])
+
+ return useCallback((protocol, invoice) => {
+ const invoiceId = invoice ? Number(invoice.id) : null
+ return {
+ ok: (message) => {
+ log({ protocol, level: 'OK', message, invoiceId })
+ },
+ info: (message) => {
+ log({ protocol, level: 'INFO', message, invoiceId })
+ },
+ error: (message) => {
+ log({ protocol, level: 'ERROR', message, invoiceId })
+ },
+ warn: (message) => {
+ log({ protocol, level: 'WARN', message, invoiceId })
+ }
+ }
+ }, [log])
+}
+
+export function useWalletLogger (protocol) {
+ const loggerFactory = useWalletLoggerFactory()
+ return loggerFactory(protocol)
+}
+
+export function useWalletLogs (protocol) {
+ const { templateLogs, clearTemplateLogs } = useContext(TemplateLogsContext)
+
+ const [cursor, setCursor] = useState(null)
+ // if we're configuring a protocol template, there are no logs to fetch
+ const skip = protocol && isTemplate(protocol)
+ const [logs, setLogs] = useState(skip ? templateLogs : [])
+
+ // if no protocol was given, we want to fetch all logs
+ const protocolId = protocol ? Number(protocol.id) : undefined
+
+ const [fetchLogs, { called, loading, error }] = useLazyQuery(WALLET_LOGS, {
+ variables: { protocolId },
+ skip,
+ fetchPolicy: 'network-only'
+ })
+
+ useEffect(() => {
+ if (skip) return
+
+ const interval = setInterval(async () => {
+ const { data } = await fetchLogs({ variables: { protocolId } })
+ const { entries: updatedLogs, cursor } = data.walletLogs
+ setLogs(logs => [...updatedLogs.filter(log => !logs.some(l => l.id === log.id)), ...logs])
+ if (!called) {
+ setCursor(cursor)
+ }
+ }, FAST_POLL_INTERVAL)
+
+ return () => clearInterval(interval)
+ }, [fetchLogs, called, skip])
+
+ const loadMore = useCallback(async () => {
+ const { data } = await fetchLogs({ variables: { protocolId, cursor } })
+ const { entries: cursorLogs, cursor: newCursor } = data.walletLogs
+ setLogs(logs => [...logs, ...cursorLogs.filter(log => !logs.some(l => l.id === log.id))])
+ setCursor(newCursor)
+ }, [fetchLogs, cursor, protocolId])
+
+ const clearLogs = useCallback(() => {
+ setLogs([])
+ clearTemplateLogs?.()
+ setCursor(null)
+ }, [clearTemplateLogs])
+
+ return useMemo(() => {
+ return {
+ loading: skip ? false : (!called ? true : loading),
+ logs: skip ? templateLogs : logs,
+ error,
+ loadMore,
+ hasMore: cursor !== null,
+ clearLogs
+ }
+ }, [loading, skip, called, templateLogs, logs, error, loadMore, clearLogs])
+}
+
+function mapLevelToConsole (level) {
+ switch (level) {
+ case 'OK':
+ case 'INFO':
+ return 'info'
+ case 'ERROR':
+ return 'error'
+ case 'WARN':
+ return 'warn'
+ default:
+ return 'log'
+ }
+}
+
+export function useDeleteWalletLogs (protocol) {
+ const showModal = useShowModal()
+
+ return useCallback(async () => {
+ return await new Promise((resolve, reject) => {
+ const onClose = () => {
+ reject(new ModalClosedError())
+ }
+
+ showModal(close => {
+ const onDelete = () => {
+ resolve()
+ close()
+ }
+
+ const onClose = () => {
+ reject(new ModalClosedError())
+ close()
+ }
+
+ return (
+
+ {prompt}
+
+ cancel
+ delete
+
+
+
- You need to attach alightning wallet
-
-)
+function Header () {
+ return (
+
+ You need to attach alightning wallet
+
+ )
+}
-const LnAddrForm = ({ onAttach }) => {
- const { me } = useMe()
- const wallet = useWallet('lightning-address')
- const { save } = useWalletConfigurator(wallet)
+function LnAddrForm ({ onAttach }) {
+ const upsert = useLightningAddressUpsert()
+ const schema = protocolClientSchema({ name: 'LN_ADDR', send: false })
+ const initial = { address: '' }
- const schema = object({ lnAddr: externalLightningAddressValidator.required('required') })
-
- const onSubmit = useCallback(async ({ lnAddr }) => {
- await save({
- ...autowithdrawInitial({ me }),
- priority: 0,
- enabled: true,
- address: lnAddr
- }, true)
+ const onSubmit = useCallback(async ({ address }) => {
+ await upsert({ address })
onAttach()
- }, [save])
+ }, [upsert, onAttach])
return (
<>
@@ -92,10 +84,10 @@ const LnAddrForm = ({ onAttach }) => {