DASH-647: twitter-handle page prerender

client/package.json

@@ -1,3 +1,10 @@
 {
-  "proxy": "http://localhost:9006"
+  "proxy": "http://localhost:9006",
+  "reactSnap": {
+    "port": 3000,
+    "fixWebpackChunksIssue": false,
+    "include": [
+      "/twitter-handle"
+    ]
+  }
 }

client/public/index.html

@@ -22,6 +22,17 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@joinfio" />
+    <meta
+      name="twitter:title"
+      content="Your Twitter handle can now receive crypto"
+    />
+    <meta name="twitter:description" content="Get yours now" />
+    <meta
+      name="twitter:image"
+      content="https://dev-dashboard.fioprotocol.io/static/media/twitter-summary-card.4bc76506.png"
+    />
     <meta name="prerender-status-code" content="200" />
     <script>
       window.dataLayer = window.dataLayer || [];

client/src/routes.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Redirect, Route, RouteComponentProps, Switch } from 'react-router-dom';
 
+import TwitterPage from './pages/TwitterPage';
 import MainLayout from './pages/MainLayout';
 import AuthContainer from './components/AuthContainer';
 import PrivateRoute from './components/PrivateRoute';
@@ -204,9 +205,6 @@ const FioAffiliateProgramPage = React.lazy(() =>
 const HomePage = React.lazy(() =>
   import(/* webpackChunkName: 'homePage' */ './pages/HomePage'),
 );
-const TwitterPage = React.lazy(() =>
-  import(/* webpackChunkName: 'twitterPage' */ './pages/TwitterPage'),
-);
 const PrivacyPolicyPage = React.lazy(() =>
   import(
     /* webpackChunkName: 'privacyPolicyPage' */ './pages/PrivacyPolicyPage'

client/src/util/general.ts

@@ -203,7 +203,21 @@ export const transformInputValues = ({
 
 export const removeExtraCharactersFromString = (
   str: string | null,
-): string | null => (str != null ? str.replaceAll(/[^A-Za-z0-9]/g, '') : null);
+): string | null => {
+  if (str == null) {
+    return null;
+  }
+
+  let result = '';
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charAt(i);
+    if (/[A-Za-z0-9]/.test(char)) {
+      result += char;
+    }
+  }
+
+  return result;
+};
 
 export const reorder = (
   list: AnyObject[],

package.json

@@ -4,10 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "postbuild": "react-snap --preload",
     "preinstall": "npm i github:barrysteyn/node-scrypt#fb60a8d3c158fe115a624b5ffa7480f3a24b03fb",
     "client:start": "cd ./client && react-app-rewired start",
-    "client:build": "cd ./client && react-app-rewired --expose-gc --max-old-space-size=8192 build",
+    "client:build": "cd ./client && react-app-rewired --expose-gc --max-old-space-size=8192 build && react-snap",
     "client:test": "cd ./client && CI=true react-app-rewired test --env=jsdom",
     "client:analyze": "cd ./client && source-map-explorer build/static/js/main.*.js",
     "server:dev": "npm run migrate && nodemon -L --inspect --es-module-specifier-resolution=node --watch server server/src/index.mjs",
@@ -27,11 +26,6 @@
     "landing-page-wrap-status:as:start": "export REACT_APP_LANDING_PAGE=wrap-status REACT_APP_IS_WRAP_STATUS_PAGE=true && npm run client:start",
     "landing-page-wrap-status:as:build": "export REACT_APP_LANDING_PAGE=wrap-status REACT_APP_IS_WRAP_STATUS_PAGE=true && npm run client:build"
   },
-  "reactSnap": {
-    "include": [
-      "^/twitter-handle"
-    ]
-  },
   "license": "ISC",
   "overrides": {
     "react": "17.0.2",