Skip to content

Commit

Permalink
Merge pull request #7 from alexkeating/connect-wallet
Browse files Browse the repository at this point in the history
Connect wallet
  • Loading branch information
alexkeating authored Mar 20, 2021
2 parents ea4fbef + 2557efb commit 15bfcd0
Show file tree
Hide file tree
Showing 9 changed files with 296 additions and 15,187 deletions.
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,16 @@
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"ethers": "^5.0.32",
"formik": "^2.2.6",
"nft.storage": "^0.3.8",
"react": "^16.13.1",
"react-bootstrap": "^1.5.2",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"styled-components": "^5.2.1",
"web3": "^1.3.4",
"web3modal": "^1.9.3"
"web3modal": "^1.9.3",
"yup": "^0.32.9"
},
"scripts": {
"start": "react-scripts start",
Expand Down
7 changes: 1 addition & 6 deletions src/App.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@

.main-container {
flex: column;
flex-direction: column;

}

#nav-style {
background: rgb(255,44,0);
Expand Down Expand Up @@ -33,7 +28,7 @@

.content {
background-color: white;
min-height: 90vh;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
Expand Down
52 changes: 1 addition & 51 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,67 +3,18 @@ import "./App.css";
import Header from "./components/Header";
import NftForm from "./components/NftForm";
import Dropzone from "./dropzone/Dropzone";
import { abis } from "@project/contracts";
import useWeb3Modal from "./hooks/useWeb3Modal";

import { NFTStorage } from "nft.storage";
const Web3 = require("web3");

const getNFTStorageClient = () => {
console.log(process.env.NFT_STORAGE_API_KEY);
return new NFTStorage({
// If this token can be turned into an environment var
// that would be great
token:
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJnaXRodWJ8MTI3MDUxNDYiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTYxNjExNTkxNjA1MSwibmFtZSI6ImRlZmF1bHQifQ.kn0H8kEawwLyS0uo_8Nwr-loUu_a-27DxQjdlD41_Hc",
});
};

function App() {
const web3 = new Web3(window.ethereum);
const config = {
erc721: "0x3f8CB69d9c0ED01923F11c829BaE4D9a4CB6c82C",
};

const [provider, loadWeb3Modal, logoutOfWeb3Modal] = useWeb3Modal();
console.log("Here");
console.log(provider);
console.log(loadWeb3Modal);
console.log(logoutOfWeb3Modal);

const mint = async () => {
// TODO pass form data into mint

console.log(abis.erc721);
console.log(config.erc721);
const client = getNFTStorageClient();
// console.log(img);
// const resp = await fetch(img.current.src);
// const b = await resp.blob();

// const cid = await client.storeBlob(b);
// console.log(cid);
// const metadata = {
// name: "first nft",
// description: "this is our first nft",
// image: `https://ipfs.io/ipfs/${cid}`,
// };
// const metadataCid = await client.storeBlob(
// new Blob([JSON.stringify(metadata)])
// );
// console.log(metadataCid);
const c = new web3.eth.Contract(abis.erc721.abi, config.erc721);
const nonceTx = await c.methods
.getNonceRent()
.call({ from: window.ethereum.selectedAddress });
console.log(nonceTx);
console.log("Nonce above");

// const tx = await c.methods
// .mint(NFTId, metadataCid)
// .send({ from: window.ethereum.selectedAddress });
// console.log(tx);
};

return (
<div className="main-container">
<Header
Expand All @@ -75,7 +26,6 @@ function App() {
<div className="content">
<Dropzone />
<NftForm />
<button onClick={mint}>Mint</button>
</div>
</div>
);
Expand Down
109 changes: 109 additions & 0 deletions src/components/Mint.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
/* import Dropzone from "./dropzone/Dropzone";
const Mint = () => {
return (
<>
<div className="container">
{unsupportedFiles.length === 0 && validFiles.length ? <button className="file-upload-btn" onClick={{mint}() => uploadFiles()}>Mint</button> : ''}
{unsupportedFiles.length ? <p>Please remove all unsupported files.</p> : ''}
<div className="drop-container"
onDragOver={dragOver}
onDragEnter={dragEnter}
onDragLeave={dragLeave}
onDrop={fileDrop}
onClick={fileInputClicked}
>
<div className="drop-message">
<div className="upload-icon"></div>
Drag & Drop files here or click to select file(s)
</div>
<input
ref={fileInputRef}
className="file-input"
type="file"
multiple
onChange={filesSelected}
/>
</div>
<div className="file-display-container">
{
validFiles.map((data, i) =>
<div className="file-status-bar" key={i}>
<div onClick={!data.invalid ? () => openImageModal(data) : () => removeFile(data.name)}>
<div className="file-type-logo"></div>
<div className="file-type">{fileType(data.name)}</div>
<span className={`file-name ${data.invalid ? 'file-error' : ''}`}>{data.name}</span>
<span className="file-size">({fileSize(data.size)})</span> {data.invalid && <span className='file-error-message'>({errorMessage})</span>}
</div>
<div className="file-remove" onClick={() => removeFile(data.name)}>X</div>
</div>
)
}
</div>
</div>
<div className="modal" ref={modalRef}>
<div className="overlay"></div>
<span className="close" onClick={(() => closeModal())}>X</span>
<div className="modal-image" ref={modalImageRef}></div>
</div>
<div className="upload-modal" ref={uploadModalRef}>
<div className="overlay"></div>
<div className="close" onClick={(() => closeUploadModal())}>X</div>
<div className="progress-container">
<span ref={uploadRef}></span>
<div className="progress">
<div className="progress-bar" ref={progressRef}></div>
</div>
</div>
</div>
</>
);
export default Mint;
onClick = async event => {
event.getNFTStorageClient(); // prevent default submission of the form to the backend (the browser does that automatically)
);
};
}
const [nftMetadata, setNftMetadata] = useState({name: "first nft", description: "this is our first nft", image: "https://ipfs.io/ipfs/${cid"}})
const handleIdChange = (e) => {
setNftMetadata({...nftMetadata, name: e.target.id})
}
render() {
return (
<div id="form-content">
<Form>
<Form.Group controlId="exampleForm.ControlInput1">
<Form.Label>NFT Id :</Form.Label>
<Form.Control onChange={handleIdChange} size="sm" type="id" key={name} placeholder="Number Id" />
</Form.Group>
<br />
<Form.Group controlId="exampleForm.ControlInput2">
<Form.Label>NFT Name :</Form.Label>
<Form.Control size="sm" type="tex" key={description} placeholder="Small text" />
</Form.Group>
<br />
<Form.Group controlId="exampleForm.ControlTextarea1">
<Form.Label>Discribe Your NFT </Form.Label>
<br />
<Form.Control as="textarea" rows={4} />
</Form.Group>
</Form>
</div>
);
}
*/


Loading

0 comments on commit 15bfcd0

Please sign in to comment.