Merge pull request #314 from DAOmasons/mobileGrantsPage

Mobile grants page

src/components/feed/RichTextUpdate.tsx

@@ -2,7 +2,7 @@ import { MainSection, PageTitle } from '../../layout/Sections';
 import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 import { getBuiltGraphSDK } from '../../.graphclient';
-import { useChainId } from 'wagmi';
+import { useChainId, useConfig } from 'wagmi';
 import { resolveProjectMetadata } from '../../resolvers/projectResolvers';
 import { Box, Divider, Group, Skeleton, Text } from '@mantine/core';
 import { resolveRichTextMetadata } from '../../resolvers/updates';
@@ -16,7 +16,7 @@ import { Player } from '../../types/ui';
 import { getGatewayUrl } from '../../utils/ipfs/get';
 import { DAO_MASONS } from '../../constants/gameSetup';
 
-export const getRTUpdate = async (id: string, chainId: number) => {
+const getRTUpdate = async (id: string, chainId: number) => {
   const { getRTUpdate } = getBuiltGraphSDK();
 
   const { Update } = await getRTUpdate({

src/components/grant/ApplicationDisplay.tsx

@@ -33,6 +33,7 @@ import { GameStatus } from '../../types/common';
 import classes from '../../styles/Spoiler.module.css';
 import { ApplicationVerdictControls } from './ApplicationVerdictControls';
 import { useMemo } from 'react';
+import { useMobile } from '../../hooks/useBreakpoint';
 
 export const ApplicationDisplay = ({
   amountRequested,
@@ -56,6 +57,8 @@ export const ApplicationDisplay = ({
   const theme = useMantineTheme();
   const { project, grant, isShipOperator } = useGrant();
 
+  const isMobile = useMobile();
+
   const formattedTime = secondsToLongDate(dueDate);
   const formattedAmount = formatEther(BigInt(amountRequested));
 
@@ -135,7 +138,7 @@ export const ApplicationDisplay = ({
           </>
         )}
       </Group>
-      <Box pl={50} mb="lg">
+      <Box pl={isMobile ? 0 : 50} mb="lg">
         <Group gap={8} mb={'lg'}>
           <PlayerAvatar
             playerType={Player.Project}

src/components/grant/FacilitatorActions.tsx

@@ -1,4 +1,4 @@
-import { Button, Stack, Text } from '@mantine/core';
+import { Button, Group, Stack, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconPlus } from '@tabler/icons-react';
 import { FacilitatorApprovalDrawer } from './FacilitatorApprovalDrawer';
@@ -50,3 +50,52 @@ export const FacilitatorActions = () => {
     </>
   );
 };
+
+export const FacActionsMobile = () => {
+  const [approvalOpened, { open: openApprove, close: closeApprove }] =
+    useDisclosure();
+  const [postOpened, { open: openPost, close: closePost }] = useDisclosure();
+
+  const { grant, project, ship, refetchGrant } = useGrant();
+
+  const isReadyToApprove = grant?.status === GrantStatus.MilestonesApproved;
+
+  return (
+    <>
+      <Group gap="sm">
+        {isReadyToApprove && (
+          <Button
+            variant="menu"
+            leftSection={<IconPlus />}
+            onClick={openApprove}
+            size="xs"
+          >
+            Review Grantee
+          </Button>
+        )}
+        <Button
+          variant="menu"
+          leftSection={<IconPlus size={14} />}
+          onClick={openPost}
+          size="xs"
+        >
+          Message
+        </Button>
+      </Group>
+      <FacilitatorApprovalDrawer
+        opened={approvalOpened}
+        onClose={closeApprove}
+      />
+      <PostGrantDrawer
+        opened={postOpened}
+        onClose={closePost}
+        projectId={project?.id || ''}
+        avatarImg={getGatewayUrl(DAO_MASONS.AVATAR_IMG) || ''}
+        avatarName={'Facilitators'}
+        shipSrcAddress={ship?.shipContractAddress || ''}
+        playerType={Player.Facilitators}
+        refetch={refetchGrant}
+      />
+    </>
+  );
+};

src/components/grant/InsetUpdate.tsx

@@ -1,7 +1,8 @@
-import { Box, Divider, Group, Text } from '@mantine/core';
+import { Box, Divider, Flex, Group, Text } from '@mantine/core';
 import { ReactNode, useMemo } from 'react';
 import { Bold } from '../Typography';
 import { secondsToShortRelativeTime } from '../../utils/time';
+import { useMobile } from '../../hooks/useBreakpoint';
 
 export const InsetUpdate = ({
   posterName,
@@ -16,14 +17,16 @@ export const InsetUpdate = ({
   posterName: string;
   timestamp: number;
 }) => {
+  const isMobile = useMobile();
+
   const time = useMemo(() => {
     if (!timestamp) return '';
     return secondsToShortRelativeTime(timestamp);
   }, [timestamp]);
   return (
     <>
-      <Box pl={50}>
-        <Group gap={8} mb="xs">
+      <Box pl={isMobile ? 0 : 50}>
+        <Flex gap={8} mb="xs" style={{ flexShrink: 0, flexWrap: 'wrap' }}>
           {symbolUI}
           <Text size="sm">
             <Bold>{posterName}</Bold> {tagline}
@@ -34,7 +37,7 @@ export const InsetUpdate = ({
           <Text size="sm" opacity={0.8}>
             {time}
           </Text>
-        </Group>
+        </Flex>
         <Box mb="lg">{bodyUI}</Box>
       </Box>
       <Divider mb="lg" />

src/components/grant/MilestoneDisplay.tsx

@@ -22,13 +22,16 @@ import { formatEther } from 'viem';
 import { secondsToLongDate } from '../../utils/time';
 import { RTDisplay } from '../RTDisplay';
 import { MilestoneVerdictControls } from './MilestoneVerdictControls';
+import { useMobile } from '../../hooks/useBreakpoint';
 
 export const MilestoneDisplay = ({
   updateData,
 }: {
   updateData: GrantUpdate;
 }) => {
   const theme = useMantineTheme();
+  const isMobile = useMobile();
+
   const { currentMilestoneSet, project, isShipOperator } = useGrant();
 
   const milestoneId = updateData.id.split(':')[0];
@@ -88,7 +91,7 @@ export const MilestoneDisplay = ({
           </Text>
         </Group>
       </Box>
-      <Box pl={50} mb="lg">
+      <Box pl={isMobile ? 0 : 50} mb="lg">
         <Group gap="8" mb="lg">
           <PlayerAvatar
             playerType={Player.Project}

src/components/grant/MilestoneSetDisplay.tsx

@@ -29,9 +29,12 @@ import {
 import { MilestoneSetVerdictControls } from './MilestoneSetVerdictControls';
 import { useMemo } from 'react';
 import classes from '../../styles/Spoiler.module.css';
+import { useMobile } from '../../hooks/useBreakpoint';
 
 export const MilestoneSetDisplay = ({ doc }: { doc: MilestonesDisplay }) => {
   const theme = useMantineTheme();
+  const isMobile = useMobile();
+
   const { status, id, resolvedMilestones } = doc;
   const { project, grant, isShipOperator } = useGrant();
 
@@ -135,7 +138,7 @@ export const MilestoneSetDisplay = ({ doc }: { doc: MilestonesDisplay }) => {
           </Text>
         </Group>
       </Box>
-      <Box pl={50} mb="lg">
+      <Box pl={isMobile ? 0 : 50} mb="lg">
         <Group gap={8} mb={'lg'}>
           <PlayerAvatar
             playerType={Player.Project}

src/components/grant/NextStep.tsx

@@ -1,5 +1,6 @@
 import { Box, Divider, Flex } from '@mantine/core';
 import { ReactNode } from 'react';
+import { useMobile } from '../../hooks/useBreakpoint';
 
 export const NextStep = ({
   text,
@@ -8,9 +9,10 @@ export const NextStep = ({
   text: ReactNode;
   icon?: ReactNode;
 }) => {
+  const isMobile = useMobile();
   return (
     <Box mb="lg">
-      <Box pl={50} mb="sm" opacity={0.8}>
+      <Box pl={isMobile ? 0 : 50} mb="sm" opacity={0.8}>
         <Flex gap="8">
           <Box style={{ flexShrink: 0 }}>{icon}</Box>
           <Box style={{ minWidth: 0, flexGrow: 1 }}>{text}</Box>

src/components/grant/ProjectActions.tsx

@@ -1,7 +1,7 @@
 import { useDisclosure } from '@mantine/hooks';
 import { useGrant } from '../../hooks/useGrant';
 import { GameStatus, GrantStatus } from '../../types/common';
-import { Button, Stack, Text } from '@mantine/core';
+import { Button, Group, Stack, Text } from '@mantine/core';
 import { IconPencil, IconPlus } from '@tabler/icons-react';
 import { ApplicationDrawer } from './ApplicationDrawer';
 import { formatEther } from 'viem';
@@ -143,3 +143,146 @@ export const ProjectActions = () => {
     </>
   );
 };
+
+export const ProjectActionsMobile = () => {
+  const {
+    project,
+    ship,
+    refetchGrant,
+    applicationTemplate,
+    grant,
+    currentApplication,
+  } = useGrant();
+  const [postOpened, { open: openPost, close: closePost }] = useDisclosure();
+  const [
+    applicationOpened,
+    { open: openApplication, close: closeApplication },
+  ] = useDisclosure();
+  const [milestonesOpened, { open: openMilestones, close: closeMilestones }] =
+    useDisclosure();
+
+  const isApplicationStage =
+    !grant || (grant?.status && grant.status < GrantStatus.MilestonesApproved);
+
+  const isMilestonePlanning =
+    grant?.status &&
+    grant.status >= GrantStatus.ApplicationApproved &&
+    grant?.status < GrantStatus.MilestonesApproved;
+
+  const areMilestonesLocked =
+    grant?.status &&
+    grant.status === GrantStatus.Allocated &&
+    grant?.currentMilestones?.status === GameStatus.Accepted;
+
+  const alreadyHasApplication = !!currentApplication;
+  const alreadyHasMilestoneSet = !!grant?.currentMilestones;
+
+  return (
+    <>
+      <Group gap="sm">
+        {isApplicationStage && alreadyHasApplication && (
+          <Button
+            variant={
+              grant?.status && grant.status > GrantStatus.ApplicationApproved
+                ? 'menu-fade'
+                : 'menu'
+            }
+            leftSection={<IconPencil size={14} />}
+            onClick={openApplication}
+            size="xs"
+          >
+            Application
+          </Button>
+        )}
+
+        {isMilestonePlanning && (
+          <Button
+            variant="menu"
+            size="xs"
+            leftSection={
+              alreadyHasMilestoneSet &&
+              grant?.status !== GrantStatus.Allocated ? (
+                <IconPencil size={14} />
+              ) : (
+                <IconPlus size={14} />
+              )
+            }
+            onClick={openMilestones}
+          >
+            Milestones
+          </Button>
+        )}
+        {areMilestonesLocked && (
+          <Button
+            variant="menu"
+            size="xs"
+            leftSection={<IconPlus size={14} />}
+            onClick={openMilestones}
+          >
+            Milestones
+          </Button>
+        )}
+        {isApplicationStage && !alreadyHasApplication && (
+          <Button
+            variant="menu"
+            size="xs"
+            leftSection={<IconPlus size={14} />}
+            onClick={openApplication}
+          >
+            Application
+          </Button>
+        )}
+        <Button
+          size="xs"
+          variant="menu"
+          leftSection={<IconPlus size={14} />}
+          onClick={openPost}
+        >
+          Message
+        </Button>
+      </Group>
+      {alreadyHasApplication ? (
+        <ApplicationDrawer
+          key={`application-drawer-${currentApplication?.id}`}
+          opened={applicationOpened}
+          onClose={closeApplication}
+          content={currentApplication?.content?.content}
+          initialDueDate={
+            new Date(currentApplication?.content.dueDate * 1000 || '')
+          }
+          initialAmount={
+            currentApplication?.amount
+              ? formatEther(currentApplication?.amount)
+              : ''
+          }
+          initialSendAddress={currentApplication?.receivingAddress}
+        />
+      ) : (
+        <ApplicationDrawer
+          key={`application-drawer-new`}
+          opened={applicationOpened}
+          onClose={closeApplication}
+          content={applicationTemplate}
+        />
+      )}
+      <PostGrantDrawer
+        opened={postOpened}
+        onClose={closePost}
+        projectId={project?.id || ''}
+        avatarImg={project?.metadata?.imgUrl || ''}
+        avatarName={project?.name || ''}
+        shipSrcAddress={ship?.shipContractAddress || ''}
+        playerType={Player.Project}
+        refetch={refetchGrant}
+      />
+      {areMilestonesLocked ? (
+        <SubmitMilestoneDrawer
+          opened={milestonesOpened}
+          onClose={closeMilestones}
+        />
+      ) : (
+        <MilestonesDrawer opened={milestonesOpened} onClose={closeMilestones} />
+      )}
+    </>
+  );
+};