Explorer: handle GCP redirect to index.html

Change-Id: Ie3f532285b4b900e2e4b53dfaf36ec68e15fcb92

commit-id:c9047126

explorer/src/components/ExplorerStats/ChainOverviewCard.tsx

@@ -72,7 +72,7 @@ const ChainOverviewCard: React.FC<ChainOverviewCardProps> = ({ Icon, iconStyle,
                 cover={<Icon style={{ height: 140, ...iconStyle }} />}
                 hoverable={!!totalCount}
                 bordered={false}
-                onClick={() => !!totalCount && navigate(`/${intl.locale}/explorer?emitterChain=${dataKey}`)}
+                onClick={() => !!totalCount && navigate(`/${intl.locale}/explorer/?emitterChain=${dataKey}`)}
                 loading={loading}
                 bodyStyle={{
                     display: 'flex',

explorer/src/components/Layout/DefaultLayout.tsx

@@ -120,7 +120,7 @@ const DefaultLayout: React.FC<{}> = ({
 
   const menuItems = [
     <div key="about" {...menuItemProps}>
-      <Link to={`/${intl.locale}/about`}>
+      <Link to={`/${intl.locale}/about/`}>
         <FormattedMessage id="nav.aboutLink" />
       </Link>
     </div>,
@@ -130,7 +130,7 @@ const DefaultLayout: React.FC<{}> = ({
       </Link>
     </div>,
     <div key="explorer" {...menuItemProps} >
-      <Link to={`/${intl.locale}/explorer`}>
+      <Link to={`/${intl.locale}/explorer/`}>
         <FormattedMessage id="nav.explorerLink" />
       </Link>
     </div>,

explorer/src/pages/404.tsx

@@ -1,12 +1,26 @@
 import React from 'react'
 import { Result } from 'antd'
 import { useIntl } from 'gatsby-plugin-intl';
+import { PageProps } from 'gatsby';
+const isBrowser = typeof window !== "undefined"
 
-export default () => {
+export default (props: PageProps) => {
+  // TEMP - handle GCP bucket redirect, remove "index.html" from the route.
+  // This handles an edge case where the user lands without a trailing slash,
+  // and GCP redirects them to + '/index.html', because the route did not match
+  // a file in the bucket.
+  // Can remove this when we move away from GCP storage bucket hosting.
+  if (isBrowser) {
+    if (props.location.href.includes('index.html')) {
+      const uri = props.location.pathname.replace('index.html', '') + props.location.search
+      window.location.replace(uri)
+      return null // don't render anything, user will be redirected.
+    }
+  }
   const intl = useIntl()
   return <Result
     status="404"
     title="404"
-    subTitle={intl.formatMessage({id: '404.message'})}
+    subTitle={intl.formatMessage({ id: '404.message' })}
   />
 }

explorer/src/pages/about.tsx

@@ -13,6 +13,7 @@ const { useBreakpoint } = Grid
 
 import { ReactComponent as LayeredSquares } from '~/icons/layered-squares.svg';
 import { ReactComponent as Hole } from '~/icons/hole.svg';
+import { DOCS_URL } from '~/utils/misc/constants';
 
 const BriefAboutSection = ({ intl, smScreen }: { intl: IntlShape, smScreen: boolean }) => (
   <div className="center-content">
@@ -89,7 +90,7 @@ const HowSection = ({ intl, smScreen }: { intl: IntlShape, smScreen: boolean })
           <FormattedMessage id="about.how.body" />
         </Paragraph>
         <OutboundLink
-          href="https://github.com/certusone/wormhole/blob/dev.v2/design/navbar.md"
+          href={DOCS_URL}
           target="_blank" rel="noopener noreferrer" className="no-external-icon"
         >
           <Button style={{ ...buttonStylesLg, marginBottom: 50 }} size="large">

explorer/src/pages/explorer.tsx

@@ -154,7 +154,7 @@ const Explorer: React.FC<ExplorerProps> = ({ location, navigate }) => {
 
                                 )}
                                 {emitterAddress || emitterChain ?
-                                    <Link to={`/${intl.locale}/explorer`}>
+                                    <Link to={`/${intl.locale}/explorer/`}>
                                         <Button
                                             shape="round"
                                             icon={<CloseOutlined />}

explorer/src/pages/index.tsx

@@ -102,7 +102,7 @@ const AboutUsSection = ({ intl, smScreen, howAnchor }: { intl: IntlShape, smScre
         <Paragraph style={{ ...bodyStyles, maxWidth: smScreen ? '100%' : 500, marginBottom: 30 }} >
           <FormattedMessage id="homepage.aboutUs.body" />
         </Paragraph>
-        <Link to={`/${intl.locale}/about`}>
+        <Link to={`/${intl.locale}/about/`}>
           <Button style={buttonStylesLg} size="large">
             <FormattedMessage id="homepage.aboutUs.callToAction" />
           </Button>