wip: wallet flow

Author: ekzyis

api/typeDefs/wallet.js

@@ -1,8 +1,6 @@
 import { gql } from 'graphql-tag'
 
-const sharedSend = 'walletId: ID, templateName: ID, enabled: Boolean!'
-
-const sharedRecv = `${sharedSend}, networkTests: Boolean`
+const shared = 'walletId: ID, templateName: ID, enabled: Boolean!'
 
 const typeDefs = gql`
   extend type Query {
@@ -24,95 +22,139 @@ const typeDefs = gql`
     sendToLnAddr(addr: String!, amount: Int!, maxFee: Int!, comment: String, identifier: Boolean, name: String, email: String): Withdrawl!
     cancelInvoice(hash: String!, hmac: String, userCancel: Boolean): Invoice!
     dropBolt11(hash: String!): Boolean
-    removeWallet(id: ID!): Boolean
-    deleteWalletLogs(protocolId: Int, debug: Boolean): Boolean
-    setWalletPriorities(priorities: [WalletPriorityUpdate!]!): Boolean
     buyCredits(credits: Int!): BuyCreditsPaidAction!
 
+    # upserts
     upsertWalletSendLNbits(
-      ${sharedSend},
+      ${shared},
       url: String!,
       apiKey: VaultEntryInput!
     ): WalletSendLNbits!
 
     upsertWalletRecvLNbits(
-      ${sharedRecv},
+      ${shared},
       url: String!,
       apiKey: String!
     ): WalletRecvLNbits!
 
     upsertWalletSendPhoenixd(
-      ${sharedSend},
+      ${shared},
       url: String!,
       apiKey: VaultEntryInput!
     ): WalletSendPhoenixd!
 
     upsertWalletRecvPhoenixd(
-      ${sharedRecv},
+      ${shared},
       url: String!,
       apiKey: String!
     ): WalletRecvPhoenixd!
 
     upsertWalletSendBlink(
-      ${sharedSend},
+      ${shared},
       currency: VaultEntryInput!,
       apiKey: VaultEntryInput!
     ): WalletSendBlink!
 
     upsertWalletRecvBlink(
-      ${sharedRecv},
+      ${shared},
       currency: String!,
       apiKey: String!
     ): WalletRecvBlink!
 
     upsertWalletRecvLightningAddress(
-      ${sharedRecv},
+      ${shared},
       address: String!
     ): WalletRecvLightningAddress!
 
     upsertWalletSendNWC(
-      ${sharedSend},
+      ${shared},
       url: VaultEntryInput!
     ): WalletSendNWC!
 
     upsertWalletRecvNWC(
-      ${sharedRecv},
+      ${shared},
       url: String!
     ): WalletRecvNWC!
 
     upsertWalletRecvCLNRest(
-      ${sharedRecv},
+      ${shared},
       socket: String!,
       rune: String!,
       cert: String
     ): WalletRecvCLNRest!
 
     upsertWalletRecvLNDGRPC(
-      ${sharedRecv},
+      ${shared},
       socket: String!,
       macaroon: String!,
       cert: String
     ): WalletRecvLNDGRPC!
 
     upsertWalletSendLNC(
-      ${sharedSend},
+      ${shared},
       pairingPhrase: VaultEntryInput!,
       localKey: VaultEntryInput!,
       remoteKey: VaultEntryInput!,
       serverHost: VaultEntryInput!
     ): WalletSendLNC!
 
     upsertWalletSendWebLN(
-      ${sharedSend}
+      ${shared}
     ): WalletSendWebLN!
 
