Start Position management, bug fix on add amounts (#40)

* very rough positions/pools data fetching and position list rendering

* fix formatting

* fix loading

* position page routing, bug on add page
Co-authored-by: ianlapham <ianlapham@gmail.com>

.storybook/main.ts

@@ -10,7 +10,7 @@ module.exports = {
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
-      propFilter: prop => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true)
-    }
-  }
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
 }

.storybook/theme.ts

@@ -4,11 +4,11 @@ import { create } from '@storybook/theming'
 const uniswapBaseTheme = {
   brandTitle: 'Uniswap Design',
   brandUrl: 'https://uniswap.org',
-  brandImage: 'https://ipfs.io/ipfs/QmNa8mQkrNKp1WEEeGjFezDmDeodkWRevGFN8JCV7b4Xir'
+  brandImage: 'https://ipfs.io/ipfs/QmNa8mQkrNKp1WEEeGjFezDmDeodkWRevGFN8JCV7b4Xir',
 }
 export const light = create({
   base: 'light',
-  ...uniswapBaseTheme
+  ...uniswapBaseTheme,
 })
 
 // export const dark = create({

src/components/Card/index.tsx

@@ -28,6 +28,10 @@ export const DarkGreyCard = styled(Card)`
   background-color: ${({ theme }) => theme.bg2};
 `
 
+export const DarkCard = styled(Card)`
+  background-color: ${({ theme }) => theme.bg0};
+`
+
 export const OutlineCard = styled(Card)`
   border: 1px solid ${({ theme }) => theme.bg3};
 `

src/components/PositionList/PositionList.stories.tsx

-import { Story } from '@storybook/react/types-6-0'
-import React from 'react'
-import { basisPointsToPercent } from 'utils'
-import { DAI, WBTC } from '../../constants'
-import Component, { PositionListProps } from './index'
-import { TokenAmount } from '@uniswap/sdk-core'
-import JSBI from 'jsbi'
+// import { Story } from '@storybook/react/types-6-0'
+// import React from 'react'
+// import { Position } from 'types/position'
+// import { basisPointsToPercent } from 'utils'
+// import { DAI, WBTC } from '../../constants'
+// import Component, { PositionListProps } from './index'
+// import { TokenAmount } from '@uniswap/sdk-core'
+// import JSBI from 'jsbi'
 
-const FEE_BIPS = {
-  FIVE: basisPointsToPercent(5),
-  THIRTY: basisPointsToPercent(30),
-  ONE_HUNDRED: basisPointsToPercent(100),
-}
-const daiAmount = new TokenAmount(DAI, JSBI.BigInt(500 * 10 ** 18))
-const wbtcAmount = new TokenAmount(WBTC, JSBI.BigInt(10 ** 7))
-const positions = [
-  {
-    feesEarned: {
-      DAI: 1000,
-      WBTC: 0.005,
-    },
-    feeLevel: FEE_BIPS.FIVE,
-    tokenAmount0: daiAmount,
-    tokenAmount1: wbtcAmount,
-    tickLower: 40000,
-    tickUpper: 60000,
-  },
-  {
-    feesEarned: {
-      DAI: 1000,
-      WBTC: 0.005,
-    },
-    feeLevel: FEE_BIPS.THIRTY,
-    tokenAmount0: daiAmount,
-    tokenAmount1: wbtcAmount,
-    tickLower: 45000,
-    tickUpper: 55000,
-  },
-]
+// const FEE_BIPS = {
+//   FIVE: basisPointsToPercent(5),
+//   THIRTY: basisPointsToPercent(30),
+//   ONE_HUNDRED: basisPointsToPercent(100),
+// }
+// const daiAmount = new TokenAmount(DAI, JSBI.BigInt(500 * 10 ** 18))
+// const wbtcAmount = new TokenAmount(WBTC, JSBI.BigInt(10 ** 7))
+// const positions = [
+//   {
+//     feesEarned: {
+//       DAI: 1000,
+//       WBTC: 0.005,
+//     },
+//     feeLevel: FEE_BIPS.FIVE,
+//     tokenAmount0: daiAmount,
+//     tokenAmount1: wbtcAmount,
+//     tickLower: 40000,
+//     tickUpper: 60000,
+//   },
+//   {
+//     feesEarned: {
+//       DAI: 1000,
+//       WBTC: 0.005,
+//     },
+//     feeLevel: FEE_BIPS.THIRTY,
+//     tokenAmount0: daiAmount,
+//     tokenAmount1: wbtcAmount,
+//     tickLower: 45000,
+//     tickUpper: 55000,
+//   },
+// ]
+// const positions: Position[] = []
 
 export default {
   title: 'PositionList',
 }
 
-const Template: Story<PositionListProps> = (args) => <Component {...args} />
+// const Template: Story<PositionListProps> = (args) => <Component {...args} />
 
-export const PositionList = Template.bind({})
-PositionList.args = {
-  positions,
-  showUnwrapped: true,
-}
+// export const PositionList = Template.bind({})
+// PositionList.args = {
+//   positions,
+//   showUnwrapped: true,
+// }

src/components/PositionList/index.tsx

-import Badge, { BadgeVariant } from 'components/Badge'
-import DoubleCurrencyLogo from 'components/DoubleLogo'
+import PositionListItem from 'components/PositionListItem'
 import React from 'react'
-import { AlertTriangle } from 'react-feather'
 import { useTranslation } from 'react-i18next'
-import { unwrappedToken } from 'utils/wrappedCurrency'
-import styled, { keyframes } from 'styled-components'
-import { Link } from 'react-router-dom'
+import styled from 'styled-components'
 import { MEDIA_WIDTHS } from 'theme'
-import { Position } from 'types/position'
+import { PositionDetails } from 'types/position'
 
-const ActiveDot = styled.span`
-  background-color: ${({ theme }) => theme.success};
-  border-radius: 50%;
-  height: 8px;
-  width: 8px;
-  margin-right: 4px;
-`
-const Row = styled(Link)`
-  align-items: center;
-  border-radius: 20px;
-  display: flex;
-  flex-direction: column;
-  color: ${({ theme }) => theme.text1};
-  margin: 8px 0;
-  padding: 8px;
-  text-decoration: none;
-  font-weight: 500;
-  &:first-of-type {
-    margin: 0 0 8px 0;
-  }
-  &:last-of-type {
-    margin: 8px 0 0 0;
-  }
-
-  & > div:not(:first-child) {
-    text-align: right;
-    min-width: 18%;
-  }
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    flex-direction: row;
-  }
-  :hover {
-    background-color: ${({ theme }) => theme.bg1};
-  }
-`
-const BadgeText = styled.div`
-  font-weight: 500;
-  font-size: 14px;
-`
-const BadgeWrapper = styled.div`
-  font-size: 14px;
-`
-const DataLineItem = styled.div`
-  text-align: right;
-  font-size: 14px;
-`
-const DoubleArrow = styled.span`
-  color: ${({ theme }) => theme.text3};
-`
 const DesktopHeader = styled.div`
   display: none;
   font-size: 14px;
@@ -78,81 +25,7 @@ const DesktopHeader = styled.div`
     }
   }
 `
-const loadingAnimation = keyframes`
-  0% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-`
 
-const LoadingRows = styled.div`
-  display: grid;
-  grid-column-gap: 0.5em;
-  grid-row-gap: 0.8em;
-  grid-template-columns: repeat(3, 1fr);
-  & > div {
-    animation: ${loadingAnimation} 1.5s infinite;
-    animation-fill-mode: both;
-    background: linear-gradient(
-      to left,
-      ${({ theme }) => theme.bg3} 25%,
-      ${({ theme }) => theme.bg5} 50%,
-      ${({ theme }) => theme.bg3} 75%
-    );
-    background-size: 400%;
-    border-radius: 0.2em;
-    height: 1.4em;
-    will-change: background-position;
-  }
-  & > div:nth-child(4n + 1) {
-    grid-column: 1 / 3;
-  }
-  & > div:nth-child(4n) {
-    grid-column: 3 / 4;
-    margin-bottom: 2em;
-  }
-`
-const RangeData = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  & > div {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-  }
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    display: block;
-    & > div {
-      display: block;
-    }
-  }
-`
-const AmountData = styled.div`
-  display: none;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    display: block;
-  }
-`
-const FeeData = styled.div`
-  display: none;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    display: block;
-  }
-`
-const LabelData = styled.div`
-  align-items: center;
-  display: flex;
-  flex: 1 1 auto;
-  justify-content: space-between;
-  width: 100%;
-  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
-    display: block;
-  }
-`
 const MobileHeader = styled.div`
   font-weight: medium;
   font-size: 16px;
@@ -161,28 +34,14 @@ const MobileHeader = styled.div`
     display: none;
   }
 `
-const PrimaryPositionIdData = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 6px 0 12px 0;
-  > * {
-    margin-right: 8px;
-  }
-`
-
-const DataText = styled.div`
-  font-weight: 500;
-`
 
 export type PositionListProps = React.PropsWithChildren<{
-  loading: boolean
-  positions: Position[]
-  showUnwrapped?: boolean
+  positions: PositionDetails[]
 }>
 
