realtime ux

master
lza_menace 2 years ago
parent 98dc0d076f
commit df8fdee967

85
package-lock.json generated

@ -16,6 +16,7 @@
"react": "^18.2.0",
"react-awesome-button": "^7.0.4",
"react-dom": "^18.2.0",
"react-notifications": "^1.7.4",
"react-parallax": "^3.5.1",
"react-scripts": "5.0.1",
"react-scroll": "^1.8.9",
@ -10868,6 +10869,15 @@
"utila": "~0.4"
}
},
"node_modules/dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"dependencies": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"node_modules/dom-serializer": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@ -21744,6 +21754,28 @@
"integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==",
"peer": true
},
"node_modules/react-notifications": {
"version": "1.7.4",
"resolved": "https://registry.npmjs.org/react-notifications/-/react-notifications-1.7.4.tgz",
"integrity": "sha512-dsR7mUQfe8YdFLqVsjT0GFd4n26UWkzefdjMELfEVygjuuyU6ZZ0LpZhFHdfmraGeBFLWHNxygpGlHHituUyjQ==",
"dependencies": {
"acorn": "6.4.1",
"classnames": "^2.1.1",
"prop-types": "^15.5.10",
"react-transition-group": "^4.4.1"
}
},
"node_modules/react-notifications/node_modules/acorn": {
"version": "6.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
"integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
"bin": {
"acorn": "bin/acorn"
},
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/react-parallax": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/react-parallax/-/react-parallax-3.5.1.tgz",
@ -21941,6 +21973,21 @@
}
}
},
"node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
"dependencies": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
},
"peerDependencies": {
"react": ">=16.6.0",
"react-dom": ">=16.6.0"
}
},
"node_modules/react-ts-typewriter": {
"version": "0.1.8-b",
"resolved": "https://registry.npmjs.org/react-ts-typewriter/-/react-ts-typewriter-0.1.8-b.tgz",
@ -33674,6 +33721,15 @@
"utila": "~0.4"
}
},
"dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"requires": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"dom-serializer": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@ -41671,6 +41727,24 @@
"integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==",
"peer": true
},
"react-notifications": {
"version": "1.7.4",
"resolved": "https://registry.npmjs.org/react-notifications/-/react-notifications-1.7.4.tgz",
"integrity": "sha512-dsR7mUQfe8YdFLqVsjT0GFd4n26UWkzefdjMELfEVygjuuyU6ZZ0LpZhFHdfmraGeBFLWHNxygpGlHHituUyjQ==",
"requires": {
"acorn": "6.4.1",
"classnames": "^2.1.1",
"prop-types": "^15.5.10",
"react-transition-group": "^4.4.1"
},
"dependencies": {
"acorn": {
"version": "6.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
"integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA=="
}
}
},
"react-parallax": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/react-parallax/-/react-parallax-3.5.1.tgz",
@ -41795,6 +41869,17 @@
"tslib": "^2.0.0"
}
},
"react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
"requires": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
}
},
"react-ts-typewriter": {
"version": "0.1.8-b",
"resolved": "https://registry.npmjs.org/react-ts-typewriter/-/react-ts-typewriter-0.1.8-b.tgz",

@ -13,6 +13,7 @@
"react": "^18.2.0",
"react-awesome-button": "^7.0.4",
"react-dom": "^18.2.0",
"react-notifications": "^1.7.4",
"react-parallax": "^3.5.1",
"react-scripts": "5.0.1",
"react-scroll": "^1.8.9",

@ -23,6 +23,37 @@
"name": "OwnershipTransferred",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "from",
"type": "address"
},
{
"indexed": true,
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
},
{
"indexed": false,
"internalType": "bool",
"name": "hit",
"type": "bool"
},
{
"indexed": false,
"internalType": "bool",
"name": "owned",
"type": "bool"
}
],
"name": "SentBomb",
"type": "event"
},
{
"inputs": [
{
@ -142,18 +173,7 @@
}
],
"name": "sendBombs",
"outputs": [
{
"internalType": "bool[]",
"name": "results",
"type": "bool[]"
},
{
"internalType": "uint256[]",
"name": "tokensKilled",
"type": "uint256[]"
}
],
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},

