feat: styling and graphql improvements

lutralabs · Jun 10, 2024 · 992e837 · 992e837
1 parent a58d327
commit 992e837
Show file tree

Hide file tree

Showing 13 changed files with 165 additions and 32 deletions.
diff --git a/packages/dapp/src/__generated__/ees/gql.ts b/packages/dapp/src/__generated__/ees/gql.ts
diff --git a/packages/dapp/src/__generated__/ees/graphql.ts b/packages/dapp/src/__generated__/ees/graphql.ts
diff --git a/packages/dapp/src/app/profile/[slug]/PageSkeleton.tsx b/packages/dapp/src/app/profile/[slug]/PageSkeleton.tsx
@@ -18,6 +18,7 @@ export const PageSkeleton = () => {
               <Skeleton className="w-[100px] h-8 bg-primary-200 rounded-3xl" />
             </div>
             <Skeleton className="mt-2 w-[260px] h-6 bg-primary-200 rounded-3xl" />
+            <Skeleton className="mt-2 w-[260px] h-6 bg-primary-200 rounded-3xl" />
           </div>
         </div>
         <div className="w-full">

diff --git a/packages/dapp/src/app/profile/[slug]/ShareDialog.tsx b/packages/dapp/src/app/profile/[slug]/ShareDialog.tsx
@@ -46,7 +46,7 @@ export function ShareDialog({
         <DialogHeader>
           <DialogTitle>Share this profile</DialogTitle>
           <DialogDescription>
-            Share your profile with others to get more endorsements!
+            Share the profile with others to get more endorsements!
           </DialogDescription>
         </DialogHeader>
 

diff --git a/packages/dapp/src/app/profile/[slug]/Summary.tsx b/packages/dapp/src/app/profile/[slug]/Summary.tsx
@@ -43,11 +43,10 @@ export const Summary = async ({ account, network }: SummaryProps) => {
           )}
           {topEndorsers.map((endorser) => (
             <Fragment key={endorser.id}>
-              <Suspense fallback={<UserBadgeSkeleton />}>
-                <UserBadge
-                  address={endorser.from.id}
-                  totalEndorsements={endorser.from.totalEndorsementsReceived}
-                />
+              <Suspense
+                fallback={<UserBadgeSkeleton isEndorsementBadge={true} />}
+              >
+                <UserBadge address={endorser.from.id} />
               </Suspense>
             </Fragment>
           ))}
@@ -76,7 +75,9 @@ export const Summary = async ({ account, network }: SummaryProps) => {
           )}
           {topDonators.map((donator) => (
             <Fragment key={donator.id}>
-              <Suspense fallback={<UserBadgeSkeleton />}>
+              <Suspense
+                fallback={<UserBadgeSkeleton isEndorsementBadge={false} />}
+              >
                 <UserBadge
                   address={donator.from.id}
                   donationAmount={donator.donationAmount}

diff --git a/packages/dapp/src/app/profile/[slug]/UserBadge.tsx b/packages/dapp/src/app/profile/[slug]/UserBadge.tsx
@@ -9,21 +9,18 @@ import Link from 'next/link';
 
 type UserBadgeProps = {
   address: `0x${string}`;
-  totalEndorsements?: string;
   donationAmount?: string;
 };
 
 export const UserBadge = async ({
   address,
-  totalEndorsements,
   donationAmount,
 }: UserBadgeProps) => {
   const data = await getMinimalProfileFromAddress(address);
 
-  const title = totalEndorsements ? 'Endorsements' : 'Tips';
-  const value = totalEndorsements
-    ? totalEndorsements
-    : `${Number(formatEther(BigInt(donationAmount ?? '0'))).toFixed(4)} ETH`;
+  const value = `${Number(formatEther(BigInt(donationAmount ?? '0'))).toFixed(
+    4
+  )} ETH`;
 
   return (
     <Link
@@ -41,12 +38,16 @@ export const UserBadge = async ({
               <div className="pb-1">
                 {data.displayName ?? formatAddress(address)}
               </div>
-              <div className="font-normal text-primary text-center text-xs">
-                {title}
-              </div>
-              <div className="font-normal text-primary text-center text-xs">
-                {value}
-              </div>
+              {donationAmount && (
+                <>
+                  <div className="font-normal text-primary text-center text-xs">
+                    Tips
+                  </div>
+                  <div className="font-normal text-primary text-center text-xs">
+                    {value}
+                  </div>
+                </>
+              )}
             </div>
           </Card>
         </div>
@@ -55,7 +56,9 @@ export const UserBadge = async ({
   );
 };
 
-export const UserBadgeSkeleton = () => {
+export const UserBadgeSkeleton = ({
+  isEndorsementBadge,
+}: { isEndorsementBadge: boolean }) => {
   return (
     <div className="flex justify-center items-center">
       <div className="w-[128px] h-[120px] relative">
@@ -70,8 +73,12 @@ export const UserBadgeSkeleton = () => {
         <Card className="absolute h-18 text-sm w-full bottom-[-16px] p-2 hover:bg-gray-50 animated-transition">
           <div className="w-full flex flex-col gap-y-2 justify-center items-center font-medium">
             <Skeleton className="w-24 h-4 pb-1 rounded-full bg-primary-200" />
-            <Skeleton className="w-20 h-3 rounded-full bg-primary-200" />
-            <Skeleton className="w-12 h-3 rounded-full bg-primary-200" />
+            {!isEndorsementBadge && (
+              <>
+                <Skeleton className="w-20 h-3 rounded-full bg-primary-200" />
+                <Skeleton className="w-12 h-3 rounded-full bg-primary-200" />
+              </>
+            )}
           </div>
         </Card>
       </div>

diff --git a/packages/dapp/src/app/profile/[slug]/page.tsx b/packages/dapp/src/app/profile/[slug]/page.tsx
@@ -16,6 +16,7 @@ import { Badges } from './Badges';
 import { ShareDialog } from './ShareDialog';
 import { ProfileAvatar } from '@/components/ProfileAvatar';
 import { Feed } from './Feed';
+import { getAggregatedAccountData } from '@/lib/ees';
 
 type PageProps = {
   params: { slug: string };
@@ -34,6 +35,11 @@ export default async function Page({
   const avatar = getAvatarForPlatform(data, _platform);
   const basicProfileInfo = getBasicPlatformProfileInfo(data, _platform);
 
+  const accountAggregatedData = await getAggregatedAccountData({
+    account: mainAddress,
+    chainId: _network,
+  });
+
   return (
     <Container className="pt-16 max-w-[1440px] overflow-auto">
       <div className="flex max-lg:flex-col w-full gap-4">
@@ -54,6 +60,9 @@ export default async function Page({
                 }
               />
             </div>
+            <div className="text-xl mt-2 font-semibold">
+              Endorsements: {accountAggregatedData.totalEndorsementsReceived}
+            </div>
             {basicProfileInfo.description && (
               <div className="text-lg py-2 font-semibold">
                 {basicProfileInfo.description}

diff --git a/packages/dapp/src/components/Navbar/Searchbar.tsx b/packages/dapp/src/components/Navbar/Searchbar.tsx
@@ -193,7 +193,7 @@ export const Searchbar = () => {
   return (
     <div
       className={cn(
-        'w-full flex max-lg:justify-end 2xl:w-full',
+        'w-full flex max-lg:justify-end 2xl:w-full xl:pr-0',
         address ? 'lg:pr-14 lg:w-[80%]' : 'lg:w-full'
       )}
     >

diff --git a/packages/dapp/src/lib/ees/getAggregatedAccountData.ts b/packages/dapp/src/lib/ees/getAggregatedAccountData.ts
@@ -0,0 +1,82 @@
+import {
+  GetAggregatedAccountDataDocument,
+  type GetAggregatedAccountDataQuery,
+} from '@/__generated__/ees/graphql';
+import { getGraphqlApiUrl } from './getGraphqlApiUrl';
+
+type GetTopEndorsersAndDonatorsDocument = {
+  totalEndorsementsReceived: string;
+  totalEndorsementsSent: string;
+  totalDonationsReceived: string;
+  totalDonationsSent: string;
+  error: string | null;
+};
+
+export const getAggregatedAccountData = async ({
+  chainId,
+  account,
+}: {
+  chainId: number;
+  account: string;
+}): Promise<GetTopEndorsersAndDonatorsDocument> => {
+  try {
+    const graphqlUrl = getGraphqlApiUrl(chainId);
+
+    const result = await fetch(graphqlUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        query: GetAggregatedAccountDataDocument,
+        variables: {
+          account,
+        },
+      }),
+      // Cache for 1 minute
+      next: { revalidate: 60 },
+    });
+
+    // Check if request was successful
+    if (!result.ok) {
+      return {
+        totalEndorsementsReceived: '0',
+        totalEndorsementsSent: '0',
+        totalDonationsReceived: '0',
+        totalDonationsSent: '0',
+        error: 'Failed to fetch data',
+      };
+    }
+
+    const jsonResponse = await result.json();
+
+    // Check if we successfully decoded the response
+    if (!jsonResponse) {
+      return {
+        totalEndorsementsReceived: '0',
+        totalEndorsementsSent: '0',
+        totalDonationsReceived: '0',
+        totalDonationsSent: '0',
+        error: 'Failed to fetch data',
+      };
+    }
+
+    const data = jsonResponse.data as GetAggregatedAccountDataQuery;
+
+    return {
+      totalEndorsementsReceived: data.account?.totalEndorsementsReceived ?? '0',
+      totalEndorsementsSent: data.account?.totalEndorsementsSent ?? '0',
+      totalDonationsReceived: data.account?.totalDonationsReceived ?? '0',
+      totalDonationsSent: data.account?.totalDonationsSent ?? '0',
+      error: null,
+    };
+  } catch (error) {
+    return {
+      totalEndorsementsReceived: '0',
+      totalEndorsementsSent: '0',
+      totalDonationsReceived: '0',
+      totalDonationsSent: '0',
+      error: 'Failed to fetch data',
+    };
+  }
+};
diff --git a/packages/dapp/src/lib/ees/getTopEndorsersAndDonators.ts b/packages/dapp/src/lib/ees/getTopEndorsersAndDonators.ts
@@ -55,9 +55,11 @@ export const getTopEndorsersAndDonators = async ({
       };
     }
 
+    const data = jsonResponse.data as GetTopEndorsersAndDonatorsQuery;
+
     return {
-      topEndorsers: jsonResponse.data.topEndorsers ?? [],
-      topDonators: jsonResponse.data.topDonators ?? [],
+      topEndorsers: data.topEndorsers ?? [],
+      topDonators: data.topDonators ?? [],
       error: null,
     };
   } catch (error) {

diff --git a/packages/dapp/src/lib/ees/index.ts b/packages/dapp/src/lib/ees/index.ts
@@ -1,2 +1,3 @@
 export * from './getGraphqlApiUrl';
 export * from './getTopEndorsersAndDonators';
+export * from './getAggregatedAccountData';
diff --git a/packages/dapp/src/lib/graphql/ees/getAggregatedAccountData.query.graphql b/packages/dapp/src/lib/graphql/ees/getAggregatedAccountData.query.graphql
@@ -0,0 +1,9 @@
+query GetAggregatedAccountData($account: ID!) {
+  account(id: $account) {
+    id
+    totalEndorsementsReceived
+    totalEndorsementsSent
+    totalDonationsReceived
+    totalDonationsSent
+  }
+}
diff --git a/packages/dapp/src/lib/graphql/ees/getTopEndorsersAndDonators.query.graphql b/packages/dapp/src/lib/graphql/ees/getTopEndorsersAndDonators.query.graphql
@@ -8,11 +8,10 @@ query GetTopEndorsersAndDonators($account: String!) {
     id
     from {
       id
-      totalEndorsementsReceived
     }
   }
   topDonators: aggregatedInformations(
-    where: {to: $account}
+    where: {to: $account, donationAmount_gt: 0}
     orderBy: donationAmount
     orderDirection: desc
     first: 6