Finishing touches

helium · Jun 21, 2024 · 8744416 · 8744416
1 parent 504398d
commit 8744416
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 41 deletions.
diff --git a/src/app/[network]/proxies/[wallet]/page.tsx b/src/app/[network]/proxies/[wallet]/page.tsx
@@ -8,6 +8,7 @@ import { VoteService, getRegistrarKey } from "@helium/voter-stake-registry-sdk";
 import { PublicKey } from "@solana/web3.js";
 import { HydrationBoundary, QueryClient, dehydrate, useQueryClient } from "@tanstack/react-query";
 import { useMemo } from "react";
+import { notFound } from "next/navigation";
 
 function getVoteService({ mint }: { mint: PublicKey }) {
   const registrar = getRegistrarKey(mint);
@@ -29,16 +30,22 @@ export default async function ProxyPage({
   const wallet = useMemo(() => new PublicKey(walletRaw), [walletRaw]);
   const queryClient = new QueryClient();
 
-  await queryClient.prefetchQuery(
+  // Do not use prefetch here, because we want to error when it errors
+  const result = await queryClient.fetchQuery(
     proxyQuery({
       wallet,
       voteService,
     })
   );
+
+
+  if (!result) {
+    return notFound();
+  }
+
   const dehydrated = dehydrate(
     queryClient,
   );
-  console.log(dehydrated);
 
   return (
     <>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -28,8 +28,6 @@
     --info-foreground: 217 91% 60%;
     --purple: 274 87 21%;
     --purple-foreground: 258 90 66%;
-    --pink: 336, 84%, 17%;
-    --pink-foreground: 330 81% 60%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 221.2 83.2% 53.3%;
@@ -48,7 +46,7 @@
     --secondary: 213 19% 32%;
     --secondary-foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 213 19% 56%;
+    --muted-foreground: 215 20.2% 65.1%;
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
     --destructive: 0 62.8% 30.6%;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -10,10 +10,8 @@ export const metadata = formMetaTags();
 
 export default function RootLayout({
   children,
-  dehydratedState,
 }: {
   children: React.ReactNode;
-  dehydratedState: any;
 }) {
   return (
     <html lang="en">

diff --git a/src/components/PositionCard.tsx b/src/components/PositionCard.tsx
@@ -8,7 +8,7 @@ import {
 } from "@/lib/utils";
 import { useGovernance } from "@/providers/GovernanceProvider";
 import { useSolanaUnixNow } from "@helium/helium-react-hooks";
-import { PositionWithMeta } from "@helium/voter-stake-registry-hooks";
+import { PositionWithMeta, useKnownProxy } from "@helium/voter-stake-registry-hooks";
 import BN from "bn.js";
 import classNames from "classnames";
 import Image from "next/image";
@@ -28,7 +28,6 @@ import { Skeleton } from "./ui/skeleton";
 import { PublicKey } from "@solana/web3.js";
 import { useAsync } from "react-async-hook";
 import { VoteService } from "@helium/voter-stake-registry-sdk";
-import { useKnownProxy } from "@/hooks/useKnownProxy";
 
 export const PositionCardSkeleton: FC<{ compact?: boolean }> = () => {
   const { network } = useGovernance();

diff --git a/src/components/PositionManager/ProxyPositionPrompt.tsx b/src/components/PositionManager/ProxyPositionPrompt.tsx
@@ -1,17 +1,15 @@
 "use client";
 
-import { PositionWithMeta } from "@helium/voter-stake-registry-hooks";
-import React, { FC, useMemo, useState } from "react";
-import { Button } from "../ui/button";
-import { Loader2, X } from "lucide-react";
-import { PositionCard } from "../PositionCard";
-import { useKnownProxy } from "@/hooks/useKnownProxy";
-import { ProxySearch } from "../ProxySearch";
-import { ExpirationTimeSlider } from "../ExpirationTimeSlider";
-import { PublicKey } from "@solana/web3.js";
-import { RiUserSharedFill } from "react-icons/ri";
 import { useGovernance } from "@/providers/GovernanceProvider";
+import { PositionWithMeta, useKnownProxy } from "@helium/voter-stake-registry-hooks";
+import { PublicKey } from "@solana/web3.js";
+import { Loader2, X } from "lucide-react";
 import Link from "next/link";
+import { FC, useMemo, useState } from "react";
+import { RiUserSharedFill } from "react-icons/ri";
+import { ExpirationTimeSlider } from "../ExpirationTimeSlider";
+import { ProxySearch } from "../ProxySearch";
+import { Button } from "../ui/button";
 
 export const ProxyPositionPrompt: FC<{
   position: PositionWithMeta;
@@ -22,9 +20,13 @@ export const ProxyPositionPrompt: FC<{
   const isProxied =
     position.proxy?.nextVoter &&
     !position.proxy?.nextVoter.equals(PublicKey.default);
-  const { knownProxy } = useKnownProxy(position.proxy?.nextVoter)
-  const [proxy, setProxy] = useState<string>(position.proxy?.nextVoter?.toBase58() || "")
-  const { network } = useGovernance()
+  const { knownProxy } = useKnownProxy(position.proxy?.nextVoter);
+  const [proxy, setProxy] = useState<string>(
+    position.proxy?.nextVoter.equals(PublicKey.default)
+      ? ""
+      : position.proxy?.nextVoter.toBase58() || ""
+  );
+  const { network } = useGovernance();
 
   const today = new Date();
   const augustFirst = Date.UTC(

diff --git a/src/components/Proxies.tsx b/src/components/Proxies.tsx
@@ -144,9 +144,12 @@ export function Proxies() {
                         title="Total Voting Power"
                         value={
                           proxy.delegatedVeTokens
-                            ? humanReadable(
-                                new BN(proxy.delegatedVeTokens),
-                                decimals
+                            ? // force 2 decimals
+                              humanReadable(
+                                new BN(proxy.delegatedVeTokens).div(
+                                  new BN(Math.pow(10, (decimals || 0) - 2))
+                                ),
+                                2
                               )!
                             : "0"
                         }

diff --git a/src/components/ProxyProfile.tsx b/src/components/ProxyProfile.tsx
@@ -10,10 +10,7 @@ import {
   useProxiedTo,
   useUnassignProxies,
 } from "@helium/voter-stake-registry-hooks";
-import {
-  VoteService,
-  getRegistrarKey
-} from "@helium/voter-stake-registry-sdk";
+import { VoteService, getRegistrarKey } from "@helium/voter-stake-registry-sdk";
 import { PublicKey } from "@solana/web3.js";
 import { useQuery } from "@tanstack/react-query";
 import BN from "bn.js";
@@ -42,7 +39,6 @@ export function ProxyProfile({ wallet: walletRaw }: { wallet: string }) {
       voteService,
     })
   );
-  console.log("raw", error);
   // Due to hydration, should always be present
   const proxy = proxyRaw!;
   const detail = proxy.detail;
@@ -93,8 +89,14 @@ export function ProxyProfile({ wallet: walletRaw }: { wallet: string }) {
               TOTAL POWER
             </div>
             <div className="text-white text-base font-medium leading-normal">
-              {proxy.delegatedVeTokens
-                ? humanReadable(new BN(proxy.delegatedVeTokens), decimals)
+              {proxy.delegatedVeTokens && decimals
+                ? // Force 2 decimals
+                  humanReadable(
+                    new BN(proxy.delegatedVeTokens).div(
+                      new BN(Math.pow(10, decimals - 2))
+                    ),
+                    2
+                  )
                 : "0"}
             </div>
           </div>
@@ -144,7 +146,10 @@ export function ProxyProfile({ wallet: walletRaw }: { wallet: string }) {
                   POWER FROM ME
                 </div>
                 <div className="text-white text-base font-medium leading-normal">
-                  {humanReadable(votingPower, decimals)}
+                  {humanReadable(
+                    votingPower.div(new BN(Math.pow(10, (decimals || 0) - 2))),
+                    2
+                  )}
                 </div>
               </div>
               <div className="flex-col flex-1 justify-center items-start gap-1 inline-flex">
@@ -177,15 +182,17 @@ export function ProxyProfile({ wallet: walletRaw }: { wallet: string }) {
             <div className="grow flex flex-row items-center gap-2">
               <Image
                 className="w-24 h-24 rounded-full"
-                src={image}
+                src={image || ""}
                 alt="Profile"
                 width={48}
                 height={48}
                 style={{ width: "48px", height: "48px" }}
               />
               <div className="flex flex-col gap-1">
                 <h1 className="text-2xl font-semibold">{proxy.name}</h1>
-                <span className="text-xs">{ellipsisMiddle(proxy.wallet)}</span>
+                <span className="text-xs">
+                  {proxy.wallet && ellipsisMiddle(proxy.wallet)}
+                </span>
               </div>
             </div>
             <div className="flex flex-row gap-8">
@@ -225,7 +232,7 @@ export function ProxyProfile({ wallet: walletRaw }: { wallet: string }) {
 
         <div className="md:hidden border-b-2 border-gray-600 mx-4 mb-2" />
         <CardContent>
-          <Markdown>{detail}</Markdown>
+          <Markdown>{detail || `${proxy.wallet}`}</Markdown>
           <div className="md:hidden">{infoCard}</div>
           <div className="flex flex-row justify-stretch gap-6">
             <div className="overflow-auto flex flex-col justify-stretch w-full">

diff --git a/src/components/ProxySearch.tsx b/src/components/ProxySearch.tsx
@@ -5,18 +5,23 @@ import React, { useMemo, useState } from "react";
 import { AutoComplete } from "./ui/autocomplete";
 import { Loader2 } from "lucide-react";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { proxiesQuery } from "@helium/voter-stake-registry-hooks";
+import {
+  proxiesQuery,
+  useHeliumVsrState,
+} from "@helium/voter-stake-registry-hooks";
 
 export const ProxySearch: React.FC<{
   value: string;
   onValueChange: (value: string) => void;
 }> = ({ value, onValueChange }) => {
   const [input, setInput] = useState<string>(value);
   const debouncedInput = useDebounce(input, 300);
-  const { data: resultPaged, isLoading, error } = useInfiniteQuery(
+  const { voteService } = useHeliumVsrState();
+  const { data: resultPaged, isLoading } = useInfiniteQuery(
     proxiesQuery({
       search: debouncedInput || "",
       amountPerPage: 20,
+      voteService,
     })
   );
 
@@ -38,7 +43,7 @@ export const ProxySearch: React.FC<{
   }, [resultPaged, debouncedInput]);
   const selectedOption = useMemo(() => {
     return result?.find((r) => r.value == value);
-  }, [result, value])
+  }, [result, value]);
 
   if (value && !selectedOption) {
     return <Loader2 className="w-4 h-4 animate-spin" />;

diff --git a/src/components/VoteHistory.tsx b/src/components/VoteHistory.tsx
@@ -123,7 +123,7 @@ const ProposalItem: React.FC<{
               name="Percent of Vote"
               value={
                 // Calc with 4 decimals precision
-                proposal.votes[0].weight
+                proposal.votes[0].weight && !votingResults.totalVotes.isZero()
                   ? (
                       new BN(proposal.votes[0].weight)
                         .mul(new BN(10000))

diff --git a/src/components/VoteOption.tsx b/src/components/VoteOption.tsx
@@ -7,8 +7,8 @@ import React, { FC } from "react";
 import { FaCircle, FaCircleCheck } from "react-icons/fa6";
 import { Loader2 } from "lucide-react";
 import { PublicKey } from "@solana/web3.js";
-import { useKnownProxy } from "@/hooks/useKnownProxy";
 import { Pill } from "./Pill";
+import { useKnownProxy } from "@helium/voter-stake-registry-hooks";
 
 export const VoteOption: FC<{
   option: VoteChoiceWithMeta;