Deploying new leaderboard UI.

src/components/Leaderboard.js

@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from 'react'
+import gtag from 'ga-gtag'
+import PropTypes from 'prop-types'
+import Modal from '@material-ui/core/Modal'
+import IconButton from '@material-ui/core/IconButton'
+import CloseIcon from '@material-ui/icons/Close'
+
+const iframeUrl =
+  'https://snowy-stream-wljibw2liswn.vapor-farm-g1.com/newtab/leaderboard?user_id='
+
+const Leaderboard = ({ user, openWidgetFunc, onCloseFunc }) => {
+  const [openWidget, setOpenWidget] = useState(false)
+
+  const onOpen = () => {
+    setOpenWidget(true)
+    gtag('event', 'leaderboard_open')
+  }
+
+  const onClose = () => {
+    setOpenWidget(false)
+    onCloseFunc()
+    gtag('event', 'leaderboard_close')
+  }
+
+  // If you need to call the function automatically when the parent says so:
+  useEffect(() => {
+    if (openWidgetFunc) {
+      onOpen()
+    }
+  }, [openWidgetFunc])
+
+  if (!user) {
+    return null
+  }
+
+  return (
+    <>
+      {iframeUrl && (
+        <Modal
+          id="momentum-modal"
+          open={openWidget}
+          style={{
+            top: 10,
+            left: 0,
+            right: 0,
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            maxWidth: 800,
+            bottom: 10,
+            position: 'absolute',
+            backgroundColor: 'white',
+            zIndex: 100000000,
+          }}
+        >
+          <div style={{ height: '100%' }}>
+            <IconButton
+              onClick={onClose}
+              style={{ position: 'absolute', right: 25, top: 5 }}
+            >
+              <CloseIcon sx={{ color: '#fff', width: 28, height: 28 }} />
+            </IconButton>
+
+            <div
+              style={{
+                height: '100%',
+                width: '100%',
+                padding: 40,
+                backgroundColor: 'white',
+                display: 'flex',
+                flexFlow: 'column',
+              }}
+            >
+              <iframe
+                style={{ border: 'none', flex: '1 1 auto' }}
+                id="leaderboard-iframe"
+                title="Leaderboard Widget"
+                src={iframeUrl + user.userId}
+                width="100%"
+              />
+            </div>
+          </div>
+        </Modal>
+      )}
+    </>
+  )
+}
+
+Leaderboard.displayName = 'LeaderboardComponent'
+
+Leaderboard.propTypes = {
+  user: PropTypes.shape({
+    userId: PropTypes.string,
+  }).isRequired,
+  openWidgetFunc: PropTypes.func,
+  onCloseFunc: PropTypes.func,
+}
+
+Leaderboard.defaultProps = {
+  openWidgetFunc: () => {},
+  onCloseFunc: () => {},
+}
+
+export default Leaderboard

src/pages/index.js

@@ -20,6 +20,7 @@ import { goTo } from 'src/utils/navigation'
 import Raptive from 'src/components/head/Raptive'
 
 // custom components
+import Button from '@material-ui/core/Button'
 import Achievement from 'src/components/Achievement'
 import Link from 'src/components/Link'
 import Logo from 'src/components/Logo'
@@ -33,6 +34,7 @@ import CustomThemeHOC from 'src/utils/pageWrappers/CustomThemeHOC'
 import withGoogleAnalyticsProperties from 'src/utils/pageWrappers/withGoogleAnalyticsProperties'
 import SfacActivityContainer from 'src/components/SfacActivityContainer'
 import Momentum from 'src/components/Momentum'
+import Leaderboard from 'src/components/Leaderboard'
 
 // material components
 import { makeStyles } from '@material-ui/core/styles'
