generated from scaffold-eth/scaffold-eth-2
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5 from fabriziogianni7/speaker-nft-mint-flow
Speaker nft mint flow
- Loading branch information
Showing
5 changed files
with
146 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import React, { useState } from "react"; | ||
| import lighthouse from "@lighthouse-web3/sdk"; | ||
| import { LoaderIcon } from "react-hot-toast"; | ||
|
|
||
| export const Recorder = () => { | ||
| const [file, setFile] = useState<FileList | null>(); | ||
| const [isUploadLoading, setIsUploadLoading] = useState<boolean>(); | ||
| const [fileUploaded, setFileUploaded] = useState<boolean>(); | ||
| const [price, setPrice] = useState(""); | ||
| const progressCallback = (progressData: { total: number; uploaded: number }) => { | ||
| const percentageDone = 100 - Number(progressData?.total / progressData?.uploaded); | ||
| console.log(percentageDone); | ||
| }; | ||
|
|
||
| const uploadFile = async (file: FileList | null | undefined) => { | ||
| setIsUploadLoading(true); | ||
| if (!file) { | ||
| alert("upload file first"); | ||
| return; | ||
| } | ||
| const output = await lighthouse.upload( | ||
| file, | ||
| process.env.NEXT_PUBLIC_LIGHTHOUSE_KEY as string, | ||
| false, | ||
| undefined, | ||
| progressCallback, | ||
| ); | ||
| console.log("File Status:", output); | ||
|
|
||
| console.log("Visit at https://gateway.lighthouse.storage/ipfs/" + output.data.Hash); | ||
| setIsUploadLoading(false); | ||
| setFileUploaded(true); | ||
| alert(`File uploaded at ${"https://gateway.lighthouse.storage/ipfs/"}`); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="p-4"> | ||
| {fileUploaded ? ( //TODO remove, jsut for developmnenrt | ||
| <> | ||
| <div className="flex flex-col items-center justify-center max-w-sm text-black"> | ||
| <input | ||
| type="number" | ||
| placeholder={`Enter Price (USDC)`} | ||
| value={price} | ||
| onChange={e => setPrice(e.target.value)} | ||
| className="mt-4 p-2 border border-gray-300 rounded" | ||
| /> | ||
| <button onClick={() => alert("CAZZO")} className="mt-2 bg-blue-500 text-white p-2 rounded"> | ||
| Submit | ||
| </button> | ||
| </div> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| {isUploadLoading ? ( | ||
| <div className="flex items-center justify-center"> | ||
| <LoaderIcon /> | ||
| </div> | ||
| ) : ( | ||
| <> | ||
| <div className="text-green-500 font-bold">Read this sentence and upload the audio:</div> | ||
| <div className="text-red-500 font-bold"> | ||
| Unlock new possibilities with cutting-edge technology. Experience innovation at your fingertips. Embrace | ||
| the future today. | ||
| </div> | ||
| <input onChange={e => setFile(e.target.files)} type="file" className="mt-4" /> | ||
| <button className="btn btn-secondary btn-sm" onClick={() => uploadFile(file)}> | ||
| Upload | ||
| </button> | ||
| </> | ||
| )} | ||
| </> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./Recorder"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import type { NextPage } from "next"; | ||
| import { MicrophoneIcon } from "@heroicons/react/24/outline"; | ||
| import { MetaHeader } from "~~/components/MetaHeader"; | ||
| import { Recorder } from "~~/components/record"; | ||
|
|
||
| const Home: NextPage = () => { | ||
| return ( | ||
| <> | ||
| <MetaHeader /> | ||
| <div className="flex items-center flex-col flex-grow pt-10"> | ||
| <div className="px-5"> | ||
| <h1 className="text-center mb-8"> | ||
| <span className="block text-2xl mb-2">Welcome to</span> | ||
| <span className="block text-4xl font-bold">Dub3.ai</span> | ||
| </h1> | ||
| {/* <p className="text-center text-lg"> | ||
| Get started by editing{" "} | ||
| <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block"> | ||
| packages/nextjs/pages/index.tsx | ||
| </code> | ||
| </p> | ||
| <p className="text-center text-lg"> | ||
| Edit your smart contract{" "} | ||
| <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block"> | ||
| YourContract.sol | ||
| </code>{" "} | ||
| in{" "} | ||
| <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block"> | ||
| packages/hardhat/contracts | ||
| </code> | ||
| </p> */} | ||
| </div> | ||
|
|
||
| <div className="flex-grow bg-base-300 w-full max-w-2xl mt-16 px-8 py-12"> | ||
| <div className="flex justify-center items-center gap-12 flex-col sm:flex-row"> | ||
| <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-2xl rounded-3xl"> | ||
| <MicrophoneIcon className="h-8 w-8 fill-secondary" /> | ||
| <p>Here we are. LFG </p> | ||
| <Recorder /> | ||
| </div> | ||
| {/* <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl"> | ||
| <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" /> | ||
| <p> | ||
| Explore your local transactions with the{" "} | ||
| <Link href="/blockexplorer" passHref className="link"> | ||
| Block Explorer | ||
| </Link>{" "} | ||
| tab. | ||
| </p> | ||
| </div> */} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Home; |