Add From Lable and use FormPageHeader

trilitech · Sep 12, 2023 · 3cfeb63 · 3cfeb63
1 parent 955ae70
commit 3cfeb63
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 24 deletions.
diff --git a/src/components/SendFlow/Batch/SignPage.test.tsx b/src/components/SendFlow/Batch/SignPage.test.tsx
@@ -1,20 +1,29 @@
-import { mockImplicitAccount, mockMultisigAccount } from "../../../mocks/factories";
+import { mockImplicitAccount, mockMultisigAccount, mockNFT } from "../../../mocks/factories";
 import { render, screen } from "../../../mocks/testUtils";
 import SignPage from "./SignPage";
 import BigNumber from "bignumber.js";
 import { TEZ } from "../../../utils/tezos";
 import { makeAccountOperations } from "../../sendForm/types";
 import { makeMultisigApproveOrExecuteOperation } from "../../../types/Operation";
-import { useSignPageHelpers } from "../utils";
 import store from "../../../utils/redux/store";
 import accountsSlice from "../../../utils/redux/slices/accountsSlice";
+import { parseContractPkh } from "../../../types/Address";
 
 const account = mockImplicitAccount(0);
 const multisig = mockMultisigAccount(1);
 const operation = makeAccountOperations(account, account, [
   makeMultisigApproveOrExecuteOperation(multisig.address, "execute", "3"),
+  {
+    type: "fa2",
+    amount: "1",
+    sender: account.address,
+    recipient: mockImplicitAccount(1).address,
+    contract: parseContractPkh(mockNFT(1).contract),
+    tokenId: mockNFT(1).tokenId,
+  },
 ]);
-const fee = new BigNumber(1234567);
+
+const fee = BigNumber(1234567);
 const fixture = () => {
   return <SignPage initialFee={fee} initialOperations={operation} />;
 };
@@ -34,7 +43,7 @@ describe("<SignPage />", () => {
   describe("number of transactions", () => {
     it("displays the correct number of transactions", () => {
       render(fixture());
-      expect(screen.getByTestId("transaction-length")).toHaveTextContent("1");
+      expect(screen.getByTestId("transaction-length")).toHaveTextContent("2");
     });
   });
 });
diff --git a/src/components/SendFlow/BatchModalBody.tsx b/src/components/SendFlow/BatchModalBody.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 
-import { ModalHeader, ModalBody, Text, Flex, ModalCloseButton } from "@chakra-ui/react";
+import { ModalBody, Text, Flex, FormLabel } from "@chakra-ui/react";
 
 import { BigNumber } from "bignumber.js";
 import colors from "../../style/colors";
-import { HeaderWrapper } from "./FormPageHeader";
+import FormPageHeader from "./FormPageHeader";
 import AddressTile from "../AddressTile/AddressTile";
 import SignPageFee from "./SignPageFee";
 import { ImplicitAddress } from "../../types/Address";
@@ -17,15 +17,9 @@ export const BatchModalBody: React.FC<{
 }> = ({ title, fee, transactionCount, signerAddress }) => {
   return (
     <>
-      <ModalCloseButton />
-      <HeaderWrapper>
-        <ModalHeader textAlign="center">{title}</ModalHeader>
-        <Text textAlign="center" size="sm" color={colors.gray[400]}>
-          Enter your password to confirm this transaction.
-        </Text>
-      </HeaderWrapper>
-
+      <FormPageHeader title={title} subTitle=" Enter your password to confirm this transaction." />
       <ModalBody>
+        <FormLabel>From</FormLabel>
         <AddressTile address={signerAddress} />
         <Flex my="12px" px="4px" alignItems="center" justifyContent="space-between">
           <Flex>

diff --git a/src/components/SendFlow/Multisig/SignPage.tsx b/src/components/SendFlow/Multisig/SignPage.tsx
@@ -39,18 +39,19 @@ export const SignPage: React.FC<{
 
   return (
     <ModalContent>
-      <BatchModalBody
-        fee={fee}
-        title={title}
-        signerAddress={signer.address}
-        transactionCount={transactionCount}
-      />
+      <form>
+        <BatchModalBody
+          fee={fee}
+          title={title}
+          signerAddress={signer.address}
+          transactionCount={transactionCount}
+        />
 
-      <ModalFooter>
-        <SignButton onSubmit={approveOrExecute} signer={signer} text={title} />
-      </ModalFooter>
+        <ModalFooter>
+          <SignButton onSubmit={approveOrExecute} signer={signer} text={title} />
+        </ModalFooter>
+      </form>
     </ModalContent>
   );
 };
-
 export default SignPage;