-export default function PositionList({ loading, positions, showUnwrapped }: PositionListProps) {
+export default function PositionList({ positions }: PositionListProps) {
   const { t } = useTranslation()
+
   return (
     <>
       <DesktopHeader>
@@ -192,90 +51,10 @@ export default function PositionList({ loading, positions, showUnwrapped }: Posi
         <div>{t('Fees Earned')}</div>
       </DesktopHeader>
       <MobileHeader>Your positions</MobileHeader>
-      {loading ? (
-        <LoadingRows>
-          <div />
-          <div />
-          <div />
-          <div />
-          <div />
-          <div />
-          <div />
-          <div />
-          <div />
-          <div />
-          <div />
-          <div />
-        </LoadingRows>
-      ) : (
-        positions.map((position) => {
-          const { feeLevel, feesEarned, tokenAmount0, tokenAmount1 } = position
-          const symbol0 = tokenAmount0.token.symbol || ''
-          const symbol1 = tokenAmount1.token.symbol || ''
-          const currency0 = showUnwrapped ? tokenAmount0.token : unwrappedToken(tokenAmount0.token)
-          const currency1 = showUnwrapped ? tokenAmount1.token : unwrappedToken(tokenAmount1.token)
-          const limitCrossed = tokenAmount0.equalTo(0) || tokenAmount1.equalTo(0)
-
-          const key = `${feeLevel.toFixed()}-${symbol0}-${tokenAmount0.toFixed(2)}-${symbol1}-${tokenAmount1.toFixed(
-            2
-          )}`
-
-          return (
-            <Row key={key} to="/asdf">
-              <LabelData>
-                <PrimaryPositionIdData>
-                  <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={16} margin />
-                  <DataText>
-                    &nbsp;{symbol0}&nbsp;/&nbsp;{symbol1}
-                  </DataText>
-                  &nbsp;
-                  <Badge>
-                    <BadgeText>{feeLevel.toSignificant(2)}%</BadgeText>
-                  </Badge>
-                </PrimaryPositionIdData>
-                <BadgeWrapper>
-                  {limitCrossed ? (
-                    <Badge variant={BadgeVariant.WARNING}>
-                      <AlertTriangle width={14} height={14} style={{ marginRight: '4px' }} />
-                      &nbsp;
-                      <BadgeText>{t('Out of range')}</BadgeText>
-                    </Badge>
-                  ) : (
-                    <Badge variant={BadgeVariant.DEFAULT}>
-                      <ActiveDot /> &nbsp;
-                      <BadgeText>{t('Active')}</BadgeText>
-                    </Badge>
-                  )}
-                </BadgeWrapper>
-              </LabelData>
-              <RangeData>
-                <DataLineItem>
-                  1,672 <DoubleArrow>↔</DoubleArrow> 1,688 {symbol0}&nbsp;/&nbsp;{symbol1}
-                </DataLineItem>
-                <DataLineItem>
-                  0.0002 <DoubleArrow>↔</DoubleArrow> 0.0001 {symbol1}&nbsp;/&nbsp;{symbol0}
-                </DataLineItem>
-              </RangeData>
-              <AmountData>
-                <DataLineItem>
-                  {tokenAmount0.toSignificant()}&nbsp;{symbol0}
-                </DataLineItem>
-                <DataLineItem>
-                  {tokenAmount1.toSignificant()}&nbsp;{symbol1}
-                </DataLineItem>
-              </AmountData>
-              <FeeData>
-                <DataLineItem>
-                  {feesEarned[symbol0]}&nbsp;{symbol0}
-                </DataLineItem>
-                <DataLineItem>
-                  {feesEarned[symbol1]}&nbsp;{symbol1}
-                </DataLineItem>
-              </FeeData>
-            </Row>
-          )
-        })
-      )}
+      {positions.map((p, i) => {
+        const key = `${i}-${p.nonce.toString()} ${p.token0} ${p.token1} ${p.tokensOwed0} ${p.tokensOwed1}`
+        return <PositionListItem key={key} positionDetails={p} positionIndex={i} />
+      })}
     </>
   )
 }

src/components/PositionListItem/PositionListItem.stories.tsx

+// import { Story } from '@storybook/react/types-6-0'
+// import { FeeAmount, MAX_TICK, MIN_TICK, TICK_SPACINGS } from '@uniswap/v3-sdk'
+// import { BigNumber } from 'ethers'
+// import React from 'react'
+// import { Position } from 'types/position'
+// import Component, { PositionListItemProps } from './index'
+
+// const position: Position  = {
+// nonce: BigNumber.from(0),
+// operator: '',
+// token0: '',
+// token1: '',
+// fee: FeeAmount.LOW,
+// tickLower: MIN_TICK(TICK_SPACINGS[FeeAmount.LOW]),
+// tickUpper: MAX_TICK(TICK_SPACINGS[FeeAmount.LOW]),
+// liquidity,
+// feeGrowthInside0LastX128fee
+// feeGrowthInside0LastX128
+// feeGrowthInside1LastX128
+// tokensOwed0
+// tokensOwed1
+// }
+
+export default {
+  title: 'PositionListItem',
+}
+
+// const Template: Story<PositionListItemProps> = (args) => <Component {...args} />
+
+// export const PositionListItem = Template.bind({})
+// PositionListItem.args = {position}

src/components/PositionListItem/index.tsx

+import React, { useMemo } from 'react'
+import { Position } from '@uniswap/v3-sdk'
+import Badge, { BadgeVariant } from 'components/Badge'
+import DoubleCurrencyLogo from 'components/DoubleLogo'
+import { PoolState, usePool } from 'data/Pools'
+import { useToken } from 'hooks/Tokens'
+import { AlertTriangle } from 'react-feather'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import styled from 'styled-components'
+import { MEDIA_WIDTHS } from 'theme'
+import { PositionDetails } from 'types/position'
+import { basisPointsToPercent } from 'utils'
+import { TokenAmount } from '@uniswap/sdk-core'
+import { formatPrice, formatTokenAmount } from 'utils/formatTokenAmount'
+import Loader from 'components/Loader'
+import { unwrappedToken } from 'utils/wrappedCurrency'
+
+const ActiveDot = styled.span`
+  background-color: ${({ theme }) => theme.success};
+  border-radius: 50%;
+  height: 8px;
+  width: 8px;
+  margin-right: 4px;
+`
+const Row = styled(Link)`
+  align-items: center;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  color: ${({ theme }) => theme.text1};
+  margin: 8px 0;
+  padding: 8px;
+  text-decoration: none;
+  font-weight: 500;
+  &:first-of-type {
+    margin: 0 0 8px 0;
+  }
+  &:last-of-type {
+    margin: 8px 0 0 0;
+  }
+
+  & > div:not(:first-child) {
+    text-align: right;
+    min-width: 18%;
+  }
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+    flex-direction: row;
+  }
+  :hover {
+    background-color: ${({ theme }) => theme.bg1};
+  }
+`
+const BadgeText = styled.div`
+  font-weight: 500;
+  font-size: 14px;
+`
+const BadgeWrapper = styled.div`
+  font-size: 14px;
+`
+const DataLineItem = styled.div`
+  text-align: right;
+  font-size: 14px;
+`
+const DoubleArrow = styled.span`
+  color: ${({ theme }) => theme.text3};
+`
+const RangeData = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  & > div {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+    display: block;
+    & > div {
+      display: block;
+    }
+  }
+`
+const AmountData = styled.div`
+  display: none;
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+    display: block;
+  }
+`
+const FeeData = styled.div`
+  display: none;
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+    display: block;
+  }
+`
+const LabelData = styled.div`
+  align-items: center;
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: space-between;
+  width: 100%;
+  @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
+    display: block;
+  }
+`
+const PrimaryPositionIdData = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 6px 0 12px 0;
+  > * {
+    margin-right: 8px;
+  }
+`
+
+const DataText = styled.div`
+  font-weight: 500;
+`
+
+export interface PositionListItemProps {
+  positionDetails: PositionDetails
+  positionIndex: number
+}
+
+export default function PositionListItem({ positionDetails, positionIndex }: PositionListItemProps) {
+  const { t } = useTranslation()
+
+  const {
+    token0: token0Address,
+    token1: token1Address,
+    fee: feeAmount,
+    liquidity,
+    tickLower,
+    tickUpper,
+    feeGrowthInside0LastX128,
+    feeGrowthInside1LastX128,
+  } = positionDetails
+
+  const token0 = useToken(token0Address)
+  const token1 = useToken(token1Address)
+
+  const currency0 = token0 ? unwrappedToken(token0) : undefined
+  const currency1 = token1 ? unwrappedToken(token1) : undefined
+
+  // construct Position from details returned
+  const [poolState, pool] = usePool(currency0 ?? undefined, currency1 ?? undefined, feeAmount)
+  const position = useMemo(() => {
+    if (pool) {
+      return new Position({ pool, liquidity, tickLower, tickUpper })
+    }
+    return undefined
+  }, [liquidity, pool, tickLower, tickUpper])
+
+  const poolLoading = poolState === PoolState.LOADING
+
+  // liquidity amounts in tokens
+  const amount0: TokenAmount | undefined = position?.amount0
+  const amount1: TokenAmount | undefined = position?.amount1
+  const formattedAmount0 = formatTokenAmount(amount0, 4)
+  const formattedAmount1 = formatTokenAmount(amount1, 4)
+
+  // prices
+  const price0Lower = position ? position.token0PriceLower : undefined
+  const price0Upper = position ? position.token0PriceUpper : undefined
+  const price1Lower = price0Upper ? price0Upper.invert() : undefined
+  const price1Upper = price0Lower ? price0Lower.invert() : undefined
+
+  // check if price is within range
+  const outOfRange: boolean = pool ? pool.tickCurrent < tickLower || pool.tickCurrent > tickUpper : false
+
+  const positionSummaryLink = '/pool/' + positionIndex.toString()
+
+  return (
+    <Row to={positionSummaryLink}>
+      <LabelData>
+        <PrimaryPositionIdData>
+          <DoubleCurrencyLogo currency0={currency0 ?? undefined} currency1={currency1 ?? undefined} size={16} margin />
+          <DataText>
+            &nbsp;{currency0?.symbol}&nbsp;/&nbsp;{currency1?.symbol}
+          </DataText>
+          &nbsp;
+          <Badge>
+            <BadgeText>{basisPointsToPercent(feeAmount / 100).toSignificant()}%</BadgeText>
+          </Badge>
+        </PrimaryPositionIdData>
+        <BadgeWrapper>
+          {outOfRange ? (
+            <Badge variant={BadgeVariant.WARNING}>
+              <AlertTriangle width={14} height={14} style={{ marginRight: '4px' }} />
+              &nbsp;
+              <BadgeText>{t('Out of range')}</BadgeText>
+            </Badge>
+          ) : (
+            <Badge variant={BadgeVariant.DEFAULT}>
+              <ActiveDot /> &nbsp;
+              <BadgeText>{t('Active')}</BadgeText>
+            </Badge>
+          )}
+        </BadgeWrapper>
+      </LabelData>
+      <RangeData>
+        {price0Lower && price1Lower && price0Upper && price1Upper ? (
+          <>
+            <DataLineItem>
+              {formatPrice(price0Lower, 4)} <DoubleArrow>↔</DoubleArrow> {formatPrice(price0Upper, 4)}{' '}
+              {currency0?.symbol}&nbsp;/&nbsp;
+              {currency1?.symbol}
+            </DataLineItem>
+            <DataLineItem>
+              {formatPrice(price1Lower, 4)} <DoubleArrow>↔</DoubleArrow> {formatPrice(price1Upper, 4)}{' '}
+              {currency1?.symbol}&nbsp;/&nbsp;
+              {currency0?.symbol}
+            </DataLineItem>
+          </>
+        ) : (
+          <Loader />
+        )}
+      </RangeData>
+      <AmountData>
+        {!poolLoading ? (
+          <>
+            <DataLineItem>
+              {formattedAmount0}&nbsp;{currency0?.symbol}
+            </DataLineItem>
+            <DataLineItem>
+              {formattedAmount1}&nbsp;{currency1?.symbol}
+            </DataLineItem>
+          </>
+        ) : (
+          <Loader />
+        )}
+      </AmountData>
+      <FeeData>
+        <DataLineItem>
+          {feeGrowthInside0LastX128.toString()}&nbsp;{currency0?.symbol}
+        </DataLineItem>
+        <DataLineItem>
+          {feeGrowthInside1LastX128.toString()}&nbsp;{currency1?.symbol}
+        </DataLineItem>
+      </FeeData>
+    </Row>
+  )
+}

src/constants/index.ts

 import { ChainId, Percent, Token, WETH9 } from '@uniswap/sdk-core'
 import { AbstractConnector } from '@web3-react/abstract-connector'
 import JSBI from 'jsbi'
