chore(frontend): remix v2 upgrade (#2349)

* chore(frontend): update error boundaries to v2

* chore(frontend): update meta to v2

* chore(frontend): update headers to v2

* chore(frontend): update form method to v2

* chore(frontend): update to v2 dev server

* chore(frontend): update server module format to v2

* feat(frontend): typecheck cmd

* fix(frontend): type only import

* feat(frontend): ugprade remix to v2

- upgrades all remix package versions
- fixes breaking v2 change
- removes v2 future flags
- removes skipLibCheck from tsconfig

* feat: add frontend typecheck to ci

* chore(MASE): upgrade routes to remix v2

* chore(MASE): upgrade module format to v2

* chore(MASE): update to v2 dev server

* chore(MASE): update headers to v2

* chore(MASE): update form method to v2

* chore(MASE): update meta to v2

* chore(MASE): update error/catch boundary to v2

* feat(MASE): upgrade remix to v2

* fix(MASE): ts errors

* feat(MASE): add typecheck cmd to ci

* fix(frontend, MASE): remix server start

* fix(MASE): eslint

* refactor(MASE): parseQueryString to URLSearchParams

* Update .github/workflows/lint_test_build.yml

Co-authored-by: Radu-Cristian Popa <[email protected]>

* fix(frontend,MASE): update entry.server request handlers

* chore(MASE): format

* chore(MASE): rm unused quotes route

* Revert "Merge branch 'main' into bc/1464/remix-v2-updates"

This reverts commit f7149aa, reversing
changes made to 41673bb.

* chore: cherry pick merge commit after reverting in f7149aa

chore: upgrade to typescript 5 (#2345)

* feat: upgrade ts to 5.0

* fix(auth): ts2365 build error

fixes Forbidden Implicit Coercions in Relational Operators

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-0.html#forbidden-implicit-coercions-in-relational-operators

* chore(auth): rm unecessary type assertion

* fix(backend): ts2365 build error

fixes Forbidden Implicit Coercions in Relational Operators

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-0.html#forbidden-implicit-coercions-in-relational-operators

* chore: rm default tsconfig option

forceConsistentCasingInFileNames defaults to true in ts 5.0

* chore: update package versions

* chore: rm unused optoin

* chore: rm typescript dev dep from pacakges

* fix(frontend,MASE): mobile view

* fix(frontend): no flash on mobile

* refactor: rework new cookie secure env var

* fix: move env var declaration from dockerfile to compose

* feat(backend): upgrade Rafiki to open payments package v6.5 (#2337)

* feat(backend): upgrade to open payments 6.5

* refactor: one singleton for openApi specs

* chore(deps): update dependency autoprefixer to ^10.4.17 (#2352)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore: update lockfile

* chore: rm extra space

* chore: rm unnecessary eslint ignore

---------

Co-authored-by: Radu-Cristian Popa <[email protected]>
Co-authored-by: Sabine Schaller <[email protected]>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/lint_test_build.yml

@@ -58,6 +58,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/workflows/rafiki/env-setup
+      - run: pnpm --filter frontend typecheck
       - run: pnpm --filter frontend build
 
   auth:
@@ -83,6 +84,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/workflows/rafiki/env-setup
+      - run: pnpm --filter mock-account-servicing-entity typecheck
       - run: pnpm --filter mock-account-servicing-entity build
 
   token-introspection:

localenv/cloud-nine-wallet/docker-compose.yml

@@ -12,7 +12,6 @@ services:
     ports:
       - '3030:80'
     environment:
-      NODE_ENV: ${NODE_ENV:-development}
       LOG_LEVEL: debug
       PORT: 80
       SEED_FILE_LOCATION: /workspace/seed.yml
@@ -115,6 +114,7 @@ services:
       PORT: 3010
       GRAPHQL_URL: http://cloud-nine-wallet-backend:3001/graphql
       OPEN_PAYMENTS_URL: https://cloud-nine-wallet-backend/
+      ENABLE_INSECURE_MESSAGE_COOKIE: true
     depends_on:
       - cloud-nine-backend
 

localenv/happy-life-bank/docker-compose.yml

@@ -10,7 +10,6 @@ services:
     ports:
       - '3031:80'
     environment:
-      NODE_ENV: development
       LOG_LEVEL: debug
       PORT: 80
       SEED_FILE_LOCATION: /workspace/seed.yml
@@ -83,6 +82,7 @@ services:
       PORT: 4010
       GRAPHQL_URL: http://happy-life-bank-backend:3001/graphql
       OPEN_PAYMENTS_URL: https://happy-life-bank-backend/
+      ENABLE_INSECURE_MESSAGE_COOKIE: true
     depends_on:
       - cloud-nine-admin
       - happy-life-backend

localenv/mock-account-servicing-entity/Dockerfile

@@ -59,4 +59,4 @@ COPY --from=builder /home/rafiki/localenv/mock-account-servicing-entity/build ./
 COPY --from=builder /home/rafiki/localenv/mock-account-servicing-entity/public ./localenv/mock-account-servicing-entity/public
 
 WORKDIR /home/rafiki/localenv/mock-account-servicing-entity
-CMD ["sh", "./node_modules/.bin/remix-serve", "build"]
+CMD ["sh", "./node_modules/.bin/remix-serve", "./build/index.js"]

localenv/mock-account-servicing-entity/app/entry.server.tsx

@@ -1,6 +1,6 @@
 import { PassThrough } from 'stream'
 import type { EntryContext } from '@remix-run/node'
-import { Response } from '@remix-run/node'
+import { createReadableStreamFromReadable } from '@remix-run/node'
 import { RemixServer } from '@remix-run/react'
 import { renderToPipeableStream } from 'react-dom/server'
 import { runSeed } from './lib/run_seed.server'
@@ -47,20 +47,22 @@ export default function handleRequest(
   remixContext: EntryContext
 ) {
   return new Promise((resolve, reject) => {
-    let didError = false
+    let shellRendered = false
 
     const { pipe, abort } = renderToPipeableStream(
       <RemixServer context={remixContext} url={request.url} />,
       {
         onShellReady: () => {
+          shellRendered = true
           const body = new PassThrough()
+          const stream = createReadableStreamFromReadable(body)
 
           responseHeaders.set('Content-Type', 'text/html')
 
           resolve(
-            new Response(body, {
+            new Response(stream, {
               headers: responseHeaders,
-              status: didError ? 500 : responseStatusCode
+              status: responseStatusCode
             })
           )
 
@@ -70,9 +72,13 @@ export default function handleRequest(
           reject(err)
         },
         onError: (error) => {
-          didError = true
-
-          console.error(error)
+          responseStatusCode = 500
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error)
+          }
         }
       }
     )

localenv/mock-account-servicing-entity/app/lib/transactions.server.ts

@@ -24,12 +24,12 @@ interface Transaction {
 }
 
 export interface IncomingPayment extends Transaction {
-  incomingAmountValue: string
+  incomingAmountValue?: string
 }
 
 export interface OutgoingPayment extends Transaction {
   receiver: string
-  sendAmountValue: string
+  sentAmountValue: string
   receiveAmount: Amount
 }
 
@@ -45,30 +45,36 @@ export async function getAccountTransactions(
   const { incomingPayments, outgoingPayments } = await getWalletAddressPayments(
     account.walletAddressID
   )
-  const transactions = incomingPayments.edges.map(({ node }) => {
-    return {
-      id: node.id,
-      metadata: node.metadata,
-      incomingAmountValue: node.incomingAmount?.value,
-      amountValue: node.receivedAmount.value,
-      assetCode: node.receivedAmount.assetCode,
-      assetScale: node.receivedAmount.assetScale,
-      state: node.state,
-      createdAt: node.createdAt,
-      type: TransactionType.IncomingPayment
-    }
-  })
+
+  const incomingPaymentEdges = incomingPayments?.edges || []
+  const outgoingPaymentEdges = outgoingPayments?.edges || []
+
+  const transactions: Array<IncomingPayment | OutgoingPayment> =
+    incomingPaymentEdges.map(({ node }) => {
+      return {
+        id: node.id,
+        metadata: node.metadata,
+        incomingAmountValue: node.incomingAmount?.value?.toString(),
+        amountValue: node.receivedAmount.value.toString(),
+        assetCode: node.receivedAmount.assetCode,
+        assetScale: node.receivedAmount.assetScale,
+        state: node.state,
+        createdAt: node.createdAt,
+        type: TransactionType.IncomingPayment
+      }
+    })
+
   return transactions.concat(
-    outgoingPayments.edges.map(({ node }) => {
+    outgoingPaymentEdges.map(({ node }) => {
       return {
         id: node.id,
         receiver: node.receiver,
         metadata: node.metadata,
-        debitAmountValue: node.debitAmount.value,
-        amountValue: node.sentAmount.value,
+        sentAmountValue: node.sentAmount.value.toString(),
+        amountValue: node.sentAmount.value.toString(),
         receiveAmount: node.receiveAmount,
-        assetCode: node.debitAmount.assetCode,
-        assetScale: node.debitAmount.assetScale,
+        assetCode: node.sentAmount.assetCode,
+        assetScale: node.sentAmount.assetScale,
         state: node.state,
         createdAt: node.createdAt,
         type: TransactionType.OutgoingPayment

localenv/mock-account-servicing-entity/app/root.tsx

@@ -8,11 +8,11 @@ import {
   ScrollRestoration
 } from '@remix-run/react'
 
-export const meta: MetaFunction = () => ({
-  charset: 'utf-8',
-  title: 'Mock Account Servicing Entity',
-  viewport: 'width=device-width,initial-scale=1'
-})
+export const meta: MetaFunction = () => [
+  { charset: 'utf-8' },
+  { title: 'Mock Account Servicing Entity' },
+  { name: 'viewport', content: 'width=device-width,initial-scale=1' }
+]
 
 export const links: LinksFunction = () => {
   return [

localenv/mock-account-servicing-entity/app/routes/accounts.$accountId.tsx

@@ -1,4 +1,4 @@
-import { json } from '@remix-run/node'
+import { LoaderFunctionArgs, json } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 import { getAccountTransactions } from '../lib/transactions.server'
 import tableStyle from '../styles/table.css'
@@ -7,9 +7,14 @@ type LoaderData = {
   transactions: Awaited<ReturnType<typeof getAccountTransactions>>
 }
 
-export const loader = async ({ params }) => {
+export const loader = async ({ params }: LoaderFunctionArgs) => {
+  const { accountId } = params
+
+  if (!accountId) {
+    throw json(null, { status: 400, statusText: 'Account not provided.' })
+  }
   return json<LoaderData>({
-    transactions: await getAccountTransactions(params.accountId)
+    transactions: await getAccountTransactions(accountId)
   })
 }
 

localenv/mock-account-servicing-entity/app/routes/consent-screen.tsx

@@ -3,7 +3,6 @@ import type { Dispatch, SetStateAction } from 'react'
 import { useEffect, useState } from 'react'
 import { ApiClient } from '~/lib/apiClient'
 import type { Access } from '~/lib/types'
-import { parseQueryString } from '~/lib/utils'
 
 interface ConsentScreenContext {
   ready: boolean
@@ -230,28 +229,29 @@ export default function ConsentScreen() {
     errors: new Array<Error>()
   } as ConsentScreenContext)
   const location = useLocation()
-  const queryParams = parseQueryString(location.search)
+  const queryParams = new URLSearchParams(location.search)
 
   useEffect(() => {
     if (
       ctx.errors.length === 0 &&
       !ctx.ready &&
-      queryParams.has('interactId', 'nonce')
+      queryParams.has('interactId') &&
+      queryParams.has('nonce')
     ) {
-      const interactId = queryParams.getAsString('interactId')
-      const nonce = queryParams.getAsString('nonce')
-      const returnUrl = queryParams.getAsString('returnUrl')
-      const clientName = queryParams.getAsString('clientName') as string
-      const clientUri = queryParams.getAsString('clientUri') as string
+      const interactId = queryParams.get('interactId')
+      const nonce = queryParams.get('nonce')
+      const returnUrl = queryParams.get('returnUrl')
+      const clientName = queryParams.get('clientName')
+      const clientUri = queryParams.get('clientUri')
       if (interactId && nonce) {
         setCtx({
           ...ctx,
           ready: true,
           interactId,
           nonce,
           returnUrl: returnUrl || ctx.returnUrl,
-          thirdPartyName: clientName,
-          thirdPartyUri: clientUri
+          thirdPartyName: clientName || '',
+          thirdPartyUri: clientUri || ''
         })
       }
     }
@@ -278,8 +278,10 @@ export default function ConsentScreen() {
             })
           } else {
             const outgoingPaymentAccess =
-              response.payload.find((p) => p.type === 'outgoing-payment') ||
-              null
+              response.payload.find(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (p: Record<string, any>) => p.type === 'outgoing-payment'
+              ) || null
             const returnUrlObject = new URL(ctx.returnUrl)
             returnUrlObject.searchParams.append(
               'grantId',

localenv/mock-account-servicing-entity/app/routes/mock-idp.fake-client.ts

@@ -0,0 +1,11 @@
+import type { LoaderFunctionArgs } from '@remix-run/node'
+
+export function loader({ request }: LoaderFunctionArgs) {
+  const url = new URL(request.url)
+  return new Response(
+    JSON.stringify({
+      interact_ref: url.searchParams.get('interact_ref'),
+      hash: url.searchParams.get('hash')
+    })
+  )
+}