ethshit
/
unaboomer-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improvements to ux

Browse Source
master
lza_menace 2 years ago
parent c7c236be81
commit 582120fc4b
5 changed files with 66 additions and 34 deletions
Show Stats Download Patch File Download Diff File

63
src/components/Hero.jsx
Unescape Escape View File

@ -14,6 +14,7 @@ import Explosion from '../img/explosion.png';
import Arrow from '../img/arrow_right.png';
import LZA from '../img/lza_menace.png';
import Carty from '../img/cartyisme.png';
import Loading from '../img/loading.svg';
export function Hero(props) {
@ -51,7 +52,6 @@ export function Hero(props) {
unaboomerMaxSupply: 0,
unaboomerMaxSurvivorCount: 0,
unaboomerMaxMintPerWallet: 0,
readWTF: false,
balancesFetched: false,
unaboomersByAddress: []
});
@ -172,6 +172,10 @@ export function Hero(props) {
...assembleBombsPrepare.config,
onError(data) {
if (data.message.startsWith('user rejected transaction')) NotificationManager.info(`tx cancelled`, 'ok', 4000);
},
onSuccess(data) {
NotificationManager.success(`Bombs acquired. Let's kill some Boomers.`, '', 3000);
assembleBombsWrite.reset();
}
});
const sendBombsPrepare = usePrepareContractWrite({
@ -203,7 +207,7 @@ export function Hero(props) {
tm.push(Number(res.tokenId));
});
setTokensMinted(JSON.stringify(tm));
console.log(tm);
radicalizeBoomersWrite.reset();
}
})
useWaitForTransaction({
@ -217,14 +221,15 @@ export function Hero(props) {
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);
NotificationManager.error(`Your bomb exploded during assembly and killed your Unaboomer ${res.tokenId.toString()}`, '', 5000);
} else {
NotificationManager.success(`Your bomb killed Unaboomer ${res.tokenId.toString()}`, '', 8000);
NotificationManager.success(`Your bomb killed Unaboomer ${res.tokenId.toString()}`, '', 5000);
}
} else {
NotificationManager.warning(`Your bomb for Unaboomer ${res.tokenId.toString()} was a dud`, '', 8000);
NotificationManager.warning(`Your bomb for Unaboomer ${res.tokenId.toString()} was a dud`, '', 5000);
}
});
sendBombsWrite.reset();
}
});
@ -235,7 +240,7 @@ export function Hero(props) {
<p id='heroText'>
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 ? options.unaboomerMaxSupply: '35,000'} Boomers have joined forces
They've begun to radicalize. {options.unaboomerMaxSupply > 0 ? options.unaboomerMaxSupply: '7,896'} Boomers have joined forces
to lash out at the system.<br /><br />
</p>
<div id='heroFlex'>
@ -265,7 +270,7 @@ export function Hero(props) {
<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.isSuccess && <img src={Loading} width="25px"></img>}
{radicalizeBoomersWrite.isError && <>error</>}
</button>
<p>({ethers.utils.formatEther((options.unaboomerPrice * options.unaboomerAmount).toString())} ETH)</p>
@ -302,7 +307,7 @@ export function Hero(props) {
<button className='doThing' disabled={assembleBombsPrepare.status == 'error'} onClick={() => assembleBombsWrite.write?.()}>
{assembleBombsWrite.isLoading && <>assembling {options.bombAmount}</>}
{assembleBombsWrite.isIdle && <>Assemble {options.bombAmount == 1 ? 'a Mailbomb': <>{options.bombAmount} Mailbombs</>}</>}
{assembleBombsWrite.isSuccess && <>sent</>}
{assembleBombsWrite.isSuccess && <img src={Loading} width="25px"></img>}
{assembleBombsWrite.isError && <>error</>}
</button>
<p>({ethers.utils.formatEther((options.bombPrice * options.bombAmount).toString())} ETH)</p>
@ -331,7 +336,7 @@ export function Hero(props) {
<button className='doThing' disabled={sendBombsPrepare.status == 'error'} onClick={() => sendBombsWrite.write?.()}>
{sendBombsWrite.isLoading && <>mailing {options.sendBombAmount}</>}
{sendBombsWrite.isIdle && <>Mail {options.sendBombAmount == 1 ? 'a bomb': <>{options.sendBombAmount} Mailbombs</>}</>}
{sendBombsWrite.isSuccess && <>sent</>}
{sendBombsWrite.isSuccess && <img src={Loading} width="25px"></img>}
{sendBombsWrite.isError && <>error</>}
</button>
<p>(tx fee)</p>
@ -340,10 +345,27 @@ export function Hero(props) {
}
</div>
</div>
<div id="userInventory">
{isConnected && JSON.parse(tokensMinted).length > 0 && (
<>
<h1>Your Unaboomers</h1>
<div className="ownedTokens">
{JSON.parse(tokensMinted).filter((item, index) => JSON.parse(tokensMinted).indexOf(item) === index).map((id, idx) => (
<div className="ownedToken" key={idx}>
<a href={'http://unaboomer-images.s3-website-us-west-2.amazonaws.com/' + String(id).padStart(5, '0') + '.png'} target='_blank'>
<img src={'http://unaboomer-images.s3-website-us-west-2.amazonaws.com/' + String(id).padStart(5, '0') + '.png'} width="80px" />
</a>
</div>
)
)}
</div>
</>
)}
</div>
<div id="mintInfo" className="section">
<h1>WTF!?</h1>
<p>
UNABOOMER is a deflationary Player vs. Player PFP NFT. 35,000 pixel Boomers, with 190 unique traits will go free-to-radicalize.
UNABOOMER is a deflationary Player vs. Player PFP NFT consisting of 7,896 pixel Boomers with 190 unique traits.
</p>
<p>
Assemble a mailbomb and burn it to destroy a random Boomer in the collection. Destroyed Boomers will explode, lose their traits, and be burned. Mailbomb assembly is open to all.
@ -352,7 +374,7 @@ export function Hero(props) {
But be careful! Your Boomer can blow itself up in the process. The more Boomers destroyed, the more likely your bomb is a dud.
</p>
<p>
This is only the beginning...
The round will end when 1,995 players remain standing...
</p>
</div>
<div id="teamInfo" className="section">
@ -366,27 +388,10 @@ export function Hero(props) {
<div className='teamMember'>
<img src={LZA} width='180px' alt='lza_menace Milady PFP' />
<a href='https://twitter.com/lza_menace' target='_blank' className=''>@lza_menace</a>
<p>Solidity dude, Monero fan, and meme consooomer.</p>
<p>Coder, loser, Monero fan, and meme consooomer.</p>
</div>
</div>
</div>
<div id="userInventory">
{isConnected && JSON.parse(tokensMinted).length > 0 && (
<>
<h1>Your Unaboomers</h1>
<div className="ownedTokens">
{JSON.parse(tokensMinted).filter((item, index) => JSON.parse(tokensMinted).indexOf(item) === index).map((id, idx) => (
<div className="ownedToken" key={idx}>
<a href={'http://unaboomer-images.s3-website-us-west-2.amazonaws.com/' + String(id).padStart(5, '0') + '.png'} target='_blank'>
<img src={'http://unaboomer-images.s3-website-us-west-2.amazonaws.com/' + String(id).padStart(5, '0') + '.png'} width="80px" />
</a>
</div>
)
)}
</div>
</>
)}
</div>
{isConnected && address && (
<>
<StatsPanel

2
src/components/Panels.jsx
Unescape Escape View File

@ -126,7 +126,7 @@ export function TrollboxPanel(props) {
<li key={idx} className="messageLine">
<span className="fromAddress nopad">
<a href={"https://etherscan.io/address/" + message.from} target="_blank">
{message.from.slice(-6)}
{message.from.slice(-4)}
</a>
:</span>
<span className="messageText">{message.message}</span>

22
src/img/loading.svg
Unescape Escape View File

@ -0,0 +1,22 @@
<svg version="1.1" id="L2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<circle fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48"/>
<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5">
<animateTransform
attributeName="transform"
dur="2s"
type="rotate"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite" />
</line>
<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74">
<animateTransform
attributeName="transform"
dur="15s"
type="rotate"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite" />
</line>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 927 B

8
src/index.js
Unescape Escape View File

@ -18,7 +18,7 @@ import { Footer } from "./components/Footer";
const { chains, provider, webSocketProvider } = configureChains(
[mainnet, goerli, localhost],
[
// infuraProvider({ apiKey: 'e7674eea9d72437d9129b41ed018183d' }),
infuraProvider({ apiKey: 'e7674eea9d72437d9129b41ed018183d' }),
publicProvider()
]
);
@ -29,7 +29,7 @@ const { connectors } = getDefaultWallets({
});
const wagmiClient = createClient({
autoConnect: true,
autoConnect: false,
connectors,
provider,
webSocketProvider
@ -37,10 +37,10 @@ const wagmiClient = createClient({
ReactDOM.createRoot(document.getElementById("root")).render(
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider chains={chains} initialChain={5}>
<RainbowKitProvider chains={chains} initialChain={1337}>
<Navbar />
<Hero
contractAddress={'0xe19cd4bb795de9d2424498b12689761d43482137'}
contractAddress={'0x5FbDB2315678afecb367f032d93F642f64180aa3'}
ws={'wss://lzahq.tech/ws'}
/>
<Footer />

5
src/styles/hero.css
Unescape Escape View File

@ -47,6 +47,11 @@
margin: 2em auto;
}
.heroFlexItem input {
width: 60px;
height: 40px;
}
@media (min-width: 1200px) {
#heroFlex {
display: flex;

Write Preview
Loading…
Cancel
Save