feat: implement send over lightning and intraledger (#20)

* feat: add the generic parse payment destination logic under a galoy-client folder (which will be a package later)

* feat: implement the send screen, ln-invoice works

* feat: make a sendFixedAmount component and add reset button

* feat: add action to handle no-amount invoices

* feat: implement sending over intraledger

Co-authored-by: Samer Buna <[email protected]>

.eslintrc.js

@@ -53,9 +53,6 @@ module.exports = {
     "array-callback-return": "error",
     "block-scoped-var": "error",
     "camelcase": "error",
-    "capitalized-comments": "warn",
-    "complexity": "error",
-    "consistent-return": "error",
     "consistent-this": "error",
     "curly": "error",
     "default-case-last": "error",
@@ -73,12 +70,12 @@ module.exports = {
     "jsx-quotes": "error",
     "linebreak-style": ["error", "unix"],
     "max-depth": ["error", { max: 3 }],
-    "max-lines-per-function": ["error", { max: 200 }],
+    "max-lines-per-function": ["error", { max: 250 }],
     "max-lines": ["error", { max: 300 }],
     "max-nested-callbacks": ["error", { max: 2 }],
     "max-params": ["error", { max: 2 }],
     "max-statements-per-line": ["error", { max: 1 }],
-    "max-statements": ["error", { max: 30 }],
+    "max-statements": ["error", { max: 100 }],
     "new-parens": "error",
     "newline-per-chained-call": "error",
     "no-alert": "error",
@@ -145,10 +142,8 @@ module.exports = {
     "no-useless-return": "error",
     "no-var": "error",
     "no-void": "error",
-    "no-warning-comments": "error",
     "object-shorthand": "error",
-    "prefer-const": "error",
-    "prefer-exponentiation-operator": "error",
+    "prefer-const": ["error", { destructuring: "all" }],
     "prefer-numeric-literals": "error",
     "prefer-object-spread": "error",
     "prefer-promise-reject-errors": "error",

.github/workflows/code-check.yml

@@ -10,5 +10,6 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
       - run: yarn install
+      - run: (cd src/galoy-client && yarn install)
       - name: Run check code
         run: yarn code:check

.github/workflows/tests.yml

@@ -13,5 +13,6 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
       - run: yarn install
+      - run: (cd src/galoy-client && yarn install)
       - name: Run all tests
         run: yarn test

package.json

@@ -55,10 +55,12 @@
     "regenerator-runtime": "^0.13.9",
     "serialize-javascript": "^6.0.0",
     "source-map-loader": "^3.0.0",
+    "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
     "subscriptions-transport-ws": "^0.11.0",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.4",
+    "url": "^0.11.0",
     "use-debounce": "^7.0.1",
     "webpack": "^5.64.4",
     "webpack-cli": "^4.9.1"

src/components/debounced-input.tsx

@@ -0,0 +1,49 @@
+import { ChangeEvent, useState, memo, useEffect } from "react"
+import { useDebouncedCallback } from "use-debounce"
+
+export type OnInputValueChange = (value: string) => void
+
+type Props = {
+  onChange?: OnInputValueChange
+  onDebouncedChange?: OnInputValueChange
+  [prop: string]: unknown
+}
+
+type InputObject = {
+  value: string
+  debouncedValue?: string
+  typing: boolean
+}
+
+const DebouncedInput = ({ onChange, onDebouncedChange, ...inputProps }: Props) => {
+  const [input, setInput] = useState<InputObject>({ value: "", typing: false })
+
+  const setDebouncedInputValue = useDebouncedCallback((debouncedValue) => {
+    setInput((currInput) => ({ ...currInput, debouncedValue, typing: false }))
+  }, 1000)
+
+  useEffect(() => {
+    if (input.typing) {
+      setDebouncedInputValue(input.value)
+    }
+    return () => setDebouncedInputValue.cancel()
+  }, [setDebouncedInputValue, input.typing, input.value])
+
+  useEffect(() => {
+    if (onDebouncedChange && input.debouncedValue !== undefined) {
+      onDebouncedChange(input.debouncedValue)
+    }
+  }, [onDebouncedChange, input.debouncedValue])
+
+  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value
+    if (onChange) {
+      onChange(newValue)
+    }
+    setInput({ value: newValue, typing: true })
+  }
+
+  return <input value={input.value} onChange={handleOnChange} {...inputProps} />
+}
+
+export default memo(DebouncedInput)

src/components/debounced-textarea.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, useState, memo, useEffect } from "react"
 import { useDebouncedCallback } from "use-debounce"
 
-export type OnTextValueChange = (numberValue: string) => void
+export type OnTextValueChange = (value: string) => void
 
 type Props = {
   onChange?: OnTextValueChange

src/components/error-fallback.tsx

@@ -1,4 +1,4 @@
-import config from "server/config"
+import config from "store/config"
 
 type Props = { error: string | Error }
 

src/components/formatted-number-input.tsx

@@ -3,12 +3,12 @@ import { useDebouncedCallback } from "use-debounce"
 
 const formatter = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 })
 
-export type ParsieInputValueFunction = (inputValue: string) => {
+export type ParseInputValueFunction = (inputValue: string) => {
   numberValue: number | ""
   formattedValue: string
 }
 
-const parseInputValue: ParsieInputValueFunction = (inputValue) => {
+const parseInputValue: ParseInputValueFunction = (inputValue) => {
   if (inputValue === "") {
     return { numberValue: "", formattedValue: "" }
   }

src/components/invoice.tsx

@@ -5,13 +5,15 @@ import copy from "copy-to-clipboard"
 import { useMyUpdates } from "store/use-my-updates"
 import { translate } from "translate"
 import SuccessCheckmark from "./sucess-checkmark"
+import { useAppDispatcher } from "store"
 
 type Props = {
   invoice: GraphQL.LnInvoice | GraphQL.LnNoAmountInvoice
   onPaymentSuccess?: () => void
 }
 
 const Invoice = ({ invoice, onPaymentSuccess }: Props) => {
+  const dispatch = useAppDispatcher()
   const { lnUpdate } = useMyUpdates()
   const [showCopied, setShowCopied] = useState(false)
 
@@ -21,6 +23,10 @@ const Invoice = ({ invoice, onPaymentSuccess }: Props) => {
     setTimeout(() => setShowCopied(false), 3000)
   }
 
+  const resetReceiveScreen = () => {
+    dispatch({ type: "reset-current-screen" })
+  }
+
   const invoicePaid =
     lnUpdate?.paymentHash === invoice?.paymentHash && lnUpdate?.status === "PAID"
 
@@ -32,6 +38,7 @@ const Invoice = ({ invoice, onPaymentSuccess }: Props) => {
     return (
       <div className="invoice-paid">
         <SuccessCheckmark />
+        <button onClick={resetReceiveScreen}>Receive another payment</button>
       </div>
     )
   }

src/components/login.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState } from "react"
 import intlTelInput from "intl-tel-input"
 
-import config from "server/config"
+import config from "store/config"
 import { translate } from "translate"
 import { history, useRequest } from "store"
 

src/components/receive.tsx

@@ -158,7 +158,7 @@ const Receive = () => {
     <div className="receive">
       <Header />
       <div className="page-title">{translate("Receive Bitcoin")}</div>{" "}
-      <div className="amount-input">
+      <div className="amount-input center-display">
         <div className="currency-label">
           {input.currency === "SATS" ? <SatSymbol /> : "$"}
         </div>
@@ -175,7 +175,7 @@ const Receive = () => {
           &#8645;
         </div>
       </div>
-      <div className="note-input">
+      <div className="note-input center-display">
         <DebouncedTextarea
           onDebouncedChange={handleDebouncedMemoUpdate}
           name="memo"
@@ -188,7 +188,7 @@ const Receive = () => {
           <div className="amount-converted">{conversionDisplay}</div>
         </div>
       )}
-      <div className="invoice-container">
+      <div className="action-container center-display">
         {showInvoiceSpinner && <Spinner size="big" />}
         {showInvoice && (
           <InvoiceGenerator

src/components/root.tsx

@@ -8,11 +8,11 @@ import { setLocale } from "translate"
 import RootComponent from "../components/root-component"
 import { useErrorHandler } from "react-error-boundary"
 
-type RootProps = { initialState: InitialState }
+type RootProps = { GwwState: GwwState }
 
-const Root = ({ initialState }: RootProps) => {
+const Root = ({ GwwState }: RootProps) => {
   const handleError = useErrorHandler()
-  const [state, dispatch] = useReducer(mainReducer, initialState, (initState) => {
+  const [state, dispatch] = useReducer(mainReducer, GwwState, (initState) => {
     setLocale(initState.defaultLanguage)
     return initState
   })
@@ -58,19 +58,19 @@ const Root = ({ initialState }: RootProps) => {
   return (
     <ApolloProvider client={apolloClient}>
       <GwwContext.Provider value={{ state, dispatch }}>
-        <RootComponent path={state.path} />
+        <RootComponent path={state.path} key={state.key} />
       </GwwContext.Provider>
     </ApolloProvider>
   )
 }
 
 type SSRootProps = {
   client: ApolloClient<unknown>
-  initialState: InitialState
+  GwwState: GwwState
 }
 
-export const SSRRoot = ({ client, initialState }: SSRootProps) => {
-  const [state, dispatch] = useReducer(mainReducer, initialState, (initState) => {
+export const SSRRoot = ({ client, GwwState }: SSRootProps) => {
+  const [state, dispatch] = useReducer(mainReducer, GwwState, (initState) => {
     setLocale(initState.defaultLanguage)
     return initState
   })