Merge pull request #418 from trilitech/multisi-approve-execute

Multisi approve execute

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigActionButton.test.tsx

@@ -16,7 +16,6 @@ describe("<ActionButton/>", () => {
       <MultisigActionButton
         signerAddress={account.address}
         pendingApprovals={0}
-        openSignModal={_ => {}}
         operation={pendingOps[0]}
         sender={mockMultisigAccount(0)}
       />
@@ -30,7 +29,6 @@ describe("<ActionButton/>", () => {
       <MultisigActionButton
         signerAddress={account.address}
         pendingApprovals={1}
-        openSignModal={_ => {}}
         operation={pendingOps[0]}
         sender={mockMultisigAccount(0)}
       />
@@ -45,7 +43,6 @@ describe("<ActionButton/>", () => {
       <MultisigActionButton
         signerAddress={account.address}
         pendingApprovals={1}
-        openSignModal={_ => {}}
         operation={operation}
         sender={mockMultisigAccount(0)}
       />
@@ -59,7 +56,6 @@ describe("<ActionButton/>", () => {
       <MultisigActionButton
         signerAddress={account.address}
         pendingApprovals={1}
-        openSignModal={_ => {}}
         operation={operation}
         sender={mockMultisigAccount(0)}
       />
@@ -72,7 +68,6 @@ describe("<ActionButton/>", () => {
       <MultisigActionButton
         signerAddress={account.address}
         pendingApprovals={1}
-        openSignModal={_ => {}}
         operation={pendingOps[0]}
         sender={mockMultisigAccount(0)}
       />

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigActionButton.tsx

@@ -4,7 +4,12 @@ import { CgSandClock } from "react-icons/cg";
 import { RxCheckCircled } from "react-icons/rx";
 import colors from "../../../../style/colors";
 import { IconAndTextBtn } from "../../../IconAndTextBtn";
-import { MultisigSignerState } from "./MultisigSignerTileDisplay";
+
+export type MultisigSignerState =
+  | "awaitingApprovalByExternalSigner"
+  | "approved"
+  | "executable"
+  | "approvable";
 
 export const MultisigActionButton: React.FC<{
   signerState: MultisigSignerState;

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigPendingAccordionItem.tsx

@@ -13,16 +13,12 @@ import { MultisigOperation } from "../../../../utils/multisig/types";
 import MultisigSignerTile from "./MultisigSignerTile";
 import MultisigDecodedOperations from "./MultisigDecodedOperations";
 import { MultisigAccount } from "../../../../types/Account";
-import ApproveExecuteForm from "../../../ApproveExecuteForm/ApproveExecuteForm";
-import { useModal } from "../../../useModal";
 import colors from "../../../../style/colors";
 
 export const MultisigPendingAccordionItem: React.FC<{
   operation: MultisigOperation;
   sender: MultisigAccount;
 }> = ({ operation, sender }) => {
-  const { modalElement, onOpen } = useModal(ApproveExecuteForm);
-
   const { signers, threshold } = sender;
   const pendingApprovals = Math.max(threshold - operation.approvals.length, 0);
   return (
@@ -62,15 +58,13 @@ export const MultisigPendingAccordionItem: React.FC<{
                 key={signer.pkh}
                 signerAddress={signer}
                 pendingApprovals={pendingApprovals}
-                openSignModal={onOpen}
                 sender={sender}
                 operation={operation}
               />
             ))}
           </Box>
         </AccordionPanel>
       </AccordionItem>
-      {modalElement}
     </Box>
   );
 };

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.test.tsx

@@ -21,7 +21,6 @@ describe("<MultisigSignerTile/>", () => {
         pendingApprovals={0}
         operation={pendingOps[0]}
         sender={mockMultisigAccount(0)}
-        openSignModal={_ => {}}
       />
     );
     expect(screen.getByTestId("multisig-signer-button")).toBeInTheDocument();
@@ -34,7 +33,6 @@ describe("<MultisigSignerTile/>", () => {
         pendingApprovals={1}
         operation={{ ...pendingOps[0], approvals: [signer.address] }}
         sender={mockMultisigAccount(0)}
-        openSignModal={_ => {}}
       />
     );
     expect(screen.queryByTestId("multisig-signer-button")).not.toBeInTheDocument();
@@ -48,7 +46,6 @@ describe("<MultisigSignerTile/>", () => {
         pendingApprovals={1}
         operation={pendingOps[0]}
         sender={account}
-        openSignModal={_ => {}}
       />
     );
     expect(screen.queryByTestId("multisig-signer-button")).not.toBeInTheDocument();

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx

@@ -1,27 +1,29 @@
-import React from "react";
+import React, { useContext } from "react";
 import { ImplicitAccount, MultisigAccount } from "../../../../types/Account";
 import { ImplicitAddress } from "../../../../types/Address";
 import { useGetImplicitAccountSafe } from "../../../../utils/hooks/accountHooks";
 import { useSelectedNetwork } from "../../../../utils/hooks/assetsHooks";
 import { useGetContactName } from "../../../../utils/hooks/contactsHooks";
 import { useAsyncActionHandler } from "../../../../utils/hooks/useAsyncActionHandler";
 import { MultisigOperation } from "../../../../utils/multisig/types";
-import { ParamsWithFee } from "../../../ApproveExecuteForm/types";
-import { MultisigSignerTileDisplay, MultisigSignerState } from "./MultisigSignerTileDisplay";
+import { MultisigSignerState } from "./MultisigActionButton";
 import { makeAccountOperations } from "../../../sendForm/types";
-import { estimate } from "../../../../utils/tezos";
 import { makeMultisigApproveOrExecuteOperation } from "../../../../types/Operation";
+import { estimate } from "../../../../utils/tezos";
+import { DynamicModalContext } from "../../../DynamicModal";
+import SignPage from "../../../SendFlow/Multisig/SignPage";
+import { MultisigSignerTileDisplay } from "./MultisigSignerTileDisplay";
 
 const MultisigSignerTile: React.FC<{
   signerAddress: ImplicitAddress;
   pendingApprovals: number;
   operation: MultisigOperation;
   sender: MultisigAccount;
-  openSignModal: (params: ParamsWithFee) => void;
-}> = ({ pendingApprovals, sender, operation, openSignModal, signerAddress }) => {
+}> = ({ pendingApprovals, sender, operation, signerAddress }) => {
   const getContactName = useGetContactName();
   const getImplicitAccount = useGetImplicitAccountSafe();
   const { isLoading, handleAsyncAction } = useAsyncActionHandler();
+  const { openWith } = useContext(DynamicModalContext);
   const network = useSelectedNetwork();
 
   const implicitAccount = getImplicitAccount(signerAddress.pkh);
@@ -35,6 +37,8 @@ const MultisigSignerTile: React.FC<{
 
   const operationIsExecutable = pendingApprovals === 0;
 
+  const kind = contactName ? "contact" : signer?.type ?? "unknown";
+
   const onButtonClick = () =>
     handleAsyncAction(async () => {
       if (!signer) {
@@ -46,20 +50,22 @@ const MultisigSignerTile: React.FC<{
       const executeOrApprove = makeAccountOperations(signer, signer, [
         makeMultisigApproveOrExecuteOperation(sender.address, actionType, operation.id),
       ]);
-      const suggestedFeeMutez = await estimate(executeOrApprove, network);
-
-      openSignModal({
-        type: actionType,
-        operation: operation,
-        sender,
-        signer,
-        suggestedFeeMutez: suggestedFeeMutez.toNumber(),
-      });
+      const fee = await estimate(executeOrApprove, network);
+
+      openWith(
+        <SignPage
+          fee={fee}
+          type={actionType}
+          signer={signer}
+          sender={sender}
+          operation={operation}
+        />
+      );
     });
 
   return (
     <MultisigSignerTileDisplay
-      kind={getKind(signer, contactName)}
+      kind={kind}
       pkh={signerAddress.pkh}
       label={label}
       signerState={getMultisigSignerState({
@@ -74,14 +80,6 @@ const MultisigSignerTile: React.FC<{
   );
 };
 
-const getKind = (signerAccount?: ImplicitAccount, contactName?: string) => {
-  if (contactName) {
-    return "contact";
-  }
-
-  return signerAccount?.type || "unknown";
-};
-
 const getMultisigSignerState = ({
   signerAccount,
   operationIsExecutable,

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.tsx

@@ -3,13 +3,7 @@ import { AccountType } from "../../../../types/Account";
 import { AccountTileBase, LabelAndAddress } from "../../../AccountTile/AccountTileDisplay";
 import { getIcon } from "../../../AccountTile/getIcon";
 import { AddressKind } from "../../../AccountTile/AddressKind";
-import MultisigActionButton from "./MultisigActionButton";
-
-export type MultisigSignerState =
-  | "awaitingApprovalByExternalSigner"
-  | "approved"
-  | "executable"
-  | "approvable";
+import MultisigActionButton, { MultisigSignerState } from "./MultisigActionButton";
 
 export const MultisigSignerTileDisplay: React.FC<{
   pkh: string;

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/index.tsx

@@ -2,14 +2,14 @@ import { Accordion, Box } from "@chakra-ui/react";
 import { range } from "lodash";
 import React from "react";
 import { MultisigAccount } from "../../../../types/Account";
-import { useGetPendingOperations } from "../../../../utils/hooks/multisigHooks";
+import { useGetPendingMultisigOperations } from "../../../../utils/hooks/multisigHooks";
 import NoItems from "../../../NoItems";
 import MultisigPendingAccordionItem from "./MultisigPendingAccordionItem";
 
 export const MultisigPendingAccordion: React.FC<{
   account: MultisigAccount;
 }> = ({ account }) => {
-  const getPendingOperations = useGetPendingOperations();
+  const getPendingOperations = useGetPendingMultisigOperations();
   const pendingOperations = getPendingOperations(account);
   if (pendingOperations.length === 0) {
     return <NoItems text="No multisig pending operations" small />;