Skip to content

Commit

Permalink
Changed index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
root committed Jun 19, 2024
1 parent 01291b2 commit 1c308bc
Show file tree
Hide file tree
Showing 10 changed files with 11,359 additions and 10,107 deletions.
21,366 changes: 11,286 additions & 10,080 deletions package-lock.json
View file

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,19 @@
"hono": "^4.4.6",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hot-toast": "^2.4.1",
"react-router-dom": "^6.23.1",
"react-scripts": "5.0.1",
"typescript": "^5.0.3",
"viem": "^2.15.1",
"wagmi": "^2.10.2",
"web-vitals": "^2.1.4"
},
"overrides": {
"@typescript-eslint/typescript-estree": "^5.57.1",
"fork-ts-checker-webpack-plugin": "^6.5.3",
"typescript": "^5.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
Expand Down
6 changes: 3 additions & 3 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
Expand All @@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>AI NFT Generator</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
Binary file added public/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/logo192.png
View file
Binary file not shown.
Binary file removed public/logo512.png
View file
Binary file not shown.
6 changes: 6 additions & 0 deletions server/public/nft-metadata/1718781158191.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"name": "Foxi",
"description": "This is my fox!",
"image": "https://b2f32f5c5ea2f82e94d449dc15c457d7.ipfscdn.io/ipfs/bafybeigavpwwlvqwvedmset4p2ghfjempvyfy3vyfnysgcm3vpzic3r2oe/0",
"attributes": []
}
6 changes: 6 additions & 0 deletions server/public/nft-metadata/1718781169251.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"name": "Foxi",
"description": "This is my fox!",
"image": "https://b2f32f5c5ea2f82e94d449dc15c457d7.ipfscdn.io/ipfs/bafybeigavpwwlvqwvedmset4p2ghfjempvyfy3vyfnysgcm3vpzic3r2oe/0",
"attributes": []
}
21 changes: 16 additions & 5 deletions src/components/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const translateRightToLeft = keyframes`
`;

