fix: use extended group type in groups components

liftedinit · Jan 5, 2025 · 5fd9aed · 5fd9aed
1 parent 120ac3b
commit 5fd9aed
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 37 deletions.
diff --git a/components/groups/components/groupControls.tsx b/components/groups/components/groupControls.tsx
@@ -4,6 +4,8 @@ import {
   useTallyCount,
   useVotesByProposal,
   useMultipleTallyCounts,
+  ExtendedQueryGroupsByMemberResponseSDKType,
+  ExtendedGroupType,
 } from '@/hooks/useQueries';
 import { ProposalSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/group/v1/types';
 import { QueryTallyResultResponseSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/group/v1/query';
@@ -13,7 +15,10 @@ import { useRouter } from 'next/router';
 import VoteDetailsModal from '@/components/groups/modals/voteDetailsModal';
 import { useGroupsByMember } from '@/hooks/useQueries';
 import { useChain } from '@cosmos-kit/react';
-import { MemberSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/group/v1/types';
+import {
+  MemberSDKType,
+  GroupInfoSDKType,
+} from '@liftedinit/manifestjs/dist/codegen/cosmos/group/v1/types';
 import { ArrowRightIcon } from '@/components/icons';
 import ProfileAvatar from '@/utils/identicon';
 import { HistoryBox, TransactionGroup } from '@/components';
@@ -43,6 +48,7 @@ type GroupControlsProps = {
   pageSize: number;
   skeletonGroupCount: number;
   skeletonTxCount: number;
+  group: ExtendedGroupType;
 };
 
 export default function GroupControls({
@@ -67,6 +73,7 @@ export default function GroupControls({
   pageSize,
   skeletonGroupCount,
   skeletonTxCount,
+  group,
 }: GroupControlsProps) {
   const { proposals, isProposalsLoading, isProposalsError, refetchProposals } =
     useProposalsByPolicyAccount(policyAddress);
@@ -493,6 +500,7 @@ export default function GroupControls({
           refetchVotes={refetchVotes}
           refetchTally={refetchTally}
           refetchProposals={refetchProposals}
+          group={group}
         />
       )}
     </div>

diff --git a/components/groups/components/myGroups.tsx b/components/groups/components/myGroups.tsx
@@ -139,11 +139,7 @@ export function YourGroups({
   const skeletonGroupCount = 1;
   const skeletonTxCount = pageSize.skeleton;
 
-  const [selectedGroup, setSelectedGroup] = useState<{
-    policyAddress: string;
-    name: string;
-    threshold: string;
-  } | null>(null);
+  const [selectedGroup, setSelectedGroup] = useState<ExtendedGroupType | null>(null);
 
   const router = useRouter();
   const { address } = useChain('manifest');
@@ -172,13 +168,7 @@ export function YourGroups({
         g => g.policies && g.policies.length > 0 && g.policies[0]?.address === policyAddress
       );
       if (group) {
-        setSelectedGroup({
-          policyAddress,
-          name: group.ipfsMetadata?.title ?? 'Untitled Group',
-          threshold:
-            (group.policies[0]?.decision_policy as ThresholdDecisionPolicySDKType)?.threshold ??
-            '0',
-        });
+        setSelectedGroup(group);
       }
     }
   }, [router.query, groups.groups]);
@@ -190,9 +180,11 @@ export function YourGroups({
     }
   }, [selectedGroup]);
 
-  const handleSelectGroup = (policyAddress: string, groupName: string, threshold: string) => {
-    setSelectedGroup({ policyAddress, name: groupName || 'Untitled Group', threshold });
-    router.push(`/groups?policyAddress=${policyAddress}`, undefined, { shallow: true });
+  const handleSelectGroup = (group: ExtendedGroupType) => {
+    setSelectedGroup(group);
+    router.push(`/groups?policyAddress=${group.policies[0]?.address}`, undefined, {
+      shallow: true,
+    });
   };
 
   const handleBack = () => {
@@ -201,7 +193,7 @@ export function YourGroups({
   };
 
   const { balances, isBalancesLoading, refetchBalances } = useTokenBalances(
-    selectedGroup?.policyAddress ?? ''
+    selectedGroup?.policies[0]?.address ?? ''
   );
   const {
     balances: resolvedBalances,
@@ -221,13 +213,13 @@ export function YourGroups({
     refetch: refetchHistory,
   } = useGetFilteredTxAndSuccessfulProposals(
     env.indexerUrl,
-    selectedGroup?.policyAddress ?? '',
+    selectedGroup?.policies[0]?.address ?? '',
     currentPageGroupInfo,
     pageSizeHistory
   );
 
   const { denoms, isDenomsLoading, isDenomsError, denomError, refetchDenoms } =
-    useTokenFactoryDenomsFromAdmin(selectedGroup?.policyAddress ?? '');
+    useTokenFactoryDenomsFromAdmin(selectedGroup?.policies[0]?.address ?? '');
   const { totalSupply, isTotalSupplyLoading, isTotalSupplyError, refetchTotalSupply } =
     useTotalSupply();
 
@@ -508,10 +500,13 @@ export function YourGroups({
       >
         {selectedGroup && (
           <GroupControls
-            policyAddress={selectedGroup.policyAddress}
-            groupName={selectedGroup.name}
+            policyAddress={selectedGroup.policies[0]?.address ?? ''}
+            groupName={selectedGroup.ipfsMetadata?.title ?? 'Untitled Group'}
             onBack={handleBack}
-            policyThreshold={selectedGroup.threshold}
+            policyThreshold={
+              (selectedGroup.policies[0]?.decision_policy as ThresholdDecisionPolicySDKType)
+                ?.threshold ?? '0'
+            }
             isLoading={isLoadingGroupInfo}
             currentPage={currentPageGroupInfo}
             setCurrentPage={setCurrentPageGroupInfo}
@@ -529,6 +524,7 @@ export function YourGroups({
             pageSize={pageSizeGroupInfo}
             skeletonGroupCount={skeletonGroupCount}
             skeletonTxCount={skeletonTxCount}
+            group={selectedGroup}
           />
         )}
       </div>
@@ -585,7 +581,8 @@ function GroupRow({
 }: {
   group: ExtendedQueryGroupsByMemberResponseSDKType['groups'][0];
   proposals: ProposalSDKType[];
-  onSelectGroup: (policyAddress: string, groupName: string, threshold: string) => void;
+  onSelectGroup: (group: ExtendedGroupType) => void;
+
   activeMemberModalId: string | null;
   setActiveMemberModalId: (id: string | null) => void;
   activeInfoModalId: string | null;
@@ -618,16 +615,7 @@ function GroupRow({
   return (
     <tr
       className="group text-black dark:text-white rounded-lg cursor-pointer"
-      onClick={e => {
-        e.stopPropagation();
-        onSelectGroup(
-          policyAddress,
-          groupName,
-          (group.policies &&
-            (group.policies[0]?.decision_policy as ThresholdDecisionPolicySDKType)?.threshold) ??
-            '0'
-        );
-      }}
+      onClick={() => onSelectGroup(group)}
       tabIndex={0}
       role="button"
       aria-label={`Select ${groupName} group`}

diff --git a/components/groups/modals/voteDetailsModal.tsx b/components/groups/modals/voteDetailsModal.tsx
@@ -13,6 +13,8 @@ import {
   ProposalStatus,
   VoteOption,
   VoteSDKType,
+  GroupInfoSDKType,
+  ThresholdDecisionPolicySDKType,
 } from '@liftedinit/manifestjs/dist/codegen/cosmos/group/v1/types';
 import { QueryTallyResultResponseSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/group/v1/query';
 import { TruncatedAddressWithCopy } from '@/components/react/addressCopy';
@@ -24,7 +26,11 @@ import { useTx } from '@/hooks/useTx';
 import { cosmos } from '@liftedinit/manifestjs';
 import { useTheme } from '@/contexts/theme';
 import CountdownTimer from '../components/CountdownTimer';
-import { useFeeEstimation } from '@/hooks';
+import {
+  ExtendedGroupType,
+  ExtendedQueryGroupsByMemberResponseSDKType,
+  useFeeEstimation,
+} from '@/hooks';
 
 import { TrashIcon, CheckIcon } from '@heroicons/react/24/outline';
 import { ArrowUpIcon, CopyIcon } from '@/components/icons';
@@ -45,6 +51,7 @@ interface VoteDetailsModalProps {
   members: MemberSDKType[];
   proposal: ProposalSDKType;
   showVoteModal: boolean;
+  group: ExtendedGroupType;
   setShowVoteModal: (show: boolean) => void;
   onClose: () => void;
   refetchVotes: () => void;
@@ -63,6 +70,7 @@ function VoteDetailsModal({
   refetchVotes,
   refetchTally,
   refetchProposals,
+  group,
 }: VoteDetailsModalProps) {
   const voteMap = useMemo(
     () =>
@@ -748,7 +756,7 @@ function VoteDetailsModal({
                 )}
             </div>
             <dialog id="messages_modal" className="modal">
-              <div className="modal-box max-w-4xl bg-secondary">
+              <div className="modal-box max-w-4xl ml-20 bg-secondary">
                 <form method="dialog">
                   <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
                     ✕
@@ -768,8 +776,8 @@ function VoteDetailsModal({
                         >
                           {messageType.split('.').pop().replace('Msg', '')}
                         </h3>
-                        <div className="font-mono">
-                          <pre className="whitespace-pre-wrap break-words bg-base-200 p-4 rounded-lg text-sm overflow-x-auto">
+                        <div className="font-mono ">
+                          <pre className=" whitespace-pre-wrap break-words bg-base-200 p-4 rounded-lg text-sm overflow-x-auto">
                             <SyntaxHighlighter
                               language="json"
                               style={theme === 'dark' ? oneDark : oneLight}