+    # tests
+    testWalletRecvNWC(
+      url: String!
+    ): Boolean!
+
+    testWalletRecvLightningAddress(
+      address: String!
+    ): Boolean!
+
+    testWalletRecvCLNRest(
+      socket: String!,
+      rune: String!,
+      cert: String
+    ): Boolean!
+
+    testWalletRecvLNDGRPC(
+      socket: String!,
+      macaroon: String!,
+      cert: String
+    ): Boolean!
+
+    testWalletRecvPhoenixd(
+      url: String!
+      apiKey: String!
+    ): Boolean!
+
+    testWalletRecvLNbits(
+      url: String!
+      apiKey: String!
+    ): Boolean!
+
+    testWalletRecvBlink(
+      currency: String!
+      apiKey: String!
+    ): Boolean!
+
+    # delete
+    removeWallet(id: ID!): Boolean
     removeWalletProtocol(id: ID!): Boolean
+
+    # crypto
     updateWalletEncryption(keyHash: String!, wallets: [WalletEncryptionUpdate!]!): Boolean
     updateKeyHash(keyHash: String!): Boolean
     resetWallets(newKeyHash: String!): Boolean
     disablePassphraseExport: Boolean
+
+    # settings
     setWalletSettings(settings: WalletSettingsInput!): Boolean
+    setWalletPriorities(priorities: [WalletPriorityUpdate!]!): Boolean
+
+    # logs
     addWalletLog(protocolId: Int, level: String!, message: String!, timestamp: Date!, invoiceId: Int): Boolean
