Merge pull request #285 from DAOmasons/Aug7

Aug7
DAOmasons · Aug 7, 2024 · a82116d · a82116d
2 parents dfdafef + 3fb1792
commit a82116d
Show file tree

Hide file tree

Showing 13 changed files with 123 additions and 41 deletions.
diff --git a/src/components/AddressAvatar.tsx b/src/components/AddressAvatar.tsx
@@ -1,6 +1,13 @@
-import { Avatar, Group, MantineSize, StyleProp, Text } from '@mantine/core';
+import {
+  Avatar,
+  Group,
+  MantineSize,
+  StyleProp,
+  Text,
+  Tooltip,
+} from '@mantine/core';
 import React, { ComponentProps } from 'react';
-import { Address } from 'viem';
+import { Address, isAddress } from 'viem';
 import { useEnsAvatar, useEnsName } from 'wagmi';
 import { ensConfig } from '../utils/config';
 import { mainnet } from 'viem/chains';
@@ -13,11 +20,13 @@ export const AddressAvatar = ({
   size = 28,
   fz,
   displayText = true,
+  withTooltip = false,
   canCopy,
 }: {
   address: Address;
   size?: MantineSize | number;
   fz?: StyleProp<number | MantineSize>;
+  withTooltip?: boolean;
   displayText?: boolean;
   hideText?: boolean;
   canCopy?: boolean;
@@ -54,7 +63,18 @@ export const AddressAvatar = ({
         }
       }}
     >
-      <Avatar src={imgUrl} size={size} />
+      {withTooltip ? (
+        <Tooltip
+          label={ensName ? name : address}
+          position="top"
+          withArrow
+          openDelay={200}
+        >
+          <Avatar src={imgUrl} size={size} />
+        </Tooltip>
+      ) : (
+        <Avatar src={imgUrl} size={size} />
+      )}
       {displayText && <Text fz={fz}>{name}</Text>}
     </Group>
   );
@@ -69,13 +89,17 @@ export const AddressAvatarGroup = ({
 }) => {
   return (
     <Avatar.Group>
-      {addresses.map((address) => (
-        <AvatarGroupItem
-          key={address}
-          address={address}
-          avatarProps={avatarProps}
-        />
-      ))}
+      {addresses.map((address) =>
+        isAddress(address) ? (
+          <AddressAvatar
+            address={address}
+            canCopy
+            withTooltip
+            key={address}
+            displayText={false}
+          />
+        ) : null
+      )}
     </Avatar.Group>
   );
 };

