Skip to content

Commit

Permalink
implementing Download from IPFS
Browse files Browse the repository at this point in the history
  • Loading branch information
GabrielaDelPilarR committed Apr 21, 2024
1 parent 1e513f3 commit 405fd38
Show file tree
Hide file tree
Showing 17 changed files with 1,593 additions and 237 deletions.
2 changes: 1 addition & 1 deletion packages/nextjs/app/challenge/[id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const PageView: React.FC = () => {
}, [id]);
return (
<div className=" flex items-center w-full justify-center sm:text-[12px] ">
<div className="max-w-[800px] py-20 sm:max-w-[400px] sm:py-5 sm:px-5 ">
<div className="max-w-[800px] py-20">
<ReactMarkdown>{markdown}</ReactMarkdown>
</div>
</div>
Expand Down
44 changes: 22 additions & 22 deletions packages/nextjs/app/ipfsDownload/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { lazy, useEffect, useState } from "react";
import type { NextPage } from "next";
import { notification } from "~~/utils/scaffold-stark/notification";
import ButtonStyle from "~~/components/ButtonStyle/ButtonStyle";
// import { getMetadataFromIPFS } from "~~/utils/simpleNFT/ipfs-fetch";
import { getMetadataFromIPFS } from "~~/utils/scaffold-stark/simpleNFT/ipfs-fetch";

const LazyReactJson = lazy(() => import("react-json-view"));

Expand All @@ -17,23 +17,23 @@ const IpfsDownload: NextPage = () => {
setMounted(true);
}, []);

// const handleIpfsDownload = async () => {
// setLoading(true);
// const notificationId = notification.loading("Getting data from IPFS");
// try {
// const metaData = await getMetadataFromIPFS(ipfsPath);
// notification.remove(notificationId);
// notification.success("Downloaded from IPFS");
const handleIpfsDownload = async () => {
setLoading(true);
const notificationId = notification.loading("Getting data from IPFS");
try {
const metaData = await getMetadataFromIPFS(ipfsPath);
notification.remove(notificationId);
notification.success("Downloaded from IPFS");

// setYourJSON(metaData);
// } catch (error) {
// notification.remove(notificationId);
// notification.error("Error downloading from IPFS");
// console.log(error);
// } finally {
// setLoading(false);
// }
// };
setYourJSON(metaData);
} catch (error) {
notification.remove(notificationId);
notification.error("Error downloading from IPFS");
console.log(error);
} finally {
setLoading(false);
}
};

