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

Update batch page

package.json

@@ -78,6 +78,7 @@
     "@types/jest": "27.5.1",
     "@types/node": "18.15.0",
     "@types/papaparse": "^5.3.7",
+    "@types/pluralize": "^0.0.30",
     "@types/prop-types": "^15.7.5",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
@@ -108,8 +109,10 @@
     "jest-fail-on-console": "^3.1.1",
     "lodash": "^4.17.21",
     "mockdate": "^3.0.5",
+    "nano-id": "^1.1.0",
     "os-browserify": "^0.3.0",
     "papaparse": "^5.4.1",
+    "pluralize": "^8.0.0",
     "prettier": "^2.8.8",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",

src/Router.tsx

@@ -17,7 +17,7 @@ import SettingsView from "./views/settings/SettingsView";
 import { withSideMenu } from "./views/withSideMenu";
 import HelpView from "./views/help/HelpView";
 import AddressBookView from "./views/addressBook/AddressBookView";
-import BatchView from "./views/batch/BatchView";
+import BatchPage from "./views/batch/BatchPage";
 import { resetBeacon, useBeaconInit } from "./utils/beacon/beacon";
 import TokensView from "./views/tokens/TokensView";
 import { useDeeplinkHandler } from "./utils/useDeeplinkHandler";
