diff --git a/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigActionButton.test.tsx b/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigActionButton.test.tsx index 7abf7df89..375690907 100644 --- a/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigActionButton.test.tsx +++ b/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigActionButton.test.tsx @@ -16,7 +16,6 @@ describe("", () => { {}} operation={pendingOps[0]} sender={mockMultisigAccount(0)} /> @@ -30,7 +29,6 @@ describe("", () => { {}} operation={pendingOps[0]} sender={mockMultisigAccount(0)} /> @@ -45,7 +43,6 @@ describe("", () => { {}} operation={operation} sender={mockMultisigAccount(0)} /> @@ -59,7 +56,6 @@ describe("", () => { {}} operation={operation} sender={mockMultisigAccount(0)} /> @@ -72,7 +68,6 @@ describe("", () => { {}} operation={pendingOps[0]} sender={mockMultisigAccount(0)} /> diff --git a/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigActionButton.tsx b/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigActionButton.tsx index 768065481..2f9a493f5 100644 --- a/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigActionButton.tsx +++ b/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; diff --git a/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigPendingAccordionItem.tsx b/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigPendingAccordionItem.tsx index 665ad13fc..5ce66f92d 100644 --- a/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigPendingAccordionItem.tsx +++ b/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,7 +58,6 @@ export const MultisigPendingAccordionItem: React.FC<{ key={signer.pkh} signerAddress={signer} pendingApprovals={pendingApprovals} - openSignModal={onOpen} sender={sender} operation={operation} /> @@ -70,7 +65,6 @@ export const MultisigPendingAccordionItem: React.FC<{ - {modalElement} ); }; diff --git a/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.test.tsx b/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.test.tsx index c647b2780..fb6f618b4 100644 --- a/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.test.tsx +++ b/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.test.tsx @@ -21,7 +21,6 @@ describe("", () => { pendingApprovals={0} operation={pendingOps[0]} sender={mockMultisigAccount(0)} - openSignModal={_ => {}} /> ); expect(screen.getByTestId("multisig-signer-button")).toBeInTheDocument(); @@ -34,7 +33,6 @@ describe("", () => { 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("", () => { pendingApprovals={1} operation={pendingOps[0]} sender={account} - openSignModal={_ => {}} /> ); expect(screen.queryByTestId("multisig-signer-button")).not.toBeInTheDocument(); diff --git a/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx b/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx index b6ce012ad..9f5abf90a 100644 --- a/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx +++ b/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx @@ -1,4 +1,4 @@ -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"; @@ -6,22 +6,24 @@ 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( + + ); }); return ( { - if (contactName) { - return "contact"; - } - - return signerAccount?.type || "unknown"; -}; - const getMultisigSignerState = ({ signerAccount, operationIsExecutable, diff --git a/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.tsx b/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.tsx index 740fb2a66..f363c939c 100644 --- a/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.tsx +++ b/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; diff --git a/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/index.tsx b/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/index.tsx index a4b898b31..d3728c7fa 100644 --- a/src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/index.tsx +++ b/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 ; diff --git a/src/components/ApproveExecuteForm/ApproveExecuteForm.tsx b/src/components/ApproveExecuteForm/ApproveExecuteForm.tsx deleted file mode 100644 index 94d6d51d4..000000000 --- a/src/components/ApproveExecuteForm/ApproveExecuteForm.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -import { SuccessStep } from "../sendForm/steps/SuccessStep"; -import { useStepHistory } from "../useStepHistory"; -import { SubmitApproveOrExecuteForm } from "./SubmitApproveExecute"; -import { ParamsWithFee } from "./types"; - -type Steps = { type: "submit" } | { type: "success"; hash: string }; - -const ApproveExecuteForm: React.FC<{ params: ParamsWithFee }> = ({ params }) => { - const history = useStepHistory({ type: "submit" }); - - if (history.currentStep.type === "submit") { - return ( - { - history.goToStep({ type: "success", hash }); - }} - /> - ); - } - - return ; -}; - -export default ApproveExecuteForm; diff --git a/src/components/ApproveExecuteForm/SubmitApproveExecute.tsx b/src/components/ApproveExecuteForm/SubmitApproveExecute.tsx deleted file mode 100644 index c705b9694..000000000 --- a/src/components/ApproveExecuteForm/SubmitApproveExecute.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import React from "react"; - -import { - ModalContent, - ModalCloseButton, - ModalHeader, - ModalBody, - ModalFooter, - Text, - Heading, - Flex, -} from "@chakra-ui/react"; -import SignButton from "../sendForm/components/SignButton"; -import { ParamsWithFee } from "./types"; -import { prettyTezAmount } from "../../utils/format"; -import MultisigDecodedOperations from "../AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigDecodedOperations"; -import { AccountSmallTile } from "../AccountSelector/AccountSmallTile"; -import { ApproveOrExecute } from "../../utils/tezos/types"; -import { TezosToolkit } from "@taquito/taquito"; -import { useAsyncActionHandler } from "../../utils/hooks/useAsyncActionHandler"; -import { makeAccountOperations } from "../sendForm/types"; -import { makeMultisigApproveOrExecuteOperation } from "../../types/Operation"; -import { executeOperations } from "../../utils/tezos"; - -type Props = ParamsWithFee & { - onSuccess: (hash: string) => void; -}; - -const TITLE: Record = { - approve: "Approve transaction", - execute: "Execute transaction", -}; - -export const SubmitApproveOrExecuteForm: React.FC = ({ - onSuccess, - signer, - sender, - suggestedFeeMutez, - operation, - type: actionType, -}) => { - const { handleAsyncAction } = useAsyncActionHandler(); - - const approveOrExecute = (tezosToolkit: TezosToolkit) => - handleAsyncAction( - async () => { - const executeOrApprove = makeAccountOperations(signer, signer, [ - makeMultisigApproveOrExecuteOperation(sender.address, actionType, operation.id), - ]); - - const { opHash } = await executeOperations(executeOrApprove, tezosToolkit); - - onSuccess(opHash); - }, - { title: "Failed approve or execute" } - ); - - return ( - - - {TITLE[actionType]} - - - {TITLE[actionType]} - - - - - Signer: - - - - - - - - Fee - - {prettyTezAmount(String(suggestedFeeMutez))} - - - - - - - - ); -}; diff --git a/src/components/ApproveExecuteForm/types.tsx b/src/components/ApproveExecuteForm/types.tsx deleted file mode 100644 index 0838b6420..000000000 --- a/src/components/ApproveExecuteForm/types.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ApproveOrExecute } from "../../utils/tezos/types"; -import { MultisigOperation } from "../../utils/multisig/types"; -import { ImplicitAccount, MultisigAccount } from "../../types/Account"; - -export type ParamsWithFee = ApproveExecuteParams & { suggestedFeeMutez: number }; - -export type ApproveExecuteParams = { - type: ApproveOrExecute; - operation: MultisigOperation; - signer: ImplicitAccount; - sender: MultisigAccount; -}; diff --git a/src/components/SendFlow/Delegation/SignPage.tsx b/src/components/SendFlow/Delegation/SignPage.tsx index 11a23ab29..747f0628b 100644 --- a/src/components/SendFlow/Delegation/SignPage.tsx +++ b/src/components/SendFlow/Delegation/SignPage.tsx @@ -3,22 +3,19 @@ import { Flex, FormControl, FormLabel, - Heading, ModalBody, ModalContent, ModalFooter, - Text, } from "@chakra-ui/react"; import { FormProvider } from "react-hook-form"; -import colors from "../../../style/colors"; import { OwnedAccountsAutocomplete } from "../../AddressAutocomplete"; import SignButton from "../../sendForm/components/SignButton"; import { SignPageProps, useSignPageHelpers } from "../utils"; import { SignPageHeader, headerText } from "../SignPageHeader"; import { OperationSignerSelector } from "../OperationSignerSelector"; -import { prettyTezAmount } from "../../../utils/format"; import { BakerSmallTile } from "../../../views/delegations/BakerSmallTile"; import { Delegation } from "../../../types/Operation"; +import SignPageFee from "../SignPageFee"; const SignPage: React.FC = props => { const { mode, operations: initialOperations, fee: initialFee } = props; @@ -43,12 +40,7 @@ const SignPage: React.FC = props => { - - Fee: - - - {prettyTezAmount(fee)} - + diff --git a/src/components/SendFlow/Multisig/SignPage.test.tsx b/src/components/SendFlow/Multisig/SignPage.test.tsx new file mode 100644 index 000000000..796953d67 --- /dev/null +++ b/src/components/SendFlow/Multisig/SignPage.test.tsx @@ -0,0 +1,32 @@ +import { mockImplicitAccount, mockMultisigAccount } from "../../../mocks/factories"; +import { render, screen } from "../../../mocks/testUtils"; +import SignPage from "./SignPage"; +import BigNumber from "bignumber.js"; +import { TEZ } from "../../../utils/tezos"; +import { multisigOperation } from "../../../mocks/multisig"; + +const fixture = () => ( + +); + +describe("", () => { + describe("fee", () => { + it("displays the fee in tez", () => { + render(fixture()); + expect(screen.getByTestId("fee")).toHaveTextContent(`1.234567 ${TEZ}`); + }); + }); + + describe("number of transactions", () => { + it("displays the correct number of transactions", () => { + render(fixture()); + expect(screen.getByTestId("transaction-length")).toHaveTextContent("1"); + }); + }); +}); diff --git a/src/components/SendFlow/Multisig/SignPage.tsx b/src/components/SendFlow/Multisig/SignPage.tsx new file mode 100644 index 000000000..9a291238b --- /dev/null +++ b/src/components/SendFlow/Multisig/SignPage.tsx @@ -0,0 +1,79 @@ +import React, { useContext } from "react"; + +import { + ModalContent, + ModalCloseButton, + ModalHeader, + ModalBody, + ModalFooter, + Text, + Flex, +} from "@chakra-ui/react"; +import { ApproveOrExecute } from "../../../utils/tezos/types"; +import { MultisigOperation } from "../../../utils/multisig/types"; +import { ImplicitAccount, MultisigAccount } from "../../../types/Account"; +import { useAsyncActionHandler } from "../../../utils/hooks/useAsyncActionHandler"; +import { DynamicModalContext } from "../../DynamicModal"; +import { TezosToolkit } from "@taquito/taquito"; +import { makeMultisigApproveOrExecuteOperation } from "../../../types/Operation"; +import { makeAccountOperations } from "../../sendForm/types"; +import { executeOperations } from "../../../utils/tezos"; +import { SuccessStep } from "../../sendForm/steps/SuccessStep"; +import colors from "../../../style/colors"; +import SignButton from "../../sendForm/components/SignButton"; +import { BigNumber } from "bignumber.js"; +import { parseRawMichelson } from "../../../multisig/decode/decodeLambda"; +import { capitalize } from "lodash"; +import SignPageFee from "../SignPageFee"; + +export const SignPage: React.FC<{ + type: ApproveOrExecute; + operation: MultisigOperation; + signer: ImplicitAccount; + sender: MultisigAccount; + fee: BigNumber; +}> = ({ signer, sender, fee, operation: multisigOperation, type: actionType }) => { + const { handleAsyncAction } = useAsyncActionHandler(); + const { openWith } = useContext(DynamicModalContext); + const operations = parseRawMichelson(multisigOperation.rawActions, sender); + const approveOrExecute = (tezosToolkit: TezosToolkit) => + handleAsyncAction( + async () => { + const executeOrApprove = makeAccountOperations(signer, signer, [ + makeMultisigApproveOrExecuteOperation(sender.address, actionType, multisigOperation.id), + ]); + + const { opHash } = await executeOperations(executeOrApprove, tezosToolkit); + + openWith(); + }, + { title: `Failed ${actionType}` } + ); + + return ( + + + {`${capitalize(actionType)} transaction`} + + {/* TODO: Use account small tile*/} + + + + Transactions: + + + {operations.length} + + + + + + + + + + + ); +}; + +export default SignPage; diff --git a/src/components/SendFlow/MultisigAccount/SignPage.tsx b/src/components/SendFlow/MultisigAccount/SignPage.tsx index de79ba2fc..5ba09d3bf 100644 --- a/src/components/SendFlow/MultisigAccount/SignPage.tsx +++ b/src/components/SendFlow/MultisigAccount/SignPage.tsx @@ -14,7 +14,7 @@ import SignButton from "../../sendForm/components/SignButton"; import { SignPageHeader, headerText } from "../SignPageHeader"; import { useSignPageHelpers, SignPageProps } from "../utils"; import { FormValues } from "./FormPage"; -import { prettyTezAmount } from "../../../utils/format"; +import SignPageFee from "../SignPageFee"; const SignPage: React.FC> = props => { const { @@ -58,12 +58,7 @@ const SignPage: React.FC> = props => { - - Fee: - - - {prettyTezAmount(fee)} - + {/* TODO: add the Approvers list here when account tiles are ready */} diff --git a/src/components/SendFlow/NFT/SignPage.tsx b/src/components/SendFlow/NFT/SignPage.tsx index a61f02988..2b0af2c29 100644 --- a/src/components/SendFlow/NFT/SignPage.tsx +++ b/src/components/SendFlow/NFT/SignPage.tsx @@ -18,7 +18,7 @@ import { NFTBalance } from "../../../types/TokenBalance"; import { SendNFTRecapTile } from "../../sendForm/components/SendNFTRecapTile"; import { FA2Transfer } from "../../../types/Operation"; import { OperationSignerSelector } from "../OperationSignerSelector"; -import { prettyTezAmount } from "../../../utils/format"; +import SignPageFee from "../SignPageFee"; const SignPage: React.FC> = props => { const { @@ -49,14 +49,8 @@ const SignPage: React.FC> = props => { {nft.balance} - - - Fee: - - - {prettyTezAmount(fee)} - - + + diff --git a/src/components/SendFlow/SignPageFee.tsx b/src/components/SendFlow/SignPageFee.tsx new file mode 100644 index 000000000..ecab8c249 --- /dev/null +++ b/src/components/SendFlow/SignPageFee.tsx @@ -0,0 +1,18 @@ +import colors from "../../style/colors"; +import { prettyTezAmount } from "../../utils/format"; +import { Flex, Heading, Text } from "@chakra-ui/react"; +import BigNumber from "bignumber.js"; +const SignPageFee: React.FC<{ fee: string | BigNumber }> = ({ fee }) => { + return ( + + + Fee: + + + {prettyTezAmount(fee)} + + + ); +}; + +export default SignPageFee; diff --git a/src/components/SendFlow/Tez/SignPage.tsx b/src/components/SendFlow/Tez/SignPage.tsx index 3532fe7ef..dd95756f4 100644 --- a/src/components/SendFlow/Tez/SignPage.tsx +++ b/src/components/SendFlow/Tez/SignPage.tsx @@ -1,14 +1,13 @@ -import { Flex, FormControl, ModalBody, ModalContent, ModalFooter, Text } from "@chakra-ui/react"; +import { Flex, FormControl, ModalBody, ModalContent, ModalFooter } from "@chakra-ui/react"; import { FormProvider } from "react-hook-form"; -import colors from "../../../style/colors"; import { TezTransfer } from "../../../types/Operation"; import { OwnedAccountsAutocomplete } from "../../AddressAutocomplete"; import SignButton from "../../sendForm/components/SignButton"; import { SignPageProps, useSignPageHelpers } from "../utils"; import { SignPageHeader, headerText } from "../SignPageHeader"; import { OperationSignerSelector } from "../OperationSignerSelector"; -import { prettyTezAmount } from "../../../utils/format"; import { TezTile } from "../../AssetTiles/TezTile"; +import SignPageFee from "../SignPageFee"; const SignPage: React.FC = props => { const { mode, operations: initialOperations, fee: initialFee } = props; @@ -26,14 +25,7 @@ const SignPage: React.FC = props => { - - - Fee: - - - {prettyTezAmount(fee)} - - + {/* TODO: Add sender address tile */} diff --git a/src/components/SendFlow/Token/SignPage.tsx b/src/components/SendFlow/Token/SignPage.tsx index b23e5db20..920edbf64 100644 --- a/src/components/SendFlow/Token/SignPage.tsx +++ b/src/components/SendFlow/Token/SignPage.tsx @@ -2,14 +2,12 @@ import { Flex, FormControl, FormLabel, - Heading, Input, InputGroup, InputRightElement, ModalBody, ModalContent, ModalFooter, - Text, } from "@chakra-ui/react"; import { FormProvider } from "react-hook-form"; import colors from "../../../style/colors"; @@ -21,7 +19,7 @@ import { FATokenBalance } from "./FormPage"; import { formatTokenAmount, tokenSymbol } from "../../../types/Token"; import { FA12Transfer } from "../../../types/Operation"; import { OperationSignerSelector } from "../OperationSignerSelector"; -import { prettyTezAmount } from "../../../utils/format"; +import SignPageFee from "../SignPageFee"; const SignPage: React.FC> = props => { const { @@ -59,12 +57,7 @@ const SignPage: React.FC> = props => { - - Fee: - - - {prettyTezAmount(fee)} - + diff --git a/src/components/SendFlow/Undelegation/SignPage.tsx b/src/components/SendFlow/Undelegation/SignPage.tsx index d5c5b2824..5c1066c51 100644 --- a/src/components/SendFlow/Undelegation/SignPage.tsx +++ b/src/components/SendFlow/Undelegation/SignPage.tsx @@ -1,20 +1,11 @@ -import { - Flex, - FormControl, - Heading, - ModalBody, - ModalContent, - ModalFooter, - Text, -} from "@chakra-ui/react"; +import { Flex, FormControl, ModalBody, ModalContent, ModalFooter } from "@chakra-ui/react"; import { FormProvider } from "react-hook-form"; -import colors from "../../../style/colors"; import { OwnedAccountsAutocomplete } from "../../AddressAutocomplete"; import SignButton from "../../sendForm/components/SignButton"; import { SignPageProps, useSignPageHelpers } from "../utils"; import { SignPageHeader, headerText } from "../SignPageHeader"; import { OperationSignerSelector } from "../OperationSignerSelector"; -import { prettyTezAmount } from "../../../utils/format"; +import SignPageFee from "../SignPageFee"; const SignPage: React.FC = props => { const { mode, operations: initialOperations, fee: initialFee } = props; @@ -37,14 +28,7 @@ const SignPage: React.FC = props => { - - - Fee: - - - {prettyTezAmount(fee)} - - + { const operation2 = { ...multisigOperation, id: "2" }; store.dispatch(multisigActions.setMultisigs(multisigs)); store.dispatch(multisigActions.setPendingOperations([operation1, operation2])); - const { result: getMultisigOperationsRef } = renderHook(() => useGetPendingOperations(), { - wrapper: getWrapper(store), - }); + const { result: getMultisigOperationsRef } = renderHook( + () => useGetPendingMultisigOperations(), + { + wrapper: getWrapper(store), + } + ); expect(getMultisigOperationsRef.current(multisigToAccount(multisigs[0], "label1"))).toEqual([ { id: "2", diff --git a/src/utils/hooks/multisigHooks.ts b/src/utils/hooks/multisigHooks.ts index dbb96eb7e..ca59c5797 100644 --- a/src/utils/hooks/multisigHooks.ts +++ b/src/utils/hooks/multisigHooks.ts @@ -6,7 +6,9 @@ export const useMultisigs = () => { return useAppSelector(s => s.multisigs.items); }; -export const useGetPendingOperations = (): ((account: MultisigAccount) => MultisigOperation[]) => { +export const useGetPendingMultisigOperations = (): (( + account: MultisigAccount +) => MultisigOperation[]) => { const pendingOperations = useAppSelector(s => s.multisigs.pendingOperations); return (account: MultisigAccount) => {