Merge pull request #936 from singnet/package-updating

Package updating
singnet · Aug 15, 2024 · d8aa8c6 · d8aa8c6
2 parents 84933a3 + 057a9ca
commit d8aa8c6
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 80 deletions.
diff --git a/src/App.js b/src/App.js
@@ -57,7 +57,7 @@ const App = () => {
 
   useEffect(() => {
     dispatch(userActions.fetchUserDetails());
-  }, []);
+  }, [dispatch]);
 
   if (!isInitialized) {
     return (

diff --git a/src/components/ServiceDetails/ProjectDetails/index.js b/src/components/ServiceDetails/ProjectDetails/index.js
@@ -27,8 +27,8 @@ const ProjectDetails = ({ classes, projectURL, contributors, orgId, serviceId })
           <Grid item sm={5} xs={12}>
             <h5>{dataRow.label}</h5>
           </Grid>
-          <Grid item sm={7} xs={12}>
-            {dataRow.value}
+          <Grid item sm={7} xs={12} className={classes.projectDetailsValue}>
+            <span>{dataRow.value}</span>
           </Grid>
         </Grid>
       ))}

diff --git a/src/components/ServiceDetails/ProjectDetails/styles.js b/src/components/ServiceDetails/ProjectDetails/styles.js
@@ -11,6 +11,31 @@ export const useStyles = (theme) => ({
       lineHeight: "22px",
     },
   },
