feat: show map modal before send post

TERITORI · Jan 26, 2024 · 9ffcbd0 · 9ffcbd0
1 parent af91899
commit 9ffcbd0
Show file tree

Hide file tree

Showing 10 changed files with 971 additions and 474 deletions.
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "@reduxjs/toolkit": "^1.8.3",
     "@solana/web3.js": "^1.87.6",
     "@tanstack/react-query": "^4.12.0",
+    "@types/leaflet": "^1.9.8",
     "assert": "^2.1.0",
     "axios": "^1.6.2",
     "bech32": "^2.0.0",
@@ -88,6 +89,8 @@
     "google-protobuf": "^3.21.2",
     "html-to-draftjs": "^1.5.0",
     "immutable": "^4.0.0",
+    "leaflet": "^1.9.4",
+    "leaflet-geosearch": "^3.11.0",
     "listr2": "^8.0.1",
     "lodash": "^4.17.21",
     "long": "^5.2.1",
@@ -103,6 +106,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.36.1",
+    "react-leaflet": "^4.2.1",
+    "react-leaflet-cluster": "^2.1.0",
     "react-native": "0.73.2",
     "react-native-confetti-cannon": "^1.5.2",
     "react-native-countdown-component": "^2.7.1",

diff --git a/packages/components/NetworkSelector/NetworkSelectorMenu.tsx b/packages/components/NetworkSelector/NetworkSelectorMenu.tsx
@@ -82,7 +82,7 @@ export const NetworkSelectorMenu: FC<{
       mainContainerStyle={[
         {
           paddingHorizontal: layout.spacing_x2,
-          paddingTop: layout.spacing_x2,
+          paddingVertical: layout.spacing_x2,
           backgroundColor: neutral17,
           alignItems: "flex-start",
         },

diff --git a/packages/components/boxes/Box.tsx b/packages/components/boxes/Box.tsx
@@ -53,6 +53,7 @@ export type BoxStyle = Pick<
   | "top"
   | "bottom"
   | "flex"
+  | "zIndex"
 > & { borderRadius?: number; backgroundColor?: string; borderColor?: string };
 
 export type GradientParams = Omit<LinearGradientProps, keyof ViewProps>;

diff --git a/packages/components/boxes/TertiaryBox.tsx b/packages/components/boxes/TertiaryBox.tsx
@@ -17,6 +17,8 @@ export const TertiaryBox: React.FC<{
         {
           borderWidth: 1,
           borderColor: neutral33,
+          justifyContent: "center",
+          alignItems: "center",
         },
         style,
       ]}

diff --git a/packages/components/modals/ModalBase.tsx b/packages/components/modals/ModalBase.tsx
@@ -39,6 +39,7 @@ type ModalBaseProps = {
   width?: number;
   visible?: boolean;
   Header?: ComponentType;
+  hideHeader?: boolean;
   childrenBottom?: JSX.Element | JSX.Element[];
   hideMainSeparator?: boolean;
   description?: string;
@@ -77,6 +78,7 @@ const ModalBase: React.FC<ModalBaseProps> = ({
   childrenBottom,
   children,
   Header,
+  hideHeader = false,
   hideMainSeparator,
   description,
   scrollable,
@@ -159,82 +161,88 @@ const ModalBase: React.FC<ModalBaseProps> = ({
           ]}
         >
           {/*------ Modal header */}
-          <View
-            style={{
-              flexDirection: "row",
-              justifyContent: "space-between",
-              width: "100%",
-              paddingHorizontal: modalMarginPadding,
-              paddingVertical: layout.spacing_x2,
-            }}
-          >
-            {!!(label || labelComponent || description) && (
-              <View
-                style={{ flex: 1, flexDirection: "row", alignItems: "center" }}
-              >
-                {onBackPress && (
-                  <TouchableOpacity
-                    activeOpacity={0.9}
-                    style={{
-                      height: 32,
-                      width: 32,
-                      backgroundColor: neutral22,
-                      borderRadius: 20,
-                      alignItems: "center",
-                      justifyContent: "center",
-                      marginRight: 12,
-                    }}
-                    onPress={onBackPress}
-                  >
-                    <SVG source={chevronLeft} height={12} width={12} />
-                  </TouchableOpacity>
-                )}
-
-                <View style={{ flex: 1, width: "100%" }}>
-                  {!!label && (
-                    <BrandText style={{ color: "white", lineHeight: 24 }}>
-                      {label}
-                    </BrandText>
+          {!hideHeader && (
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                width: "100%",
+                paddingHorizontal: modalMarginPadding,
+                paddingVertical: layout.spacing_x2,
+              }}
+            >
+              {(label || labelComponent || description) && (
+                <View
+                  style={{
+                    flex: 1,
+                    flexDirection: "row",
+                    alignItems: "center",
+                  }}
+                >
+                  {onBackPress && (
+                    <TouchableOpacity
+                      activeOpacity={0.9}
+                      style={{
+                        height: 32,
+                        width: 32,
+                        backgroundColor: neutral22,
+                        borderRadius: 20,
+                        alignItems: "center",
+                        justifyContent: "center",
+                        marginRight: 12,
+                      }}
+                      onPress={onBackPress}
+                    >
+                      <SVG source={chevronLeft} height={12} width={12} />
+                    </TouchableOpacity>
                   )}
 
-                  {labelComponent}
-
-                  {!!description && (
-                    <>
-                      <SpacerColumn size={1} />
-                      <BrandText
-                        style={[
-                          fontSemibold14,
-                          {
-                            color: neutral77,
-                            width: "100%",
-                            lineHeight: 20,
-                            flexWrap: "wrap",
-                          },
-                        ]}
-                      >
-                        {description}
+                  <View style={{ flex: 1, width: "100%" }}>
+                    {label && (
+                      <BrandText style={{ color: "white", lineHeight: 24 }}>
+                        {label}
                       </BrandText>
-                    </>
-                  )}
+                    )}
+
+                    {labelComponent}
+
+                    {description && (
+                      <>
+                        <SpacerColumn size={1} />
+                        <BrandText
+                          style={[
+                            fontSemibold14,
+                            {
+                              color: neutral77,
+                              width: "100%",
+                              lineHeight: 20,
+                              flexWrap: "wrap",
+                            },
+                          ]}
+                        >
+                          {description}
+                        </BrandText>
+                      </>
+                    )}
+                  </View>
                 </View>
-              </View>
-            )}
+              )}
 
-            {!!Header && <Header />}
+              {Header && <Header />}
 
-            <TouchableOpacity
-              containerStyle={[
-                { marginLeft: modalMarginPadding },
-                closeButtonStyle,
-              ]}
-              style={{ justifyContent: "center" }}
-              onPress={onClose}
-            >
-              <SVG width={32} height={32} source={closeSVG} />
-            </TouchableOpacity>
-          </View>
-          {!!children && (
+              <TouchableOpacity
+                containerStyle={[
+                  { marginLeft: modalMarginPadding },
+                  closeButtonStyle,
+                ]}
+                style={{ justifyContent: "center" }}
+                onPress={onClose}
+              >
+                <SVG width={32} height={32} source={closeSVG} />
+              </TouchableOpacity>
+            </View>
+          )}
+          {children && (
             <View
               style={[
                 { width: "100%", paddingHorizontal: modalMarginPadding },