fix: gatsby build error: replaceHistory not an api

Issue ref: mongkuen/gatsby-plugin-page-transitions#7

gatsby-config.js

@@ -141,9 +141,6 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-root-import',
     },
-    {
-      resolve: 'gatsby-plugin-page-transitions',
-    },
     {
       resolve: `gatsby-plugin-typography`,
       options: {

package.json

@@ -21,7 +21,6 @@
     "gatsby-plugin-metomic": "0.0.2",
     "gatsby-plugin-netlify": "^2.2.1",
     "gatsby-plugin-offline": "^3.0.32",
-    "gatsby-plugin-page-transitions": "^1.0.8",
     "gatsby-plugin-portal": "^1.0.7",
     "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
     "gatsby-plugin-react-helmet": "^3.1.21",
@@ -47,6 +46,7 @@
     "react-responsive": "^8.0.3",
     "react-spring": "^8.0.27",
     "react-tooltip": "^4.2.5",
+    "react-transition-group": "^4.4.1",
     "react-typography": "^0.16.19",
     "typography": "^0.16.19",
     "typography-theme-alton": "^0.16.19",

src/pages/tezos/storyline.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import PageTransition from 'gatsby-plugin-page-transitions';
+import PageTransition from '../../utils/pageTransition';
 
 // CSS
 // import '../assets/GameAssets/game.css';

src/utils/pageTransition.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  TransitionGroup,
+  Transition as ReactTransition,
+} from 'react-transition-group';
+
+const timeout = 800;
+const getTransitionStyles = {
+  entering: {
+    position: `absolute`,
+    opacity: 0.1,
+  },
+  entered: {
+    transition: `opacity ${timeout}ms ease-in-out`,
+    opacity: 1,
+  },
+  exiting: {
+    transition: `opacity ${timeout}ms ease-in-out`,
+    opacity: 0,
+  },
+};
+
+class Transition extends React.PureComponent {
+  render() {
+    const { children } = this.props;
+
+    return (
+      <TransitionGroup>
+        <ReactTransition
+          timeout={{
+            enter: timeout,
+            exit: timeout,
+          }}
+        >
+          {status => (
+            <div
+              style={{
+                ...getTransitionStyles[status],
+              }}
+            >
+              {children}
+            </div>
+          )}
+        </ReactTransition>
+      </TransitionGroup>
+    );
+  }
+}
+
+export default Transition;