diff --git a/src/img/seizeditems.png b/src/img/seizeditems.png
new file mode 100644
index 0000000..f71805c
Binary files /dev/null and b/src/img/seizeditems.png differ
diff --git a/src/index.js b/src/index.js
index 090ea08..39e3ea1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,7 +13,7 @@ import { publicProvider } from 'wagmi/providers/public';
import { ParallaxProvider } from 'react-scroll-parallax';
import { Wallet } from "./Wallet";
-import { Section1, Section2, Section3 } from './template/Sections';
+import { AllSections } from './template/Sections';
const { chains, provider, webSocketProvider } = configureChains(
@@ -39,9 +39,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
diff --git a/src/styles/sections.css b/src/styles/sections.css
index bd63158..e78ffd3 100644
--- a/src/styles/sections.css
+++ b/src/styles/sections.css
@@ -1,6 +1,6 @@
-/* #root {
+#root {
height: 100vh;
-} */
+}
.section {
height: 100vh;
@@ -8,12 +8,6 @@
/* scroll-snap-align: start; */
}
-.sec2Text {
- width: 75%;
- margin: 0 auto;
- padding-bottom: 1em;
-}
-
.subtext {
font-size: .8em;
}
@@ -25,9 +19,9 @@
}
#heroText {
- padding-top: 20vh;
+ padding-top: 12vh;
font-size: 4em;
- width: 75%;
+ width: 80%;
text-align: center;
margin: 0 auto;
}
@@ -38,6 +32,10 @@
animation: fadeIn 4s ease-in;
}
+.fadeIn {
+ animation: fadeIn 6s ease-in;
+}
+
@keyframes fadeIn {
0% { opacity: 0 }
25% { opacity: .05 }
@@ -46,6 +44,11 @@
100% { opacity: 1 }
}
+.slider {
+ width: 80%;
+ margin: 0 auto;
+}
+
.mintContainer {
padding-top: 6em;
margin: 2em auto;
diff --git a/src/template/Sections.jsx b/src/template/Sections.jsx
index 63a1ca4..1f0c7a2 100644
--- a/src/template/Sections.jsx
+++ b/src/template/Sections.jsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { BigNumber, ethers } from 'ethers';
import Typewriter from 'react-ts-typewriter';
import Slider from 'rc-slider';
import { Parallax } from 'react-parallax';
@@ -8,6 +9,7 @@ import Boomer from '../img/unaboomer.png';
import Newspapers from '../img/newspapers.png';
import Bomb from '../img/bomb.png';
import Explosion from '../img/explosion.png';
+import SeizedItems from '../img/seizeditems.png';
import 'rc-slider/assets/index.css';
import '../styles/sections.css';
@@ -32,7 +34,6 @@ export class Section1 extends React.Component {
-
)
}
@@ -40,15 +41,26 @@ export class Section1 extends React.Component {
export function Section2() {
return (
-
-
-
+
)
}
export function Section3() {
+ const [boomerAmount, setBoomerAmount] = useState(1);
+ const [bombAmount, setBombAmount] = useState(1);
+ const [sendBombAmount, setSendBombAmount] = useState(1);
+ const price = ethers.utils.parseEther('.01');
+
+ console.log(bombAmount)
return (
-
+
Radicalize a Boomer
@@ -56,22 +68,28 @@ export function Section3() {
- mint (1 eth)
+ mint {boomerAmount} ({ethers.utils.formatEther((price * boomerAmount).toString())} Ξ)
-
+
setBoomerAmount(v)} />
Assemble Bombs
-
Assembling bombs will mint ERC-1155 BOMB tokens with an image of a pixel art bomb - you can send to other Unaboomers to kill them.
+
Assembling bombs will mint ERC-1155 BOMB tokens with an image of a pixel art bomb - send to other Unaboomers to kill them.
- mint (1 eth)
+ mint {bombAmount} ({ethers.utils.formatEther((price * bombAmount).toString())} Ξ)
-
+
setBombAmount(v)} />
Send Bombs
@@ -79,16 +97,29 @@ export function Section3() {
- mint (1 eth)
+ send {sendBombAmount} (~0 Ξ)
-
+
setSendBombAmount(v)} />
)
}
+export function AllSections() {
+ return (
+ <>
+
+
+
+ >
+ )
+}
+
// export function Panel({ opacity, panelText, mintButtonText }) {
// const { isConnected } = useAccount();
// const { config } = usePrepareSendTransaction({