Update Profiles

packages/extension-polkagate/src/components/ProfileInput.tsx

@@ -20,14 +20,14 @@ interface Props {
 export default function ProfileInput({ disabled = false, placeHolder = '', setProfileName, profileName, helperText = '', label, style }: Props): React.ReactElement<Props> {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const profiles = useProfiles();
+  const { userDefinedProfiles } = useProfiles();
 
   const [isPopperOpen, setTogglePopper] = useState<boolean>(false);
   const [focus, setFocus] = useState<boolean>(false);
   const [enteredProfile, setEnteredProfile] = useState<string | undefined>();
   const [dropdownWidth, setDropdownWidth] = useState<string>('0');
 
-  const autocompleteOptions = useMemo(() => profiles?.userDefinedProfiles?.map((profile, index) => ({ index, profile })), [profiles?.userDefinedProfiles]);
+  const autocompleteOptions = useMemo(() => userDefinedProfiles.map((profile, index) => ({ index, profile })), [userDefinedProfiles, userDefinedProfiles.length]);
 
   useEffect(() => {
     profileName && setEnteredProfile(profileName);
@@ -54,8 +54,8 @@ export default function ProfileInput({ disabled = false, placeHolder = '', setPr
   }, [setProfileName]);
 
   const openPopper = useCallback(() =>
-    profiles?.userDefinedProfiles && profiles.userDefinedProfiles?.length > 0 && !enteredProfile && !isPopperOpen && setTogglePopper(true)
-    , [profiles?.userDefinedProfiles?.length, enteredProfile, isPopperOpen]);
+    userDefinedProfiles.length > 0 && !enteredProfile && !isPopperOpen && setTogglePopper(true)
+    , [userDefinedProfiles.length, enteredProfile, isPopperOpen]);
 
   const closePopper = useCallback(() =>
     setTogglePopper(false),

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileMenu.tsx

@@ -60,7 +60,7 @@ function ProfileMenu({ address, setUpperAnchorEl }: Props): React.ReactElement<P
 
   const onAction = useContext(ActionContext);
   const { account, chain } = useInfo(address);
-  const profiles = useProfiles();
+  const { userDefinedProfiles } = useProfiles();
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | HTMLDivElement | null>();
   const [showName, setShowName] = useState<boolean>();
@@ -132,8 +132,8 @@ function ProfileMenu({ address, setUpperAnchorEl }: Props): React.ReactElement<P
         />
       }
       <Divider sx={{ bgcolor: 'secondary.light', height: '1px', my: '7px' }} />
-      {profiles?.userDefinedProfiles?.length
-        ? profiles.userDefinedProfiles?.map((profile) => (
+      {userDefinedProfiles.length > 0
+        ? userDefinedProfiles.map((profile) => (
           <MenuItem
             iconComponent={
               <VaadinIcon icon='vaadin:folder-open-o' style={{ height: '20px', color: theme.palette.text.primary }} />

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileTabs.tsx

@@ -15,7 +15,7 @@ interface Props {
 export const HIDDEN_PERCENT = '50%';
 
 export default function ProfileTabs({ orderedAccounts }: Props): React.ReactElement {
-  const profiles = useProfiles();
+  const { defaultProfiles, userDefinedProfiles } = useProfiles();
 
   const [selectedProfile, setSelectedProfile] = useState<string>();
   const [isHovered, setIsHovered] = useState<boolean>();
@@ -25,12 +25,12 @@ export default function ProfileTabs({ orderedAccounts }: Props): React.ReactElem
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   const profilesToShow = useMemo(() => {
-    if (!profiles) {
-      return undefined;
+    if (defaultProfiles.length === 0 && userDefinedProfiles.length === 0) {
+      return [];
     }
 
-    return profiles.defaultProfiles.concat(profiles.userDefinedProfiles);
-  }, [profiles, profiles?.defaultProfiles.length, profiles?.userDefinedProfiles.length]);
+    return defaultProfiles.concat(userDefinedProfiles);
+  }, [defaultProfiles.length, userDefinedProfiles.length]);
 
   const onMouseEnter = useCallback(() => setIsHovered(true), []);
   const onMouseLeave = useCallback(() => setIsHovered(false), []);
@@ -46,7 +46,7 @@ export default function ProfileTabs({ orderedAccounts }: Props): React.ReactElem
   const handleWheel = (event: WheelEvent) => {
     if (scrollContainerRef.current) {
       event.preventDefault();
-      scrollContainerRef.current.scrollLeft += event.deltaY;
+      scrollContainerRef.current.scrollLeft += (event.deltaY || event.deltaX);
       handleScroll();
     }
   };
@@ -80,11 +80,11 @@ export default function ProfileTabs({ orderedAccounts }: Props): React.ReactElem
           overflowX: 'scroll',
           whiteSpace: 'nowrap'
         }}
-        ref={scrollContainerRef} 
+        ref={scrollContainerRef}
         xs
       >
         {
-          profilesToShow?.map((profile, index) => (
+          profilesToShow.map((profile, index) => (
             <ProfileTab
               selectedProfile={selectedProfile}
               setSelectedProfile={setSelectedProfile}

packages/extension-polkagate/src/hooks/useProfiles.ts

@@ -4,14 +4,20 @@
 import { useContext, useMemo } from 'react';
 import { AccountContext } from '../components';
 
-type Profiles = { userDefinedProfiles: string[]; defaultProfiles: string[]; } | undefined;
+type Profiles = {
+  userDefinedProfiles: string[];
+  defaultProfiles: string[];
+};
 
 export default function useProfiles(): Profiles {
   const { accounts } = useContext(AccountContext);
 
   return useMemo(() => {
-    if(!accounts){
-      return;
+    if (!accounts) {
+      return {
+        userDefinedProfiles: [],
+        defaultProfiles: []
+      };
     }
 
     // default profiles