SN wallet transaction details (#550)

* display bolt11 info and preimage for invoices

* Remove preimage attempt for wdrwl, since it doesn't make sense

Other various code cleanup

* Only include preimage for confirmed paid and settled invoices

api/resolvers/wallet.js

@@ -1,4 +1,4 @@
-import { createHodlInvoice, createInvoice, decodePaymentRequest, payViaPaymentRequest, cancelHodlInvoice } from 'ln-service'
+import { createHodlInvoice, createInvoice, decodePaymentRequest, payViaPaymentRequest, cancelHodlInvoice, getInvoice as getInvoiceFromLnd } from 'ln-service'
 import { GraphQLError } from 'graphql'
 import crypto from 'crypto'
 import serialize from './serial'
@@ -40,6 +40,15 @@ export async function getInvoice (parent, { id }, { me, models, lnd }) {
   } catch (err) {
   }
 
+  try {
+    if (inv.confirmedAt) {
+      const lnInv = await getInvoiceFromLnd({ id: inv.hash, lnd })
+      inv.preimage = lnInv.secret
+    }
+  } catch (err) {
+    console.error('error fetching invoice from LND', err)
+  }
+
   return inv
 }
 

api/typeDefs/wallet.js

@@ -30,6 +30,7 @@ export default gql`
     lud18Data: JSONObject
     hmac: String
     isHeld: Boolean
+    preimage: String
   }
 
   type Withdrawl {

components/bolt11-info.js

@@ -0,0 +1,49 @@
+import { decode } from 'bolt11'
+import AccordianItem from './accordian-item'
+import { CopyInput } from './form'
+
+export default ({ bolt11, preimage }) => {
+  const { tagsObject: { description, payment_hash: paymentHash } } = decode(bolt11)
+  if (!description && !paymentHash && !preimage) {
+    return null
+  }
+
+  return (
+    <div className='w-100'>
+      <AccordianItem
+        header='BOLT11 information'
+        body={
+          <>
+            {description &&
+              <CopyInput
+                label='description'
+                size='sm'
+                groupClassName='w-100'
+                readOnly
+                noForm
+                placeholder={description}
+              />}
+            {paymentHash &&
+              <CopyInput
+                label='payment hash'
+                size='sm'
+                groupClassName='w-100'
+                readOnly
+                noForm
+                placeholder={paymentHash}
+              />}
+            {preimage &&
+              <CopyInput
+                label='preimage'
+                size='sm'
+                groupClassName='w-100'
+                readOnly
+                noForm
+                placeholder={preimage}
+              />}
+          </>
+          }
+      />
+    </div>
+  )
+}

components/form.js

@@ -4,7 +4,6 @@ import BootstrapForm from 'react-bootstrap/Form'
 import { Formik, Form as FormikForm, useFormikContext, useField, FieldArray } from 'formik'
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
 import copy from 'clipboard-copy'
-import Thumb from '../svgs/thumb-up-fill.svg'
 import Col from 'react-bootstrap/Col'
 import Dropdown from 'react-bootstrap/Dropdown'
 import Nav from 'react-bootstrap/Nav'
@@ -53,12 +52,15 @@ export function SubmitButton ({
 }
 
 export function CopyInput (props) {
-  const [copied, setCopied] = useState(false)
+  const toaster = useToast()
 
-  const handleClick = () => {
-    copy(props.placeholder)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 1500)
+  const handleClick = async () => {
+    try {
+      await copy(props.placeholder)
+      toaster.success('copied')
+    } catch (err) {
+      toaster.danger('failed to copy')
+    }
   }
 
   return (
@@ -69,10 +71,9 @@ export function CopyInput (props) {
           className={styles.appendButton}
           size={props.size}
           onClick={handleClick}
-        >
-          {copied ? <Thumb width={18} height={18} /> : 'copy'}
+        >copy
         </Button>
-}
+      }
       {...props}
     />
   )

components/invoice.js

@@ -12,6 +12,7 @@ import { useShowModal } from './modal'
 import { sleep } from '../lib/time'
 import Countdown from './countdown'
 import PayerData from './payer-data'
+import Bolt11Info from './bolt11-info'
 
 export function Invoice ({ invoice, onPayment, info, successVerb }) {
   const [expired, setExpired] = useState(new Date(invoice.expiredAt) <= new Date())
@@ -39,7 +40,7 @@ export function Invoice ({ invoice, onPayment, info, successVerb }) {
     }
   }, [invoice.confirmedAt, invoice.isHeld, invoice.satsReceived])
 
-  const { nostr, comment, lud18Data } = invoice
+  const { nostr, comment, lud18Data, bolt11, preimage } = invoice
 
   return (
     <>
@@ -85,6 +86,7 @@ export function Invoice ({ invoice, onPayment, info, successVerb }) {
             body={<span className='text-muted ms-3'>{comment}</span>}
           />
         </div>}
+      <Bolt11Info bolt11={bolt11} preimage={preimage} />
     </>
   )
 }

fragments/wallet.js

@@ -16,6 +16,7 @@ export const INVOICE = gql`
       isHeld
       comment
       lud18Data
+      preimage
     }
   }`
 

pages/withdrawals/[id].js

@@ -8,6 +8,7 @@ import { WITHDRAWL } from '../../fragments/wallet'
 import Link from 'next/link'
 import { SSR } from '../../lib/constants'
 import { numWithUnits } from '../../lib/format'
+import Bolt11Info from '../../components/bolt11-info'
 
 export default function Withdrawl () {
   return (
@@ -97,6 +98,7 @@ function LoadWithdrawl () {
         />
       </div>
       <InvoiceStatus variant={variant} status={status} />
+      <Bolt11Info bolt11={data.withdrawl.bolt11} />
     </>
   )
 }