@@ -553,6 +555,8 @@ const Index = ({ data: fallbackData, userAgent }) => {
   const [shouldShowSearchbarSFACPrompt, setShouldShowSearchbarSFACPrompt] =
     useState(false)
 
+  const [showLeaderboardFunc, setShowLeaderboardFunc] = useState(false)
+
   // Determine if we should show the SFAC extension prompt.
   const searchExtensionSupported = useDoesBrowserSupportSearchExtension({
     userAgent,
@@ -756,6 +760,10 @@ const Index = ({ data: fallbackData, userAgent }) => {
   }
   const showIntro = !get(user, 'hasViewedIntroFlow') && !justFinishedIntroFlow
 
+  const onLeaderboardClose = () => {
+    setShowLeaderboardFunc(false)
+  }
+
   return (
     <>
       <Head>
@@ -845,6 +853,44 @@ const Index = ({ data: fallbackData, userAgent }) => {
                         </IconButton>
                       </a>
                     )}
+
+                    {user &&
+                      (user.email === '[email protected]' ||
+                        user.email === '[email protected]') && (
+                        <IconButton
+                          style={{
+                            height: 40,
+                            width: 40,
+                            backgroundColor: 'white',
+                            boxShadow: '0px 2px 4px grey',
+                          }}
+                          onClick={() =>
+                            setShowLeaderboardFunc(!showLeaderboardFunc)
+                          }
+                        >
+                          <div
+                            style={{ display: 'flex', flexDirection: 'column' }}
+                          >
+                            <svg
+                              width="30px"
+                              height="30px"
+                              version="1.1"
+                              viewBox="0 0 128 128"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <defs>
+                                <clipPath id="a">
+                                  <path d="m28 23.695h72v80.609h-72z" />
+                                </clipPath>
+                              </defs>
+                              <g clip-path="url(#a)">
+                                <path d="m50.961 26.066c0-1.3086 1.0625-2.3711 2.3711-2.3711h21.336c1.3086 0 2.3711 1.0625 2.3711 2.3711h7.1133c1.3086 0 2.3711 1.0625 2.3711 2.3711v4.7422c0 5.2383-4.2461 9.4844-9.4844 9.4844h-2.1094c-1.9141 2.9336-4.9805 5.0547-8.5586 5.7109v4.957h4.7422c1.3086 0 2.3711 1.0625 2.3711 2.3711s-1.0625 2.3711-2.3711 2.3711h-14.227c-1.3086 0-2.3711-1.0625-2.3711-2.3711s1.0625-2.3711 2.3711-2.3711h4.7422v-4.957c-3.5781-0.65625-6.6445-2.7773-8.5586-5.7109h-2.1094c-5.2383 0-9.4844-4.2461-9.4844-9.4844v-4.7422c0-1.3086 1.0625-2.3711 2.3711-2.3711zm0 4.7422h-4.7422v2.3711c0 2.6172 2.1211 4.7422 4.7422 4.7422h0.21484c-0.14062-0.76953-0.21484-1.5625-0.21484-2.3711zm26.078 0v4.7422c0 0.80859-0.074218 1.6016-0.21484 2.3711h0.21484c2.6211 0 4.7422-2.125 4.7422-4.7422v-2.3711zm-29.637 49.789h52.16v9.4805h-52.16zm-4.7383 0v9.4805h-14.227v-9.4805zm4.7383 23.707v-9.4844h52.16v5.9297c0 1.9609-1.5898 3.5547-3.5547 3.5547zm-4.7383 0h-10.672c-1.9648 0-3.5547-1.5938-3.5547-3.5547v-5.9297h14.227zm4.7383-37.934h48.605c1.9648 0 3.5547 1.5938 3.5547 3.5547v5.9297h-52.16zm-4.7383 0v9.4844h-14.227v-5.9297c0-1.9609 1.5898-3.5547 3.5547-3.5547z" />
+                              </g>
+                            </svg>
+                          </div>
+                        </IconButton>
+                      )}
+
                     <div className={classes.moneyRaisedContainer}>
                       <Typography
                         variant="h5"
@@ -1043,6 +1089,15 @@ const Index = ({ data: fallbackData, userAgent }) => {
               {/* Momentum Direct Donate */}
               {user.userId && <Momentum user={user} />}
 
+              {/* Leaderboard */}
+              {user.userId && (
+                <Leaderboard
+                  user={user}
+                  openWidgetFunc={showLeaderboardFunc}
+                  onCloseFunc={onLeaderboardClose}
+                />
+              )}
+
               <div className={classes.searchBarContainer}>
                 {/* Prime day 2023 Promo */}
                 {/* {user.userId && notif && <PrimeDay2023 user={user} />} */}