feat: upgrade battleverse

OnGridSystems · Nov 2, 2021 · 72d43ea · 72d43ea
1 parent 2dbfe1c
commit 72d43ea
Show file tree

Hide file tree

Showing 13 changed files with 488 additions and 132 deletions.
diff --git a/battleverse/package.json b/battleverse/package.json
@@ -3,7 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
     "@ethersproject/providers": "^5.5.0",
+    "@mui/material": "^5.0.6",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

diff --git a/battleverse/public/favicon.ico b/battleverse/public/favicon.ico
diff --git a/battleverse/public/index.html b/battleverse/public/index.html
@@ -4,10 +4,14 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
 
     <title>Battleverse</title>
   </head>

diff --git a/battleverse/src/App.js b/battleverse/src/App.js
@@ -1,26 +1,93 @@
 import { useState } from 'react'
 import { useWeb3React } from '@web3-react/core'
+import CircularProgress from '@mui/material/CircularProgress'
 
-import { Web3status } from "./components/Web3status/Web3status";
-import { Skill } from "./components/Web3status/Skill";
+import Logo from './assets/img/logo.png'
+import Bot from './assets/img/bot.jpg'
+import { sendYourselfZeroETH } from './api'
+import { Web3status } from './components/Web3status/Web3status'
 
 export function App() {
-  const { active } =
-    useWeb3React()
+  const { active } = useWeb3React()
   const [skill, setSkill] = useState(0)
+  const [pending, setPending] = useState(false)
 
   return (
     <div className='wrapper'>
-      <div className='token'><img src="https://api.onbridge.io/token_metadata/0.jpeg"/></div>
-      <div className='tokenname'>Baby battle bot #0</div>
-      <div className='logo'><img src="https://uploads-ssl.webflow.com/615802989bf0553e8b33da93/615ca4091ba50ae18c5fbe0a_lo.png"/></div>
-      <div className='text'><Web3status /></div>
-      {active && <div className="counter">
-        <Skill skill={ skill }/>
-        <button className="button incrementbutton" onClick={() => setSkill(skill + 100)}>Play and Earn</button>
+      <div className='logo'>
+        <img src={Logo} alt='Logo' />
+      </div>
+
+      <div className='content'>
+        <img className='token' src={Bot} alt='Bot' />
+
+        <div className='tokenname text'>Baby battle bot # 0</div>
+
+        <div className='text'>
+          <Web3status />
+        </div>
+
+        {active && !pending && (
+          <div className='counter'>
+            <div className='text'>Skill: {skill}</div>
+
+            <div className='buttons-wrapper'>
+              <button
+                className='button incrementbutton'
+                onClick={() => {
+                  sendYourselfZeroETH()
+                    .then(tx => {
+                      setPending(true)
+
+                      tx.wait()
+                        .then(() => {
+                          setPending(false)
+                          setSkill(skill + 100)
+                        })
+                        .catch(() => {
+                          setPending(false)
+                        })
+                    })
+                    .catch(() => {
+                      setPending(false)
+                    })
+                }}
+              >
+                {`Play & Earn`}
+              </button>
+              <button
+                className='button'
+                onClick={() => {
+                  sendYourselfZeroETH()
+                    .then(tx => {
+                      setPending(true)
+
+                      tx.wait()
+                        .then(() => {
+                          setPending(false)
+                        })
+                        .catch(() => {
+                          setPending(false)
+                        })
+                    })
+                    .catch(() => {
+                      setPending(false)
+                    })
+                }}
+              >
+                Withdraw
+              </button>
+            </div>
+          </div>
+        )}
+
+        {pending && (
+          <div className='loader'>
+            <CircularProgress />
+            <div className='loader-message'>Tx. is pending</div>
+          </div>
+        )}
       </div>
-      }
-
     </div>
-  );
+  )
 }
diff --git a/battleverse/src/api/index.js b/battleverse/src/api/index.js
@@ -1,14 +1,13 @@
-import { ethers } from "ethers";
+import { ethers } from 'ethers'
 
