调整

.env.development

@@ -19,8 +19,8 @@ REACT_APP_SNAPSHOT_VOTING_API = "https://xtjyd0liqe.execute-api.ap-northeast-1.a
 
 
 
-REACT_APP_REQUEST_URL = 'http://192.253.237.94:9090'
+# REACT_APP_REQUEST_URL = 'http://192.253.237.94:9090'
-# REACT_APP_REQUEST_URL = 'http://101.35.117.69:9090'
+REACT_APP_REQUEST_URL = 'http://101.35.117.69:9090'
 # REACT_APP_REQUEST_URL = 'http://192.168.2.147:8080'
 # REACT_APP_REQUEST_URL = 'http://192.168.2.:8080'
 # REACT_APP_REQUEST_URL = 'http://6o7g1fv83e.51xd.pub'

package.json

@@ -33,7 +33,11 @@
   },
   "dependencies": {
     "@binance-chain/bsc-connector": "^1.0.0",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@ethersproject/experimental": "^5.0.1",
+    "@mui/material": "^5.8.3",
+    "@mui/styled-engine-sc": "^5.8.0",
     "@pancakeswap/sdk": "^2.3.2",
     "@pancakeswap/uikit": "^0.40.2",
     "@reduxjs/toolkit": "^1.5.0",
@@ -82,7 +86,7 @@
     "react-window": "^1.8.6",
     "remark-gfm": "^1.0.0",
     "split-grid": "^1.0.11",
-    "styled-components": "^5.3.0",
+    "styled-components": "^5.3.5",
     "swiper": "^6.6.1",
     "typescript": "^4.3.2"
   },

public/locales/zh-CN.json

@@ -1158,7 +1158,7 @@
   "IDO Get": "IDO 领取",
   "Estimated time of collection": "预计领取时间",
   "amount": "金额",
-  "Change the end": "兑换已结束",
+  "Exchange not commenced": "兑换未开始",
   "After purchase, it is expected to be available for collection in %time% time. Do you confirm the purchase": "购买后，预计%time%时间后可进行领取，是否确认购买",
   "Blind box": "盲盒",
   "nft box": "NFT盒子",
@@ -1185,6 +1185,7 @@
   "The rate of": "出率",
   "%hour%hour": "%hour%小时",
   "limit the quantity of": "限量",
+  "time limit": "限时",
   "nft Smoking in the probability": "NFT抽中概率",
   "%num%kind nft": "%num%种NFT",
   "Selling immediately": "立即出售",

src/config/localization/translations.json

@@ -1284,7 +1284,7 @@
   "IDO Get": "IDO Get",
   "Estimated time of collection": "Estimated time of collection",
   "amount": "amount",
-  "Change the end": "Change the end",
+  "Exchange not commenced": "Exchange not commenced",
   "After purchase, it is expected to be available for collection in %time% time. Do you confirm the purchase": "After purchase, it is expected to be available for collection in %time% time. Do you confirm the purchase",
   "Blind box": "Blind Box",
   "nft box": "NFT Box",
@@ -1312,6 +1312,7 @@
   "The rate of": "The rate of",
   "%hour%hour": "%hour%hour",
   "limit the quantity of": "limit the quantity of",
+  "time limit": "time limit",
   "nft Smoking in the probability": "nft Smoking in the probability",
   "%num%kind nft": "%num%kind nft",
   "Selling immediately": "Selling immediately",

src/services/blindBox.ts

@@ -0,0 +1,18 @@
+import request from 'utils/request'
+
+export const getBoxPage = (params) => {
+  return request.request({
+    url: '/high_city/app/api/box/page',
+    method: 'get',
+    params,
+  })
+}
+
+export const getBoxDetail = (id) => {
+  return request.request({
+    url: `/high_city/app/api/box/detail/${id}`,
+    method: 'get',
+  })
+}
+
+export default getBoxPage

src/utils/formatBalance.ts

