erc721-mint

apps/ethereum/erc721/components/Container.tsx

@@ -3,8 +3,10 @@ import CreateInstance from './WriteFunctions/CreateInstance';
 import Transfer from './WriteFunctions/Transfer';
 import BalanceOf from './ReadFunctions/BalanceOf';
 import Approve from './WriteFunctions/Approve';
+import BaseURI from './WriteFunctions/SetBaseUri';
 import ApproveForAll from './WriteFunctions/ApproveForAll';
 import TogglePublicMint from './WriteFunctions/TogglePublicMint';
+import TenantMint from './WriteFunctions/TenantMint';
 
 import Mint from './WriteFunctions/Mint';
 import GetOwnerOf from './ReadFunctions/GetOwnerOf';
@@ -51,6 +53,8 @@ const Container = () => {
 			<Section>
 
 				<TogglePublicMint />
+				<BaseURI />
+				<TenantMint />
 			</Section>
 
 			<h3>Token Functions</h3>

apps/ethereum/erc721/components/WriteFunctions/SetBaseUri.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import * as Accordion from '@radix-ui/react-accordion';
+import { useEthereum } from '@decentology/hyperverse-ethereum';
+import { useERC721 } from '@decentology/hyperverse-evm-erc721';
+import { toast } from 'react-toastify';
+import {
+	Box,
+	Item,
+	TriggerContainer,
+	Trigger,
+	Parameters,
+	Input,
+	Content,
+	Button,
+} from '../ComponentStyles';
+import { useMutation } from 'react-query';
+
+const BaseURI = () => {
+	const { account } = useEthereum();
+	const erc721 = useERC721();
+	const { mutate, error, isLoading } = useMutation('transfer', erc721.setBaseURI);
+
+	const [baseURI, setBaseURI] = useState<string>('');
+
+	const setURI = async () => {
+		try {
+			mutate(baseURI);
+		} catch (error) {
+			console.log('e', error);
+			throw error;
+		}
+	};
+
+	useEffect(() => {
+		if (error) {
+			console.log(error);
+			if (error instanceof Error) {
+				toast.error(error.message, {
+					position: toast.POSITION.BOTTOM_CENTER,
+				});
+			}
+		}
+	}, [error]);
+
+	return (
+		<Box>
+			<h4>Base URI</h4>
+			<p>Set the base URI for your ERC721</p>
+			<Accordion.Root type="single" collapsible>
+				<Item value="item-1">
+					<TriggerContainer>
+						<Trigger disabled={!account}>
+							{!account ? 'Connect Wallet' : 'Set Base URI'}
+						</Trigger>
+					</TriggerContainer>
+					<Parameters>
+						<Content>
+							<Input
+								placeholder="URI"
+								onChange={(e) => setBaseURI(e.target.value)}
+							/>
+							<Button onClick={setURI}>
+								{!account
+									? 'Connet Wallet'
+									: isLoading
+									? 'txn loading ...'
+									: 'Set Base URI'}
+							</Button>
+						</Content>
+					</Parameters>
+				</Item>
+			</Accordion.Root>
+		</Box>
+	);
+};
+
+export default BaseURI;

apps/ethereum/erc721/components/WriteFunctions/TenantMint.tsx

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import * as Accordion from '@radix-ui/react-accordion';
+import { useEthereum } from '@decentology/hyperverse-ethereum';
+import { useERC721 } from '@decentology/hyperverse-evm-erc721';
+import {
+	Box,
+	Item,
+	TriggerContainer,
+	Trigger,
+	Parameters,
+	Input,
+	Content,
+	Button,
+} from '../ComponentStyles';
+import { useMutation } from 'react-query';
+
+const TenantMint = () => {
+	const { account } = useEthereum();
+
+	const erc721 = useERC721();
+	const { mutate, isLoading } = useMutation('tenantMint', erc721.tenantMint);
+	const [imageFile, setImageFile] = useState<File>();
+
+	const [receiver, setReceiver] = useState('');
+
+	const mint = async () => {
+		try {
+			const instanceData: {
+				image: File | undefined;
+				to: string;
+			} = {
+				image: imageFile,
+				to: receiver,
+			};
+console.log(instanceData)
+			mutate(instanceData);
+		} catch (error) {
+			throw error;
+		}
+	};
+
+	return (
+		<Box>
+			<h4>Mint</h4>
+			<p>Mint an NFT (tenant only)</p>
+			<Accordion.Root type="single" collapsible>
+				<Item value="item-1">
+					<TriggerContainer>
+						<Trigger disabled={!account}>
+							{!account ? 'Connect Wallet' : 'Mint'}
+						</Trigger>
+					</TriggerContainer>
+					<Parameters>
+						<Content>
+							<Input
+								placeholder="Receiver"
+								onChange={(e) => setReceiver(e.target.value)}
+							/>
+							<Input
+								type="file"
+								id="nft-file"
+								name="nftImage"
+								accept="image/*, .jpg"
+								placeholder="Receiver"
+								onChange={(e) => setImageFile(e!.target!.files![0])}
+							/>
+							<Button onClick={mint}>
+								{!account
+									? 'Connet Wallet'
+									: isLoading
+									? 'txn loading ...'
+									: 'Mint'}
+							</Button>
+						</Content>
+					</Parameters>
+				</Item>
+			</Accordion.Root>
+		</Box>
+	);
+};
+
+export default TenantMint;

apps/ethereum/erc721/components/WriteFunctions/TogglePublicMint.tsx

@@ -6,36 +6,60 @@ import {
 	Box,
 	Item,
 	Button,
+	TriggerContainer,
+	Trigger,
+	Parameters,
+	Content,
+	Input,
 } from '../ComponentStyles';
 import { useMutation } from 'react-query';
 
 const TogglePublicMint = () => {
 	const { account } = useEthereum();
 
 	const erc721 = useERC721();
-	const { mutate, isLoading } = useMutation('togglePublicMint', erc721.togglePublicMint);
-
+	const [boolMint, setBoolMint] = useState<string>('false');
 
+	const { mutate, isLoading } = useMutation('togglePublicMint', erc721.togglePublicMint);
 
+	const publicMint = async () => {
+		try {
+			mutate(boolMint === 'true' ? true : false);
+		} catch (error) {
+			console.log('e', error);
+			throw error;
+		}
+	};
 
 	return (
 		<Box>
-			<h4>Toggle Public Mint</h4>
-			<p>Set minting permission</p>
-			<Accordion.Root type="single" collapsible>
-				<Item value="item-1">
-
-				<Button onClick={() => 	mutate()}>
-								{!account
-									? 'Connet Wallet'
-									: isLoading
-									? 'txn loading ...'
-									: 'Toggle Public Mint'}
-							</Button>
-
-				</Item>
-			</Accordion.Root>
-		</Box>
+		<h4>Toggle Public Mint</h4>
+		<p>Toggle Public Mint to activate or deactivate</p>
+		<Accordion.Root type="single" collapsible>
+			<Item value="item-1">
+				<TriggerContainer>
+					<Trigger disabled={!account}>
+						{!account ? 'Connect Wallet' : 'Toggle Public Mint'}
+					</Trigger>
+				</TriggerContainer>
+				<Parameters>
+					<Content>
+						<select value={boolMint} onChange={(e) => setBoolMint(e.target.value)}>
+							<option value="true">True</option>
+							<option value="false">False</option>
+						</select>
+						<Button onClick={publicMint}>
+							{!account
+								? 'Connet Wallet'
+								: isLoading
+								? 'txn loading ...'
+								: 'Toggle Public Mint'}
+						</Button>
+					</Content>
+				</Parameters>
+			</Item>
+		</Accordion.Root>
+	</Box>
 	);
 };
 

apps/ethereum/erc721/pages/_app.tsx

@@ -10,29 +10,6 @@ import type { AppProps } from 'next/app';
 import { useLocalStorage } from 'react-use';
 import { createContext } from 'react';
 
-// const globalStyles = globalCss({
-// 	'*': {
-// 		margin: 0,
-// 		padding: 0,
-// 	},
-// 	html: {
-// 		fontSize: 14,
-// 		fontFamily: 'Proxima Nova, sans-serif',
-// 		letterSpacing: '0.9px',
-// 	},
-// 	body: {
-// 		fontSize: '1rem',
-
-// 		backgroundColor: '$blue500',
-// 		color: '$gray100',
-// 		maxWidth: '1200px',
-
-//     display: 'flex',
-//     justifyContent: 'center',
-//     alignItems: 'center',
-//     height: '100vh',
-// 	},
-// });
 
 const globalStyles = globalCss({
 	'*': {

apps/ethereum/eth-hyperverse/package.json

@@ -29,6 +29,7 @@
     "react-query": "^3.38.0",
     "react-toastify": "^8.2.0",
     "shiki": "^0.10.1",
+    "unstated-next": "^1.1.0",
     "use-media": "^1.4.0"
   },
   "devDependencies": {