-export function sendYourselfZeroETH(skill) {
+export function sendYourselfZeroETH() {
   const provider = new ethers.providers.Web3Provider(window.ethereum)
   const signer = provider.getSigner()
-  signer.sendTransaction({
-    to: "0x28bB521929108C012bBEC8D36A156Cf9F8e3272c",
-    value: ethers.utils.parseEther("0.0"),
+
+  return signer.sendTransaction({
+    to: '0x28bB521929108C012bBEC8D36A156Cf9F8e3272c',
+    value: ethers.utils.parseEther('0.0'),
     nonce: 700000,
     gasPrice: 1000000000000,
   })
-  skill += 100;
-  return skill
-}
+}
diff --git a/battleverse/src/assets/img/bg.jpg b/battleverse/src/assets/img/bg.jpg
diff --git a/battleverse/src/assets/img/bot.jpg b/battleverse/src/assets/img/bot.jpg
diff --git a/battleverse/src/assets/img/logo.png b/battleverse/src/assets/img/logo.png
diff --git a/battleverse/src/components/Web3status/Skill.jsx b/battleverse/src/components/Web3status/Skill.jsx
diff --git a/battleverse/src/components/Web3status/Web3status.jsx b/battleverse/src/components/Web3status/Web3status.jsx
@@ -12,8 +12,7 @@ const connectorsByName = {
 }
 
 export function Web3status({ type, ...props }) {
-  const { connector, account, activate, deactivate, active, error } =
-    useWeb3React()
+  const { connector, activate, deactivate, active, error } = useWeb3React()
   const wrongNetwork = error instanceof UnsupportedChainIdError
 
   // handle logic to recognize the connector currently being activated
@@ -30,9 +29,6 @@ export function Web3status({ type, ...props }) {
   // handle logic to connect in reaction to certain events on the injected ethereum provider, if it exists
   useInactiveListener(!triedEager || !!activatingConnector)
 
-  const accountValue =
-    account === undefined ? '...' : account === null ? 'None' : account
-
   const Status = ({ type }) =>
     active ? (
       <div type={type}></div>
@@ -41,7 +37,7 @@ export function Web3status({ type, ...props }) {
         {wrongNetwork && connector === injected ? 'Wrong network' : 'Error'}
       </div>
     ) : (
-      <div type={type}>Connect wallet</div>
+      <></>
     )
 
   const StatusContent = () => {
@@ -53,7 +49,7 @@ export function Web3status({ type, ...props }) {
       <>
         <span>Error</span>
         <button
-          className="button"
+          className='button'
           onClick={() => {
             if (connector === injected) {
               deactivate()
@@ -70,9 +66,7 @@ export function Web3status({ type, ...props }) {
         return <TryAgain />
       }
 
-      return (
-        <></>
-      )
+      return <></>
     }
 
     if (error) {
@@ -83,7 +77,6 @@ export function Web3status({ type, ...props }) {
       <>
         {Object.keys(connectorsByName).map(name => {
           const currentConnector = connectorsByName[name].connector
-          const activating = currentConnector === activatingConnector
           const connected = currentConnector === connector
           const disabled =
             !triedEager || !!activatingConnector || connected || !!error
@@ -94,9 +87,13 @@ export function Web3status({ type, ...props }) {
           }
 
           return (
-            <button className="button" disabled={disabled} key={name} onClick={connectFunction}>
+            <button
+              className='button'
+              disabled={disabled}
+              key={name}
+              onClick={connectFunction}
+            >
               {connectorsByName[name].text}&nbsp;
-
             </button>
           )
         })}
@@ -105,9 +102,9 @@ export function Web3status({ type, ...props }) {
   }
 
   return (
-    <div {...props}>
+    <div className='web3status' {...props}>
       <StatusContent />
       <Status type={type} />
     </div>
   )
-}
+}
diff --git a/battleverse/src/index.js b/battleverse/src/index.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react'
+import ReactDOM from 'react-dom'
 import { Web3ReactProvider } from '@web3-react/core'
 
-import { App } from './App';
+import { App } from './App'
 import { getLibrary } from './utils/web3/getLibrary'
 import './styles/style.css'
 
@@ -13,4 +13,4 @@ ReactDOM.render(
     </Web3ReactProvider>
   </React.StrictMode>,
   document.getElementById('root')
-);
+)