fix: APP-850 various issues with org creation/profile (#2784)

Author: blushi

web-components/src/components/cards/MemberCard/MemberCard.tsx

@@ -21,7 +21,10 @@ export const MemberCard = ({
   editText,
   linkComponent: LinkComponent,
 }: Props) => (
-  <article className="flex flex-col items-center relative px-20 py-40 border border-solid border-sc-card-standard-stroke rounded-[10px] shadow-[0_0_4px_0_rgba(0,0,0,0.05)]">
+  <article
+    aria-label={name}
+    className="bg-grey-0 flex flex-col items-center relative px-20 py-40 border border-solid border-sc-card-standard-stroke rounded-[10px] shadow-[0_0_4px_0_rgba(0,0,0,0.05)]"
+  >
     <UserAvatar src={imageSrc} alt={name} className="w-[120px] h-[120px]" />
     <Title className="py-10" variant="h6">
       {name}

web-marketplace/src/components/atoms/Link.tsx

@@ -1,5 +1,9 @@
 'use client';
 import React, { forwardRef, PropsWithChildren } from 'react';
+import {
+  Link as ReactRouterLink,
+  LinkProps as ReactRouterLinkProps,
+} from 'react-router-dom';
 import { Box, Link as MuiLink, LinkProps as MuiLinkProps } from '@mui/material';
 import NextLink, { LinkProps as NextLinkProps } from 'next/link';
 
@@ -10,60 +14,105 @@ export interface LinkProps extends MuiLinkProps, PropsWithChildren {
   href: string;
 }
 
-type LinkRef = HTMLAnchorElement;
-type CombinedLinkProps = Omit<
+type ReactRouterLinkBehaviorProps = Omit<ReactRouterLinkProps, 'to'> & {
+  href: ReactRouterLinkProps['to'];
+};
+
+type NextLinkBehaviorProps = Omit<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,
   keyof NextLinkProps
 > &
   NextLinkProps;
 
-const LinkBehavior = React.forwardRef<LinkRef, CombinedLinkProps>(
-  (props, ref) => {
-    const { href, as, ...other } = props;
-    return <NextLink ref={ref} href={href} as={as} {...other} />;
-  },
-);
+const ReactRouterLinkBehavior = React.forwardRef<
+  HTMLAnchorElement,
+  ReactRouterLinkBehaviorProps
+>(({ href, ...other }, ref) => {
+  return <ReactRouterLink ref={ref} to={href} {...other} preventScrollReset />;
+});
+
+const NextLinkBehavior = React.forwardRef<
+  HTMLAnchorElement,
+  NextLinkBehaviorProps
+>((props, ref) => {
+  const { href, as, ...other } = props;
+  return <NextLink ref={ref} href={href} as={as} {...other} />;
+});
 
 // eslint-disable-next-line lingui/no-unlocalized-strings
-LinkBehavior.displayName = 'LinkBehavior';
+ReactRouterLinkBehavior.displayName = 'ReactRouterLinkBehavior';
+// eslint-disable-next-line lingui/no-unlocalized-strings
+NextLinkBehavior.displayName = 'NextLinkBehavior';
+const createMuiLink = (
+  internalComponent: React.ElementType,
+  { applyLocalePrefix = true }: { applyLocalePrefix?: boolean } = {},
+) => {
+  const Component = forwardRef<HTMLAnchorElement, LinkProps>(
+    ({ href, children, target, ...linkProps }, ref) => {
+      const locale = useCurrentLocale();
+      if (!href || typeof href !== 'string') {
+        return (
+          <Box {...linkProps} component="span">
+            {children}
+          </Box>
+        );
+      }
 
-/**
- * Renders a Material UI `Link` - will use Next Link for local links.
- * Defaults to `target='_blank'` for external links.
- */
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ href, children, target, ...linkProps }, ref) => {
-    const locale = useCurrentLocale();
-    if (!href || typeof href !== 'string') {
-      // @ts-expect-error
-      return <Box {...linkProps}>{children}</Box>;
-    }
+      const isInternalLink = (href: string): boolean =>
+        !!href && href.startsWith('/');
+
+      const internalHref =
+        applyLocalePrefix && isInternalLink(href)
+          ? ensureLocalePrefix(href, locale)
+          : href;
 
-    const isInternalLink = (href: string): boolean =>
-      !!href && href.startsWith('/');
-    // const hasAnchor = href?.includes('#');
+      return isInternalLink(href) ? (
+        <MuiLink
+          {...linkProps}
+          ref={ref}
+          component={internalComponent}
+          href={internalHref}
+        >
+          {children}
+        </MuiLink>
+      ) : (
+        <MuiLink
+          {...linkProps}
+          ref={ref}
+          href={href}
+          target={target || '_blank'}
+        >
+          {children}
+        </MuiLink>
+      );
+    },
+  );
 
-    const withLocalePrefix = (href: string): string =>
-      isInternalLink(href) ? ensureLocalePrefix(href, locale) : href;
+  const internalName =
+    (internalComponent as React.ComponentType).displayName ||
+    (internalComponent as React.ComponentType).name ||
+    // eslint-disable-next-line lingui/no-unlocalized-strings
+    'Component';
+  // eslint-disable-next-line lingui/no-unlocalized-strings
+  Component.displayName = `MuiLink(${internalName})`;
+  return Component;
+};
 
-    const internalHref = withLocalePrefix(href);
+/**
+ * Renders a Material UI `Link` - will use React Router Link for local links.
+ * Defaults to `target='_blank'` for external links.
+ */
+export const ReactRouterMuiLink = createMuiLink(ReactRouterLinkBehavior, {
+  applyLocalePrefix: false,
+});
 
-    return isInternalLink(href) ? (
-      <MuiLink
-        {...linkProps}
-        ref={ref}
-        component={LinkBehavior}
-        href={internalHref}
-      >
-        {children}
-      </MuiLink>
-    ) : (
-      <MuiLink {...linkProps} ref={ref} href={href} target={target || '_blank'}>
-        {children}
-      </MuiLink>
-    );
-  },
-);
+/**
+ * Renders a Material UI `Link` - will use Next Link for local links.
+ * Defaults to `target='_blank'` for external links.
+ */
+export const Link = createMuiLink(NextLinkBehavior);
 