+    deleteWalletLogs(protocolId: Int, debug: Boolean): Boolean
   }
 
   type BuyCreditsResult {

pages/wallets/index.js

@@ -113,8 +113,6 @@ export default function Wallet () {
         <WalletLayoutSubHeader>use real bitcoin</WalletLayoutSubHeader>
         <div className='text-center'>
           <WalletLayoutLink href='/wallets/logs'>wallet logs</WalletLayoutLink>
-          <span className='mx-2'>•</span>
-          <WalletLayoutLink href='/wallets/settings'>settings</WalletLayoutLink>
           {showPassphrase && (
             <>
               <span className='mx-2'>•</span>

styles/wallet.module.css

@@ -106,6 +106,12 @@
   flex-direction: column;
 }
 
+@media (max-width: 768px) {
+  .form {
+    margin-top: 1rem;
+  }
+}
+
 .separator {
   display: flex;
   align-items: center;
@@ -136,3 +142,12 @@
   grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
   container-type: inline-size;
 }
+
+.progressNumber {
+  display: inline-block;
+  background-color: var(--bs-body-bg);
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+}

wallets/README.md

@@ -62,6 +62,8 @@ That's it!
 
 ## How to add a new protocol
 
+// TODO: update this documentation with new required test mutations
+
 **1. Update prisma.schema**
 
 - add enum value to `WalletProtocolName` enum
@@ -303,10 +305,10 @@ 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!
+     upsertWalletRecvLNDGRPC(walletId: ID, templateId: ID, enabled: 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!
++    upsertWalletRecvBolt12(walletId: ID, templateId: ID, enabled: Boolean!, offer: String!): WalletRecvBolt12!
      removeWalletProtocol(id: ID!): Boolean
      updateWalletEncryption(keyHash: String!, wallets: [WalletEncryptionUpdate!]!): Boolean
      updateKeyHash(keyHash: String!): Boolean
@@ -340,8 +342,8 @@ index d1a65ff4..138d1a62 100644
  `
 +
 +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) {
++  mutation upsertWalletRecvBolt12($walletId: ID, $templateId: ID, $enabled: Boolean!, $offer: String!) {
++    upsertWalletRecvBolt12(walletId: $walletId, templateId: $templateId, enabled: $enabled, offer: $offer) {
 +      id
 +    }
 +  }

wallets/client/components/card.js

@@ -55,9 +55,7 @@ export function WalletCard ({ wallet, draggable = false, index, ...props }) {
 }
 
 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}`
+  const href = '/wallets' + (isWallet(wallet) ? `/${wallet.id}` : `/${urlify(wallet.name)}`)
   return <Link href={href}>{children}</Link>
 }
 

wallets/client/components/form/button.js

@@ -0,0 +1,14 @@
+import classNames from 'classnames'
+import { Button } from 'react-bootstrap'
+
+import { useBack, useSkip } from './context'
+
+export function BackButton ({ className }) {
+  const back = useBack()
+  return <Button className={classNames('text-muted nav-link fw-bold', className)} variant='link' onClick={back}>back</Button>
+}
+
+export function SkipButton ({ className }) {
+  const skip = useSkip()
+  return <Button className={classNames('ms-auto me-3 text-muted nav-link fw-bold', className)} variant='link' onClick={skip}>skip</Button>
+}

wallets/client/components/form/context.js

@@ -0,0 +1,130 @@
+import { isWallet, protocolClientSchema, protocolFields, walletLud16Domain } from '@/wallets/lib/util'
+import { createContext, useContext, useEffect, useMemo } from 'react'
+
+export const WalletFormsContext = createContext()
+
+export const Progress = {
+  SEND: 0,
+  RECEIVE: 1,
+  SETTINGS: 2
+}
+
+function useWalletFormsContext () {
+  const context = useContext(WalletFormsContext)
+  if (!context) {
+    throw new Error('useContext must be used within a WalletFormsContext')
+  }
+  return context
+}
+
+export function useWallet () {
+  const { wallet } = useContext(WalletFormsContext)
+  return wallet
+}
+
+export function useWalletRefetch () {
+  const { refetch } = useWalletFormsContext()
+  return refetch
+}
+
+export function useProgress () {
+  const { progress } = useWalletFormsContext()
+  return progress
+}
+
+export function useProtocol () {
+  const protocols = useWalletProtocols()
+  const { protocol, setProtocol } = useWalletFormsContext()
+
+  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, setProtocol, protocols])
+
+  // make sure we always have a protocol, even on first render before useEffect runs
+  return useMemo(() => protocol || protocols[0], [protocol, protocols])
+}
+
+export function useSelectProtocol () {
+  const { setProtocol } = useWalletFormsContext()
+  return setProtocol
+}
+
+export function useBack () {
+  const { back } = useWalletFormsContext()
+  return back
+}
+
+export function useSkip () {
+  const { skip } = useWalletFormsContext()
+  return skip
+}
+
+export function useFormState () {
+  const { formState } = useWalletFormsContext()
+  return formState
+}
+
+export function useUpdateFormState () {
+  const { updateFormState } = useWalletFormsContext()
+  return updateFormState
+}
+
+function useProtocolFormState () {
+  const protocol = useProtocol()
+  const formState = useFormState()
+
+  if (protocol.send) {
+    return formState?.send?.[protocol.id]
+  } else {
+    return formState?.receive?.[protocol.id]
+  }
+}
+
+export function useWalletProtocols () {
+  const wallet = useWallet()
+  const progress = useProgress()
+
+  const send = progress === Progress.SEND
+  const protocolFilter = p => send ? p.send : !p.send
+
+  return isWallet(wallet)
+    ? wallet.template.protocols.filter(protocolFilter)
+    : wallet.protocols.filter(protocolFilter)
+}
+
+export function useProtocolForm (protocol) {
+  const formState = useProtocolFormState(protocol)
+
+  const wallet = useWallet()
+  const lud16Domain = walletLud16Domain(wallet.name)
+  const fields = protocolFields(protocol)
+  const initial = fields.reduce((acc, field) => {
+    // wallet templates don't have a config
+    let value = protocol.config?.[field.name] ?? formState?.[field.name]
+
+    if (field.name === 'address' && lud16Domain && value) {
+      value = value.split('@')[0]
+    }
+
+    return {
+      ...acc,
+      [field.name]: value || ''
+    }
+  }, { enabled: protocol.enabled ?? formState?.enabled })
+
+  let schema = protocolClientSchema(protocol)
+  if (lud16Domain) {
+    schema = schema.transform(({ address, ...rest }) => {
+      return {
+        address: address ? `${address}@${lud16Domain}` : '',
+        ...rest
+      }
+    })
+  }
+
+  return { fields, initial, schema }
+}