Fix top callouts

src/components/VeTokensCallout.tsx

@@ -13,9 +13,10 @@ import {
   calcPositionVotingPower,
   usePositionKeysAndProxies,
   usePositions,
-  useRegistrar
+  useRegistrar,
+  useRegistrarForMint,
 } from "@helium/voter-stake-registry-hooks";
-import { getRegistrarKey } from "@helium/voter-stake-registry-sdk";
+import { getRegistrarKey, VoteService } from "@helium/voter-stake-registry-sdk";
 import { PublicKey } from "@solana/web3.js";
 import BN from "bn.js";
 import Image from "next/image";
@@ -26,22 +27,25 @@ const VeTokenItem: FC<{ mint: PublicKey }> = ({ mint }) => {
   const { wallet, connection } = provider || {};
   const unixNow = useSolanaUnixNow() || Date.now() / 1000;
   const decimals = useMint(mint)?.info?.decimals;
-  const registrarKey = useMemo(
-    () => mint && getRegistrarKey(mint),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [mint?.toBase58()]
-  );
+  const { registrarKey } = useRegistrarForMint(mint);
+  const urlVoteService = useMemo(() => {
+    return registrarKey
+      ? new VoteService({
+          baseURL: process.env.NEXT_PUBLIC_HELIUM_VOTE_URI,
+          registrar: registrarKey,
+        })
+      : undefined;
+  }, [registrarKey]);
   const { info: registrar } = useRegistrar(registrarKey);
 
-  const { voteService } = useGovernance();
   const {
     positionKeys,
     proxiedPositionKeys,
     isLoading: loadingPositionKeys,
   } = usePositionKeysAndProxies({
     wallet: wallet?.publicKey,
     provider,
-    voteService,
+    voteService: urlVoteService,
   });
 
   // Assume that my positions are a small amount, so we don't need to say they're static
@@ -50,7 +54,7 @@ const VeTokenItem: FC<{ mint: PublicKey }> = ({ mint }) => {
   // Proxied positions may be a lot, set to static
   const { accounts: proxiedPositions, loading: loadingProxyPositions } =
     usePositions(proxiedPositionKeys, true);
-  const loadingFetchedPositions = loadingMyPositions || loadingProxyPositions
+  const loadingFetchedPositions = loadingMyPositions || loadingProxyPositions;
   const fetchedPositions = useMemo(() => {
     const uniquePositions = new Map();
     [...(myPositions || []), ...(proxiedPositions || [])].forEach(