Skip to content

Commit 6f0bdb7

Browse files
Shritesh99Shritesh99
committed
UI refinig
1 parent 1e8fcb3 commit 6f0bdb7

File tree

10 files changed

+619
-738
lines changed

10 files changed

+619
-738
lines changed

‎frontend/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
"@polkadot/util-crypto": "^13.4.3",
1919
"next": "15.2.1",
2020
"react": "^19.0.0",
21-
"react-dom": "^19.0.0"
21+
"react-dom": "^19.0.0",
22+
"react-hot-toast": "^2.5.2"
2223
},
2324
"devDependencies": {
2425
"@eslint/eslintrc": "^3",

‎frontend/src/app/page.tsx‎

Lines changed: 69 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,82 @@
11
"use client";
22

33
import dynamic from "next/dynamic";
4-
import React from "react";
4+
import React, { useState } from "react";
55
import { ChainStatus } from "../components/ui/components/ChainStatus";
6-
import { WalletStatus } from "../components/ui/components/WalletStatus";
6+
import { Button } from "../components/ui/components/Button";
7+
import { Toaster } from "react-hot-toast";
8+
import { ConnectWalletModal } from "../components/ui/modals/ConnectWalletModal";
9+
import { useWallet } from "../contexts/WalletContext";
710

8-
const Demo = dynamic(() => import("../components/Demo"), {
9-
ssr: false,
10-
});
11+
const Demo = dynamic(
12+
() => import("../components/Demo").then((mod) => mod.Demo),
13+
{
14+
ssr: false,
15+
}
16+
);
1117

1218
export default function Home() {
19+
const [isConnectModalOpen, setIsConnectModalOpen] = useState(false);
20+
const { selectedAccount } = useWallet();
21+
1322
return (
14-
<main className="min-h-screen flex flex-col p-4">
15-
<div className="max-w-6xl mx-auto w-full space-y-4">
16-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
17-
<ChainStatus />
18-
<WalletStatus />
23+
<main className="min-h-screen bg-gray-50">
24+
<Toaster position="top-right" />
25+
<div className="max-w-7xl mx-auto">
26+
<nav className="bg-white shadow-sm">
27+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28+
<div className="flex justify-between h-16">
29+
<div className="flex items-center">
30+
<h1 className="text-xl font-bold text-gray-900">
31+
NFT Marketplace
32+
</h1>
33+
</div>
34+
<div className="flex items-center space-x-4">
35+
<ChainStatus />
36+
{selectedAccount ? (
37+
<div className="text-sm text-gray-700">
38+
{selectedAccount.meta.name ||
39+
"Account"}{" "}
40+
(
41+
{selectedAccount.address.slice(
42+
0,
43+
6
44+
)}
45+
...
46+
{selectedAccount.address.slice(
47+
-4
48+
)}
49+
)
50+
</div>
51+
) : (
52+
<Button
53+
onClick={() =>
54+
setIsConnectModalOpen(
55+
true
56+
)
57+
}
58+
variant="primary"
59+
size="sm">
60+
Connect Wallet
61+
</Button>
62+
)}
63+
</div>
64+
</div>
65+
</div>
66+
</nav>
67+
<div className="py-6">
68+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
69+
<Demo
70+
setConnectModalOpen={setIsConnectModalOpen}
71+
/>
72+
</div>
1973
</div>
20-
<Demo />
2174
</div>
75+
76+
<ConnectWalletModal
77+
isOpen={isConnectModalOpen}
78+
onClose={() => setIsConnectModalOpen(false)}
79+
/>
2280
</main>
2381
);
2482
}

‎frontend/src/components/AccountBox.tsx‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎frontend/src/components/Demo.tsx‎

Lines changed: 114 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,26 @@ import sdk from "@farcaster/frame-sdk";
33
import React from "react";
44
import { useWallet } from "../contexts/WalletContext";
55
import { Button } from "./ui/components/Button";
6-
import type { WalletMetadata } from "@polkadot-onboard/core";
76
import { ArtistDashboard } from "./ArtistDashboard";
87
import { NFTMarketplace } from "./NFTMarketplace";
8+
import { UserDashboard } from "./UserDashboard";
99
import { useChain } from "../contexts/ChainContext";
10+
import toast from "react-hot-toast";
1011

11-
export default function Demo() {
12+
type View = "marketplace" | "artist" | "collection";
13+
14+
interface DemoProps {
15+
setConnectModalOpen: (open: boolean) => void;
16+
}
17+
18+
export const Demo: React.FC<DemoProps> = ({ setConnectModalOpen }) => {
1219
const [isSDKLoaded, setIsSDKLoaded] = useState(false);
13-
const [isArtistMode, setIsArtistMode] = useState(false);
20+
const [currentView, setCurrentView] = useState<View>("marketplace");
1421
const { api } = useChain();
1522
const {
1623
selectedAccount,
1724
signer,
1825
error: walletError,
19-
availableWallets,
2026
selectedWallet,
2127
} = useWallet();
2228

@@ -30,75 +36,117 @@ export default function Demo() {
3036
}
3137
}, [isSDKLoaded]);
3238

33-
return (
34-
<div className="w-full max-w-6xl mx-auto py-4 px-2">
35-
<h1 className="text-2xl font-bold text-center mb-4">
36-
NFT Marketplace
37-
</h1>
38-
{!selectedWallet ? (
39+
useEffect(() => {
40+
if (walletError) {
41+
toast.error(walletError.message);
42+
}
43+
}, [walletError]);
44+
if (!selectedWallet) {
45+
return (
46+
<div className="min-h-[calc(100vh-4rem)] flex items-center justify-center">
3947
<div className="text-center">
40-
<h2 className="text-xl font-bold">
41-
Please Connect Wallet
48+
<h2 className="text-3xl font-bold text-gray-900 mb-4">
49+
Welcome to NFT Marketplace
4250
</h2>
43-
{walletError && (
44-
<div className="text-red-500 text-sm p-2 bg-red-50 rounded-md">
45-
{walletError.message}
46-
</div>
47-
)}
48-
{availableWallets.length === 0 ? (
49-
<div className="text-center text-gray-600">
50-
No wallets found. Please connect a wallet.
51-
</div>
52-
) : (
53-
<></>
54-
)}
51+
<p className="text-gray-600 mb-8 max-w-md mx-auto">
52+
Connect your wallet to start exploring and trading
53+
NFTs
54+
</p>
55+
<div className="animate-pulse">
56+
<Button
57+
onClick={() => setConnectModalOpen(true)}
58+
variant="primary">
59+
Connect Wallet
60+
</Button>
61+
</div>
5562
</div>
56-
) : !selectedAccount ? (
63+
</div>
64+
);
65+
}
66+
67+
if (!selectedAccount) {
68+
return (
69+
<div className="min-h-[calc(100vh-4rem)] flex items-center justify-center">
5770
<div className="text-center">
58-
<h2 className="text-xl font-bold">
59-
Please Select an Account
71+
<h2 className="text-3xl font-bold text-gray-900 mb-4">
72+
Select an Account
6073
</h2>
74+
<p className="text-gray-600 max-w-md mx-auto">
75+
Please select an account from your connected
76+
wallet to continue
77+
</p>
6178
</div>
62-
) : api && selectedAccount && signer ? (
63-
<>
64-
<div className="mb-4 flex justify-between items-center">
65-
<div className="text-sm">
66-
Connected:{" "}
67-
{selectedAccount.address.slice(0, 6)}...
68-
{selectedAccount.address.slice(-4)}
69-
</div>
70-
<div className="flex space-x-4">
71-
<Button
72-
onClick={() =>
73-
setIsArtistMode(!isArtistMode)
74-
}
75-
className="text-sm bg-green-600 hover:bg-green-700 text-white px-2 py-1 rounded-md mr-2">
76-
{isArtistMode
77-
? "Switch to Marketplace"
78-
: "Switch to Artist Mode"}
79-
</Button>
80-
</div>
81-
</div>
82-
{isArtistMode ? (
83-
<ArtistDashboard
84-
api={api}
85-
account={selectedAccount}
86-
signer={signer}
87-
/>
88-
) : (
89-
<NFTMarketplace
90-
api={api}
91-
account={selectedAccount}
92-
signer={signer}
93-
/>
94-
)}
95-
</>
96-
) : (
79+
</div>
80+
);
81+
}
82+
83+
if (!api || !selectedAccount || !signer) {
84+
return (
85+
<div className="min-h-[calc(100vh-4rem)] flex items-center justify-center">
9786
<div className="text-center">
98-
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2"></div>
99-
Connecting to wallet...
87+
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
88+
<p className="text-gray-600">Connecting to chain...</p>
10089
</div>
101-
)}
90+
</div>
91+
);
92+
}
93+
94+
return (
95+
<div className="space-y-6">
96+
<div className="flex flex-wrap gap-4">
97+
<Button
98+
onClick={() => setCurrentView("marketplace")}
99+
variant={
100+
currentView === "marketplace"
101+
? "primary"
102+
: "secondary"
103+
}
104+
size="lg">
105+
Browse NFTs
106+
</Button>
107+
<Button
108+
onClick={() => setCurrentView("collection")}
109+
variant={
110+
currentView === "collection"
111+
? "primary"
112+
: "secondary"
113+
}
114+
size="lg">
115+
My Collection
116+
</Button>
117+
<Button
118+
onClick={() => setCurrentView("artist")}
119+
variant={
120+
currentView === "artist" ? "primary" : "secondary"
121+
}
122+
size="lg">
123+
Artist Dashboard
124+
</Button>
125+
</div>
126+
127+
<div className="bg-white shadow-sm rounded-lg p-6">
128+
{currentView === "marketplace" && (
129+
<NFTMarketplace
130+
api={api}
131+
account={selectedAccount}
132+
signer={signer}
133+
/>
134+
)}
135+
{currentView === "collection" && (
136+
<UserDashboard
137+
api={api}
138+
account={selectedAccount}
139+
signer={signer}
140+
/>
141+
)}
142+
{currentView === "artist" && (
143+
<ArtistDashboard
144+
api={api}
145+
account={selectedAccount}
146+
signer={signer}
147+
/>
148+
)}
149+
</div>
102150
</div>
103151
);
104-
}
152+
};

0 commit comments

Comments
 (0)