const MainComponent = () => {
const [rotation, setRotation] = useState({ x: 0, y: 0 });
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
const [scrollPosition, setScrollPosition] = useState(0);

const handleMouseMove = (event) => {
Expand All @@ -27,7 +27,7 @@ const MainComponent = () => {
const deltaY = clientY - centerY;

const rotationFactor = 3; // Increase this factor to increase speed and angle
setRotation({
setMousePosition({
x: (deltaY / centerY) * 15 * rotationFactor,
y: (deltaX / centerX) * 15 * rotationFactor,
});
Expand All @@ -38,6 +38,16 @@ const MainComponent = () => {
setScrollPosition(event.target.scrollTop);
};

// generate random color by number that is passed
const generateRandomColor = (num) => {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

return (
<Box onMouseMove={handleMouseMove} onScroll={handleScroll} sx={{ height: '100vh', overflow: 'auto' }}>
<Box
Expand All @@ -59,12 +69,13 @@ const MainComponent = () => {
position: 'absolute',
right: '25%',
top: '50%',
transform: `translate(-50%, -50%) rotateY(${rotation.y}deg) rotateX(${rotation.x}deg)`,
// transform: `translate(-50%, -50%) rotateY(${rotation.y}deg) rotateX(${rotation.x}deg)`,
transform: `translate(-50%, -50%)`,
width: '390px',
height: '425px',
transition: 'transform 0.1s ease-out',
transition: 'transform 0.1s ease-out, filter 0.5s ease-out',
// filter: `hue-rotate(${scrollPosition / 10}deg)`,
filter: `drop-shadow(1px 3px 100px blue) drop-shadow(46px -10px 30px green)`,
filter: `drop-shadow(1px 3px 100px ${generateRandomColor(mousePosition.x)}) drop-shadow(46px -10px 30px ${generateRandomColor()})`,
}}
/>
<Typography variant="h2" fontFamily={"Montserrat Alternates"} fontWeight={"bolder"} sx={{ mr: '5%' }} color="azure">
Expand Down
54 changes: 35 additions & 19 deletions src/components/Mint.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import { Box, Grid, TextField,
import axios from 'axios';
import { Buffer } from 'buffer';
import ERC721ABI from '../assets/abi/ERC721ABI.json';
import { useSimulateContract, useWriteContract } from 'wagmi';
import { useSimulateContract, useWriteContract} from 'wagmi';
import toast, { Toaster } from 'react-hot-toast';


const MintingModal = ({ open, handleClose, handleMint, nftMetadata, setNftMetadata }) => {
const [name, setName] = React.useState('');
Expand Down Expand Up @@ -133,7 +135,7 @@ const MyComponent = () => {
method: '',
status: false
});
const { writeContract } = useWriteContract()
const { writeContractAsync, status: writeStatus } = useWriteContract()

const handleGenerate = async () => {
if (isLoading.status === true) return;
Expand Down Expand Up @@ -190,7 +192,7 @@ const MyComponent = () => {
if (response.status === 200) {
setOpenMintingModal(false);
setIsLoading({ ...isLoading, method: 'mint' });
await writeContract({
await writeContractAsync({
abi: ERC721ABI,
address: '0x0842AC2C94e6f8439B5256bCec61Cd68b2A7bbEf',
functionName: 'mint',
Expand All @@ -200,19 +202,34 @@ const MyComponent = () => {
})
}

// React.useEffect(() => {
// // post image to server and get response
// if (imgUrl !== '' && imgUrl !== undefined) {
// const postImage = async () => {
// await axios.post('http://localhost:5000/upload-image-to-ipfs', {
// image: imgUrl
// }).then((response) => {
// console.log(response);
// })
// }
// postImage();
// }
// }, [imgUrl])
React.useEffect(() => {

if (isLoading.method === 'mint') {
if (writeStatus === 'success') {
setOpenMintingModal(false);
toast.success('NFT minted successfully!');
setIsLoading({ status: false, method: '' });
} else if (writeStatus === 'error') {
setIsLoading({ status: false, method: '' });
toast.error('NFT minting failed!');
} else if (writeStatus === 'pending') {
setIsLoading({ status: true, method: 'mint' });
toast.loading('Sending transaction...');
}
}

if (isLoading.status) {
if (isLoading.method === 'generate') {
toast.loading('Generating image...');
} else if (isLoading.method === 'ipfs-upload') {
toast.loading('Uploading image to IPFS...');
}
} else {
toast.dismiss();
setIsLoading({ status: false, method: '' });
}

}, [writeStatus, isLoading]);

return (
<Box
Expand All @@ -224,6 +241,7 @@ const MyComponent = () => {
overflow: 'hidden',
}}
>
<Toaster />
<Grid container sx={{ height: '100%' }} position="absolute" alignItems="right" justifyContent="right" top={'10px'} right={'10px'} zIndex={1}>
<w3m-button />
</Grid>
Expand Down Expand Up @@ -260,7 +278,6 @@ const MyComponent = () => {
onClick={handleGenerate}
sx={buttonStyle}>
{isLoading.method === 'generate' ? <div>
Generating...
<CircularProgress size={15} thickness={8} sx={{ verticalAlign: 'middle', m: 1 }} />
</div> : 'Generate Image'}
</Button>
Expand All @@ -270,12 +287,11 @@ const MyComponent = () => {
sx={buttonStyle}>
{/* if method is mint show minting with progress , and then if no, if the method is ipfs-upload show 'ipfs uploading' ,if no show mint */}
{isLoading.method === 'mint' ? <div>
Minting...
<CircularProgress size={15} thickness={8} sx={{ verticalAlign: 'middle', m: 1 }} />
</div> :
isLoading.method === 'ipfs-upload' ?
<div>
IPFS Uploading... <CircularProgress size={15} thickness={8} sx={{ verticalAlign: 'middle', m: 1 }} />
<CircularProgress size={15} thickness={8} sx={{ verticalAlign: 'middle', m: 1 }} />
</div> : 'Mint it!'
}
</Button>
Expand Down

1 comment on commit 1c308bc

@eliasdiek
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JustinStar-py hey , I'm looking for someone with your stack to work on our platform . are you up for a freelance or full time role ? contact me on telegram @eliasdiek or via email at [email protected]

Please sign in to comment.