Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added the transfer functionality #197

Merged
merged 6 commits into from
Mar 1, 2025
Merged

feat: added the transfer functionality #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
56ecf72
feat: added the transfer functionality
davedumto Feb 28, 2025
b17b7c0
feat: added the transfer functionality
davedumto Feb 28, 2025
c7b523e
Merge branch 'main' into feat-add-transfer-functionality
davedumto Feb 28, 2025
73e81f3
merge and fixed the conflicts
davedumto Mar 1, 2025
71d1a54
merge and fixed the conflicts
davedumto Mar 1, 2025
e426b9c
Delete client/yarn.lock
PoulavBhowmick03 Mar 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 45 additions & 5 deletions client/app/agent/transaction/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
// app/agent/transaction/[id]/page.tsx
"use client";


import * as React from "react";
import { useParams, useRouter } from "next/navigation";
import { v4 as uuidv4 } from "uuid";
Expand All @@ -25,13 +26,15 @@ import { TransactionSuccess } from "@/components/TransactionSuccess";
import CommandList from "@/components/ui/command";
import { useState } from "react";


interface UserPreferences {
riskTolerance: "low" | "medium" | "high";
preferredAssets: string[];
preferredChains: string[];
investmentHorizon: "short" | "medium" | "long";
}


interface Message {
role: string;
id: string;
Expand Down Expand Up @@ -69,6 +72,7 @@ interface Message {
};
}


