UX improvements + custom user description (#158)

* Upgrade accounting page for moloch v3 (#149) * Add v2 and v3 panels for each tab (#131) Co-authored-by: growindiedev <[email protected]> * PR for #132 (#138) * organise memos in one hook * split useAccounting into useAccountingV2 & useAccountingV3 * Remove useAccounting hook --------- Co-authored-by: ECWireless <[email protected]> * needs clean up * cleaned up useAccountingV3 * [WIP] Accounting Fixes + Transaction Data (#141) * fix issue * fetch tx data * proposal data * wip * wip2 * fetch all transactions * use bigint for calculating sum of in/out flows * transactions * cache results * display member & proposal & proposal link * fix proposals * fix type * cleanup * set balancesWithPricesV3 data for csv export fix * add elapsed days and ragequit shares * add in/out/balance USD * rename * fix types * token symbol value --------- Co-authored-by: vidvidvid <[email protected]> * render v3 spoils in spoils table (#148) * remove V2 data from accounting and fixed type and export errors * fetch smartInvoices and add query to fecth raids * create formatSpoils function and raids query mvp * unsuccessful attempt to fetch raids in useAccountingV3 * fetch invoice and raids and map them together using formatSpoils * render formatted spoils in spoilsTable * clean up useAccountingV3 & useFormattedDataV3 * cleanup accounting.tsx * change file names for useFormattedData to useFormattedAccountingV3 * Minor tweaks --------- Co-authored-by: growindiedev <[email protected]> Co-authored-by: Abhishek Ranjan <[email protected]> Co-authored-by: Sero <[email protected]> Co-authored-by: vidvidvid <[email protected]> * Add invoices table and allow for Optimism chain invoices (#147) * Add invoices table * Remove unused remote schemas * Add Optimism to escrow network config * Prompt user to switch chain if unsupported * Add warnings for Optimism and Mainnet chains * Prevent RIP escrow on Optimism * Ensure that user is always on the right chain * Restrict to native USDC on Optimism * Add insert invoice to Hasura functionality * Add created_at and updated_at columns * Ensure create escrow link allows chain selection * Add chain ID to escrow confirmation * Render chain ID name to raid and escrow pages * Format amounts with correct decimals * Allow member access to invoice table (#152) * Update smart invoice subgraph versions (#154) * fix member reload * fix user card content overflow * set up migration & textarea * display description instead of introduction * reuse Description component * cleanup * Upgrade smart invoice optimism subgraph to v0.0.3 (#161) * Upgrade smart invoice optimism subgraph to v0.0.3 * Update how escrows are fetched in accounting page --------- Co-authored-by: ECWireless <[email protected]> Co-authored-by: growindiedev <[email protected]> Co-authored-by: Abhishek Ranjan <[email protected]> Co-authored-by: Sero <[email protected]> Co-authored-by: ECWireless <[email protected]> Co-authored-by: Sayo <[email protected]>
raid-guild · Nov 22, 2024 · d9273dd · d9273dd
1 parent e08c042
commit d9273dd
Show file tree

Hide file tree

Showing 12 changed files with 142 additions and 66 deletions.
diff --git a/apps/frontend/components/Description.tsx b/apps/frontend/components/Description.tsx
@@ -0,0 +1,55 @@
+import { Button, Collapse, Text, VStack } from '@raidguild/design-system';
+import React, { useEffect, useRef, useState } from 'react';
+
+const Description = ({
+  description,
+  startingHeight = 75,
+  label,
+}: {
+  description: string;
+  startingHeight?: number;
+  label?: string;
+}) => {
+  const [showFullDescription, setShowFullDescription] = useState(false);
+  const [showToggle, setShowToggle] = useState(false);
+  const textRef = useRef<HTMLDivElement>(null);
+
+  const handleToggleDesc = () => setShowFullDescription(!showFullDescription);
+
+  useEffect(() => {
+    if (textRef.current) {
+      const { clientHeight } = textRef.current;
+      setShowToggle(clientHeight > startingHeight);
+    }
+  }, [description, startingHeight]);
+
+  return (
+    <VStack align='flex-start' width='100%'>
+      {label && (
+        <Text fontSize='xs' color='purple.200' textTransform='capitalize'>
+          {label}
+        </Text>
+      )}
+      <Collapse startingHeight={startingHeight} in={showFullDescription}>
+        <div ref={textRef}>
+          <Text color='white' fontSize='md'>
+            {description}
+          </Text>
+        </div>
+      </Collapse>
+      {showToggle && (
+        <Button
+          onClick={handleToggleDesc}
+          color='gray.400'
+          size='sm'
+          fontWeight='normal'
+          variant='link'
+        >
+          {showFullDescription ? 'Show Less' : 'Show More'}
+        </Button>
+      )}
+    </VStack>
+  );
+};
+
+export default Description;
diff --git a/apps/frontend/components/MemberDetailsCard.tsx b/apps/frontend/components/MemberDetailsCard.tsx
@@ -24,6 +24,7 @@ import { FaDiscord, FaEthereum, FaGithub, FaTwitter } from 'react-icons/fa';
 import { useAccount } from 'wagmi';
 
 import { useOverlay } from '../contexts/OverlayContext';
+import Description from './Description';
 import MemberAvatar from './MemberAvatar';
 import UpdateMemberForm from './MemberUpdateForm';
 import ModalWrapper from './ModalWrapper';
@@ -32,18 +33,18 @@ interface MemberProps {
   application?: IApplication;
   height?: string;
   member?: IMember;
-  memberReload?: () => void;
   showHeader?: boolean;
   width?: string;
+  minHeight?: string;
 }
 
 const MemberDetailsCard = ({
   application,
   height,
   member,
-  memberReload,
   showHeader = false,
   width,
+  minHeight,
 }: MemberProps) => {
   const toast = useToast();
   const copyDiscord = useClipboard(
@@ -189,6 +190,7 @@ const MemberDetailsCard = ({
       minW={[null, null, null, '500px']}
       w={['100%', null, null, width ?? '60%']}
       h={height ?? 'max-content'}
+      minHeight={minHeight}
     >
       <ModalWrapper
         name='memberForm'
@@ -198,13 +200,19 @@ const MemberDetailsCard = ({
       >
         <UpdateMemberForm
           member={member}
+          introduction={application?.introduction}
           memberAddress={memberAddress}
           memberId={_.get(member, 'id')}
-          memberReload={memberReload}
           closeModal={closeModals}
         />
       </ModalWrapper>
-      <Card variant='filled' w='100%' h={height ?? 'max-content'} p={4}>
+      <Card
+        variant='filled'
+        w='100%'
+        h={height ?? 'max-content'}
+        p={4}
+        minHeight={minHeight}
+      >
         {showHeader && (
           <>
             <Flex w='100%' justifyContent='space-between'>
@@ -287,10 +295,16 @@ const MemberDetailsCard = ({
             </Flex>
           ))}
 
-          {_.get(application, 'introduction') && (
+          {(_.get(member, 'description') ||
+            _.get(application, 'introduction')) && (
             <>
               <Divider color='gray.200' />
-              <Text size='md'>{_.get(application, 'introduction')}</Text>
+              <Description
+                description={
+                  _.get(member, 'description') ||
+                  _.get(application, 'introduction')
+                }
+              />
             </>
           )}
 

diff --git a/apps/frontend/components/MemberUpdateForm.tsx b/apps/frontend/components/MemberUpdateForm.tsx
@@ -1,6 +1,13 @@
 /* eslint-disable dot-notation */
-import { Box, Button, Input, Select, Stack } from '@raidguild/design-system';
-import { useMemberUpdate } from '@raidguild/dm-hooks';
+import {
+  Box,
+  Button,
+  Input,
+  Select,
+  Stack,
+  Textarea,
+} from '@raidguild/design-system';
+import { useMemberDetail, useMemberUpdate } from '@raidguild/dm-hooks';
 import { IMember } from '@raidguild/dm-types';
 import {
   GUILD_CLASS_OPTIONS,
@@ -14,16 +21,16 @@ import { useForm } from 'react-hook-form';
 
 interface UpdateMemberFormProps {
   member: IMember;
+  introduction?: string;
   memberAddress?: string;
   memberId?: string;
-  memberReload?: () => void;
   closeModal?: () => void;
 }
 const UpdateMemberForm = ({
   member,
+  introduction,
   memberAddress,
   memberId,
-  memberReload,
   closeModal,
 }: UpdateMemberFormProps) => {
   const [sending, setSending] = useState(false);
@@ -36,6 +43,8 @@ const UpdateMemberForm = ({
     memberAddress,
   });
 
+  const { refetch } = useMemberDetail({ memberAddress, token });
+
   const localForm = useForm({
     mode: 'all',
   });
@@ -106,6 +115,7 @@ const UpdateMemberForm = ({
       member_updates: {
         name: values.memberName ?? member.name,
         is_raiding: values?.isRaiding?.value ?? member?.isRaiding,
+        description: values.description ?? member?.description,
       },
       skills_updates: [...updatePrimarySkills, ...updateSecondarySkills],
       guild_classes_updates: updateGuildClasses,
@@ -118,7 +128,8 @@ const UpdateMemberForm = ({
         telegram: values.telegramHandle ?? member?.contactInfo?.telegram,
       },
     });
-    memberReload();
+
+    await refetch();
     closeModal();
     setSending(false);
   }
@@ -250,6 +261,15 @@ const UpdateMemberForm = ({
                   localForm={localForm}
                 />
 
+                <Textarea
+                  name='description'
+                  defaultValue={member?.description || introduction || ''}
+                  aria-label='Enter your description'
+                  placeholder='Tell us about yourself'
+                  label='Member Description'
+                  localForm={localForm}
+                />
+
                 <Button isLoading={isSubmitting || sending} type='submit'>
                   Update Profile
                 </Button>

diff --git a/apps/frontend/components/RaidDetailsCard.tsx b/apps/frontend/components/RaidDetailsCard.tsx
@@ -28,56 +28,17 @@ import {
   truncateEmail,
 } from '@raidguild/dm-utils';
 import { format } from 'date-fns';
-import _, { result } from 'lodash';
-import link from 'next/link';
+import _ from 'lodash';
 import { useState } from 'react';
 
+import Description from './Description';
 import InfoStack from './InfoStack';
 
 interface RaidProps {
   raid?: IRaid;
   consultation?: IConsultation;
 }
 
-const Description = ({
-  description,
-  label,
-}: {
-  description: string;
-  label?: string;
-}) => {
-  const [showFullDescription, setShowFullDescription] = useState(false);
-  const handleToggleDesc = () => setShowFullDescription(!showFullDescription);
-
-  return (
-    <VStack align='flex-start'>
-      {label && (
-        <Text fontSize='xs' color='purple.200' textTransform='capitalize'>
-          {label}
-        </Text>
-      )}
-      <Collapse startingHeight={25} in={showFullDescription}>
-        <Text color='white' fontSize='md'>
-          {description !== null
-            ? description
-            : 'There is no project description.'}
-        </Text>
-      </Collapse>
-      {description !== null && description?.length > 100 && (
-        <Button
-          onClick={handleToggleDesc}
-          color='gray.400'
-          size='sm'
-          fontWeight='normal'
-          variant='link'
-        >
-          {showFullDescription === true ? 'Show Less' : 'Show More'}
-        </Button>
-      )}
-    </VStack>
-  );
-};
-
 const Bio = ({ bio }: { bio: string }) => {
   const [showFullBio, setShowFullBio] = useState(false);
   const handleToggleBio = () => setShowFullBio(!showFullBio);
@@ -186,10 +147,26 @@ const RaidDetailsCard = ({ raid, consultation }: RaidProps) => {
         items: _.compact([category, slug, repoLink, resultLink, imageUrl]),
         extra: (
           <Stack>
-            <Description description={description} label='What We Did' />
-            <Description description={challenge} label='The Challenge' />
-            <Description description={approach} label='Our Approach' />
-            <Description description={projectResult} label='Result' />
+            <Description
+              description={description || 'There is no project description.'}
+              label='What We Did'
+              startingHeight={25}
+            />
+            <Description
+              description={challenge || 'There is no challenge description.'}
+              label='The Challenge'
+              startingHeight={25}
+            />
+            <Description
+              description={approach || 'There is no approach description.'}
+              label='Our Approach'
+              startingHeight={25}
+            />
+            <Description
+              description={projectResult || 'There is no result description.'}
+              label='Result'
+              startingHeight={25}
+            />
           </Stack>
         ),
       };
@@ -286,7 +263,12 @@ const RaidDetailsCard = ({ raid, consultation }: RaidProps) => {
           ),
         },
       ]),
-      extra: <Description description={_.get(consultation, 'description')} />,
+      extra: (
+        <Description
+          description={_.get(consultation, 'description')}
+          startingHeight={25}
+        />
+      ),
     },
     {
       title: 'Key Links',

diff --git a/apps/frontend/pages/index.tsx b/apps/frontend/pages/index.tsx
@@ -186,7 +186,7 @@ const Home = () => {
               member={member}
               application={_.get(member, 'application')}
               width='500px'
-              height='650px'
+              minHeight='650px'
               showHeader
             />
           </Flex>

diff --git a/apps/frontend/pages/members/[member].tsx b/apps/frontend/pages/members/[member].tsx
@@ -40,7 +40,7 @@ const Member = ({ memberAddress }: Props) => {
   const { data: session } = useSession();
   const token = _.get(session, 'token');
 
-  const { data, refetch } = useMemberDetail({ memberAddress, token });
+  const { data } = useMemberDetail({ memberAddress, token });
   const member = _.get(data, 'member');
   const raids = _.get(data, 'raids');
 
@@ -117,7 +117,6 @@ const Member = ({ memberAddress }: Props) => {
         >
           <MemberDetailsCard
             member={member}
-            memberReload={refetch}
             application={_.get(member, 'application')}
           />
           {/* <RaidsFeed /> */}

diff --git a/libs/dm-graphql/src/fragments/members.ts b/libs/dm-graphql/src/fragments/members.ts
@@ -39,6 +39,7 @@ export const MEMBER_DETAIL_FRAGMENT = gql`
     name
     eth_address
     is_raiding
+    description
     ...MemberEnum
 
     contact_info {

diff --git a/libs/dm-hooks/src/useAccountingV3.ts b/libs/dm-hooks/src/useAccountingV3.ts
@@ -14,12 +14,14 @@ import {
   GNOSIS_SAFE_ADDRESS,
   GUILD_GNOSIS_DAO_ADDRESS_V3,
 } from '@raidguild/dm-utils';
+import { client as getEscrowClient } from '@raidguild/escrow-gql';
 import { NETWORK_CONFIG } from '@raidguild/escrow-utils';
 import { useInfiniteQuery, useQueries, useQuery } from '@tanstack/react-query';
 import { GraphQLClient } from 'graphql-request';
 import _ from 'lodash';
 import { useSession } from 'next-auth/react';
 import { getAddress } from 'viem';
+import { gnosis } from 'viem/chains';
 
 const graphUrl = (chainId: number = 4) =>
   `https://api.thegraph.com/subgraphs/name/${_.get(NETWORK_CONFIG, [
@@ -137,9 +139,7 @@ const useAccountingV3 = () => {
     `https://gateway-arbitrum.network.thegraph.com/api/${process.env.NEXT_PUBLIC_THE_GRAPH_API_KEY}/subgraphs/id/6x9FK3iuhVFaH9sZ39m8bKB5eckax8sjxooBPNKWWK8r`
   );
 
-  const v3ClientInvoices = new GraphQLClient(
-    `https://api.studio.thegraph.com/proxy/78711/smart-invoice-gnosis/v0.0.1/`
-  );
+  const v3ClientInvoices = getEscrowClient(gnosis.id);
 
   const {
     isError: raidsIsError,

diff --git a/libs/dm-types/src/members.ts b/libs/dm-types/src/members.ts
@@ -8,6 +8,7 @@ export interface IMember {
   id: string;
   name: string;
   isRaiding: boolean;
+  description?: string;
   skills: Skills[];
   membersGuildClasses: {
     guildClassKey: string;
@@ -48,6 +49,7 @@ export interface IMemberUpdate {
   member_updates?: {
     name?: string;
     is_raiding?: boolean;
+    description?: string;
   };
 
   skills_updates?: {