Reformatting

Author: brucedonovan

README.md

@@ -29,11 +29,11 @@ The Cacti frontend is a web-based interface where users can seamlessly interact
 
 **Widget Commands**: Central to Cacti's extensible design are the Widget Commands. These commands act as functions that an LLM can call to display an interaction dialogue box, allowing users to engage in web3 actions or access data seamlessly. The Widget Commands can be expanded upon, allowing for a broad array of functions catered to the user's needs.
 
-**Eval**: Cacti employs a flexible evaluation framework that is crucial for developers wishing to assess the performance of added widgets. This includes features like hard-coded testing, automatic evaluations, and evaluations via manually annotated test samples that can be input via a CSV file. 
+**Eval**: Cacti employs a flexible evaluation framework that is crucial for developers wishing to assess the performance of added widgets. This includes features like hard-coded testing, automatic evaluations, and evaluations via manually annotated test samples that can be input via a CSV file.
 
 **Chat Context**: All dialog boxes can add information to the chat context, enabling the LLM use context added by previous widget commands to execute a later command effectively, enhancing the overall user experience.
 
-**Configurable Chat Modules**: Chat modules can be configured to permit the use of alternative LLMs, fine-tuned LLMs, alternate prompts to LLMs, etc. Different chat modules can be used just by using a modified URL. This allows for easy testing of potential improvements to the chat modes and new features. 
+**Configurable Chat Modules**: Chat modules can be configured to permit the use of alternative LLMs, fine-tuned LLMs, alternate prompts to LLMs, etc. Different chat modules can be used just by using a modified URL. This allows for easy testing of potential improvements to the chat modes and new features.
 
 **Streaming Support**: Cacti supports streaming from LLM models, providing users with real-time updates. The system can sensibly handle widget commands included in the LLM stream, ensuring smooth and intuitive interactions.
 
@@ -45,7 +45,6 @@ The Cacti frontend is a web-based interface where users can seamlessly interact
 
 **Transaction Handling**: Cacti is designed to handle web3 transactions on Ethereum or Layer 2 solutions (L2s). It abstracts away the complexity of transaction handling from the integrator. All the integrator needs to do is pass the transaction details, and Cacti takes care of the rest, ensuring a user-friendly experience for those engaging with web3 protocols.
 
-
 ## Getting Started
 
 First, run the development server:

src/components/cactiComponents/ActionResponse.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, 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';
@@ -13,7 +14,6 @@ import { ActionStepper } from './ActionStepper';
 import useApproval, { ApprovalBasicParams } from './hooks/useApproval';
 import useBalance from './hooks/useBalance';
 import useSubmitTx, { TxBasicParams } from './hooks/useSubmitTx';
