Updated dependencies + CSP middleware configuration

package.json

@@ -23,28 +23,28 @@
     "@ledgerhq/hw-app-str": "^6.28.6",
     "@ledgerhq/hw-transport-webusb": "^6.28.6",
     "@stellar/design-system": "^2.0.0-beta.13",
-    "@stellar/stellar-sdk": "^11.3.0",
+    "@stellar/stellar-sdk": "^12.1.0",
     "@stellar/stellar-xdr-json-web": "^0.0.1",
-    "@tanstack/react-query": "^5.32.1",
-    "@tanstack/react-query-devtools": "^5.32.1",
+    "@tanstack/react-query": "^5.45.1",
+    "@tanstack/react-query-devtools": "^5.45.1",
     "@trezor/connect-plugin-stellar": "^9.0.3",
     "@trezor/connect-web": "^9.2.2",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
     "bignumber.js": "^9.1.2",
     "dompurify": "^3.1.2",
     "html-react-parser": "^5.1.10",
     "immer": "^10.1.1",
     "lodash": "^4.17.21",
     "lossless-json": "^4.0.1",
-    "next": "14.2.3",
+    "next": "14.2.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tslib": "^2.6.2",
     "zustand": "^4.5.2",
     "zustand-querystring": "^0.0.19"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.2.3",
+    "@next/eslint-plugin-next": "^14.2.4",
     "@playwright/test": "^1.43.1",
     "@stellar/tsconfig": "^1.0.2",
     "@types/dompurify": "^3.0.5",
@@ -53,13 +53,13 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "eslint": "^8.57.0",
-    "eslint-config-next": "14.2.3",
+    "eslint-config-next": "14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^9.0.11",
-    "lint-staged": "^15.2.2",
-    "prettier": "^3.2.5",
-    "sass": "^1.75.0",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.2",
+    "sass": "^1.77.5",
     "typescript": "^5.4.5"
   }
 }

src/app/(sidebar)/account/create/page.tsx

@@ -35,10 +35,12 @@ export default function CreateAccount() {
     [queryClient],
   );
 
+  const { reset } = account;
+
   const resetStates = useCallback(() => {
-    account.reset();
+    reset();
     resetQuery();
-  }, [resetQuery]);
+  }, [reset, resetQuery]);
 
   const { error, isError, isFetching, isLoading, isSuccess, refetch } =
     useFriendBot({
@@ -60,7 +62,7 @@ export default function CreateAccount() {
       resetStates();
       setShowAlert(false);
     }
-  }, [account.registeredNetwork, network.id]);
+  }, [account.registeredNetwork, network.id, resetStates]);
 
   const generateKeypair = () => {
     resetStates();

src/app/(sidebar)/account/fund/page.tsx

@@ -38,15 +38,17 @@ export default function FundAccount() {
     publicKey: generatedPublicKey,
   });
 
+  const { reset } = account;
+
   useEffect(() => {
     if (
       account.registeredNetwork?.id &&
       account.registeredNetwork.id !== network.id
     ) {
-      account.reset();
+      reset();
       setShowAlert(false);
     }
-  }, [account.registeredNetwork, network.id]);
+  }, [account.registeredNetwork, network.id, reset]);
 
   useEffect(() => {
     if (isError || isSuccess) {

src/app/layout.tsx

@@ -8,6 +8,9 @@ import { StoreProvider } from "@/store/StoreProvider";
 import "@stellar/design-system/build/styles.min.css";
 import "@/styles/globals.scss";
 
+// Needed for CSP
+export const dynamic = "force-dynamic";
+
 // TODO: update metadata
 export const metadata: Metadata = {
   title: "Laboratory - Stellar",

src/middleware.ts

@@ -0,0 +1,68 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export function middleware(request: NextRequest) {
+  const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
+
+  // script-src 'unsafe-eval' is needed for XDR JSON WebAssembly scripts
+  const cspHeader = `
+    default-src 'self';
+    script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https: 'unsafe-inline' 'unsafe-eval';
+    style-src 'self' https://fonts.googleapis.com ${
+      process.env.NODE_ENV === "production"
+        ? `'nonce-${nonce}'`
+        : `'unsafe-inline'`
+    };
+    img-src 'self' blob: data:;
+    connect-src 'self' https://9sl3dhr1twv1.statuspage.io/api/v2/ *.stellar.org;
+    font-src 'self' https://fonts.gstatic.com/;
+    object-src 'none';
+    base-uri 'self';
+    form-action 'self';
+    frame-ancestors 'none';
+    block-all-mixed-content;
+    upgrade-insecure-requests;
+`;
+  // Replace newline characters and spaces
+  const contentSecurityPolicyHeaderValue = cspHeader
+    .replace(/\s{2,}/g, " ")
+    .trim();
+
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set("x-nonce", nonce);
+
+  requestHeaders.set(
+    "Content-Security-Policy",
+    contentSecurityPolicyHeaderValue,
+  );
+
+  const response = NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  });
+  response.headers.set(
+    "Content-Security-Policy",
+    contentSecurityPolicyHeaderValue,
+  );
+
+  return response;
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - api (API routes)
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     */
+    {
+      source: "/((?!api|_next/static|_next/image|favicon.ico).*)",
+      missing: [
+        { type: "header", key: "next-router-prefetch" },
+        { type: "header", key: "purpose", value: "prefetch" },
+      ],
+    },
+  ],
+};