Merge pull request #450 from yieldprotocol/release/v0.2

v0.2.0 public release

.env.example

@@ -6,8 +6,7 @@ NEXT_PUBLIC_TENDERLY_FORK_ID=
 NEXT_PUBLIC_TENDERLY_USER=
 NEXT_PUBLIC_TENDERLY_PROJECT=
 NEXT_PUBLIC_TENDERLY_ACCESS_KEY=
-NEXT_PUBLIC_CENTER_APP_KEY=
-NEXT_PUBLIC_OPENSEA_API_KEY=
+
 NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=
 
 NEXTAUTH_URL=http://localhost:3000

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:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chatweb3-frontend",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -24,6 +24,7 @@
     "@center-inc/react": "^1.1.13",
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.14",
+    "@hop-protocol/sdk": "^0.0.1-beta.535",
     "@liquity/lib-base": "^3.0.0",
     "@liquity/lib-ethers": "^3.4.0",
     "@next/font": "13.1.2",
@@ -57,7 +58,8 @@
     "react-use-websocket": "^4.3.1",
     "siwe": "^2.1.4",
     "swr": "^2.0.4",
-    "typescript": "4.9.4",
+    "typescript": "^5.2.2",
+    "viem": "^1.9.3",
     "wagmi": "^0.12.0",
     "zksync-web3": "^0.14.3"
   },

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,6 +152,11 @@ export const ActionResponse = ({
    * Update all the local states on tx/approval status changes.
    **/
   useEffect(() => {
+    if (disabled) {
+      setButtonLabel(label ?? 'Disabled');
+      return setState(ActionResponseState.DISABLED);
+    }
+
     // pre-approval and pre-tx state
     if (!hasEnoughBalance) {
       setButtonLabel('Insufficient Balance');
@@ -246,6 +250,7 @@ export const ActionResponse = ({
     isWaitingOnUser,
     submitTx,
     token?.symbol,
+    disabled,
   ]);
 
   /* Set the styling based on the state (Note: always diasbled if 'disabled' from props) */

src/components/cactiComponents/DoubleLineResponse.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
-import Skeleton from '@/components/SkeletonWrap';
 import { findTokenBySymbol } from '@/utils';
+import SkeletonWrap from '../shared/SkeletonWrap';
 import { InlineChip } from './InlineChip';
 import { ResponseWrap } from './helpers/layout';
 
@@ -46,18 +46,18 @@ export const DoubleLineResponse = (props: any) => {
                 <InlineChip label={token?.symbol} image={token?.logoURI} />
               </div>
               <div className="text-xl text-white/70 ">
-                {amount ? amount : <Skeleton width={50} />}
+                {amount ? amount : <SkeletonWrap width={50} />}
               </div>
             </div>
 
             {/* Calculated values/ exncahnge rates */}
             <div className="flex items-center justify-between text-sm text-white/70">
               <div className="px-1 py-2">
-                $ {tokenValueInUsd ? tokenValueInUsd : <Skeleton width={50} />}
+                $ {tokenValueInUsd ? tokenValueInUsd : <SkeletonWrap width={50} />}
               </div>
 
               <div className="px-1 py-2">
-                $ {amountValueInUsd ? amountValueInUsd : <Skeleton width={50} />}
+                $ {amountValueInUsd ? amountValueInUsd : <SkeletonWrap width={50} />}
               </div>
             </div>
           </div>

src/components/cactiComponents/ErrorResponse.tsx

@@ -4,17 +4,18 @@ import {
   ChevronUpIcon,
   ExclamationTriangleIcon,
 } from '@heroicons/react/24/outline';
-import { Markdown } from '../experimental_/Markdown';
-import { buttonStyle } from '../experimental_/layout/sidebar/NewChatButton';
+import { useAccount } from 'wagmi';
+import { Markdown } from '../current/Markdown';
+import { buttonStyle } from '../current/layout/sidebar/NewChatButton';
 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
  *
@@ -23,6 +24,8 @@ export interface ErrorResponseProps {
  */
 
 export const ErrorResponse = (props: ErrorResponseProps): JSX.Element => {
+  const { address } = useAccount();
+
   return (
     <ResponseWrap>
       <Disclosure as="div" defaultOpen={false}>
@@ -31,7 +34,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}
@@ -44,8 +47,24 @@ export const ErrorResponse = (props: ErrorResponseProps): JSX.Element => {
               <div className="p-4 font-mono text-xs">
                 <Markdown>{props.error}</Markdown>
               </div>
-              <div className="flex w-full justify-center">
-                <button className={buttonStyle}> Submit Bug Report </button>
+              <div className="flex w-full justify-center gap-2 ">
+                {/* <form name="bug-report" method="POST" data-netlify="true">
+                  <input type="hidden" name="form-name" value="bug-report" />
+                  <input type="hidden" name="name" id="yourname" value={address} />
+                  <input type="hidden" name="message" id="yourmessage" value={props.error} />
+                  <button className={buttonStyle} type="submit">
+                    Submit Bug Report
+                  </button>
+                </form> */}
+
+                <a
+                  className={buttonStyle}
+                  href={`https://discord.gg/hu8zVcBty6`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Get help on Discord
+                </a>
               </div>
             </Disclosure.Panel>
           </>

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,7 +1,7 @@
 import { ReactNode } from 'react';
-import Skeleton from '@/components/SkeletonWrap';
 import useToken from '@/hooks/useToken';
 import { Token } from '@/types';
+import SkeletonWrap from '../shared/SkeletonWrap';
 import { InlineChip } from './InlineChip';
 import { ResponseWrap } from './helpers/layout';
 
@@ -27,7 +27,7 @@ export const SingleLineResponse = (props: SingleLineResponseProps) => {
           <div className="flex items-center justify-between p-2">
             <InlineChip label={token?.symbol} image={token?.logoURI} />
             <div className="text-xl">
-              {props.value !== '<pending>' ? props.value : <Skeleton width={50} />}
+              {props.value !== '<pending>' ? props.value : <SkeletonWrap width={50} />}
             </div>
           </div>
         )}

src/components/cactiComponents/TableResponse.tsx

@@ -1,4 +1,4 @@
-import { Widget } from '../experimental_/MessageTranslator_';
+import { Widget } from '../current/MessageTranslator';
 import { ResponseWrap } from './helpers/layout';
 
 interface TableHeader {

src/components/cactiComponents/TextResponse.tsx

@@ -1,6 +1,6 @@
 import { Disclosure } from '@headlessui/react';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
-import { Markdown } from '../experimental_/Markdown';
+import { Markdown } from '../current/Markdown';
 import { ResponseTitle, ResponseWrap } from './helpers/layout';
 
 const textStyle = 'text-base text-white text-opacity-70 gap-1 ';

src/components/cactiComponents/hooks/useBalance.ts

@@ -22,7 +22,7 @@ const useBalance = (
     queryKey: ['balance', account, tokenAddress, erc1155TokenId, chainId],
     queryFn: async () => {
       if (!account) {
-        console.error('account is required to fetch balance');
+        console.log('Account is required to fetch balance.');
         return;
       }
 

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,
@@ -62,7 +57,7 @@ const useSubmitTx = (
 
   /* prepare a send transaction if the fnName matches the SEND_TRANSACTION unique id */
   const { config: sendConfig, isError: isPrepareError } = usePrepareSendTransaction({
-    request: { ...(writeConfig.request ?? sendParams), gasLimit: 500000 },
+    request: { ...(writeConfig.request ?? sendParams), gasLimit: sendParams?.gasLimit || 500000 },
     enabled: true,
     onError: (e) => console.log('prepare send error', e),
   });
@@ -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/experimental_/BotThinking.tsx → src/components/current/BotThinking.tsx

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

src/components/experimental_/ChatBox_.tsx → src/components/current/ChatBox.tsx

@@ -1,11 +1,11 @@
 import { useRouter } from 'next/router';
 import { useQueryChats } from '@/api/chats/queries';
 import { Spinner } from '@/utils';
-import MessageInput from './MessageInput_';
-import MessageList from './MessageList_';
+import MessageInput from './MessageInput';
+import MessageList from './MessageList';
 // Use experimental components
 import ShareChatModal from './ShareChatModal';
-import WelcomeMessage from './WelcomeMessage_';
+import WelcomeMessage from './WelcomeMessage';
 
 const ChatBox = () => {
   const { isLoading } = useQueryChats();

src/components/experimental_/ChatHeader.tsx → src/components/current/ChatHeader.tsx

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

src/components/experimental_/CustomConnectButton.tsx → src/components/current/CustomConnectButton.tsx

@@ -2,10 +2,10 @@ 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 '../Avatar';
-import SkeletonWrap from '../SkeletonWrap';
 import useBalance from '../cactiComponents/hooks/useBalance';
 import useEnsName from '../cactiComponents/hooks/useEnsName';
+import Avatar from '../shared/Avatar';
+import SkeletonWrap from '../shared/SkeletonWrap';
 import { buttonStyle } from './layout/sidebar/NewChatButton';
 
 const CustomConnectButton = () => {