Update React to 19

gatsby-browser.tsx

@@ -12,7 +12,6 @@ import '@fontsource/ibm-plex-sans/500.css';
 import '@fontsource/ibm-plex-sans/600.css';
 import '@fontsource/ibm-plex-sans/700.css';
 import '@fontsource/ibm-plex-mono/400.css';
-import 'graphiql/graphiql.min.css';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 

package.json

@@ -33,28 +33,28 @@
     "@criipto/signatures": "^1.29.1",
     "@fontsource/ibm-plex-mono": "^5.2.7",
     "@fontsource/roboto-mono": "^4.5.8",
-    "@fortawesome/fontawesome-svg-core": "^1.3.0",
-    "@fortawesome/free-solid-svg-icons": "^6.0.0",
-    "@fortawesome/react-fontawesome": "^0.1.17",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.2.0",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^2.0.0",
     "@reduxjs/toolkit": "^2.5.1",
-    "@sentry/gatsby": "^7.63.0",
+    "@sentry/gatsby": "^10.38.0",
     "algoliasearch": "^4.12.2",
     "classnames": "^2.3.1",
     "dotenv": "^16.0.0",
-    "gatsby": "^5.14.1",
-    "gatsby-plugin-algolia": "^0.16.1",
+    "gatsby": "^5.16.0",
+    "gatsby-plugin-algolia": "^1.0.3",
     "gatsby-plugin-json-output": "^1.2.0",
-    "gatsby-plugin-manifest": "^5.14.0",
-    "gatsby-plugin-mdx": "^5.14.0",
-    "gatsby-plugin-sitemap": "^6.14.0",
-    "graphiql": "^3.8.3",
+    "gatsby-plugin-manifest": "^5.16.0",
+    "gatsby-plugin-mdx": "^5.16.0",
+    "gatsby-plugin-sitemap": "^6.16.0",
+    "graphiql": "^4.1.2",
     "graphql-tag": "^2.12.6",
     "jose": "^6.1.0",
     "lodash": "^4.17.21",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "react-instantsearch": "^7.15.3",
     "react-markdown": "^2.5.1",
     "react-redux": "^9.2.0",
@@ -74,13 +74,13 @@
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.3",
     "autoprefixer": "^10.4.0",
-    "gatsby-adapter-netlify": "^1.2.0",
-    "gatsby-plugin-image": "^3.14.0",
-    "gatsby-plugin-postcss": "^6.14.0",
-    "gatsby-plugin-sharp": "^5.14.0",
-    "gatsby-remark-images": "^7.14.0",
-    "gatsby-source-filesystem": "^5.14.0",
-    "gatsby-transformer-sharp": "^5.14.0",
+    "gatsby-adapter-netlify": "^1.4.0",
+    "gatsby-plugin-image": "^3.16.0",
+    "gatsby-plugin-postcss": "^6.16.0",
+    "gatsby-plugin-sharp": "^5.16.0",
+    "gatsby-remark-images": "^7.16.0",
+    "gatsby-source-filesystem": "^5.16.0",
+    "gatsby-transformer-sharp": "^5.16.0",
     "github-slugger": "^2.0.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.3",

src/components/GraphQLExplorer.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useMemo, useCallback } from 'react';
 import cx from 'classnames';
-import GraphiQL from 'graphiql';
+import { GraphiQL } from 'graphiql';
 import { Link } from 'gatsby';
 import { Button } from './Button/Button';