@@ -55,7 +55,7 @@ const MemoizedRouter = React.memo(() => {
           <Route path="/address-book" element={withSideMenu(<AddressBookView />)} />
           <Route path="/settings" element={withSideMenu(<SettingsView />)} />
           <Route path="/help" element={withSideMenu(<HelpView />)} />
-          <Route path="/batch" element={withSideMenu(<BatchView />)} />
+          <Route path="/batch" element={withSideMenu(<BatchPage />)} />
           <Route path="/*" element={<Navigate to="/home" />} />
         </Routes>
         {dynamicModal.content}

src/components/AccountCard/AccountCard.test.tsx

@@ -124,7 +124,7 @@ describe("<AccountCard />", () => {
     {
       const { getByTestId } = within(tokenTiles[0]);
       expect(getByTestId("token-name")).toHaveTextContent("Hedgehoge");
-      expect(getByTestId("token-balance")).toHaveTextContent("10000");
+      expect(getByTestId("token-balance")).toHaveTextContent("10,000.000000");
       expect(getByTestId("token-symbol")).toHaveTextContent("HEH");
     }
 

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

@@ -95,7 +95,7 @@ describe("<MultisigDecodedOperationItem/>", () => {
       />
     );
 
-    expect(screen.getByTestId("decoded-fa-amount")).toHaveTextContent("-3 mockSymbol");
+    expect(screen.getByTestId("decoded-fa-amount")).toHaveTextContent("-3.00 mockSymbol");
   });
 
   it("NFT amount renders correctly", () => {

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

@@ -2,7 +2,7 @@ import { Box, Flex, Heading, Icon, Text } from "@chakra-ui/react";
 import { FiArrowUpRight } from "react-icons/fi";
 import { Operation } from "../../../../types/Operation";
 import colors from "../../../../style/colors";
-import { formatTokenAmount, tokenDecimals, tokenName, tokenSymbol } from "../../../../types/Token";
+import { tokenNameSafe, tokenPrettyAmount } from "../../../../types/Token";
 import { prettyTezAmount } from "../../../../utils/format";
 import { useGetToken } from "../../../../utils/hooks/tokensHooks";
 import AddressPill from "../../../AddressPill/AddressPill";
@@ -66,9 +66,7 @@ const MultisigOperationAmount: React.FC<{
       if (!asset) {
         return null;
       }
-      const symbol = tokenSymbol(asset);
-      const decimals = tokenDecimals(asset);
-      const name = tokenName(asset);
+      const name = tokenNameSafe(asset);
       const isNFT = asset.type === "nft";
 
       return (
@@ -80,7 +78,7 @@ const MultisigOperationAmount: React.FC<{
             </Text>
           ) : (
             <Text textAlign="center" ml={1}>
-              -{formatTokenAmount(operation.amount, decimals)} {symbol}
+              -{tokenPrettyAmount(operation.amount, asset, { showSymbol: true })}
             </Text>
           )}
         </Flex>

src/components/AccountCard/AssetsPanel/TokenList.tsx

@@ -2,14 +2,19 @@ import { Box, Flex, Heading, Icon, Image, Text } from "@chakra-ui/react";
 import { MdGeneratingTokens } from "react-icons/md";
 import colors from "../../../style/colors";
 import { FA12TokenBalance, FA2TokenBalance } from "../../../types/TokenBalance";
-import { httpIconUri, tokenName, tokenPrettyBalance, tokenSymbol } from "../../../types/Token";
+import {
+  httpIconUri,
+  tokenNameSafe,
+  tokenPrettyAmount,
+  tokenSymbolSafe,
+} from "../../../types/Token";
 import NoItems from "../../NoItems";
 
 const TokenTile = ({ token }: { token: FA12TokenBalance | FA2TokenBalance }) => {
-  const name = tokenName(token);
-  const symbol = tokenSymbol(token);
+  const name = tokenNameSafe(token);
+  const symbol = tokenSymbolSafe(token);
   const iconUri = httpIconUri(token);
-  const prettyAmount = tokenPrettyBalance(token.balance, token, { showSymbol: false });
+  const prettyAmount = tokenPrettyAmount(token.balance, token, { showSymbol: false });
   return (
     <Flex
       justifyContent="space-around"

src/components/ConfirmationModal.test.tsx

@@ -0,0 +1,38 @@
+import { fireEvent, render, screen } from "../mocks/testUtils";
+import { ConfirmationModal } from "./ConfirmationModal";
+
+describe("<ConfirmationModal />", () => {
+  it("shows title", () => {
+    render(<ConfirmationModal title="Some title" buttonLabel="test" onSubmit={jest.fn()} />);
+    expect(screen.getByRole("heading")).toHaveTextContent("Some title");
+  });
+
+  it("shows description", () => {
+    render(
+      <ConfirmationModal
+        title="Some title"
+        description="Some description"
+        buttonLabel="test"
+        onSubmit={jest.fn()}
+      />
+    );
+    expect(screen.getByTestId("description")).toHaveTextContent("Some description");
+  });
+
+  it("doesn't render body if no description is provided", () => {
+    render(<ConfirmationModal title="Some title" buttonLabel="test" onSubmit={jest.fn()} />);
+    expect(screen.queryByTestId("description")).not.toBeInTheDocument();
+  });
+
+  it("executes the passed in onSubmit callback", () => {
+    const onSubmit = jest.fn();
+    render(
+      <ConfirmationModal title="Some title" buttonLabel="Do dangerous things" onSubmit={onSubmit} />
+    );
+    const submitButton = screen.getByRole("button", { name: "Do dangerous things" });
+    expect(submitButton).toBeInTheDocument();
+
+    fireEvent.click(submitButton);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});

src/components/ConfirmationModal.tsx

@@ -0,0 +1,52 @@
+import {
+  Box,
+  Button,
+  Heading,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Text,
+} from "@chakra-ui/react";
+import { useContext } from "react";
+import { DynamicModalContext } from "./DynamicModal";
+import WarningIcon from "../assets/icons/Warning";
+import colors from "../style/colors";
+
+export const ConfirmationModal: React.FC<{
+  title: string;
+  buttonLabel: string;
+  description?: string;
+  onSubmit: () => void;
+}> = ({ title, description, buttonLabel, onSubmit }) => {
+  const { onClose } = useContext(DynamicModalContext);
+  const onClick = () => {
+    onSubmit();
+    onClose();
+  };
+
+  return (
+    <ModalContent>
+      <ModalHeader textAlign="center">
+        <Box>
+          <WarningIcon w="40px" h="40px" mb="16px" />
+        </Box>
+        <Heading>{title}</Heading>
+        <ModalCloseButton />
+      </ModalHeader>
+      {description && (
+        <ModalBody>
+          <Text align="center" color={colors.gray[400]} data-testid="description">
+            {description}
+          </Text>
+        </ModalBody>
+      )}
+      <ModalFooter>
+        <Button w="100%" onClick={onClick} variant="warning">
+          {buttonLabel}
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+};

src/components/DynamicModal.tsx

@@ -1,9 +1,9 @@
-import { Modal, ModalOverlay, useDisclosure } from "@chakra-ui/react";
+import { Modal, ModalOverlay, ModalProps, useDisclosure } from "@chakra-ui/react";
 import { createContext, ReactElement, useState } from "react";
 
 // this should be used in components as useContext(DynamicModalContext);
 export const DynamicModalContext = createContext<{
-  openWith: (content: ReactElement) => Promise<void>;
+  openWith: (content: ReactElement, size?: ModalProps["size"]) => Promise<void>;
   onClose: () => void;
   isOpen: boolean;
 }>({
@@ -24,8 +24,10 @@ export const DynamicModalContext = createContext<{
 export const useDynamicModal = () => {
   const { isOpen, onClose, onOpen } = useDisclosure();
   const [modalContent, setModalContent] = useState<ReactElement | null>(null);
+  const [size, setSize] = useState<ModalProps["size"]>("md");
 
-  const openWith = async (content: ReactElement) => {
+  const openWith = async (content: ReactElement, size: ModalProps["size"] = "md") => {
+    setSize(size);
     setModalContent(content);
     onOpen();
   };
@@ -40,6 +42,7 @@ export const useDynamicModal = () => {
         onClose={onClose}
         closeOnOverlayClick={false}
         autoFocus={false}
+        size={size}
         isCentered
       >
         <ModalOverlay />

src/components/SendFlow/Token/FormPage.tsx

@@ -27,7 +27,12 @@ import {
   useOpenSignPageFormAction,
 } from "../onSubmitFormActionHooks";
 import { FA12TokenBalance, FA2TokenBalance } from "../../../types/TokenBalance";
-import { formatTokenAmount, getRealAmount, tokenDecimals, tokenSymbol } from "../../../types/Token";
+import {
+  formatTokenAmount,
+  getRealAmount,
+  tokenDecimals,
+  tokenSymbolSafe,
+} from "../../../types/Token";
 import FormPageHeader from "../FormPageHeader";
 import { FormErrorMessage } from "../../FormErrorMessage";
 
@@ -116,7 +121,7 @@ const FormPage: React.FC<
                   placeholder={smallestUnit}
                 />
                 <InputRightElement pr={3} data-testid="token-symbol">
-                  {tokenSymbol(token)}
+                  {tokenSymbolSafe(token)}
                 </InputRightElement>
               </InputGroup>
               {errors.prettyAmount && (

src/components/SendFlow/Token/SignPage.tsx

@@ -16,7 +16,7 @@ import SignButton from "../../sendForm/components/SignButton";
 import { SignPageProps, useSignPageHelpers } from "../utils";
 import { SignPageHeader, headerText } from "../SignPageHeader";
 import { FATokenBalance } from "./FormPage";
-import { formatTokenAmount, tokenSymbol } from "../../../types/Token";
+import { formatTokenAmount, tokenSymbolSafe } from "../../../types/Token";
 import { FA12Transfer } from "../../../types/Operation";
 import { OperationSignerSelector } from "../OperationSignerSelector";
 import SignPageFee from "../SignPageFee";
@@ -51,7 +51,7 @@ const SignPage: React.FC<SignPageProps<{ token: FATokenBalance }>> = props => {
                 value={formatTokenAmount(amount, token.metadata?.decimals)}
               />
               <InputRightElement pr={3} data-testid="token-symbol">
-                {tokenSymbol(token)}
+                {tokenSymbolSafe(token)}
               </InputRightElement>
             </InputGroup>
 

src/components/sendForm/steps/FillStep.tsx

@@ -22,7 +22,7 @@ import React from "react";
 import { FormProvider, useForm, useFormContext } from "react-hook-form";
 import { AccountType, MultisigAccount } from "../../../types/Account";
 import { parseImplicitPkh, parsePkh, RawPkh } from "../../../types/Address";
-import { getRealAmount, tokenSymbol } from "../../../types/Token";
+import { getRealAmount, tokenSymbolSafe } from "../../../types/Token";
 import { Operation } from "../../../types/Operation";
 import { tezToMutez } from "../../../utils/format";
 import {
@@ -120,7 +120,7 @@ const getAmountSymbol = (asset?: Token) => {
     return "editions";
   }
 
-  return tokenSymbol(asset);
+  return tokenSymbolSafe(asset);
 };
 
 export const FillBatchForm: React.FC<{

src/mocks/factories.ts

@@ -334,6 +334,8 @@ export const mockNftOperation = (index: number): FA2Transfer => ({
   tokenId: String(index),
 });
 
+export const mockFA2Operation = mockNftOperation;
+
 export const mockDelegationOperation = (index: number): Delegation => {
   return {
     type: "delegation",

src/mocks/nftTokens.ts

@@ -1,6 +1,6 @@
 import { RawTokenBalance } from "../types/TokenBalance";
 
-export const ghotnetThezard: RawTokenBalance = {
+export const ghostnetThezard: RawTokenBalance = {
   id: 139206711050241,
   account: {
     address: "KT1MYis2J1hpjxVcfF92Mf7AfXouzaxsYfKm",