feat(new-ui): support dynamic text in transaction modals

Author: monitz87

packages/new-polymath-ui/src/components/ModalConfirmTransactionQueue/ModalConfirmTransactionQueue.tsx

@@ -3,20 +3,25 @@ import { types, typeHelpers } from '@polymathnetwork/new-shared';
 import { ModalConfirm } from '~/components/ModalConfirm';
 import { Paragraph } from '~/components/Paragraph';
 import { ModalStatus } from '~/components/Modal/types';
-import { getTransactionQueueText } from '~/components/utils/contentMappings';
+import { getTransactionQueueContent } from '~/components/utils/contentMappings';
 import { TransactionItem } from './TransactionItem';
 
 type ModalConfirmProps = typeHelpers.GetProps<typeof ModalConfirm>;
 
 interface Props extends ModalConfirmProps {
   transactionQueue: types.TransactionQueuePojo;
+  getContent: (
+    queue: types.TransactionQueuePojo
+  ) => {
+    title: string;
+    description: string;
+  };
 }
 
-export const ModalConfirmTransactionQueue: FC<Props> = ({
-  transactionQueue,
-  ...props
-}) => {
-  const transactionQueueText = getTransactionQueueText(transactionQueue);
+const ModalConfirmTransactionQueue: FC<Props> & {
+  defaultProps: { getContent: Props['getContent'] };
+} = ({ transactionQueue, getContent, ...props }) => {
+  const { title, description } = getContent(transactionQueue);
   return (
     <ModalConfirm
       isOpen={!!transactionQueue}
@@ -25,8 +30,8 @@ export const ModalConfirmTransactionQueue: FC<Props> = ({
       isCentered={false}
       {...props}
     >
-      <ModalConfirm.Header>{transactionQueueText.title}</ModalConfirm.Header>
-      <Paragraph fontSize={2}>{transactionQueueText.description}</Paragraph>
+      <ModalConfirm.Header>{title}</ModalConfirm.Header>
+      <Paragraph fontSize={2}>{description}</Paragraph>
       <div>
         {transactionQueue.transactions.map(transaction => (
           <TransactionItem key={transaction.uid} transaction={transaction} />
@@ -35,3 +40,9 @@ export const ModalConfirmTransactionQueue: FC<Props> = ({
     </ModalConfirm>
   );
 };
+
+ModalConfirmTransactionQueue.defaultProps = {
+  getContent: getTransactionQueueContent,
+};
+
+export { ModalConfirmTransactionQueue };

packages/new-polymath-ui/src/components/ModalConfirmTransactionQueue/TransactionItem/index.tsx

@@ -1,20 +1,32 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { types } from '@polymathnetwork/new-shared';
 import { Box } from '~/components/Box';
 import { IconCircled } from '~/components/IconCircled';
 import { Heading } from '~/components/Heading';
 import { CardPrimary } from '~/components/CardPrimary';
 import { Paragraph } from '~/components/Paragraph';
-import { getTransactionText } from '~/components/utils/contentMappings';
+import {
+  getTransactionIcon,
+  getTransactionContent,
+} from '~/components/utils/contentMappings';
 
 import * as sc from './styles';
 
 interface TransactionItemProps {
-  transaction: types.TransactionEntity;
+  transaction: types.TransactionPojo;
+  getContent: (
+    transaction: types.TransactionPojo
+  ) => {
+    title: string;
+    description: string;
+  };
 }
 
-export const TransactionItem = ({ transaction }: TransactionItemProps) => {
-  const { title, description, Icon } = getTransactionText(transaction);
+export const TransactionItem: FC<TransactionItemProps> & {
+  defaultProps: { getContent: TransactionItemProps['getContent'] };
+} = ({ transaction, getContent }: TransactionItemProps) => {
+  const { title, description } = getContent(transaction);
+  const Icon = getTransactionIcon(transaction);
   return (
     <sc.Wrapper alignItems="flex-start">
       <Box minWidth={50} mt={1}>
@@ -37,3 +49,7 @@ export const TransactionItem = ({ transaction }: TransactionItemProps) => {
     </sc.Wrapper>
   );
 };
+
+TransactionItem.defaultProps = {
+  getContent: getTransactionContent,
+};

packages/new-polymath-ui/src/components/ModalTransactionQueue/ModalTransactionQueue.tsx

@@ -7,8 +7,8 @@ import { Paragraph } from '~/components/Paragraph';
 import { Flex } from '~/components/Flex';
 import { Box } from '~/components/Box';
 import { Modal, ModalStatus } from '~/components/Modal';
-import { getTransactionQueueText } from '~/components/utils/contentMappings';
 import { TransactionItem } from './TransactionItem';
+import { getTransactionQueueTitle } from '~/components/utils/contentMappings';
 
 type ModalProps = typeHelpers.Omit<
   typeHelpers.GetProps<typeof Modal>,
@@ -34,27 +34,21 @@ const getLabelText = (status: ModalStatus) =>
     [ModalStatus.Success]: 'Completed',
   }[status]);
 
-const getTitleText = (status: ModalStatus, title: string) =>
-  ({
-    [ModalStatus.Idle]: `Proceed with ${title}`,
-    [ModalStatus.Loading]: `Proceed with ${title}`,
-    [ModalStatus.Warning]: `An error occured with ${title}`,
-    [ModalStatus.Alert]: `An error occured with ${title}`,
-    [ModalStatus.Success]: `${title} was successfully submitted`,
-  }[status]);
-
 export interface ModalTransactionQueueProps extends ModalProps {
   transactionQueue: types.TransactionQueuePojo;
   onContinue: () => void;
   withEmail?: boolean;
   continueButtonText?: string;
+  getTitle: (queue: types.TransactionQueuePojo) => string;
+  getTransactionTitle?: (transaction: types.TransactionPojo) => string;
 }
 
 export class ModalTransactionQueue extends Component<
   ModalTransactionQueueProps
 > {
   public static defaultProps = {
     continueButtonText: 'Continue',
+    getTitle: getTransactionQueueTitle,
   };
 
   public render() {
@@ -64,6 +58,8 @@ export class ModalTransactionQueue extends Component<
       isOpen,
       continueButtonText,
       onContinue,
+      getTitle,
+      getTransactionTitle,
     } = this.props;
 
     const { transactions, status } = transactionQueue;
@@ -83,14 +79,15 @@ export class ModalTransactionQueue extends Component<
           status={modalStatus}
           label={'Transaction ' + getLabelText(modalStatus)}
         >
-          {getTitleText(
-            modalStatus,
-            getTransactionQueueText(transactionQueue).title
-          )}
+          {getTitle(transactionQueue)}
         </Modal.Header>
 
         {transactions.map(transaction => (
-          <TransactionItem key={transaction.uid} transaction={transaction} />
+          <TransactionItem
+            key={transaction.uid}
+            transaction={transaction}
+            getTitle={getTransactionTitle}
+          />
         ))}
 
         {isSuccess && withEmail && (

packages/new-polymath-ui/src/components/ModalTransactionQueue/TransactionItem/TransactionItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { types, utils } from '@polymathnetwork/new-shared';
 import { Box } from '~/components/Box';
 import { Icon } from '~/components/Icon';
@@ -12,17 +12,18 @@ import { Link } from '~/components/Link';
 import { SvgClose } from '~/images/icons/Close';
 import { SvgCheckmark } from '~/images/icons/Checkmark';
 import { SvgPending } from '~/images/icons/Pending';
-import { getTransactionText } from '~/components/utils/contentMappings';
 
 import * as sc from './styles';
+import { getTransactionTitle } from '~/components/utils/contentMappings';
 
 const { TransactionStatus } = types;
 
 interface TransactionItemProps {
   transaction: types.TransactionPojo;
+  getTitle: (transaction: types.TransactionPojo) => string;
 }
 
-const getIcon = (transaction: types.TransactionEntity) => {
+const getIcon = (transaction: types.TransactionPojo) => {
   const { status } = transaction;
 
   if (
@@ -47,8 +48,10 @@ const getIcon = (transaction: types.TransactionEntity) => {
   return null;
 };
 
-export const TransactionItem = ({ transaction }: TransactionItemProps) => {
-  const { title } = getTransactionText(transaction);
+const TransactionItem: FC<TransactionItemProps> & {
+  defaultProps: { getTitle: TransactionItemProps['getTitle'] };
+} = ({ transaction, getTitle }) => {
+  const title = getTitle(transaction);
   const { txHash } = transaction;
 
   return (
@@ -78,3 +81,9 @@ export const TransactionItem = ({ transaction }: TransactionItemProps) => {
     </sc.Wrapper>
   );
 };
+
+TransactionItem.defaultProps = {
+  getTitle: getTransactionTitle,
+};
+
+export { TransactionItem };