Merge pull request #571 from trilitech/update-batch-page

Update batch page UI

src/components/AccountSelector/AccountSmallTile.tsx

@@ -3,7 +3,14 @@ import { useAllAccounts } from "../../utils/hooks/getAccountDataHooks";
 import { useGetAccountBalance } from "../../utils/hooks/assetsHooks";
 import { AccountSmallTileDisplay } from "./AccountSmallTileDisplay";
 
-// TODO: Make this component be able to render not only owned accounts
+/**
+ * Component used to display account info for batched transactions.
+ *
+ * Tile contains icon, account name, address and balance.
+ *
+ * @param pkh - Account public key hash.
+ * @param flexProps - Flex properties to define component style.
+ */
 export const AccountSmallTile = ({ pkh, ...flexProps }: { pkh: string } & FlexProps) => {
   const accounts = useAllAccounts();
   const getBalance = useGetAccountBalance();

src/components/AccountSelector/AccountSmallTileDisplay.tsx

@@ -4,6 +4,16 @@ import { Identicon } from "../Identicon";
 import { prettyTezAmount } from "../../utils/format";
 import colors from "../../style/colors";
 
+/**
+ * Component used to display account info for batched transactions.
+ *
+ * Tile contains icon, account name, address and balance.
+ *
+ * @param pkh - Account public key hash.
+ * @param label - Account label.
+ * @param balance - Account balance in mutez.
+ * @parma flexProps - Flex properties to define component style.
+ */
 export const AccountSmallTileDisplay = ({
   pkh,
   label,
@@ -15,12 +25,12 @@ export const AccountSmallTileDisplay = ({
   balance: string | undefined;
 } & FlexProps) => (
   <Flex data-testid="account-small-tile" alignItems="space-between" cursor="pointer" {...flexProps}>
-    <Identicon height="30px" identiconSize={20} p="5px" address={pkh} mr="7px" />
+    <Identicon height="30px" identiconSize={20} p="5px" address={pkh} mr="12px" />
     <Flex height="20px" alignSelf="center">
-      <Heading size="sm" mx={2}>
+      <Heading size="sm" mr="10px">
         {label}
       </Heading>
-      <Text size="xs" color={colors.gray[300]} mx={2}>
+      <Text size="xs" color={colors.gray[300]} mr="35px">
         {formatPkh(pkh)}
       </Text>
       {balance && <Heading size="sm">{prettyTezAmount(balance)}</Heading>}

src/components/SendFlow/SignPageHeader.test.tsx

@@ -31,7 +31,7 @@ describe("headerText", () => {
 
   describe("batch operation", () => {
     test("from implicit", () => {
-      expect(headerText("implicit", "batch")).toBe("Confirm Batch");
+      expect(headerText("implicit", "batch")).toBe("Submit Batch");
     });
 
     test("from multisig", () => {

src/components/SendFlow/SignPageHeader.tsx

@@ -12,7 +12,7 @@ export const headerText = (
   let action;
   switch (operationType) {
     case "implicit":
-      action = "Confirm";
+      action = mode === "batch" ? "Submit" : "Confirm";
       break;
     case "proposal":
       action = "Propose";

src/views/batch/BatchPage.test.tsx

@@ -110,7 +110,7 @@ describe("<BatchPage />", () => {
       const deleteButton = screen.getByTestId("remove-batch");
       fireEvent.click(deleteButton);
       expect(screen.getByText(/Are you sure/i)).toBeInTheDocument();
-      fireEvent.click(screen.getByRole("button", { name: "Clear" }));
+      fireEvent.click(screen.getByRole("button", { name: "Delete Batch" }));
       expect(screen.queryByTestId(/batch-table/i)).not.toBeInTheDocument();
     });
 
@@ -121,7 +121,7 @@ describe("<BatchPage />", () => {
           <BatchPage />
         </Modal>
       );
-      const submitBatchButton = screen.getByRole("button", { name: /confirm batch/i });
+      const submitBatchButton = screen.getByRole("button", { name: /submit batch/i });
       fireEvent.click(submitBatchButton);
 
       expect(jest.mocked(estimate)).toHaveBeenCalledWith(operations, MAINNET);

src/views/batch/BatchView.tsx

@@ -79,9 +79,9 @@ const ClearBatchConfirmationModal = ({ sender }: { sender: Account }) => {
   return (
     <ConfirmationModal
       title="Are you sure?"
-      description="It will remove all the transactions from the batch."
+      description="This will remove all transactions from the batch."
       onSubmit={() => clearBatch(sender)}
-      buttonLabel="Clear"
+      buttonLabel="Delete Batch"
     />
   );
 };