React debug

src/ErrorBoundary.js

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component } from '~/lib/react-debug';
 import styled from 'styled-components';
 
 import errorImageSrc from '~/assets/images/hopper.png';

src/Game.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from '~/lib/react-debug';
 import styled from 'styled-components';
 import { ThemeProvider, createGlobalStyle } from 'styled-components';
 import { BrowserRouter as Router, Switch, Route, useHistory } from 'react-router-dom';
@@ -72,7 +72,7 @@ const LauncherRedirect = () => {
   const dispatchLauncherPage = useStore(s => s.dispatchLauncherPage);
 
   // redirect to launcher if initial load and trying to link to /launcher/*
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     const parts = history.location.pathname.split('/').slice(1);
     const deeplink = parts[0] === 'launcher';
     if (deeplink || !DISABLE_LAUNCHER_LANDING) {
@@ -88,7 +88,7 @@ const LauncherRedirect = () => {
 
   // redirect to launcher if was logged in and is now logged out (and not already on launcher)
   const wasLoggedIn = useRef(false);
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     if (authenticated) {
       wasLoggedIn.current = true;
     } else {
@@ -114,12 +114,12 @@ const Game = () => {
   const [ loadingMessage, setLoadingMessage ] = useState('Initializing');
 
   // Initialize tag manager
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     initializeTagManager();
   }, []);
 
   const autodetectNeedsInit = graphics?.autodetect === undefined;
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     if (!gpuInfo) return;
 
     if (!gpuInfo.isMobile) {
@@ -144,7 +144,7 @@ const Game = () => {
     }
   }, [ gpuInfo, createAlert, dispatchGpuInfo, autodetectNeedsInit ]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     if (updateNeeded) {
       createAlert({
         type: 'App_Updated',
@@ -156,7 +156,7 @@ const Game = () => {
     }
   }, [createAlert, updateNeeded, onUpdateVersion]);
 
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     if (isInstalling) {
       const messages = [
         'Correcting for gravitational anomalies',

src/ScreensizeWarning.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState } from '~/lib/react-debug';
 
 import FullpageInterstitial from '~/components/FullpageInterstitial';
 import useScreenSize from '~/hooks/useScreenSize';

src/components/AnimatedIcons.js

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from '~/lib/react-debug';
 import Lottie from 'lottie-react';
 
 import CrewBusy from '~/assets/icons/animated/CrewBusy.json';
@@ -9,15 +9,15 @@ import Ready from '~/assets/icons/animated/Ready.json';
 
 const LottieIcon = ({ animation, isPaused = false, size = '1em' }) => {
   const lottieRef = useRef();
-  const style = useMemo(() => ({
+  const style = useMemo(import.meta.url, () => ({
     alignItems: 'center',
     display: 'flex',
     height: size,
     justifyContent: 'center',
     width: size,
   }), [size]);
 
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     if (isPaused) lottieRef.current.pause();
     else lottieRef.current.play();
   }, [isPaused]);

src/components/AnnotationBio.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState } from '~/lib/react-debug';
 import styled from 'styled-components';
 import LoadingAnimation from 'react-spinners/PropagateLoader';
 

src/components/AsteroidRendering.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from '~/lib/react-debug';
 import { AmbientLight, Color, DirectionalLight } from 'three';
 import { Canvas, useThree } from '@react-three/fiber';
 
@@ -14,7 +14,7 @@ const RenderedAsteroid = ({ asteroid, brightness = 1, varyDistance = false, onRe
   const { camera, gl, scene } = useThree();
   const disposeFunc = useRef();
 
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     if (asteroid?.id && webWorkerPool) {
       renderDummyAsteroid(asteroid, asteroid.id < 25 ? 64 : 32, webWorkerPool, (asteroidModel, dispose) => {
         asteroidModel.traverse(function (node) {
@@ -90,16 +90,16 @@ const RenderedAsteroidInCanvas = ({ onReady, ...props }) => {
   // TODO: in general, it might be wise to keep track of all webgl contexts at the app-level and block 
   //  any components that require a canvas until the contexts are freed up (this will be a user-specific
   //  limit, but maybe 4-5 simultaneous contexts max would be safe?)
-  const onReadyInternal = useCallback(() => {
+  const onReadyInternal = useCallback(import.meta.url, () => {
     if (canvas.current) setImageSrc(canvas.current.toDataURL());
     if (onReady) onReady();
   }, [onReady]);
 
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     setImageSrc(null);
   }, [props.asteroid?.id, props.brightness, props.varyDistance])
 
-  const style = useMemo(() => ({ width: '100%', height: '100%', ...(props.style || {}) }), [props.style]);
+  const style = useMemo(import.meta.url, () => ({ width: '100%', height: '100%', ...(props.style || {}) }), [props.style]);
 
   return imageSrc
     ? <img src={imageSrc} style={style} />

src/components/AttentionDot.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from '~/lib/react-debug';
 import styled, { keyframes } from 'styled-components';
 
 const Wrapper = styled.div`

src/components/Autocomplete.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from '~/lib/react-debug';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { PuffLoader } from 'react-spinners';
@@ -74,7 +74,7 @@ const AutocompleteComponent = ({
   const [popperEl, setPopperEl] = useState();
   const [referenceEl, setReferenceEl] = useState();
 
-  const { userOnBlur, userOnFocus, safeInputProps } = useMemo(() => {
+  const { userOnBlur, userOnFocus, safeInputProps } = useMemo(import.meta.url, () => {
     const { onBlur: userOnBlur, onFocus: userOnFocus, ...safeInputProps } = inputProps;
     return { userOnBlur, userOnFocus, safeInputProps };
   }, [inputProps]);
@@ -91,19 +91,19 @@ const AutocompleteComponent = ({
     ],
   });
 
-  const options = useMemo(
+  const options = useMemo(import.meta.url, 
     () => rawOptions.filter((o) => !excludeFunc || !excludeFunc(o)),
     [excludeFunc, rawOptions]
   );
 
-  const handleSelection = useCallback((s) => {
+  const handleSelection = useCallback(import.meta.url, (s) => {
     onSelect(s);
     setFocused(false);
     setHovered(false);
     textInputEl.current.blur();
   }, [onSelect]);
 
-  const handleKeyDown = useCallback((e) => {
+  const handleKeyDown = useCallback(import.meta.url, (e) => {
     if (e.key === 'Escape') {
       textInputEl.current.blur();
     } else if (e.key === 'Enter') {
@@ -119,25 +119,25 @@ const AutocompleteComponent = ({
     }
   }, [allowCustomInput, handleSelection, highlighted, options]);
 
-  const handleOptionHover = useCallback((e) => {
+  const handleOptionHover = useCallback(import.meta.url, (e) => {
     if (e.type === 'mouseenter') {
       setHovered(true);
     } else {
       setHovered(false);
     }
   }, []);
 
-  const handleBlur = useCallback((e) => {
+  const handleBlur = useCallback(import.meta.url, (e) => {
     setFocused(false);
     if (userOnBlur) userOnBlur(e);
   }, [userOnBlur]);
 
-  const handleFocus = useCallback((e) => {
+  const handleFocus = useCallback(import.meta.url, (e) => {
     setFocused(true);
     if (userOnFocus) userOnFocus(e);
   }, [userOnFocus]);
 
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     if (!focused && !hovered) {
       setHighlighted(0);
       setSearchTerm('');
@@ -195,17 +195,17 @@ export const StaticAutocomplete = ({
 }) => {
   const [searchTerm, setSearchTerm] = useState('');
 
-  const formatFootnote = useCallback((o) => {
+  const formatFootnote = useCallback(import.meta.url, (o) => {
     if (typeof footnoteKey === 'string') return o[footnoteKey];
     if (typeof footnoteKey === 'function') return footnoteKey(o);
   }, [footnoteKey]);
 
-  const formatLabel = useCallback((o) => {
+  const formatLabel = useCallback(import.meta.url, (o) => {
     if (typeof labelKey === 'string') return o[labelKey];
     if (typeof labelKey === 'function') return labelKey(o);
   }, [labelKey]);
 
-  const filteredOptions = useMemo(() => {
+  const filteredOptions = useMemo(import.meta.url, () => {
     const lcSearchTerm = searchTerm.toLowerCase();
     return options.filter(o => {
       return `${formatLabel(o)} ${formatFootnote(o)}`.toLowerCase().includes(lcSearchTerm)

src/components/BridgeModalDialog.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from '~/lib/react-debug';
 import styled from 'styled-components';
 
 import BrightButton from '~/components/BrightButton';

src/components/ButtonAlt.js

@@ -1,4 +1,4 @@
-import { useContext, useMemo } from 'react';
+import { useContext, useMemo } from '~/lib/react-debug';
 import styled, { css, keyframes } from 'styled-components';
 import { Tooltip } from 'react-tooltip';
 import BarLoader from 'react-spinners/BarLoader';
@@ -250,8 +250,8 @@ const StandardButton = (props) => {
 
 const TransactionButton = (props) => {
   const { promptingTransaction } = useContext(ChainTransactionContext);
-  const tooltipId = useMemo(() => uniqueId('alt_button_tooltip_'), []);
-  const extraProps = useMemo(() => {
+  const tooltipId = useMemo(import.meta.url, () => uniqueId('alt_button_tooltip_'), []);
+  const extraProps = useMemo(import.meta.url, () => {
     if (promptingTransaction) {
       return {
         disabled: true,

src/components/ChoicesDialog.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from '~/lib/react-debug';
 import styled from 'styled-components';
 
 import Button from '~/components/ButtonAlt';
@@ -85,7 +85,7 @@ const ChoicesDialog = ({
   rightButton,
   ...props
 }) => {
-  const rightButtonOverride = useMemo(() => {
+  const rightButtonOverride = useMemo(import.meta.url, () => {
     if (rightButton) return rightButton;
 
     if (!choices || (choices.length === 1 && !choices[0].text)) {
@@ -98,7 +98,7 @@ const ChoicesDialog = ({
   }, [choices, choicelessButton, choicelessInFooter, props.rightButton]);
 
   const contentWrapper = useRef();
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     if (contentWrapper.current) {
       contentWrapper.current.scrollTop = 0;
     }

src/components/CollapsibleBlock.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from '~/lib/react-debug';
 import styled, { css, keyframes } from 'styled-components';
 
 import { CloseIcon, CollapsedIcon } from '~/components/Icons';
@@ -162,22 +162,22 @@ const CollapsibleBlock = ({
 }) => {
   const [clickable, setClickable] = useState();
   const [collapsed, setCollapsed] = useState(!!initiallyClosed);
-  const toggleCollapse = useCallback(() => {
+  const toggleCollapse = useCallback(import.meta.url, () => {
     if (onClose) return;
     setCollapsed((c) => !c);
   }, [onClose]);
 
   const hasLoaded = useRef();
 
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     if (hasLoaded.current) {
       setCollapsed(false);
     } else {
       hasLoaded.current = true;
     }
   }, [openOnChange, toggleCollapse]);
 
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     if (!collapsed) {
       setTimeout(() => { setClickable(true); }, 250)
     } else {

src/components/CollapsibleSection.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from '~/lib/react-debug';
 import styled, { css, keyframes } from 'styled-components';
 
 import { CollapsedIcon } from '~/components/Icons';
@@ -94,17 +94,17 @@ const CollapsibleSection = ({
   ...props
 }) => {
   const [collapsed, setCollapsed] = useState(!!initiallyClosed);
-  const toggleCollapse = useCallback(() => {
+  const toggleCollapse = useCallback(import.meta.url, () => {
     setCollapsed((c) => !c);
   }, []);
 
   const hasLoaded = useRef();
 
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     if (forceClose) setCollapsed(true);
   }, [forceClose]);
 
-  useEffect(() => {
+  useEffect(import.meta.url, () => {
     if (hasLoaded.current) {
       setCollapsed(false);
     } else {

src/components/ColorPicker.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState } from '~/lib/react-debug';
 import styled from 'styled-components';
 import { CompactPicker } from 'react-color';
 import IconButton from './IconButton';
@@ -65,22 +65,22 @@ const ColorPicker = ({ onChange, initialColor, ...restProps}) => {
     ],
   });
 
-  const handleChangeComplete = useCallback((newColor) => {
+  const handleChangeComplete = useCallback(import.meta.url, (newColor) => {
     setColor(newColor.hex);
     if (onChange) onChange(newColor.hex);
   }, [onChange]);
 
-  const onClickAway = useCallback((e) => {
+  const onClickAway = useCallback(import.meta.url, (e) => {
     e.stopPropagation();
     setOpen((o) => !o);
   }, []);
 
-  const onClick = useCallback((e) => {
+  const onClick = useCallback(import.meta.url, (e) => {
     e.stopPropagation();
     setOpen(true);
   }, []);
 
-  const stopProp = useCallback((e) => {
+  const stopProp = useCallback(import.meta.url, (e) => {
     e.stopPropagation();
   }, []);
 

src/components/ConfirmationDialog.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from '~/lib/react-debug';
 import styled from 'styled-components';
 
 import Button from '~/components/ButtonAlt';

src/components/CopyReferralLink.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback } from '~/lib/react-debug';
 import styled from 'styled-components';
 import Clipboard from 'react-clipboard.js';
 
@@ -14,7 +14,7 @@ const CopyReferralLink = ({ children, fallbackContent }) => {
   const createAlert = useStore(s => s.dispatchAlertLogged);
   const playSound = useStore(s => s.dispatchEffectStartRequested);
 
-  const handleClick = useCallback(() => {
+  const handleClick = useCallback(import.meta.url, () => {
     playSound('click');
     createAlert({
       type: 'ClipboardAlert',