+// eslint-disable-next-line lingui/no-unlocalized-strings
+ReactRouterMuiLink.displayName = 'ReactRouterMuiLink';
 // eslint-disable-next-line lingui/no-unlocalized-strings
 Link.displayName = 'Link';

web-marketplace/src/components/atoms/ScrollToTop.tsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { usePathname } from 'next/navigation';
 
 // List of route segments that should not trigger a scroll reset
-const whitelist = ['ecocredit-batches'];
+const whitelist = ['ecocredit-batches', 'profiles'];
 
 /**
  * Automatically scrolls the page to the top when navigating to a new route,
@@ -16,8 +16,9 @@ function ScrollToTop(): null {
   const pathname = usePathname();
 
   useEffect(() => {
-    if (!whitelist.some(route => pathname.includes(route)))
+    if (!whitelist.some(route => pathname.includes(route))) {
       window.scrollTo(0, 0);
+    }
   }, [pathname]);
 
   return null; // No UI component, only side effect

web-marketplace/src/components/organisms/BridgedEcocreditsTable/hooks/useFetchBridgedEcocredits.tsx

@@ -73,6 +73,7 @@ export const useFetchBridgedEcocredits = ({ address }: Props): Output => {
       client: queryClient,
       enabled: !!queryClient,
       request: {
+        // eslint-disable-next-line lingui/no-unlocalized-strings
         query: `${messageActionEquals}'${MsgBridge.typeUrl}' AND message.sender='${address}'`,
         orderBy: OrderBy.ORDER_BY_DESC,
       },

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

@@ -1,5 +1,17 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet, ScrollRestoration } from 'react-router-dom';
 
 export const RegistryLayout = () => {
-  return <Outlet />;
+  return (
+    <>
+      <ScrollRestoration
+        getKey={(location, matches) => {
+          const profileMatch = matches.find(match =>
+            match.pathname.startsWith('/profiles/'),
+          );
+          return profileMatch ? profileMatch.pathname : location.key;
+        }}
+      />
+      <Outlet />
+    </>
+  );
 };

web-marketplace/src/features/ecocredit/BridgeFlow/BridgeFlow.tsx

@@ -100,6 +100,7 @@ export const BridgeFlow = ({
     reactQueryClient.invalidateQueries({
       queryKey: [
         GET_TXS_EVENT_KEY,
+        // eslint-disable-next-line lingui/no-unlocalized-strings
         `${messageActionEquals}'${MsgBridge.typeUrl}' AND message.sender='${wallet?.address}'`,
       ],
     });

web-marketplace/src/legacy-pages/CreateOrganization/hooks/useCreateDao/useCreateDao.ts

@@ -186,6 +186,11 @@ export const useCreateDao = () => {
             key: 'organization_id',
             value: params.organizationId,
           });
+          // this is required to move s3 media from the current account to the new org folder
+          initialItems.push({
+            key: 'creator_account_id',
+            value: activeAccountId,
+          });
         }
 
         if (sanitizedBackgroundImage) {

web-marketplace/src/legacy-pages/Profile/MembersTab/MembersTab.tsx

@@ -21,7 +21,7 @@ export const MembersTab = () => {
   return (
     <WithLoader isLoading={isLoading}>
       {organization ? (
-        <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-4 gap-20">
           {organization.daoByDaoAddress?.assignmentsByDaoAddress?.nodes.map(
             assignment => {
               const account = assignment?.accountByAccountId;

web-marketplace/src/legacy-pages/Profile/Profile.tsx

@@ -38,7 +38,7 @@ import {
 import { getProfileLink } from 'lib/profileLink';
 import { useWallet } from 'lib/wallet/wallet';
 
-import { Link } from 'components/atoms';
+import { Link, ReactRouterMuiLink } from 'components/atoms';
 import WithLoader from 'components/atoms/WithLoader';
 import { useFetchPaginatedBatches } from 'hooks/batches/useFetchPaginatedBatches';
 import { useQueryIsIssuer } from 'hooks/useQueryIsIssuer';
@@ -226,6 +226,12 @@ export const Profile = (): JSX.Element => {
     socialsLinks,
   };
 
+  const editLink = isOwnProfile
+    ? organization
+      ? '/dashboard/organization/profile'
+      : '/dashboard/profile'
+    : '';
+
   return (
     <WithLoader
       isLoading={isLoading || isLoadingIsIssuer}
@@ -250,7 +256,7 @@ export const Profile = (): JSX.Element => {
               backgroundImage={backgroundImage}
               avatar={avatarImage}
               infos={infos}
-              editLink={isOwnProfile ? '/dashboard/profile' : ''}
+              editLink={editLink}
               profileLink={profileLink}
               variant={
                 account?.type
@@ -271,9 +277,9 @@ export const Profile = (): JSX.Element => {
                     <IconTabs
                       aria-label={_(msg`public profile tabs`)}
                       tabs={tabs}
-                      linkComponent={Link}
                       activeTab={activeTab}
                       mobileFullWidth
+                      linkComponent={ReactRouterMuiLink}
                     />
                     <div className="flex w-full md:w-auto mt-[30px] mb-7.5 md:mt-0 md:mb-0">
                       {manageButtonConfig.map(