Skip to content

Commit 955d638

Browse files
Shritesh99Shritesh99
committed
Bug fixes
1 parent 7ebb8d9 commit 955d638

File tree

16 files changed

+331
-473
lines changed

16 files changed

+331
-473
lines changed

‎frontend/src/app/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
import dynamic from "next/dynamic";
44
import React from "react";
5-
import { ChainStatus } from "../components/ChainStatus";
6-
import { WalletStatus } from "../components/WalletStatus";
5+
import { ChainStatus } from "../components/ui/components/ChainStatus";
6+
import { WalletStatus } from "../components/ui/components/WalletStatus";
77

88
const Demo = dynamic(() => import("../components/Demo"), {
99
ssr: false,

‎frontend/src/components/AccountBox.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { Button } from "./ui/Button";
2+
import { Button } from "./ui/components/Button";
33
import { NFTMinting } from "./NFTMinting";
44
import { ApiPromise } from "@polkadot/api";
55
import type { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";

‎frontend/src/components/ArtistDashboard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
22
import { ApiPromise } from "@polkadot/api";
33
import type { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
44
import type { Signer } from "@polkadot/api/types";
5-
import { Button } from "./ui/Button";
5+
import { Button } from "./ui/components/Button";
66
import { CollectionManager } from "./CollectionManager";
77

88
interface ArtistDashboardProps {

‎frontend/src/components/CollectionManager.tsx‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import React, { useState, useEffect } from "react";
22
import { ApiPromise } from "@polkadot/api";
33
import type { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
44
import type { Signer } from "@polkadot/types/types";
5-
import { Button } from "./ui/Button";
5+
import { Button } from "./ui/components/Button";
66
import { decodeMetadata } from "../utils/utils";
7-
import { CreateCollectionModal } from "./CreateCollectionModal";
8-
import { CreateNFTModal } from "./CreateNFTModal";
7+
import { CreateCollectionModal } from "./ui/modals/CreateCollectionModal";
8+
import { CreateNFTModal } from "./ui/modals/CreateNFTModal";
99

1010
interface CollectionManagerProps {
1111
api: ApiPromise;
@@ -152,6 +152,7 @@ export const CollectionManager: React.FC<CollectionManagerProps> = ({
152152
}
153153

154154
const nftData = rawData as unknown as NFTData;
155+
console.log(nftData);
155156

156157
const metadataStr = decodeMetadata(
157158
nftData.metadata
@@ -305,23 +306,21 @@ export const CollectionManager: React.FC<CollectionManagerProps> = ({
305306

306307
{/* NFTs in Selected Collection */}
307308
<div className="bg-white rounded-lg shadow-lg p-6">
308-
<h2 className="text-2xl font-bold text-gray-800 mb-6">
309-
{selectedCollection
310-
? `NFTs in ${selectedCollection.metadata.title}`
311-
: "Select a Collection"}
312-
</h2>
309+
<div className="flex justify-between mb-4">
310+
<h2 className="text-2xl font-bold text-gray-800 mb-6">
311+
{selectedCollection
312+
? `NFTs in ${selectedCollection.metadata.title}`
313+
: "Select a Collection"}
314+
</h2>
315+
316+
<Button
317+
onClick={() => setIsCreateNFTModalOpen(true)}
318+
className="bg-blue-600 hover:bg-blue-700 text-white transition duration-300">
319+
Create NFT
320+
</Button>
321+
</div>
313322
{selectedCollection !== null && (
314323
<>
315-
<div className="flex justify-end mb-4">
316-
<Button
317-
onClick={() =>
318-
setIsCreateNFTModalOpen(true)
319-
}
320-
className="bg-blue-600 hover:bg-blue-700 text-white transition duration-300">
321-
Create NFT
322-
</Button>
323-
</div>
324-
325324
<div className="space-y-4">
326325
{nfts.length === 0 ? (
327326
<div className="text-center p-4 bg-gray-50 rounded-lg">
@@ -387,7 +386,7 @@ export const CollectionManager: React.FC<CollectionManagerProps> = ({
387386
</p>
388387
<p className="text-xs text-gray-500">
389388
Status:{" "}
390-
{nft.is_sold
389+
{!nft.is_sold
391390
? "Sold"
392391
: "Available"}
393392
</p>

‎frontend/src/components/CreateNFT.tsx‎

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

‎frontend/src/components/Demo.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
22
import sdk from "@farcaster/frame-sdk";
33
import React from "react";
44
import { useWallet } from "../contexts/WalletContext";
5-
import { Button } from "./ui/Button";
5+
import { Button } from "./ui/components/Button";
66
import type { WalletMetadata } from "@polkadot-onboard/core";
77
import { ArtistDashboard } from "./ArtistDashboard";
88
import { NFTMarketplace } from "./NFTMarketplace";
@@ -133,13 +133,11 @@ export default function Demo() {
133133
onClick={() =>
134134
setIsArtistMode(!isArtistMode)
135135
}
136-
className="text-sm bg-green-600 hover:bg-green-700 text-white px-2 py-1 rounded-md">
136+
className="text-sm bg-green-600 hover:bg-green-700 text-white px-2 py-1 rounded-md mr-2">
137137
{isArtistMode
138138
? "Switch to Marketplace"
139139
: "Switch to Artist Mode"}
140140
</Button>
141-
<div className="mb-2"></div>{" "}
142-
{/* Added space between buttons */}
143141
<Button
144142
onClick={disconnectWallet}
145143
className="text-sm bg-red-600 hover:bg-red-700 text-white px-2 py-1 rounded-md">

‎frontend/src/components/NFTMarketplace.tsx‎

Lines changed: 60 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
22
import { ApiPromise } from "@polkadot/api";
33
import type { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
44
import type { Signer } from "@polkadot/types/types";
5-
import { Button } from "./ui/Button";
5+
import { Button } from "./ui/components/Button";
66
import { decodeMetadata } from "../utils/utils";
77

88
interface NFTMarketplaceProps {
@@ -164,6 +164,39 @@ export const NFTMarketplace: React.FC<NFTMarketplaceProps> = ({
164164
}
165165
};
166166

167+
const mintNft = async (collectionId: number, itemId: number) => {
168+
if (!api || !account?.address || !signer) {
169+
setError("Missing required properties for purchase");
170+
return;
171+
}
172+
173+
setIsLoading(true);
174+
setError(null);
175+
176+
try {
177+
const tx = api.tx.template.mintNft(collectionId, itemId);
178+
await tx.signAndSend(
179+
account.address,
180+
{ signer },
181+
({ status }) => {
182+
if (status.isInBlock) {
183+
console.log(
184+
`NFT purchased in block ${status.asInBlock.toString()}`
185+
);
186+
loadNFTs(); // Refresh NFTs after purchase
187+
}
188+
}
189+
);
190+
} catch (error) {
191+
console.error("Failed to buy NFT:", error);
192+
setError(
193+
error instanceof Error ? error.message : "Failed to buy NFT"
194+
);
195+
} finally {
196+
setIsLoading(false);
197+
}
198+
};
199+
167200
if (isLoading && nfts.length === 0) {
168201
return (
169202
<div className="text-center py-8">
@@ -183,15 +216,13 @@ export const NFTMarketplace: React.FC<NFTMarketplaceProps> = ({
183216

184217
return (
185218
<div className="max-w-6xl mx-auto p-6">
186-
<h2 className="text-2xl font-bold text-gray-800 mb-6">
187-
Available NFTs
188-
</h2>
219+
<h2 className="text-2xl font-bold mb-6">Available NFTs</h2>
189220

190221
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
191222
{nfts.map((nft) => (
192223
<div
193224
key={`${nft.collectionId}-${nft.id}`}
194-
className="bg-white rounded-lg shadow-md overflow-hidden">
225+
className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
195226
{nft.metadata.image && (
196227
<img
197228
src={nft.metadata.image}
@@ -221,16 +252,16 @@ export const NFTMarketplace: React.FC<NFTMarketplaceProps> = ({
221252

222253
<p className="text-sm text-gray-500">
223254
Status:{" "}
224-
{nft.is_sold
255+
{!nft.is_sold
225256
? "Sold"
226257
: "Available"}
227258
</p>
228-
{nft.owner === account.address && (
259+
{nft.owner === account.address ? (
229260
<div className="space-y-2">
230261
<input
231262
type="text"
232263
placeholder="Recipient address"
233-
className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-400"
264+
className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-400 placeholder:text-gray-400 text-gray-700"
234265
id={`transfer-${nft.collectionId}-${nft.id}`}
235266
/>
236267
<Button
@@ -245,13 +276,29 @@ export const NFTMarketplace: React.FC<NFTMarketplaceProps> = ({
245276
input.value
246277
);
247278
}}
248-
disabled={isLoading}
249-
className="w-full bg-blue-600 hover:bg-blue-700 text-white">
250-
{isLoading
251-
? "Transferring..."
252-
: "Transfer NFT"}
279+
isLoading={isLoading}
280+
variant="primary"
281+
size="sm"
282+
className="w-full">
283+
Transfer NFT
253284
</Button>
254285
</div>
286+
) : (
287+
nft.is_sold && (
288+
<Button
289+
onClick={() =>
290+
mintNft(
291+
nft.collectionId,
292+
nft.id
293+
)
294+
}
295+
isLoading={isLoading}
296+
variant="primary"
297+
size="sm"
298+
className="w-full">
299+
Mint NFT
300+
</Button>
301+
)
255302
)}
256303
</div>
257304
</div>

‎frontend/src/components/NFTMinting.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
22
import { ApiPromise } from "@polkadot/api";
33
import type { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
44
import type { Signer } from "@polkadot/types/types";
5-
import { Button } from "./ui/Button";
5+
import { Button } from "./ui/components/Button";
66
import type { Vec } from "@polkadot/types";
77
import type { EventRecord } from "@polkadot/types/interfaces";
88
import { u32 } from "@polkadot/types";

0 commit comments

Comments
 (0)