Merge pull request #263 from Propy/dev

dev -> main
Propy · Sep 27, 2024 · 7f5d4cb · 7f5d4cb
2 parents aca86be + b653dda
commit 7f5d4cb
Show file tree

Hide file tree

Showing 24 changed files with 1,604 additions and 57 deletions.
diff --git a/config-overrides.js b/config-overrides.js
@@ -11,7 +11,16 @@ module.exports = function override(config, env) {
         buffer: require.resolve('buffer'),
         stream: require.resolve('stream-browserify'),
         util: require.resolve("util/"),
+        zlib: require.resolve("browserify-zlib"),
+        crypto: require.resolve("crypto-browserify"),
+        vm: require.resolve("vm-browserify"),
     };
+    config.module.rules.push({
+        test: /\.m?js$/,
+        resolve: {
+          fullySpecified: false
+        },
+    });
     config.plugins.push(
         new webpack.ProvidePlugin({
             process: 'process/browser',

diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@mui/material": "^5.1.1",
     "@mui/styles": "^5.1.1",
     "@mui/x-charts": "^6.18.3",
+    "@pushprotocol/restapi": "^1.7.25",
     "@react-spring/web": "^9.7.3",
     "@tanstack/react-query": "^5.48.0",
     "@testing-library/jest-dom": "^5.11.4",
@@ -51,6 +52,8 @@
     "assert": "^2.0.0",
     "axios": "^1.4.0",
     "bignumber.js": "^9.1.2",
+    "browserify-zlib": "^0.2.0",
+    "crypto-browserify": "^3.12.0",
     "d3-array": "^3.2.1",
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.0.0",
@@ -63,12 +66,14 @@
     "https-browserify": "^1.0.0",
     "is-ipfs": "^8.0.1",
     "leaflet": "^1.9.4",
+    "lodash": "^4.17.21",
     "numeral": "^2.0.6",
     "os-browserify": "^0.3.0",
     "react": "18.3.1",
     "react-app-rewired": "^2.2.1",
     "react-dom": "18.3.1",
     "react-fast-marquee": "^1.6.2",
+    "react-ga4": "^2.1.0",
     "react-google-recaptcha-v3": "^1.10.1",
     "react-leaflet": "^4.2.1",
     "react-leaflet-cluster": "^2.1.0",
@@ -88,6 +93,7 @@
     "use-debounce": "^10.0.0",
     "util": "^0.12.5",
     "viem": "^2.16.2",
+    "vm-browserify": "^1.1.2",
     "wagmi": "^2.10.7",
     "web-vitals": "^1.0.1",
     "web3modal": "^1.9.5",

diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
@@ -0,0 +1,66 @@
+import React from 'react'
+
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+
+interface IActionButton {
+  id?: string
+  text: string
+  size?: 'large' | 'medium' | 'small'
+  buttonColor?: "primary" | "secondary" | "info" | "inherit" | "success" | "error" | "warning"
+  textColor?: string
+  className?: string
+  component?: "button" | "div"
+  variant?: "contained" | "text" | "outlined"
+  disabled?: boolean
+  onClick?: () => void
+  showLoadingIcon?: boolean
+}
+
+const getCircularProgressColor = (color: IActionButton["buttonColor"]) => {
+  if(color === 'primary') {
+    return '#bdbdbd';
+  }
+  return "";
+}
+
+const ActionButton = (props: IActionButton) => {
+
+    const {
+      id,
+      text,
+      size = "medium",
+      buttonColor = 'primary',
+      textColor,
+      className = "",
+      component = "button",
+      variant = "outlined",
+      disabled = false,
+      showLoadingIcon = false,
+      onClick,
+    } = props;
+
+    return (
+      <Button
+        component={component}
+        disabled={disabled}
+        variant={variant}
+        className={className}
+        onClick={() => onClick && onClick()}
+        size={size}
+        color={buttonColor}
+        style={{
+          ...(textColor && {color: textColor}),
+          // lineHeight: 1.1
+        }}
+        {...(id && { id })}
+      >
+        {showLoadingIcon &&
+          <CircularProgress color="inherit" style={{height: '18px', width: '18px', marginRight: '8px', color: getCircularProgressColor(buttonColor)}} />
+        }
+        <span style={{padding: 0}}>{text}</span>
+      </Button>
+    )
+}
+
+export default ActionButton;
diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx
@@ -16,6 +16,7 @@ interface IFloatingActionButton {
   textColor?: string
   className?: string
   component?: "button" | "div"
+  variant?: "extended" | "circular"
   disabled?: boolean
   onClick?: () => void
   showLoadingIcon?: boolean
@@ -40,6 +41,7 @@ const FloatingActionButton = (props: IFloatingActionButton) => {
       textColor = "white",
       className = "",
       component = "button",
+      variant = "extended",
       disabled = false,
       showLoadingIcon = false,
       onClick,
@@ -49,7 +51,7 @@ const FloatingActionButton = (props: IFloatingActionButton) => {
       <Fab 
         component={component}
         disabled={disabled}
-        variant="extended"
+        variant={variant}
         className={className}
         onClick={() => onClick && onClick()}
         size={size}

diff --git a/src/components/LeafletMap.tsx b/src/components/LeafletMap.tsx
@@ -16,10 +16,16 @@ import markerIconPropy3D from "../assets/img/map-marker-3d-compressed.png";
 import LogoDarkMode from '../assets/svg/propy-logo-house-only.svg'
 import {Icon} from 'leaflet'
 
+import {
+  ICollectionEntry,
+} from '../utils/constants';
+
+import MapOverlaySearchFieldContainer from '../containers/MapOverlaySearchFieldContainer';
 import LeafletMapTrackBounds from './LeafletMapTrackBounds';
 
 import {
-  ILeafletMapMarker
+  ILeafletMapMarker,
+  ISelectedPopupConfig,
 } from '../interfaces';
 
 import { PropsFromRedux } from '../containers/GenericPageContainer';
@@ -40,6 +46,8 @@ interface ILeafletMap {
   onMarkerSelection?: (marker: ILeafletMapMarker) => void
   setPopupOpen?: (status: boolean) => void
   onMapMove?: (center: [number, number]) => void
+  setSelectedPopupConfig?: (popupConfig: ISelectedPopupConfig) => void
+  collectionConfigEntry?: ICollectionEntry,
 }
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -85,6 +93,8 @@ const LeafletMap = memo((props: PropsFromRedux & ILeafletMap) => {
     popupNode,
     onMarkerSelection,
     setPopupOpen,
+    setSelectedPopupConfig,
+    collectionConfigEntry,
     // onMapMove,
   } = props;
 
@@ -145,6 +155,7 @@ const LeafletMap = memo((props: PropsFromRedux & ILeafletMap) => {
       zoomDelta={2}
       zoomSnap={2}
     >
+      {collectionConfigEntry && <MapOverlaySearchFieldContainer setPopupOpen={setPopupOpen} setSelectedPopupConfig={setSelectedPopupConfig} collectionConfigEntry={collectionConfigEntry} />}
       <MapEvents 
         onDragStart={(e) => {
           if(setPopupOpen) { 

diff --git a/src/components/LeafletMapTrackBounds.tsx b/src/components/LeafletMapTrackBounds.tsx
@@ -63,8 +63,6 @@ function LeafletMapTrackBounds(props: ILeafletMapTrackBounds) {
     mMap.on("zoomend", function () {
       let coordinates = mMap.getBounds();
       let zoom = mMap.getZoom();
-      console.log(mMap.getBounds());
-      console.log({coordinates: coordinates.toBBoxString(), zoom: mMap.getZoom()});
       let boundsRect = coordinates.toBBoxString();
       if(zoom >= 10) {
         debouncedUpdate(boundsRect, zoom);
@@ -76,8 +74,6 @@ function LeafletMapTrackBounds(props: ILeafletMapTrackBounds) {
     mMap.on("moveend", function () {
       let coordinates = mMap.getBounds();
       let zoom = mMap.getZoom();
-      console.log(mMap.getBounds());
-      console.log({coordinates: coordinates.toBBoxString(), zoom: mMap.getZoom()});
       let boundsRect = coordinates.toBBoxString();
       if(zoom >= 10) {
         debouncedUpdate(boundsRect, zoom);