diff --git a/src/components/PageDrawer.tsx b/src/components/PageDrawer.tsx
@@ -7,19 +7,24 @@ export const PageDrawer = ({
   pageTitle,
   opened,
   onClose,
+  closeOnBack = false,
 }: {
   children: ReactNode;
-  pageTitle?: string;
+  pageTitle?: string | ReactNode;
   opened: boolean;
   onClose: () => void;
+  closeOnBack?: boolean;
 }) => {
   return (
     <Drawer.Root opened={opened} size={720} onClose={onClose} position="right">
       <Drawer.Overlay />
       <Drawer.Content>
         <Flex w="100%" justify={'center'}>
           <Box mt="xl" w="600px">
-            <PageTitle title={pageTitle} />
+            <PageTitle
+              title={pageTitle}
+              backAction={closeOnBack ? onClose : undefined}
+            />
             {children}
           </Box>
         </Flex>

diff --git a/src/components/forms/MediaForm.tsx b/src/components/forms/MediaForm.tsx
@@ -1,21 +1,23 @@
 import {
+  ActionIcon,
   Box,
   Button,
   Divider,
   Group,
   Stack,
   Text,
   TextInput,
+  Tooltip,
 } from '@mantine/core';
-import React from 'react';
+
 import { useMobile } from '../../hooks/useBreakpoint';
 import { PageTitle } from '../../layout/Sections';
 import {
   IconBrandVimeo,
   IconBrandYoutube,
-  IconDeviceFloppy,
   IconExclamationCircle,
   IconPhoto,
+  IconPlayerPlay,
   IconPlus,
   IconWorld,
 } from '@tabler/icons-react';
@@ -144,12 +146,37 @@ export const MediaForm = ({ form }: { form: UseFormReturnType<any> }) => {
       </Group>
 
       <Divider />
-      <TextInput
-        leftSection={<IconWorld size={18} />}
-        label="Demo Link"
-        placeholder="ex. Public Goods Death Star"
-        {...form.getInputProps('mainDemoLink')}
-      />
+      <Box mb="md">
+        <TextInput
+          mb="md"
+          leftSection={<IconWorld size={18} />}
+          label="Demo Link"
+          description="Link to your game or app. This will be displayed front and center on your project page."
+          placeholder="https://your-product-demo.com"
+          {...form.getInputProps('mainDemoLink')}
+        />
+        {form.values?.mainDemoLink &&
+          form.getInputProps('mainDemoLink').error === undefined && (
+            <Group>
+              <Text fz="sm" opacity={0.8}>
+                Test Demo
+              </Text>
+              <Tooltip label="Try Demo">
+                <ActionIcon
+                  variant="priority"
+                  size="lg"
+                  radius={100}
+                  component="a"
+                  href={form.values?.mainDemoLink}
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  <IconPlayerPlay size={16} />
+                </ActionIcon>
+              </Tooltip>
+            </Group>
+          )}
+      </Box>
       <Group w="100%" justify="flex-end" mt="md">
         <Button onClick={handleUpdate}>Update</Button>
       </Group>

diff --git a/src/components/forms/ProjectMetadataForm.tsx b/src/components/forms/ProjectMetadataForm.tsx
@@ -275,7 +275,7 @@ export const ProjectMetadataForm = ({
             onClick={() => onSubmit(form.values)}
             disabled={!form.isValid()}
           >
-            {isEditing ? 'Edit Project' : 'Register Project'}
+            {isEditing ? 'Save' : 'Register Project'}
           </TxButton>
         </Group>
       </Stack>

diff --git a/src/components/grant/ApplicationDrawer.tsx b/src/components/grant/ApplicationDrawer.tsx
@@ -192,7 +192,12 @@ export const ApplicationDrawer = ({
   const alreadyHasApplication = !!currentApplication;
 
   return (
-    <PageDrawer pageTitle="Post Application" opened={opened} onClose={onClose}>
+    <PageDrawer
+      pageTitle="Post Application"
+      opened={opened}
+      onClose={onClose}
+      closeOnBack
+    >
       <Group mt="40" mb="lg" w="100%" justify="space-between">
         <PlayerAvatar
           playerType={Player.Project}

diff --git a/src/components/grant/FacilitatorApprovalDrawer.tsx b/src/components/grant/FacilitatorApprovalDrawer.tsx
@@ -83,7 +83,7 @@ export const FacilitatorApprovalDrawer = ({
   };
 
   return (
-    <PageDrawer opened={opened} onClose={onClose}>
+    <PageDrawer opened={opened} onClose={onClose} closeOnBack>
       <PlayerAvatar
         imgUrl={getGatewayUrl(DAO_MASONS.AVATAR_IMG)}
         playerType={Player.Facilitators}

diff --git a/src/components/grant/GrantHelpers.tsx b/src/components/grant/GrantHelpers.tsx
@@ -24,8 +24,8 @@ export const ProjectGrantHelpers = () => {
         icon={<IconFileDescription size={20} />}
         text={
           <Text fz="sm">
-            <Bold>Next Step: </Bold> send a <Bold>message</Bold> to the Ship
-            Operator or submit an <Bold>application</Bold>
+            <Bold>Next Step: </Bold> send a <Bold>Message</Bold> to the Ship{' '}
+            Operator or submit an <Bold>Application</Bold>
           </Text>
         }
       />
@@ -38,7 +38,7 @@ export const ProjectGrantHelpers = () => {
         icon={<IconFileDescription size={20} />}
         text={
           <Text fz="sm">
-            <Bold>Next Step: </Bold> wait for a response from the Operator or
+            <Bold>Next Step: </Bold> wait for a response from the Operator or{' '}
             submit an <Bold>application</Bold>
           </Text>
         }
@@ -154,7 +154,7 @@ export const ProjectGrantHelpers = () => {
           icon={<IconPennant size={20} />}
           text={
             <Text fz="sm">
-              <Bold>Next Step: </Bold> Incorporate the feedback and resubmit
+              <Bold>Next Step: </Bold> Incorporate the feedback and resubmit{' '}
               your <Bold>Milestone</Bold>{' '}
             </Text>
           }

diff --git a/src/components/grant/InsetUpdate.tsx b/src/components/grant/InsetUpdate.tsx
@@ -26,8 +26,7 @@ export const InsetUpdate = ({
         <Group gap={8} mb="xs">
           {symbolUI}
           <Text size="sm">
-            <Bold>{posterName}</Bold>
-            {tagline}
+            <Bold>{posterName}</Bold> {tagline}
           </Text>
           <Text size="sm" opacity={0.8}>
             ·

diff --git a/src/components/grant/MilestonesDrawer.tsx b/src/components/grant/MilestonesDrawer.tsx
@@ -4,6 +4,7 @@ import {
   Box,
   Button,
   Group,
+  NumberInput,
   Stack,
   Text,
   TextInput,
@@ -85,6 +86,10 @@ export const MilestonesDrawer = ({
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
+  const handleSetPerc = (value: number | string, id: string) => {
+    setFormData((prevData) => ({ ...prevData, [id]: value }));
+  };
+
   const handleDateChange = (dateObj: Date | null, key: string) => {
     if (!dateObj) return;
 
@@ -109,6 +114,8 @@ export const MilestonesDrawer = ({
     });
   };
 
+  console.log('formData', formData);
+
   const handlePostMilestones = async () => {
     setIsLoading(true);
 
@@ -239,7 +246,7 @@ export const MilestonesDrawer = ({
   const alreadyHasMilestones = !!currentMilestoneSet;
 
   return (
-    <PageDrawer opened={opened} onClose={onClose}>
+    <PageDrawer opened={opened} onClose={onClose} closeOnBack>
       <Group mt="40" mb="lg" w="100%" justify="space-between">
         <PlayerAvatar
           playerType={Player.Project}
@@ -286,18 +293,25 @@ export const MilestonesDrawer = ({
               </Text>
             )}
             <Group>
-              <TextInput
+              <NumberInput
                 required
                 fw={400}
                 label={`Percentage`}
                 name={`milestone-perc-${index + 1}`}
-                type="number"
                 placeholder="30"
+                suffix="%"
                 w={'48%'}
+                min={0}
+                max={100}
+                allowDecimal={false}
+                allowNegative={false}
                 value={formData[`milestone-perc-${index + 1}`]}
-                onChange={handleChanges}
+                onChange={(value) =>
+                  handleSetPerc(value, `milestone-perc-${index + 1}`)
+                }
                 mb="xs"
               />
+
               <DatePickerInput
                 required
                 fw={400}

diff --git a/src/components/grant/PostGrantDrawer.tsx b/src/components/grant/PostGrantDrawer.tsx
@@ -117,7 +117,12 @@ export const PostGrantDrawer = ({
   };
 
   return (
-    <PageDrawer pageTitle="Post Message" opened={opened} onClose={onClose}>
+    <PageDrawer
+      pageTitle="Post Message"
+      opened={opened}
+      onClose={onClose}
+      closeOnBack
+    >
       <Group mt="40" mb="lg" w="100%" justify="space-between">
         <PlayerAvatar
           playerType={playerType}

diff --git a/src/components/grant/SubmitMilestoneDrawer.tsx b/src/components/grant/SubmitMilestoneDrawer.tsx
@@ -136,7 +136,7 @@ export const SubmitMilestoneDrawer = ({
     currentMilestone?.status !== GameStatus.Accepted;
 
   return (
-    <PageDrawer opened={opened} onClose={onClose}>
+    <PageDrawer opened={opened} onClose={onClose} closeOnBack>
       <Group justify="space-between">
         <PlayerAvatar
           playerType={Player.Project}
@@ -160,7 +160,7 @@ export const SubmitMilestoneDrawer = ({
         onChange={setMilestoneId}
         value={milestoneId || currentMilestoneSet?.resolvedMilestones[0].id}
         data={
-          currentMilestoneSet?.resolvedMilestones.map((milestone, index) => {
+          currentMilestoneSet?.resolvedMilestones.map((milestone) => {
             return {
               value: milestone.id,
               label: (
@@ -177,7 +177,9 @@ export const SubmitMilestoneDrawer = ({
                   ) : (
                     <IconPennant size={16} />
                   )}
-                  <span style={{ fontWeight: 900 }}>Milestone {index + 1}</span>
+                  <span style={{ fontWeight: 900 }}>
+                    Milestone {milestone.index + 1}
+                  </span>
                 </Center>
               ),
             };

diff --git a/src/queries/getGrant.ts b/src/queries/getGrant.ts
@@ -200,9 +200,11 @@ export const getGrant = async (grantId: string) => {
         );
         return {
           ...set,
-          resolvedMilestones: resolvedMilestones.filter(
-            Boolean
-          ) as ResolvedMilestone[],
+          resolvedMilestones: resolvedMilestones
+            .filter(Boolean)
+            .sort((a, b) =>
+              a!.index > b!.index ? 1 : -1
+            ) as ResolvedMilestone[],
           tag: 'milestoneSet',
         } as MilestonesDisplay;
       } else {

diff --git a/src/queries/getShipPage.ts b/src/queries/getShipPage.ts
@@ -19,7 +19,6 @@ export const getShipPageData = async (id: string): Promise<ShipPageUI> => {
     if (!GrantShip?.[0]) {
       throw new Error('No ship found');
     }
-    console.log('GrantShip', GrantShip);
     const grantShip = GrantShip[0];
 
     const pointer = grantShip?.profileMetadata?.pointer;