return (
<>
Expand All @@ -52,13 +52,13 @@ const IpfsDownload: NextPage = () => {
autoComplete="off"
/>
</div>
<ButtonStyle
// className={`btn btn-secondary my-6 ${loading ? "loading" : ""}`}
// disabled={loading}
// onClick={handleIpfsDownload}
<button
className={`btn btn-secondary my-6 ${loading ? "loading" : ""}`}
disabled={loading}
onClick={handleIpfsDownload}
>
Download from IPFS
</ButtonStyle>
</button>

{mounted && (
<LazyReactJson
Expand Down
52 changes: 29 additions & 23 deletions packages/nextjs/app/ipfsUpload/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { lazy, useEffect, useState } from "react";
import type { NextPage } from "next";
import { notification } from "~~/utils/scaffold-stark/notification";
// import { addToIPFS } from "~~/utils/simpleNFT/ipfs-fetch";
import { addToIPFS } from "~~/utils/scaffold-stark/simpleNFT/ipfs-fetch";
import nftsMetadata from "~~/utils/scaffold-stark/simpleNFT/nftsMetadata";
import ButtonStyle from "~~/components/ButtonStyle/ButtonStyle";

Expand All @@ -18,23 +18,23 @@ const IpfsUpload: NextPage = () => {
setMounted(true);
}, []);

// const handleIpfsUpload = async () => {
// setLoading(true);
// const notificationId = notification.loading("Uploading to IPFS...");
// try {
// const uploadedItem = await addToIPFS(yourJSON);
// notification.remove(notificationId);
// notification.success("Uploaded to IPFS");
const handleIpfsUpload = async () => {
setLoading(true);
const notificationId = notification.loading("Uploading to IPFS...");
try {
const uploadedItem = await addToIPFS(yourJSON);
notification.remove(notificationId);
notification.success("Uploaded to IPFS");

// setUploadedIpfsPath(uploadedItem.path);
// } catch (error) {
// notification.remove(notificationId);
// notification.error("Error uploading to IPFS");
// console.log(error);
// } finally {
// setLoading(false);
// }
// };
setUploadedIpfsPath(uploadedItem.path);
} catch (error) {
notification.remove(notificationId);
notification.error("Error uploading to IPFS");
console.log(error);
} finally {
setLoading(false);
}
};

return (
<>
Expand All @@ -60,18 +60,24 @@ const IpfsUpload: NextPage = () => {
}}
/>
)}
<ButtonStyle
// onClick={handleIpfsUpload}
<button
className={`btn btn-secondary my-4 ${loading ? "loading" : ""}`}
disabled={loading}
onClick={handleIpfsUpload}
>
Upload to IPFS
</ButtonStyle>
{/* {uploadedIpfsPath && (
</button>
{uploadedIpfsPath && (
<div className="mt-4">
<a href={`https://ipfs.io/ipfs/${uploadedIpfsPath}`} target="_blank" rel="noreferrer">
<a
href={`https://ipfs.io/ipfs/${uploadedIpfsPath}`}
target="_blank"
rel="noreferrer"
>
{`https://ipfs.io/ipfs/${uploadedIpfsPath}`}
</a>
</div>
)} */}
)}
</div>
</>
);
Expand Down
92 changes: 82 additions & 10 deletions packages/nextjs/app/myNFTs/page.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,88 @@
import ButtonStyle from "~~/components/ButtonStyle/ButtonStyle";
"use client";

import type { NextPage } from "next";
import { useAccount } from "@starknet-react/core";
import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
import { MyHoldings } from "~~/components/SimpleNFT/MyHoldings";
import { useScaffoldContractRead } from "~~/hooks/scaffold-stark/useScaffoldContractRead";
import { useScaffoldContractWrite } from "~~/hooks/scaffold-stark/useScaffoldContractWrite";
import { notification } from "~~/utils/scaffold-stark";
import { addToIPFS } from "~~/utils/scaffold-stark/simpleNFT/ipfs-fetch";
import { useScaffoldContract } from "~~/hooks/scaffold-stark/useScaffoldContract";
import nftsMetadata from "~~/utils/scaffold-stark/simpleNFT/nftsMetadata";

const MyNFTs: NextPage = () => {
const { address: connectedAddress, isConnected, isConnecting } = useAccount();
console.log(connectedAddress);

const { data: yourCollectibleContract } = useScaffoldContract({
contractName: "Challenge0",
});

const { writeAsync: mintItem, error: error } = useScaffoldContractWrite({
contractName: "Challenge0",
functionName: "mint_item",
args: [
connectedAddress ?? "",
`[${new TextEncoder().encode("Your string here").toString()}]`,
],
});

// console.log(mintItem)
// console.log(error)

const { data: tokenIdCounter } = useScaffoldContractRead({
contractName: "Challenge0",
functionName: "token_id_counter",
watch: true,
cacheOnBlock: true,
});

const handleMintItem = async () => {
// circle back to the zero item if we've reached the end of the array
if (tokenIdCounter === undefined) return;

const tokenIdCounterNumber = Number(tokenIdCounter);
const currentTokenMetaData =
nftsMetadata[tokenIdCounterNumber % nftsMetadata.length];
const notificationId = notification.loading("Uploading to IPFS");
try {
const uploadedItem = await addToIPFS(currentTokenMetaData);

// First remove previous loading notification and then show success notification
notification.remove(notificationId);
notification.success("Metadata uploaded to IPFS");

await mintItem({
args: [connectedAddress, uploadedItem.path],
});
} catch (error) {
notification.remove(notificationId);
console.error(error);
}
};

function Page() {
return (
<main className="flex flex-col flex-1">
<div className="flex flex-col items-center p-10">
<h1 className="text-4xl font-bold text-center mb-4">My NFTs</h1>
<ButtonStyle>Mint NFT</ButtonStyle>
<MyHoldings></MyHoldings>
<>
<div className="flex items-center flex-col pt-10">
<div className="px-5">
<h1 className="text-center mb-8">
<span className="block text-4xl font-bold">My NFTs</span>
</h1>
</div>
</div>
<div className="flex justify-center">
{!isConnected || isConnecting ? (
<CustomConnectButton />
) : (
<button className="btn btn-secondary" onClick={handleMintItem}>
Mint NFT
</button>
)}
</div>
</main>
<MyHoldings />
</>
);
}
};

