release: v1.0.0-beta.21.7

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swapr/frontend",
-  "version": "1.0.0-beta.21.6",
+  "version": "1.0.0-beta.21.7",
   "private": true,
   "description": "DXswap Decentralized Application",
   "license": "GPL-3.0-or-later",

src/components/Header/MobileOptions.tsx

@@ -1,16 +1,21 @@
+import { SWPR } from '@swapr/sdk'
+
 import { darken } from 'polished'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import { ReactComponent as Cross } from '../../assets/images/crossIcon.svg'
 import { ReactComponent as ThreeBars } from '../../assets/images/three-bars.svg'
+import { useActiveWeb3React } from '../../hooks'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useToggleMobileMenu } from '../../state/application/hooks'
 import { ExternalLink } from '../../theme'
 import Popover from '../Popover'
 
+import { HeaderMobileLink } from './HeaderLink'
+
 const StyledPopover = styled(Popover)`
   padding: 22px;
   border: none;
@@ -69,6 +74,11 @@ export default function MobileOptions() {
   const popoverRef = useRef(null)
   const open = useModalOpen(ApplicationModal.MOBILE)
   const toggle = useToggleMobileMenu()
+  const { chainId } = useActiveWeb3React()
+
+  const newSwpr = chainId ? SWPR[chainId] : undefined
+
+  const networkWithoutSWPR = !newSwpr
 
   const { t } = useTranslation('common')
   useOnClickOutside(popoverRef, open ? toggle : undefined)
@@ -79,12 +89,13 @@ export default function MobileOptions() {
         placement="bottom-end"
         content={
           <List>
-            <ListItem>
-              <StyledExternalLink id="stackly-nav-link" href={process.env.REACT_APP_STACKLY_URL as string}>
-                {t('DCA')}
-                <span>↗</span>
-              </StyledExternalLink>
-            </ListItem>
+            {networkWithoutSWPR && (
+              <ListItem>
+                <HeaderMobileLink id="rewards-nav-link" to="/rewards">
+                  {t('rewards')}
+                </HeaderMobileLink>
+              </ListItem>
+            )}
 
             <ListItem>
               <StyledExternalLink id="charts-nav-link" href="https://dxstats.eth.limo/">

src/components/Header/index.tsx

@@ -17,6 +17,7 @@ import { useModalOpen, useToggleShowClaimPopup } from '../../state/application/h
 import { useDarkModeManager, useUpdateSelectedChartOption } from '../../state/user/hooks'
 import { ChartOption } from '../../state/user/reducer'
 import { useTokenBalance } from '../../state/wallet/hooks'
+import { ExternalLink } from '../../theme'
 import { breakpoints } from '../../utils/theme'
 import ClaimModal from '../Claim/ClaimModal'
 import { UnsupportedNetworkPopover } from '../NetworkUnsupportedPopover'
@@ -196,6 +197,40 @@ const StyledChevron = styled(ChevronUp)<{ open: boolean }>`
   stroke: ${({ theme }) => theme.orange1};
   transform: ${({ open }) => (open ? 'rotate(0deg)' : 'rotate(180deg)')};
 `
+const DCAExternalLink = styled(ExternalLink)`
+  display: none;
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    position: relative;
+    display: flex;
+    font-weight: 600;
+    font-size: 14px;
+    color: #c9c7db;
+    margin-right: 18px;
+  `}
+`
+
+const DCAHeaderLink = styled(HeaderLink)`
+  margin-right: 18px;
+`
+
+const RewardsHeaderMobileLink = styled(HeaderMobileLink)`
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;
+  `};
+`
+
+const DCABadge = styled.p`
+  position: absolute;
+  top: -12px;
+  right: -34px;
+  font-size: 10px;
+  background: #97df5c;
+  padding: 1px 6px;
+  border-radius: 16px;
+  color: black;
+  line-height: 16px;
+  font-weight: 600;
+`
 
 function Header() {
   const { account, chainId } = useActiveWeb3React()
@@ -281,12 +316,10 @@ function Header() {
             {t('rewards')}
             {networkWithoutSWPR && <HeaderLinkBadge label="NOT&nbsp;AVAILABLE" />}
           </HeaderLink>
-          <HeaderLink id="stackly-nav-link" href={process.env.REACT_APP_STACKLY_URL}>
+          <DCAHeaderLink id="stackly-nav-link" href={process.env.REACT_APP_STACKLY_URL}>
             {t('DCA')}
-            <Text ml="4px" fontSize="13px">
-              ↗
-            </Text>
-          </HeaderLink>
+            <DCABadge>NEW</DCABadge>
+          </DCAHeaderLink>
           <HeaderLink id="vote-nav-link" href="https://snapshot.org/#/swpr.eth">
             {t('vote')}
             <Text ml="4px" fontSize="13px">
@@ -361,10 +394,14 @@ function Header() {
             </HeaderMobileLink>
           )}
           {!networkWithoutSWPR && (
-            <HeaderMobileLink id="rewards-nav-link" to="/rewards">
+            <RewardsHeaderMobileLink id="rewards-nav-link" to="/rewards">
               {t('rewards')}
-            </HeaderMobileLink>
+            </RewardsHeaderMobileLink>
           )}
+          <DCAExternalLink id="stackly-nav-link" href={process.env.REACT_APP_STACKLY_URL || ''}>
+            {t('DCA')}
+            <DCABadge>NEW</DCABadge>
+          </DCAExternalLink>
           <HeaderMobileLink id="vote-nav-link" href={`https://snapshot.org/#/swpr.eth`}>
             {t('vote')}
             <Text ml="4px" fontSize="11px">