+  projectDetailsValue: {
+    width: "100%",
+    textAlign: "left",
+    position: "relative",
+    height: "1rem",
+    "& span": {
+      width: "100%",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      display: "-webkit-box",
+      height: "min-content",
+      "-webkit-line-clamp": 1,
+      "-webkit-box-orient": "vertical",
+      transition: "all 0.1s",
+      overflowWrap: "break-word",
+    },
+    "& span:hover": {
+      height: "min-content",
+      background: "white",
+      paddingBottom: 5,
+      "-webkit-line-clamp": 10,
+      borderRadius: 5,
+      transition: "all 0.1s",
+    },
+  },
   projectURLContainer: {
     "& > div": {
       display: "flex",

diff --git a/src/components/ServiceDetails/TitleCard/styles.js b/src/components/ServiceDetails/TitleCard/styles.js
@@ -89,9 +89,6 @@ export const useStyles = (theme) => ({
       margin: "0 auto",
     },
   },
-  serviceLightBox: {
-    position: "relative",
-  },
   serviceImgContainer: {
     boxSizing: "border-box",
     width: 1045,

diff --git a/src/components/UserProfile/UserProfileAccount/index.js b/src/components/UserProfile/UserProfileAccount/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import Grid from "@mui/material/Grid";
 import { withStyles } from "@mui/styles";
@@ -36,18 +36,21 @@ const UserProfileAccount = ({ classes }) => {
     return { value: address, label: `${type} (${address})`, address, type };
   };
 
-  const getWallets = async (currentAddress) => {
-    const availableWallets = await dispatch(fetchAvailableUserWallets());
-    let currentWallet = availableWallets.find(({ address }) => address === currentAddress);
-    const enhancedWallets = availableWallets.map(({ address, type }) => parseWallet(address, type));
-    if (!currentWallet) {
-      currentWallet = parseWallet(currentAddress, walletTypes.METAMASK);
-      enhancedWallets.push(currentWallet);
-    }
-    setSelectedWallet(parseWallet(currentWallet.address, currentWallet.type));
-    dispatch(userActions.updateWallet(currentWallet));
-    return enhancedWallets;
-  };
+  const getWallets = useCallback(
+    async (currentAddress) => {
+      const availableWallets = await dispatch(fetchAvailableUserWallets());
+      let currentWallet = availableWallets.find(({ address }) => address === currentAddress);
+      const enhancedWallets = availableWallets.map(({ address, type }) => parseWallet(address, type));
+      if (!currentWallet) {
+        currentWallet = parseWallet(currentAddress, walletTypes.METAMASK);
+        enhancedWallets.push(currentWallet);
+      }
+      setSelectedWallet(parseWallet(currentWallet.address, currentWallet.type));
+      dispatch(userActions.updateWallet(currentWallet));
+      return enhancedWallets;
+    },
+    [dispatch]
+  );
 
   useEffect(() => {
     const fetchWallets = async () => {
@@ -66,7 +69,8 @@ const UserProfileAccount = ({ classes }) => {
       }
     };
     fetchWallets();
-  }, [dispatch]);
+    // eslint
+  }, [dispatch, getWallets]);
 
   useEffect(() => {
     const getProviders = async () => {
@@ -81,7 +85,7 @@ const UserProfileAccount = ({ classes }) => {
     };
 
     getProviders();
-  }, [selectedWallet]);
+  }, [selectedWallet, dispatch]);
 
   const isSameMetaMaskAddress = (address) => {
     if (currentAddress && address) {
@@ -90,9 +94,8 @@ const UserProfileAccount = ({ classes }) => {
     return false;
   };
 
-  const handleWalletTypeChange = async (event) => {
+  const handleWalletTypeChange = (event) => {
     setAlert({});
-
     const { value: selectedValue } = event.target;
     const selectedWallet = wallets.find(({ value }) => selectedValue === value);
     setSelectedWallet(selectedWallet);

diff --git a/src/components/UserProfile/index.js b/src/components/UserProfile/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { withStyles } from "@mui/styles";
 import AppBar from "@mui/material/AppBar";
 import Tabs from "@mui/material/Tabs";
@@ -21,46 +21,55 @@ export const userProfileRoutes = {
   // MODELS: { path: `/${Routes.USER_PROFILE}/models`, component: () => <UserProfileModels /> },
 };
 
-const tabs = {
-  account: {
-    name: "Account",
-    index: 0,
-    path: userProfileRoutes.ACCOUNT,
-    component: <UserProfileAccount />,
-  },
-  settings: {
-    name: "Settings",
-    index: 1,
-    path: userProfileRoutes.SETTINGS,
-    component: <UserProfileSettings />,
-  },
-  transactions: {
-    name: "Transactions",
-    index: 2,
-    path: userProfileRoutes.TRANSACTIONS,
-    component: <UserProfileTransactionHistory />,
-  },
-};
+const UserProfile = ({ classes, nickname, email }) => {
+  const tabs = useMemo(
+    () => ({
+      account: {
+        name: "Account",
+        index: 0,
+        path: userProfileRoutes.ACCOUNT,
+        component: <UserProfileAccount />,
+      },
+      settings: {
+        name: "Settings",
+        index: 1,
+        path: userProfileRoutes.SETTINGS,
+        component: <UserProfileSettings />,
+      },
+      transactions: {
+        name: "Transactions",
+        index: 2,
+        path: userProfileRoutes.TRANSACTIONS,
+        component: <UserProfileTransactionHistory />,
+      },
+    }),
+    []
+  );
 
-const tabByPath = {
-  [`${tabs.account.path}`]: "account",
-  [`${tabs.settings.path}`]: "settings",
-  [`${tabs.transactions.path}`]: "transactions",
-};
+  const tabByPath = useMemo(
+    () => ({
+      [`${tabs.account.path}`]: "account",
+      [`${tabs.settings.path}`]: "settings",
+      [`${tabs.transactions.path}`]: "transactions",
+    }),
+    [tabs]
+  );
 
-const UserProfile = ({ classes, nickname, email }) => {
   const navigate = useNavigate();
   const location = useLocation();
   const [activeTab, setActiveTab] = useState(tabs.account);
 
-  const selectTab = (tab) => {
-    setActiveTab(tab);
-    navigate(tab.path);
-  };
+  const selectTab = useCallback(
+    (tab) => {
+      setActiveTab(tab);
+      navigate(tab.path);
+    },
+    [navigate]
+  );
 
   useEffect(() => {
     selectTab(tabs[tabByPath[`${location.pathname.toLowerCase()}`]]);
-  }, [location]);
+  }, [location.pathname, tabs, tabByPath, selectTab]);
 
   return (
     <div className={classes.UserProfileContainer}>

diff --git a/src/components/common/AppLoader/index.js b/src/components/common/AppLoader/index.js
@@ -15,7 +15,7 @@ export const AppLoader = ({ loading, loaderHeader, loaderText }) => {
   const classes = useStyles();
 
   return (
-    <Modal disableBackdropClick open={loading}>
+    <Modal open={loading}>
       <Card className={classes.card}>
         <CardHeader title={<h2>{loaderHeader}</h2>} />
         <Divider />

diff --git a/src/components/common/Header/NavItem.js b/src/components/common/Header/NavItem.js
@@ -1,33 +1,13 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
-
 import { useStyles } from "./styles";
-import Routes from "../../../utility/constants/Routes";
 
 const NavItem = ({ title, link }) => {
   const classes = useStyles();
-  const isActive = (unused, { pathname }) => {
-    switch (link) {
-      case `/${Routes.AI_MARKETPLACE}`: {
-        if (pathname === "/" || pathname.includes(Routes.AI_MARKETPLACE)) {
-          return true;
-        }
-        return false;
-      }
-
-      default: {
-        return pathname === link;
-      }
-    }
-  };
 
   return (
     <li className={classes.navLinks}>
-      <NavLink
-        to={link || "#"}
-        // className={(isActive) => classes.navLinksAnchor + (isActive ? " activated" : classes.activeTab)} TODO
-        isActive={isActive}
-      >
+      <NavLink to={link || "#"} className={classes.navLinksAnchor}>
         {title}
       </NavLink>
     </li>

diff --git a/src/components/common/SeoMetadata.js b/src/components/common/SeoMetadata.js
@@ -13,7 +13,6 @@ const SeoMetadata = (props) => {
         .slice(0, totalKeywordsAllowed)
         .join(",")
     : undefined;
-  console.log("keywordsCommaDelimitedString", keywordsCommaDelimitedString);
   return (
     <Fragment>
       <Helmet>

diff --git a/src/components/common/StyledDropdown/index.js b/src/components/common/StyledDropdown/index.js
@@ -20,6 +20,7 @@ const StyledDropdown = ({ labelTxt, name, list, value, onChange, formControlProp
         value={value || ""}
         onChange={onChange}
         name={name}
+        MenuProps={{ disableScrollLock: true }}
         variant="outlined"
         disabled={disabled}
         className={classes.selectEmpty}

diff --git a/src/components/common/StyledMenu/index.js b/src/components/common/StyledMenu/index.js
@@ -25,7 +25,13 @@ const StyledMenu = ({ classes, label, list }) => {
         <Button className={classes.button}>{label}</Button>
         <CaretIcon />
       </div>
-      <Menu anchorEl={anchorEl} id="simple-menu" open={Boolean(anchorEl)} onClose={handleClose}>
+      <Menu
+        anchorEl={anchorEl}
+        id="simple-menu"
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+        disableScrollLock={true}
+      >
         {list.map((item) => (
           <MenuItem key={item.label} className={classes.menuItem}>
             <AnchorLink label={item.label} href={item.link} newTab={item.newTab} />

diff --git a/src/utility/sdk.js b/src/utility/sdk.js
@@ -15,7 +15,7 @@ const DEFAULT_GAS_LIMIT = 210000;
 const ON_ACCOUNT_CHANGE = "accountsChanged";
 const ON_NETWORK_CHANGE = "chainChanged";
 
-const EXPECTED_ID_ETHEREUM_NETWORK = process.env.REACT_APP_ETH_NETWORK;
+const EXPECTED_ID_ETHEREUM_NETWORK = Number(process.env.REACT_APP_ETH_NETWORK);
 
 let sdk;
 let channel;