Skip to content

Commit

Permalink
update: update Landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@TiyoSheng
TiyoSheng committed Oct 27, 2023
1 parent ebe2e4a commit 565b941
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 58 deletions.
3 changes: 2 additions & 1 deletion packages/client/src/pages/home/header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import UserAddress from '@/components/UserAddress';
interface IProps {
onPlayBtnClick: () => void;
walletAddress: string;
walletBalance: string;
}

const HomeHeader = (props: IProps) => {
Expand Down Expand Up @@ -41,7 +42,7 @@ const HomeHeader = (props: IProps) => {

{
props.walletAddress ?
<UserAddress address={props.walletAddress} account={'0.1ETH'}/>
<UserAddress address={props.walletAddress} account={props.walletBalance + 'ETH'}/>
:
<button className="play-btn mi-btn" onClick={props.onPlayBtnClick}>PLAY NOW</button>
}
Expand Down
104 changes: 71 additions & 33 deletions packages/client/src/pages/home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,23 @@ import { UserAddressKey } from '@/config';
import { useNavigate } from 'react-router-dom';
import Duck from '@/config/duck';
import { delay } from '@/utils';
import { useMUD } from '@/mud/MUDContext';
import { useEntityQuery } from "@latticexyz/react";
import { Has, getComponentValue } from '@latticexyz/recs';
import { ethers } from 'ethers';

const abi = [{"inputs":[{"internalType":"uint256","name":"_waitBlockCount","type":"uint256"},{"internalType":"string","name":"_symbol","type":"string"},{"internalType":"string","name":"_name","type":"string"},{"internalType":"string","name":"_notRevealedInfo","type":"string"},{"internalType":"string","name":"_revealedDesc","type":"string"}],"stateMutability":"nonpayable","type":"constructor"},{"inputs":[{"internalType":"address","name":"sender","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"},{"internalType":"address","name":"owner","type":"address"}],"name":"ERC721IncorrectOwner","type":"error"},{"inputs":[{"internalType":"address","name":"operator","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"ERC721InsufficientApproval","type":"error"},{"inputs":[{"internalType":"address","name":"approver","type":"address"}],"name":"ERC721InvalidApprover","type":"error"},{"inputs":[{"internalType":"address","name":"operator","type":"address"}],"name":"ERC721InvalidOperator","type":"error"},{"inputs":[{"internalType":"address","name":"owner","type":"address"}],"name":"ERC721InvalidOwner","type":"error"},{"inputs":[{"internalType":"address","name":"receiver","type":"address"}],"name":"ERC721InvalidReceiver","type":"error"},{"inputs":[{"internalType":"address","name":"sender","type":"address"}],"name":"ERC721InvalidSender","type":"error"},{"inputs":[{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"ERC721NonexistentToken","type":"error"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"owner","type":"address"},{"indexed":true,"internalType":"address","name":"approved","type":"address"},{"indexed":true,"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"owner","type":"address"},{"indexed":true,"internalType":"address","name":"operator","type":"address"},{"indexed":false,"internalType":"bool","name":"approved","type":"bool"}],"name":"ApprovalForAll","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"internalType":"uint256","name":"randomId","type":"uint256"},{"indexed":false,"internalType":"address","name":"author","type":"address"}],"name":"NewRandom","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"from","type":"address"},{"indexed":true,"internalType":"address","name":"to","type":"address"},{"indexed":true,"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"Transfer","type":"event"},{"inputs":[{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"approve","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"owner","type":"address"}],"name":"balanceOf","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"getApproved","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"_tokenId","type":"uint256"}],"name":"getStructInfo","outputs":[{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"uint256","name":"","type":"uint256"},{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"getUserTokenIdList","outputs":[{"internalType":"uint256[]","name":"","type":"uint256[]"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"owner","type":"address"},{"internalType":"address","name":"operator","type":"address"}],"name":"isApprovedForAll","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"mint","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"name","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"ownerOf","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"randomId","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"randomList","outputs":[{"internalType":"uint256","name":"blockNumber","type":"uint256"},{"internalType":"address","name":"author","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"_tokenId","type":"uint256"}],"name":"revealNFT","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"from","type":"address"},{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"safeTransferFrom","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"from","type":"address"},{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"},{"internalType":"bytes","name":"data","type":"bytes"}],"name":"safeTransferFrom","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"operator","type":"address"},{"internalType":"bool","name":"approved","type":"bool"}],"name":"setApprovalForAll","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"bytes4","name":"interfaceId","type":"bytes4"}],"name":"supportsInterface","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"symbol","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"tokenId","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"_tokenId","type":"uint256"}],"name":"tokenURI","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"from","type":"address"},{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"transferFrom","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"userList","outputs":[{"internalType":"uint256","name":"randomId","type":"uint256"},{"internalType":"address","name":"owner","type":"address"},{"internalType":"uint256","name":"HP","type":"uint256"},{"internalType":"uint256","name":"Attack","type":"uint256"},{"internalType":"uint256","name":"AttackRange","type":"uint256"},{"internalType":"uint256","name":"Speed","type":"uint256"},{"internalType":"uint256","name":"Strength","type":"uint256"},{"internalType":"uint256","name":"Space","type":"uint256"},{"internalType":"enum MRandom.RandomState","name":"state","type":"uint8"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"waitBlockCount","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"}]
let userContract
const Home = () => {

const {
components: { GlobalConfig },
systemCalls,
network
} = useMUD();

const [walletAddress, setWalletAddress] = useState('');
const [walletBalance, setWalletBalance] = useState('');
const [step, setStep] = useState('play');
const usernameRef = useRef<HTMLInputElement>();
const { Modal, open, close, setContent } = useModal({
Expand All @@ -26,6 +39,7 @@ const Home = () => {
const navigate = useNavigate();

useEffect(() => {

// const address = localStorage.getItem(UserAddressKey);
// if (address) {
// setWalletAddress(address);
Expand All @@ -37,6 +51,18 @@ const Home = () => {
const [head, setHead] = useState<string>();
const [username, setUsername] = useState<string>();

const GlobalConfigData = useEntityQuery([Has(GlobalConfig)]).map((entity) => getComponentValue(GlobalConfig, entity));
console.log(GlobalConfigData, 'GlobalConfigData')

if (GlobalConfigData.length && GlobalConfigData[0].userContract) {
let privateKey = network.privateKey
let rpc = network.walletClient?.chain?.rpcUrls?.default?.http[0] || 'http://127.0.0.1:8545'
let provider = new ethers.providers.JsonRpcProvider(rpc)
let wallet = new ethers.Wallet(privateKey, provider)
console.log(wallet)
let userContractAddress = GlobalConfigData[0].userContract
userContract = new ethers.Contract(userContractAddress, abi, wallet)
}

const createWallet = () => {
setContent(
Expand Down Expand Up @@ -65,66 +91,78 @@ const Home = () => {
// }, 3000);
}

const toMint = () => {
const toMint = async () => {
if (!usernameRef.current.value) {
message.error('Please input your username');
return;
}
setUsername(usernameRef.current.value);
setWalletAddress(UserAddress);
localStorage.setItem('mi_user_address', UserAddress)
await getBalance()
close();
setStep('mint');
}

const mintAndGo = () => {
const mintAndGo = async () => {
const clothes = Duck.Clothes[~~(Math.random() * Duck.Clothes.length)];
const handheld = Duck.HandHeld[~~(Math.random() * Duck.HandHeld.length)];
const head = Duck.Head[~~(Math.random() * Duck.Head.length)];

setMinting(true);

delay(1000).then(() => {
setClothes(clothes);
setHandheld(handheld);
setHead(head);
}).delay(3000).then(() => {
navigate('/game', {
state: {
username,
clothes,
handheld,
head,
}
});
})
if (userContract) {
console.log(userContract, 'userContract')
try {
let tx = await userContract.mint()
await tx.wait()
console.log(tx, 'tx')
let tokenIds = await userContract.getUserTokenIdList()
console.log(tokenIds, 'tokenIds')
let tokenId = tokenIds[0].toString()
let t = await userContract.revealNFT(tokenId)
await t.wait()
console.log(t, 't')
delay(100).then(() => {
setClothes(clothes);
setHandheld(handheld);
setHead(head);
}).delay(3000).then(() => {
navigate('/game', {
state: {
username,
clothes,
handheld,
head,
}
});
})
} catch (error) {
console.log(error)
}
}

}

const play = () => {
// if (walletAddress) {
// setContent(
// <div className="create-wallet-wrapper">
// <div className="create-wallet-content">
// You have successfully created a wallet.Name your character and start your journey!
// </div>
// <div className="mint-name">
// <input type="text" className="mi-input" ref={usernameRef} />
// <button className="mi-btn" onClick={toMint}>OK</button>
// </div>
// </div>
// );
// open();
// return;
// }
createWallet();
}

const getBalance = async () => {
let balance = await network.publicClient.getBalance({
address: network.walletClient.account.address
})
// 转成eth
let walletBalance = (+ethers.utils.formatEther(balance.toString())).toFixed(2)
setWalletAddress(network.walletClient.account.address);
setWalletBalance(walletBalance);
localStorage.setItem('mi_user_address', network.walletClient.account.address)
}

return (
<div className="mi-home-page">
<Header
onPlayBtnClick={play}
walletAddress={walletAddress}
walletBalance={walletBalance}
/>
{
step === 'play' && (
Expand Down
Loading

0 comments on commit 565b941

Please sign in to comment.