fix: APP-582 User dropdown and "my orders" using Wallet Connect

tailwind.common.js

@@ -92,6 +92,8 @@ module.exports = {
           'linear-gradient(179deg, rgba(var(--sc-tag-prefinance-600) / 1) 19.77%, rgba(var(--sc-tag-prefinance-500) / 1) 114.05%, rgba(var(--sc-tag-prefinance-400) / 1) 200.67%)',
         'credit-category':
           'linear-gradient(202deg, rgba(var(--sc-tag-credit-category-300) / 1) 14.67%, rgba(var(--sc-tag-credit-category-500) / 1) 97.14%)',
+        'orange-gradient':
+          'linear-gradient(102deg, rgba(var(--bc-orange-100) / 1) 5.13%, rgba(var(--bc-orange-200) / 1) 98.63%)',
       },
       boxShadow: {
         sm: '0px 4px 10px 0px rgba(0, 0, 0, 0.05)',

web-marketplace/src/clients/regen/Regen.Routes.tsx

@@ -340,7 +340,7 @@ export const getRegenRoutes = ({
         <Route path="*" element={<NotFoundPage />} />
       </Route>
       <Route path="dashboard">
-        <Route path="admin" element={<AuthRoute component={ProfileEdit} />}>
+        <Route path="admin" element={<ProfileEdit />}>
           <Route
             path="profile"
             element={<AuthRoute component={ProfileEditMain} />}
@@ -349,7 +349,7 @@ export const getRegenRoutes = ({
             path="settings"
             element={<AuthRoute component={ProfileEditSettings} />}
           />
-          <Route path="my-orders" element={<AuthRoute component={Orders} />} />
+          <Route path="my-orders" element={<Orders />} />
         </Route>
       </Route>
       <Route path="connect-wallet" element={<ConnectWalletPage />} />

web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.ListItem.tsx

@@ -0,0 +1,56 @@
+import { useLingui } from '@lingui/react';
+import {
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material';
+
+import { cn } from 'web-components/src/utils/styles/cn';
+
+import { AdminNavigationItem } from './AdminNavigation.types';
+import { isSelected } from './AdminNavigation.utils';
+
+type AdminNavigationListItemProps = {
+  onNavItemClick: (sectionName: string) => void;
+  currentPath: string;
+  item: AdminNavigationItem;
+};
+export const AdminNavigationListItem = ({
+  onNavItemClick,
+  currentPath,
+  item,
+}: AdminNavigationListItemProps) => {
+  const { _ } = useLingui();
+
+  return (
+    <ListItem disablePadding className="pb-1">
+      <ListItemButton
+        disableRipple
+        className={cn(
+          'flex p-2',
+          item.disabled
+            ? 'text-bc-neutral-400 cursor-default'
+            : 'cursor-pointer',
+        )}
+        onClick={() => {
+          if (!item.disabled) onNavItemClick(item.path);
+        }}
+        selected={isSelected(item.path, currentPath)}
+        sx={theme => ({
+          '&.Mui-selected, &.Mui-selected:hover': {
+            backgroundColor: theme.palette.info.light,
+            borderRadius: '5px',
+          },
+          '&:hover': {
+            backgroundColor: theme.palette.info.light,
+            borderRadius: '5px',
+          },
+        })}
+      >
+        <ListItemIcon className="min-w-[40px]">{item.icon}</ListItemIcon>
+        <ListItemText className="w-full">{_(item.name)}</ListItemText>
+      </ListItemButton>
+    </ListItem>
+  );
+};

web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.tsx

@@ -1,15 +1,11 @@
+import { Fragment } from 'react';
 import { useLingui } from '@lingui/react';
-import {
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  ListSubheader,
-} from '@mui/material';
+import { List, ListSubheader } from '@mui/material';
 
+import InfoTooltip from 'web-components/src/components/tooltip/InfoTooltip';
+
+import { AdminNavigationListItem } from './AdminNavigation.ListItem';
 import { AdminNavigationSection } from './AdminNavigation.types';
-import { isSelected } from './AdminNavigation.utils';
 
 export type AdminNavigationProps = {
   className?: string;
@@ -45,7 +41,7 @@ export const AdminNavigation = ({
           subheader={
             <ListSubheader
               id={`${_(section.heading).toLowerCase()}-list-subheader`}
-              className="bg-transparent text-gray-700 uppercase font-extrabold tracking-wider font-muli"
+              className="bg-transparent text-bc-neutral-400 uppercase font-extrabold tracking-wider font-muli"
               component="div"
               disableSticky
             >
@@ -55,29 +51,25 @@ export const AdminNavigation = ({
           className="mb-15"
         >
           {section.items.map(item => (
-            <ListItem key={_(item.name)} disablePadding className="pb-1">
-              <ListItemButton
-                disableRipple
-                className="flex p-2 cursor-pointer"
-                onClick={() => onNavItemClick(item.path)}
-                selected={isSelected(item.path, currentPath)}
-                sx={theme => ({
-                  '&.Mui-selected, &.Mui-selected:hover': {
-                    backgroundColor: theme.palette.info.light,
-                    borderRadius: '5px',
-                  },
-                  '&:hover': {
-                    backgroundColor: theme.palette.info.light,
-                    borderRadius: '5px',
-                  },
-                })}
-              >
-                <ListItemIcon className="min-w-[40px]">
-                  {item.icon}
-                </ListItemIcon>
-                <ListItemText className="w-full">{_(item.name)}</ListItemText>
-              </ListItemButton>
-            </ListItem>
+            <Fragment key={item.name}>
+              {item.disabled ? (
+                <InfoTooltip title={item.disabledTooltipText} arrow>
+                  <div>
+                    <AdminNavigationListItem
+                      onNavItemClick={onNavItemClick}
+                      currentPath={currentPath}
+                      item={item}
+                    />
+                  </div>
+                </InfoTooltip>
+              ) : (
+                <AdminNavigationListItem
+                  onNavItemClick={onNavItemClick}
+                  currentPath={currentPath}
+                  item={item}
+                />
+              )}
+            </Fragment>
           ))}
         </List>
       ))}

web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.types.ts

@@ -3,8 +3,10 @@ export type AdminNavigationSection = {
   items: AdminNavigationItem[];
 };
 
-type AdminNavigationItem = {
+export type AdminNavigationItem = {
   name: string;
   icon: JSX.Element;
   path: string;
+  disabledTooltipText?: string | undefined;
+  disabled?: boolean | undefined;
 };

web-marketplace/src/components/organisms/AdminNavigation/AdminNavigation.utils.tsx

@@ -8,33 +8,44 @@ import { ShoppingBagIcon } from 'web-components/src/components/icons/ShoppingBag
 // import { PrefinanceIcon } from 'web-components/src/components/icons/PrefinanceIcon';
 import { UserMenuIcon } from 'web-components/src/components/icons/UserMenuIcon';
 
-import { AdminNavigationSection } from './AdminNavigation.types';
+import { NOT_SUPPORTED_TOOLTIP_TEXT } from 'pages/Dashboard/MyProjects/MyProjects.constants';
+
+import {
+  AdminNavigationItem,
+  AdminNavigationSection,
+} from './AdminNavigation.types';
 
 export const getAdminNavigationSections = ({
   showOrders,
+  loginDisabled,
 }: {
   showOrders?: boolean;
+  loginDisabled?: boolean;
 }): AdminNavigationSection[] => {
   const sections = [
     {
       heading: i18n._(msg`Profile`),
       items: [
         {
           name: i18n._(msg`Edit profile`),
-          icon: <UserMenuIcon linearGradient />,
+          icon: <UserMenuIcon linearGradient disabled={loginDisabled} />,
           path: 'profile',
+          disabled: loginDisabled,
+          disabledTooltipText: i18n._(NOT_SUPPORTED_TOOLTIP_TEXT),
         },
         {
           name: i18n._(msg`Settings`),
-          icon: <CogIcon linearGradient />,
+          icon: <CogIcon linearGradient disabled={loginDisabled} />,
           path: 'settings',
+          disabled: loginDisabled,
+          disabledTooltipText: i18n._(NOT_SUPPORTED_TOOLTIP_TEXT),
         },
         // {
         //   name: i18n._(msg`Email updates`),
         //   icon: <EnvelopeIcon linearGradient />,
         //   path: 'email-updates',
         // },
-      ],
+      ] as AdminNavigationItem[],
     },
   ];
 

web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.Header.tsx

@@ -17,7 +17,6 @@ import { useWallet } from 'lib/wallet/wallet';
 
 import { getWalletAddress } from 'pages/Dashboard/Dashboard.utils';
 import { useProfileItems } from 'pages/Dashboard/hooks/useProfileItems';
-import { DEFAULT_NAME } from 'pages/ProfileEdit/ProfileEdit.constants';
 import { getDefaultAvatar } from 'pages/ProfileEdit/ProfileEdit.utils';
 import { useAuthData } from 'hooks/useAuthData';
 
@@ -40,14 +39,15 @@ import {
   LOGOUT_TEXT,
 } from './RegistryLayout.constants';
 // import { LanguageSwitcher } from './RegistryLayout.LanguageSwitcher';
-import { getAddress } from './RegistryLayout.utils';
+import { getAddress, getProfile } from './RegistryLayout.utils';
 
 const RegistryLayoutHeader: React.FC = () => {
   const { _ } = useLingui();
   const { pathname } = useLocation();
   const { activeAccount, privActiveAccount } = useAuth();
 
-  const { wallet, disconnect, isConnected, loginDisabled } = useWallet();
+  const { wallet, disconnect, isConnected, loginDisabled, accountByAddr } =
+    useWallet();
   const { accountOrWallet, noAccountAndNoWallet } = useAuthData();
   const theme = useTheme<Theme>();
   const headerColors = useMemo(() => getHeaderColors(theme), [theme]);
@@ -83,20 +83,11 @@ const RegistryLayoutHeader: React.FC = () => {
         onProfileClick,
         savedPaymentInfo,
         showOrders,
-        profile: activeAccount
-          ? {
-              id: activeAccount.id,
-              name: activeAccount.name ? activeAccount.name : _(DEFAULT_NAME),
-              profileImage: activeAccount.image
-                ? activeAccount.image
-                : getDefaultAvatar(activeAccount),
-              address: getAddress({
-                walletAddress: activeAccount.addr,
-                email: privActiveAccount?.email,
-              }),
-              selected: true,
-            }
-          : undefined,
+        profile: getProfile({
+          account: activeAccount ?? accountByAddr,
+          privActiveAccount,
+          _,
+        }),
         _,
       }),
     [
@@ -110,8 +101,9 @@ const RegistryLayoutHeader: React.FC = () => {
       savedPaymentInfo,
       showOrders,
       activeAccount,
+      accountByAddr,
+      privActiveAccount,
       _,
-      privActiveAccount?.email,
     ],
   );
 

web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.config.tsx

@@ -180,7 +180,7 @@ export const getUserMenuItems = ({
         </div>
       ),
     },
-    !loginDisabled && {
+    {
       pathname,
       linkComponent,
       ...EDIT_PROFILE,

web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.utils.ts

@@ -1,9 +1,39 @@
 import { truncate } from 'web-components/src/utils/truncate';
 
+import { Account, Maybe } from 'generated/graphql';
+import { TranslatorType } from 'lib/i18n/i18n.types';
+import { PrivateAccount } from 'lib/queries/react-query/registry-server/getAccounts/getAccountsQuery.types';
+
+import { DEFAULT_NAME } from 'pages/ProfileEdit/ProfileEdit.constants';
+import { getDefaultAvatar } from 'pages/ProfileEdit/ProfileEdit.utils';
+
 type GetAddressParams = {
   walletAddress?: string | null;
   email?: string | null;
 };
 
 export const getAddress = ({ walletAddress, email }: GetAddressParams) =>
   walletAddress ? truncate(walletAddress) : email;
+
+type GetProfileParams = {
+  account?: Maybe<Pick<Account, 'id' | 'name' | 'image' | 'addr' | 'type'>>;
+  privActiveAccount?: PrivateAccount;
+  _: TranslatorType;
+};
+export const getProfile = ({
+  account,
+  privActiveAccount,
+  _,
+}: GetProfileParams) =>
+  account
+    ? {
+        id: account.id,
+        name: account.name ? account.name : _(DEFAULT_NAME),
+        profileImage: account.image ? account.image : getDefaultAvatar(account),
+        address: getAddress({
+          walletAddress: account.addr,
+          email: privActiveAccount?.email,
+        }),
+        selected: true,
+      }
+    : undefined;