feat: APP-243 disable create post button in keplr mobile (#2433)

Co-authored-by: Ralph <“[email protected]>
regen-network · Sep 10, 2024 · df0908f · df0908f
1 parent 4570801
commit df0908f
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 35 deletions.
diff --git a/web-components/src/components/cards/ProjectCard/ProjectCard.tsx b/web-components/src/components/cards/ProjectCard/ProjectCard.tsx
@@ -63,7 +63,8 @@ export interface ProjectCardProps extends MediaCardProps {
   offChain?: boolean;
   asAdmin?: boolean;
   adminPrompt?: SanityBlockContent;
-  tooltipText?: string;
+  createPostTooltipText?: string;
+  editProjectTooltipText?: string;
 }
 
 export function ProjectCard({
@@ -96,7 +97,8 @@ export function ProjectCard({
   offChain,
   asAdmin,
   adminPrompt,
-  tooltipText,
+  createPostTooltipText,
+  editProjectTooltipText,
   ...mediaCardProps
 }: ProjectCardProps): JSX.Element {
   const theme = useTheme();
@@ -138,6 +140,11 @@ export function ProjectCard({
       'https://schema.regen.network#additionalCertifications'
     ]?.['@list'];
 
+  const showTwoButons =
+    containedButton &&
+    onContainedButtonClick &&
+    (onButtonClick || isPrefinanceProject || offChain);
+
   return (
     <MediaCard
       onClick={onClick}
@@ -274,23 +281,52 @@ export function ProjectCard({
                     )}
                   </div>
                 )}
-                <div className="flex gap-10">
-                  {containedButton && onContainedButtonClick && (
-                    <ContainedButton
-                      size="small"
-                      startIcon={containedButton.startIcon}
-                      disabled={containedButton.disabled}
-                      sx={{ width: '100%' }}
-                      className={containedButton.className}
-                      onClick={onContainedButtonClick}
-                    >
-                      {containedButton.text}
-                    </ContainedButton>
-                  )}
+                <div
+                  className={`grid gap-10 ${
+                    showTwoButons ? 'grid-cols-2' : 'grid-cols-1'
+                  }`}
+                >
+                  {containedButton &&
+                    onContainedButtonClick &&
+                    (containedButton.disabled && editProjectTooltipText ? (
+                      <InfoTooltip
+                        arrow
+                        title={editProjectTooltipText}
+                        placement="top"
+                      >
+                        <div>
+                          <ContainedButton
+                            size="small"
+                            startIcon={containedButton.startIcon}
+                            disabled={containedButton.disabled}
+                            sx={{ width: '100%' }}
+                            className={containedButton.className}
+                            onClick={onContainedButtonClick}
+                          >
+                            {containedButton.text}
+                          </ContainedButton>
+                        </div>
+                      </InfoTooltip>
+                    ) : (
+                      <ContainedButton
+                        size="small"
+                        startIcon={containedButton.startIcon}
+                        disabled={containedButton.disabled}
+                        sx={{ width: '100%' }}
+                        className={containedButton.className}
+                        onClick={onContainedButtonClick}
+                      >
+                        {containedButton.text}
+                      </ContainedButton>
+                    ))}
                   {(onButtonClick || isPrefinanceProject || offChain) &&
-                    (isButtonDisabled && tooltipText ? (
-                      <InfoTooltip arrow title={tooltipText} placement="top">
-                        <div className="inline-flex w-full">
+                    (isButtonDisabled && createPostTooltipText ? (
+                      <InfoTooltip
+                        arrow
+                        title={createPostTooltipText}
+                        placement="top"
+                      >
+                        <div>
                           <ProjectCardButton
                             id={id}
                             name={name}
@@ -305,7 +341,7 @@ export function ProjectCard({
                             isPrefinanceProject={isPrefinanceProject}
                             buttonText={buttonText}
                             buttonStartIcon={buttonStartIcon}
-                            buttonClassName={buttonClassName}
+                            buttonClassName={cn(buttonClassName, 'h-full')}
                             isButtonDisabled={isButtonDisabled}
                             isSoldOut={isSoldOut}
                           />

diff --git a/web-components/src/components/tooltip/index.tsx b/web-components/src/components/tooltip/index.tsx
@@ -88,7 +88,7 @@ const CustomTooltip = withStyles(Tooltip, (theme: Theme) => ({
 
 const RegenTooltip = (props: TooltipProps): JSX.Element =>
   props.title ? (
-    <CustomTooltip enterTouchDelay={100} {...props} />
+    <CustomTooltip enterTouchDelay={100} leaveTouchDelay={5000} {...props} />
   ) : (
     <>{props.children}</>
   );

diff --git a/web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.tsx b/web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.tsx
@@ -46,10 +46,9 @@ import { BuySellOrderFlow } from 'features/marketplace/BuySellOrderFlow/BuySellO
 import { useBuySellOrderData } from 'features/marketplace/BuySellOrderFlow/hooks/useBuySellOrderData';
 import { CreateSellOrderFlow } from 'features/marketplace/CreateSellOrderFlow/CreateSellOrderFlow';
 import { useCreateSellOrderData } from 'features/marketplace/CreateSellOrderFlow/hooks/useCreateSellOrderData';
-import { CREATE_POST_DISABLED_TOOLTIP } from 'pages/Dashboard/MyProjects/MyProjects.constants';
+import { CREATE_POST_DISABLED_TOOLTIP_TEXT } from 'pages/Dashboard/MyProjects/MyProjects.constants';
 import { SOLD_OUT_TOOLTIP } from 'pages/Projects/AllProjects/AllProjects.constants';
 import { getPriceToDisplay } from 'pages/Projects/hooks/useProjectsSellOrders.utils';
-import { Link } from 'components/atoms';
 import { DetailsSection } from 'components/organisms/DetailsSection/DetailsSection';
 import { PostFlow } from 'components/organisms/PostFlow/PostFlow';
 import { useAllSoldOutProjectsIds } from 'components/organisms/ProjectCardsSection/hooks/useSoldOutProjectsIds';
@@ -482,7 +481,7 @@ function ProjectDetails(): JSX.Element {
           isCreatePostButtonDisabled={
             !projectMetadata?.['schema:location'] || !isProjectPublished
           }
-          tooltipText={_(CREATE_POST_DISABLED_TOOLTIP)}
+          tooltipText={_(CREATE_POST_DISABLED_TOOLTIP_TEXT)}
         >
           {!isAdmin &&
             isPrefinanceProject &&

diff --git a/web-marketplace/src/lib/i18n/locales/en.po b/web-marketplace/src/lib/i18n/locales/en.po
@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2024-09-10 16:07+0200\n"
+"POT-Creation-Date: 2024-09-10 18:28+0100\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -308,7 +308,7 @@ msgstr ""
 msgid "Attach arbitrary JSON-LD metadata to the project metadata below."
 msgstr ""
 
-#: src/components/organisms/PostFlow/hooks/useSign.ts:108
+#: src/components/organisms/PostFlow/hooks/useSign.ts:109
 msgid "Attest"
 msgstr ""
 
@@ -970,7 +970,7 @@ msgstr ""
 msgid "Ecocredit Batches"
 msgstr ""
 
-#: src/components/atoms/AgreeErpaCheckbox.tsx:30
+#: src/components/atoms/AgreeErpaCheckbox.tsx:31
 #: src/components/atoms/AgreeErpaCheckboxNew.tsx:41
 msgid "Ecocredit Sales Agreement"
 msgstr ""
@@ -2476,7 +2476,7 @@ msgstr ""
 msgid "Terms"
 msgstr ""
 
-#: src/components/atoms/AgreeErpaCheckbox.tsx:39
+#: src/components/atoms/AgreeErpaCheckbox.tsx:41
 #: src/components/atoms/AgreeErpaCheckboxNew.tsx:50
 msgid "terms of service"
 msgstr ""
@@ -2578,6 +2578,10 @@ msgstr ""
 msgid "This is comparable to signing a legal document and implies you believe the contents are accurate."
 msgstr ""
 
+#: src/pages/Dashboard/MyProjects/MyProjects.constants.ts:6
+msgid "This is not yet supported by Wallet Connect and Keplr mobile. Please log in using Keplr browser extension on desktop."
+msgstr ""
+
 #: src/components/organisms/SellOrdersActionsBar/SellOrdersActionsBar.constants.ts:7
 msgid "This is the median average price for all open sell orders in this credit class."
 msgstr ""

diff --git a/web-marketplace/src/lib/i18n/locales/es.po b/web-marketplace/src/lib/i18n/locales/es.po
@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2024-09-10 16:07+0200\n"
+"POT-Creation-Date: 2024-09-10 18:28+0100\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -308,7 +308,7 @@ msgstr ""
 msgid "Attach arbitrary JSON-LD metadata to the project metadata below."
 msgstr ""
 
-#: src/components/organisms/PostFlow/hooks/useSign.ts:108
+#: src/components/organisms/PostFlow/hooks/useSign.ts:109
 msgid "Attest"
 msgstr ""
 
@@ -970,7 +970,7 @@ msgstr ""
 msgid "Ecocredit Batches"
 msgstr ""
 
-#: src/components/atoms/AgreeErpaCheckbox.tsx:30
+#: src/components/atoms/AgreeErpaCheckbox.tsx:31
 #: src/components/atoms/AgreeErpaCheckboxNew.tsx:41
 msgid "Ecocredit Sales Agreement"
 msgstr ""
@@ -2476,7 +2476,7 @@ msgstr ""
 msgid "Terms"
 msgstr ""
 
-#: src/components/atoms/AgreeErpaCheckbox.tsx:39
+#: src/components/atoms/AgreeErpaCheckbox.tsx:41
 #: src/components/atoms/AgreeErpaCheckboxNew.tsx:50
 msgid "terms of service"
 msgstr ""
@@ -2578,6 +2578,10 @@ msgstr ""
 msgid "This is comparable to signing a legal document and implies you believe the contents are accurate."
 msgstr ""
 
+#: src/pages/Dashboard/MyProjects/MyProjects.constants.ts:6
+msgid "This is not yet supported by Wallet Connect and Keplr mobile. Please log in using Keplr browser extension on desktop."
+msgstr ""
+
 #: src/components/organisms/SellOrdersActionsBar/SellOrdersActionsBar.constants.ts:7
 msgid "This is the median average price for all open sell orders in this credit class."
 msgstr ""

diff --git a/web-marketplace/src/pages/Dashboard/MyProjects/MyProjects.constants.ts b/web-marketplace/src/pages/Dashboard/MyProjects/MyProjects.constants.ts
@@ -2,6 +2,7 @@ import { msg } from '@lingui/macro';
 
 export const DRAFT_ID = 'draft';
 export const CREATE_POST = msg`+ create post`;
-export const CREATE_POST_DISABLED_TOOLTIP = msg`You cannot make posts because either the project is still a draft or it doesn't have assigned a location.`;
+export const CREATE_POST_DISABLED_TOOLTIP_TEXT = msg`You cannot make posts because either the project is still a draft or it doesn't have assigned a location.`;
+export const NOT_SUPPORTED_TOOLTIP_TEXT = msg`This is not yet supported by Wallet Connect and Keplr mobile. Please log in using Keplr browser extension on desktop.`;
 export const MY_PROJECTS_BUTTON_TEXT = '+ create project';
 export const MY_PROJECTS_EMPTY_TITLE = 'You have not created any projects yet';
diff --git a/web-marketplace/src/pages/Dashboard/MyProjects/MyProjects.tsx b/web-marketplace/src/pages/Dashboard/MyProjects/MyProjects.tsx
@@ -23,10 +23,11 @@ import { useDashboardContext } from '../Dashboard.context';
 import { useFetchProjectByAdmin } from './hooks/useFetchProjectsByAdmin';
 import {
   CREATE_POST,
-  CREATE_POST_DISABLED_TOOLTIP,
+  CREATE_POST_DISABLED_TOOLTIP_TEXT,
   DRAFT_ID,
   MY_PROJECTS_BUTTON_TEXT,
   MY_PROJECTS_EMPTY_TITLE,
+  NOT_SUPPORTED_TOOLTIP_TEXT,
 } from './MyProjects.constants';
 import {
   getDefaultProject,
@@ -134,7 +135,12 @@ const MyProjects = (): JSX.Element => {
                     }}
                     track={track}
                     pathname={location.pathname}
-                    tooltipText={_(CREATE_POST_DISABLED_TOOLTIP)}
+                    createPostTooltipText={
+                      loginDisabled
+                        ? _(NOT_SUPPORTED_TOOLTIP_TEXT)
+                        : _(CREATE_POST_DISABLED_TOOLTIP_TEXT)
+                    }
+                    editProjectTooltipText={_(NOT_SUPPORTED_TOOLTIP_TEXT)}
                   />
                 </WithLoader>
               </Grid>

diff --git a/web-marketplace/src/pages/Dashboard/MyProjects/MyProjects.utils.tsx b/web-marketplace/src/pages/Dashboard/MyProjects/MyProjects.utils.tsx
@@ -21,7 +21,11 @@ export const getDefaultProject = (
     text: _(EDIT_PROJECT),
     startIcon: (
       <EditIcon
-        sx={{ width: 20, height: 20, color: disabled ? 'grey.100' : 'inherit' }}
+        sx={{
+          width: 20,
+          height: 20,
+          color: disabled ? 'primary.main' : 'inherit',
+        }}
       />
     ),
     disabled,