feat(maci): cache joinedPoll data

Author: NicoSerranoP

.env.example

@@ -14,7 +14,7 @@ NEXT_PUBLIC_SECONDS_PER_BLOCK="1"
 NEXT_PUBLIC_COORDINATOR_SERVICE_URL="http://localhost:3000/v1"
 
 # UX improvements
-NEXT_MINIMUM_START_DELAY_IN_SECONDS="60" # coordinator service scheduler needs a bit of time to process
+NEXT_MINIMUM_START_DELAY_IN_SECONDS="30"
 
 # Network and services
 NEXT_PUBLIC_CHAIN_NAME="arbitrumSepolia"

bun.lock

@@ -26,7 +26,7 @@ export const MobileNavDialog: React.FC<IMobileNavDialogProps> = (props) => {
             >
               <span className="flex py-2 pl-3 pr-4">
                 Powered by <span className="mr-1 text-primary-400">&nbsp;Aragon</span>
-                <Image src="/logo.png" width="24" height="24" alt="Aragonette" />
+                <Image src="/logo.png" width="24" height="24" alt="Aragon - MACI Plugin" />
               </span>
             </Link>
           </div>

components/nav/mobileNavDialog.tsx

@@ -32,9 +32,9 @@ export const Navbar: React.FC = () => {
               "outline-none focus:outline-none focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset" // focus styles
             )}
           >
-            <Image src="/logo-bw-lg.png" width="36" height="36" className="shrink-0" alt="Aragonette" />
+            <Image src="/logo-bw-lg.png" width="36" height="36" className="shrink-0" alt="Aragon - MACI Plugin" />
             <span className="hidden py-1 text-lg font-semibold leading-tight text-neutral-700 sm:block md:text-xl">
-              Aragonette
+              Aragon - MACI Plugin
             </span>
           </Link>
 

components/nav/navbar.tsx

@@ -43,10 +43,11 @@ export const PUBLIC_IPFS_ENDPOINTS = process.env.NEXT_PUBLIC_IPFS_ENDPOINTS ?? "
 export const PUBLIC_PINATA_JWT = process.env.NEXT_PUBLIC_PINATA_JWT ?? "";
 
 // General
-export const PUBLIC_APP_NAME = "Aragonette";
+export const PUBLIC_APP_NAME = "Aragon - MACI Plugin";
 export const PUBLIC_APP_DESCRIPTION = "Simplified user interface for Aragon DAO's";
 
 export const PUBLIC_PROJECT_URL = process.env.NEXT_PUBLIC_PROJECT_URL ?? "https://aragon.org/";
 export const PUBLIC_WALLET_ICON = "https://avatars.githubusercontent.com/u/37784886";
 
-export const PUBLIC_DISCORD_URL = "https://discord.com/";
+export const PUBLIC_DISCORD_URL = "https://discord.com/invite/sF5CT5rzrR";
+export const PUBLIC_TWITTER_URL = "https://x.com/PrivacyEthereum";

constants.ts

