getting contracts integrated
parent
86d37ab5dc
commit
525ee783d8
@ -0,0 +1,297 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import { ethers, BigNumber } from 'ethers';
|
||||
import { useAccount, useContractReads, useContractRead, usePrepareContractWrite, useContractWrite, useWaitForTransaction, erc721ABI } from 'wagmi';
|
||||
import { NotificationContainer, NotificationManager } from 'react-notifications';
|
||||
import debounce from 'lodash';
|
||||
|
||||
import MainABI from '../abi/main.json';
|
||||
import '../styles/hero.css';
|
||||
import Unaboomer from '../img/unaboomer.png';
|
||||
import Mailbomb from '../img/mailbomb.png';
|
||||
import Explosion from '../img/explosion.png';
|
||||
import Arrow from '../img/arrow_right.png';
|
||||
|
||||
export function Hero(props) {
|
||||
const contractAddress = props.contractAddress;
|
||||
const [tokensMinted, setTokensMinted] = useState(() => {
|
||||
const saved = localStorage.getItem('tokensMinted-v1');
|
||||
return saved || JSON.stringify([])
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('tokensMinted-v1', tokensMinted);
|
||||
}, [tokensMinted]);
|
||||
|
||||
const [options, setOptions] = useState({
|
||||
unaboomerAmount: 1,
|
||||
bombAmount: 1,
|
||||
sendBombAmount: 1,
|
||||
unaboomerPreviewAmount: 1,
|
||||
bombPreviewAmount: 1,
|
||||
sendBombPreviewAmount: 1,
|
||||
unaboomerPrice: 0,
|
||||
bombPrice: ethers.utils.parseEther('.01'),
|
||||
unaboomersMinted: 0,
|
||||
unaboomerBalance: 0,
|
||||
bombBalance: 0,
|
||||
unaboomersRadicalized: 0,
|
||||
bombsAssembled: 0,
|
||||
bombsExploded: 0,
|
||||
unaboomersKilled: 0,
|
||||
leaderboardPointer: 0,
|
||||
leaderAddress: '',
|
||||
leaderKillCount: 0,
|
||||
unaboomerMaxSupply: 0,
|
||||
unaboomerMaxSurvivorCount: 0,
|
||||
unaboomerMaxMintPerWallet: 0,
|
||||
readWTF: false,
|
||||
balancesFetched: false,
|
||||
unaboomersByAddress: []
|
||||
});
|
||||
function handleStateChange(obj) {
|
||||
setOptions(preState => ({...preState , ...obj}));
|
||||
}
|
||||
const { isConnected, address } = useAccount();
|
||||
const defOpt = {
|
||||
address: contractAddress,
|
||||
abi: MainABI,
|
||||
enabled: isConnected
|
||||
}
|
||||
// Fetch this stuff and cache aggressively since it doesn't change
|
||||
useContractReads({
|
||||
contracts: [
|
||||
{...defOpt, functionName: 'unaboomerPrice'},
|
||||
{...defOpt, functionName: 'bombPrice'},
|
||||
{...defOpt, functionName: 'unaboomerMaxSupply'},
|
||||
{...defOpt, functionName: 'unaboomerMaxSurvivorCount'},
|
||||
{...defOpt, functionName: 'unaboomerMaxMintPerWallet'}
|
||||
],
|
||||
watch: true,
|
||||
cacheTime: 30_000,
|
||||
onSuccess(data) {
|
||||
handleStateChange({
|
||||
unaboomerPrice: data[0].toString(),
|
||||
bombPrice: data[1].toString(),
|
||||
unaboomerMaxSupply: Number(data[2]),
|
||||
unaboomerMaxSurvivorCount: Number(data[3]),
|
||||
unaboomerMaxMintPerWallet: Number(data[4])
|
||||
});
|
||||
}
|
||||
});
|
||||
// Fetch this stuff more frequently as it updates constantly
|
||||
useContractReads({
|
||||
contracts: [
|
||||
{...defOpt, functionName: 'unaboomersMinted', args: [address]},
|
||||
{...defOpt, functionName: 'bombBalance', args: [address]},
|
||||
{...defOpt, functionName: 'unaboomersRadicalized'},
|
||||
{...defOpt, functionName: 'bombsAssembled'},
|
||||
{...defOpt, functionName: 'bombsExploded'},
|
||||
{...defOpt, functionName: 'unaboomersKilled'},
|
||||
{...defOpt, functionName: 'leaderboardPointer'},
|
||||
{...defOpt, functionName: 'unaboomerBalance', args: [address]}
|
||||
],
|
||||
watch: true,
|
||||
cacheTime: 6_000,
|
||||
onSuccess(data) {
|
||||
handleStateChange({
|
||||
unaboomersMinted: Number(data[0]),
|
||||
bombBalance: Number(data[1]),
|
||||
unaboomersRadicalized: Number(data[2]),
|
||||
bombsAssembled: Number(data[3]),
|
||||
bombsExploded: Number(data[4]),
|
||||
unaboomersKilled: Number(data[5]),
|
||||
leaderboardPointer: Number(data[6]),
|
||||
balancesFetched: true,
|
||||
unaboomerBalance: Number(data[7])
|
||||
});
|
||||
}
|
||||
});
|
||||
useContractRead({
|
||||
address: contractAddress,
|
||||
abi: MainABI,
|
||||
enabled: options.leaderboardPointer > 0,
|
||||
functionName: 'leaderboard',
|
||||
args: [options.leaderboardPointer],
|
||||
watch: true,
|
||||
cacheTime: 8_000,
|
||||
onSuccess: async (data) => {
|
||||
handleStateChange({
|
||||
leaderAddress: data,
|
||||
});
|
||||
}
|
||||
});
|
||||
useContractRead({
|
||||
address: contractAddress,
|
||||
abi: MainABI,
|
||||
enabled: options.leaderAddress.length > 0,
|
||||
functionName: 'killCount',
|
||||
args: [options.leaderAddress],
|
||||
watch: true,
|
||||
cacheTime: 8_000,
|
||||
onSuccess(data) {
|
||||
handleStateChange({
|
||||
leaderKillCount: Number(data),
|
||||
});
|
||||
}
|
||||
});
|
||||
const radicalizeBoomersPrepare = usePrepareContractWrite({
|
||||
address: contractAddress,
|
||||
abi: MainABI,
|
||||
enabled: isConnected && options.unaboomersMinted < options.unaboomerMaxMintPerWallet && options.unaboomerAmount > 0 && options.balancesFetched,
|
||||
functionName: 'radicalizeBoomers',
|
||||
args: [options.unaboomerAmount],
|
||||
overrides: {
|
||||
from: address,
|
||||
value: BigNumber.from((options.unaboomerPrice * options.unaboomerAmount).toString())
|
||||
}
|
||||
});
|
||||
const radicalizeBoomersWrite = useContractWrite({
|
||||
...radicalizeBoomersPrepare.config,
|
||||
onError(data) {
|
||||
if (data.message.startsWith('user rejected transaction')) NotificationManager.info(`tx cancelled`, 'ok', 4000);
|
||||
}
|
||||
});
|
||||
const assembleBombsPrepare = usePrepareContractWrite({
|
||||
address: contractAddress,
|
||||
abi: MainABI,
|
||||
enabled: isConnected && options.bombAmount > 0,
|
||||
functionName: 'assembleBombs',
|
||||
args: [options.bombAmount],
|
||||
overrides: {
|
||||
from: address,
|
||||
value: BigNumber.from((options.bombPrice * options.bombAmount).toString())
|
||||
}
|
||||
});
|
||||
const assembleBombsWrite = useContractWrite({
|
||||
...assembleBombsPrepare.config,
|
||||
onError(data) {
|
||||
if (data.message.startsWith('user rejected transaction')) NotificationManager.info(`tx cancelled`, 'ok', 4000);
|
||||
}
|
||||
});
|
||||
const sendBombsPrepare = usePrepareContractWrite({
|
||||
address: contractAddress,
|
||||
abi: MainABI,
|
||||
enabled: isConnected && options.bombBalance > 0,
|
||||
functionName: 'sendBombs',
|
||||
cacheTime: 0,
|
||||
staleTime: 400,
|
||||
args: [options.sendBombAmount]
|
||||
});
|
||||
const sendBombsWrite = useContractWrite({
|
||||
...sendBombsPrepare.config,
|
||||
onError(data) {
|
||||
if (data.message.startsWith('user rejected transaction')) NotificationManager.info(`tx cancelled`, 'ok', 4000);
|
||||
}
|
||||
});
|
||||
useWaitForTransaction({
|
||||
hash: radicalizeBoomersWrite.data?.hash,
|
||||
enabled: radicalizeBoomersWrite.status === 'success',
|
||||
onSuccess(data) {
|
||||
let tm = JSON.parse(tokensMinted);
|
||||
const iface = new ethers.utils.Interface(erc721ABI);
|
||||
data.logs.filter(log =>
|
||||
log.topics[0] === '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef'
|
||||
).map((log) => {
|
||||
const res = iface.decodeEventLog("Transfer", log.data, log.topics);
|
||||
NotificationManager.success(`You radicalized Unaboomer #${res.tokenId.toString()}`, '', 4000);
|
||||
tm.push(Number(res.tokenId));
|
||||
});
|
||||
setTokensMinted(JSON.stringify(tm));
|
||||
console.log(tm);
|
||||
}
|
||||
})
|
||||
useWaitForTransaction({
|
||||
hash: sendBombsWrite.data?.hash,
|
||||
enabled: sendBombsWrite.status === 'success',
|
||||
onSuccess(data) {
|
||||
const iface = new ethers.utils.Interface(MainABI);
|
||||
data.logs.filter(log =>
|
||||
log.topics[0] === '0x38c7e2e8001cefb27535bd6bcc6363c6d6a6a83dbb77f092b78956334596f9ed'
|
||||
).map((log) => {
|
||||
const res = iface.decodeEventLog("SentBomb", log.data, log.topics);
|
||||
if (res.hit) {
|
||||
if (res.owned) {
|
||||
NotificationManager.error(`Your bomb exploded during assembly and killed your Unaboomer ${res.tokenId.toString()}`, '', 8000);
|
||||
} else {
|
||||
NotificationManager.success(`Your bomb killed Unaboomer ${res.tokenId.toString()}`, '', 8000);
|
||||
}
|
||||
} else {
|
||||
NotificationManager.warning(`Your bomb for Unaboomer ${res.tokenId.toString()} was a dud`, '', 8000);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div id='hero'>
|
||||
<h1>the web3 revolution & its consequences have been a disaster for the human race.</h1>
|
||||
<p>
|
||||
Technology is advancing at an exponential rate and boomers are being left behind. A.I., Bitcoin,
|
||||
and expensive JPEGs have made them angry. <br /><br />
|
||||
They've begun to radicalize. {options.unaboomerMaxSupply > 0 ? '35,000': options.unaboomerMaxSupply} Boomers have joined forces
|
||||
to lash out at the system.<br /><br />
|
||||
</p>
|
||||
<div id='heroFlex'>
|
||||
<div className='heroFlexItem'>
|
||||
<img src={Unaboomer} width='280px' alt='Pixelated Unaboomer profile picture - a hooded man with dark sunglasses.' />
|
||||
|
||||
{options.unaboomersMinted > 0 && (
|
||||
<p>
|
||||
You have minted {options.unaboomersMinted} Unaboomers.
|
||||
{options.unaboomersKilled > 0 && <>{options.unaboomersKilled} are dead.</>}
|
||||
</p>
|
||||
)}
|
||||
<br />
|
||||
{isConnected
|
||||
&& options.unaboomersMinted < options.unaboomerMaxMintPerWallet
|
||||
&& options.unaboomersKilled + options.unaboomersRadicalized < options.unaboomerMaxSupply
|
||||
&& (
|
||||
<>
|
||||
<input type='number' step='1' name='bombAmountPreview' defaultValue={1} min={1} max={options.unaboomerMaxMintPerWallet - options.unaboomersMinted} onChange={(v) => {
|
||||
handleStateChange({unaboomerAmount: v.target.value});
|
||||
radicalizeBoomersWrite.reset()
|
||||
}}></input>
|
||||
<button className='doThing' disabled={radicalizeBoomersPrepare.status == 'error'} onClick={() => radicalizeBoomersWrite.write?.()}>
|
||||
{radicalizeBoomersWrite.isLoading && <>minting {options.unaboomerAmount}</>}
|
||||
{radicalizeBoomersWrite.isIdle && <>Radicalize {options.unaboomerAmount == 1 ? 'a Unaboomer': <>{options.unaboomerAmount} Unaboomers</>}</>}
|
||||
{radicalizeBoomersWrite.isSuccess && <>sent</>}
|
||||
{radicalizeBoomersWrite.isError && <>error</>}
|
||||
</button>
|
||||
<p>({ethers.utils.formatEther((options.unaboomerPrice * options.unaboomerAmount).toString())} ETH)</p>
|
||||
</>
|
||||
) || options.unaboomersMinted == options.unaboomerMaxMintPerWallet && options.unaboomersKilled + options.unaboomersRadicalized < options.unaboomerMaxSupply && (
|
||||
<h2>max per wallet reached</h2>
|
||||
) || options.unaboomersRadicalized == options.unaboomerMaxSupply && options.unaboomerMaxSupply > 0 && (
|
||||
<h2>max supply reached</h2>
|
||||
)}
|
||||
</div>
|
||||
<div className='heroFlexArrow'>
|
||||
<img src={Arrow} width='100px' alt='Arrow pointing to the next step.' />
|
||||
</div>
|
||||
<div className='heroFlexItem'>
|
||||
<img src={Mailbomb} width='280px' alt='Pixelated Mailbomb image - handle with caution.' />
|
||||
<p>
|
||||
Don't let the Boomers win, fight back! Assemble a mailbomb and blow 'em to smithereens. <br /><br />
|
||||
(Warning: Some bombs are duds!)
|
||||
</p>
|
||||
<button className='doThing buttom'>assemble mailbomb</button>
|
||||
<p>(.01 ETH)</p>
|
||||
</div>
|
||||
<div className='heroFlexArrow'>
|
||||
<img src={Arrow} width='100px' alt='Arrow pointing to the next step.' />
|
||||
</div>
|
||||
<div className='heroFlexItem'>
|
||||
<img src={Explosion} width='280px' alt='Pixelated explosion image.' />
|
||||
<p>
|
||||
Ready for mayhem? Burn your mailrooms to blow up a random boomer. <br /><br />
|
||||
If your bomb is live it will destroy a Boomer PFP forever. <br /><br />
|
||||
(Warning: Your Boomer might explode!)
|
||||
</p>
|
||||
<button className='doThing buttom'>mail a bomb</button>
|
||||
<p>(0 ETH)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import '../styles/hero.css';
|
||||
import Unaboomer from '../img/unaboomer.png';
|
||||
import Mailbomb from '../img/mailbomb.png';
|
||||
import Explosion from '../img/explosion.png';
|
||||
import Arrow from '../img/arrow_right.png';
|
||||
|
||||
export class Hero extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div id='hero'>
|
||||
<h1>the web3 revolution & its consequences have been a disaster for the human race.</h1>
|
||||
<div id='heroFlex'>
|
||||
<div className='heroFlexItem'>
|
||||
<img src={Unaboomer} width='280px' alt='Pixelated Unaboomer profile picture - a hooded man with dark sunglasses.' />
|
||||
<p>
|
||||
Technology is advancing at an exponential rate and boomers are being left behind. A.I., Bitcoin,
|
||||
and expensive JPEGs have made them angry. <br /><br />
|
||||
They've begun to radicalize. 35,000 Boomers have joined forces
|
||||
to lash out at the system.
|
||||
</p>
|
||||
<button className='doThing buttom'>Radicalize boomer</button>
|
||||
<p>(0 ETH)</p>
|
||||
</div>
|
||||
<div className='heroFlexArrow'>
|
||||
<img src={Arrow} width='100px' alt='Arrow pointing to the next step.' />
|
||||
</div>
|
||||
<div className='heroFlexItem'>
|
||||
<img src={Mailbomb} width='280px' alt='Pixelated Mailbomb image - handle with caution.' />
|
||||
<p>
|
||||
Don't let the Boomers win, fight back! Assemble a mailbomb and blow 'em to smithereens. <br /><br />
|
||||
(Warning: Some bombs are duds!)
|
||||
</p>
|
||||
<button className='doThing buttom'>assemble mailbomb</button>
|
||||
<p>(.01 ETH)</p>
|
||||
</div>
|
||||
<div className='heroFlexArrow'>
|
||||
<img src={Arrow} width='100px' alt='Arrow pointing to the next step.' />
|
||||
</div>
|
||||
<div className='heroFlexItem'>
|
||||
<img src={Explosion} width='280px' alt='Pixelated explosion image.' />
|
||||
<p>
|
||||
Ready for mayhem? Burn your mailrooms to blow up a random boomer. <br /><br />
|
||||
If your bomb is live it will destroy a Boomer PFP forever. <br /><br />
|
||||
(Warning: Your Boomer might explode!)
|
||||
</p>
|
||||
<button className='doThing buttom'>mail a bomb</button>
|
||||
<p>(0 ETH)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue