Port single-step and multi-step components to the new UI

src/components/cactiComponents/ActionResponse.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import Skeleton from 'react-loading-skeleton';
+import { TransactionReceipt } from '@ethersproject/abstract-provider';
 import { AddressZero } from '@ethersproject/constants';
 import { CheckCircleIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import { ConnectButton } from '@rainbow-me/rainbowkit';
@@ -55,7 +56,8 @@ export type ActionResponseProps = {
   label?: string;
   disabled?: boolean;
   stepper?: boolean;
-  onSuccess?: () => JSX.Element | string;
+  onSuccess?: (txReceipt?: TransactionReceipt) => any;
+  onError?: (txHash?: string) => any;
   // assertCallParams?: AssertCallBasicParams;
   // altAction?: () => Promise<any>;
 };
@@ -71,11 +73,13 @@ export const ActionResponse = ({
   label: label_,
   disabled,
   stepper,
+  onSuccess,
+  onError,
 }: ActionResponseProps) => {
   const defaultLabel = label_ || 'Submit';
   const { address } = useAccount();
 
-  const { submitTx, isWaitingOnUser, isTransacting, error, isSuccess, receipt } = useSubmitTx(
+  const { submitTx, isWaitingOnUser, isTransacting, error, isSuccess, receipt, hash } = useSubmitTx(
     txParams,
     sendParams
   );
@@ -178,6 +182,7 @@ export const ActionResponse = ({
         console.log('Error Building/Validating tx');
         setLabel(`Error validating the transaction.`);
         setState(ActionResponseState.ERROR);
+        onError?.(hash);
       }
 
       /* case tx/approval success, waiting for tx-building */
@@ -210,6 +215,7 @@ export const ActionResponse = ({
         console.log('TX SUCCESS');
         setLabel('Transaction Complete');
         setState(ActionResponseState.SUCCESS);
+        onSuccess?.(receipt);
       }
     }
   }, [

src/components/experimental_/MessageList_.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useRef } from 'react';
+import { is } from 'date-fns/locale';
 import { useChatContext } from '@/contexts/ChatContext';
 import { BotThinking } from './BotThinking';
 import { MessageItem } from './MessageItem_';
+import { MultiStepProgressIndicator } from './MultiStepProgressIndicator';
 
 export const MessageList = () => {
   const {
@@ -38,8 +40,11 @@ export const MessageList = () => {
             {message.messageId == insertBeforeMessageId && (
               <>
                 {bottomRefDiv}
-                {multiStepInProgress}
-                {isBotThinking ? <BotThinking /> : null}
+                <ProgressIndicators
+                  isBotThinking={isBotThinking}
+                  isMultiStepInProgress={isMultiStepInProgress}
+                  bottomRef={bottomRef}
+                />
               </>
             )}
             <MessageItem message={message} />
@@ -49,11 +54,37 @@ export const MessageList = () => {
 
       {!insertBeforeMessageId && (
         <>
-          {multiStepInProgress}
-          {isBotThinking ? <BotThinking /> : null}
+          <ProgressIndicators
+            isBotThinking={isBotThinking}
+            isMultiStepInProgress={isMultiStepInProgress}
+            bottomRef={bottomRef}
+          />
           {bottomRefDiv}
         </>
       )}
     </div>
   );
 };
+
+const ProgressIndicators = ({
+  isBotThinking,
+  isMultiStepInProgress,
+  bottomRef,
+}: {
+  isBotThinking: boolean;
+  isMultiStepInProgress: boolean;
+  bottomRef: React.RefObject<HTMLDivElement>;
+}) => {
+  useEffect(() => {
+    if (isMultiStepInProgress) {
+      bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [isMultiStepInProgress, bottomRef]);
+
+  return (
+    <>
+      {isMultiStepInProgress ? <MultiStepProgressIndicator /> : null}
+      {isBotThinking ? <BotThinking /> : null}
+    </>
+  );
+};

src/components/experimental_/MessageTranslator_.tsx

@@ -8,9 +8,10 @@ import { Widgetize } from '../MessageTranslator';
 import { TextResponse } from '../cactiComponents';
 import { ImageVariant } from '../cactiComponents/ImageResponse';
 import { TableResponse } from '../cactiComponents/TableResponse';
-import { MultiStepContainer } from '../widgets/MultiStepContainer';
 import { FeedbackButton } from './FeedbackButton_';
 import ListContainer from './containers/ListContainer';
+import { MultiStepContainer } from './containers/MultiStepContainer';
+import { SingleStepContainer } from './containers/SingleStepContainer';
 import { StreamingContainer } from './containers/StreamingContainer';
 import LiquityBorrow from './widgets/liquity/borrow/LiquityBorrow';
 import LiquityClose from './widgets/liquity/close/LiquityClose';
@@ -82,6 +83,10 @@ export const MessageTranslator = ({ message }: { message: Message }) => {
           if (item.name === 'display-multistep-payload-container')
             return [...list, <MultiStepContainer key={idx} {...JSON.parse(item.params)} />];
 
+          /* handle if a single step container is passed */
+          if (item.name === 'display-tx-payload-for-sending-container')
+            return [...list, <SingleStepContainer key={idx} {...JSON.parse(item.params)} />];
+
           /* if item has a function name, assume its a widget */
           return [...list, <Widget key={idx} widget={item} />];
         }

src/components/experimental_/MultiStepProgressIndicator.tsx

@@ -0,0 +1,34 @@
+import { Spinner } from '../../utils';
+import Avatar from '../Avatar';
+import { ResponseWrap } from '../cactiComponents/helpers/layout';
+
+export const MultiStepProgressIndicator = () => {
+  return (
+    <div className="grid-gap-2 grid grid-cols-12 py-3">
+      <div className="col-span-2 py-4">
+        <div className="float-right">
+          <Avatar actor="bot" />
+        </div>
+      </div>
+
+      <div
+        className="col-span-8 flex 
+          h-full w-full flex-col 
+          gap-2 
+          px-4 
+          text-white/70
+          "
+      >
+        <ResponseWrap>
+          <div className="cen flex w-full justify-center">
+            <Spinner className="text-white" />
+            <div>
+              There are more steps in the current workflow, please wait as the system computes the
+              next step.
+            </div>
+          </div>
+        </ResponseWrap>
+      </div>
+    </div>
+  );
+};

src/components/experimental_/containers/MultiStepContainer.tsx

@@ -1,7 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
+import { TransactionReceipt } from '@ethersproject/abstract-provider';
+import { UnsignedTransaction } from 'ethers';
 import { SendTransaction } from '@/components/widgets/SendTransaction';
 import { useChatContext } from '@/contexts/ChatContext';
+import { ActionResponse, HeaderResponse } from '../../cactiComponents';
 import { WidgetError } from '../widgets/helpers';
+import { ConnectFirst } from '../widgets/helpers/ConnectFirst';
 
 interface MultiStepContainerProps {
   status: 'success' | 'error';
@@ -18,6 +22,8 @@ interface MultiStepContainerProps {
 }
 
 interface UserActionTxTypeProps {
+  stepNumber: number;
+  isFinalStep: boolean;
   tx: { from: string; to: string; value: string; data: string; gas: string } | null;
   sendStepResult: (stepStatus: string, stepStatusMessage: string, userActionData: string) => void;
   description: string;
@@ -85,34 +91,60 @@ export const MultiStepContainer = ({
   }
 
   if (userActionType === 'tx') {
-    return <UserActionTxType tx={tx} sendStepResult={sendStepResult} description={description} />;
+    return (
+      <UserActionTxType
+        stepNumber={stepNumber}
+        isFinalStep={isFinalStep}
+        tx={tx}
+        sendStepResult={sendStepResult}
+        description={description}
+      />
+    );
   }
 
   if (userActionType === 'acknowledge') {
-    return <div>ACKNOWLEDGE WIDGET</div>;
+    return <div>ACKNOWLEDGEMENT ACTION TYPE NOT IMPLEMENTED</div>;
   }
 
   return <div>INVALID</div>;
 };
 
-export const UserActionTxType = ({ tx, sendStepResult, description }: UserActionTxTypeProps) => {
-  const handleTxResult = (
-    sendError: Error | null,
-    txError: Error | null,
-    isTxSuccess: boolean,
-    sendTxData: any
-  ) => {
-    if (sendError?.message || txError?.message) {
-      const errMsg = sendError?.message || txError?.message;
-      sendStepResult('error', `Transaction failed, error: ${errMsg}`, sendTxData?.hash);
-    } else if (isTxSuccess && sendTxData?.hash) {
-      sendStepResult(
-        'success',
-        `Transaction successful, hash: ${sendTxData?.hash}`,
-        sendTxData?.hash
-      );
-    }
+export const UserActionTxType = ({
+  stepNumber,
+  isFinalStep,
+  tx,
+  sendStepResult,
+  description,
+}: UserActionTxTypeProps) => {
+  const handleSuccess = (receipt?: TransactionReceipt) => {
+    sendStepResult('success', `Transaction successful`, receipt?.transactionHash || '');
+  };
+
+  const handleError = (txHash?: string) => {
+    sendStepResult('error', `Transaction failed`, txHash || '');
   };
 
-  return <SendTransaction tx={tx} description={description} onResult={handleTxResult} />;
+  const unsignedTx: UnsignedTransaction = {
+    to: tx?.to,
+    data: tx?.data,
+    value: tx?.value,
+    gasLimit: tx?.gas,
+  };
+
+  const stepDescription =
+    stepNumber === 1 && isFinalStep ? description : `Step ${stepNumber}: ${description}`;
+
+  return (
+    <ConnectFirst>
+      <HeaderResponse text={stepDescription} />
+      <ActionResponse
+        label={`Send Transaction`}
+        sendParams={unsignedTx}
+        onSuccess={handleSuccess}
+        onError={handleError}
+        txParams={undefined}
+        approvalParams={undefined}
+      />
+    </ConnectFirst>
+  );
 };

src/components/experimental_/containers/SingleStepContainer.tsx

@@ -0,0 +1,43 @@
+import { UnsignedTransaction } from 'ethers';
+import { ActionResponse, HeaderResponse } from '../../cactiComponents';
+import { WidgetError } from '../widgets/helpers';
+import { ConnectFirst } from '../widgets/helpers/ConnectFirst';
+
+// NOTE: May need to deprecate this in favor of MultiStepContainer
+interface SingleStepContainerProps {
+  userRequestStatus: 'success' | 'error';
+  tx: { from: string; to: string; value: string; data: string; gas: string } | null;
+  errorMsg: string;
+  parsedUserRequest: string;
+  description: string;
+}
+
+export const SingleStepContainer = ({
+  userRequestStatus,
+  tx,
+  errorMsg,
+  description,
+}: SingleStepContainerProps) => {
+  if (userRequestStatus === 'error') {
+    return <WidgetError>{errorMsg}</WidgetError>;
+  }
+
+  const unsignedTx: UnsignedTransaction = {
+    to: tx?.to,
+    data: tx?.data,
+    value: tx?.value,
+    gasLimit: tx?.gas,
+  };
+
+  return (
+    <ConnectFirst>
+      <HeaderResponse text={description} />
+      <ActionResponse
+        label={`Send Transaction`}
+        sendParams={unsignedTx}
+        txParams={undefined}
+        approvalParams={undefined}
+      />
+    </ConnectFirst>
+  );
+};

src/components/experimental_/widgets/helpers/WidgetError.tsx

@@ -3,13 +3,13 @@ import { XCircleIcon } from '@heroicons/react/20/solid';
 
 export const WidgetError = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="max-h-48 overflow-y-auto rounded-md bg-red-50 p-4">
+    <div className="max-h-48 overflow-y-auto rounded-md p-4">
       <div className="flex">
         <div className="">
-          <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+          <XCircleIcon className="h-6 w-6 text-red-400" aria-hidden="true" />
         </div>
         <div className="ml-3">
-          <h3 className="break-all text-sm font-medium text-red-800">{children}</h3>
+          <h3 className="break-all font-medium text-white/70">Error: {children}</h3>
           <div className="mt-2 text-sm text-red-700">
             <ul role="list" className="list-disc space-y-1 pl-5"></ul>
           </div>