@ -1,11 +1,11 @@
import React, { useState } from 'react';
import { ethers, BigNumber } from 'ethers';
import { useAccount, useContractReads, usePrepareContractWrite, useContractWrite, useTransaction } from 'wagmi';
import { useAccount, useContractReads, usePrepareContractWrite, useContractWrite, useWaitForTransaction } from 'wagmi';
import Typewriter from 'react-ts-typewriter';
import Slider from 'rc-slider';
import { Parallax } from 'react-parallax';
import { animateScroll as scroll } from 'react-scroll'
import { NotificationContainer, NotificationManager } from 'react-notifications';
import { AwesomeButton } from 'react-awesome-button';
import Boomer from '../img/unaboomer.png';
@ -16,6 +16,7 @@ import SeizedItems from '../img/seizeditems.png';
import Map from '../img/map.png';
import MainABI from '../abi/main.json';
import 'react-notifications/lib/notifications.css';
import 'rc-slider/assets/index.css';
import '../styles/sections.css';
@ -48,8 +49,8 @@ export class Section1 extends React.Component {
<h1 id="heroText">
<Typewriter text={this.state.title} cursor={true} random={20} />
</h1>
<img src={Boomer} id="heroImage" className={this.state.showImage || "hidden"} alt="Pixelated police sketch of the Unabomber suspect." />
<div className={this.state.showImage || "hidden" }>
<img src={Boomer} id="heroImage" className={!this.state.showImage ? "hidden": "" } alt="Pixelated police sketch of the Unabomber suspect." />
<div className={!this.state.showImage ? "hidden": "" }>
<AwesomeButton type="secondary" ripple={true} onPress={() => scroll.scrollTo(window.scrollMaxY - '450', {duration: 5000})} className="fadeIn">
continue
</AwesomeButton>
@ -242,7 +243,7 @@ function Section3() {
}
],
watch: true,
cacheTime: 5,
cacheTime: 5000,
onSuccess(data) {
handleStateChange({
unaboomerPrice: data[0].toString(),
@ -283,22 +284,34 @@ function Section3() {
const sendBombsPrepare = usePrepareContractWrite({
address: contractAddress,
abi: MainABI,
enabled: isConnected,
enabled: isConnected && options.bombBalance > 0,
functionName: 'sendBombs',
args: [options.sendBombAmount]
});
const sendBombsWrite = useContractWrite(sendBombsPrepare.config);
const { data: tx } = useTransaction({ ...sendBombsWrite.data, enabled: sendBombsWrite.isSuccess });
if (tx) {
// let r;
useWaitForTransaction({
hash: sendBombsWrite.data?.hash,
enabled: sendBombsWrite.isSuccess,
onSuccess(data) {
const iface = new ethers.utils.Interface(MainABI);
console.log(tx)
// let txRes = iface.decodeFunctionResult("sendBombs", tx.data);
// console.log(txRes)
// const {0: results, 1: tokensKilled} = txRes.functionFragment.outputs;
// console.log(results);
// console.log(tokensKilled);
data.logs.filter(log =>
log.topics[0] === '0x38c7e2e8001cefb27535bd6bcc6363c6d6a6a83dbb77f092b78956334596f9ed'
).map((log) => {
const res = iface.decodeEventLog("SentBomb", log.data, log.topics);
console.log(res);
if (res.hit) {
if (res.owned) {
NotificationManager.error(`Your bomb exploded during assembly and killed your Unaboomer ${res.tokenId.toString()}`, 'oof', 10000);
} else {
NotificationManager.success(`Your bomb killed Unaboomer ${res.tokenId.toString()}`, 'Got em!', 10000);
}
} else {
NotificationManager.warning(`Your bomb for Unaboomer ${res.tokenId.toString()} was a dud`, 'oof', 10000);
}
})
}
});
return (
<section className="section" id="mintSection">
{isConnected &&
@ -341,6 +354,7 @@ function Section3() {
<Slider className="slider" min={1} max={30} onChange={(v) => handleStateChange({sendBombAmount: v})} />
</div>
</div>
<NotificationContainer/>
<GameMap
bombSupply={options.bombSupply}
bombBalance={options.bombBalance}

Loading…
Cancel
Save