interface TransactionHandlerProps {
transactions: Array<{
contractAddress: string;
Expand All @@ -80,11 +84,13 @@ interface TransactionHandlerProps {
onError: (error: any) => void;
}


interface MessageContentProps {
message: Message;
onTransactionSuccess: (hash: string) => void;
}


const TransactionHandler: React.FC<TransactionHandlerProps> = ({
transactions,
description,
Expand All @@ -102,6 +108,7 @@ const TransactionHandler: React.FC<TransactionHandlerProps> = ({
return;
}


setIsProcessing(true);
try {
for (const tx of transactions) {
Expand All @@ -123,6 +130,7 @@ const TransactionHandler: React.FC<TransactionHandlerProps> = ({
}
};


return (
<div className="mt-4 p-4 rounded-lg bg-white/5 border border-white/10">
<p className="text-sm text-white/80 mb-4">{description}</p>
Expand All @@ -140,6 +148,7 @@ const TransactionHandler: React.FC<TransactionHandlerProps> = ({
);
};


const PreferencesDialog: React.FC<{
open: boolean;
onClose: () => void;
Expand All @@ -152,6 +161,7 @@ const PreferencesDialog: React.FC<{
investmentHorizon: "medium",
});


return (
<Dialog open={open} onOpenChange={onClose}>
<DialogContent className="bg-gray-900 border border-white/20 text-white">
Expand Down Expand Up @@ -190,12 +200,14 @@ const PreferencesDialog: React.FC<{
);
};


const MessageContent: React.FC<MessageContentProps> = ({
message,
onTransactionSuccess,
}) => {
const [txHash, setTxHash] = React.useState<string | null>(null);


if (message.recommendations) {
return (
<div className="space-y-4">
Expand Down Expand Up @@ -266,6 +278,7 @@ export default function TransactionPage() {
const { provider } = useProvider();
console.log(provider.getChainId())


const scrollRef = React.useRef<HTMLDivElement>(null);
const [isInputClicked, setIsInputClicked] = React.useState<boolean>(false);
const [showPreferences, setShowPreferences] = useState(false);
Expand All @@ -276,12 +289,14 @@ export default function TransactionPage() {
investmentHorizon: "medium",
});


React.useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollIntoView({ behavior: "smooth" });
}
}, [messages]);


React.useEffect(() => {
// Initial welcome message
setMessages([
Expand All @@ -307,12 +322,14 @@ export default function TransactionPage() {
await router.push(`/agent/chat/${id}`); // Navigate to the new chat route
};

// Generates a unique chat ID and navigates to the new Transaction route.

// Generates a unique chat ID and navigates to the new Transaction route.
const createNewTxn = async () => {
const id = uuidv4(); // Generate a unique ID for the transaction session
await router.push(`/agent/transaction/${id}`); // Navigate to the new transaction route
};


const handleTransactionSuccess = (hash: string) => {
const successMessage: Message = {
id: uuidv4(),
Expand All @@ -325,6 +342,7 @@ export default function TransactionPage() {
setMessages((prev) => [...prev, successMessage]);
};


const handleSendMessage = async () => {
if (!inputValue.trim()) return;
if (!address) {
Expand All @@ -341,6 +359,7 @@ export default function TransactionPage() {
return;
}


const userMessage: Message = {
id: uuidv4(),
role: "user",
Expand All @@ -349,13 +368,16 @@ export default function TransactionPage() {
user: "User",
};


setMessages((prev) => [...prev, userMessage]);
setInputValue("");
setIsLoading(true);


const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 135000); // 35 seconds


try {
const response = await fetch("/api/transactions", {
method: "POST",
Expand All @@ -372,13 +394,17 @@ export default function TransactionPage() {
signal: controller.signal,
});


const data = await response.json();
console.log(data);


clearTimeout(timeoutId); // Clear timeout if fetch succeeds


let agentMessage: Message;


// Check if it's an error message that's actually a prompt for more information
if (
data.error &&
Expand Down Expand Up @@ -416,6 +442,7 @@ export default function TransactionPage() {
};
}


setMessages((prev) => [...prev, agentMessage]);
} catch (error) {
if ((error instanceof Error) && error.name === "AbortError") {
Expand All @@ -436,7 +463,10 @@ export default function TransactionPage() {
}
};







return (
<div className="flex h-screen bg-gradient-to-br from-gray-900 to-black text-white font-mono relative overflow-hidden">
Expand All @@ -449,6 +479,7 @@ export default function TransactionPage() {
}}
/>


{/* Content wrapper */}
<div className="flex w-full h-full relative z-10">
{/* Sidebar */}
Expand All @@ -465,7 +496,7 @@ export default function TransactionPage() {
<Button
variant="ghost"
className="border border-white/20 transition-colors bg-[#1E1E1E] flex justify-between"
onClick={createNewTxn} // onclick command for a new transaction route
onClick={createNewTxn} // onclick command for a new transaction route
>
<span>Agent Txn</span>
<Plus className="h-4 w-4" />
Expand Down Expand Up @@ -503,6 +534,7 @@ export default function TransactionPage() {
</DialogContent>
</Dialog> */}


<div className="flex flex-col gap-4">
<h4 className="text-sm">Transaction History</h4>
<Input
Expand Down Expand Up @@ -532,6 +564,7 @@ export default function TransactionPage() {
</div>
</div>


<div className="mt-auto flex items-center gap-2">
{address ? (
<>
Expand All @@ -547,6 +580,7 @@ export default function TransactionPage() {
</div>
</div>


{/* Main Content */}
<div className="flex-1 flex flex-col bg-[#060606] backdrop-blur-sm">
{/* Header */}
Expand All @@ -562,7 +596,7 @@ export default function TransactionPage() {
{address ? (
<div className="flex items-center gap-4">
<div className="px-3 py-1 bg-muted rounded-md bg-slate-900">
{`${address.slice(0, 5)}...${address.slice(-3)}`}
{`${address?.slice(0, 5)}...${address?.slice(-3)}`}
</div>
<DisconnectButton />
</div>
Expand All @@ -572,6 +606,7 @@ export default function TransactionPage() {
</div>
</div>


{/* Chat Area */}
<ScrollArea className="flex-1 p-4">
{messages.map((message) => (
Expand Down Expand Up @@ -600,7 +635,8 @@ export default function TransactionPage() {
<div ref={scrollRef} />
</ScrollArea>

{isInputClicked && <CommandList />}

{isInputClicked && <CommandList setMessages={setMessages} inputValue={inputValue} userPreferences={userPreferences} messages={messages} setIsLoading={setIsLoading} setInputValue={setInputValue} isLoading={isLoading} />}
{/* Input Area */}
<div className="p-4 border-t border-white/20 bg-[#010101]">
<div className="relative">
Expand Down Expand Up @@ -637,6 +673,7 @@ export default function TransactionPage() {
Investment Preferences
</Button>


<PreferencesDialog
open={showPreferences}
onClose={() => setShowPreferences(false)}
Expand All @@ -648,3 +685,6 @@ export default function TransactionPage() {
</div>
);
}



60 changes: 50 additions & 10 deletions client/components/ui/command.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,66 @@ import Deposit from "./deposit";
import Withdraw from "./withdraw";
import Bridge from "./bridge";

// Import Message type or define it here if needed
import { Message } from "@/app/tg/types"; // Adjust the import path as needed

// Define UserPreferences interface
interface UserPreferences {
riskTolerance: "low" | "medium" | "high";
preferredAssets: string[];
preferredChains: string[];
investmentHorizon: "short" | "medium" | "long";
}

// Define CommandList props interface
interface CommandListProps {
inputValue: string;
setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
userPreferences: UserPreferences;
messages: Message[];
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
setInputValue: React.Dispatch<React.SetStateAction<string>>;
isLoading: boolean;
}

const commands = ["Transfer", "Swap", "Deposit", "Withdraw", "Bridge"];

const CommandList = () => {
const CommandList: React.FC<CommandListProps> = ({
inputValue,
setMessages,
userPreferences,
messages,
setIsLoading,
setInputValue,
isLoading
}) => {
const [selectedCommand, setSelectedCommand] = useState<string | null>(null);
const [showModal, setShowModal] = useState<boolean>(false);

useEffect(() => {
if (selectedCommand) {
setShowModal(true);
}
}, [selectedCommand]);

return (
<div>
{showModal && (
<div>
{selectedCommand === "Swap" ? (
<Swap setSelectedCommand={setSelectedCommand} />
) : selectedCommand === "Transfer" ? (
<Transfer setSelectedCommand={setSelectedCommand} />
<Transfer
setSelectedCommand={setSelectedCommand}
setMessages={setMessages}
inputValue={inputValue}
setIsLoading={setIsLoading}
messages={messages}
userPreferences={userPreferences}
setInputValue={setInputValue}
isLoading={isLoading}
setShowTransferModal={setShowModal}
/>
) : selectedCommand === "Deposit" ? (
<Deposit setSelectedCommand={setSelectedCommand} />
) : selectedCommand === "Withdraw" ? (
Expand All @@ -40,11 +80,11 @@ const CommandList = () => {
<h2 className="text-lg font-bold mb-4">Commands</h2>
<div
className="max-h-40 overflow-y-auto [&::-webkit-scrollbar]:w-2
[&::-webkit-scrollbar-track]:bg-[#060606]
[&::-webkit-scrollbar-thumb]:bg-white/10
[&::-webkit-scrollbar-thumb]:rounded-full
dark:[&::-webkit-scrollbar-track]:bg-neutral-700
dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"
[&::-webkit-scrollbar-track]:bg-[#060606]
[&::-webkit-scrollbar-thumb]:bg-white/10
[&::-webkit-scrollbar-thumb]:rounded-full
dark:[&::-webkit-scrollbar-track]:bg-neutral-700
dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"
>
{commands.map((command, index) => (
<div
Expand All @@ -62,4 +102,4 @@ const CommandList = () => {
);
};

export default CommandList;
export default CommandList;
Loading
Loading