@@ -1,5 +1,5 @@
 {
-  "name": "aragonette",
+  "name": "maci-aragon-osx-gov-app",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -25,8 +25,8 @@
     "@layerzerolabs/lz-definitions": "^2.3.27",
     "@layerzerolabs/lz-v2-utilities": "^2.3.27",
     "@layerzerolabs/scan-client": "^0.0.8",
-    "@maci-protocol/domainobjs": "0.0.0-ci.f03b827",
-    "@maci-protocol/sdk": "0.0.0-ci.f03b827",
+    "@maci-protocol/domainobjs": "0.0.0-ci.c62bc06",
+    "@maci-protocol/sdk": "0.0.0-ci.c62bc06",
     "@react-native-async-storage/async-storage": "^1.23.1",
     "@shazow/whatsabi": "0.11.0",
     "@tanstack/query-async-storage-persister": "^5.49.1",

package.json

@@ -3,6 +3,7 @@ import { type ReactNode } from "react";
 import { useAccount } from "wagmi";
 import { useWeb3Modal } from "@web3modal/wagmi/react";
 import { Else, If, Then } from "@/components/if";
+import { PUBLIC_DISCORD_URL, PUBLIC_TWITTER_URL } from "@/constants";
 
 export default function Home() {
   const { isConnected } = useAccount();
@@ -11,19 +12,82 @@ export default function Home() {
   return (
     <main className="w-screen max-w-full flex-col">
       <Card>
-        <h1 className="text-2xl font-[700] text-neutral-800">Welcome to Aragonette!</h1>
+        <h1 className="text-2xl font-[700] text-neutral-800">Welcome to the Aragon - MACI Plugin</h1>
         <p className="text-md text-neutral-400">
-          A beaufitul DAO experience in a simple template that you can customize. Get started by connecting your wallet
-          and selecting a plugin from the menu.
+          This user interface was built to showcase the MACI private voting plugin integrated into Aragon OSx. Remember
+          that this demo is a work in progress.
         </p>
         <div className="">
           <IllustrationHuman className="mx-auto mb-10 max-w-96" body="BLOCKS" expression="SMILE_WINK" hairs="CURLY" />
           <div className="flex justify-center">
             <If condition={isConnected}>
               <Then>
-                <Button className="mb-2" variant="primary" href="https://devs.aragon.org/docs/osx/" target="_blank">
-                  Learn more about OSx
-                </Button>
+                <div className="flex flex-col items-center gap-1">
+                  <Button className="mb-2" variant="primary" href="https://devs.aragon.org/docs/osx/" target="_blank">
+                    Learn more about OSx
+                  </Button>
+                  <Button
+                    className="mb-2"
+                    variant="primary"
+                    href="https://github.com/privacy-scaling-explorations/maci"
+                    target="_blank"
+                  >
+                    Learn more about MACI
+                  </Button>
+                  <Button
+                    className="mb-2"
+                    variant="secondary"
+                    href="https://github.com/privacy-scaling-explorations/maci-voting-plugin-aragon"
+                    target="_blank"
+                  >
+                    Aragon - MACI Plugin
+                  </Button>
+                  <Button
+                    className="mb-2"
+                    variant="secondary"
+                    href="https://github.com/privacy-scaling-explorations/maci-aragon-osx-gov-app"
+                    target="_blank"
+                  >
+                    Aragon - MACI Frontend
+                  </Button>
+
+                  <div className="mt-4 flex gap-4">
+                    <a
+                      href={PUBLIC_DISCORD_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-neutral-500 transition-colors hover:text-primary-500"
+                      aria-label="Discord"
+                    >
+                      <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09-.01-.02-.04-.03-.07-.03-1.5.26-2.93.71-4.27 1.33-.01 0-.02.01-.03.02-2.72 4.07-3.47 8.03-3.1 11.95 0 .02.01.04.03.05 1.8 1.32 3.53 2.12 5.24 2.65.03.01.06 0 .07-.02.4-.55.76-1.13 1.07-1.74.02-.04 0-.08-.04-.09-.57-.22-1.11-.48-1.64-.78-.04-.02-.04-.08-.01-.11.11-.08.22-.17.33-.25.02-.02.05-.02.07-.01 3.44 1.57 7.15 1.57 10.55 0 .02-.01.05-.01.07.01.11.09.22.17.33.26.04.03.04.09-.01.11-.52.31-1.07.56-1.64.78-.04.01-.05.06-.04.09.32.61.68 1.19 1.07 1.74.03.02.06.03.09.02 1.72-.53 3.45-1.33 5.25-2.65.02-.01.03-.03.03-.05.44-4.53-.73-8.46-3.1-11.95-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.83 2.12-1.89 2.12z" />
+                      </svg>
+                    </a>
+                    <a
+                      href={PUBLIC_TWITTER_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-neutral-500 transition-colors hover:text-primary-500"
+                      aria-label="Twitter"
+                    >
+                      <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
+                      </svg>
+                    </a>
+                  </div>
+                </div>
               </Then>
               <Else>
                 <Button size="md" variant="primary" onClick={() => open()}>

pages/index.tsx

@@ -8,6 +8,7 @@ import { useMaci } from "../hooks/useMaci";
 import { unixTimestampToDate } from "../utils/formatPollDate";
 import { VoteOption } from "../utils/types";
 import { VoteResultCard } from "./VoteResultCard";
+import classNames from "classnames";
 
 const PollCard = ({ pollId }: { pollId: bigint }) => {
   // check if the user joined the poll
@@ -18,7 +19,7 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
   const [voteOption, setVoteOption] = useState<VoteOption | undefined>(undefined);
 
   const { data: { voteStartDate, tallied, voteEnded, disabled, results } = {} } = useGetPollData(pollId);
-  const { joinPollFunction, hasJoinedPoll, joinedPollData } = useJoinPoll(pollId);
+  const { joinPollFunction, hasJoinedPoll, joinedPollData, isLoading: isLoadingJoinedPoll } = useJoinPoll(pollId);
   const { voteFunction } = useVote();
 
   useEffect(() => {
@@ -56,7 +57,7 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
       const { pollStateIndex, voiceCredits } = joinedPollData;
 
       setVoteOption(option);
-      voteFunction(pollId, pollStateIndex, voiceCredits, option)
+      await voteFunction(pollId, pollStateIndex, voiceCredits, option)
         .catch((error) => {
           setError(error.message);
         })
@@ -69,14 +70,17 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
   );
 
   const buttonMessage = useMemo(() => {
+    if (isLoadingJoinedPoll) {
+      return <PleaseWaitSpinner fullMessage="Checking user status..." />;
+    }
     if (hasJoinedPoll) {
       return "Already joined poll";
     }
     if (isLoading) {
       return <PleaseWaitSpinner fullMessage="Joining poll..." />;
     }
     return "Join poll";
-  }, [hasJoinedPoll, isLoading]);
+  }, [isLoadingJoinedPoll, hasJoinedPoll, isLoading]);
 
   if (voteEnded && !tallied)
     return (
@@ -140,7 +144,7 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
             In order to submit your vote you need to join the poll using your locally generated MACI public key and your
             authorized wallet.
           </p>
-          <Button onClick={onClickJoinPoll} disabled={hasJoinedPoll || isLoading}>
+          <Button onClick={onClickJoinPoll} disabled={hasJoinedPoll || isLoading || isLoadingJoinedPoll}>
             {buttonMessage}
           </Button>
         </div>
@@ -165,23 +169,23 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
           <div className="flex flex-row gap-x-1">
             <Button
               onClick={() => onClickVote(VoteOption.Yes)}
-              disabled={disabled ?? isLoading}
+              disabled={disabled ? disabled : isLoading}
               size="sm"
               variant={disabled ? "tertiary" : "success"}
             >
               {isLoading && voteOption === VoteOption.Yes ? <PleaseWaitSpinner fullMessage="Yes" /> : "Yes"}
             </Button>
             <Button
               onClick={() => onClickVote(VoteOption.No)}
-              disabled={disabled ?? isLoading}
+              disabled={disabled ? disabled : isLoading}
               size="sm"
               variant={disabled ? "tertiary" : "critical"}
             >
               {isLoading && voteOption === VoteOption.No ? <PleaseWaitSpinner fullMessage="No" /> : "No"}
             </Button>
             <Button
               onClick={() => onClickVote(VoteOption.Abstain)}
-              disabled={disabled ?? isLoading}
+              disabled={disabled ? disabled : isLoading}
               size="sm"
               variant={disabled ? "tertiary" : "warning"}
             >

plugins/maciVoting/components/PollCard.tsx

@@ -87,7 +87,7 @@ export const MaciProvider = ({ children }: { children: ReactNode }) => {
 
         setMaciKeypair(keypair);
       } catch (error) {
-        setError("Error creating keypair");
+        setError("Error creating keypair. Please go to MACI Voting and try again.");
         setIsLoading(false);
         return;
       }