+import { GraphQLError } from 'graphql';
 
 import {
   ApiCredentials,
@@ -25,12 +26,9 @@ export interface SignatoryCredentials {
   token: string;
 }
 
-export interface GraphQLError {
-  message: string;
-}
 export interface GraphQLResponse<T = any> {
   data?: T;
-  errors?: GraphQLError[];
+  errors?: readonly GraphQLError[];
 }
 
 export function graphQLFetcher<R = any, V = any>(
@@ -141,7 +139,6 @@ export default function GraphQLExplorer(props: GraphQLExplorerProps) {
           variables={typeof variables === 'object' ? JSON.stringify(variables, null, 2) : variables}
           defaultEditorToolsVisibility={'variables'}
           isHeadersEditorEnabled={false}
-          disableTabs={true}
           className="criipto-graphql-explorer"
           forcedTheme="light"
         />

src/components/InteractiveTour.tsx

@@ -7,7 +7,8 @@ import * as addSignatoryExample from '../examples/addSignatory.graphql';
 import * as closeSignatureOrderExample from '../examples/closeSignatureOrder.graphql';
 import { AddSignatoryOutput } from '../../graphql-signatures-types';
 import { useAppDispatch, useAppSelector } from '../state/hooks';
-import GraphQLExplorer, { GraphQLResponse, GraphQLError, CredentialsForm } from './GraphQLExplorer';
+import GraphQLExplorer, { GraphQLResponse, CredentialsForm } from './GraphQLExplorer';
+import { GraphQLError } from 'graphql';
 import { CodeBlock, H2, Paragraph } from './MdxProvider';
 import { DesktopPageNavigation } from './PageNavigation';
 import { clearExampleData } from '../state/store';
@@ -50,7 +51,7 @@ export default function InteractiveTour() {
   const [signatories, setSignatories] = useState<AddSignatoryOutput['signatory'][]>([]);
   const exampleData = useAppSelector(state => state.exampleData);
   const dispatch = useAppDispatch();
-  const [errors, setErrors] = useState<GraphQLError[]>([]);
+  const [errors, setErrors] = useState<readonly GraphQLError[]>([]);
   const [response, setResponse] = useState<GraphQLResponse | null>(null);
 
   const handleResponse = (step: Step, response: GraphQLResponse) => {

src/components/WebhookSignatureValidator.tsx

@@ -9,13 +9,14 @@ function bytesToBase64(bytes: Uint8Array) {
   }
   return window.btoa(binary);
 }
-function base64ToBytes(base64: string): Uint8Array {
-  var binaryString = window.atob(base64);
-  var bytes = new Uint8Array(binaryString.length);
-  for (var i = 0; i < binaryString.length; i++) {
+
+function base64ToArrayBuffer(base64: string): ArrayBuffer {
+  const binaryString = window.atob(base64);
+  const bytes = new Uint8Array(binaryString.length);
+  for (let i = 0; i < binaryString.length; i++){
     bytes[i] = binaryString.charCodeAt(i);
   }
-  return bytes;
+  return bytes.buffer;
 }
 
 export default function WebhookSignatureValidator() {
@@ -33,7 +34,7 @@ export default function WebhookSignatureValidator() {
     const encoder = new TextEncoder();
     const key = await window.crypto.subtle.importKey(
       'raw',
-      base64ToBytes(secret),
+      base64ToArrayBuffer(secret),
       {
         name: 'hmac',
         hash: 'SHA-256',

src/examples/createBatchSignatory/BatchSignatoryInteractiveTour.tsx

@@ -18,11 +18,10 @@ import {
 import { useAppDispatch, useAppSelector } from '../../state/hooks';
 import GraphQLExplorer, {
   GraphQLResponse,
-  GraphQLError,
   CredentialsForm,
 } from '../../components/GraphQLExplorer';
+import { GraphQLError } from 'graphql';
 import { H2, Paragraph } from '../../components/MdxProvider';
-import { clearExampleData } from '../../state/store';
 
 type Step =
   | 'authenticate'
@@ -76,7 +75,7 @@ export default function InteractiveTour() {
   >([]);
   const exampleData = useAppSelector(state => state.exampleData);
   const dispatch = useAppDispatch();
-  const [errors, setErrors] = useState<GraphQLError[]>([]);
+  const [errors, setErrors] = useState<readonly GraphQLError[]>([]);
   const [response, setResponse] = useState<GraphQLResponse | null>(null);
 
   const handleResponse = (step: Step, response: GraphQLResponse) => {

src/layouts/default.tsx

@@ -17,8 +17,8 @@ export default function DefaultLayout(props: {
   location: Location;
   pageContext: any;
   pageNavigationItems?: PageNavigationItem[];
-  isIduraBannerVisible: boolean;
-  onCloseBanner: () => void;
+  isIduraBannerVisible?: boolean;
+  onCloseBanner?: () => void;
 }) {
   const { frontmatter } = props.pageContext;
   const description = frontmatter?.description || frontmatter?.subtitle;

src/pages/signatures/guides/CustomSealsPageTemplateTour.tsx

@@ -9,9 +9,9 @@ import { AddSignatoryOutput } from '../../../../graphql-signatures-types';
 import { useAppDispatch, useAppSelector } from '../../../state/hooks';
 import GraphQLExplorer, {
   GraphQLResponse,
-  GraphQLError,
   CredentialsForm,
 } from '../../../components/GraphQLExplorer';
+import { GraphQLError } from 'graphql';
 import { CodeBlock, H3, Paragraph } from '../../../components/MdxProvider';
 import { clearExampleData } from '../../../state/store';
 import partnershipAgreementImg from './images/partnership-agreement.png';
@@ -56,7 +56,7 @@ export default function InteractiveTour() {
   const [signatories, setSignatories] = useState<AddSignatoryOutput['signatory'][]>([]);
   const exampleData = useAppSelector(state => state.exampleData);
   const dispatch = useAppDispatch();
-  const [errors, setErrors] = useState<GraphQLError[]>([]);
+  const [errors, setErrors] = useState<readonly GraphQLError[]>([]);
   const [response, setResponse] = useState<GraphQLResponse | null>(null);
 
   const handleResponse = (step: Step, response: GraphQLResponse) => {

src/pages/signatures/guides/PdfFormFillingTour.tsx

@@ -9,9 +9,9 @@ import { AddSignatoryOutput } from '../../../../graphql-signatures-types';
 import { useAppDispatch, useAppSelector } from '../../../state/hooks';
 import GraphQLExplorer, {
   GraphQLResponse,
-  GraphQLError,
   CredentialsForm,
 } from '../../../components/GraphQLExplorer';
+import { GraphQLError } from 'graphql';
 import { CodeBlock, H3, Paragraph } from '../../../components/MdxProvider';
 import { clearExampleData } from '../../../state/store';
 
@@ -53,7 +53,7 @@ export default function InteractiveTour() {
   const [signatories, setSignatories] = useState<AddSignatoryOutput['signatory'][]>([]);
   const exampleData = useAppSelector(state => state.exampleData);
   const dispatch = useAppDispatch();
-  const [errors, setErrors] = useState<GraphQLError[]>([]);
+  const [errors, setErrors] = useState<readonly GraphQLError[]>([]);
   const [response, setResponse] = useState<GraphQLResponse | null>(null);
 
   const handleResponse = (step: Step, response: GraphQLResponse) => {

src/styles/global.css

@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import "graphiql/graphiql.css";
 
 h1,
 h2,
@@ -84,4 +85,4 @@ html {
 
 input[type='search']::-webkit-search-cancel-button {
   display: none;
-}
+}

src/utils/algolia-queries.mjs

@@ -4,6 +4,9 @@ const pageQuery = `{
     edges {
       node {
         id
+        internal {
+          contentDigest
+        }
         frontmatter {
           product
           title
@@ -19,9 +22,10 @@ const pageQuery = `{
     }
   }
 }`;
-function pageToAlgoliaRecord({ node: { id, frontmatter, fields, ...rest } }) {
+function pageToAlgoliaRecord({ node: { id, internal, frontmatter, fields, ...rest } }) {
   return {
     objectID: id,
+    internal,
     ...frontmatter,
     ...fields,
     ...rest,