chore: use local types everywhere (#90)

Co-authored-by: Samer Buna <samerbuna@users.noreply.github.com>

package.json

@@ -33,22 +33,22 @@
     "@opentelemetry/sdk-trace-base": "^1.1.1",
     "@opentelemetry/sdk-trace-node": "^1.1.1",
     "@opentelemetry/semantic-conventions": "^1.1.1",
-    "@ory/client": "^0.0.1-alpha.125",
-    "@ory/integrations": "^0.2.4",
+    "@ory/client": "^0.0.1-alpha.167",
+    "@ory/integrations": "^0.2.5",
     "@ory/kratos-client": "^0.9.0-alpha.3",
     "@ory/themes": "^0.0.101",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^14.0.4",
+    "@testing-library/react": "^13.0.1",
+    "@testing-library/user-event": "^14.1.0",
     "@types/body-parser": "^1.19.2",
     "@types/cookie-session": "^2.0.44",
     "@types/ejs": "^3.1.0",
     "@types/express": "^4.17.13",
     "@types/express-rate-limit": "^6.0.0",
     "@types/jsonwebtoken": "^8.5.8",
     "@types/morgan": "^1.9.3",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1",
     "@types/serialize-javascript": "^5.0.2",
     "autoprefixer": "^10.4.2",
     "axios": "^0.26.1",
@@ -88,15 +88,15 @@
     "ts-loader": "^9.2.8",
     "typescript": "^4.6.3",
     "url": "^0.11.0",
-    "webpack": "^5.71.0",
+    "webpack": "^5.72.0",
     "webpack-cli": "^4.9.1"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.18.0",
-    "@typescript-eslint/parser": "^5.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.19.0",
+    "@typescript-eslint/parser": "^5.19.0",
     "babel-jest": "^27.5.1",
-    "eslint": "^8.12.0",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint": "^8.13.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.4.0",
     "jest": "^27.5.1",

src/components/auth-provider.tsx

@@ -1,10 +1,10 @@
-import React, { useMemo, useState, ReactNode, useEffect, useCallback } from "react"
+import { useMemo, useState, ReactNode, useEffect, useCallback } from "react"
 import { useErrorHandler } from "react-error-boundary"
 
 import { GaloyClient, GaloyProvider, postRequest } from "@galoymoney/client"
 
 import { createClient, useAppDispatcher, useRequest } from "store/index"
-import { AuthContext } from "store/use-auth-context"
+import { AuthContext, AuthIdentity, AuthSession } from "store/use-auth-context"
 import axios from "axios"
 
 import config from "store/config"

src/components/contact-list-for-sending.tsx

@@ -13,6 +13,7 @@ import useMainQuery from "hooks/use-main-query"
 import { history } from "store/index"
 import config from "store/config"
 import { useAuthContext } from "store/use-auth-context"
+import { NoPropsFCT } from "store/types"
 
 const ContactListForSending: NoPropsFCT = () => {
   const { isAuthenticated } = useAuthContext()

src/components/error-message.tsx

@@ -2,12 +2,14 @@ import { translate, translateUnknown } from "@galoymoney/client"
 
 type FCT = React.FC<{ message?: string }>
 
-const ErrorMessage: FCT = ({ message = "Not able to generate invoice." }) => (
-  <div className="error">
-    {translateUnknown(message)}
-    <br />
-    {translate("Please try again later.")}
-  </div>
-)
+const ErrorMessage: FCT = ({ message = "Not able to generate invoice." }) => {
+  return (
+    <div className="error">
+      {translateUnknown(message) as string}
+      <br />
+      {translate("Please try again later.")}
+    </div>
+  )
+}
 
 export default ErrorMessage

src/components/kratos/TextInput.tsx

@@ -1,7 +1,7 @@
-import React, { ReactNode } from "react"
+import * as React from "react"
 
 export interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  subtitle?: ReactNode
+  subtitle?: React.ReactNode
   state?: "success" | "error" | "disabled"
 }
 

src/components/link.tsx

@@ -1,4 +1,5 @@
-import { checkAuthRoute } from "server/routes"
+import * as React from "react"
+import { AuthRoutePath, checkAuthRoute, RoutePath } from "server/routes"
 import config from "store/config"
 import { history } from "store/index"
 
@@ -14,6 +15,7 @@ const navigateTo = (to: string) => {
 type FCT = React.FC<{
   to: RoutePath | AuthRoutePath
   className?: string
+  children: React.ReactNode
 }>
 
 const Link: FCT = ({ to, className, children }) => {

src/components/login/auth-code.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from "react"
+import { ChangeEvent, useState } from "react"
 
 import { translate } from "@galoymoney/client"
 import { Icon, Spinner } from "@galoymoney/react"

src/components/login/captcha-callenge.tsx

@@ -5,9 +5,9 @@ import { Spinner } from "@galoymoney/react"
 
 import AuthCode from "components/login/auth-code"
 
-type FCT = React.FC<{ phoneNumber: string }>
-
-const CaptchaChallengeComponent: FCT = ({ phoneNumber }) => {
+const CaptchaChallengeComponent: React.FC<{ phoneNumber: string }> = ({
+  phoneNumber,
+}) => {
   const [createCaptchaChallenge, { loading: createLoading }] =
     useMutation.captchaCreateChallenge()
   const [requestCaptchaAuthCode, { loading: requestLoading }] =
@@ -19,7 +19,8 @@ const CaptchaChallengeComponent: FCT = ({ phoneNumber }) => {
   }>({ status: "loading" })
 
   const captchaHandler = useCallback(
-    (captchaObj) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (captchaObj: any) => {
       const onSuccess = async () => {
         const result = captchaObj.getValidate()
         const { errorsMessage } = await requestCaptchaAuthCode({

src/components/logout-link.tsx

@@ -2,6 +2,7 @@ import { useResetClient, translate } from "@galoymoney/client"
 import { Icon } from "@galoymoney/react"
 
 import { useAuthContext } from "store/use-auth-context"
+import { NoPropsFCT } from "store/types"
 
 const LogoutLink: NoPropsFCT = () => {
   const { setAuthSession } = useAuthContext()

src/components/pages/contacts.tsx

@@ -5,6 +5,7 @@ import { history } from "store/index"
 import { useAuthContext } from "store/use-auth-context"
 import ErrorMessage from "components/error-message"
 import Header from "components/header"
+import { NoPropsFCT } from "store/types"
 
 const ContactsList: NoPropsFCT = () => {
   const { loading, errorsMessage, data } = useQuery.contacts()

src/components/pages/home.tsx

@@ -4,6 +4,7 @@ import { useAuthContext } from "store/use-auth-context"
 
 import Header from "components/header"
 import TransactionList from "components/transactions/list"
+import { NoPropsFCT } from "store/types"
 
 const Home: NoPropsFCT = () => {
   const { isAuthenticated } = useAuthContext()

src/components/pages/login-email.tsx

@@ -5,7 +5,7 @@ import { AxiosError } from "axios"
 
 import { translate } from "@galoymoney/client"
 
-import { KratosSdk, handleFlowError, getNodesForFlow } from "kratos"
+import { KratosSdk, handleFlowError, getNodesForFlow, KratosFlowData } from "kratos/index"
 import { history } from "store/history"
 import config from "store/config"
 import { useAuthContext } from "store/use-auth-context"

src/components/pages/receive.tsx

@@ -17,6 +17,7 @@ import useMyUpdates from "hooks/use-my-updates"
 import InvoiceGenerator from "components/receive/invoice-generator"
 import Header from "components/header"
 import { ButtonLink } from "components/link"
+import { NoPropsFCT } from "store/types"
 
 type InvoiceInputState = {
   layer: "lightning" | "onchain"

src/components/pages/recovery.tsx

@@ -7,7 +7,7 @@ import {
 import { AxiosError } from "axios"
 
 import { history } from "store/history"
-import { KratosSdk, handleFlowError, getNodesForFlow } from "kratos"
+import { KratosSdk, handleFlowError, getNodesForFlow, KratosFlowData } from "kratos/index"
 import { Messages } from "components/kratos"
 
 import config from "store/config"

src/components/pages/register.tsx

@@ -8,7 +8,7 @@ import { AxiosError } from "axios"
 
 import { translate } from "@galoymoney/client"
 
-import { KratosSdk, handleFlowError, getNodesForFlow } from "kratos"
+import { KratosSdk, handleFlowError, getNodesForFlow, KratosFlowData } from "kratos/index"
 import { history } from "store/history"
 import { useAuthContext } from "store/use-auth-context"
 

src/components/pages/send.tsx

@@ -6,6 +6,7 @@ import {
   ValidPaymentReponse,
   useDelayedQuery,
   formatUsd,
+  PaymentType,
 } from "@galoymoney/client"
 import {
   FormattedNumberInput,
@@ -28,6 +29,30 @@ import Header from "components/header"
 import { ButtonLink } from "components/link"
 import SendAction from "components/send/send-action"
 
+export type InvoiceInput = {
+  view?: "destination" | "amount" | "confirm"
+  currency: "USD" | "SATS"
+
+  // undefined in input is used to indicate their changing state
+  amount?: number | ""
+  destination?: string
+  memo?: string
+
+  satAmount?: number // from price conversion
+
+  valid?: boolean // from parsing
+  errorMessage?: string
+  paymentType?: PaymentType
+
+  sameNode?: boolean
+  fixedAmount?: boolean // if the invoice has amount
+  paymentRequest?: string // if payment is lightning
+  address?: string // if payment is onchain
+  recipientWalletId?: string // if payment is intraledger
+
+  newDestination?: string // for scanned codes
+}
+
 type FCT = React.FC<{ to?: string }>
 
 const Send: FCT = ({ to }) => {

src/components/pages/settings.tsx

@@ -1,13 +1,16 @@
 /* eslint-disable camelcase */
 import { useCallback, useEffect, useState } from "react"
-import { SubmitSelfServiceSettingsFlowBody } from "@ory/kratos-client"
+import {
+  SelfServiceSettingsFlow,
+  SubmitSelfServiceSettingsFlowBody,
+} from "@ory/kratos-client"
 import { AxiosError } from "axios"
 
 import { translate } from "@galoymoney/client"
 
 import { useAuthContext } from "store/use-auth-context"
 import { history } from "store/history"
-import { KratosSdk, handleFlowError, getNodesForFlow } from "../../kratos"
+import { KratosSdk, handleFlowError, getNodesForFlow, KratosFlowData } from "kratos/index"
 import config from "store/config"
 
 import SettingsLayout from "components/settings/layout"

src/components/root-component.tsx

@@ -3,9 +3,17 @@ import { ErrorBoundary } from "react-error-boundary"
 
 import { Spinner } from "@galoymoney/react"
 
-import { appRoutes, checkRoute, authRoutes, checkAuthRoute } from "server/routes"
+import {
+  appRoutes,
+  checkRoute,
+  authRoutes,
+  checkAuthRoute,
+  RoutePath,
+  AuthRoutePath,
+} from "server/routes"
 
 import ErrorFallback from "components/error-fallback"
+import { KratosFlowData } from "kratos/index"
 
 type FCT = React.FC<{
   path: RoutePath | AuthRoutePath

src/components/root.tsx

@@ -3,12 +3,13 @@ import { useEffect, useReducer } from "react"
 import { GaloyClient, setLocale } from "@galoymoney/client"
 
 import { GwwContext, history } from "store/index"
-import mainReducer from "store/reducer"
+import mainReducer, { GwwStateType } from "store/reducer"
 
 import { AuthProvider } from "components/auth-provider"
 import RootComponent from "components/root-component"
+import { KratosFlowData } from "kratos/index"
 
-type RootFCT = React.FC<{ GwwState: GwwState }>
+type RootFCT = React.FC<{ GwwState: GwwStateType }>
 
 const Root: RootFCT = ({ GwwState }) => {
   const [state, dispatch] = useReducer(mainReducer, GwwState, (initState) => {
@@ -50,7 +51,7 @@ const Root: RootFCT = ({ GwwState }) => {
 type SSRRootFCT = React.FC<{
   client: GaloyClient<unknown>
   galoyJwtToken?: string
-  GwwState: GwwState
+  GwwState: GwwStateType
   flowData?: KratosFlowData
 }>
 

src/components/send/send-action.tsx

@@ -1,11 +1,24 @@
 import { translate } from "@galoymoney/client"
+import { InvoiceInput } from "components/pages/send"
 
-import SendIntraLedgerAction from "components/send/send-intra-ledger-action"
+import SendIntraLedgerAction, {
+  SendIntraLedgerActionProps,
+} from "components/send/send-intra-ledger-action"
 import {
+  SendLnActionProps,
   SendLnInvoiceAction,
+  SendLnNoAmountActionProps,
   SendLnNoAmountInvoiceAction,
 } from "components/send/send-ln-action"
-import SendOnChainAction from "components/send/send-onchain-action"
+import SendOnChainAction, {
+  SendOnChainActionProps,
+} from "components/send/send-onchain-action"
+
+export type SendActionProps = InvoiceInput & {
+  btcWalletId: string
+  btcWalletBalance: number
+  reset: () => void
+}
 
 type FCT = React.FC<SendActionProps>
 

src/components/send/send-intra-ledger-action.tsx

@@ -2,6 +2,12 @@ import { useMutation } from "@galoymoney/client"
 import { MouseEvent } from "react"
 
 import SendActionDisplay from "components/send/send-action-display"
+import { SendActionProps } from "./send-action"
+
+export type SendIntraLedgerActionProps = SendActionProps & {
+  recipientWalletId: string
+  satAmount: number
+}
 
 type FCT = React.FC<SendIntraLedgerActionProps>
 

src/components/send/send-ln-action.tsx

@@ -3,6 +3,11 @@ import { MouseEvent, useEffect } from "react"
 import { useMutation } from "@galoymoney/client"
 
 import SendActionDisplay from "components/send/send-action-display"
+import { SendActionProps } from "./send-action"
+
+export type SendLnActionProps = SendActionProps & {
+  paymentRequest: string
+}
 
 type SendLnActionFCT = React.FC<SendLnActionProps>
 
@@ -50,6 +55,10 @@ export const SendLnInvoiceAction: SendLnActionFCT = (props) => {
   )
 }
 
+export type SendLnNoAmountActionProps = SendLnActionProps & {
+  satAmount: number
+}
+
 type SendLnNoAmountActionFCT = React.FC<SendLnNoAmountActionProps>
 
 export const SendLnNoAmountInvoiceAction: SendLnNoAmountActionFCT = (props) => {

src/components/send/send-onchain-action.tsx

@@ -2,6 +2,12 @@ import { useMutation, useQuery } from "@galoymoney/client"
 import { MouseEvent } from "react"
 
 import SendActionDisplay from "components/send/send-action-display"
+import { SendActionProps } from "./send-action"
+
+export type SendOnChainActionProps = SendActionProps & {
+  address: string
+  satAmount: number
+}
 
 type FCT = React.FC<SendOnChainActionProps>
 

src/components/settings/color-theme.tsx

@@ -5,6 +5,7 @@ import { Icon } from "@galoymoney/react"
 
 import storage from "store/local-storage"
 import { ColorTheme, colorThemeLabels, setColorTheme } from "store/theme"
+import { NoPropsFCT } from "store/types"
 
 const ColorThemeSetting: NoPropsFCT = () => {
   const [colorTheme, setColorThemeState] = useState<ColorTheme>("DEFAULT")

src/components/settings/layout.tsx

@@ -1,6 +1,6 @@
 import Header from "components/header"
 
-const SettingsLayout: React.FC = ({ children }) => {
+const SettingsLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
     <div className="settings">
       <Header page="settings" />