feat: add allocations ui mvp

apps/api/src/data/score-allocations.ts

@@ -1,43 +1,45 @@
+import { STATIC_IMAGES_URL } from '@hey/data/constants';
+
 const allocations = [
   {
     description: 'Early Bloomer Guild Rold',
-    icon: 'https://hey.xyz/earlybloomer.png',
+    icon: `${STATIC_IMAGES_URL}/app-icon/0.png`,
     id: 'EarlyBloomer',
     name: 'Early Bloomer'
   },
   {
     description: 'Gitcoin Grants Alpha Round',
-    icon: 'https://hey.xyz/gg-alpha.png',
+    icon: `${STATIC_IMAGES_URL}/brands/gitcoin.png`,
     id: 'GGAlpha',
     name: 'Gitcoin Grants Alpha Round'
   },
   {
     description: 'Gitcoin Grants Beta Round',
-    icon: 'https://hey.xyz/gg-beta.png',
+    icon: `${STATIC_IMAGES_URL}/brands/gitcoin.png`,
     id: 'GGBeta',
     name: 'Gitcoin Grants Beta Round'
   },
   {
     description: 'Gitcoin Round 14',
-    icon: 'https://hey.xyz/gg-14.png',
+    icon: `${STATIC_IMAGES_URL}/brands/gitcoin.png`,
     id: 'GR14',
     name: 'Gitcoin Round 14'
   },
   {
     description: 'Gitcoin Round 15',
-    icon: 'https://hey.xyz/gg-15.png',
+    icon: `${STATIC_IMAGES_URL}/brands/gitcoin.png`,
     id: 'GR15',
     name: 'Gitcoin Round 15'
   },
   {
     description: 'Gitcoin Grants Round 18',
-    icon: 'https://hey.xyz/gg-18.png',
+    icon: `${STATIC_IMAGES_URL}/brands/gitcoin.png`,
     id: 'GG18',
     name: 'Gitcoin Grants Round 18'
   },
   {
     description: 'Gitcoin Grants Round 19',
-    icon: 'https://hey.xyz/gg-19.png',
+    icon: `${STATIC_IMAGES_URL}/brands/gitcoin.png`,
     id: 'GG19',
     name: 'Gitcoin Grants Round 19'
   }

apps/api/src/routes/score/allocations.ts

@@ -16,6 +16,7 @@ export const get: Handler = async (req, res) => {
 
   try {
     const adjustedProfileScore = await prisma.adjustedProfileScore.findMany({
+      orderBy: { createdAt: 'desc' },
       where: {
         profileId: id as string,
         reason: { in: allocations.map((allocation) => allocation.id) }

apps/web/src/components/Profile/Score.tsx

@@ -31,7 +31,7 @@ const Score: FC<ScoreProps> = ({ id }) => {
     >
       <button
         className="font-mono text-xs font-bold"
-        onClick={() => setShowScoreModal(true, score.score)}
+        onClick={() => setShowScoreModal(true, score.score, id)}
       >
         {humanize(score.score)}
       </button>

apps/web/src/components/Shared/GlobalModals.tsx

@@ -153,7 +153,7 @@ const GlobalModals: FC = () => {
         <OptimisticTransactions />
       </Modal>
       <Modal
-        onClose={() => setShowScoreModal(false, null)}
+        onClose={() => setShowScoreModal(false, null, null)}
         show={showScoreModal}
         size="xs"
         title={`${APP_NAME} score`}

apps/web/src/components/Shared/Modal/Score.tsx

@@ -1,15 +1,39 @@
+import type { ScoreAllocation } from '@hey/types/hey';
 import type { FC } from 'react';
 
-import { APP_NAME, STATIC_IMAGES_URL } from '@hey/data/constants';
+import { ArrowLongRightIcon } from '@heroicons/react/24/outline';
+import { ArrowTrendingUpIcon } from '@heroicons/react/24/solid';
+import { APP_NAME, HEY_API_URL, STATIC_IMAGES_URL } from '@hey/data/constants';
 import humanize from '@hey/helpers/humanize';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
 import Link from 'next/link';
 import { useGlobalModalStateStore } from 'src/store/non-persisted/useGlobalModalStateStore';
 
 const Score: FC = () => {
-  const { score } = useGlobalModalStateStore();
+  const { score, scoreViewerProfileId } = useGlobalModalStateStore();
   const renderScore =
     score !== 0 ? (score ? humanize(score) : '...') : 'Not calculated yet';
 
+  const getAllocations = async (
+    profileId: null | string
+  ): Promise<ScoreAllocation[]> => {
+    try {
+      const response = await axios.get(`${HEY_API_URL}/score/allocations`, {
+        params: { id: profileId }
+      });
+      return response.data.result;
+    } catch {
+      return [];
+    }
+  };
+
+  const { data } = useQuery({
+    enabled: Boolean(scoreViewerProfileId),
+    queryFn: () => getAllocations(scoreViewerProfileId),
+    queryKey: ['getAllocations', scoreViewerProfileId]
+  });
+
   return (
     <div className="flex flex-col items-center space-y-5 p-5">
       <img
@@ -37,6 +61,30 @@ const Score: FC = () => {
           Read more about {APP_NAME} score
         </Link>
       </div>
+      {(data || [])?.length > 0 ? (
+        <div className="space-y-2">
+          {data?.map((allocation) => (
+            <div
+              className="flex items-center space-x-2 text-sm"
+              key={allocation.id}
+            >
+              <div className="flex items-center space-x-1 font-bold text-green-500">
+                <ArrowTrendingUpIcon className="size-4" />
+                <div>{allocation.score}</div>
+              </div>
+              <ArrowLongRightIcon className="size-4" />
+              <div className="flex items-center space-x-2">
+                <img
+                  alt={allocation.name}
+                  className="h-4"
+                  src={allocation.icon}
+                />
+                <div>{allocation.name}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : null}
     </div>
   );
 };

apps/web/src/components/Shared/Navbar/NavItems/Score.tsx

@@ -5,13 +5,15 @@ import humanize from '@hey/helpers/humanize';
 import cn from '@hey/ui/cn';
 import { useGlobalModalStateStore } from 'src/store/non-persisted/useGlobalModalStateStore';
 import { useScoreStore } from 'src/store/non-persisted/useScoreStore';
+import { useProfileStore } from 'src/store/persisted/useProfileStore';
 
 interface ScoreProps {
   className?: string;
   onClick?: () => void;
 }
 
 const Score: FC<ScoreProps> = ({ className = '', onClick }) => {
+  const { currentProfile } = useProfileStore();
   const { score } = useScoreStore();
   const { setShowScoreModal } = useGlobalModalStateStore();
 
@@ -22,7 +24,7 @@ const Score: FC<ScoreProps> = ({ className = '', onClick }) => {
         className
       )}
       onClick={() => {
-        setShowScoreModal(true, score);
+        setShowScoreModal(true, score, currentProfile?.id);
         onClick?.();
       }}
       type="button"

apps/web/src/store/non-persisted/useGlobalModalStateStore.ts

@@ -10,6 +10,7 @@ interface State {
   reportingProfile: null | Profile;
   reportingPublicationId: null | string;
   score: null | number;
+  scoreViewerProfileId: null | string;
   setShowAuthModal: (
     showAuthModal: boolean,
     authModalType?: AuthModalType
@@ -30,7 +31,11 @@ interface State {
     reportProfileModal: boolean,
     reportingProfile: null | Profile
   ) => void;
-  setShowScoreModal: (showScoreModal: boolean, score: null | number) => void;
+  setShowScoreModal: (
+    showScoreModal: boolean,
+    score: null | number,
+    scoreViewerProfileId: null | string
+  ) => void;
   showAuthModal: boolean;
   showDiscardModal: boolean;
   showInvitesModal: boolean;
@@ -48,6 +53,7 @@ const store = create<State>((set) => ({
   reportingProfile: null,
   reportingPublicationId: null,
   score: null,
+  scoreViewerProfileId: null,
   setShowAuthModal: (showAuthModal, authModalType) => {
     set(() => ({ authModalType, showAuthModal }));
   },
@@ -69,8 +75,8 @@ const store = create<State>((set) => ({
     })),
   setShowReportProfileModal: (showReportProfileModal, reportingProfile) =>
     set(() => ({ reportingProfile, showReportProfileModal })),
-  setShowScoreModal: (showScoreModal, score) =>
-    set(() => ({ score, showScoreModal })),
+  setShowScoreModal: (showScoreModal, score, scoreViewerProfileId) =>
+    set(() => ({ score, scoreViewerProfileId, showScoreModal })),
   showAuthModal: false,
   showDiscardModal: false,
   showInvitesModal: false,

packages/types/hey.d.ts

@@ -106,3 +106,11 @@ export type Draft = {
   id: string;
   updatedAt: Date;
 };
+
+export type ScoreAllocation = {
+  description: string;
+  icon: string;
+  id: string;
+  name: string;
+  score: number;
+};