connections map fix

package.json

@@ -38,7 +38,7 @@
     "@apollo/client": "^3.9.1",
     "@aut-labs/abi-types": "^0.0.75-dev",
     "@aut-labs/connector": "^0.0.93",
-    "@aut-labs/d-aut": "^1.0.158-dev",
+    "@aut-labs/d-aut": "^1.0.163-dev",
     "@aut-labs/sdk": "^0.0.160-dev",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",

src/App.tsx

@@ -1,6 +1,6 @@
-import { Suspense, useEffect, useState } from "react";
+import { Suspense, useEffect, useMemo, useState } from "react";
 import { Route, Routes, Navigate } from "react-router-dom";
-import { Box } from "@mui/material";
+import { Box, useMediaQuery, useTheme } from "@mui/material";
 import { useAppDispatch } from "@store/store.model";
 import { updateWalletProviderState } from "@store/WalletProvider/WalletProvider";
 import AutLoading from "@components/AutLoading";
@@ -20,6 +20,8 @@ function App() {
   const dispatch = useAppDispatch();
   const [appLoading, setAppLoading] = useState(true);
   const [isLoading, setLoading] = useState(false);
+  const theme = useTheme();
+  const mobile = useMediaQuery(theme.breakpoints.down("md"));
 
   useEffect(() => {
     getAppConfig()
@@ -40,6 +42,13 @@ function App() {
       .finally(() => setAppLoading(false));
   }, []);
 
+  const scrollHeight = useMemo(() => {
+    if (mobile) {
+      return `${window?.innerHeight}px`;
+    }
+    return "100%";
+  }, [mobile, window?.innerHeight]);
+
   return (
     <>
       {appLoading ? (
@@ -50,7 +59,7 @@ function App() {
           <SWSnackbar />
           <Box
             sx={{
-              height: "100vh"
+              height: scrollHeight
             }}
           >
             {isLoading ? (

src/MainBackground/index.tsx

@@ -8,8 +8,8 @@ const MainBackground = ({ dimensions, faces, setPopoverEl }: any) => {
   return (
     <svg
       style={{
-        width: "100vw",
-        height: "100vh",
+        width: "100%",
+        height: "100%",
         position: "fixed"
       }}
       viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}

src/api/ProviderFactory/web3-daut-connect.tsx

@@ -158,8 +158,6 @@ function Web3DautConnect({
       })
     );
 
-    console.log("autID: ", autID);
-
     navigate({
       pathname: `/${autID.name}`
     });
@@ -217,11 +215,11 @@ function Web3DautConnect({
   }
 
   useEffect(() => {
+    window.addEventListener("aut_profile", onAutMenuProfile);
+    window.addEventListener("aut-onDisconnected", onDisconnected);
     if (!dAutInitialized.current && multiSignerId) {
-      window.addEventListener("aut_profile", onAutMenuProfile);
       window.addEventListener("aut-Init", onAutInit);
       window.addEventListener("aut-onConnected", onAutLogin);
-      window.addEventListener("aut-onDisconnected", onDisconnected);
       dAutInitialized.current = true;
       const btnConfig = {
         metaMask: true,
@@ -243,8 +241,8 @@ function Web3DautConnect({
           type: "main"
         },
         size: {
-          width: 240,
-          height: 50,
+          width: 220,
+          height: 45,
           padding: 3
         }
       };
@@ -289,7 +287,7 @@ function Web3DautConnect({
         style={{
           display: "none",
           position: "absolute",
-          zIndex: 99999
+          zIndex: 999
         }}
         use-dev={environment.env == EnvMode.Development}
         id="d-aut"
@@ -333,8 +331,8 @@ export const DautPlaceholder = memo(() => {
     <div
       ref={ref}
       style={{
-        width: "244px",
-        height: "55px",
+        width: "220px",
+        height: "45px",
         position: "relative",
         zIndex: -1
       }}

src/api/aut.api.ts

@@ -23,7 +23,6 @@ export const useAuthenticatedApi = () => {
   useEffect(() => {
     const handleStorageChange = () => {
       const jwt = localStorage.getItem("interactions-api-jwt");
-      debugger;
       setjwt(jwt);
     };
 

src/api/aut.model.ts

@@ -98,9 +98,12 @@ export class AutIDProperties {
       this.avatar = data.avatar;
       this.address = data.address;
       this.tokenId = data.tokenId;
-      this.communities = (data.communities || []).map(
-        (community) => new Community(community)
-      );
+      this.communities = (data.communities || []).map((community) => {
+        if (community instanceof Community) {
+          return community;
+        }
+        return new Community(community);
+      });
       this.ethDomain = data.ethDomain;
       this.socials = data.socials?.length ? data.socials : DefaultSocials;
       this.socials = this.socials.filter((s) => s.type !== "eth");

src/api/community.model.ts

@@ -6,16 +6,29 @@ import { RoleSet, NovaProperties, Role } from "@aut-labs/sdk/dist/models/nova";
 
 export const MarketTemplates = [
   {
-    title: "Open-Source & DeFi",
+    title: "Open-Source & Infra",
     market: 1
+    // icon: OpenSource
   },
   {
-    title: "Art, Events & NFTs",
+    title: "DeFi & Payments",
     market: 2
+    // icon: Defi
   },
   {
-    title: "Local Projects & DAOs",
+    title: "ReFi & Governance",
     market: 3
+    // icon: Refi
+  },
+  {
+    title: "Social, Art & Gaming",
+    market: 4
+    // icon: Social
+  },
+  {
+    title: "Identity & Reputation",
+    market: 5
+    // icon: Identity
   }
 ];
 

src/api/holder.api.ts

@@ -171,7 +171,7 @@ export const fetchHolder = createAsyncThunk(
         properties: {
           ...novaMetadata.properties,
           address: novaAddress,
-          market: novaDAO.market,
+          market: +novaDAO.market - 1,
           userData: {
             role: autID.role.toString(),
             commitment: autID.commitment.toString(),
@@ -199,6 +199,7 @@ export const fetchHolder = createAsyncThunk(
       image: autIdMetadata.image,
       description: autIdMetadata.description,
       properties: {
+        ...autIdMetadata.properties,
         avatar,
         thumbnailAvatar,
         timestamp,
@@ -294,13 +295,13 @@ export const updateProfile = createAsyncThunk(
     console.log("avatar: ->", ipfsCIDToHttpUrl(updatedUser.properties.avatar));
     console.log("badge: ->", ipfsCIDToHttpUrl(updatedUser.image));
     const response = await sdk.autID.contract.setMetadataUri(uri);
-    debugger;
     try {
       const autIdData = JSON.parse(window.localStorage.getItem("aut-data"));
       autIdData.name = updatedUser.name;
       autIdData.description = updatedUser.description;
       autIdData.properties.avatar = updatedUser.properties.avatar;
       autIdData.properties.socials = updatedUser.properties.socials;
+      autIdData.properties.bio = updatedUser.properties.bio;
       window.localStorage.setItem("aut-data", JSON.stringify(autIdData));
     } catch (err) {
       console.log(err);

src/components/AutChangeCommitment.tsx

@@ -86,7 +86,6 @@ export function AutChangeCommitmentDialog(props: CommitmentDialogProps) {
       })
     );
     if (result.meta.requestStatus === "fulfilled") {
-      console.log("changed", result);
       props.onClose();
     }
   };

src/components/AutEditProfileDialog.tsx

@@ -142,10 +142,10 @@ const FormWrapper = styled("form")(({ theme }) => ({
     alignContent: "center"
   },
   [theme.breakpoints.down("md")]: {
-    width: `calc(100% - 100px)`
+    width: `100%`
   },
   [theme.breakpoints.down("sm")]: {
-    width: `calc(100% - 20px)`
+    width: `100%`
   }
 }));
 
@@ -260,7 +260,7 @@ export function AutEditProfileDialog(props: EditDialogProps) {
       >
         <PerfectScrollbar
           style={{
-            height: "calc(100%)",
+            height: "100%",
             display: "flex",
             flexDirection: "column",
             width: "100%"

src/components/AutInteractionsDialog.tsx

@@ -107,8 +107,6 @@ export function useBackendJwt() {
         domain: "localhost:5001"
       };
       const signature = await signer.signMessage(JSON.stringify(message));
-      console.log("signature: ", signature);
-      console.log(JSON.stringify(message));
 
       const response = await axios.post(
         `${environment.interactionsApiUrl}/auth/token`,

src/components/AutOsTabs.tsx

@@ -38,7 +38,10 @@ function TabPanel(props: any) {
           sx={{
             position: "relative",
             borderColor: "divider",
-            height: "100%",
+            height: {
+              xs: "calc(100% - 30px)",
+              sm: "calc(100% - 20px)"
+            },
             minHeight: "400px",
             marginBottom: {
               xs: "30px",

src/components/EditContentElements.tsx

@@ -40,13 +40,13 @@ const FormWrapper = styled("form")(({ theme }) => ({
     alignContent: "center"
   },
   [theme.breakpoints.down("md")]: {
-    width: `calc(100% - 100px)`
+    width: `100%`
   },
   [theme.breakpoints.down("sm")]: {
     paddingTop: "30px",
     paddingLeft: "10px",
     paddingRight: "10px",
-    width: `calc(100% - 20px)`
+    width: `100%`
   }
 }));
 
@@ -67,13 +67,13 @@ const ContentWrapper = styled("div")(({ theme }) => ({
     alignContent: "center"
   },
   [theme.breakpoints.down("md")]: {
-    width: `calc(100% - 100px)`
+    width: `100%`
   },
   [theme.breakpoints.down("sm")]: {
     paddingTop: "30px",
     paddingLeft: "10px",
     paddingRight: "10px",
-    width: `calc(100% - 20px)`
+    width: `100%`
   }
 }));
 

src/components/FollowPopover.tsx

@@ -99,6 +99,13 @@ export const FollowPopover = ({
           fontWeight="900"
           variant="subtitle1"
           color="white"
+          sx={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            maxWidth: "80%",
+            display: "block"
+          }}
         >
           {data?.name || data?.username || "Name"}
         </Typography>

src/components/InteractionMap/index.tsx

@@ -393,7 +393,7 @@ function InteractionMap({
                                 mr: 0.5
                               }}
                             />
-                            Market: {novaInfo?.market || "N/A"}
+                            Market: {novaInfo?.properties?.market || "N/A"}
                           </Typography>
                           <Typography
                             sx={{

src/components/InteractionMap/misc/map-utils.ts

@@ -88,8 +88,6 @@ function generateLinks(
       is: calculateIS(node, centralNode, centralNode)
     }));
 
-  console.log(centralNode, nodes);
-
   const interNodeLinks: LinkObject<MapNode, MapLink>[] = [];
   for (let i = 0; i < nodes.length; i++) {
     for (let j = i + 1; j < nodes.length; j++) {

src/components/InteractionMap/misc/pl-generator.ts

@@ -1,4 +1,10 @@
 import { MapAutID, MapNova } from "@api/map.model";
+import { NodeObject } from "react-force-graph-2d";
+import {
+  CENTRAL_NODE_SIZE,
+  NODE_PADDING,
+  NODE_BORDER_WIDTH
+} from "./map-constants";
 
 const PROXIMITY_LEVEL_DETAILS = [
   {
@@ -107,35 +113,34 @@ export const getProximityLevels = (
       description: PROXIMITY_LEVEL_DETAILS[3]?.description
     }
   ];
-  plArrays = plArrays.filter((plArray) => plArray.members.length > 0); // Filter out empty levels
-  const numberOfLevels = plArrays.length;
-
-  let [minRadius, maxRadius] = [80, 260];
-  switch (numberOfLevels) {
-    case 1:
-      [minRadius, maxRadius] = [120, 120];
-      break;
-    case 2:
-      [minRadius, maxRadius] = [120, 180];
-      break;
-    case 3:
-      [minRadius, maxRadius] = [80, 200];
-      break;
-  }
-
-  const incrementStep =
-    numberOfLevels > 1 ? (maxRadius - minRadius) / (numberOfLevels - 1) : 0;
-
-  const plValues = plArrays.map((plConfig, index) => ({
-    level: index + 1,
-    radius: minRadius + incrementStep * index,
-    ...plConfig
-  }));
-
+  plArrays = plArrays.filter((plArray) => plArray.members.length > 0);
+  const totalMembers = plArrays.reduce(
+    (sum, plArray) => sum + plArray.members.length,
+    0
+  );
+  const nodeDiameter =
+    CENTRAL_NODE_SIZE + 2 * NODE_PADDING + 2 * NODE_BORDER_WIDTH;
+  const minRadius = nodeDiameter;
+  const plValues = plArrays.map((plConfig, index) => {
+    const levelMemberCount = plConfig.members.length;
+    const inverseProportion = (totalMembers || 1) / (levelMemberCount || 1);
+    const dynamicRadius = minRadius + inverseProportion * nodeDiameter;
+    return {
+      level: index + 1,
+      radius: Number(dynamicRadius.toFixed(0)),
+      ...plConfig
+    };
+  });
+  const baseSpacing = nodeDiameter * 2.5;
+  plValues.forEach((plConfig, index) => {
+    if (index > 0) {
+      plConfig.radius += index * baseSpacing;
+    }
+  });
   return { proximityLevels: plValues, centralAutId };
 };
 
-export function calculatePLCircleCentersAndRadii(nodes) {
+export function calculatePLCircleCentersAndRadii(nodes: NodeObject<any>[]) {
   const circles = {};
 
   nodes.forEach((node) => {