Trial lobsters merge (#624)

UniverseXYZ · Sep 7, 2021 · c5e4fdb · c5e4fdb
1 parent 31787f7
commit c5e4fdb
Show file tree

Hide file tree

Showing 13 changed files with 162 additions and 89 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Contract, providers, utils } from 'ethers';
-import { Route, Switch, useLocation } from 'react-router-dom';
+import { Route, Switch, useLocation, useHistory } from 'react-router-dom';
 import axios from 'axios';
 import './assets/scss/normalize.scss';
 import uuid from 'react-uuid';
@@ -35,10 +35,11 @@ import LobsterInfoPage from './components/lobbyLobsters/info/LobstersInfoPage';
 
 const App = () => {
   const allCharactersFilter = 'All Characters';
-  const polymorphsFilter = 'My Polymorphs';
+  const polymorphsFilter = 'Polymorphs';
   const lobstersFilter = 'Lobby Lobsters';
 
   const location = useLocation();
+  const history = useHistory();
   const [isWalletConnected, setIsWalletConnected] = useState(false);
   const [loggedInArtist, setLoggedInArtist] = useState({
     id: uuid(),
@@ -303,6 +304,14 @@ const App = () => {
     if (providerName === CONNECTORS_NAMES.WalletConnect) connectWithWalletConnect();
   };
 
+  const navigateToMyNFTsPage = (characterFilter) => {
+    setCollectionFilter(characterFilter);
+    setMyUniverseNFTsActiverPage(0);
+    setMyUniverseNFTsOffset(0);
+
+    history.push('/my-nfts');
+  };
+
   useEffect(async () => {
     setUserLobsters([]);
     setUserPolymorphs([]);
@@ -458,6 +467,7 @@ const App = () => {
         polymorphsFilter,
         lobstersFilter,
         allCharactersFilter,
+        navigateToMyNFTsPage,
       }}
     >
       <Header />

diff --git a/src/components/header/dimensions/desktop/DesktopView.jsx b/src/components/header/dimensions/desktop/DesktopView.jsx
@@ -60,6 +60,8 @@ const DesktopView = ({
     setYourBalance,
     setUsdEthBalance,
     resetConnectionState,
+    navigateToMyNFTsPage,
+    allCharactersFilter,
   } = useContext(AppContext);
 
   return (
@@ -303,7 +305,7 @@ const DesktopView = ({
                 <button
                   type="button"
                   onClick={() => {
-                    history.push('/my-nfts');
+                    navigateToMyNFTsPage(allCharactersFilter);
                     setIsAccountDropdownOpened(false);
                   }}
                 >

diff --git a/src/components/header/dimensions/mobile/MobileView.jsx b/src/components/header/dimensions/mobile/MobileView.jsx
@@ -73,6 +73,8 @@ const MobileView = (props) => {
     setAddress,
     setYourBalance,
     setUsdEthBalance,
+    allCharactersFilter,
+    navigateToMyNFTsPage,
   } = useContext(AppContext);
 
   useEffect(() => {
@@ -176,7 +178,7 @@ const MobileView = (props) => {
                   <button
                     type="button"
                     onClick={() => {
-                      history.push('/my-nfts');
+                      navigateToMyNFTsPage(allCharactersFilter);
                       setIsAccountDropdownOpened(!isAccountDropdownOpened);
                     }}
                   >

diff --git a/src/components/header/dimensions/tablet/TabletView.jsx b/src/components/header/dimensions/tablet/TabletView.jsx
@@ -61,6 +61,8 @@ const TabletView = (props) => {
     setAddress,
     setYourBalance,
     setUsdEthBalance,
+    navigateToMyNFTsPage,
+    allCharactersFilter,
   } = useContext(AppContext);
 
   useEffect(() => {
@@ -164,7 +166,7 @@ const TabletView = (props) => {
                   <button
                     type="button"
                     onClick={() => {
-                      history.push('/my-nfts');
+                      navigateToMyNFTsPage(allCharactersFilter);
                       setIsAccountDropdownOpened(!isAccountDropdownOpened);
                     }}
                   >

diff --git a/src/components/lobbyLobsters/heroSection/HeroSection.jsx b/src/components/lobbyLobsters/heroSection/HeroSection.jsx
@@ -1,26 +1,38 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import './HeroSection.scss';
+import { useHistory } from 'react-router-dom';
 import FloatingNFTsAnimation from './animations/FloatingNFTsAnimation';
 import EndlessWaveAnimation from './animations/EndlessWaveAnimation';
+import AppContext from '../../../ContextAPI';
 
-const HeroSection = React.forwardRef((props, ref) => (
-  <div className="lobby--lobsters--hero--section">
-    <div className="wave--img">
-      <EndlessWaveAnimation />
-    </div>
-    <div className="hero--img">
-      <FloatingNFTsAnimation />
-    </div>
-    <div className="lobby--lobsters--hero--section--container">
-      <div className="left--section">
-        <h1>Lobby Lobsters</h1>
-        <p>They wear suits, so we don&#39;t have to.</p>
-        <button type="button" onClick={() => ref.current.scrollIntoView()}>
-          Mint Lobby Lobster
-        </button>
+const HeroSection = React.forwardRef((props, ref) => {
+  const history = useHistory();
+  const { navigateToMyNFTsPage, lobstersFilter } = useContext(AppContext);
+
+  return (
+    <div className="lobby--lobsters--hero--section">
+      <div className="wave--img">
+        <EndlessWaveAnimation />
+      </div>
+      <div className="hero--img">
+        <FloatingNFTsAnimation />
+      </div>
+      <div className="lobby--lobsters--hero--section--container">
+        <div className="left--section">
+          <h1>Lobby Lobsters</h1>
+          <p>They wear suits, so we don&#39;t have to.</p>
+          <button
+            type="button"
+            onClick={() => {
+              navigateToMyNFTsPage(lobstersFilter);
+            }}
+          >
+            My Lobby Lobsters
+          </button>
+        </div>
       </div>
     </div>
-  </div>
-));
+  );
+});
 
 export default HeroSection;
diff --git a/src/components/lobbyLobsters/mintSection/MintLobbyLobsterSection.jsx b/src/components/lobbyLobsters/mintSection/MintLobbyLobsterSection.jsx
@@ -112,6 +112,7 @@ const MintLobbyLobsterSection = React.forwardRef((props, ref) => {
             light={false}
             trailingZeros={1}
             mintAction={mintLobsters}
+            soldOut
           />
         </div>
       </div>

diff --git a/src/components/polymorphs/mint-polymorph/BondingCurve.jsx b/src/components/polymorphs/mint-polymorph/BondingCurve.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
 
 import HorizontalSlider from '../../ui-elements/HorizontalSlider';
 import Button from '../../button/Button.jsx';
@@ -9,6 +10,7 @@ import PriceETHIconBlack from '../../../assets/images/ethereum-black.svg';
 import backgroundTextLeft from '../../../assets/images/mint-polymorph-welcome-bg-left.png';
 import backgroundTextRight from '../../../assets/images/mint-polymorph-welcome-bg-right.png';
 import './styles/BondingCurve.scss';
+import AppContext from '../../../ContextAPI';
 
 const BondingCurve = (props) => {
   const {
@@ -28,61 +30,83 @@ const BondingCurve = (props) => {
     trailingZeros,
     mintAction,
     title,
+    soldOut,
   } = props;
-
+  const history = useHistory();
+  const { lobstersFilter, navigateToMyNFTsPage } = useContext(AppContext);
   return (
-    <div className="welcome--slider--bonding--curve">
+    <div className={`welcome--slider--bonding--curve ${soldOut ? 'sold--out' : ''}`}>
       {blur && <img src={backgroundTextLeft} alt="img" className="left--blur" />}
       {blur && <img src={backgroundTextRight} alt="img" className="right--blur" />}
       <div className="row1">
         <h5>{title}</h5>
       </div>
-      <HorizontalSlider max={max} value={value} min={min} color1={color1} color2={color2} />
-      <div className="row3--section">
-        <QuantityUpDownGroup
-          value={quantity}
-          onChange={setQuantity}
-          labelText="Quantity"
-          btnLeftText={<div className="down--quantity" />}
-          btnRightText={
-            <>
-              <div className="up--quantity--horizontal" />
-              <div className="up--quantity--vertical" />
-            </>
-          }
-        />
-        {!mobile && !light && (
-          <Button
-            className="light-button dark"
-            onClick={() => mintAction(quantity)}
-            disabled={value >= max}
-          >
-            Mint now
-          </Button>
-        )}
-        {!mobile && light && (
+      <HorizontalSlider
+        max={max}
+        value={value}
+        min={min}
+        color1={color1}
+        color2={color2}
+        soldOut={soldOut}
+      />
+      {!soldOut ? (
+        <div className="row3--section">
+          <QuantityUpDownGroup
+            value={quantity}
+            onChange={setQuantity}
+            labelText="Quantity"
+            btnLeftText={<div className="down--quantity" />}
+            btnRightText={
+              <>
+                <div className="up--quantity--horizontal" />
+                <div className="up--quantity--vertical" />
+              </>
+            }
+          />
+          {!soldOut && !mobile && !light && (
+            <Button
+              className="light-button dark"
+              onClick={() => mintAction(quantity)}
+              disabled={value >= max}
+            >
+              Mint now
+            </Button>
+          )}
+          {!soldOut && !mobile && light && (
+            <Button
+              className="light-button light"
+              onClick={() => mintAction(quantity)}
+              disabled={value >= max}
+            >
+              Mint now
+            </Button>
+          )}
+          <div className="price--block">
+            <p>
+              <span className="price--label">Price :</span>
+              <span>
+                <img
+                  alt="img"
+                  src={colorPriceIcon === 'white' ? PriceETHIconWhite : PriceETHIconBlack}
+                />
+                {(quantity * price).toFixed(trailingZeros)}
+              </span>
+            </p>
+          </div>
+        </div>
+      ) : (
+        <div className="row3--section--sold--out">
           <Button
-            className="light-button light"
-            onClick={() => mintAction(quantity)}
-            disabled={value >= max}
+            className={`light-button ${!mobile && !light ? 'dark' : 'light'}`}
+            onClick={() => {
+              navigateToMyNFTsPage(lobstersFilter);
+            }}
           >
-            Mint now
+            My Lobby Lobsters
           </Button>
-        )}
-        <div className="price--block">
-          <p>
-            <span className="price--label">Price :</span>
-            <span>
-              <img
-                alt="img"
-                src={colorPriceIcon === 'white' ? PriceETHIconWhite : PriceETHIconBlack}
-              />
-              {(quantity * price).toFixed(trailingZeros)}
-            </span>
-          </p>
         </div>
-      </div>
-      {!!mobile && !light && (
+      )}
+      {!soldOut && !!mobile && !light && (
         <Button
           className="light-button dark"
           onClick={() => mintAction(quantity)}
@@ -91,7 +115,7 @@ const BondingCurve = (props) => {
           Mint now
         </Button>
       )}
-      {!!mobile && light && (
+      {!soldOut && !!mobile && light && (
         <Button
           className="light-button light"
           onClick={() => mintAction(quantity)}
@@ -121,6 +145,7 @@ BondingCurve.propTypes = {
   trailingZeros: PropTypes.number.isRequired,
   mintAction: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired,
+  soldOut: PropTypes.bool,
 };
 
 BondingCurve.defaultProps = {
@@ -132,6 +157,7 @@ BondingCurve.defaultProps = {
   color2: 'black',
   mobile: false,
   blur: false,
+  soldOut: false,
 };
 
 export default BondingCurve;
diff --git a/src/components/polymorphs/mint-polymorph/styles/BondingCurve.scss b/src/components/polymorphs/mint-polymorph/styles/BondingCurve.scss
@@ -12,6 +12,15 @@
     position: relative;
     padding: 0 80px;
     overflow: hidden;
+    &.sold--out {
+        min-height: 295px!important;
+        @include sm {
+            min-height: 265px!important;
+        }
+        @media (max-width: 375px) {
+            min-height: 300px!important;
+        }
+    }
     @include lg {
         padding: 0 50px;
     }
@@ -173,10 +182,14 @@
             }
         }
     }
+    .row3--section--sold--out {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
     .light-button {
         position: relative;
         display: block;
-        width: 145px;
         height: 50px;
         box-shadow: 0px 10px 20px rgba(93, 247, 164, 0.2);
         @include sm {

diff --git a/src/components/polymorphs/scramble/LobsterTrait.jsx b/src/components/polymorphs/scramble/LobsterTrait.jsx
@@ -12,7 +12,7 @@ const LobsterTrait = ({ traitData }) => {
     const data = await queryLobstersGraph(lobsterTraitRarity(traitData.chance));
 
     if (data?.traits?.length) {
-      const rarityText = `${Math.round(data.traits[0]?.rarity, 10)}% have this trait`;
+      const rarityText = `${parseFloat(data.traits[0]?.rarity).toFixed(2)}% have this trait`;
       setRarity(rarityText);
     }
   };

diff --git a/src/components/popups/PolymorphScrambleCongratulationPopup.jsx b/src/components/popups/PolymorphScrambleCongratulationPopup.jsx
@@ -10,6 +10,7 @@ import person from '../../assets/images/randomise-person-images/person.png';
 const PolymorphScrambleCongratulationPopup = ({ onClose, onOpenOptionsPopUp, polymorph }) => {
   // const { selectedNftForScramble, setSelectedNftForScramble } = useContext(AppContext);
   const history = useHistory();
+  const { polymorphsFilter, navigateToMyNFTsPage } = useContext(AppContext);
 
   return (
     <div className="polymorph_popup">
@@ -20,8 +21,13 @@ const PolymorphScrambleCongratulationPopup = ({ onClose, onOpenOptionsPopUp, pol
         <img src={polymorph?.data?.image} alt="soldier" key={uuid()} />
       </div>
       <div className="button__div_polymorph">
-        <Button className="light-button" onClick={() => history.push('/my-nfts')}>
-          My polymorphs
+        <Button
+          className="light-button"
+          onClick={() => {
+            navigateToMyNFTsPage(polymorphsFilter);
+          }}
+        >
+          My Polymorphs
         </Button>
         <Button
           className="light-border-button"
-Original file line number
+Diff line change
@@ Expand Up @@
                 light={false}
                 trailingZeros={1}
                 mintAction={mintLobsters}
+                soldOut
               />
             </div>
           </div>
@@ Expand Down @@