Multiple bid change

romandev0318 · Apr 14, 2022 · 9d32ae3 · 9d32ae3
1 parent 077e773
commit 9d32ae3
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 4 deletions.
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -6,6 +6,7 @@ import { MenuButton } from 'theme'
 import styled from 'styled-components'
 import { useLocation } from 'react-router-dom'
 import { useActiveWeb3React } from 'hooks'
+import { endTime } from 'constants/map'
 
 const LogoText = styled.div`
     letter-spacing: 0.15em;
@@ -42,10 +43,24 @@ const SubLogoText = styled.span`
     }
 `
 
+const TimerWrapper = styled.div`
+    background: linear-gradient(270deg, rgba(31, 31, 50, 0.4) 0%, rgba(31, 32, 49, 0.4) 34.37%);
+    border: 2px solid #FFFFFF;
+    box-sizing: border-box;
+    border-radius: 22px;
+
+    font-size: 18px;
+    line-height: 27px;
+    color: white;
+    padding: 0.3rem 1rem;
+`
+
 export default function Header(): JSX.Element {
     const { account } = useActiveWeb3React()
     const [active, setActive] = useState('active')
     const [lastScroll, setLastScroll] = useState(0)
+    const [currentTime, setCurrentTime] = useState({}) as any
+    const [isFirst, setIsFirst] = useState(true)
 
     const { pathname } = useLocation()
 
@@ -63,12 +78,36 @@ export default function Header(): JSX.Element {
 
     useEffect(() => {
         window.addEventListener('scroll', handleScroll)
-
         return () => {
             window.removeEventListener('scroll', handleScroll)
         }
     })
 
+    useEffect(() => {
+        if( isFirst ) {
+            setIsFirst(false)
+            setInterval(() => {
+                getRemainingTime()
+            }, 500)
+        }
+    })
+
+    const getRemainingTime = () => {
+        const info = {} as any
+
+        let diffTime = (endTime - new Date().getTime()) / 1000
+
+        info.days = Math.floor( diffTime / (24 * 60 * 60) )
+        diffTime = diffTime % (24 * 60 * 60)
+        info.hours = Math.floor( diffTime / (60 * 60) )
+        diffTime = diffTime % (60 * 60)
+        info.minutes = Math.floor( diffTime / 60 )
+        diffTime = diffTime % (60)
+        info.seconds = Math.floor( diffTime )
+
+        setCurrentTime(info)
+    }
+
     return (
         <Disclosure as="nav" className={`w-screen z-50 header-wrapper ${ active }`}>
             <div style={{padding: "0.5rem",background: "transparent", border:"none"}} className="header container relative">
@@ -81,6 +120,14 @@ export default function Header(): JSX.Element {
                         </NavLink>
                     </div>
 
+                    { isOnMapPage() ? (
+                        <div>
+                            <TimerWrapper>
+                                <b>Bid Event Countdown: </b> {`${currentTime.days} days, ${currentTime.hours}h, ${currentTime.minutes}m, ${currentTime.seconds}s`}
+                            </TimerWrapper>
+                        </div>
+                    ): null }
+
                     <div className="flex items-center">
                         <NavLink exact strict to="/map" className={''}>
                             <MenuButton disabled={false} className={`font-bold ${ isOnMapPage() || !account ? 'hidden' : '' }`}>

diff --git a/src/components/Map/bidMultiModal.tsx b/src/components/Map/bidMultiModal.tsx
@@ -6,7 +6,7 @@ import { NormalButton } from 'theme'
 import confirmIcon from '../../assets/images/map/confirmIcon.svg'
 import { useWeb3React } from '@web3-react/core'
 import { useETHBalances } from 'state/wallet/hooks'
-import { formatFromBalance, shortenDouble } from 'utils'
+import { formatFromBalance, formatToBalance, shortenDouble } from 'utils'
 import useShiberseLandAuction from 'hooks/useShiberseLandAuction'
 import { useIsTransactionPending } from 'state/transactions/hooks'
 import ShiberseLoader from 'components/Loader/loader'
@@ -159,8 +159,9 @@ export const BidMultiModal = (props: any) => {
                     const price = await fetchLandPrice({ x: props.selectedInfo[i].coordinates.x, y: props.selectedInfo[i].coordinates.y })
                     totalPrice += Number( formatFromBalance(price, 18) )
 
-                    pArray.push(price)
+                    pArray.push( formatToBalance( (Number( formatFromBalance(price, 18) ) + 0.00001).toString() ).value )
                 }
+
                 totalPrice += 0.00001
 
                 setBidPrice(totalPrice)

diff --git a/src/constants/map/index.ts b/src/constants/map/index.ts
@@ -26,7 +26,7 @@ export const stageProps = {
 }
 
 export const zoomRange = {
-    min: 10,
+    min: 5,
     max: 80,
 }
 
@@ -103,6 +103,8 @@ export const DarkRoadColors = {
 export const mapLandDataUrl = 'https://shiboshis.mypinata.cloud/ipfs/QmQW8ySF6tuCjQ7856vMpJHdYs4JZKKbS4zyiKDewLbpw8';
     // 'https://shiboshis.mypinata.cloud/ipfs/QmZ1U5PV21F3VzTw7791epzVmQ3RpeFbVhMQyZrZhDatVw'
 
+export const endTime = 1650081599000
+
 export const apiServer = 'https://blabla-dev.herokuapp.com'
 
 export const mapLandPriceDataUrl = apiServer + '/yards?$select[]=price&$select[]=id&$select[]=currentBidWinner&$select[]=bidCount'