Merge pull request #362 from mgguild/implement-ending-stakes-notifica…

…tion Stakes ending notification
mgguild · Jan 3, 2024 · e6dab50 · e6dab50
2 parents eb3682e + bd05571
commit e6dab50
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 3 deletions.
diff --git a/src/config/constants/pools.ts b/src/config/constants/pools.ts
@@ -40,6 +40,7 @@ const pools: PoolConfig[] = [
     sortOrder: 998,
     isFinished: false,
     UIProps: farmsUIProps.PBmggMgg,
+    endDate: 'March 31, 2024',
     fixedAprConfigs: {
       tiers: [
         {

diff --git a/src/config/constants/types.ts b/src/config/constants/types.ts
@@ -121,6 +121,7 @@ export interface PoolConfig {
   isDepositDisabled?: boolean
   isWithdrawDisabled?: boolean
   UIProps?: UIProps
+  endDate?: string
   fixedAprConfigs?: {
     tiers: Tiers[]
     maxFine: number

diff --git a/src/views/Gamefi/Gamefi.tsx b/src/views/Gamefi/Gamefi.tsx
@@ -1,10 +1,10 @@
 import BigNumber from 'bignumber.js'
 import { partition } from 'lodash'
-import { ThemeContext } from 'styled-components'
+import styled, { ThemeContext } from 'styled-components'
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation, useRouteMatch } from 'react-router-dom'
 import { useWeb3React } from '@web3-react/core'
-import { Grid } from '@mui/material'
+import { Grid, Modal, Box } from '@mui/material'
 import { Farm } from 'state/types'
 import { FarmCategory, PoolCategory, PoolConfig } from 'config/constants/types'
 import {
@@ -44,6 +44,7 @@ const Gamefi: React.FC = () => {
   const { pathname } = useLocation()
   const [sortBy, setSortBy] = useState('')
   const [isLiveVaults, setLiveVaults] = useState('')
+  const [open, setOpen] = useState(true)
 
   const handleIsLiveVaults = (value: string) => {
     setLiveVaults(value)

diff --git a/src/views/Gamefi/NewUI/sections/PoolSection.tsx b/src/views/Gamefi/NewUI/sections/PoolSection.tsx
@@ -6,7 +6,7 @@ import { BASE_SWAP_URL } from 'config'
 import { useWeb3React } from '@web3-react/core'
 import { getImageUrlFromToken } from 'utils/assetFetch'
 import { Flex, Heading, Link, Text } from '@metagg/mgg-uikit'
-import { ThemeContext } from 'styled-components'
+import styled, { ThemeContext } from 'styled-components'
 import { useFetchPublicPoolsData, usePools } from 'state/hooks'
 import { getAddress } from 'utils/addressHelpers'
 import { getBalanceNumber } from 'utils/formatBalance'
@@ -15,14 +15,44 @@ import RenderSocials from 'components/Launchpad/SocialGroup'
 import { getBscScanAddressUrl } from 'utils/bscscan'
 import { Card2Container, LinearBG, PageContainer, TokenLogo } from 'views/Farms/components/FarmCards/styles'
 import CopyToClipboard from 'views/Gamefi/components/CopyToClipboard'
+import { Modal, Box } from '@mui/material'
 import InputComponent from '../../components/InputComponent'
 import ListStakesComponent from '../../components/ListStakesComponent'
 import { ChartStyle, FlexC, StatCard, Stats, TableStyle } from '../styled'
+import { FilterButton } from '../../styled'
 import { Series } from '../types'
 import ApexChart from '../../components/ApexCharts'
 import RenderTable from '../Table'
 import { NavOption } from '../../../../components/Launchpad/styled'
 
+const CenterFrame = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const Container = styled.div`
+  background-color: #101010;
+  color: white;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  padding: 5rem;
+  border-radius: 10px;
+  min-width: 15rem;
+  width: 35rem;
+  gap: 1.5rem;
+  margin: 1rem;
+  height: 10vh;
+`
+
 const RenderPool: React.FC<{ farmID: string; tblColumns: any }> = ({ farmID, tblColumns }) => {
   const [dayDuration, setDayDuration] = useState<number>(0)
   const theme = useContext(ThemeContext)
@@ -31,6 +61,7 @@ const RenderPool: React.FC<{ farmID: string; tblColumns: any }> = ({ farmID, tbl
   const { pathname } = useLocation()
   const { pools: poolsWithoutAutoVault, userDataLoaded } = usePools(account)
   const [active, setActive] = useState(1)
+  const [open, setOpen] = useState(true)
 
   useFetchPublicPoolsData()
 
@@ -254,6 +285,49 @@ const RenderPool: React.FC<{ farmID: string; tblColumns: any }> = ({ farmID, tbl
             style={{ backgroundColor: theme.colors.MGG_mainBG, maxWidth: '40rem', height: '31.7216875', zIndex: 3 }}
             pd="1rem"
           >
+            {currentPool.endDate ? (
+              <>
+                <Text style={{ color: 'red' }}>
+                  Please be aware that the staking of MGG Tokens in our Pool-Based Staking will end on{' '}
+                  {currentPool.endDate}.
+                </Text>
+                <Modal
+                  open={open}
+                  onClose={() => setOpen(false)}
+                  onBackdropClick={() => {
+                    setOpen(false)
+                    console.log('background click!')
+                  }}
+                  aria-labelledby="modal-modal-title"
+                  aria-describedby="modal-modal-description"
+                  disableAutoFocus
+                >
+                  <Box
+                    sx={{
+                      position: 'relative',
+                      top: '50%',
+                      left: '50%',
+                      transform: 'translate(-50%, -50%)',
+                      'user-select': 'none',
+                    }}
+                  >
+                    <CenterFrame>
+                      <Container>
+                        <Heading style={{ color: 'red', fontStyle: 'italic' }}>
+                          Please be aware that the staking of MGG Tokens in our Pool-Based Staking will end on March 31,
+                          2024.
+                        </Heading>
+                        <FilterButton onClick={() => setOpen(false)}>
+                          <Text>Ok</Text>
+                        </FilterButton>
+                      </Container>
+                    </CenterFrame>
+                  </Box>
+                </Modal>
+              </>
+            ) : (
+              <></>
+            )}
             <Heading style={{ fontSize: '1.875rem' }}>
               {currentPool.stakingToken.symbol} - {currentPool.earningToken.symbol} Pool Based Farm
             </Heading>