feat: show map modal before send post

TERITORI · Feb 26, 2024 · d2874f4 · d2874f4
1 parent cb267e3
commit d2874f4
Show file tree

Hide file tree

Showing 13 changed files with 1,534 additions and 1,374 deletions.
diff --git a/package.json b/package.json
@@ -66,6 +66,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",
@@ -99,6 +100,7 @@
     "html-to-draftjs": "^1.5.0",
     "immutable": "^4.0.0",
     "kubernetes-models": "^4.3.1",
+    "leaflet": "^1.9.4",
     "listr2": "^8.0.1",
     "lodash": "^4.17.21",
     "long": "^5.2.1",
@@ -112,6 +114,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.50.1",
+    "react-leaflet": "^4.2.1",
     "react-native": "0.73.4",
     "react-native-click-outside": "^0.1.1",
     "react-native-confetti-cannon": "^1.5.2",
@@ -123,6 +126,7 @@
     "react-native-heroicons": "^3.2.0",
     "react-native-image-picker": "^7.1.0",
     "react-native-keyboard-aware-scrollview": "^2.1.0",
+    "react-native-leaflet-view": "^0.1.2",
     "react-native-paper": "^4.12.5",
     "react-native-pell-rich-editor": "^1.8.8",
     "react-native-pie-chart": "^3.0.1",

diff --git a/packages/components/NetworkSelector/NetworkSelectorMenu.tsx b/packages/components/NetworkSelector/NetworkSelectorMenu.tsx
@@ -89,7 +89,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
@@ -32,14 +32,15 @@ import { useAppNavigation } from "@/hooks/navigation/useAppNavigation";
 
 // TODO: Simplify this component (Useless childrenBottom ?. Better to let the parent totally decides which children to use ? Used in WalletManager.tsx, be careful !)
 
-type ModalBaseProps = {
+export type ModalBaseProps = {
   label?: string;
   labelComponent?: ReactNode;
   onClose?: () => void;
   onBackPress?: () => void;
   width?: number;
   visible?: boolean;
   Header?: ComponentType;
+  hideHeader?: boolean;
   childrenBottom?: JSX.Element | JSX.Element[];
   hideMainSeparator?: boolean;
   description?: string;
@@ -78,6 +79,7 @@ const ModalBase: React.FC<ModalBaseProps> = ({
   childrenBottom,
   children,
   Header,
+  hideHeader = false,
   hideMainSeparator,
   description,
   scrollable,
@@ -160,81 +162,87 @@ 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_x1_5,
+              }}
+            >
+              {(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>
+              <TouchableOpacity
+                containerStyle={[
+                  { marginLeft: modalMarginPadding },
+                  closeButtonStyle,
+                ]}
+                style={{ justifyContent: "center" }}
+                onPress={onClose}
+              >
+                <SVG width={32} height={32} source={closeSVG} />
+              </TouchableOpacity>
+            </View>
+          )}
           {!!children && (
             <View
               style={[

diff --git a/packages/components/modals/ModalWithoutHeader.tsx b/packages/components/modals/ModalWithoutHeader.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+import ModalBase, { ModalBaseProps } from "./ModalBase";
+
+interface ModalWithoutHeaderProps extends ModalBaseProps {}
+
+export const ModalWithoutHeader: React.FC<ModalWithoutHeaderProps> = ({
+  ...props
+}) => <ModalBase hideHeader {...props} />;