@@ -68,3 +68,6 @@ export const formatFixedNumber = (number: ethers.FixedNumber, displayDecimals =
 export const formatDivNumber = (number: BigNumber | number, decimals = 4) => {
   return new BigNumber(number).div(BIG_TEN.pow(decimals)).toNumber()
 }
+export const formatTimeNumber = (number: BigNumber | number | string, decimals = 18) => {
+  return new BigNumber(number).times(BIG_TEN.pow(decimals)).toNumber()
+}

src/views/Announcement/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react'
+import Pagination from '@mui/material/Pagination'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
 // import Container from 'components/Layout/Container'
@@ -127,39 +128,26 @@ const Announcement: React.FC = () => {
   const [searchTitle, setSearchTitle] = useState('')
   const [detailVisible, setDetailVisible] = useState(false)
   const [list, setList] = useState([])
-  const [totalVisible, setTotalVisible] = useState(false)
   const [detailData, setDetailData] = useState<DetailProps>({ title: '', publishTime: 0, content: '' })
+  const [count, setCount] = useState(undefined)
   const getList = async (page: number, size: number, title?: string, type?: string) => {
-    if (totalVisible) return
-    if (type) {
-      setList([])
-    }
     const data = await getAnnouncementPage({ page, size, title })
-    const dataList = type ? data.content : [...list, ...data.content]
+    setCount(getTotalPageNum(data.total, data.size))
-    setList(dataList)
+    setList(data.content)
-    if (data.content.length === 0 || !data.content) {
-      setTotalVisible(true)
-    }
-  }
-
-  const onScrollCapture = () => {
-    const innerHeight = window.innerHeight
-    const screenH = Math.ceil(innerHeight + window.scrollY)
-    const eleH = document.documentElement.offsetHeight
-    if (screenH >= eleH) {
-      setPage(pageNum + 1)
   }
+  /**
+   * [getTotalPageNum 获取页码总数]
+   * @param  {[type]} totalRecord [总记录]
+   * @param  {[type]} pageSize    [每页记录条数]
+   * @return {[type]}             [总页码数据]
+   */
+  const getTotalPageNum = (total, pageSize) => {
+    const countTotal = ((Number(total) + Number(pageSize) - 1) / Number(pageSize)).toString()
+    return parseInt(countTotal)
   }
   useEffect(() => {
-    if (!totalVisible) {
-      window.addEventListener('scroll', onScrollCapture)
     getList(pageNum, 10, searchTitle)
-    }
+  }, [])
-
-    return () => {
-      window.removeEventListener('scroll', onScrollCapture)
-    }
-  }, [pageNum])
 
   const lookDetail = async (id) => {
     const data = await getAnnouncementDetail(id)
@@ -168,7 +156,7 @@ const Announcement: React.FC = () => {
   }
   const searchList = () => {
     setList([])
-    setTotalVisible(false)
+    // setTotalVisible(false)
     getList(1, 10, searchTitle, 'search')
   }
   const close = () => {
@@ -190,9 +178,15 @@ const Announcement: React.FC = () => {
     const { value: inputValue } = evt.target
     setSearchTitle(inputValue)
   }
+
+  const pageChange = (event, page) => {
+    setPage(page)
+    getList(page, 10, searchTitle)
+  }
+
   return (
     <ContainerMain>
-      <MainDiv ref={loadMoreRef as any} onScrollCapture={onScrollCapture}>
+      <MainDiv>
         {detailVisible ? (
           <Detail
             title={detailData.title}
@@ -212,7 +206,9 @@ const Announcement: React.FC = () => {
             </SearchDiv>
             <ListMain>
               {renderContent()}
-              {totalVisible ? <TextAll>{t('Loaded all')}</TextAll> : ''}
+              <Flex justifyContent="center" padding={10}>
+                <Pagination count={count} onChange={pageChange} page={pageNum} />
+              </Flex>
             </ListMain>
           </TableDiv>
         )}

src/views/BlindBox/component/Header.tsx

@@ -1,11 +1,42 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
 import { Flex, Text, useModal } from '@pancakeswap/uikit'
 import SeriesDetail from './SeriesDetail'
 
-interface FlexProp {
+interface DetailProp {
-  name?: string | number
+  beginTime?: string
+  coverResource: coverResourceProps
+  endTime?: string
+  id?: string
+  name?: string
+  priceList?: priceProps[]
+  price?: any
+  purchased?: string | number
+  total?: string | number
+  type?: string
+}
+
+interface OperationProp {
+  detail: DetailProp
+}
+// interface listProps {
+//   beginTime?: string
+//   coverResource: coverResourceProps
+//   endTime?: string
+//   id?: string
+//   name?: string
+//   price: priceProps
+//   purchased?: string | number
+//   total?: string | number
+//   type?: string
+// }
+interface coverResourceProps {
+  path?: string
+  url?: string
+}
+interface priceProps {
+  label?: string
   value?: string | number
 }
 
@@ -41,9 +72,9 @@ const TipFlex = styled(Flex)`
   cursor: pointer;
 `
 
-const Header: React.FC<FlexProp> = ({ name, value }) => {
+const Header: React.FC<OperationProp> = ({ detail }) => {
   const { t } = useTranslation()
-  const [onSeriesDetail] = useModal(<SeriesDetail />)
+  const [onSeriesDetail] = useModal(<SeriesDetail detail={detail} />)
 
   return (
     <HeaderFlex>

src/views/BlindBox/component/Operation.tsx

@@ -1,19 +1,36 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
+import { formatTimeNumber } from 'utils/formatBalance'
+import BigNumber from 'bignumber.js'
 import { useTranslation } from 'contexts/Localization'
 import { Flex, Text } from '@pancakeswap/uikit'
 import { TOKEN_SYMBOL } from 'config/index'
 import StepCom from './StepCom'
 
 interface DetailProp {
-  series: string
+  beginTime?: string
-  price: number | string
+  coverResource: coverResourceProps
-  number: number
+  endTime?: string
+  id?: string
+  name?: string
+  priceList?: priceProps[]
+  price?: any
+  purchased?: string | number
+  total?: string | number
+  type?: string
 }
 
 interface OperationProp {
   detail: DetailProp
 }
+interface coverResourceProps {
+  path?: string
+  url?: string
+}
+interface priceProps {
+  label?: string
+  value?: string | number
+}
 
 const DetailDiv = styled.div`
   margin-top: -100px;
@@ -33,27 +50,37 @@ const HeaderFlex = styled(Flex)`
 const HeaderText = styled(Text)`
   color: #1fc7d4;
   font-size: 24px;
+  margin: 0 5px 0 10px;
 `
 
 const Operation: React.FC<OperationProp> = ({ detail }) => {
   const { t } = useTranslation()
 
+  const [buyNum, setBuyNum] = useState(0)
+
   return (
     <DetailDiv>
       <DetailInfo>
         <Text color="textSubtle">{t('series')}</Text>
-        <Text color="text">{detail.series}</Text>
+        <Text color="text">{detail.name}</Text>
       </DetailInfo>
       <DetailInfo>
         <Text color="textSubtle">{t('price')}</Text>
         <HeaderFlex>
-          <HeaderText>{detail.price}</HeaderText>
+          {detail.priceList.map((item, index) => {
-          <Text color="text">{TOKEN_SYMBOL}</Text>
+            return (
+              <Flex alignItems="center" key={item.label}>
+                <HeaderText>{formatTimeNumber(item.value)}</HeaderText>
+                <Text color="text">{item.label}</Text>
+                {index === 0 && detail.priceList.length === 2 && <Text marginLeft="10px">-</Text>}
+              </Flex>
+            )
+          })}
         </HeaderFlex>
       </DetailInfo>
       <DetailInfo>
         <Text color="textSubtle">{t('quantity')}</Text>
-        <StepCom number={detail.number} />
+        <StepCom number={buyNum} value={(v) => setBuyNum(v)} />
       </DetailInfo>
     </DetailDiv>
   )

src/views/BlindBox/component/SeriesDetail.tsx

@@ -1,13 +1,37 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
 import { Modal, Flex, Text, Image } from '@pancakeswap/uikit'
+import { useGetBoxDetail } from '../hooks'
 import ShopList from './ShopList'
 
 interface SeriesDetailProp {
   name?: string | number
   value?: string | number
   onDismiss?: () => void
+  detail: DetailProp
+}
+
+interface DetailProp {
+  beginTime?: string
+  coverResource: coverResourceProps
+  endTime?: string
+  id?: string
+  name?: string
+  priceList?: priceProps[]
+  price?: any
+  purchased?: string | number
+  total?: string | number
+  type?: string
+}
+
+interface coverResourceProps {
+  path?: string
+  url?: string
+}
+interface priceProps {
+  label?: string
+  value?: string | number
 }
 
 const Main = styled(Modal)`
@@ -83,7 +107,7 @@ const ShopMain = styled.div`
   padding: 0 20px 15px 20px;
 `
 
-const SeriesDetail: React.FC<SeriesDetailProp> = ({ name, value, onDismiss }) => {
+const SeriesDetail: React.FC<SeriesDetailProp> = ({ name, value, onDismiss, detail }) => {
   const { t } = useTranslation()
   const list = [
     {
@@ -102,6 +126,16 @@ const SeriesDetail: React.FC<SeriesDetailProp> = ({ name, value, onDismiss }) =>
     { label: t('common'), type: '4', list: [{ label: 'Cat goddess Emerald ', id: 4, type: 4, probability: 8 }] },
   ]
 
+  const getDetail = useGetBoxDetail()
+  const getData = async () => {
+    const data = await getDetail(detail.id)
+    console.log(data)
+  }
+
+  useEffect(() => {
+    getData()
+  }, [])
+
   return (
     <Main title="法式盛宴" onDismiss={onDismiss}>
       <FlexBetween>

src/views/BlindBox/component/StepCom.tsx

@@ -27,17 +27,25 @@ const AddButton = styled(Button)`
 
 interface StepProp {
   number?: number
+  max?: number
+  value?: (v) => void
 }
 
-const StepCom: React.FC<StepProp> = ({ number }) => {
+const StepCom: React.FC<StepProp> = ({ number, max = 5, value }) => {
   const [valNumber, setInputState] = useState(number)
 
   const onChange = (type) => {
+    let num = valNumber
     if (type === 'add') {
-      setInputState(valNumber + 1)
+      if (valNumber === max) return
+      num += 1
+      value(num)
+      setInputState(num)
     } else {
       if (valNumber === 0) return
-      setInputState(valNumber - 1)
+      num -= 1
+      value(num)
+      setInputState(num)
     }
   }
 

src/views/BlindBox/hooks/index.ts

@@ -0,0 +1,21 @@
+import { useCallback } from 'react'
+import { getBoxPage, getBoxDetail } from 'services/blindBox'
+
+// nft盒子
+export const useGetList = () => {
+  const data = async (page, size) => {
+    const result = await getBoxPage({ page, size })
+    return result
+  }
+  return data
+}
+// nft详情
+export const useGetBoxDetail = () => {
+  const data = async (id) => {
+    const result = await getBoxDetail(id)
+    return result
+  }
+  return data
+}
+
+export default useGetList

src/views/BlindBox/index.tsx

@@ -1,19 +1,42 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
+import { useAccount } from 'state/userInfo/hooks'
 import UnlockButton from 'components/UnlockButton'
 import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
 import { Swiper, SwiperSlide } from 'swiper/react'
-import { Card, Text, Flex, Image } from '@pancakeswap/uikit'
+import { Card, Text, Flex, Image, Button } from '@pancakeswap/uikit'
 import { UnOpenModel } from 'components/Modal'
 import Header from './component/Header'
 import Operation from './component/Operation'
+import { useGetList } from './hooks'
 
 import 'swiper/swiper.min.css'
 import 'swiper/components/pagination/pagination.min.css'
 
 SwiperCore.use([Keyboard, Mousewheel, Pagination])
 
+interface listProps {
+  beginTime?: string
+  coverResource: coverResourceProps
+  endTime?: string
+  id?: string
+  name?: string
+  priceList?: priceProps[]
+  price?: any
+  purchased?: string | number
+  total?: string | number
+  type?: string
+}
+interface coverResourceProps {
+  path?: string
+  url?: string
+}
+interface priceProps {
+  label?: string
+  value?: string | number
+}
+
 const MainFlex = styled(Flex)`
   width: 100%;
   min-height: calc(100vh - 64px);
@@ -99,7 +122,12 @@ const BlindBoxCard = styled.div`
       box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
       letter-spacing: 1px;
       font-size: 14px;
-      background: linear-gradient(360deg, #24bcf2 0%, #7e4ee1 100%);
+    }
+    & > .limitQuantity {
+      background: linear-gradient(180deg, #4ee1b4 0%, #2183f3 100%);
+    }
+    & > .limitTime {
+      background: linear-gradient(180deg, #24bcf2 0%, #7e4ee1 100%);
     }
   }
 `
@@ -117,12 +145,47 @@ const UnlockButtonDiv = styled(UnlockButton)`
     width: 500px;
   }
 `
+const BuyButton = styled(Button)`
+  width: 500px;
+  height: 45px;
+  background: linear-gradient(180deg, #7be0fc 0%, #9961f0 100%);
+  opacity: 1;
+  border-radius: 23px;
+  margin-top: 80px;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: 350px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 500px;
+  }
+`
 
 const BlindBox: React.FC = () => {
   const { t } = useTranslation()
+  const account = useAccount()
+  const [blindBoxList, setBlindBoxList] = useState<listProps[]>()
+
+  const getList = useGetList()
+
+  const getData = async () => {
+    const { content } = await getList(1, 10)
+    const arr = []
+    content.forEach((item) => {
+      const obj = item
+      obj.priceList = []
+      Object.keys(obj.price).forEach((childItem) => {
+        obj.priceList.push({ label: childItem, value: obj.price[childItem] })
+      })
+      obj.price = undefined
+      arr.push(obj)
+    })
+    setBlindBoxList(arr)
+  }
+
+  useEffect(() => {
+    getData()
+  }, [])
 
-  const [blindBoxList, setBlindBoxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }])
-  const [detail, setDetail] = useState({ series: '法式盛宴', price: 500, number: 1 })
   return (
     <MainFlex>
       {/* <UnOpenModel /> */}
@@ -133,19 +196,23 @@ const BlindBox: React.FC = () => {
         freeModeMomentumRatio={0.25}
         freeModeMomentumVelocityRatio={0.5}
       >
-        {blindBoxList.map((item) => {
+        {blindBoxList?.map((item) => {
           return (
             <SwiperSlide key={item.id}>
               <BlindBoxFlex>
                 <BlindBoxCard>
                   <div className="ribbon">
-                    <div className="ribbon1 epic">{t('epic')}</div>
+                    {item.type === 'QUANTITATIVE' ? (
+                      <div className="ribbon1 limitQuantity">{t('limit the quantity of')}</div>
+                    ) : (
+                      <div className="ribbon1 limitTime">{t('time limit')}</div>
+                    )}
                   </div>
-                  <Header />
+                  <Header detail={item} />
-                  <Image src="/images/nft/blindbox.svg" width={500} height={460} marginTop="-40px" />
+                  <Image src={item.coverResource.url} width={500} height={460} marginTop="-40px" />
-                  <Operation detail={detail} />
+                  <Operation detail={item} />
                 </BlindBoxCard>
-                <UnlockButtonDiv />
+                {account ? <BuyButton>{t('Buy It Now')}</BuyButton> : <UnlockButtonDiv />}
               </BlindBoxFlex>
             </SwiperSlide>
           )

src/views/Ido/components/HeaderStatus.tsx

@@ -38,7 +38,7 @@ const HeaderStatus: React.FC<HeaderStatusProps> = ({ status, roundDetail }) => {
 
   return (
     <TimeText>
-      {status === 'none' && t('Change the end')}
+      {status === 'none' && t('Exchange not commenced')}
 
       {status === 'proceed' && (
         <TimeFlex>

src/views/NftBox/components/Box.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import Pagination from '@mui/material/Pagination'
 import styled, { keyframes } from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
 import { Heading, Flex } from '@pancakeswap/uikit'
@@ -108,6 +109,10 @@ const NftBox: React.FC = () => {
   const cutStatus = (index) => {
     setStatusIndex(index)
   }
+  const pageChange = (event, page) => {
+    console.log(event)
+    console.log(page)
+  }
 
   return (
     <PageContent>
@@ -134,6 +139,9 @@ const NftBox: React.FC = () => {
           return <ShopList item={item} />
         })}
       </Shop>
+      <Flex justifyContent="center">
+        <Pagination count={10} onChange={pageChange} />
+      </Flex>
     </PageContent>
   )
 }

src/views/NftBox/index.tsx

@@ -9,17 +9,17 @@ const PageContent = styled.div`
   background: rgba(255, 255, 255, 0.39);
   min-height: calc(100vh - 64px);
 
-  background-image: url('/images/page/nftBox.jpg');
+  /* background-image: url('/images/page/nftBox.jpg');
   background-position: 50%;
   background-size: 50% 90%;
-  background-repeat: no-repeat;
+  background-repeat: no-repeat; */
 `
 
 const NftBox: React.FC = () => {
   return (
     <PageContent>
-      <UnOpenModel />
+      {/* <UnOpenModel /> */}
-      {/* <Box /> */}
+      <Box />
     </PageContent>
   )
 }

yarn.lock

@@ -288,6 +288,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
   integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
 
+"@babel/helper-plugin-utils@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.npmmirror.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96"
+  integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==
+
 "@babel/helper-remap-async-to-generator@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.14.5.tgz#51439c913612958f54a987a4ffc9ee587a2045d6"
@@ -632,6 +637,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-syntax-jsx@^7.12.13":
+  version "7.17.12"
+  resolved "https://registry.npmmirror.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.17.12.tgz#834035b45061983a491f60096f61a2e7c5674a47"
+  integrity sha512-spyY3E3AURfxh/RHtjx5j6hs8am5NbUBGfcZ2vB3uShSpZdQyXSf5rR5Mk76vbtlAZOelyVQ71Fg0x9SG4fsog==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@@ -1268,6 +1280,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.13.10", "@babel/runtime@^7.17.2":
+  version "7.18.3"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
+  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.14.5", "@babel/template@^7.3.3":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4"
@@ -1501,28 +1520,112 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
-"@emotion/is-prop-valid@^0.8.8":
+"@emotion/babel-plugin@^11.7.1":
-  version "0.8.8"
+  version "11.9.2"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  resolved "https://registry.npmmirror.com/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz#723b6d394c89fb2ef782229d92ba95a740576e95"
-  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  integrity sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==
   dependencies:
-    "@emotion/memoize" "0.7.4"
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.0.13"
 
-"@emotion/memoize@0.7.4":
+"@emotion/cache@^11.7.1":
-  version "0.7.4"
+  version "11.7.1"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  resolved "https://registry.npmmirror.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539"
-  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+  integrity sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.1.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "4.0.13"
+
+"@emotion/hash@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
+"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.npmmirror.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95"
+  integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.npmmirror.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@^11.9.0":
+  version "11.9.0"
+  resolved "https://registry.npmmirror.com/@emotion/react/-/react-11.9.0.tgz#b6d42b1db3bd7511e7a7c4151dc8bc82e14593b8"
+  integrity sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/cache" "^11.7.1"
+    "@emotion/serialize" "^1.0.3"
+    "@emotion/utils" "^1.1.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.0.2", "@emotion/serialize@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/@emotion/serialize/-/serialize-1.0.3.tgz#99e2060c26c6292469fb30db41f4690e1c8fea63"
+  integrity sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
+  integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
+
+"@emotion/styled@^11.8.1":
+  version "11.8.1"
+  resolved "https://registry.npmmirror.com/@emotion/styled/-/styled-11.8.1.tgz#856f6f63aceef0eb783985fa2322e2bf66d04e17"
+  integrity sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/is-prop-valid" "^1.1.2"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/utils" "^1.1.0"
 
 "@emotion/stylis@^0.8.4":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@^0.7.4":
+"@emotion/unitless@^0.7.4", "@emotion/unitless@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf"
+  integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==
+
+"@emotion/weak-memoize@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.npmmirror.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@eslint/eslintrc@^0.4.2":
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.2.tgz#f63d0ef06f5c0c57d76c4ab5f63d3835c51b0179"
@@ -2523,6 +2626,93 @@
   resolved "https://registry.yarnpkg.com/@microsoft/fetch-event-source/-/fetch-event-source-2.0.1.tgz#9ceecc94b49fbaa15666e38ae8587f64acce007d"
   integrity sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==
 
+"@mui/base@5.0.0-alpha.84":
+  version "5.0.0-alpha.84"
+  resolved "https://registry.npmmirror.com/@mui/base/-/base-5.0.0-alpha.84.tgz#83c580c9b04b4e4efe3fb39572720470b0d7cc29"
+  integrity sha512-uDx+wGVytS+ZHiWHyzUyijY83GSIXJpzSJ0PGc/8/s+8nBzeHvaPKrAyJz15ASLr52hYRA6PQGqn0eRAsB7syQ==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@emotion/is-prop-valid" "^1.1.2"
+    "@mui/types" "^7.1.3"
+    "@mui/utils" "^5.8.0"
+    "@popperjs/core" "^2.11.5"
+    clsx "^1.1.1"
+    prop-types "^15.8.1"
+    react-is "^17.0.2"
+
+"@mui/material@^5.8.3":
+  version "5.8.3"
+  resolved "https://registry.npmmirror.com/@mui/material/-/material-5.8.3.tgz#86681d14c1a119d1d9b6b981c864736d075d095f"
+  integrity sha512-8UecY/W9SMtEZm5PMCUcMbujajVP6fobu0BgBPiIWwwWRblZVEzqprY6v1P2me7qCyrve4L4V/rqAKPKhVHOSg==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@mui/base" "5.0.0-alpha.84"
+    "@mui/system" "^5.8.3"
+    "@mui/types" "^7.1.3"
+    "@mui/utils" "^5.8.0"
+    "@types/react-transition-group" "^4.4.4"
+    clsx "^1.1.1"
+    csstype "^3.1.0"
+    hoist-non-react-statics "^3.3.2"
+    prop-types "^15.8.1"
+    react-is "^17.0.2"
+    react-transition-group "^4.4.2"
+
+"@mui/private-theming@^5.8.0":
+  version "5.8.0"
+  resolved "https://registry.npmmirror.com/@mui/private-theming/-/private-theming-5.8.0.tgz#7d927e7e12616dc10b0dcbe665df2c00ed859796"
+  integrity sha512-MjRAneTmCKLR9u2S4jtjLUe6gpHxlbb4g2bqpDJ2PdwlvwsWIUzbc/gVB4dvccljXeWxr5G2M/Co2blXisvFIw==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@mui/utils" "^5.8.0"
+    prop-types "^15.8.1"
+
+"@mui/styled-engine-sc@^5.8.0":
+  version "5.8.0"
+  resolved "https://registry.npmmirror.com/@mui/styled-engine-sc/-/styled-engine-sc-5.8.0.tgz#20bc536dce25739e38fcd2586f100e70fbf02065"
+  integrity sha512-46eRLWxjTF0d50Q1Q9tj96cgF41r7lesbXAy6kKocCdUfJ8rbIo36C4Ws8Pd7nfVsvaitTb7tmCbVQzDT3niJQ==
+  dependencies:
+    prop-types "^15.8.1"
+
+"@mui/styled-engine@^5.8.0":
+  version "5.8.0"
+  resolved "https://registry.npmmirror.com/@mui/styled-engine/-/styled-engine-5.8.0.tgz#89ed42efe7c8749e5a60af035bc5d3a6bea362bf"
+  integrity sha512-Q3spibB8/EgeMYHc+/o3RRTnAYkSl7ROCLhXJ830W8HZ2/iDiyYp16UcxKPurkXvLhUaILyofPVrP3Su2uKsAw==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@emotion/cache" "^11.7.1"
+    prop-types "^15.8.1"
+
+"@mui/system@^5.8.3":
+  version "5.8.3"
+  resolved "https://registry.npmmirror.com/@mui/system/-/system-5.8.3.tgz#66db174f1b5c244eb73dbc48527509782a22ec0a"
+  integrity sha512-/tyGQcYqZT0nl98qV9XnGiedTO+V7VHc28k4POfhMJNedB1CRrwWRm767DeEdc5f/8CU2See3WD16ikP6pYiOA==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@mui/private-theming" "^5.8.0"
+    "@mui/styled-engine" "^5.8.0"
+    "@mui/types" "^7.1.3"
+    "@mui/utils" "^5.8.0"
+    clsx "^1.1.1"
+    csstype "^3.1.0"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.1.3":
+  version "7.1.3"
+  resolved "https://registry.npmmirror.com/@mui/types/-/types-7.1.3.tgz#d7636f3046110bcccc63e6acfd100e2ad9ca712a"
+  integrity sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA==
+
+"@mui/utils@^5.8.0":
+  version "5.8.0"
+  resolved "https://registry.npmmirror.com/@mui/utils/-/utils-5.8.0.tgz#4b1d19cbcf70773283375e763b7b3552b84cb58f"
+  integrity sha512-7LgUtCvz78676iC0wpTH7HizMdCrTphhBmRWimIMFrp5Ph6JbDFVuKS1CwYnWWxRyYKL0QzXrDL0lptAU90EXg==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@types/prop-types" "^15.7.5"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.8.1"
+    react-is "^17.0.2"
+
 "@multiformats/base-x@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@multiformats/base-x/-/base-x-4.0.1.tgz#95ff0fa58711789d53aefb2590a8b7a4e715d121"
@@ -2628,6 +2818,11 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
+"@popperjs/core@^2.11.5":
+  version "2.11.5"
+  resolved "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
+  integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
+
 "@popperjs/core@^2.9.2":
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
@@ -3831,6 +4026,11 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
+"@types/prop-types@^15.7.5":
+  version "15.7.5"
+  resolved "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
 "@types/q@^1.5.1":
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
@@ -3862,6 +4062,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-is@^16.7.1 || ^17.0.0":
+  version "17.0.3"
+  resolved "https://registry.npmmirror.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
+  integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^7.1.16":
   version "7.1.17"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.17.tgz#b9ccd01624c2a282b7af3762411cbf8945712438"
@@ -3896,6 +4103,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.4":
+  version "4.4.4"
+  resolved "https://registry.npmmirror.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
+  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-window@^1.8.3":
   version "1.8.4"
   resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.4.tgz#7920f128b0238ea6bd529cbbc2cf1779e99b7456"
@@ -5503,7 +5717,7 @@ babel-plugin-jest-hoist@^26.6.2:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@2.8.0:
+babel-plugin-macros@2.8.0, babel-plugin-macros@^2.6.1:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -6806,6 +7020,11 @@ clone@^2.0.0, clone@^2.1.1:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -7124,7 +7343,7 @@ convert-source-map@1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
-convert-source-map@1.X, convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@1.X, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -7624,6 +7843,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
+csstype@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
+  integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -9795,6 +10019,11 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@4.1.0, find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -10738,7 +10967,7 @@ hmac-drbg@^1.0.0, hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -16716,6 +16945,15 @@ prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.npmmirror.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 property-information@^5.0.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
@@ -17094,7 +17332,7 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.0, react-is@^17.0.1:
+react-is@^17.0.0, react-is@^17.0.1, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -17243,7 +17481,7 @@ react-scripts@^4.0.1:
   optionalDependencies:
     fsevents "^2.1.3"
 
-react-transition-group@^4.4.1:
+react-transition-group@^4.4.1, react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
   integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
@@ -19133,14 +19371,14 @@ style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-components@^5.3.0:
+styled-components@^5.3.5:
-  version "5.3.0"
+  version "5.3.5"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.0.tgz#e47c3d3e9ddfff539f118a3dd0fd4f8f4fb25727"
+  resolved "https://registry.npmmirror.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
-  integrity sha512-bPJKwZCHjJPf/hwTJl6TbkSZg/3evha+XPEizrZUGb535jLImwDUdjTNxXqjjaASt2M4qO4AVfoHJNe3XB/tpQ==
+  integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/is-prop-valid" "^1.1.0"
     "@emotion/stylis" "^0.8.4"
     "@emotion/unitless" "^0.7.4"
     babel-plugin-styled-components ">= 1.12.0"
@@ -19177,6 +19415,11 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis@4.0.13:
+  version "4.0.13"
+  resolved "https://registry.npmmirror.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
+
 sublevel-pouchdb@7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/sublevel-pouchdb/-/sublevel-pouchdb-7.2.2.tgz#49e46cd37883bf7ff5006d7c5b9bcc7bcc1f422f"