-import { TransactionReceipt } from '@ethersproject/abstract-provider';
 
 export enum ActionResponseState {
   LOADING = 'LOADING', // background async checks
@@ -58,7 +58,7 @@ export type ActionResponseProps = {
   disabled?: boolean;
   skipBalanceCheck?: boolean;
   stepper?: boolean;
-  onSuccess?: (receipt?: TransactionReceipt ) => void;
+  onSuccess?: (receipt?: TransactionReceipt) => void;
   onError?: (receipt?: TransactionReceipt) => void;
 };
 
@@ -78,7 +78,6 @@ export const ActionResponse = ({
   onSuccess,
   onError,
 }: ActionResponseProps) => {
-
   const { address } = useAccount();
   const _approvalParams = useMemo<ApprovalBasicParams>(
     () =>
@@ -153,7 +152,6 @@ export const ActionResponse = ({
    * Update all the local states on tx/approval status changes.
    **/
   useEffect(() => {
-
     if (disabled) {
       setButtonLabel(label ?? 'Disabled');
       return setState(ActionResponseState.DISABLED);

src/components/cactiComponents/DoubleLineResponse.tsx

@@ -1,8 +1,8 @@
 import { useMemo, useState } from 'react';
 import { findTokenBySymbol } from '@/utils';
+import SkeletonWrap from '../shared/SkeletonWrap';
 import { InlineChip } from './InlineChip';
 import { ResponseWrap } from './helpers/layout';
-import SkeletonWrap from '../shared/SkeletonWrap';
 
 /**
 * Dual Line Response Elements are generally used for swap, trading etc. interfaces where user wants to get addtional information about a market, or token.  

src/components/cactiComponents/ErrorResponse.tsx

@@ -10,10 +10,9 @@ import { ResponseTitle, ResponseWrap } from './helpers/layout';
 
 const textStyle = 'text-base text-white text-opacity-70 gap-1 ';
 
-
 export interface ErrorResponseProps {
-  text: string,
-  error: string,
+  text: string;
+  error: string;
 }
 /**
  * Error response element
@@ -31,7 +30,7 @@ export const ErrorResponse = (props: ErrorResponseProps): JSX.Element => {
             <Disclosure.Button as="div">
               <ResponseTitle>
                 <div className="flex items-center gap-4 text-base">
-                  <div className="w-[16px]">    
+                  <div className="w-[16px]">
                     <ExclamationTriangleIcon />
                   </div>
                   {props.text}

src/components/cactiComponents/ImageResponse.tsx

@@ -40,12 +40,16 @@ const TagItem = (props: { tag: string }) => {
 
 const Image = (props: { src?: string; alt?: string }) => {
   return (
-    <div className="w-full h-[250px] gap-2 space-y-2 overflow-auto rounded-xl bg-white bg-opacity-5 p-2  ">
+    <div className="h-[250px] w-full gap-2 space-y-2 overflow-auto rounded-xl bg-white bg-opacity-5 p-2  ">
       {props.src ? (
-        <img className="rounded-xl object-cover w-full h-full" src={props.src} alt={props.alt} />
+        <img className="h-full w-full rounded-xl object-cover" src={props.src} alt={props.alt} />
       ) : (
-        <div className="flex p-16 h-full items-center justify-center rounded-xl bg-white bg-opacity-10 text-lg text-white/50">
-          <div className='font-thin' > <CameraIcon />No Image</div>
+        <div className="flex h-full items-center justify-center rounded-xl bg-white bg-opacity-10 p-16 text-lg text-white/50">
+          <div className="font-thin">
+            {' '}
+            <CameraIcon />
+            No Image
+          </div>
         </div>
       )}
     </div>
@@ -68,8 +72,10 @@ export const ImageResponse = ({
   const Title = () => (
     <ResponseTitle>
       <div>
-        <div className={variant_ === ImageVariant.SHOWCASE ? 'text-lg': ''}> {title} </div>
-        <div className={`text-white/50 ${variant_ === ImageVariant.SHOWCASE ? '': 'text-xs'}`}>{subTitle}</div>
+        <div className={variant_ === ImageVariant.SHOWCASE ? 'text-lg' : ''}> {title} </div>
+        <div className={`text-white/50 ${variant_ === ImageVariant.SHOWCASE ? '' : 'text-xs'}`}>
+          {subTitle}
+        </div>
       </div>
       {imageLink && ( // if has external link
         <div onClick={() => navigateToExternalUrl(imageLink!)}>

src/components/cactiComponents/SingleLineResponse.tsx

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 import useToken from '@/hooks/useToken';
 import { Token } from '@/types';
+import SkeletonWrap from '../shared/SkeletonWrap';
 import { InlineChip } from './InlineChip';
 import { ResponseWrap } from './helpers/layout';
-import SkeletonWrap from '../shared/SkeletonWrap';
 
 /**
  * Header Response Elements are indicating with what app, service, or contract a user is about to interact. User have the option to leave the service and open in a new window a direct link to the app or service if they want to interact through their UI rather through our interface.

src/components/cactiComponents/hooks/useSubmitTx.tsx

@@ -2,12 +2,7 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { TransactionReceipt } from '@ethersproject/abstract-provider';
 import { useAddRecentTransaction } from '@rainbow-me/rainbowkit';
-import {
-  CallOverrides,
-  Overrides,
-  PayableOverrides,
-  UnsignedTransaction,
-} from 'ethers';
+import { CallOverrides, Overrides, PayableOverrides, UnsignedTransaction } from 'ethers';
 import {
   usePrepareContractWrite,
   usePrepareSendTransaction,
@@ -77,7 +72,7 @@ const useSubmitTx = (
     isLoading: isPending,
     isError,
     isSuccess,
-    status
+    status,
   } = useWaitForTransaction({
     hash: data?.hash,
     onSuccess: () => {
@@ -120,7 +115,7 @@ const useSubmitTx = (
     isPending,
     isSuccess,
     error,
-    status
+    status,
   };
 };
 

src/components/cactiComponents/index.ts

@@ -1,13 +1,13 @@
 import { FunctionComponent, ReactNode } from 'react';
 import { ActionResponse, ActionResponseProps } from './ActionResponse';
 import { DoubleLineResponse } from './DoubleLineResponse';
+import { ErrorResponse } from './ErrorResponse';
 import { HeaderResponse } from './HeaderResponse';
 import { IconResponse } from './IconResponse';
 import { ImageResponse, ImageResponseProps } from './ImageResponse';
 import { ListResponse } from './ListResponse';
 import { SingleLineResponse } from './SingleLineResponse';
 import { TextResponse } from './TextResponse';
-import { ErrorResponse } from './ErrorResponse';
 
 export enum CactiResponse {
   TextResponse = 'TextResponse',
@@ -46,5 +46,5 @@ export {
   ListResponse,
   ActionResponse,
   ImageResponse,
-  ErrorResponse
+  ErrorResponse,
 };

src/components/current/BotThinking.tsx

@@ -1,4 +1,3 @@
-
 import { ResponseWrap } from '../cactiComponents/helpers/layout';
 import Avatar from '../shared/Avatar';
 

src/components/current/ChatHeader.tsx

@@ -5,8 +5,8 @@ import { useMutationDeleteChat } from '@/api/chats/mutations';
 import { useMutationDeleteSharedSession } from '@/api/shares/mutations';
 import { useChatContext } from '@/contexts/ChatContext';
 import useThread from '@/hooks/useThread';
-import InputWrap from './InputWrap';
 import SkeletonWrap from '../shared/SkeletonWrap';
+import InputWrap from './InputWrap';
 
 interface TooltipProps {
   children: ReactNode;

src/components/current/CustomConnectButton.tsx

@@ -2,11 +2,11 @@ import { PowerIcon } from '@heroicons/react/24/outline';
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import { formatEther } from 'ethers/lib/utils.js';
 import { abbreviateHash, cleanValue } from '@/utils';
-import Avatar from '../shared/Avatar';
 import useBalance from '../cactiComponents/hooks/useBalance';
 import useEnsName from '../cactiComponents/hooks/useEnsName';
-import { buttonStyle } from './layout/sidebar/NewChatButton';
+import Avatar from '../shared/Avatar';
 import SkeletonWrap from '../shared/SkeletonWrap';
+import { buttonStyle } from './layout/sidebar/NewChatButton';
 
 const CustomConnectButton = () => {
   const { data: balance } = useBalance();

src/components/current/MessageInput.tsx

@@ -141,7 +141,9 @@ const MessageInput = () => {
           <CustomConnectButton />
         </div>
       ) : (
-        <div className="flex w-full justify-center animate-pulse text-sm text-white/30">Waiting for Cacti connection ...</div>
+        <div className="flex w-full animate-pulse justify-center text-sm text-white/30">
+          Waiting for Cacti connection ...
+        </div>
       )}
     </>
   );

src/components/current/MessageTranslator.tsx

@@ -2,11 +2,11 @@ import { Fragment, useEffect, useMemo, useState } from 'react';
 import { Message } from '@/contexts/ChatContext';
 import { SharedStateContextProvider } from '@/contexts/SharedStateContext';
 import { parseMessage } from '@/utils/parse-message';
-import Avatar from '../shared/Avatar';
-import { Widgetize } from '../legacy/legacyComponents/MessageTranslator';
 import { ErrorResponse, TextResponse } from '../cactiComponents';
 import { ImageVariant } from '../cactiComponents/ImageResponse';
 import { TableResponse } from '../cactiComponents/TableResponse';
+import { Widgetize } from '../legacy/legacyComponents/MessageTranslator';
+import Avatar from '../shared/Avatar';
 import { FeedbackButton } from './FeedbackButton';
 import { MessageWrap } from './MessageWrap';
 import ListContainer from './containers/ListContainer';

src/components/current/MultiStepProgressIndicator.tsx

@@ -1,6 +1,6 @@
 import { Spinner } from '../../utils';
-import Avatar from '../shared/Avatar';
 import { ResponseWrap } from '../cactiComponents/helpers/layout';
+import Avatar from '../shared/Avatar';
 
 export const MultiStepProgressIndicator = () => {
   return (

src/components/current/WelcomeMessage.tsx

@@ -19,7 +19,9 @@ const WelcomeBox = ({ onClick, children }: { onClick?: () => void; children: Rea
       text-white text-opacity-70 md:p-2 ${onClickClasses} center w-full`}
       onClick={onClick}
     >
-      <p className="m-0 flex min-h-[48px] items-center justify-center font-light text-base ">&rdquo;{children}&rdquo;</p>
+      <p className="m-0 flex min-h-[48px] items-center justify-center text-base font-light ">
+        &rdquo;{children}&rdquo;
+      </p>
     </div>
   );
 };
@@ -32,9 +34,7 @@ const WelcomeMessage = () => {
   const { sendMessage } = useChatContext();
   return (
     <div className="h-full place-items-center ">
-
       <div className="mx-auto w-full max-w-4xl space-y-20">
-
         <Image src={cactiImage} alt="CactiChat" className="mx-auto" width={400} height={300} />
 
         <div className="grid grid-cols-1 gap-20 p-4 sm:grid-cols-3">
@@ -58,7 +58,9 @@ const WelcomeMessage = () => {
             <WelcomeBox onClick={() => sendMessage('Swap 0.1 ETH for DAI on Uniswap')}>
               Swap 0.1 ETH for DAI on Uniswap
             </WelcomeBox>
-            <WelcomeBox onClick={() => sendMessage('Borrow 1000 USDC on yield Protocol with ETH collateral')}>
+            <WelcomeBox
+              onClick={() => sendMessage('Borrow 1000 USDC on yield Protocol with ETH collateral')}
+            >
               Borrow 1000 USDC on yield Protocol with ETH collateral
             </WelcomeBox>
             <WelcomeBox onClick={() => sendMessage('Register the name [domain-name].eth on ENS')}>

src/components/current/containers/MultiStepContainer.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import { UnsignedTransaction } from 'ethers';
 import { TransactionReceipt } from '@ethersproject/abstract-provider';
+import { UnsignedTransaction } from 'ethers';
 import { useChatContext } from '@/contexts/ChatContext';
 import { ActionResponse, HeaderResponse } from '../../cactiComponents';
 import { WidgetError } from '../widgets/helpers';

src/components/current/layout/sidebar/index.tsx

@@ -1,12 +1,9 @@
 import dynamic from 'next/dynamic';
 import SidebarContainer from './SidebarContainer';
 
-const SidebarInnerDynamic = dynamic(
-  () => import('@/components/current/layout/sidebar/SideBar'),
-  {
-    ssr: false,
-  }
-);
+const SidebarInnerDynamic = dynamic(() => import('@/components/current/layout/sidebar/SideBar'), {
+  ssr: false,
+});
 
 const Sidebar = ({
   isOpen,

src/components/current/widgets/nft/NftAsset.tsx

@@ -13,21 +13,20 @@ export interface NftAssetProps {
   previewImageUrl?: string;
   variant?: ImageVariant; // widget variant
   price?: string;
-  attributes?: {trait_type: string, value: string}[];
+  attributes?: { trait_type: string; value: string }[];
 }
 
-const TraitList = ({ attributes }: { attributes: {trait_type: string, value: string}[] }) => {
+const TraitList = ({ attributes }: { attributes: { trait_type: string; value: string }[] }) => {
   return (
     <div className="">
       {attributes.map((attribute, index) => (
-        <div key={index} className="text-xs mr-2 mb-2">
+        <div key={index} className="mb-2 mr-2 text-xs">
           <span className="font-bold">{attribute.trait_type}</span>: {attribute.value}
         </div>
       ))}
     </div>
-  )
-
-}
+  );
+};
 
 export const NftAsset = ({
   network,
@@ -38,16 +37,15 @@ export const NftAsset = ({
   previewImageUrl,
   variant,
   price,
-  attributes
+  attributes,
 }: NftAssetProps) => {
-
   return (
     <ImageResponse
       image={previewImageUrl}
       imageTags={
         variant === ImageVariant.SHOWCASE
           ? [`Token Id: ${tokenId}`, `${network.replace('-mainnet', '')}`]
-          : [`Token Id: ${tokenId}`] // always show the token id 
+          : [`Token Id: ${tokenId}`] // always show the token id
       }
       title={name}
       subTitle={collectionName}

src/components/current/widgets/nft/NftCollection.tsx

@@ -2,10 +2,10 @@ import { Network, useCollection } from '@center-inc/react';
 import { Address } from 'wagmi';
 import { ImageResponse } from '@/components/cactiComponents';
 import { ImageVariant } from '@/components/cactiComponents/ImageResponse';
+import { abbreviateHash } from '@/utils';
 import { Widget } from '../../MessageTranslator';
 import ListContainer from '../../containers/ListContainer';
 import { NftAsset } from './NftAsset';
-import { abbreviateHash } from '@/utils';
 
 interface NftCollectionContainerProps {
   network: Network;
@@ -28,7 +28,6 @@ export const NftCollection = ({
   variant,
   assetsToShow = [],
 }: NftCollectionContainerProps) => {
-  
   /**
    * Get the  array of the asset ids to show:
    * */
@@ -53,9 +52,9 @@ export const NftCollection = ({
         items={[
           <ImageResponse
             image={previewImageUrl}
-            imageTags={[`${(numAssets || 'Unknown')!.toString()} Assets`, network.split("-")[0] ]}
+            imageTags={[`${(numAssets || 'Unknown')!.toString()} Assets`, network.split('-')[0]]}
             title={name}
-            subTitle={abbreviateHash(address,8)}
+            subTitle={abbreviateHash(address, 8)}
             imageLink={`https://center.app/${network}/collections/${address}`}
             key={address}
             variant={variant}