-
 import { fortmatic, injected, portis, walletconnect, walletlink } from '../connectors'
 
 export const MULTICALL_ADDRESSES: { [chainId in ChainId]: string } = {

src/hooks/useContract.ts

-import { UniswapV3Pool } from './../types/v3/UniswapV3Pool.d'
 import { Contract } from '@ethersproject/contracts'
 import { abi as GOVERNANCE_ABI } from '@uniswap/governance/build/GovernorAlpha.json'
 import { abi as UNI_ABI } from '@uniswap/governance/build/Uni.json'
@@ -6,10 +5,9 @@ import { abi as STAKING_REWARDS_ABI } from '@uniswap/liquidity-staker/build/Stak
 import { abi as MERKLE_DISTRIBUTOR_ABI } from '@uniswap/merkle-distributor/build/MerkleDistributor.json'
 import { ChainId, WETH9 } from '@uniswap/sdk-core'
 import { abi as IUniswapV2PairABI } from '@uniswap/v2-core/build/IUniswapV2Pair.json'
-import { abi as NFTPositionManagerABI } from '@uniswap/v3-periphery/artifacts/contracts/NonfungiblePositionManager.sol/NonfungiblePositionManager.json'
 import { abi as V3FactoryABI } from '@uniswap/v3-core/artifacts/contracts/UniswapV3Factory.sol/UniswapV3Factory.json'
-import { abi as TickLensABI } from '@uniswap/v3-periphery/artifacts/contracts/lens/TickLens.sol/TickLens.json'
 import { abi as V3PoolABI } from '@uniswap/v3-core/artifacts/contracts/UniswapV3Pool.sol/UniswapV3Pool.json'
+import { abi as TickLensABI } from '@uniswap/v3-periphery/artifacts/contracts/lens/TickLens.sol/TickLens.json'
 
 import ARGENT_WALLET_DETECTOR_ABI from 'abis/argent-wallet-detector.json'
 import ENS_PUBLIC_RESOLVER_ABI from 'abis/ens-public-resolver.json'
@@ -17,6 +15,7 @@ import ENS_ABI from 'abis/ens-registrar.json'
 import ERC20_ABI from 'abis/erc20.json'
 import ERC20_BYTES32_ABI from 'abis/erc20_bytes32.json'
 import MIGRATOR_ABI from 'abis/migrator.json'
+import MULTICALL_ABI from 'abis/multicall2.json'
 import { Unisocks } from 'abis/types/Unisocks'
 import UNISOCKS_ABI from 'abis/unisocks.json'
 import WETH_ABI from 'abis/weth.json'
@@ -28,11 +27,11 @@ import {
   UNI,
   MULTICALL_ADDRESSES,
 } from 'constants/index'
-import MULTICALL_ABI from 'abis/multicall2.json'
+import { abi as NFTPositionManagerABI } from '@uniswap/v3-periphery/artifacts/contracts/NonfungiblePositionManager.sol/NonfungiblePositionManager.json'
 import { V1_EXCHANGE_ABI, V1_FACTORY_ABI, V1_FACTORY_ADDRESSES } from 'constants/v1'
-import { NONFUNGIBLE_POSITION_MANAGER_ADDRESSES, FACTORY_ADDRESSES, TICK_LENS_ADDRESSES } from 'constants/v3'
+import { FACTORY_ADDRESSES, NONFUNGIBLE_POSITION_MANAGER_ADDRESSES, TICK_LENS_ADDRESSES } from 'constants/v3'
 import { useMemo } from 'react'
-import { TickLens, UniswapV3Factory } from 'types/v3'
+import { TickLens, UniswapV3Factory, UniswapV3Pool } from 'types/v3'
 import { NonfungiblePositionManager } from 'types/v3/NonfungiblePositionManager'
 import { getContract } from 'utils'
 import { useActiveWeb3React } from './index'

src/hooks/useV3PositionManager.ts

-import { OptionalMethodInputs, useSingleCallResult, useSingleContractMultipleData } from 'state/multicall/hooks'
-import { Position } from 'types/position'
-import { useV3NFTPositionManagerContract } from './useContract'
-
-interface UseV3PositionsResults {
-  error?: (string | boolean) | (string | boolean)[]
-  loading: boolean
-  positions: Position[]
-}
-export function useV3Positions(account: string | null | undefined): UseV3PositionsResults {
-  const positionManager = useV3NFTPositionManagerContract()
-  let loading = false
-  let error: any
-  const {
-    error: balanceOfError,
-    loading: balanceOfLoading,
-    result: balanceOfResult,
-  } = useSingleCallResult(positionManager, 'balanceOf', [account || undefined])
-
-  loading = balanceOfLoading
-  error = balanceOfError
-
-  const tokenOfOwnerByIndexArgs: OptionalMethodInputs[] = balanceOfResult
-    ? balanceOfResult.filter((x) => Boolean(x)).map((index) => [account, index])
-    : []
-  const tokensCallResults = useSingleContractMultipleData(
-    positionManager,
-    'tokenOfOwnerByIndex',
-    tokenOfOwnerByIndexArgs
-  )
-
-  const callData: any[] = []
-  tokensCallResults.forEach(({ error: e, loading: l, result: data }) => {
-    if (e && !error) {
-      error = e
-    }
-    loading = loading || l
-    if (data) {
-      callData.push([account, data])
-    }
-  })
-
-  const positionsCallResults = useSingleContractMultipleData(positionManager, 'positions', callData)
-
-  const positions: any[] = []
-  positionsCallResults.forEach(({ error: e, loading: l, result: data }) => {
-    if (e) {
-      if (!error) {
-        error = e
-      }
-      if (error && Array.isArray(error)) {
-        error = [...error, error]
-      }
-    }
-    loading = loading || l
-
-    if (data) {
-      positions.push(data)
-    }
-  })
-
-  return { error, loading, positions }
-}

src/hooks/useV3Positions.ts

+import { useSingleCallResult, useSingleContractMultipleData } from 'state/multicall/hooks'
+import { useMemo } from 'react'
+import { PositionDetails } from 'types/position'
+import { useV3NFTPositionManagerContract } from './useContract'
+import JSBI from 'jsbi'
+
+interface UseV3PositionsResults {
+  error?: (string | boolean) | (string | boolean)[]
+  loading: boolean
+  positions: PositionDetails[] | undefined
+}
+export function useV3Positions(account: string | null | undefined): UseV3PositionsResults {
+  const positionManager = useV3NFTPositionManagerContract()
+
+  const { loading: balanceLoading, error: balanceError, result: balanceResult } = useSingleCallResult(
+    positionManager ?? undefined,
+    'balanceOf',
+    [account ?? undefined]
+  )
+
+  const accountBalance: number | undefined = balanceResult
+    ? parseFloat(JSBI.BigInt(balanceResult[0]).toString())
+    : undefined
+
+  const positionIndicesArgs = useMemo(() => {
+    if (accountBalance && account) {
+      const tokenRequests = []
+      for (let i = 0; i < accountBalance; i++) {
+        tokenRequests.push([account, i])
+      }
+      return tokenRequests
+    }
+    return []
+  }, [account, accountBalance])
+
+  const positionIndicesResults = useSingleContractMultipleData(
+    positionManager ?? undefined,
+    'tokenOfOwnerByIndex',
+    positionIndicesArgs
+  )
+  const positionIndicesLoading = useMemo(() => positionIndicesResults.some(({ loading }) => loading), [
+    positionIndicesResults,
+  ])
+  const positionIndicesError = useMemo(() => positionIndicesResults.some(({ error }) => error), [
+    positionIndicesResults,
+  ])
+
+  const formattedIndicesArgs = useMemo(() => {
+    if (positionIndicesResults && account) {
+      return positionIndicesResults.map((call) => {
+        return [call.result?.[0] ? parseFloat(JSBI.BigInt(call.result?.[0]).toString()) : undefined]
+      })
+    }
+    return []
+  }, [account, positionIndicesResults])
+
+  const positionsResults = useSingleContractMultipleData(
+    positionManager ?? undefined,
+    'positions',
+    formattedIndicesArgs
+  )
+  const positionResultsLoading = useMemo(() => positionsResults.some(({ loading }) => loading), [positionsResults])
+  const positionResultsError = useMemo(() => positionsResults.some(({ error }) => error), [positionsResults])
+
+  const loading = balanceLoading || positionResultsLoading || positionIndicesLoading
+
+  const positions = useMemo(() => {
+    if (positionsResults && !loading) {
+      return positionsResults.map((entry) => {
+        const rp = entry.result
+        return {
+          fee: rp?.fee,
+          feeGrowthInside0LastX128: rp?.feeGrowthInside0LastX128,
+          feeGrowthInside1LastX128: rp?.feeGrowthInside1LastX128,
+          liquidity: rp?.liquidity,
+          nonce: rp?.nonce,
+          operator: rp?.operator,
+          tickLower: rp?.tickLower,
+          tickUpper: rp?.tickUpper,
+          token0: rp?.token0,
+          token1: rp?.token1,
+          tokensOwed0: rp?.tokensOwed0,
+          tokensOwed1: rp?.tokensOwed1,
+        }
+      })
+    }
+    return undefined
+  }, [positionsResults, loading])
+
+  return {
+    error: balanceError || positionIndicesError || positionResultsError,
+    loading,
+    positions,
+  }
+}

src/pages/App.tsx

@@ -32,6 +32,7 @@ import VotePage from './Vote/VotePage'
 import { RedirectDuplicateTokenIdsV2 } from './AddLiquidityV2/redirects'
 import AddLiquidity from './AddLiquidity'
 import AddLiquidityV2 from './AddLiquidityV2'
+import { PositionPage } from './Pool/PositionPage'
 
 const AppWrapper = styled.div`
   display: flex;
@@ -106,11 +107,11 @@ export default function App() {
               <Route exact strict path="/find" component={PoolFinder} />
               <Route exact strict path="/pool/v2" component={PoolV2} />
               <Route exact strict path="/pool" component={Pool} />
+              <Route exact strict path="/pool/:positionIndex" component={PositionPage} />
 
               <Route exact path="/add" component={AddLiquidity} />
               <Route exact path="/add/v2/" component={AddLiquidityV2} />
               <Route exact path="/add/v2/:currencyIdA" component={AddLiquidityV2} />
-
               <Route exact path="/add/:currencyIdA" component={AddLiquidity} />
               <Route exact strict path="/add/v2/:currencyIdA?/:currencyIdB?" component={RedirectDuplicateTokenIdsV2} />
               <Route

src/pages/Pool/PositionPage.tsx

+import React, { useMemo } from 'react'
+import { Position } from '@uniswap/v3-sdk'
+import { PoolState, usePool } from 'data/Pools'
+import { useActiveWeb3React } from 'hooks'
+import { useToken } from 'hooks/Tokens'
+import { useV3Positions } from 'hooks/useV3Positions'
+import { RouteComponentProps } from 'react-router-dom'
+import { unwrappedToken } from 'utils/wrappedCurrency'
+import { LoadingRows } from './styleds'
+import styled from 'styled-components'
+import { AutoColumn } from 'components/Column'
+import { RowBetween, RowFixed } from 'components/Row'
+import DoubleCurrencyLogo from 'components/DoubleLogo'
+import { TYPE } from 'theme'
+import Badge, { BadgeVariant } from 'components/Badge'
+import { basisPointsToPercent } from 'utils'
+import { ButtonPrimary } from 'components/Button'
+import { DarkCard } from 'components/Card'
+import CurrencyLogo from 'components/CurrencyLogo'
+import { AlertTriangle } from 'react-feather'
+import { useTranslation } from 'react-i18next'
+
+const PageWrapper = styled.div`
+  min-width: 800px;
+`
+
+const BadgeWrapper = styled.div`
+  font-size: 14px;
+`
+
+const BadgeText = styled.div`
+  font-weight: 500;
+  font-size: 14px;
+`
+const ResponsiveGrid = styled.div`
+  width: 100%;
+  display: grid;
+  grid-gap: 1em;
+
+  grid-template-columns: 1.5fr repeat(4, 1fr);
+
+  @media screen and (max-width: 900px) {
+    grid-template-columns: 1.5fr repeat(4, 1fr);
+    & :nth-child(4) {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: 700px) {
+    grid-template-columns: 20px 1.5fr repeat(3, 1fr);
+    & :nth-child(4) {
+      display: none;
+    }
+    & :nth-child(5) {
+      display: none;
+    }
+  }
+`
+
+// responsive text
+const Label = styled(TYPE.label)<{ end?: boolean }>`
+  display: flex;
+  font-size: 16px;
+  justify-content: ${({ end }) => (end ? 'flex-end' : 'flex-start')};
+  align-items: center;
+`
+
+const ActiveDot = styled.span`
+  background-color: ${({ theme }) => theme.success};
+  border-radius: 50%;
+  height: 8px;
+  width: 8px;
+  margin-right: 4px;
+`
+
+export function PositionPage({
+  match: {
+    params: { positionIndex },
+  },
+}: RouteComponentProps<{ positionIndex?: string }>) {
+  const { account } = useActiveWeb3React()
+  const { t } = useTranslation()
+
+  const { loading, positions } = useV3Positions(account ?? undefined)
+
+  const positionDetails = positionIndex && positions ? positions[parseInt(positionIndex)] : undefined
+
+  const {
+    token0: token0Address,
+    token1: token1Address,
+    fee: feeAmount,
+    liquidity,
+    tickLower,
+    tickUpper,
+    // feeGrowthInside0LastX128,
+    // feeGrowthInside1LastX128,
+  } = positionDetails || {}
+
+  const token0 = useToken(token0Address)
+  const token1 = useToken(token1Address)
+
+  const currency0 = token0 ? unwrappedToken(token0) : undefined
+  const currency1 = token1 ? unwrappedToken(token1) : undefined
+
+  // construct Position from details returned
+  const [poolState, pool] = usePool(currency0 ?? undefined, currency1 ?? undefined, feeAmount)
+  const position = useMemo(() => {
+    if (pool && tickLower && tickUpper) {
+      return new Position({ pool, liquidity, tickLower, tickUpper })
+    }
+    return undefined
+  }, [liquidity, pool, tickLower, tickUpper])
+
+  // const price0Lower = position ? position.token0PriceLower : undefined
+  // const price0Upper = position ? position.token0PriceUpper : undefined
+  // const price1Lower = price0Upper ? price0Upper.invert() : undefined
+  // const price1Upper = price0Lower ? price0Lower.invert() : undefined
+
+  // check if price is within range
+  const outOfRange: boolean =
+    pool && tickLower && tickUpper ? pool.tickCurrent < tickLower || pool.tickCurrent > tickUpper : false
+
+  return loading || poolState === PoolState.LOADING || !feeAmount ? (
+    <LoadingRows>
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+    </LoadingRows>
+  ) : (
+    <PageWrapper>
+      <AutoColumn gap="lg">
+        <AutoColumn gap="sm">
+          <RowBetween>
+            <RowFixed>
+              <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={20} margin={true} />
+              <TYPE.label fontSize={'20px'} mr="10px">
+                &nbsp;{currency0?.symbol}&nbsp;/&nbsp;{currency1?.symbol}
+              </TYPE.label>
+              <Badge>
+                <BadgeText>{basisPointsToPercent(feeAmount / 100).toSignificant()}%</BadgeText>
+              </Badge>
+            </RowFixed>
+            <ButtonPrimary width="200px" padding="8px" borderRadius="12px">
+              Remove liquidity
+            </ButtonPrimary>
+          </RowBetween>
+          <RowBetween>
+            <BadgeWrapper>
+              {outOfRange ? (
+                <Badge variant={BadgeVariant.WARNING}>
+                  <AlertTriangle width={14} height={14} style={{ marginRight: '4px' }} />
+                  &nbsp;
+                  <BadgeText>{t('Out of range')}</BadgeText>
+                </Badge>
+              ) : (
+                <Badge variant={BadgeVariant.DEFAULT}>
+                  <ActiveDot /> &nbsp;
+                  <BadgeText>{t('Active')}</BadgeText>
+                </Badge>
+              )}
+            </BadgeWrapper>
+          </RowBetween>
+        </AutoColumn>
+        <DarkCard>
+          <AutoColumn gap="lg">
+            <ResponsiveGrid>
+              <Label>Tokens</Label>
+              <Label end={true}>Entry</Label>
+              <Label end={true}>Current</Label>
+              <Label end={true}>Fees</Label>
+              <Label end={true}>USD Value</Label>
+            </ResponsiveGrid>
+            <ResponsiveGrid>
+              <RowFixed>
+                <CurrencyLogo currency={currency0} />
+                <TYPE.label ml="10px">{currency0?.symbol}</TYPE.label>
+              </RowFixed>
+              <Label end={true}>{position?.amount0.toSignificant(4)}</Label>
+              <Label end={true}>{position?.amount0.toSignificant(4)}</Label>
+              <Label end={true}>1</Label>
+              <Label end={true}>$100</Label>
+            </ResponsiveGrid>
+            <ResponsiveGrid>
+              <RowFixed>
+                <CurrencyLogo currency={currency1} />
+                <TYPE.label ml="10px">{currency1?.symbol}</TYPE.label>
+              </RowFixed>
+              <Label end={true}>{position?.amount1.toSignificant(4)}</Label>
+              <Label end={true}>{position?.amount1.toSignificant(4)}</Label>
+              <Label end={true}>1</Label>
+              <Label end={true}>$100</Label>
+            </ResponsiveGrid>
+          </AutoColumn>
+        </DarkCard>
+        <DarkCard>
+          <AutoColumn gap="lg">
+            <TYPE.label>Position Limits</TYPE.label>
+          </AutoColumn>
+        </DarkCard>
+      </AutoColumn>
+    </PageWrapper>
+  )
+}

src/pages/Pool/index.tsx

+import React, { useContext, useMemo } from 'react'
 import Badge, { BadgeVariant } from 'components/Badge'
 import { ButtonGray, ButtonPrimary } from 'components/Button'
 import { AutoColumn } from 'components/Column'
@@ -6,14 +7,15 @@ import { SwapPoolTabs } from 'components/NavigationTabs'
 import PositionList from 'components/PositionList'
 import { RowBetween, RowFixed } from 'components/Row'
 import { useActiveWeb3React } from 'hooks'
-import { useV3Positions } from 'hooks/useV3PositionManager'
-import React, { useContext, useMemo } from 'react'
+import { useV3Positions } from 'hooks/useV3Positions'
 import { BookOpen, ChevronDown, Download, Inbox, Info, PlusCircle } from 'react-feather'
 import { useTranslation } from 'react-i18next'
-import styled, { ThemeContext } from 'styled-components'
 import { Link } from 'react-router-dom'
 import { useWalletModalToggle } from 'state/application/hooks'
+import styled, { ThemeContext } from 'styled-components'
 import { HideSmall, MEDIA_WIDTHS, TYPE } from 'theme'
+import { PositionDetails } from 'types/position'
+import { LoadingRows } from './styleds'
 
 const PageWrapper = styled(AutoColumn)`
   max-width: 870px;
@@ -91,24 +93,27 @@ const MainContentWrapper = styled.main`
 `
 export default function Pool() {
   const { account } = useActiveWeb3React()
-  const { error, loading, positions } = useV3Positions(account)
   const toggleWalletModal = useWalletModalToggle()
   const { t } = useTranslation()
   const theme = useContext(ThemeContext)
 
+  const { error, positions } = useV3Positions(account)
+
   if (error) {
     console.error('error fetching v3 positions', error)
   }
 
-  const hasPositions = Boolean(positions?.length > 0)
+  const hasPositions = useMemo(() => Boolean(positions && positions.length > 0), [positions])
 
   const numInactivePositions = useMemo(() => {
-    return positions.reduce((acc: any, position: any) => {
-      const { tokenAmount0, tokenAmount1 } = position
-      const limitCrossed = tokenAmount0.equalTo(BigInt(0)) || tokenAmount1.equalTo(BigInt(0))
-      return limitCrossed ? acc + 1 : acc
-    }, 0)
-  }, [positions])
+    return hasPositions && positions
+      ? positions.reduce((acc: any, position: PositionDetails) => {
+          const { tokensOwed0, tokensOwed1 } = position
+          const limitCrossed = tokensOwed0.eq(0) || tokensOwed1.eq(0)
+          return limitCrossed ? acc + 1 : acc
+        }, 0)
+      : 0
+  }, [positions, hasPositions])
 
   const hasV2Liquidity = true
   const showMigrateHeaderLink = Boolean(hasV2Liquidity && hasPositions)
@@ -182,9 +187,9 @@ export default function Pool() {
             </TitleRow>
 
             <MainContentWrapper>
-              {hasPositions ? (
-                <PositionList loading={loading} positions={positions} />
-              ) : (
+              {hasPositions && positions ? (
+                <PositionList positions={positions} />
+              ) : positions && !hasPositions ? (
                 <NoLiquidity>
                   <TYPE.largeHeader color={theme.text3} textAlign="center">
                     <Inbox />
@@ -208,6 +213,21 @@ export default function Pool() {
                     )
                   )}
                 </NoLiquidity>
+              ) : (
+                <LoadingRows>
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                  <div />
+                </LoadingRows>
               )}
             </MainContentWrapper>
           </AutoColumn>

src/pages/Pool/styleds.tsx

 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled, { keyframes } from 'styled-components'
 
 export const Wrapper = styled.div`
   position: relative;
@@ -55,3 +55,40 @@ export const Dots = styled.span`
     }
   }
 `
+
+const loadingAnimation = keyframes`
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+`
+
+export const LoadingRows = styled.div`
+  display: grid;
+  grid-column-gap: 0.5em;
+  grid-row-gap: 0.8em;
+  grid-template-columns: repeat(3, 1fr);
+  & > div {
+    animation: ${loadingAnimation} 1.5s infinite;
+    animation-fill-mode: both;
+    background: linear-gradient(
+      to left,
+      ${({ theme }) => theme.bg1} 25%,
+      ${({ theme }) => theme.bg2} 50%,
+      ${({ theme }) => theme.bg1} 75%
+    );
+    background-size: 400%;
+    border-radius: 12px;
+    height: 2.4em;
+    will-change: background-position;
+  }
+  & > div:nth-child(4n + 1) {
+    grid-column: 1 / 3;
+  }
+  & > div:nth-child(4n) {
+    grid-column: 3 / 4;
+    margin-bottom: 2em;
+  }
+`

src/state/mint/hooks.ts

@@ -145,7 +145,7 @@ export function useDerivedMintInfo(
   const price = useMemo(() => {
     // if no liquidity use typed value
     if (noLiquidity) {
-      const parsedAmount = tryParseAmount(startPriceTypedValue, tokenA)
+      const parsedAmount = tryParseAmount(startPriceTypedValue, tokenB)
       if (parsedAmount && tokenA && tokenB) {
         const amountOne = tryParseAmount('1', tokenA)
         return amountOne ? new Price(tokenA, tokenB, amountOne.raw, parsedAmount.raw) : undefined

src/state/multicall/hooks.ts

@@ -108,7 +108,7 @@ function useCallsData(calls: (Call | undefined)[], options?: ListenerOptions): C
   )
 }
 
-interface CallState {
+export interface CallState {
   readonly valid: boolean
   // the result, or undefined if loading or errored/no data
   readonly result: Result | undefined

src/types/position.d.ts

-import { BigNumberish } from '@ethersproject/bignumber'
-
-export interface Position {
-  feesEarned: Record<string, BigNumberish>
-  feeLevel: FEE_BIPS
-  tokenAmount0: TokenAmount
-  tokenAmount1: TokenAmount
-  tickLower: BigNumberish
-  tickUpper: BigNumberish
+export interface PositionDetails {
+  nonce: BigNumber
+  operator: string
+  token0: string
+  token1: string
+  fee: number
+  tickLower: number
+  tickUpper: number
+  liquidity: BigNumber
+  feeGrowthInside0LastX128: BigNumber
+  feeGrowthInside1LastX128: BigNumber
+  tokensOwed0: BigNumber
+  tokensOwed1: BigNumber
 }

src/utils/formatTokenAmount.ts

+import { Price, TokenAmount } from '@uniswap/sdk-core'
+
+export function formatTokenAmount(amount: TokenAmount | undefined, sigFigs: number) {
+  if (!amount) {
+    return '-'
+  }
+
+  if (parseFloat(amount.toFixed(sigFigs)) < 0.0001) {
+    return '<0.0001'
+  }
+
+  return amount.toSignificant(sigFigs)
+}
+
+export function formatPrice(price: Price | undefined, sigFigs: number) {
+  if (!price) {
+    return '-'
+  }
+
+  if (parseFloat(price.toFixed(sigFigs)) < 0.0001) {
+    return '<0.0001'
+  }
+
+  return price.toSignificant(sigFigs)
+}

yarn.lock

@@ -2485,17 +2485,17 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@storybook/addon-actions@6.2.7", "@storybook/addon-actions@^6.1.17":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.2.7.tgz#ca0500f5eb7017d3e2b4f6ee570c3650e495c7d9"
-  integrity sha512-v0zgJfrgTY5di7pCUZnA5CLSu8LNcq2rwLuQ2I3qiLYszZ9Gdst5kdekMPgiz7Dk8c6GOpml/IMISnEUKBskVQ==
-  dependencies:
-    "@storybook/addons" "6.2.7"
-    "@storybook/api" "6.2.7"
-    "@storybook/client-api" "6.2.7"
-    "@storybook/components" "6.2.7"
-    "@storybook/core-events" "6.2.7"
-    "@storybook/theming" "6.2.7"
+"@storybook/addon-actions@6.2.8", "@storybook/addon-actions@^6.1.17":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.2.8.tgz#e11d01a35e4685e692015a5051c583a0931ecd4a"
+  integrity sha512-bQE9rmVGThniXWxz57Py5bqC4my7DLCK3gT4U4cXv31zH+NMlJqSNHHfHf/Ob43fTdoCyLcB3vlWsPLra7WOCg==
+  dependencies:
+    "@storybook/addons" "6.2.8"
+    "@storybook/api" "6.2.8"
+    "@storybook/client-api" "6.2.8"
+    "@storybook/components" "6.2.8"
+    "@storybook/core-events" "6.2.8"
+    "@storybook/theming" "6.2.8"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
     global "^4.4.0"
@@ -2508,17 +2508,17 @@
     util-deprecate "^1.0.2"
     uuid-browser "^3.1.0"
 
-"@storybook/addon-backgrounds@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.2.7.tgz#bff551aac15896282ee06fc323fd38cbe4a570c9"
-  integrity sha512-rXig9GtAAIVre8UaL9JeYi52bGA+DUQnO4fxQlN0x7s4Zftjz97m4xcsmg2UiC/HO9mG3SyMtk8eefPUSya+dg==
-  dependencies:
-    "@storybook/addons" "6.2.7"
-    "@storybook/api" "6.2.7"
-    "@storybook/client-logger" "6.2.7"
-    "@storybook/components" "6.2.7"
-    "@storybook/core-events" "6.2.7"
-    "@storybook/theming" "6.2.7"
+"@storybook/addon-backgrounds@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.2.8.tgz#9fb199c283c346335503e8a6cd18b0839aea9b8e"
+  integrity sha512-nsKpoDIYsiYLWe+NCIMWkdUhQIUw0wcfAtSS/+Lm9WXlJ4ateB0guxdZn+676nt1FbO9wR22QQYwLHvUED4v5A==
+  dependencies:
+    "@storybook/addons" "6.2.8"
+    "@storybook/api" "6.2.8"
+    "@storybook/client-logger" "6.2.8"
+    "@storybook/components" "6.2.8"
+    "@storybook/core-events" "6.2.8"
+    "@storybook/theming" "6.2.8"
     core-js "^3.8.2"
     global "^4.4.0"
     memoizerific "^1.11.3"
@@ -2526,24 +2526,24 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-controls@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.2.7.tgz#bfa829106ca4d4247108fe864d7dd96afbec0c97"
-  integrity sha512-0FFcFtIffQWwV5aTTq7TDn2dq9M0+oU4q48ac+tOc2Ql8RfM4sYhCc8D30PhSCtc0/xH1xw/aHzotCkDqqAcrg==
-  dependencies:
-    "@storybook/addons" "6.2.7"
-    "@storybook/api" "6.2.7"
-    "@storybook/client-api" "6.2.7"
-    "@storybook/components" "6.2.7"
-    "@storybook/node-logger" "6.2.7"
-    "@storybook/theming" "6.2.7"
+"@storybook/addon-controls@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.2.8.tgz#15c79b6c1daae218dcabf240bc0013e2c68bf208"
+  integrity sha512-VpMo5qPlRVWr1GALWOCRDuompYZm+7z0FRc3x71AkT3sCIZdiPjHHMt7IkG14ranEumusNtBZ2ez8NgKX0mDdQ==
+  dependencies:
+    "@storybook/addons" "6.2.8"
+    "@storybook/api" "6.2.8"
+    "@storybook/client-api" "6.2.8"
+    "@storybook/components" "6.2.8"
+    "@storybook/node-logger" "6.2.8"
+    "@storybook/theming" "6.2.8"
     core-js "^3.8.2"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.2.7.tgz#1bcc9b0ac6e1fdb96a8614c93ae2bf11fccb189e"
-  integrity sha512-IJUldTCrV3zXU9WVRBWDrhB2Gqh1zqXefhCIBt3JznglBZ8ns5XcI6BLPNSLGyzHnP8vv0n4GaWbK2oUq4FbnA==
+"@storybook/addon-docs@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.2.8.tgz#b5d039ad04805eceb99dbbb60a45c6d49096f0c3"
+  integrity sha512-IWnb10ImrzRMT2qw9785p3wYEI6U9gjsg6H2zKcRJQP5dEboqeX3OFjUKfXkaIWii4nz8MtJjBg5t4BdEYqLdw==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/generator" "^7.12.11"
@@ -2554,19 +2554,19 @@
     "@mdx-js/loader" "^1.6.22"
     "@mdx-js/mdx" "^1.6.22"
     "@mdx-js/react" "^1.6.22"
-    "@storybook/addons" "6.2.7"
-    "@storybook/api" "6.2.7"
-    "@storybook/builder-webpack4" "6.2.7"
-    "@storybook/client-api" "6.2.7"
-    "@storybook/client-logger" "6.2.7"
-    "@storybook/components" "6.2.7"
-    "@storybook/core" "6.2.7"
-    "@storybook/core-events" "6.2.7"
+    "@storybook/addons" "6.2.8"
+    "@storybook/api" "6.2.8"
+    "@storybook/builder-webpack4" "6.2.8"
+    "@storybook/client-api" "6.2.8"
+    "@storybook/client-logger" "6.2.8"
+    "@storybook/components" "6.2.8"
+    "@storybook/core" "6.2.8"
+    "@storybook/core-events" "6.2.8"
     "@storybook/csf" "0.0.1"
-    "@storybook/node-logger" "6.2.7"
-    "@storybook/postinstall" "6.2.7"
-    "@storybook/source-loader" "6.2.7"
-    "@storybook/theming" "6.2.7"
+    "@storybook/node-logger" "6.2.8"
+    "@storybook/postinstall" "6.2.8"
+    "@storybook/source-loader" "6.2.8"
+    "@storybook/theming" "6.2.8"
     acorn "^7.4.1"
     acorn-jsx "^5.3.1"
     acorn-walk "^7.2.0"
@@ -2589,33 +2589,33 @@
     util-deprecate "^1.0.2"
 
 "@storybook/addon-essentials@^6.1.17":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.2.7.tgz#cb51fea1f37e827c1f06367d687fcaa4c186d58c"
-  integrity sha512-7vE1MBgJ1nQyK/e13NB45rp6dWGHpM6DxfN0ft2XlzHAUn4cPlNwj8x4m9dprIhJTEujum8C9cWWWU7q4LoaoQ==
-  dependencies:
-    "@storybook/addon-actions" "6.2.7"
-    "@storybook/addon-backgrounds" "6.2.7"
-    "@storybook/addon-controls" "6.2.7"
-    "@storybook/addon-docs" "6.2.7"
-    "@storybook/addon-toolbars" "6.2.7"
-    "@storybook/addon-viewport" "6.2.7"
-    "@storybook/addons" "6.2.7"
-    "@storybook/api" "6.2.7"
-    "@storybook/node-logger" "6.2.7"
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.2.8.tgz#0a2551d73362f8e7d9758049b7ff3ddbf1f79e10"
+  integrity sha512-co2+/AYCWqQiokKJbVfJyQvcj0juMGXjLv57kZfJM0L0gP9i4rGtyTjy5VlmB8BmSs650ZuaKgShioC//gUr+g==
+  dependencies:
+    "@storybook/addon-actions" "6.2.8"
+    "@storybook/addon-backgrounds" "6.2.8"
+    "@storybook/addon-controls" "6.2.8"
+    "@storybook/addon-docs" "6.2.8"
+    "@storybook/addon-toolbars" "6.2.8"
+    "@storybook/addon-viewport" "6.2.8"
+    "@storybook/addons" "6.2.8"
+    "@storybook/api" "6.2.8"
+    "@storybook/node-logger" "6.2.8"
     core-js "^3.8.2"
     regenerator-runtime "^0.13.7"
     ts-dedent "^2.0.0"
 
 "@storybook/addon-links@^6.1.17":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.2.7.tgz#02d4636bd1ca26d243f346086d5b280fb70a730b"
-  integrity sha512-pGP3gtZSP9xDbS+KgP0fiTLrhcD8eauOsP0JgzyKVCgKYzG4Yx9xuZBcDCvG25DeczDvTx7kuR6U1TavSYn12w==
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.2.8.tgz#5b9a31d84d6ba93d4d05c6e4779ec99151612252"
+  integrity sha512-r64VQDvWaUaBunY2mBPHYh2oEVYNycB/EH4WvXK1it3hXs1XGCIWLap4lKvIcT894XhykS8Jxx/s8SUGIvRzBA==
   dependencies:
-    "@storybook/addons" "6.2.7"
-    "@storybook/client-logger" "6.2.7"
-    "@storybook/core-events" "6.2.7"
+    "@storybook/addons" "6.2.8"
+    "@storybook/client-logger" "6.2.8"
+    "@storybook/core-events" "6.2.8"
     "@storybook/csf" "0.0.1"
-    "@storybook/router" "6.2.7"
+    "@storybook/router" "6.2.8"
     "@types/qs" "^6.9.5"
     core-js "^3.8.2"
     global "^4.4.0"
@@ -2624,62 +2624,62 @@
     regenerator-runtime "^0.13.7"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-toolbars@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.2.7.tgz#9b6d3b42725aac754d4d533a501db51e6d2b314c"
-  integrity sha512-E7oK63DNg9w9F74TaMMopLfQj2rFAA4FsBAlaTNT8reHSqOCO+boLo+SghVoMChD4Jgtq2gCZlH+eA3yy9JEVQ==
+"@storybook/addon-toolbars@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.2.8.tgz#ab6dd7e080feed25d562d468316ac8e47b745ee4"
+  integrity sha512-BInsquQhEN/AD/any2tRZwreRQVueGrHg9bu1FnJzigpoUJv8VuDwOSIY1Fr1ZfMljhwVxwM5wGmHdVtG+SwDQ==
   dependencies:
-    "@storybook/addons" "6.2.7"
-    "@storybook/api" "6.2.7"
-    "@storybook/client-api" "6.2.7"
-    "@storybook/components" "6.2.7"
+    "@storybook/addons" "6.2.8"
+    "@storybook/api" "6.2.8"
+    "@storybook/client-api" "6.2.8"
+    "@storybook/components" "6.2.8"
     core-js "^3.8.2"
 
-"@storybook/addon-viewport@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.2.7.tgz#37b447658bbbb6b2f3e15f3a769d3457b8fab398"
-  integrity sha512-kpR39PmWzbfB06sdE5LRI9xmihpROgyOCM8bvoZ2DdR+BbGMiWtlkfQZ3U6sQoBVwkrwIKITLhhHMsw9ogJdfA==
-  dependencies:
-    "@storybook/addons" "6.2.7"
-    "@storybook/api" "6.2.7"
-    "@storybook/client-logger" "6.2.7"
-    "@storybook/components" "6.2.7"
-    "@storybook/core-events" "6.2.7"
-    "@storybook/theming" "6.2.7"
+"@storybook/addon-viewport@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.2.8.tgz#65e6d028c757d18a3bb889e23bb80985d59b685b"
+  integrity sha512-SQvVQ59yGIH1BoBSZNssVeaHAUxCiORDzXzOLK7B6AjKx2hiIgP7+qQlqs2IzWvzdGzTOAZw3JP8+DiOnN1ehg==
+  dependencies:
+    "@storybook/addons" "6.2.8"
+    "@storybook/api" "6.2.8"
+    "@storybook/client-logger" "6.2.8"
+    "@storybook/components" "6.2.8"
+    "@storybook/core-events" "6.2.8"
+    "@storybook/theming" "6.2.8"
     core-js "^3.8.2"
     global "^4.4.0"
     memoizerific "^1.11.3"
     prop-types "^15.7.2"
     regenerator-runtime "^0.13.7"
 
-"@storybook/addons@6.2.7", "@storybook/addons@^6.1.17":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.2.7.tgz#f31343654e564dd91f1ec103f130fa23e996745b"
-  integrity sha512-OHVGzkS2al/jirChr2otampV3oBvODbisUpHMhgUJQ+fcjKdBOXualJFBHhAI2TNwTODfjld+TsKQlBtiMDNDw==
-  dependencies:
-    "@storybook/api" "6.2.7"
-    "@storybook/channels" "6.2.7"
-    "@storybook/client-logger" "6.2.7"
-    "@storybook/core-events" "6.2.7"
-    "@storybook/router" "6.2.7"
-    "@storybook/theming" "6.2.7"
+"@storybook/addons@6.2.8", "@storybook/addons@^6.1.17":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.2.8.tgz#31d9bbd2e8b212490065a25e587621dab83ae392"
+  integrity sha512-zbavtYi66HAtgAROw5h4mR3mD9239ocCaYiasRanM+qyprguIvADPMGzgOA7COVfNI9MiIkxSA+E9oZ1y5PKfQ==
+  dependencies:
+    "@storybook/api" "6.2.8"
+    "@storybook/channels" "6.2.8"
+    "@storybook/client-logger" "6.2.8"
+    "@storybook/core-events" "6.2.8"
+    "@storybook/router" "6.2.8"
+    "@storybook/theming" "6.2.8"
     core-js "^3.8.2"
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
 
-"@storybook/api@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.2.7.tgz#5417dfe0c5a7a49a4e47f5a4c2be7a1bbdb7d5b3"
-  integrity sha512-GKD9b6OkQi7eDlaPmpjSz7MJsPIY+q7eGvBAWkovLXzvfEY6sE6VqUt9aWn3i6IkzqjYF7c+wgQzpA0JBTzH1Q==
+"@storybook/api@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.2.8.tgz#9165b25f8b71e08c4af5a30805407b025fbb5b1f"
+  integrity sha512-jaYT/IzFBUQTx/PqOIBty4HzZnRuk36vsGnBs/CWr8p3JCcnmLRaULsO0Q61rwFj2e4nMFMHEsZXEqRUXk4riw==
   dependencies:
     "@reach/router" "^1.3.4"
-    "@storybook/channels" "6.2.7"
-    "@storybook/client-logger" "6.2.7"
-    "@storybook/core-events" "6.2.7"
+    "@storybook/channels" "6.2.8"
+    "@storybook/client-logger" "6.2.8"
+    "@storybook/core-events" "6.2.8"
     "@storybook/csf" "0.0.1"
-    "@storybook/router" "6.2.7"
+    "@storybook/router" "6.2.8"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.2.7"
+    "@storybook/theming" "6.2.8"
     "@types/reach__router" "^1.3.7"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
@@ -2693,10 +2693,10 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/builder-webpack4@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.2.7.tgz#5d10454788d412340e63403e9b7a2defafe377f4"
-  integrity sha512-cNw/QCauKuye1wmzySHUSaBmtvxK0v627RzX8YDv3M+1vkjZTRPkhhLE6uCZerNETck7doxTKk7x+X0z8nWSeQ==
+"@storybook/builder-webpack4@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.2.8.tgz#af7b7d72617c38b917b2dfc910d268e022090fcd"
+  integrity sha512-7fQ9WQVbL/1SHiu853bTwwN8+CprbXycGd6VjN1PeSRXu8LkVOQWsNhWV3lwykOpDpieYSuZU3aS2ThRtWonGA==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-proposal-class-properties" "^7.12.1"
@@ -2719,20 +2719,20 @@
     "@babel/preset-env" "^7.12.11"
     "@babel/preset-react" "^7.12.10"
     "@babel/preset-typescript" "^7.12.7"
-    "@storybook/addons" "6.2.7"
-    "@storybook/api" "6.2.7"
-    "@storybook/channel-postmessage" "6.2.7"
-    "@storybook/channels" "6.2.7"
-    "@storybook/client-api" "6.2.7"
-    "@storybook/client-logger" "6.2.7"
-    "@storybook/components" "6.2.7"
-    "@storybook/core-common" "6.2.7"
-    "@storybook/core-events" "6.2.7"
-    "@storybook/node-logger" "6.2.7"
-    "@storybook/router" "6.2.7"
+    "@storybook/addons" "6.2.8"
+    "@storybook/api" "6.2.8"
+    "@storybook/channel-postmessage" "6.2.8"
+    "@storybook/channels" "6.2.8"
+    "@storybook/client-api" "6.2.8"
+    "@storybook/client-logger" "6.2.8"
+    "@storybook/components" "6.2.8"
+    "@storybook/core-common" "6.2.8"
+    "@storybook/core-events" "6.2.8"
+    "@storybook/node-logger" "6.2.8"
+    "@storybook/router" "6.2.8"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.2.7"
-    "@storybook/ui" "6.2.7"
+    "@storybook/theming" "6.2.8"
+    "@storybook/ui" "6.2.8"
     "@types/node" "^14.0.10"
     "@types/webpack" "^4.41.26"
     autoprefixer "^9.8.6"
@@ -2769,38 +2769,38 @@
     webpack-hot-middleware "^2.25.0"
     webpack-virtual-modules "^0.2.2"
 
-"@storybook/channel-postmessage@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.2.7.tgz#4025d3746fac9b1c2264001606c7a361d1144417"
-  integrity sha512-l+62q/oZrDeuU3xhqVKnyk7FoUZKwr+4ZG6fXc/uXKCryoACiHT1RvStoX4AZqua9xIxMPpQr36UpHUElNHtyg==
+"@storybook/channel-postmessage@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.2.8.tgz#8624d8da25cd7bb9ff42bd9a46cd4b105d63d3ec"
+  integrity sha512-SWBpZopkMDstxuhC0qzhzZoJUbLpGkNFjy+f8BAXLikOWcEISk5e74dZm3Q20yV10KSRUoIGfPqhHG3QmkLwBA==
   dependencies:
-    "@storybook/channels" "6.2.7"
-    "@storybook/client-logger" "6.2.7"
-    "@storybook/core-events" "6.2.7"
+    "@storybook/channels" "6.2.8"
+    "@storybook/client-logger" "6.2.8"
+    "@storybook/core-events" "6.2.8"
     core-js "^3.8.2"
     global "^4.4.0"
     qs "^6.10.0"
     telejson "^5.1.0"
 
-"@storybook/channels@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.2.7.tgz#b6b64e9f7318afe3a005042395356fd0a878001c"
-  integrity sha512-s79ghVFrbhj4hEt/HPNz7VgOqKQx8S8JozndHQuiE/KSNxfcgGihUXWxIVr7RGAzQcMT3HsAZ0nDbKdusV9jAg==
+"@storybook/channels@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.2.8.tgz#81ec350291adfe479eea69e47f670d64ce0fe8a2"
+  integrity sha512-wn4I1kljyhEYhdJV98SrzQutbeigBwtTtisCdICJrUoENpLBWjZYWg5s+Wam1Q65375ajgIzeL7IZH7/TjxeKg==
   dependencies:
     core-js "^3.8.2"
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/client-api@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.2.7.tgz#7e788314582b9fc09fbd150ef95d0714d5d22b9c"
-  integrity sha512-ZeKNkI1lXW55RnREDYt/wmHi34iMYdRNpybE9QqPBEcFLyvpB7m1bifXxFSgqyMbK+eSTYOfPB1NGQJi77P/iQ==
+"@storybook/client-api@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.2.8.tgz#69b02085fcc4f00798d04ac03e6af514d6c87975"
+  integrity sha512-CZL+ANDUZ2uAdIQ/fe+qLLk7Cba7iT04mwiFIgL4zsG/51RQ8MXksh75RkW1VCLMRiJEuBt3P+Hqe0xs0yLoUw==
   dependencies:
-    "@storybook/addons" "6.2.7"
-    "@storybook/channel-postmessage" "6.2.7"
-    "@storybook/channels" "6.2.7"
-    "@storybook/client-logger" "6.2.7"
-    "@storybook/core-events" "6.2.7"
+    "@storybook/addons" "6.2.8"
+    "@storybook/channel-postmessage" "6.2.8"
+    "@storybook/channels" "6.2.8"
+    "@storybook/client-logger" "6.2.8"
+    "@storybook/core-events" "6.2.8"
     "@storybook/csf" "0.0.1"
     "@types/qs" "^6.9.5"
     "@types/webpack-env" "^1.16.0"
@@ -2815,23 +2815,23 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/client-logger@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.2.7.tgz#deca6d5b157d6ea22ec8f271399e9d10bb293a2c"
-  integrity sha512-IhTaZ3NPrV2g7vnoSuq5yb6QLuXQgD5+iuwzOAXlP8vU5X/Tm3zNr5PtqNjrKg1A3ls6A0pCBa5QctWdN/tnuQ==
+"@storybook/client-logger@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.2.8.tgz#2e32cc9f0b73e29fb386383ab9e927ab6d3668fc"
+  integrity sha512-O1pmTmKUwR8KW1Bv4o2z3LII/g5PQqykIvUMEoDLjL4ogS7aDaxXZSlONSPpCyGYcH9pVdHiRex37R7U9N8r3A==
   dependencies:
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/components@6.2.7", "@storybook/components@^6.1.17":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.2.7.tgz#03ee5e22c48631fe17829299d2da61bb4e0598ce"
-  integrity sha512-ccKOwGIkuhEHFLzjZvaZG11GIbMvk56bNdCAG8iINKYUjJE3l0PsO5xPhNsyTlwpDScZGwEBKB48Vn54UjiS8g==
+"@storybook/components@6.2.8", "@storybook/components@^6.1.17":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.2.8.tgz#303150977965f9750e7528e58fc5d1c0a1220bd2"
+  integrity sha512-fd0ivsOhHDLISEScWzDIVM4X93gR5Vw0LsxaMW/2qKJZGVHG6cxti5j+LhO41aaGmB7mWcDtgloOWNwTv47YAA==
   dependencies:
     "@popperjs/core" "^2.6.0"
-    "@storybook/client-logger" "6.2.7"
+    "@storybook/client-logger" "6.2.8"
     "@storybook/csf" "0.0.1"
-    "@storybook/theming" "6.2.7"
+    "@storybook/theming" "6.2.8"
     "@types/color-convert" "^2.0.0"
     "@types/overlayscrollbars" "^1.12.0"
     "@types/react-syntax-highlighter" "11.0.5"
@@ -2853,18 +2853,18 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/core-client@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.2.7.tgz#3ee8c85035cf0006ef2151f25f215779f20580a4"
-  integrity sha512-te3gyGehNanWZDOoevH93Wl+iLTUBLK2jjw/B7Wf8sNegUauDQYXPR9YmI0wUQrn1Dz8Xz8bdMnD/GwzyXpGVQ==
+"@storybook/core-client@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.2.8.tgz#0a103d8fb6c2e56a9565b7af36f11f4ed9620fe8"
+  integrity sha512-U26SMRCf2DEd1bHJR/g+jO6ujlEyBK1VudPQvsNjGdWedmtRc0FTQS13k0eQgawDBRC+hKTtTs/IRW5E0dn2KA==
   dependencies:
-    "@storybook/addons" "6.2.7"
-    "@storybook/channel-postmessage" "6.2.7"
-    "@storybook/client-api" "6.2.7"
-    "@storybook/client-logger" "6.2.7"
-    "@storybook/core-events" "6.2.7"
+    "@storybook/addons" "6.2.8"
+    "@storybook/channel-postmessage" "6.2.8"
+    "@storybook/client-api" "6.2.8"
+    "@storybook/client-logger" "6.2.8"
+    "@storybook/core-events" "6.2.8"
     "@storybook/csf" "0.0.1"
-    "@storybook/ui" "6.2.7"
+    "@storybook/ui" "6.2.8"
     ansi-to-html "^0.6.11"
     core-js "^3.8.2"
     global "^4.4.0"
@@ -2875,10 +2875,10 @@
     unfetch "^4.2.0"
     util-deprecate "^1.0.2"
 
-"@storybook/core-common@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.2.7.tgz#596bfc3e87f5d8299f0e3bd7390de1c54d05a5e6"
-  integrity sha512-44pbzV0dyRsypWaS7Nstv4TXiLXaTX2Wif0otwtOudmSz3eYbWt3JQMBrQnkkEegJo7XPRFI9HzT1SvdbwTR+w==
+"@storybook/core-common@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.2.8.tgz#2dac023450196b3cb2bce3c5fdb04d01741ade20"
+  integrity sha512-fPSsThcVxmYy/LYPxYiUXVIbAnZ2YAPD6210GaYbM/z+MZePkQ02V/RRyxVNJ2AS5o649TkW13lc7nMWdvzv3A==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-proposal-class-properties" "^7.12.1"
@@ -2901,7 +2901,7 @@
     "@babel/preset-react" "^7.12.10"
     "@babel/preset-typescript" "^7.12.7"
     "@babel/register" "^7.12.1"
-    "@storybook/node-logger" "6.2.7"
+    "@storybook/node-logger" "6.2.8"
     "@storybook/semver" "^7.3.2"
     "@types/glob-base" "^0.3.0"
     "@types/micromatch" "^4.0.1"
@@ -2929,29 +2929,29 @@
     util-deprecate "^1.0.2"
     webpack "4"
 
-"@storybook/core-events@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.2.7.tgz#47f9bbbf7f5959eab9ffcf6e2893f09014297608"
-  integrity sha512-CwMftGVwWDqFva48rs5TlTSkimO7Q42dAuKKmUVHaN2tPacs8NdxhjqHmj+ls+5cxZuDnJy1x3JAo1PyHGyWiw==
+"@storybook/core-events@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.2.8.tgz#e33427f7b4b2bd141c788189d50dc92337dd4e81"
+  integrity sha512-1TVzA5/FEwtgxor2q6tsBBMTmhyJubNWlP3akznume8F7kqoCl+k/ss0PQ0ywlzc9PjWQXS7HGmSVzx0r8gdHQ==
   dependencies:
     core-js "^3.8.2"
 
-"@storybook/core-server@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.2.7.tgz#15408617d5bd98187938d5ac79a9456cfea2bc3d"
-  integrity sha512-WAHZo9xiTxbMvQtyLYBz88hXRqGsYWM6xFUAK+orSOQrmM/8P6zvTqc8p1Pf2Kfly7TnQuNcARvrQR0HGAeO0g==
+"@storybook/core-server@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.2.8.tgz#83bd8e229225b3d7e5b11d91850b7b15bdab7525"
+  integrity sha512-2kNgnsf8eX5QWPQmzP0SIViSKysMDOxSS0doOHd0KJBkcPwj1FUoNithu7RllQPSsphsifLua6OtTjt4UP/ycg==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-transform-template-literals" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
-    "@storybook/addons" "6.2.7"
-    "@storybook/builder-webpack4" "6.2.7"
-    "@storybook/core-client" "6.2.7"
-    "@storybook/core-common" "6.2.7"
-    "@storybook/node-logger" "6.2.7"
+    "@storybook/addons" "6.2.8"
+    "@storybook/builder-webpack4" "6.2.8"
+    "@storybook/core-client" "6.2.8"
+    "@storybook/core-common" "6.2.8"
+    "@storybook/node-logger" "6.2.8"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.2.7"
-    "@storybook/ui" "6.2.7"
+    "@storybook/theming" "6.2.8"
+    "@storybook/ui" "6.2.8"
     "@types/node" "^14.0.10"
     "@types/node-fetch" "^2.5.7"
     "@types/pretty-hrtime" "^1.0.0"
@@ -2995,13 +2995,13 @@
     webpack-dev-middleware "^3.7.3"
     webpack-virtual-modules "^0.2.2"
 
-"@storybook/core@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.2.7.tgz#7eb7727523134303ab2733a196bb71b53dea4e9f"
-  integrity sha512-E40ezV3/bNn3y2I76n0LTmw4FLd5RrRbx4YPe5/2rOWozwErd7qHbDFRaAq6fW5dYQOC07iQNK5nneckD7id3w==
+"@storybook/core@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.2.8.tgz#f157574ad23eebd656c4b47fd3d10caf021adab7"
+  integrity sha512-9gD/tti/+ZmzEihnrv+FF1+AgjIdCQ6VMFT76UXUEX44WZSqM8O9KA+8Llx2AD4wU928KDWLruP+5UiHkDAJKw==
   dependencies:
-    "@storybook/core-client" "6.2.7"
-    "@storybook/core-server" "6.2.7"
+    "@storybook/core-client" "6.2.8"
+    "@storybook/core-server" "6.2.8"
 
 "@storybook/csf@0.0.1":
   version "0.0.1"
@@ -3010,10 +3010,10 @@
   dependencies:
     lodash "^4.17.15"
 
-"@storybook/node-logger@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.2.7.tgz#2329042e44eba1efcc6bb0689c8566a555d5b0ee"
-  integrity sha512-dzsFKn/3as6Nf21/9whh4HHfKOFfKlZaG5FxuhRlB3g3j61sAlE5LI4DXHgc0NoyfV5Ymbj3BPbtlCsNOy2i5A==
+"@storybook/node-logger@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.2.8.tgz#a5cb21e397a3e4945375b73803f901c93513a56c"
+  integrity sha512-mSbHF1yneRScviISaDQmtRcOBwjHbmdc8p791X4Myl87luqENnt0s8mnTG0H8uH/LGKvtZ2AGST89MqusQ6xUw==
   dependencies:
     "@types/npmlog" "^4.1.2"
     chalk "^4.1.0"
@@ -3033,10 +3033,10 @@
     pretty-hrtime "^1.0.3"
     regenerator-runtime "^0.13.3"
 
-"@storybook/postinstall@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.2.7.tgz#2d3a5d63fb9413452f05a9030d3f02febc48ef9a"
-  integrity sha512-Sj5FLHlbkeYYnkfs11EYyDzxMn59EeToZzNiwzXNDc2zDyyLNrV9ouVwW2Fb/hHwf9wypD1maHUShhXCKGc+cw==
+"@storybook/postinstall@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.2.8.tgz#abf0f1b26f8273b49c10360207d20d3f23eafbb6"
+  integrity sha512-VaFQ622qSSpBqZpx+BGFGY52VKk4gnlpFs9r6+TgqaoFv9DpRWnj95fhkdtYuumzVhMiJLerdYdKgR/NsM+hJg==
   dependencies:
     core-js "^3.8.2"
 
@@ -3065,17 +3065,17 @@
     fork-ts-checker-webpack-plugin "^4.1.0"
 
 "@storybook/react@^6.1.17":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.2.7.tgz#07a329c9baab62e0deb8488d9f6c6174045bd386"
-  integrity sha512-NUbCTMhTh4rfbrPBVRtnVzYqVj7KTbvfQOkE6rHzWjk5T9+OJI86Ptla28w8T6O9K9QSQl7QftOMIGn5/ZtJiQ==
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.2.8.tgz#7b3fb79f30a696856e8bb98b2dc6a2b3a48cbdba"
+  integrity sha512-n8nQmuclm+KvwOKWpZfTFeeUWISZuEUcHQc6MGoi0fzXDnJDPSk4KI6kvIMlr1kSDh41+iZfbbBTil+XWORaRA==
   dependencies:
     "@babel/preset-flow" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
     "@pmmmwh/react-refresh-webpack-plugin" "^0.4.3"
-    "@storybook/addons" "6.2.7"
-    "@storybook/core" "6.2.7"
-    "@storybook/core-common" "6.2.7"
-    "@storybook/node-logger" "6.2.7"
+    "@storybook/addons" "6.2.8"
+    "@storybook/core" "6.2.8"
+    "@storybook/core-common" "6.2.8"
+    "@storybook/node-logger" "6.2.8"
     "@storybook/semver" "^7.3.2"
     "@types/webpack-env" "^1.16.0"
     babel-plugin-add-react-displayname "^0.0.5"
@@ -3093,13 +3093,13 @@
     ts-dedent "^2.0.0"
     webpack "4"
 
-"@storybook/router@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.2.7.tgz#b6bfedc237f0b3834f8fa9eb724d91bd3eaff832"
-  integrity sha512-ZHz5T/IvpsXq0O/frdZN6kNltzy7QiL1TgekwY5evjtRWFAX6vRBQXfQH9opGQ3dThZIhMUi7kA9h9utrHp8HA==
+"@storybook/router@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.2.8.tgz#70d95e66619ebdeb4da61e2fce930bcc53d45bd1"
+  integrity sha512-SDoSa5gp/tzv7GIYauDyrKAiqDOg2bZ+JBIjLbAh29U5fJ/wkHbTeHCMhw9B5RE8O/e4dK2NOaYcuJJx+mFbGA==
   dependencies:
     "@reach/router" "^1.3.4"
-    "@storybook/client-logger" "6.2.7"
+    "@storybook/client-logger" "6.2.8"
     "@types/reach__router" "^1.3.7"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
@@ -3117,13 +3117,13 @@
     core-js "^3.6.5"
     find-up "^4.1.0"
 
-"@storybook/source-loader@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.2.7.tgz#0e66eea339c3829030ec63e7729dc68f1d531885"
-  integrity sha512-fngRG28agjVleUBLhXhF4VzCmHzlq3XmSRB/IbT+kxgdWr9+QP9+i75HRQx5YIy4znnNkWojpv+0LVkVqQBHZw==
+"@storybook/source-loader@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.2.8.tgz#2dfa0563cbac911685eb6cd575daa55a36a79049"
+  integrity sha512-e5rOLRPN39mTeRNv5FfIxR7XMb8bhx6kk0SS2ciojkcTg9aLLnguZSfm9E/OBLp/be8//TX4y5m3PwNQSXUrLg==
   dependencies:
-    "@storybook/addons" "6.2.7"
-    "@storybook/client-logger" "6.2.7"
+    "@storybook/addons" "6.2.8"
+    "@storybook/client-logger" "6.2.8"
     "@storybook/csf" "0.0.1"
     core-js "^3.8.2"
     estraverse "^5.2.0"
@@ -3133,15 +3133,15 @@
     prettier "~2.2.1"
     regenerator-runtime "^0.13.7"
 
-"@storybook/theming@6.2.7", "@storybook/theming@^6.1.17":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.2.7.tgz#7dbbcde537099b1fe65ec63a517fd54a3dd587f5"
-  integrity sha512-0zTw1DhPWuNsk/fSg7rqLa/99+dxUfwjDnCYu4WJAUjfBWP/++0VWtQJVtt8ogyHKsY2dUzm5mhUg8EtqnGePg==
+"@storybook/theming@6.2.8", "@storybook/theming@^6.1.17":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.2.8.tgz#1cb4eeaccdb73924186a06630b4fed3201ee6714"
+  integrity sha512-aQ+VCvzbfaAsq99g0ZsP1/rZFwXqbsTYLaRV/uZ8DA+wLF7uzlAl+FA5HyneStSj9ysyvdyARGxT2SBAT+azyQ==
   dependencies:
     "@emotion/core" "^10.1.1"
     "@emotion/is-prop-valid" "^0.8.6"
     "@emotion/styled" "^10.0.27"
-    "@storybook/client-logger" "6.2.7"
+    "@storybook/client-logger" "6.2.8"
     core-js "^3.8.2"
     deep-object-diff "^1.1.0"
     emotion-theming "^10.0.27"
@@ -3151,21 +3151,21 @@
     resolve-from "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/ui@6.2.7":
-  version "6.2.7"
-  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.2.7.tgz#ff526d02d5785dd9cfbcb9bd6688b7293abe271f"
-  integrity sha512-Ys60G+g4leag/cNPTTC9wp9JRYY2LgXREs4HE4tybo4Ga/ZhQZrWzgKXuEeqM3GJZgLcsKz+qtPVQJibDBbOMg==
+"@storybook/ui@6.2.8":
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.2.8.tgz#331f8f5bb8e6feaf15a3a91b23eba48509882650"
+  integrity sha512-lPRa6z3ArHEewuIAAtHFdF7VwK7chMGza/PV1gAQT2ywUDibJoTen/qtUP4TKhLSJTOUsZK8q4X7yiN1KJBu5w==
   dependencies:
     "@emotion/core" "^10.1.1"
-    "@storybook/addons" "6.2.7"
-    "@storybook/api" "6.2.7"
-    "@storybook/channels" "6.2.7"
-    "@storybook/client-logger" "6.2.7"
-    "@storybook/components" "6.2.7"
-    "@storybook/core-events" "6.2.7"
-    "@storybook/router" "6.2.7"
+    "@storybook/addons" "6.2.8"
+    "@storybook/api" "6.2.8"
+    "@storybook/channels" "6.2.8"
+    "@storybook/client-logger" "6.2.8"
+    "@storybook/components" "6.2.8"
+    "@storybook/core-events" "6.2.8"
+    "@storybook/router" "6.2.8"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.2.7"
+    "@storybook/theming" "6.2.8"
     "@types/markdown-to-jsx" "^6.11.3"
     copy-to-clipboard "^3.3.1"
     core-js "^3.8.2"
@@ -3483,9 +3483,9 @@
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
 "@types/eslint@^7.2.6":
-  version "7.2.8"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.8.tgz#45cd802380fcc352e5680e1781d43c50916f12ee"
-  integrity sha512-RTKvBsfz0T8CKOGZMfuluDNyMFHnu5lvNr4hWEsQeHXH6FcmIDIozOyWMh36nLGMwVd5UFNXC2xztA8lln22MQ==
+  version "7.2.9"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.9.tgz#5d26eadbb6d04a225967176399a18eff622da982"
+  integrity sha512-SdAAXZNvWfhtf3X3y1cbbCZhP3xyPh7mfTvzV6CgfWc/ZhiHpyr9bVroe2/RCHIf7gczaNcprhaBLsx0CCJHQA==
   dependencies:
     "@types/estree" "*"
     "@types/json-schema" "*"
@@ -3826,9 +3826,9 @@
   integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
 
 "@types/secp256k1@^4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@types/secp256k1/-/secp256k1-4.0.1.tgz#fb3aa61a1848ad97d7425ff9dcba784549fca5a4"
-  integrity sha512-+ZjSA8ELlOp8SlKi0YLB2tz9d5iPNEmOBd+8Rz21wTMdaXQIa9b6TEnD6l5qKOCypE7FSyPyck12qZJxSDNoog==
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/secp256k1/-/secp256k1-4.0.2.tgz#20c29a87149d980f64464e56539bf4810fdb5d1d"
+  integrity sha512-QMg+9v0bbNJ2peLuHRWxzmy0HRJIG6gFZNhaRSp7S3ggSbCCxiqQB2/ybvhXyhHOCequpNkrx7OavNhrWOsW0A==
   dependencies:
     "@types/node" "*"
 
@@ -3949,12 +3949,12 @@
     "@types/yargs-parser" "*"
 
 "@typescript-eslint/eslint-plugin@^4.1.0", "@typescript-eslint/eslint-plugin@^4.5.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.21.0.tgz#3fce2bfa76d95c00ac4f33dff369cb593aab8878"
-  integrity sha512-FPUyCPKZbVGexmbCFI3EQHzCZdy2/5f+jv6k2EDljGdXSRc0cKvbndd2nHZkSLqCNOPk0jB6lGzwIkglXcYVsQ==
+  version "4.22.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.22.0.tgz#3d5f29bb59e61a9dba1513d491b059e536e16dbc"
+  integrity sha512-U8SP9VOs275iDXaL08Ln1Fa/wLXfj5aTr/1c0t0j6CdbOnxh+TruXu1p4I0NAvdPBQgoPjHsgKn28mOi0FzfoA==
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.21.0"
-    "@typescript-eslint/scope-manager" "4.21.0"
+    "@typescript-eslint/experimental-utils" "4.22.0"
+    "@typescript-eslint/scope-manager" "4.22.0"
     debug "^4.1.1"
     functional-red-black-tree "^1.0.1"
     lodash "^4.17.15"
@@ -3962,15 +3962,15 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/experimental-utils@4.21.0", "@typescript-eslint/experimental-utils@^4.0.1":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.21.0.tgz#0b0bb7c15d379140a660c003bdbafa71ae9134b6"
-  integrity sha512-cEbgosW/tUFvKmkg3cU7LBoZhvUs+ZPVM9alb25XvR0dal4qHL3SiUqHNrzoWSxaXA9gsifrYrS1xdDV6w/gIA==
+"@typescript-eslint/experimental-utils@4.22.0", "@typescript-eslint/experimental-utils@^4.0.1":
+  version "4.22.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.22.0.tgz#68765167cca531178e7b650a53456e6e0bef3b1f"
+  integrity sha512-xJXHHl6TuAxB5AWiVrGhvbGL8/hbiCQ8FiWwObO3r0fnvBdrbWEDy1hlvGQOAWc6qsCWuWMKdVWlLAEMpxnddg==
   dependencies:
     "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/scope-manager" "4.21.0"
-    "@typescript-eslint/types" "4.21.0"
-    "@typescript-eslint/typescript-estree" "4.21.0"
+    "@typescript-eslint/scope-manager" "4.22.0"
+    "@typescript-eslint/types" "4.22.0"
+    "@typescript-eslint/typescript-estree" "4.22.0"
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
@@ -3986,32 +3986,32 @@
     eslint-utils "^2.0.0"
 
 "@typescript-eslint/parser@^4.1.0", "@typescript-eslint/parser@^4.5.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.21.0.tgz#a227fc2af4001668c3e3f7415d4feee5093894c1"
-  integrity sha512-eyNf7QmE5O/l1smaQgN0Lj2M/1jOuNg2NrBm1dqqQN0sVngTLyw8tdCbih96ixlhbF1oINoN8fDCyEH9SjLeIA==
+  version "4.22.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.22.0.tgz#e1637327fcf796c641fe55f73530e90b16ac8fe8"
+  integrity sha512-z/bGdBJJZJN76nvAY9DkJANYgK3nlRstRRi74WHm3jjgf2I8AglrSY+6l7ogxOmn55YJ6oKZCLLy+6PW70z15Q==
   dependencies:
-    "@typescript-eslint/scope-manager" "4.21.0"
-    "@typescript-eslint/types" "4.21.0"
-    "@typescript-eslint/typescript-estree" "4.21.0"
+    "@typescript-eslint/scope-manager" "4.22.0"
+    "@typescript-eslint/types" "4.22.0"
+    "@typescript-eslint/typescript-estree" "4.22.0"
     debug "^4.1.1"
 
-"@typescript-eslint/scope-manager@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.21.0.tgz#c81b661c4b8af1ec0c010d847a8f9ab76ab95b4d"
-  integrity sha512-kfOjF0w1Ix7+a5T1knOw00f7uAP9Gx44+OEsNQi0PvvTPLYeXJlsCJ4tYnDj5PQEYfpcgOH5yBlw7K+UEI9Agw==
+"@typescript-eslint/scope-manager@4.22.0":
+  version "4.22.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.22.0.tgz#ed411545e61161a8d702e703a4b7d96ec065b09a"
+  integrity sha512-OcCO7LTdk6ukawUM40wo61WdeoA7NM/zaoq1/2cs13M7GyiF+T4rxuA4xM+6LeHWjWbss7hkGXjFDRcKD4O04Q==
   dependencies:
-    "@typescript-eslint/types" "4.21.0"
-    "@typescript-eslint/visitor-keys" "4.21.0"
+    "@typescript-eslint/types" "4.22.0"
+    "@typescript-eslint/visitor-keys" "4.22.0"
 
 "@typescript-eslint/types@3.10.1":
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727"
   integrity sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ==
 
-"@typescript-eslint/types@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.21.0.tgz#abdc3463bda5d31156984fa5bc316789c960edef"
-  integrity sha512-+OQaupjGVVc8iXbt6M1oZMwyKQNehAfLYJJ3SdvnofK2qcjfor9pEM62rVjBknhowTkh+2HF+/KdRAc/wGBN2w==
+"@typescript-eslint/types@4.22.0":
+  version "4.22.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.22.0.tgz#0ca6fde5b68daf6dba133f30959cc0688c8dd0b6"
+  integrity sha512-sW/BiXmmyMqDPO2kpOhSy2Py5w6KvRRsKZnV0c4+0nr4GIcedJwXAq+RHNK4lLVEZAJYFltnnk1tJSlbeS9lYA==
 
 "@typescript-eslint/typescript-estree@3.10.1":
   version "3.10.1"
@@ -4027,13 +4027,13 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/typescript-estree@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.21.0.tgz#3817bd91857beeaeff90f69f1f112ea58d350b0a"
-  integrity sha512-ZD3M7yLaVGVYLw4nkkoGKumb7Rog7QID9YOWobFDMQKNl+vPxqVIW/uDk+MDeGc+OHcoG2nJ2HphwiPNajKw3w==
+"@typescript-eslint/typescript-estree@4.22.0":
+  version "4.22.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.22.0.tgz#b5d95d6d366ff3b72f5168c75775a3e46250d05c"
+  integrity sha512-TkIFeu5JEeSs5ze/4NID+PIcVjgoU3cUQUIZnH3Sb1cEn1lBo7StSV5bwPuJQuoxKXlzAObjYTilOEKRuhR5yg==
   dependencies:
-    "@typescript-eslint/types" "4.21.0"
-    "@typescript-eslint/visitor-keys" "4.21.0"
+    "@typescript-eslint/types" "4.22.0"
+    "@typescript-eslint/visitor-keys" "4.22.0"
     debug "^4.1.1"
     globby "^11.0.1"
     is-glob "^4.0.1"
@@ -4047,12 +4047,12 @@
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-"@typescript-eslint/visitor-keys@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.21.0.tgz#990a9acdc124331f5863c2cf21c88ba65233cd8d"
-  integrity sha512-dH22dROWGi5Z6p+Igc8bLVLmwy7vEe8r+8c+raPQU0LxgogPUrRAtRGtvBWmlr9waTu3n+QLt/qrS/hWzk1x5w==
+"@typescript-eslint/visitor-keys@4.22.0":
+  version "4.22.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.22.0.tgz#169dae26d3c122935da7528c839f42a8a42f6e47"
+  integrity sha512-nnMu4F+s4o0sll6cBSsTeVsT4cwxB7zECK3dFxzEjPBii9xLpq4yqqsy/FU5zMfan6G60DKZSCXAa3sHJZrcYw==
   dependencies:
-    "@typescript-eslint/types" "4.21.0"
+    "@typescript-eslint/types" "4.22.0"
     eslint-visitor-keys "^2.0.0"
 
 "@uniswap/default-token-list@^2.0.0":
@@ -4140,9 +4140,9 @@
   integrity sha512-4ET2H0a8p7nVBGFWfio9SHc+RA6UIXEvlTRIJNsDwjQvfs8Jq9lfJ+eSOUTGmiB8Vp8V5dWarLDBU/rDE159pQ==
 
 "@uniswap/v3-periphery@^1.0.0-beta.17":
-  version "1.0.0-beta.17"
-  resolved "https://registry.yarnpkg.com/@uniswap/v3-periphery/-/v3-periphery-1.0.0-beta.17.tgz#da150f1c08259be3c0452d0bcd46f4f19fa26d49"
-  integrity sha512-yhxdRGI2ZO/hdqYUMGCkeaPXADNHE88p5nDtufmhIH80n7Xyb2WyMUQ1e5obkJZ9EM848rZ8PFzHsdvBP5kC0A==
+  version "1.0.0-beta.18"
+  resolved "https://registry.yarnpkg.com/@uniswap/v3-periphery/-/v3-periphery-1.0.0-beta.18.tgz#6aeae2a03d26f29dd07e2c8848196250497ba7a6"
+  integrity sha512-1t6peSju8gPNC7m6mGXD2otM2uywpvXX08tWjg298KzHIzxgVwxoSOLxiXUspGxH3Js+dFW/WICskkwHyCLwmg==
   dependencies:
     "@openzeppelin/contracts" "3.4.1-solc-0.7-2"
     "@uniswap/lib" "^4.0.1-alpha"
@@ -4552,9 +4552,9 @@ acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0, acorn@^7.4.1:
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.1.0.tgz#52311fd7037ae119cbb134309e901aa46295b3fe"
-  integrity sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.1.1.tgz#fb0026885b9ac9f48bac1e185e4af472971149ff"
+  integrity sha512-xYiIVjNuqtKXMxlRMDc6mZUhXehod4a3gbZ1qRlM7icK4EbxUFNLhWoPblCvFtB2Y9CIqHP3CF/rdxLItaQv8g==
 
 address@1.1.2, address@^1.0.1:
   version "1.1.2"
@@ -4641,9 +4641,9 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4, ajv
     uri-js "^4.2.2"
 
 ajv@^8.0.1:
-  version "8.0.5"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.0.5.tgz#f07d6fdeffcdbb80485570ce3f1bc845fcc812b9"
-  integrity sha512-RkiLa/AeJx7+9OvniQ/qeWu0w74A8DiPPBclQ6ji3ZQkv5KamO+QGpqmi7O4JIw3rHGUXZ6CoP9tsAkn3gyazg==
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.1.0.tgz#45d5d3d36c7cdd808930cc3e603cf6200dbeb736"
+  integrity sha512-B/Sk2Ix7A36fs/ZkuGLIR86EdjbgR6fsAcbx9lOP/QBSXujDNbVmIS/U4Itz5k8fPFDeVZl/zQ/gJW4Jrq6XjQ==
   dependencies:
     fast-deep-equal "^3.1.1"
     json-schema-traverse "^1.0.0"
@@ -6206,15 +6206,15 @@ browserslist@^3.2.6:
     electron-to-chromium "^1.3.47"
 
 browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.3, browserslist@^4.6.2, browserslist@^4.6.4:
-  version "4.16.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.3.tgz#340aa46940d7db878748567c5dea24a48ddf3717"
-  integrity sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==
+  version "4.16.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.4.tgz#7ebf913487f40caf4637b892b268069951c35d58"
+  integrity sha512-d7rCxYV8I9kj41RH8UKYnvDYCRENUlHRgyXy/Rhr/1BaeLGfiCptEdFE8MIrvGfWbBFNjVYx76SQWvNX1j+/cQ==
   dependencies:
-    caniuse-lite "^1.0.30001181"
-    colorette "^1.2.1"
-    electron-to-chromium "^1.3.649"
+    caniuse-lite "^1.0.30001208"
+    colorette "^1.2.2"
+    electron-to-chromium "^1.3.712"
     escalade "^3.1.1"
-    node-releases "^1.1.70"
+    node-releases "^1.1.71"
 
 bs58@^4.0.0:
   version "4.0.1"
@@ -6468,7 +6468,7 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001181:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001208:
   version "1.0.30001208"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001208.tgz#a999014a35cebd4f98c405930a057a0d75352eb9"
   integrity sha512-OE5UE4+nBOro8Dyvv0lfx+SRtfVIOM9uhKqFmJeUbGriqhhStgp1A0OyBpgy3OUF8AhYCT+PVwPC1gMl2ZcQMA==
@@ -7555,9 +7555,9 @@ cyclist@^1.0.1:
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
 cypress@*:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-7.0.1.tgz#8603f84d828fd4c5462a856f55cef5642e4ce573"
-  integrity sha512-dMZmZDo+x3jslEQiXRGQlMmMVMhe4JpMHQ6g1unMGXTUsapU1EXlnubevmKmqZ1IQpntAlDKmx8dupOTd3oW+g==
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-7.1.0.tgz#6cb5dc22c6271a9d7a79a2477251a95afc77e531"
+  integrity sha512-AptQP9fVtN/FfOv8rJ9hTGJE2XQFc8saLHT38r/EeyWhzp0q/+P/DYRTDtjGZHeLTCNznAUrT4lal8jm+ouS7Q==
   dependencies:
     "@cypress/listr-verbose-renderer" "^0.4.1"
     "@cypress/request" "^2.88.5"
@@ -8200,10 +8200,10 @@ ejs@^2.6.1:
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
-electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.564, electron-to-chromium@^1.3.649:
-  version "1.3.711"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.711.tgz#92c3caf7ffed5e18bf63f66b4b57b4db2409c450"
-  integrity sha512-XbklBVCDiUeho0PZQCjC25Ha6uBwqqJeyDhPLwLwfWRAo4x+FZFsmu1pPPkXT+B4MQMQoQULfyaMltDopfeiHQ==
+electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.564, electron-to-chromium@^1.3.712:
+  version "1.3.717"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.717.tgz#78d4c857070755fb58ab64bcc173db1d51cbc25f"
+  integrity sha512-OfzVPIqD1MkJ7fX+yTl2nKyOE4FReeVfMCzzxQS+Kp43hZYwHwThlGP+EGIZRXJsxCM7dqo8Y65NOX/HP12iXQ==
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
@@ -8506,9 +8506,9 @@ eslint-module-utils@^2.6.0:
     pkg-dir "^2.0.0"
 
 eslint-plugin-flowtype@^5.2.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.6.0.tgz#9ddba1ce31990c53e144b3a545b7c74b1d164fd9"
-  integrity sha512-XbeDejiL+SecDInj9On/9D4EM31kUp6B3uWYsBH6Vsb2CfaFWiUHvosAZx1TafVjp6izLC7D3kpix1DIpDF4Qw==
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.7.0.tgz#1fe68f9cd16e35bf30e09d4ebacf9cfbfe7a41a4"
+  integrity sha512-6Oa0D6kq3PGwJvivrLNSgeiPN/ftPkRvhbeHWoXUEGQ+ZugerSJvoMDSCc9dZa4R691b/eLXpx8dyMSZM1Tc4w==
   dependencies:
     lodash "^4.17.15"
     string-natural-compare "^3.0.1"
@@ -8533,9 +8533,9 @@ eslint-plugin-import@^2.22.1:
     tsconfig-paths "^3.9.0"
 
 eslint-plugin-jest@^24.1.0:
-  version "24.3.4"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-24.3.4.tgz#6d90c3554de0302e879603dd6405474c98849f19"
-  integrity sha512-3n5oY1+fictanuFkTWPwSlehugBTAgwLnYLFsCllzE3Pl1BwywHl5fL0HFxmMjoQY8xhUDk8uAWc3S4JOHGh3A==
+  version "24.3.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-24.3.5.tgz#71f0b580f87915695c286c3f0eb88cf23664d044"
+  integrity sha512-XG4rtxYDuJykuqhsOqokYIR84/C8pRihRtEpVskYLbIIKGwPNW2ySxdctuVzETZE+MbF/e7wmsnbNVpzM0rDug==
   dependencies:
     "@typescript-eslint/experimental-utils" "^4.0.1"
 
@@ -8638,9 +8638,9 @@ eslint-webpack-plugin@^2.5.2:
     schema-utils "^3.0.0"
 
 eslint@^7.11.0:
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.23.0.tgz#8d029d252f6e8cf45894b4bee08f5493f8e94325"
-  integrity sha512-kqvNVbdkjzpFy0XOszNwjkKzZ+6TcwCQ/h+ozlcIWwaimBBuhlQ4nN6kbiM2L+OjDcznkTJxzYfRFH92sx4a0Q==
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.24.0.tgz#2e44fa62d93892bfdb100521f17345ba54b8513a"
+  integrity sha512-k9gaHeHiFmGCDQ2rEfvULlSLruz6tgfA8DEn+rY9/oYPFFTlz55mM/Q/Rij1b2Y42jwZiK3lXvNTw6w6TXzcKQ==
   dependencies:
     "@babel/code-frame" "7.12.11"
     "@eslint/eslintrc" "^0.4.0"
@@ -12093,9 +12093,9 @@ jsbn@~0.1.0:
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
 jsdom@^16.4.0:
-  version "16.5.2"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.5.2.tgz#583fac89a0aea31dbf6237e7e4bedccd9beab472"
-  integrity sha512-JxNtPt9C1ut85boCbJmffaQ06NBnzkQY/MWO3YxPW8IWS38A26z+B1oBvA9LwKrytewdfymnhi4UNH3/RAgZrg==
+  version "16.5.3"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.5.3.tgz#13a755b3950eb938b4482c407238ddf16f0d2136"
+  integrity sha512-Qj1H+PEvUsOtdPJ056ewXM4UJPCi4hhLA8wpiz9F2YvsRBhuFsXxtrIFAgGBDynQA9isAMGE91PfUYbdMPXuTA==
   dependencies:
     abab "^2.0.5"
     acorn "^8.1.0"
@@ -13040,12 +13040,12 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     to-regex "^3.0.2"
 
 micromatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
-  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
+  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
   dependencies:
     braces "^3.0.1"
-    picomatch "^2.0.5"
+    picomatch "^2.2.3"
 
 miller-rabin@^4.0.0:
   version "4.0.1"
@@ -13460,7 +13460,7 @@ node-notifier@^8.0.0:
     uuid "^8.3.0"
     which "^2.0.2"
 
-node-releases@^1.1.61, node-releases@^1.1.70:
+node-releases@^1.1.61, node-releases@^1.1.71:
   version "1.1.71"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.71.tgz#cb1334b179896b1c89ecfdd4b725fb7bbdfc7dbb"
   integrity sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg==
@@ -14195,10 +14195,10 @@ phin@^2.9.1:
   resolved "https://registry.yarnpkg.com/phin/-/phin-2.9.3.tgz#f9b6ac10a035636fb65dfc576aaaa17b8743125c"
   integrity sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==
 
-picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
-  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
+  integrity sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==
 
 pify@^2.0.0, pify@^2.2.0:
   version "2.3.0"
@@ -15001,9 +15001,9 @@ postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, po
     supports-color "^6.1.0"
 
 postcss@^8.1.0:
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.9.tgz#fd95ff37b5cee55c409b3fdd237296ab4096fba3"
-  integrity sha512-b+TmuIL4jGtCHtoLi+G/PisuIl9avxs8IZMSmlABRwNz5RLUUACrC+ws81dcomz1nRezm5YPdXiMEzBEKgYn+Q==
+  version "8.2.10"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.10.tgz#ca7a042aa8aff494b334d0ff3e9e77079f6f702b"
+  integrity sha512-b/h7CPV7QEdrqIxtAf2j31U5ef05uBDuvoXv6L51Q4rcS1jdlXAVKJv+atCFdUXYl9dyTHGyoMzIepwowRJjFw==
   dependencies:
     colorette "^1.2.2"
     nanoid "^3.1.22"
@@ -17736,9 +17736,9 @@ symbol.prototype.description@^1.0.0:
     object.getownpropertydescriptors "^2.1.2"
 
 table@^6.0.4:
-  version "6.0.9"
-  resolved "https://registry.yarnpkg.com/table/-/table-6.0.9.tgz#790a12bf1e09b87b30e60419bafd6a1fd85536fb"
-  integrity sha512-F3cLs9a3hL1Z7N4+EkSscsel3z55XT950AvB05bwayrNg5T1/gykXtigioTAjbltvbMSJvvhFCbnf6mX+ntnJQ==
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.1.0.tgz#676a0cfb206008b59e783fcd94ef8ba7d67d966c"
+  integrity sha512-T4G5KMmqIk6X87gLKWyU5exPpTjLjY5KyrFWaIjv3SvgaIUGXV7UEzGEnZJdTA38/yUS6f9PlKezQ0bYXG3iIQ==
   dependencies:
     ajv "^8.0.1"
     is-boolean-object "^1.1.0"
@@ -18318,9 +18318,9 @@ typical@^2.6.0, typical@^2.6.1:
   integrity sha1-XAgOXWYcu+OCWdLnCjxyU+hziB0=
 
 ua-parser-js@^0.7.24:
-  version "0.7.27"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.27.tgz#b54f8ce9eb6c7abf3584edeaf9a3d8b3bd92edba"
-  integrity sha512-eXMaRYK2skomGocoX0x9sBXzx5A1ZVQgXfrW4mTc8dT0zS7olEcyfudAzRC5tIIRgLxQ69B6jut3DI+n5hslPA==
+  version "0.7.28"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
+  integrity sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==
 
 uint8arrays@^2.1.3:
   version "2.1.4"
@@ -19316,10 +19316,10 @@ workbox-core@^5.1.4:
   resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-5.1.4.tgz#8bbfb2362ecdff30e25d123c82c79ac65d9264f4"
   integrity sha512-+4iRQan/1D8I81nR2L5vcbaaFskZC2CL17TLbvWVzQ4qiF/ytOGF6XeV54pVxAvKUtkLANhk8TyIUMtiMw2oDg==
 
-workbox-core@^6.1.0, workbox-core@^6.1.2:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.1.2.tgz#b694ca77e1cdf43c330f8fb29122946aa7e6a7a1"
-  integrity sha512-69rch7EyPsNAx5Y5YlSoHV39/EEE1oDeb5zmLIy6+mgB4BnaG6u/tlDtvjvKqHcPM0gz2L5SzYtTEvWmk5WRTQ==
+workbox-core@^6.1.0, workbox-core@^6.1.5:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.1.5.tgz#424ff600e2c5448b14ebd58b2f5ac8ed91b73fb9"
+  integrity sha512-9SOEle7YcJzg3njC0xMSmrPIiFjfsFm9WjwGd5enXmI8Lwk8wLdy63B0nzu5LXoibEmS9k+aWF8EzaKtOWjNSA==
 
 workbox-expiration@^5.1.4:
   version "5.1.4"
@@ -19329,11 +19329,11 @@ workbox-expiration@^5.1.4:
     workbox-core "^5.1.4"
 
 workbox-expiration@^6.1.0:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.1.2.tgz#0e31ff9cc12a2982430226cd7f34f7b16b3ddbae"
-  integrity sha512-86cXz8Ae5cAJMgJ6aD/8E1NMNON4qGnE4ir1G3VuOu1xLsx2ItbbXmz6b0BB2dZ+kX6BDwqE0wkgS5As5Sds7g==
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.1.5.tgz#a62a4ac953bb654aa969ede13507ca5bd154adc2"
+  integrity sha512-6cN+FVbh8fNq56LFKPMchGNKCJeyboHsDuGBqmhDUPvD4uDjsegQpDQzn52VaE0cpywbSIsDF/BSq9E9Yjh5oQ==
   dependencies:
-    workbox-core "^6.1.2"
+    workbox-core "^6.1.5"
 
 workbox-google-analytics@^5.1.4:
   version "5.1.4"
@@ -19360,13 +19360,13 @@ workbox-precaching@^5.1.4:
     workbox-core "^5.1.4"
 
 workbox-precaching@^6.1.0:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.1.2.tgz#5d8d5d13793feb8119acfaa54b1a627bc766c881"
-  integrity sha512-jGwv6tMdIecsyBSdVCgXoD7bHxLRI972lvYOfvcosGjP3oFKe8p2DVPsn3TIzEVYTl+b3j59utC7yrOP9oEHSg==
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.1.5.tgz#9e0fecb5c567192f46783323fccea10bffc9f79e"
+  integrity sha512-yhm1kb6wgi141JeM5X7z42XJxCry53tbMLB3NgrxktrZbwbrJF8JILzYy+RFKC9tHC6u2bPmL789GPLT2NCDzw==
   dependencies:
-    workbox-core "^6.1.2"
-    workbox-routing "^6.1.2"
-    workbox-strategies "^6.1.2"
+    workbox-core "^6.1.5"
+    workbox-routing "^6.1.5"
+    workbox-strategies "^6.1.5"
 
 workbox-range-requests@^5.1.4:
   version "5.1.4"
@@ -19382,12 +19382,12 @@ workbox-routing@^5.1.4:
   dependencies:
     workbox-core "^5.1.4"
 
-workbox-routing@^6.1.0, workbox-routing@^6.1.2:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.1.2.tgz#e0e6a745bb2fb9110eafaeed0d35fdece0f589b8"
-  integrity sha512-aRcqO+KX9A0J5W6hEeEpGhT6Lesqd3WfgaqlSD5LRajm0vAgYnlQzY37w6uC55Ev7M5Gh/xg0lA99qKc6ozsEA==
+workbox-routing@^6.1.0, workbox-routing@^6.1.5:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.1.5.tgz#15884d6152dba03faef83f0b23331846d8b6ef8e"
+  integrity sha512-uC/Ctz+4GXGL42h1WxUNKxqKRik/38uS0NZ6VY/EHqL2F1ObLFqMHUZ4ZYvyQsKdyI82cxusvhJZHOrY0a2fIQ==
   dependencies:
-    workbox-core "^6.1.2"
+    workbox-core "^6.1.5"
 
 workbox-strategies@^5.1.4:
   version "5.1.4"
@@ -19397,12 +19397,12 @@ workbox-strategies@^5.1.4:
     workbox-core "^5.1.4"
     workbox-routing "^5.1.4"
 
-workbox-strategies@^6.1.0, workbox-strategies@^6.1.2:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.1.2.tgz#3547eb17ebada31d095db98316913e1031b12352"
-  integrity sha512-IX7UNePHmmfb1dcXSxgcephYShnLc0pmP3MRT/TZGjv8f0qcZYH7Sr/lTmwaxGXQL8yCSCrQICZwJnHLw2G5Ng==
+workbox-strategies@^6.1.0, workbox-strategies@^6.1.5:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.1.5.tgz#2549a3e78f0eda371b760c4db21feb0d26143573"
+  integrity sha512-QhiOn9KT9YGBdbfWOmJT6pXZOIAxaVrs6J6AMYzRpkUegBTEcv36+ZhE/cfHoT0u2fxVtthHnskOQ/snEzaXQw==
   dependencies:
-    workbox-core "^6.1.2"
+    workbox-core "^6.1.5"
 
 workbox-streams@^5.1.4:
   version "5.1.4"