format

coinbase · Nov 5, 2024 · 702ee14 · 702ee14
1 parent efddb07
commit 702ee14
Show file tree

Hide file tree

Showing 17 changed files with 52 additions and 61 deletions.
diff --git a/app/components/Agent.tsx b/app/components/Agent.tsx
@@ -1,7 +1,12 @@
 import { useState, useEffect, useCallback } from 'react';
 
 import Navbar from './Navbar';
-import type { ActionEntry, AgentMessage, Language, StreamEntry } from '../types';
+import type {
+  ActionEntry,
+  AgentMessage,
+  Language,
+  StreamEntry,
+} from '../types';
 import Stream from './Stream';
 import ChatInput from './ChatInput';
 import Footer from './Footer';
@@ -50,7 +55,7 @@ export default function Agent() {
   // enables dot animation for "agent is thinking..."
   useEffect(() => {
     const dotsInterval = setInterval(() => {
-      setLoadingDots((prev) => (prev.length >= 3 ? '' : prev + '.'));
+      setLoadingDots((prev) => (prev.length >= 3 ? '' : `${prev}.`));
     }, 500);
 
     return () => clearInterval(dotsInterval);
@@ -68,7 +73,9 @@ export default function Agent() {
   const handleSubmit = useCallback(
     async (e: React.FormEvent) => {
       e.preventDefault();
-      if (!userInput.trim()) return;
+      if (!userInput.trim()) {
+        return;
+      }
 
       // disable live stream
       setIsChatMode(true);
@@ -103,7 +110,7 @@ export default function Agent() {
   }, []);
 
   return (
-    <div className="flex flex-col h-screen bg-black font-mono text-[#5788FA] relative overflow-hidden">
+    <div className="relative flex h-screen flex-col overflow-hidden bg-black font-mono text-[#5788FA]">
       <Navbar
         isMobileMenuOpen={isMobileMenuOpen}
         setIsMobileMenuOpen={setIsMobileMenuOpen}
@@ -112,28 +119,16 @@ export default function Agent() {
         currentLanguage={currentLanguage}
       />
 
-      <div className="flex flex-grow overflow-hidden relative">
+      <div className="relative flex flex-grow overflow-hidden">
         <div
           className={`
-          ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'}
-          lg:translate-x-0
-          fixed lg:relative
-          w-full lg:w-1/3 
-          h-full
-          bg-black
-          z-20 lg:z-0
-          transition-transform
-          duration-300
-          p-2 lg:border-r lg:border-[#5788FA]/50 
-          flex flex-col 
-          overflow-y-auto
-        `}
+          ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0 fixed z-20 flex h-full w-full flex-col overflow-y-auto bg-black p-2 transition-transform duration-300 lg:relative lg:z-0 lg:w-1/3 lg:border-[#5788FA]/50 lg:border-r `}
         >
           <AgentProfile currentLanguage={currentLanguage} />
           <AgentStats currentLanguage={currentLanguage} />
         </div>
 
-        <div className="flex-grow flex flex-col w-full lg:w-2/3">
+        <div className="flex w-full flex-grow flex-col lg:w-2/3">
           <Stream
             currentLanguage={currentLanguage}
             streamEntries={streamEntries}

diff --git a/app/components/AgentProfile.tsx b/app/components/AgentProfile.tsx
@@ -81,16 +81,16 @@ export default function AgentProfile({ currentLanguage }: AgentProfileProps) {
           </svg>
 
           <div className="flex flex-col justify-center space-y-2">
-            <h2 className="text-xl font-bold text-[#5788FA]">{AGENT_NAME}</h2>
-            <div className="relative inline-flex items-center group">
+            <h2 className="font-bold text-[#5788FA] text-xl">{AGENT_NAME}</h2>
+            <div className="group relative inline-flex items-center">
               <button
                 onClick={copyToClipboard}
-                className="text-sm text-[#5788FA] hover:text-[#3D7BFF] transition-colors"
+                className="text-[#5788FA] text-sm transition-colors hover:text-[#3D7BFF]"
               >
                 {formattedAddress}
               </button>
               {showToast && (
-                <div className="absolute top-full left-0 mt-2 bg-[#5788FA] text-zinc-950 text-xs px-2 py-1 rounded-xs">
+                <div className="absolute top-full left-0 mt-2 rounded-xs bg-[#5788FA] px-2 py-1 text-xs text-zinc-950">
                   Copied
                 </div>
               )}
@@ -99,7 +99,7 @@ export default function AgentProfile({ currentLanguage }: AgentProfileProps) {
         </div>
 
         <p
-          className={`text-base text-[#5788FA] ${
+          className={`text-[#5788FA] text-base ${
             currentLanguage === 'th' ? notoSansThai.className : ''
           }`}
         >

diff --git a/app/components/AgentStats.tsx b/app/components/AgentStats.tsx
@@ -22,9 +22,9 @@ export default function AgentStats({ currentLanguage }: AgentStats) {
     query: { refetchInterval: 5000 },
   });
   return (
-    <div className="mb-4 mr-2 bg-black border border-[#5788FA]/50 rounded-sm">
+    <div className="mr-2 mb-4 rounded-sm border border-[#5788FA]/50 bg-black">
       <div className="flex flex-col items-start p-4">
-        <span className="text-2xl font-bold text-[#5788FA]">
+        <span className="font-bold text-2xl text-[#5788FA]">
           {`${Number.parseFloat(data?.formatted || '').toFixed(6)} ETH`}
         </span>
         {/* TODO: update with actual data */}

diff --git a/app/components/ChatInput.tsx b/app/components/ChatInput.tsx
@@ -18,7 +18,7 @@ function PremadeChatInput({
   return (
     <button
       onClick={() => setUserInput(text)}
-      className={`text-[#5788FA] whitespace-nowrap hover:text-[#3D7BFF] hover:bg-zinc-900 transition-colors border border-[#5788FA]/50 px-2 py-1 rounded-sm ${
+      className={`whitespace-nowrap rounded-sm border border-[#5788FA]/50 px-2 py-1 text-[#5788FA] transition-colors hover:bg-zinc-900 hover:text-[#3D7BFF] ${
         currentLanguage === 'th' ? notoSansThai.className : ''
       }`}
     >
@@ -53,21 +53,21 @@ export default function ChatInput({
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex flex-col w-full border-t border-[#5788FA]/50 bg-black pb-10 p-2 lg:pb-2"
+      className="flex w-full flex-col border-[#5788FA]/50 border-t bg-black p-2 pb-10 lg:pb-2"
     >
       <div className="flex flex-col">
         <textarea
           value={userInput}
           onChange={handleInputChange}
           onKeyPress={handleKeyPress}
-          className={`w-full h-24 lg:h-36 bg-black text-[#5788FA] p-4 pr-10 placeholder-[#5788FA] placeholder-opacity-50 ${
+          className={`h-24 w-full bg-black p-4 pr-10 text-[#5788FA] placeholder-[#5788FA] placeholder-opacity-50 lg:h-36 ${
             currentLanguage === 'th' ? notoSansThai.className : ''
           }`}
           placeholder={translations[currentLanguage].chat.placeholder}
           rows={1}
         />
-        <div className="px-2 flex items-center justify-between w-full pt-4">
-          <div className="flex space-x-2 text-xs lg:text-sm ml-2 overflow-x-auto">
+        <div className="flex w-full items-center justify-between px-2 pt-4">
+          <div className="ml-2 flex space-x-2 overflow-x-auto text-xs lg:text-sm">
             <PremadeChatInput
               setUserInput={setUserInput}
               currentLanguage={currentLanguage}
@@ -87,10 +87,10 @@ export default function ChatInput({
           <button
             type="submit"
             disabled={!/[a-zA-Z]/.test(userInput)}
-            className={`p-1.5 rounded-sm transition-colors ${
+            className={`rounded-sm p-1.5 transition-colors ${
               /[a-zA-Z]/.test(userInput)
                 ? 'bg-[#5788FA] text-zinc-950 hover:bg-[#3D7BFF]'
-                : 'bg-[#5788FA] text-zinc-950 opacity-50 cursor-not-allowed'
+                : 'cursor-not-allowed bg-[#5788FA] text-zinc-950 opacity-50'
             }`}
           >
             <SendSvg />

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -1,12 +1,12 @@
 export default function Footer() {
   return (
-    <div className="fixed bottom-4 left-4 text-zinc-400 text-sm z-30">
+    <div className="fixed bottom-4 left-4 z-30 text-sm text-zinc-400">
       Powered by{' '}
       <a
         href="https://onchainkit.xyz/"
         target="_blank"
         rel="noopener noreferrer"
-        className="font-bold hover:text-zinc-300 transition-colors"
+        className="font-bold transition-colors hover:text-zinc-300"
       >
         OnchainKit
       </a>
@@ -16,7 +16,7 @@ export default function Footer() {
         href="https://github.com/coinbase/onchain-agent-demo"
         target="_blank"
         rel="noopener noreferrer"
-        className="hover:text-zinc-300 transition-colors"
+        className="transition-colors hover:text-zinc-300"
       >
         Fork this template
       </a>

diff --git a/app/components/LanguageSelector.tsx b/app/components/LanguageSelector.tsx
@@ -23,20 +23,18 @@ export default function LanguageSelector({
     [onLanguageChange],
   );
   return (
-    <div className="inline-flex border border-[#5788FA]/50 rounded-sm overflow-hidden">
+    <div className="inline-flex overflow-hidden rounded-sm border border-[#5788FA]/50">
       {languages.map(({ code, label }) => (
         <button
           key={code}
           onClick={handleClick(code)}
           style={{ width: '44px' }}
-          className={`
-            py-1 text-sm font-medium text-center transition-colors
-            ${
-              currentLanguage === code
-                ? 'bg-[#5788FA] text-zinc-950 hover:bg-[#3D7BFF]'
-                : 'hover:bg-zinc-900 hover:text-[#3D7BFF]'
-            }
-            ${code !== 'en' && 'border-l border-[#5788FA]/50'}
+          className={`py-1 text-center font-medium text-sm transition-colors ${
+            currentLanguage === code
+              ? 'bg-[#5788FA] text-zinc-950 hover:bg-[#3D7BFF]'
+              : 'hover:bg-zinc-900 hover:text-[#3D7BFF]'
+          }
+            ${code !== 'en' && 'border-[#5788FA]/50 border-l'}
           `}
         >
           {label}

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
@@ -24,16 +24,13 @@ export default function Navbar({
   }, [isMobileMenuOpen, setIsMobileMenuOpen]);
 
   return (
-    <div className="flex justify-between items-center p-2 border-b border-[#5788FA]/50">
+    <div className="flex items-center justify-between border-[#5788FA]/50 border-b p-2">
       <div className="flex items-center space-x-2">
-        <button className="lg:hidden mr-2" onClick={handleClick}>
+        <button className="mr-2 lg:hidden" onClick={handleClick}>
           ☰
         </button>
         <div
-          className={`
-          w-2 h-2 rounded-full 
-          transition-all duration-700 ease-in-out
-          ${
+          className={`h-2 w-2 rounded-full transition-all duration-700 ease-in-out ${
             isLiveDotVisible
               ? 'bg-green-500 opacity-100'
               : 'bg-green-500 opacity-40'

diff --git a/app/components/Stream.tsx b/app/components/Stream.tsx
@@ -61,7 +61,7 @@ export default function Stream({
   }, [streamEntries]);
 
   return (
-    <div className="flex-grow p-4 pb-20 overflow-y-auto">
+    <div className="flex-grow overflow-y-auto p-4 pb-20">
       <p
         className={`text-zinc-500 ${
           currentLanguage === 'th' ? notoSansThai.className : ''
@@ -79,7 +79,7 @@ export default function Stream({
         ))}
       </div>
       {isThinking && (
-        <div className="flex items-center mt-4 text-[#5788FA] opacity-70">
+        <div className="mt-4 flex items-center text-[#5788FA] opacity-70">
           <span
             className={`font-mono ${
               currentLanguage === 'th' ? notoSansThai.className : ''

diff --git a/app/components/TimeDisplay.tsx b/app/components/TimeDisplay.tsx
@@ -22,7 +22,7 @@ export default function TimeDisplay({ timestamp }: TimeDisplayProps) {
   }, [timestamp]);
 
   return (
-    <div className="text-xs text-gray-500" aria-live="polite">
+    <div className="text-gray-500 text-xs" aria-live="polite">
       {formattedTime} ICT
     </div>
   );

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -15,7 +15,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className="bg-background dark">
+      <body className="dark bg-background">
         <Providers>{children}</Providers>
       </body>
     </html>

diff --git a/app/svg/CopySvg.tsx b/app/svg/CopySvg.tsx
@@ -4,7 +4,7 @@ export default function CopySvg() {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path
         fillRule="evenodd"

diff --git a/app/svg/NftSvg.tsx b/app/svg/NftSvg.tsx
@@ -4,7 +4,7 @@ export default function NftSvg() {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path
         fillRule="evenodd"

diff --git a/app/svg/RequestSvg.tsx b/app/svg/RequestSvg.tsx
@@ -4,7 +4,7 @@ export default function RequestSvg() {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path
         fillRule="evenodd"

diff --git a/app/svg/SendSvg.tsx b/app/svg/SendSvg.tsx
@@ -4,7 +4,7 @@ export default function SendSvg() {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path
         fillRule="evenodd"

diff --git a/app/svg/SwapSvg.tsx b/app/svg/SwapSvg.tsx
@@ -4,7 +4,7 @@ export default function SwapSvg() {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path
         fillRule="evenodd"

diff --git a/app/svg/TokenSvg.tsx b/app/svg/TokenSvg.tsx
@@ -4,7 +4,7 @@ export default function TokenSvg() {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="currentColor"
-      className="w-4 h-4"
+      className="h-4 w-4"
     >
       <path d="M10.464 8.746c.227-.18.497-.311.786-.394v2.795a2.252 2.252 0 0 1-.786-.393c-.394-.313-.546-.681-.546-1.004 0-.323.152-.691.546-1.004ZM12.75 15.662v-2.824c.347.085.664.228.921.421.427.32.579.686.579.991 0 .305-.152.671-.579.991a2.534 2.534 0 0 1-.921.42Z" />
       <path

diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "start": "next start",
     "format": "biome format --write .",
     "lint": "biome lint --write .",
+    "lint:unsafe": "biome lint --write --unsafe .",
     "ci:check": "biome ci --formatter-enabled=false --linter-enabled=false",
     "ci:format": "biome ci --linter-enabled=false --organize-imports-enabled=false",
     "ci:lint": "biome ci --formatter-enabled=false --organize-imports-enabled=false"