export default Page;
export default MyNFTs;
1 change: 0 additions & 1 deletion packages/nextjs/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import Image from "next/image";
// import { Address } from "~~/components/scaffold-eth";

const Home: NextPage = () => {

return (
<>
<div className="flex items-center flex-col flex-grow pt-10">
Expand Down
5 changes: 3 additions & 2 deletions packages/nextjs/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
CurrencyDollarIcon,
MagnifyingGlassIcon,
} from "@heroicons/react/24/outline";
import { Faucet } from "./scaffold-stark";

/**
* Site footer
Expand All @@ -25,7 +26,7 @@ export const Footer = () => {
<div className="min-h-0 py-5 px-1 lg:mb-0 bg-base-100">
<div>
<div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
<div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
<div className="flex md:flex-row gap-2 pointer-events-auto">
{nativeCurrencyPrice > 0 && (
<div>
<div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
Expand All @@ -36,7 +37,7 @@ export const Footer = () => {
)}
{isLocalNetwork && (
<>
{/*<Faucet />*/}
<Faucet />
<Link
href="/blockexplorer"
passHref
Expand Down
27 changes: 11 additions & 16 deletions packages/nextjs/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
"use client";

import React, { useCallback, useRef, useState } from "react";
import React, { useState, useRef, useCallback } from "react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useOutsideClick } from "~~/hooks/scaffold-stark";
import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
import {
ArrowDownTrayIcon,
ArrowPathIcon,
Expand All @@ -12,12 +12,6 @@ import {
BugAntIcon,
PhotoIcon,
} from "@heroicons/react/24/outline";
// import {
// FaucetButton,
// RainbowKitCustomConnectButton,
// } from "~~/components/scaffold-eth";
import { useOutsideClick } from "~~/hooks/scaffold-stark";
import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";

type HeaderMenuLink = {
label: string;
Expand Down Expand Up @@ -79,17 +73,20 @@ export const HeaderMenuLinks = () => {
);
};

/**
* Site header
*/
export const Header = () => {
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const burgerMenuRef = useRef<HTMLDivElement>(null);
const pathname = usePathname();

useOutsideClick(
burgerMenuRef,
useCallback(() => setIsDrawerOpen(false), []),
);

const toggleDrawer = () => {
setIsDrawerOpen((prevIsOpenState) => !prevIsOpenState);
};

return (
<div className="sticky lg:static top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
<div className="navbar-start w-auto lg:w-1/2">
Expand All @@ -99,9 +96,7 @@ export const Header = () => {
className={`ml-1 btn btn-ghost ${
isDrawerOpen ? "hover:bg-secondary" : "hover:bg-transparent"
}`}
onClick={() => {
setIsDrawerOpen((prevIsOpenState) => !prevIsOpenState);
}}
onClick={toggleDrawer}
>
<Bars3Icon className="h-1/2" />
</label>
Expand Down Expand Up @@ -144,4 +139,4 @@ export const Header = () => {
</div>
</div>
);
};
};
6 changes: 1 addition & 5 deletions packages/nextjs/components/ScaffoldStarkAppWithProviders.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,7 @@ const ScaffoldStarkApp = ({ children }: { children: React.ReactNode }) => {
<>
<div className="flex flex-col min-h-screen">
<Header />
<main
className={`relative flex flex-col flex-1 `}
>
{children}
</main>
<main className={`relative flex flex-col flex-1 `}>{children}</main>
<Footer />
</div>
<Toaster />
Expand Down
Loading

0 comments on commit 405fd38

Please sign in to comment.