fix: set the parcel coordinates for the browser (#255)

* fix: set the parcel coordinates for the browser before flying to a parcel

* fix: center the claim selection on click

* fix: center parcels from modal navigation and on click

components/Map.tsx

@@ -34,6 +34,8 @@ export const GW_MAX_LAT = 22;
 export const GW_MAX_LON = 23;
 const ZOOM_QUERY_LEVEL = 8;
 const QUERY_DIM = 1000;
+export const LON_OFFSET = 0.00062;
+export const LAT_OFFSET = 0.0001;
 
 export enum STATE {
   VIEWING = 0,
@@ -555,6 +557,11 @@ function Map(props: MapProps) {
     switch (interactionState) {
       case STATE.VIEWING:
         if (_checkParcelClick()) {
+          setViewport({
+            ...viewport,
+            longitude: event.lngLat.lng + LON_OFFSET,
+            latitude: event.lngLat.lat + LAT_OFFSET,
+          });
           return;
         }
 
@@ -563,8 +570,8 @@ function Map(props: MapProps) {
         setInteractionState(STATE.CLAIM_SELECTING);
 
         flyToLocation({
-          longitude: event.lngLat.lng,
-          latitude: event.lngLat.lat,
+          longitude: event.lngLat.lng + LON_OFFSET,
+          latitude: event.lngLat.lat + LAT_OFFSET,
           zoom: ZOOM_GRID_LEVEL + 1,
           duration: 500,
         });
@@ -646,6 +653,11 @@ function Map(props: MapProps) {
         zoom: ZOOM_GRID_LEVEL + 1,
         duration: 500,
       });
+
+      setSelectedParcelCoords({
+        x: portfolioParcelCoords.lon - LON_OFFSET,
+        y: portfolioParcelCoords.lat - LAT_OFFSET,
+      });
     }
   }, [portfolioParcelCoords]);
 

components/profile/ProfileModal.tsx

@@ -41,15 +41,12 @@ import {
 import { getETHBalance } from "../../lib/getBalance";
 import { truncateStr, truncateEth } from "../../lib/truncate";
 import { calculateBufferNeeded, calculateAuctionValue } from "../../lib/utils";
-import { STATE, GeoPoint } from "../Map";
+import { STATE, GeoPoint, LON_OFFSET, LAT_OFFSET } from "../Map";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(advancedFormat);
 
-export const LON_OFFSET = 0.00085;
-export const LAT_OFFSET = 0.0002;
-
 type ProfileModalProps = {
   accountTokenSnapshot: AccountTokenSnapshot;
   account: string;
@@ -89,6 +86,11 @@ interface PortfolioTotal {
   buffer: BigNumber;
 }
 
+interface GeoWebCoordinate {
+  pointTL: GeoPoint;
+  pointBR: GeoPoint;
+}
+
 enum SuperTokenAction {
   WRAP,
   UNWRAP,
@@ -133,6 +135,10 @@ const portfolioQuery = gql`
               lon
               lat
             }
+            pointBR {
+              lon
+              lat
+            }
           }
         }
       }
@@ -371,6 +377,26 @@ function ProfileModal(props: ProfileModalProps) {
               ? parcelContent.name
               : `Parcel ${parcelId}`;
 
+          const topLeftLon = findMinPoint(
+            coords,
+            "pointTL",
+            "lon"
+          );
+          const bottomRightLon = findMaxPoint(
+            coords,
+            "pointBR",
+            "lon"
+          );
+          const topLeftLat = findMaxPoint(
+            coords,
+            "pointTL",
+            "lat"
+          );
+          const bottomRightLat = findMinPoint(
+            coords,
+            "pointBR",
+            "lat"
+          );
           _portfolio.push({
             parcelId: parcelId,
             status: status,
@@ -381,8 +407,8 @@ function ProfileModal(props: ProfileModalProps) {
             buffer: buffer,
             action: action,
             coords: {
-              lon: Number(coords[0].pointTL.lon) + LON_OFFSET,
-              lat: Number(coords[0].pointTL.lat) + LAT_OFFSET,
+              lon: (topLeftLon + bottomRightLon) / 2 + LON_OFFSET,
+              lat: (topLeftLat + bottomRightLat) / 2 + LAT_OFFSET,
             },
           });
         });
@@ -565,6 +591,30 @@ function ProfileModal(props: ProfileModalProps) {
     }
   };
 
+  const findMinPoint = (
+    coords: GeoWebCoordinate[],
+    field: keyof GeoWebCoordinate,
+    unit: keyof GeoPoint
+  ): number => {
+    return Math.min(
+      ...coords.map((obj) => {
+        return Number(obj[field][unit]);
+      })
+    );
+  };
+
+  const findMaxPoint = (
+    coords: GeoWebCoordinate[],
+    field: keyof GeoWebCoordinate,
+    unit: keyof GeoPoint
+  ): number => {
+    return Math.max(
+      ...coords.map((obj) => {
+        return Number(obj[field][unit]);
+      })
+    );
+  };
+
   const calcTotal = (portfolio: Parcel[], field: keyof Parcel): BigNumber =>
     portfolio
       .map((parcel) => parcel[field] as BigNumber)