wip

PotLock · Dec 31, 2024 · ae0e950 · ae0e950
1 parent b5a2f3a
commit ae0e950
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 82 deletions.
diff --git a/src/common/ui/components/atoms/alert.tsx b/src/common/ui/components/atoms/alert.tsx
@@ -51,7 +51,7 @@ const AlertTitle = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHea
   ({ className, ...props }, ref) => (
     <h5
       ref={ref}
-      className={cn("font-600 important:pl-8 text-[17px] leading-5 tracking-normal", className)}
+      className={cn("font-600 important:pl-10 text-[17px] leading-5 tracking-normal", className)}
       {...props}
     />
   ),
@@ -69,7 +69,7 @@ const AlertDescription = forwardRef<HTMLParagraphElement, AlertDescriptionProps>
       ref={ref}
       className={cn(
         "font-500 text-sm text-neutral-700 [&_p]:leading-relaxed",
-        { "important:pl-0": inline, "important:pl-8": !inline },
+        { "important:pl-0": inline, "important:pl-10": !inline },
         className,
       )}
       {...props}

diff --git a/src/entities/voting-round/components/Leaderboard.tsx b/src/entities/voting-round/components/Leaderboard.tsx
@@ -27,71 +27,67 @@ export const VotingRoundLeaderboard: React.FC<VotingRoundLeaderboardProps> = ({
     [votingRoundResults?.winners],
   );
 
-  return votingRoundResults === undefined
-    ? null
-    : // TODO: remove the placeholder once accumulated weight is calculated correctly
-      // @ts-expect-error WIP
-      ("🚧 Leaderboard coming soon 🚧" ?? (
-        <div className="md:max-w-126.5 flex w-full flex-col gap-3 rounded-3xl bg-neutral-50 p-3">
-          {leadingPositions.map(
-            ({ accountId, voteCount, accumulatedWeight, estimatedPayoutAmount }, index) => {
-              return (
-                <div
-                  key={accountId}
-                  className={cn(
-                    "elevation-low inline-flex h-16 items-center justify-start gap-2 md:gap-6",
-                    "bg-background overflow-hidden rounded-2xl p-3",
-                  )}
-                >
-                  <div
-                    className={cn(
-                      "flex h-8 w-8 shrink-0 items-center justify-center",
-                      "rounded-full border border-neutral-200",
-                    )}
-                  >
-                    <span className="text-right text-xs font-medium leading-none">{index + 1}</span>
-                  </div>
+  return votingRoundResults === undefined ? null : (
+    <div className="md:max-w-126.5 flex w-full flex-col gap-3 rounded-3xl bg-neutral-50 p-3">
+      {leadingPositions.map(
+        ({ accountId, voteCount, accumulatedWeight, estimatedPayoutAmount }, index) => {
+          return (
+            <div
+              key={accountId}
+              className={cn(
+                "elevation-low inline-flex h-16 items-center justify-start gap-2 md:gap-6",
+                "bg-background overflow-hidden rounded-2xl p-3",
+              )}
+            >
+              <div
+                className={cn(
+                  "flex h-8 w-8 shrink-0 items-center justify-center",
+                  "rounded-full border border-neutral-200",
+                )}
+              >
+                <span className="text-right text-xs font-medium leading-none">{index + 1}</span>
+              </div>
 
-                  <div className="flex h-10 shrink grow basis-0 items-center justify-start gap-4">
-                    <AccountProfilePicture className="h-10 w-10" {...{ accountId }} />
+              <div className="flex h-10 shrink grow basis-0 items-center justify-start gap-4">
+                <AccountProfilePicture className="h-10 w-10" {...{ accountId }} />
 
-                    <div
-                      className={
-                        "inline-flex shrink grow basis-0 flex-col items-start justify-start gap-1"
-                      }
-                    >
-                      <AccountHandle
-                        maxLength={22}
-                        className="font-600 text-neutral-950"
-                        {...{ accountId }}
-                      />
-
-                      <div className="self-stretch text-sm font-medium leading-tight text-neutral-500">
-                        {`${voteCount} votes weighing ${accumulatedWeight}`}
-                      </div>
-                    </div>
-                  </div>
+                <div
+                  className={
+                    "inline-flex shrink grow basis-0 flex-col items-start justify-start gap-1"
+                  }
+                >
+                  <AccountHandle
+                    maxLength={22}
+                    className="font-600 text-neutral-950"
+                    {...{ accountId }}
+                  />
 
-                  <div
-                    className={cn(
-                      "bg-peach-100 flex h-fit items-center justify-center",
-                      "rounded-lg py-1.5 pl-2 pr-3",
-                    )}
-                  >
-                    <LabeledIcon
-                      positioning="icon-text"
-                      caption={estimatedPayoutAmount.toFixed(2)}
-                      classNames={{
-                        caption: "font-600 text-sm gap-1.5 text-nowrap",
-                      }}
-                    >
-                      <TokenIcon tokenId={NATIVE_TOKEN_ID} className="color-peach-600" />
-                    </LabeledIcon>
+                  <div className="self-stretch text-sm font-medium leading-tight text-neutral-500">
+                    {`${voteCount} votes / total weight ${accumulatedWeight}`}
                   </div>
                 </div>
-              );
-            },
-          )}
-        </div>
-      ));
+              </div>
+
+              <div
+                className={cn(
+                  "bg-peach-100 flex h-fit items-center justify-center",
+                  "rounded-lg py-1.5 pl-2 pr-3",
+                )}
+              >
+                <LabeledIcon
+                  positioning="icon-text"
+                  caption={estimatedPayoutAmount.toFixed(2)}
+                  classNames={{
+                    caption: "font-600 text-sm gap-1.5 text-nowrap",
+                  }}
+                >
+                  <TokenIcon tokenId={NATIVE_TOKEN_ID} className="color-peach-600" />
+                </LabeledIcon>
+              </div>
+            </div>
+          );
+        },
+      )}
+    </div>
+  );
 };
