Merge pull request #31 from aragon/fix/proposal-log-fetching

Proposal log fetching fix

components/proposalVoting/votesDataList/votesDataListItemSkeleton.tsx

@@ -1,8 +1,6 @@
 import { DataListItem, StateSkeletonBar, StateSkeletonCircular } from "@aragon/ods";
 
-export interface IVotesDataListItemSkeletonProps {}
-
-export const VotesDataListItemSkeleton: React.FC<IVotesDataListItemSkeletonProps> = () => {
+export const VotesDataListItemSkeleton: React.FC = () => {
   return (
     <DataListItem className="flex flex-col gap-y-3 py-3 md:py-4">
       <div className="flex w-full items-center gap-x-3 md:gap-x-4">

hooks/useAbi.ts

@@ -16,7 +16,7 @@ export const useAbi = (contractAddress: Address) => {
   const publicClient = usePublicClient({ chainId: PUB_CHAIN.id });
 
   const { data: implementationAddress, isLoading: isLoadingImpl } = useQuery<Address | null>({
-    queryKey: ["proxy-check", contractAddress, !!publicClient],
+    queryKey: ["proxy-check", contractAddress, publicClient?.chain.id],
     queryFn: () => {
       if (!contractAddress || !publicClient) return null;
       else if (!isAddress(contractAddress) || !publicClient) {
@@ -35,7 +35,7 @@ export const useAbi = (contractAddress: Address) => {
     refetchOnMount: false,
     refetchOnReconnect: false,
     retryOnMount: true,
-    staleTime: Infinity,
+    staleTime: 1000 * 60 * 60 * 24 * 7,
   });
 
   const resolvedAddress = isAddress(implementationAddress) ? (implementationAddress as Address) : contractAddress;
@@ -45,7 +45,7 @@ export const useAbi = (contractAddress: Address) => {
     isLoading,
     error,
   } = useQuery<AbiFunction[], Error>({
-    queryKey: ["abi", resolvedAddress || "", !!publicClient],
+    queryKey: ["abi", resolvedAddress || "", publicClient?.chain.id],
     queryFn: async () => {
       if (!resolvedAddress || !isAddress(resolvedAddress) || !publicClient) {
         return [];

hooks/useDerivedWallet.tsx

@@ -1,8 +1,7 @@
 import { useState, useContext, createContext, type ReactNode, useEffect } from "react";
 import { keccak256 } from "viem";
-import { signMessage } from "@wagmi/core";
 import { computePublicKey } from "@/utils/encryption/asymmetric";
-import { useAccount, useConfig } from "wagmi";
+import { useAccount, useSignMessage } from "wagmi";
 import { hexToUint8Array } from "@/utils/hex";
 import { DETERMINISTIC_EMERGENCY_PAYLOAD } from "@/constants";
 import { useAlerts } from "@/context/Alerts";
@@ -21,7 +20,7 @@ const DerivedWalletContext = createContext<Result>({
 });
 
 export function UseDerivedWalletProvider({ children }: { children: ReactNode }) {
-  const config = useConfig();
+  const { signMessageAsync } = useSignMessage();
   const { addAlert } = useAlerts();
   const { address } = useAccount();
   const [keys, setKeys] = useState<KeyPair>({});
@@ -31,7 +30,7 @@ export function UseDerivedWalletProvider({ children }: { children: ReactNode })
   }, [address]);
 
   const requestSignature = () => {
-    return signMessage(config, { message: DETERMINISTIC_EMERGENCY_PAYLOAD })
+    return signMessageAsync({ message: DETERMINISTIC_EMERGENCY_PAYLOAD })
       .then((privateSignature) => {
         const derivedPrivateKey = keccak256(privateSignature);
         const publicKey = computePublicKey(hexToUint8Array(derivedPrivateKey));

package.json

@@ -22,7 +22,7 @@
     ]
   },
   "dependencies": {
-    "@aragon/ods": "1.0.40",
+    "@aragon/ods": "1.0.42",
     "@hookform/resolvers": "^3.9.0",
     "@react-native-async-storage/async-storage": "^1.23.1",
     "@shazow/whatsabi": "^0.13.2",
@@ -43,7 +43,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.52.1",
     "tailwindcss-fluid-type": "^2.0.6",
-    "viem": "2.17.0",
+    "viem": "2.19.8",
     "wagmi": "2.10.9"
   },
   "devDependencies": {

pages/globals.css

@@ -76,6 +76,8 @@
     --ods-dialog-content-z-index: 30;
     --ods-dialog-alert-content-z-index: 30;
     --ods-dropdown-container-content-z-index: 40;
+    --ods-text-area-rich-text-expanded-z-index: 50;
+    --ods---ods-text-area-rich-text-expanded-z-index: 50; /* TODO: remove when ODS is patched */
   }
 }
 

plugins/emergency-multisig/components/proposal/header.tsx

@@ -1,11 +1,13 @@
-import { AvatarIcon, Breadcrumbs, Button, Heading, IBreadcrumbsLink, IconType, Tag, TagVariant } from "@aragon/ods";
+import { AvatarIcon, Breadcrumbs, Heading, IBreadcrumbsLink, IconType, ProposalStatus, TagVariant } from "@aragon/ods";
 import { useProposalStatus } from "@/plugins/emergency-multisig/hooks/useProposalVariantStatus";
 import dayjs from "dayjs";
 import { Publisher } from "@/components/publisher";
 import { getSimpleRelativeTimeFromDate } from "@/utils/dates";
 import { EmergencyProposal } from "../../utils/types";
 import { Else, ElseIf, If, Then } from "@/components/if";
 import { HeaderSection } from "@/components/layout/header-section";
+import { getTagVariantFromStatus } from "@/utils/ui-variants";
+import { capitalizeFirstLetter } from "@/utils/text";
 
 interface ProposalHeaderProps {
   proposalId: string;
@@ -26,8 +28,7 @@ const ProposalHeader: React.FC<ProposalHeaderProps> = ({ proposalId, proposal })
           links={breadcrumbs}
           tag={
             proposalStatus && {
-              label: proposalStatus,
-              className: "capitalize",
+              label: capitalizeFirstLetter(proposalStatus),
               variant: tagVariant,
             }
           }
@@ -49,7 +50,7 @@ const ProposalHeader: React.FC<ProposalHeaderProps> = ({ proposalId, proposal })
           <div className="flex items-center gap-x-2">
             <AvatarIcon icon={IconType.APP_MEMBERS} size="sm" variant="primary" />
             <div className="flex gap-x-1 text-base leading-tight ">
-              <If condition={proposalStatus == "executed"}>
+              <If condition={proposalStatus == ProposalStatus.EXECUTED}>
                 <Then>
                   <span className="text-neutral-500">The proposal was sent to the community stage</span>
                 </Then>
@@ -72,34 +73,3 @@ const ProposalHeader: React.FC<ProposalHeaderProps> = ({ proposalId, proposal })
 };
 
 export default ProposalHeader;
-
-const getTagVariantFromStatus = (status: string | undefined): TagVariant => {
-  switch (status) {
-    case "accepted":
-      return "success";
-    case "active":
-      return "info";
-    case "challenged":
-      return "warning";
-    case "draft":
-      return "neutral";
-    case "executed":
-      return "success";
-    case "expired":
-      return "critical";
-    case "failed":
-      return "critical";
-    case "partiallyExecuted":
-      return "warning";
-    case "pending":
-      return "neutral";
-    case "queued":
-      return "success";
-    case "rejected":
-      return "critical";
-    case "vetoed":
-      return "warning";
-    default:
-      return "neutral";
-  }
-};

plugins/emergency-multisig/components/proposal/index.tsx

@@ -77,7 +77,7 @@ export default function ProposalCard(props: ProposalInputs) {
         approvalAmount: proposal.approvals,
         approvalThreshold: proposal.parameters.minApprovals,
       }}
-      publisher={[{ address: proposal.creator }]} // Fix: Pass an object of type IPublisher instead of a string
+      publisher={{ address: proposal.creator }}
       status={proposalStatus!}
       type={"approvalThreshold"}
     />

plugins/emergency-multisig/hooks/useCanCreateProposal.tsx

@@ -1,34 +1,28 @@
-import { useAccount, useConfig } from "wagmi";
-import { readContract } from "@wagmi/core";
+import { useAccount, useReadContract } from "wagmi";
 import { PUB_EMERGENCY_MULTISIG_PLUGIN_ADDRESS } from "@/constants";
 import { EmergencyMultisigPluginAbi } from "../artifacts/EmergencyMultisigPlugin";
-import { useQuery } from "@tanstack/react-query";
 
 export function useCanCreateProposal() {
   const { address } = useAccount();
-  const config = useConfig();
-
   const {
     data: canCreate,
     isLoading,
     error,
     refetch,
-  } = useQuery({
-    queryKey: ["is-member-emergency", PUB_EMERGENCY_MULTISIG_PLUGIN_ADDRESS, address],
-    queryFn: () => {
-      return readContract(config, {
-        abi: EmergencyMultisigPluginAbi,
-        address: PUB_EMERGENCY_MULTISIG_PLUGIN_ADDRESS,
-        functionName: "isMember",
-        args: [address!],
-      });
+  } = useReadContract({
+    abi: EmergencyMultisigPluginAbi,
+    address: PUB_EMERGENCY_MULTISIG_PLUGIN_ADDRESS,
+    functionName: "isMember",
+    args: [address!],
+
+    query: {
+      retry: true,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      retryOnMount: true,
+      enabled: !!address,
+      staleTime: 1000 * 60 * 5,
     },
-    retry: true,
-    refetchOnMount: false,
-    refetchOnReconnect: false,
-    retryOnMount: true,
-    enabled: !!address,
-    staleTime: 1000 * 60 * 5,
   });
 
   return { canCreate, isLoading, error, refetch };

plugins/emergency-multisig/hooks/useProposal.tsx

@@ -77,10 +77,8 @@ export function useProposal(proposalId: string, autoRefresh = false) {
     publicClient
       .getLogs({
         address: PUB_EMERGENCY_MULTISIG_PLUGIN_ADDRESS,
-        event: ProposalCreatedEvent as any,
-        args: {
-          proposalId,
-        } as any,
+        event: ProposalCreatedEvent,
+        args: { proposalId: BigInt(proposalId) },
         fromBlock: proposalData.parameters.snapshotBlock,
         toBlock: "latest",
       })

plugins/emergency-multisig/hooks/useProposalVariantStatus.tsx

@@ -30,11 +30,11 @@ export const useProposalStatus = (proposal: EmergencyProposal) => {
     setStatus(
       proposal?.approvals >= proposal?.parameters?.minApprovals
         ? proposal?.executed
-          ? "executed"
-          : "accepted"
+          ? ProposalStatus.EXECUTED
+          : ProposalStatus.ACCEPTED
         : dayjs().isAfter(dayjs(Number(proposal?.parameters.expirationDate) * 1000))
-          ? "failed"
-          : "active"
+          ? ProposalStatus.FAILED
+          : ProposalStatus.ACTIVE
     );
   }, [proposal, proposal?.approvals, proposal?.executed, proposal?.parameters?.minApprovals]);
 

plugins/emergency-multisig/pages/proposal.tsx

@@ -31,15 +31,15 @@ export default function ProposalDetail({ id: proposalId }: { id: string }) {
   const { publicKey, requestSignature } = useDerivedWallet();
 
   const showProposalLoading = getShowProposalLoading(proposal, proposalFetchStatus);
-  const proposalVariant = useProposalStatus(proposal!);
+  const proposalStatus = useProposalStatus(proposal!);
 
   const proposalStage: ITransformedStage[] = [
     {
       id: "1",
       type: ProposalStages.MULTISIG_APPROVAL,
       variant: "approvalThreshold",
       title: "Onchain multisig",
-      status: proposalVariant!,
+      status: proposalStatus!,
       disabled: false,
       proposalId: proposalId,
       providerId: "1",

plugins/members/components/DelegateAnnouncementDialog.tsx

@@ -104,7 +104,7 @@ export const DelegateAnnouncementDialog: React.FC<IDelegateAnnouncementDialogPro
       : "Create profile";
 
   return (
-    <DialogRoot {...otherProps} containerClassName="!max-w-[520px]">
+    <DialogRoot {...otherProps} containerClassName="!max-w-[520px]" useFocusTrap={false}>
       <DialogHeader title="Create your delegate profile" onCloseClick={onClose} onBackClick={onClose} />
       <DialogContent className="flex flex-col gap-y-4 md:gap-y-6">
         <InputText

plugins/multisig/components/proposal/header.tsx

@@ -1,11 +1,13 @@
-import { AvatarIcon, Breadcrumbs, Button, Heading, IBreadcrumbsLink, IconType, Tag, TagVariant } from "@aragon/ods";
+import { AvatarIcon, Breadcrumbs, Heading, IBreadcrumbsLink, IconType, ProposalStatus, TagVariant } from "@aragon/ods";
 import { MultisigProposal } from "@/plugins/multisig/utils/types";
 import { useProposalStatus } from "@/plugins/multisig/hooks/useProposalVariantStatus";
 import dayjs from "dayjs";
 import { HeaderSection } from "@/components/layout/header-section";
 import { Publisher } from "@/components/publisher";
 import { getSimpleRelativeTimeFromDate } from "@/utils/dates";
 import { Else, ElseIf, If, Then } from "@/components/if";
+import { getTagVariantFromStatus } from "@/utils/ui-variants";
+import { capitalizeFirstLetter } from "@/utils/text";
 
 interface ProposalHeaderProps {
   proposalId: string;
@@ -26,8 +28,7 @@ const ProposalHeader: React.FC<ProposalHeaderProps> = ({ proposalId, proposal })
           links={breadcrumbs}
           tag={
             proposalStatus && {
-              label: proposalStatus,
-              className: "capitalize",
+              label: capitalizeFirstLetter(proposalStatus),
               variant: tagVariant,
             }
           }
@@ -49,7 +50,7 @@ const ProposalHeader: React.FC<ProposalHeaderProps> = ({ proposalId, proposal })
           <div className="flex items-center gap-x-2">
             <AvatarIcon icon={IconType.APP_MEMBERS} size="sm" variant="primary" />
             <div className="flex gap-x-1 text-base leading-tight ">
-              <If condition={proposalStatus == "executed"}>
+              <If condition={proposalStatus == ProposalStatus.EXECUTED}>
                 <Then>
                   <span className="text-neutral-500">The proposal was sent to the community stage</span>
                 </Then>
@@ -72,34 +73,3 @@ const ProposalHeader: React.FC<ProposalHeaderProps> = ({ proposalId, proposal })
 };
 
 export default ProposalHeader;
-
-const getTagVariantFromStatus = (status: string | undefined): TagVariant => {
-  switch (status) {
-    case "accepted":
-      return "success";
-    case "active":
-      return "info";
-    case "challenged":
-      return "warning";
-    case "draft":
-      return "neutral";
-    case "executed":
-      return "success";
-    case "expired":
-      return "critical";
-    case "failed":
-      return "critical";
-    case "partiallyExecuted":
-      return "warning";
-    case "pending":
-      return "neutral";
-    case "queued":
-      return "success";
-    case "rejected":
-      return "critical";
-    case "vetoed":
-      return "warning";
-    default:
-      return "neutral";
-  }
-};

plugins/multisig/components/proposal/index.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { useProposalApprove } from "@/plugins/multisig/hooks/useProposalApprove";
-import { Card } from "@aragon/ods";
+import { Card, ProposalStatus } from "@aragon/ods";
 import { ProposalDataListItem } from "@aragon/ods";
 import { PleaseWaitSpinner } from "@/components/please-wait";
 import { useProposalStatus } from "../../hooks/useProposalVariantStatus";
@@ -64,15 +64,15 @@ export default function ProposalCard(props: ProposalInputs) {
       href={`#/proposals/${props.proposalId}`}
       voted={hasApproved}
       date={
-        ["active", "accepted"].includes(proposalStatus!) && proposal.parameters.expirationDate
+        [ProposalStatus.ACTIVE, ProposalStatus.ACCEPTED].includes(proposalStatus!) && proposal.parameters.expirationDate
           ? Number(proposal.parameters.expirationDate) * 1000
           : undefined
       }
       result={{
         approvalAmount: proposal.approvals,
         approvalThreshold: proposal.parameters.minApprovals,
       }}
-      publisher={[{ address: proposal.creator }]} // Fix: Pass an object of type IPublisher instead of a string
+      publisher={{ address: proposal.creator }}
       status={proposalStatus!}
       type={"approvalThreshold"}
     />