🪄 [QA] Update stage environments (#580)

This is a pull request that upon merging will update stage environments with recent `main` changes. The environments that will be updated: * Stage live: https://stage-live--taho-development.netlify.app/ * Stage fork: https://stage-fork--taho-development.netlify.app/ Read more: [Deployment to Production Flow](https://github.com/tahowallet/dapp/blob/main/docs/testing-env.md)
tahowallet · Oct 30, 2023 · 6c76a6a · 6c76a6a
2 parents 2c9e7f9 + 3baeeb2
commit 6c76a6a
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 40 deletions.
diff --git a/src/assets/questline-data.json b/src/assets/questline-data.json
@@ -5,10 +5,6 @@
             "questlineName": "Transact on PGN",
             "description": "Gitcoin is a community that focuses on incentivizing and supporting open-source development. Gitcoin aims to foster collaboration and sustainability within the open-source ecosystem by providing a marketplace for matching developers with projects and funding opportunitie and rewards for their contributions.",
             "quests": [
-                {
-                    "name": "Execute individual transactions on PGN (Public Goods Network)",
-                    "description": "The more transactions you execute on PGN compared to other members of this realm in a week, the more of the weekly XP drop you will get."
-                },
                 {
                     "name": "Spend gas on PGN (Public Goods Network)—more gas is better!",
                     "description": "The more gas you use on PGN compared to other members of this realm in a week, the more of the weekly XP drop you will get. This means you can still get more XP if you execute fewer bigger transactions!"

diff --git a/src/shared/components/Modal.tsx b/src/shared/components/Modal.tsx
@@ -4,6 +4,7 @@ import { easings, useSpring, animated } from "@react-spring/web"
 
 import Portal from "./Portal"
 import { noop } from "../utils"
+import ClickableModalOverlay from "./Modals/ClickableModalOverlay"
 
 function CloseBtn({ onClick, style }: React.SVGProps<SVGSVGElement>) {
   return (
@@ -159,29 +160,45 @@ type ScrollableContainerProps = {
   /**
    * position of the modal from top of the screen
    */
-  topSpacing: number
+  topSpacing?: string
+  bottomSpacing?: string
 } & ModalProps
 
 /**
  * Modal container, allows for scrolling when modal does not fit the window
  */
 function ScrollableContainer({
-  topSpacing,
+  topSpacing = "104px",
+  bottomSpacing = "160px",
   children,
   type = "freeform",
   onClickOutside = noop,
 }: ScrollableContainerProps) {
+  const [props] = useSpring(
+    () => ({
+      from: { opacity: 0 },
+      to: { opacity: 1, position: "relative" },
+      config: { duration: 300, easing: easings.easeInOutCubic },
+    }),
+    []
+  )
+
   return (
     <>
       <Container type={type} onClickOutside={onClickOutside}>
-        <div className="no_scrollbar scrollable_modal">{children}</div>
+        <animated.div style={props}>
+          <div className="no_scrollbar scrollable_modal">
+            <ClickableModalOverlay close={onClickOutside} />
+            {children}
+          </div>
+        </animated.div>
       </Container>
       <style jsx>
         {`
           .scrollable_modal {
             height: 100vh;
-            padding-top: ${topSpacing}px;
-            padding-bottom: 160px;
+            padding-top: ${topSpacing};
+            padding-bottom: ${bottomSpacing};
             overflow: hidden auto;
           }
         `}

diff --git a/src/shared/components/Modals/ClickableModalOverlay.tsx b/src/shared/components/Modals/ClickableModalOverlay.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+
+export default function ClickableModalOverlay({
+  close,
+}: {
+  close: VoidFunction
+}) {
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="Clickable Modal Overlay"
+        className="clickable-overlay button_reset"
+        onClick={close}
+      />
+      <style jsx>{`
+        .clickable-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          zindex: 0;
+          cursor: default;
+        }
+      `}</style>
+    </>
+  )
+}
diff --git a/src/shared/components/RealmModal/index.tsx b/src/shared/components/RealmModal/index.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect } from "react"
-import { useSpring, animated, easings } from "@react-spring/web"
 import { useAssistant, useLocalStorageChange } from "shared/hooks"
 import { LOCAL_STORAGE_VISITED_REALM } from "shared/constants"
 import Modal from "shared/components/Modal"
@@ -43,19 +42,13 @@ export default function RealmModal({
     updateAssistant({ visible: true, type: "first-realm" })
   }, [value, updateStorage, updateAssistant])
 
-  const [props] = useSpring(
-    () => ({
-      from: { opacity: 0 },
-      to: { opacity: 1, position: "relative" },
-      config: { duration: 300, easing: easings.easeInOutCubic },
-    }),
-    []
-  )
-
   return (
-    <Modal.Container type="fullscreen" onClickOutside={onClose}>
-      <animated.div style={{ position: "relative" }}>
-        {/* <PrevBtn
+    <Modal.ScrollableContainer
+      type="fullscreen"
+      bottomSpacing="90px"
+      onClickOutside={onClose}
+    >
+      {/* <PrevBtn
           style={{
             position: "absolute",
             top: 187,
@@ -75,20 +68,7 @@ export default function RealmModal({
           }}
           onClick={() => islandContext.current.onRealmClick(nextRealm)}
         /> */}
-        <animated.div style={props}>
-          <div
-            className="no_scrollbar"
-            style={{
-              height: "100vh",
-              overflow: "hidden auto",
-              paddingTop: 104,
-              paddingBottom: 90,
-            }}
-          >
-            <RealmModalContent onClose={onClose}>{children}</RealmModalContent>
-          </div>
-        </animated.div>
-      </animated.div>
-    </Modal.Container>
+      <RealmModalContent onClose={onClose}>{children}</RealmModalContent>
+    </Modal.ScrollableContainer>
   )
 }
diff --git a/src/shared/hooks/helpers.ts b/src/shared/hooks/helpers.ts
@@ -164,7 +164,9 @@ export function useAssets(assets: string[]) {
         img.onload = checkAssetsLoaded
       }
     })
-  }, [assets])
+    // The useLayoutEffect hook should only run once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   return assetsLoaded
 }

diff --git a/src/ui/Claim/ClaimCheck.tsx b/src/ui/Claim/ClaimCheck.tsx
@@ -109,7 +109,7 @@ export default function ClaimCheck() {
   }
 
   return (
-    <Modal.ScrollableContainer topSpacing={217} type="island-without-overlay">
+    <Modal.ScrollableContainer topSpacing="217px" type="island-without-overlay">
       <Modal.AnimatedContent>
         <div className="check_container">
           <ClaimHeader

diff --git a/src/ui/Referrals/index.tsx b/src/ui/Referrals/index.tsx
@@ -28,7 +28,7 @@ export default function Referrals() {
   }
 
   return (
-    <Modal.ScrollableContainer topSpacing={176} type="island-without-overlay">
+    <Modal.ScrollableContainer topSpacing="176px" type="island-without-overlay">
       <Modal.AnimatedContent>
         <div className="referrals_container column_center">
           <div className="referrals_header">