src/connectors/index.ts

@@ -6,14 +6,14 @@ import { MetaMask } from '@web3-react/metamask'
 import { Network } from '@web3-react/network'
 import { WalletConnect } from '@web3-react/walletconnect-v2'
 
-export const INFURA_PROJECT_ID = 'e1a3bfc40093494ca4f36b286ab36f2d'
+export const INFURA_PROJECT_ID = process.env.REACT_APP_INFURA_KEY ?? ''
 
 export const [network, networkHooks] = initializeConnector<Network>(
   actions =>
     new Network({
       actions,
       urlMap: {
-        [ChainId.MAINNET]: `https://mainnet.infura.io/v3/${INFURA_PROJECT_ID}`,
+        [ChainId.MAINNET]: `https://rpc.mevblocker.io/`,
         [ChainId.XDAI]: 'https://rpc.gnosischain.com/',
         [ChainId.ARBITRUM_ONE]: 'https://arb1.arbitrum.io/rpc',
         [ChainId.POLYGON]: 'https://polygon-rpc.com/',
@@ -51,7 +51,7 @@ export const [walletConnect, walletConnectHooks] = initializeConnector<WalletCon
           ChainId.ZK_SYNC_ERA_TESTNET,
         ],
         rpcMap: {
-          [ChainId.MAINNET]: `https://mainnet.infura.io/v3/${INFURA_PROJECT_ID}`,
+          [ChainId.MAINNET]: `https://rpc.mevblocker.io/`,
           [ChainId.XDAI]: 'https://rpc.gnosischain.com/',
           [ChainId.ARBITRUM_ONE]: 'https://arb1.arbitrum.io/rpc',
           [ChainId.POLYGON]: 'https://polygon-rpc.com/',
@@ -79,7 +79,7 @@ export const [coinbaseWallet, coinbaseWalletHooks] = initializeConnector<Coinbas
     new CoinbaseWallet({
       actions,
       options: {
-        url: `https://mainnet.infura.io/v3/${INFURA_PROJECT_ID}`,
+        url: `https://rpc.mevblocker.io/`,
         appName: 'web3-react',
       },
     })

src/hooks/useGasInfo.ts

@@ -2,8 +2,6 @@ import { ChainId } from '@swapr/sdk'
 
 import { useEffect, useState } from 'react'
 
-import { INFURA_PROJECT_ID } from '../connectors'
-
 import { useActiveWeb3React } from './index'
 
 interface ChainGasInfo {
@@ -32,7 +30,7 @@ const gasInfoChainUrls: ChainGasInfo = {
     keys: ['ProposeGasPrice', 'FastGasPrice', 'SafeGasPrice'],
   },
   [ChainId.ARBITRUM_ONE]: {
-    url: `https://arbitrum-mainnet.infura.io/v3/${INFURA_PROJECT_ID}`,
+    url: `https://arb1.arbitrum.io/rpc`,
     requestConfig: {
       method: 'POST',
       headers: {