diff --git a/src/entities/voting-round/model/round-results.ts b/src/entities/voting-round/model/round-results.ts
@@ -73,6 +73,7 @@ export const useRoundResultsStore = create<VotingRoundResultsState>()(
               : null;
 
             // TODO: Take from the voter info response instead ( when it's ready )
+            //! Bottleneck: RPC rate limit hit
             const stakingTokenBalance =
               stakingContractAccountId && stakingTokenMetadata
                 ? await ftClient
@@ -81,21 +82,10 @@ export const useRoundResultsStore = create<VotingRoundResultsState>()(
                     .catch(() => undefined)
                 : undefined;
 
-            const stakingTokenBalanceUsd =
-              stakingContractAccountId && stakingTokenBalance
-                ? await intearPricesClient
-                    .getSuperPrecisePrice(
-                      { token_id: stakingContractAccountId },
-                      PRICES_REQUEST_CONFIG.axios,
-                    )
-                    .then(({ data: price }) => Big(price).mul(stakingTokenBalance))
-                    .catch(() => undefined)
-                : undefined;
-
-            return [
-              voterAccountId,
-              { isHumanVerified, votingPower, stakingTokenBalance, stakingTokenBalanceUsd },
-            ] as [AccountId, VoterProfile];
+            return [voterAccountId, { isHumanVerified, votingPower, stakingTokenBalance }] as [
+              AccountId,
+              VoterProfile,
+            ];
           }),
         )
           .then((entries) => fromEntries(entries))

diff --git a/src/pages/pot/[potId]/payouts.tsx b/src/pages/pot/[potId]/payouts.tsx
@@ -133,7 +133,7 @@ export default function PayoutsTab() {
               <Button
                 variant="brand-outline"
                 onClick={handleVotingRoundResultsCsvDownload}
-                disabled // TODO: remove once accumulated weight is calculated correctly
+                // disabled // TODO: remove once accumulated weight is calculated correctly
               >
                 <MdFileDownload className="h-5 w-5" />
                 <span className="prose">{"Download CSV"}</span>

diff --git a/src/pages/pot/[potId]/votes.tsx b/src/pages/pot/[potId]/votes.tsx
@@ -140,9 +140,11 @@ export default function PotVotesTab() {
     </div>
   ) : (
     <div className="flex w-full flex-col gap-6">
-      <Alert variant={isVotingPeriodOngoing ? "neutral" : "warning"}>
+      <Alert
+        variant={isVotingPeriodOngoing ? "neutral" : "warning"}
+        className={cn({ "inline-with-icon": !isVotingPeriodOngoing })}
+      >
         <MdOutlineInfo className="color-neutral-400 h-6 w-6" />
-
         <AlertTitle>{`Voting round is ${isVotingPeriodOngoing ? "open" : "closed"}`}</AlertTitle>
 
         {isVotingPeriodOngoing && (

diff --git a/uno.config.ts b/uno.config.ts
@@ -171,6 +171,8 @@ export default defineConfig({
     "focus-shadow": "shadow-[var(--focus-shadow)]",
     "button-primary": "shadow-[var(--button-primary)]",
     "button-tonal": "shadow-[var(--button-tonal)]",
+
+    "inline-with-icon": "important:[&>svg]:top-a justify-center",
   },
 
   preflights: [