Layout.tsx
import React, {FC} from "react";
import {Stack, Flex, Box, Text, Button} from '@chakra-ui/react';
import { Link } from "react-router-dom";
const Layout: FC = ({children}) =>{
return(
<Stack h="100vh">
<Flex bg="purple.200" p={4} justifyContent="space-around" alignItems="center">
<Box>
<Text fontWeight="bold">h662-Animals</Text>
</Box>
<Link to="/">
<Button size="sm" colorScheme="blue">
Main
</Button>
</Link>
<Link to="my-animal">
<Button size="sm" colorScheme="red">
My Animal
</Button>
</Link>
<Link to="sale-animal">
<Button size="sm" colorScheme="green">
Sale Animal
</Button>
</Link>
</Flex>
<Flex direction="column" h="full" justifyContent="center" alignItems="center">
{children}
</Flex>
</Stack>
);
}
export default Layout
MyAnimalCard.tsx
import React , {FC, useState, ChangeEvent} from "react";
import {Box, Text, InputGroup, Input, InputRightAddon, Button} from "@chakra-ui/react"
import AnimalCard from "./AnimalCard";
import { saleAnimalTokenContract, web3 } from "../contracts";
export interface IMyanimalCard{
animalTokenId : string;
animalType : string;
animalPrice : string;
}
interface MyAnimalCardProps extends IMyanimalCard {
saleStatus:boolean;
account:string;
}
const MyAnimalCard: FC<MyAnimalCardProps> = ({animalTokenId, animalType, animalPrice, saleStatus, account}) =>{
const [sellPrice, setSellPrice] = useState<string>("");
const [myAnimalPrice, setMyAnimalPrice] = useState<string>(animalPrice)
const onChangeSellPrice = (e: ChangeEvent<HTMLInputElement>) =>{
setSellPrice(e.target.value);
}
const onClickSell = async () =>{
try{
if(!account || !saleStatus) return;
const response = await saleAnimalTokenContract.methods
.setForSaleAnimalToken(animalTokenId, web3.utils.toWei(sellPrice, "ether"))
.send({from:account});
if(response.status) {
setMyAnimalPrice(web3.utils.toWei(sellPrice, "ether"));
console.log(response)
}
}catch(err){
console.log(err);
}
}
return(
<Box textAlign="center" w={150}>
<AnimalCard animalType={animalType} /><Box mt={2}>
{animalPrice === "0" ? (
<>
<InputGroup>
<Input type='number' value={sellPrice} onChange={onChangeSellPrice}/>
<InputRightAddon children="Matic" />
</InputGroup>
<Button size="sm" colorScheme="green" mt={2} onClick={onClickSell}>
Sell
</Button>
</>) : <Text d="inline-block">{web3.utils.fromWei(myAnimalPrice)} Matic</Text> }
</Box>
</Box>
)
}
export default MyAnimalCard;
함수 설명
- onChangeSellPrice = (e: ChangeEvent<HTMLInputElement>)
- Input 박스 내의 요소가 바뀔때마다 price 를 바꿔준다.
- onClickSell
SaleAnimalCard.tsx
import React, {FC, useState, useEffect} from "react";
import AnimalCard from "./AnimalCard";
import {Box, Text, Button} from "@chakra-ui/react"
import { mintAnimalTokenContract, saleAnimalTokenContract, web3 } from "../contracts";
interface SaleAnimalCardProps{
animalType:string;
animalPrice:string;
animalTokenId: string;
account:string;
getOnSaleAnimalTokens: () => Promise<void>;
}
const SaleAnimalCard:FC<SaleAnimalCardProps> =({animalType,animalPrice,animalTokenId, account,getOnSaleAnimalTokens}) =>{
const [isBuyable, setIsBuyable] = useState<boolean>(false);
const getAnimalTokenOwner = async () => {
try{
const response = await mintAnimalTokenContract.methods.ownerOf(animalTokenId).call();
console.log(response)
console.log(account);
setIsBuyable(response.toLocaleLowerCase() === account.toLocaleLowerCase())
} catch(err){
console.log(err);
}
}
const onClickBuy = async () =>{
try{
if(!account) return;
const response = await saleAnimalTokenContract.methods.purchaseAnimalToken(animalTokenId).send({from: account, value:animalPrice});
if(response.status){
getOnSaleAnimalTokens();
}
} catch(err){
console.log(err)
}
}
useEffect(() => {
getAnimalTokenOwner();
}, [])
return(
<Box textAlign ="center" w={100}>
<AnimalCard animalType={animalType} />
<Box>
<Text d="inline-block">
{web3.utils.fromWei(animalPrice)} Matic
</Text>
<Button size="sm" colorScheme="green" m={2} disabled={isBuyable} onClick={onClickBuy}>Buy</Button>
</Box>
</Box>
)
}
export default SaleAnimalCard
