Skip to content

Commit 57cc96f

Browse files
whoabuddywhoabuddy
authored
Merge pull request #192 from aibtcdev/staging
RELEASE: UI tweaks and updates
2 parents 1eea189 + 01e7e21 commit 57cc96f

12 files changed

+376
-339
lines changed

‎public/logos/aibtcdev-pattern-1-1920px.png

2.23 MB
Loading

‎src/app/daos/[id]/layout-client.tsx

+47-15
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import React, { useEffect, useState } from "react";
44
import { useParams, usePathname } from "next/navigation";
55
import Link from "next/link";
6+
import Image from "next/image";
67
import {
78
ChevronRight,
89
Info,
@@ -22,13 +23,21 @@ interface DAO {
2223
is_graduated: boolean;
2324
is_deployed: boolean;
2425
created_at: string;
26+
website_url?: string;
27+
x_url?: string;
28+
telegram_url?: string;
29+
}
30+
31+
interface Token {
32+
image_url: string;
2533
}
2634

2735
export function DAOLayoutClient({ children }: { children: React.ReactNode }) {
2836
const params = useParams();
2937
const id = params.id as string;
3038
const pathname = usePathname();
3139
const [dao, setDao] = useState<DAO | null>(null);
40+
const [token, setToken] = useState<Token | null>(null);
3241
const [loading, setLoading] = useState(true);
3342

3443
const isOverview = pathname === `/daos/${id}`;
@@ -37,24 +46,23 @@ export function DAOLayoutClient({ children }: { children: React.ReactNode }) {
3746
const isProposals = pathname === `/daos/${id}/proposals`;
3847

3948
useEffect(() => {
40-
const fetchDAO = async () => {
49+
const fetchDAOAndToken = async () => {
4150
try {
42-
const { data, error } = await supabase
43-
.from("daos")
44-
.select("*")
45-
.eq("id", id)
46-
.single();
51+
const [{ data: daoData }, { data: tokenData }] = await Promise.all([
52+
supabase.from("daos").select("*").eq("id", id).single(),
53+
supabase.from("tokens").select("image_url").eq("dao_id", id).single(),
54+
]);
4755

48-
if (error) throw error;
49-
setDao(data);
56+
if (daoData) setDao(daoData);
57+
if (tokenData) setToken(tokenData);
5058
} catch (error) {
51-
console.error("Error fetching DAO:", error);
59+
console.error("Error fetching data:", error);
5260
} finally {
5361
setLoading(false);
5462
}
5563
};
5664

57-
fetchDAO();
65+
fetchDAOAndToken();
5866
}, [id]);
5967

6068
if (loading) {
@@ -66,7 +74,7 @@ export function DAOLayoutClient({ children }: { children: React.ReactNode }) {
6674
}
6775

6876
return (
69-
<div className="flex flex-col min-h-screen">
77+
<div className="flex flex-col">
7078
<div className="container mx-auto px-4 py-4 sm:py-6 flex-grow">
7179
{/* Breadcrumb */}
7280
<div className="flex items-center text-xs sm:text-sm text-muted-foreground mb-4">
@@ -82,10 +90,34 @@ export function DAOLayoutClient({ children }: { children: React.ReactNode }) {
8290
</span>
8391
</div>
8492

85-
{/* DAO Title */}
86-
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight truncate mb-4">
87-
{dao?.name}
88-
</h1>
93+
{/* DAO Header */}
94+
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-6 mb-6">
95+
{/* Token Image - Fixed size container with responsive image */}
96+
{token?.image_url && (
97+
<div className="relative w-24 h-24 sm:w-32 sm:h-32 flex-shrink-0">
98+
<Image
99+
src={token.image_url}
100+
alt={`${dao?.name} token`}
101+
fill
102+
className="rounded-2xl object-cover"
103+
sizes="(max-width: 640px) 96px, 128px"
104+
priority
105+
/>
106+
</div>
107+
)}
108+
109+
{/* DAO Info */}
110+
<div className="flex-1 text-center sm:text-left">
111+
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight mb-2">
112+
{dao?.name}
113+
</h1>
114+
{dao?.mission && (
115+
<p className="text-base sm:text-lg text-muted-foreground">
116+
{dao.mission}
117+
</p>
118+
)}
119+
</div>
120+
</div>
89121

90122
{/* Navigation Tabs - Mobile */}
91123
<div className="block sm:hidden border-b border-border overflow-x-auto mb-4">

‎src/app/daos/[id]/page.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import { useParams } from "next/navigation";
44
import DAOOverview from "@/components/daos/dao-overview";
5-
import { DAOCreationDate } from "@/components/daos/dao-creation-date";
65
import { useDAODetails } from "@/hooks/use-dao-details";
76
import { Skeleton } from "@/components/ui/skeleton";
87

@@ -55,16 +54,13 @@ export default function DAOPage() {
5554
}
5655

5756
return (
58-
<div className="max-w-[1400px] mx-auto space-y-6">
57+
<div className="max-w-[1400px] mx-auto space-y-6 h-full">
5958
<DAOOverview
6059
dao={dao}
6160
token={token}
6261
marketStats={marketStats}
6362
treasuryTokens={treasuryTokens}
6463
/>
65-
<div className="px-4">
66-
<DAOCreationDate createdAt={dao.created_at} />
67-
</div>
6864
</div>
6965
);
7066
}

‎src/components/agents/agent-form.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
1515
import { Search, X } from "lucide-react";
1616
import { Agent } from "@/types/supabase";
1717
import { fetchTools, Tool } from "@/lib/tools";
18+
import Link from "next/link";
1819

1920
interface AgentFormProps {
2021
formData: Partial<Agent>;
@@ -293,6 +294,11 @@ export function AgentForm({
293294
>
294295
{saving ? "Saving..." : "Save Agent"}
295296
</Button>
297+
<Link href="/agents">
298+
<Button variant={"default"} className="w-full h-9 text-sm mt-6">
299+
Cancel
300+
</Button>
301+
</Link>
296302
</form>
297303
);
298304
}

‎src/components/chat/chat-window.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useSessionStore } from "@/store/session";
77
import { ScrollArea } from "@/components/ui/scroll-area";
88
import AgentWalletSelector from "./agent-selector";
99
import { CreateThreadButton } from "../threads/CreateThreadButton";
10-
import { StartGuide } from "../reusables/StartGuide";
10+
// import { StartGuide } from "../reusables/StartGuide";
1111

1212
export function ChatWindow() {
1313
const {
@@ -75,9 +75,7 @@ export function ChatWindow() {
7575
<div className="text-center space-y-4 p-4 sm:p-6 lg:p-8 -mt-20">
7676
<div className="flex justify-center gap-3">
7777
<CreateThreadButton />
78-
<div className="md:block hidden">
79-
<StartGuide />
80-
</div>
78+
<div className="md:block hidden">{/* <StartGuide /> */}</div>
8179
</div>
8280
</div>
8381
</div>

‎src/components/daos/dao-extensions.tsx

+18-37
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,17 @@ interface DAOExtensionsProps {
1010
extensions: Extension[];
1111
}
1212

13+
function truncateString(str: string): string {
14+
if (!str || str.length <= 11) return str;
15+
return `${str.slice(0, 5)}...${str.slice(-30)}`;
16+
}
17+
1318
const getStatusColor = (status: Extension["status"]) => {
1419
switch (status) {
15-
case "active":
20+
case "DEPLOYED":
1621
return "bg-emerald-500/10 text-emerald-500 border-emerald-500/20";
1722
case "pending":
1823
return "bg-amber-500/10 text-amber-500 border-amber-500/20";
19-
case "inactive":
20-
return "bg-zinc-500/10 text-zinc-500 border-zinc-500/20";
2124
}
2225
};
2326

@@ -28,24 +31,20 @@ const getExplorerUrl = (txId: string) => {
2831
};
2932

3033
export function DAOExtensions({ extensions }: DAOExtensionsProps) {
31-
const [selectedStatus, setSelectedStatus] = useState<
32-
Extension["status"] | "all"
33-
>("all");
34+
const [selectedStatus, setSelectedStatus] =
35+
useState<Extension["status"]>("DEPLOYED");
3436

35-
const filteredExtensions = extensions.filter((ext) =>
36-
selectedStatus === "all" ? true : ext.status === selectedStatus
37+
const filteredExtensions = extensions.filter(
38+
(ext) => ext.status === selectedStatus
3739
);
3840

3941
const stats = {
40-
all: extensions.length,
41-
active: extensions.filter((e) => e.status === "active").length,
42+
active: extensions.filter((e) => e.status === "DEPLOYED").length,
4243
pending: extensions.filter((e) => e.status === "pending").length,
43-
inactive: extensions.filter((e) => e.status === "inactive").length,
4444
};
4545

4646
return (
4747
<div className="w-full">
48-
{/* Header Section */}
4948
<div className="mb-8">
5049
<h2 className="text-xl sm:text-2xl font-semibold tracking-tight mb-2">
5150
Extensions
@@ -55,37 +54,22 @@ export function DAOExtensions({ extensions }: DAOExtensionsProps) {
5554
</p>
5655
</div>
5756

58-
{/* Main Content */}
5957
<div className="space-y-4 sm:space-y-6 pb-12">
60-
{/* Status Filters */}
6158
<div className="flex flex-wrap gap-2">
6259
<StatusButton
63-
status="all"
64-
count={stats.all}
65-
selected={selectedStatus === "all"}
66-
onClick={() => setSelectedStatus("all")}
67-
/>
68-
<StatusButton
69-
status="active"
60+
status="DEPLOYED"
7061
count={stats.active}
71-
selected={selectedStatus === "active"}
72-
onClick={() => setSelectedStatus("active")}
62+
selected={selectedStatus === "DEPLOYED"}
63+
onClick={() => setSelectedStatus("DEPLOYED")}
7364
/>
7465
<StatusButton
7566
status="pending"
7667
count={stats.pending}
7768
selected={selectedStatus === "pending"}
7869
onClick={() => setSelectedStatus("pending")}
7970
/>
80-
<StatusButton
81-
status="inactive"
82-
count={stats.inactive}
83-
selected={selectedStatus === "inactive"}
84-
onClick={() => setSelectedStatus("inactive")}
85-
/>
8671
</div>
8772

88-
{/* Extensions List */}
8973
<div className="space-y-3 sm:space-y-4">
9074
{filteredExtensions.map((extension) => (
9175
<div
@@ -109,8 +93,8 @@ export function DAOExtensions({ extensions }: DAOExtensionsProps) {
10993
</div>
11094
{extension.contract_principal && (
11195
<div className="flex items-center gap-2 mb-1">
112-
<code className="text-xs bg-muted truncate max-w-[350px] sm:max-w-[250px] lg:max-w-full">
113-
{extension.contract_principal}
96+
<code className="text-xs bg-muted px-2 py-1 rounded">
97+
{truncateString(extension.contract_principal)}
11498
</code>
11599
</div>
116100
)}
@@ -121,9 +105,7 @@ export function DAOExtensions({ extensions }: DAOExtensionsProps) {
121105
rel="noopener noreferrer"
122106
className="inline-flex items-center gap-1 mt-1 text-xs text-muted-foreground hover:text-primary transition-colors"
123107
>
124-
<span className="truncate max-w-[350px] sm:max-w-[250px] lg:max-w-full">
125-
TX: {extension.tx_id}
126-
</span>
108+
<span>TX: {truncateString(extension.tx_id)}</span>
127109
<ArrowUpRight className="h-3 w-3" />
128110
</a>
129111
)}
@@ -140,14 +122,13 @@ export function DAOExtensions({ extensions }: DAOExtensionsProps) {
140122
);
141123
}
142124

143-
// Status Button Component
144125
function StatusButton({
145126
status,
146127
count,
147128
selected,
148129
onClick,
149130
}: {
150-
status: Extension["status"] | "all";
131+
status: Extension["status"];
151132
count: number;
152133
selected: boolean;
153134
onClick: () => void;

0 commit comments

Comments
 (0)