Display gas prices for each chain (in Settings)

src/components/swapv2/GasPriceTrackerPanel.tsx

@@ -0,0 +1,170 @@
+import React from 'react'
+import { Flex, Box } from 'rebass'
+import { ArrowLeft } from 'react-feather'
+import styled from 'styled-components'
+import { t } from '@lingui/macro'
+
+import useGasPriceFromDeBank, { GasLevel } from 'hooks/useGasPriceFromDeBank'
+import { GasStation } from 'components/Icons'
+
+type Props = {
+  className?: string
+  onBack: () => void
+}
+
+const mappings = [
+  {
+    gasLevel: GasLevel.SLOW,
+    label: t`Low`,
+  },
+  {
+    gasLevel: GasLevel.NORMAL,
+    label: t`Average`,
+  },
+  {
+    gasLevel: GasLevel.FAST,
+    label: t`High`,
+  },
+]
+
+const BackIconWrapper = styled(ArrowLeft)`
+  height: 20px;
+  width: 20px;
+  margin-right: 10px;
+  cursor: pointer;
+  path {
+    stroke: ${({ theme }) => theme.text} !important;
+  }
+`
+
+const BackText = styled.span`
+  font-size: 18px;
+  font-weight: 500;
+  color: ${({ theme }) => theme.text};
+`
+
+const GasPriceList = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding-top: 20px;
+  padding-bottom: 20px;
+
+  border-top: 1px solid ${({ theme }) => theme.border};
+  border-bottom: 1px solid ${({ theme }) => theme.border};
+`
+
+const GasPriceItem = styled.div`
+  flex: 1 1 33%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 8px;
+
+  &[data-type='${GasLevel.SLOW}'] {
+    color: ${({ theme }) => theme.green};
+  }
+  &[data-type='${GasLevel.NORMAL}'] {
+    color: ${({ theme }) => theme.text};
+
+    border-left: 1px solid ${({ theme }) => theme.border};
+    border-right: 1px solid ${({ theme }) => theme.border};
+  }
+  &[data-type='${GasLevel.FAST}'] {
+    color: ${({ theme }) => theme.red};
+  }
+`
+
+const GasPriceItemTitle = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  column-gap: 4px;
+
+  height: 16px;
+
+  color: inherit;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+
+  svg {
+    height: 100%;
+    width: auto;
+  }
+
+  span {
+    text-transform: capitalize;
+  }
+`
+
+const PriceInGwei = styled.div`
+  color: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+`
+
+const PriceInUSD = styled.div`
+  color: ${({ theme }) => theme.subText};
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+`
+
+const getPriceInGweiText = (value: number | undefined) => {
+  return value ? `${value} gwei` : '-'
+}
+
+const getPriceInUSDText = (value: string | undefined) => {
+  return value ? `$${value}` : '-'
+}
+
+const GasPriceTrackerPanel: React.FC<Props> = ({ className, onBack }) => {
+  const data = useGasPriceFromDeBank()
+
+  if (!data) {
+    return null
+  }
+
+  return (
+    <Box minHeight="300px" width="100%" className={className}>
+      <Flex
+        width={'100%'}
+        flexDirection={'column'}
+        sx={{
+          rowGap: '16px',
+        }}
+      >
+        <Flex
+          alignItems="center"
+          sx={{
+            // this is to make the arrow stay exactly where it stays in Swap panel
+            marginTop: '5px',
+          }}
+        >
+          <BackIconWrapper onClick={onBack}></BackIconWrapper>
+          <BackText>{t`Gas Price Tracker`}</BackText>
+        </Flex>
+
+        <GasPriceList>
+          {mappings.map(({ gasLevel, label }) => (
+            <GasPriceItem key={gasLevel} data-type={gasLevel}>
+              <GasPriceItemTitle>
+                <GasStation />
+                <span>{label}</span>
+              </GasPriceItemTitle>
+
+              <PriceInGwei>{getPriceInGweiText(data[gasLevel].gasPriceInGwei)}</PriceInGwei>
+              <PriceInUSD>{getPriceInUSDText(data[gasLevel].minimumTxFeeInUSD)}</PriceInUSD>
+            </GasPriceItem>
+          ))}
+        </GasPriceList>
+      </Flex>
+    </Box>
+  )
+}
+
+export default GasPriceTrackerPanel

src/components/swapv2/SwapSettingsPanel/GasPriceTrackerSetting.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import styled from 'styled-components'
+import { isMobile } from 'react-device-detect'
+import { Trans } from '@lingui/macro'
+import { ChevronRight } from 'react-feather'
+
+import useGasPriceFromDeBank, { GasLevel } from 'hooks/useGasPriceFromDeBank'
+
+type Props = {
+  onClick: () => void
+}
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  cursor: pointer;
+`
+
+const SettingLabel = styled.span`
+  font-size: ${isMobile ? '14px' : '12px'};
+  color: ${({ theme }) => theme.text};
+  font-weight: 400;
+  line-height: 16px;
+`
+
+const Group = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const Separator = styled.span`
+  margin-left: 4px;
+  margin-right: 4px;
+`
+
+const PriceInWei = styled.span`
+  color: ${({ theme }) => theme.text};
+  font-size: ${isMobile ? '14px' : '12px'};
+  font-weight: 400;
+  line-height: 16px;
+`
+
+const PriceInUSD = styled.span`
+  color: ${({ theme }) => theme.subText};
+  font-size: ${isMobile ? '14px' : '12px'};
+  font-weight: 400;
+  line-height: 16px;
+`
+
+const getPriceInGweiText = (value: number | undefined) => {
+  return value ? `${value} gwei` : '-'
+}
+
+const getPriceInUSDText = (value: string | undefined) => {
+  return value ? `$${value}` : '-'
+}
+
+const GasPriceTrackerSetting: React.FC<Props> = ({ onClick }) => {
+  const data = useGasPriceFromDeBank()
+
+  if (!data) {
+    return null
+  }
+
+  return (
+    <Container onClick={onClick}>
+      <SettingLabel>
+        <Trans>Gas Price Tracker</Trans>
+      </SettingLabel>
+
+      <Group>
+        <PriceInWei>{getPriceInGweiText(data[GasLevel.NORMAL].gasPriceInGwei)}</PriceInWei>
+        <Separator>|</Separator>
+        <PriceInUSD>{getPriceInUSDText(data[GasLevel.NORMAL].minimumTxFeeInUSD)}</PriceInUSD>
+        <ChevronRight />
+      </Group>
+    </Container>
+  )
+}
+
+export default GasPriceTrackerSetting

src/components/swapv2/SwapSettingsPanel/index.tsx

@@ -29,10 +29,12 @@ import useTopTrendingSoonTokensInCurrentNetwork from 'components/TopTrendingSoon
 import TransactionTimeLimitSetting from './TransactionTimeLimitSetting'
 import SlippageSetting from './SlippageSetting'
 import AdvancedModeSetting from './AdvancedModeSetting'
+import GasPriceTrackerSetting from './GasPriceTrackerSetting'
 
 type Props = {
   className?: string
   onBack: () => void
+  onClickGasPriceTracker: () => void
 }
 
 const BackIconWrapper = styled(ArrowLeft)`
@@ -51,7 +53,7 @@ const BackText = styled.span`
   color: ${({ theme }) => theme.text};
 `
 
-const SettingsPanel: React.FC<Props> = ({ className, onBack }) => {
+const SettingsPanel: React.FC<Props> = ({ className, onBack, onClickGasPriceTracker }) => {
   const theme = useTheme()
 
   const { data: topTrendingSoonTokens } = useTopTrendingSoonTokensInCurrentNetwork()
@@ -131,6 +133,8 @@ const SettingsPanel: React.FC<Props> = ({ className, onBack }) => {
 
           <AdvancedModeSetting />
 
+          <GasPriceTrackerSetting onClick={onClickGasPriceTracker} />
+
           <Flex
             sx={{
               flexDirection: 'column',

src/constants/networks/arbitrum-testnet.ts

@@ -55,6 +55,7 @@ const arbitrumTestnetInfo: NetworkInfo = {
   avgrageBlockTimeInSeconds: 1, // TODO: check these info
   coingeckoNetworkId: EMPTY,
   coingeckoNativeTokenId: 'ethereum',
+  deBankSlug: EMPTY,
 }
 
 export default arbitrumTestnetInfo

src/constants/networks/arbitrum.ts

@@ -61,6 +61,7 @@ const arbitrumInfo: NetworkInfo = {
   avgrageBlockTimeInSeconds: 1, // TODO: check these info
   coingeckoNetworkId: 'arbitrum-one',
   coingeckoNativeTokenId: 'ethereum',
+  deBankSlug: 'arb',
 }
 
 export default arbitrumInfo

src/constants/networks/aurora.ts

@@ -59,6 +59,7 @@ const auroraInfo: NetworkInfo = {
   avgrageBlockTimeInSeconds: 1,
   coingeckoNetworkId: 'aurora',
   coingeckoNativeTokenId: 'ethereum',
+  deBankSlug: 'aurora',
 }
 
 export default auroraInfo

src/constants/networks/avax-testnet.ts

@@ -58,6 +58,7 @@ const avaxTestnetInfo: NetworkInfo = {
   avgrageBlockTimeInSeconds: 1.85,
   coingeckoNetworkId: EMPTY,
   coingeckoNativeTokenId: EMPTY,
+  deBankSlug: EMPTY,
 }
 
 export default avaxTestnetInfo

src/constants/networks/avax.ts

@@ -66,6 +66,7 @@ const avaxInfo: NetworkInfo = {
   avgrageBlockTimeInSeconds: 1.85,
   coingeckoNetworkId: 'avalanche',
   coingeckoNativeTokenId: 'avalanche-2',
+  deBankSlug: 'avax',
 }
 
 export default avaxInfo

src/constants/networks/bnb-testnet.ts

@@ -64,6 +64,7 @@ const bnbTestnetInfo: NetworkInfo = {
   avgrageBlockTimeInSeconds: 3,
   coingeckoNetworkId: EMPTY,
   coingeckoNativeTokenId: EMPTY,
+  deBankSlug: EMPTY,
 }
 
 export default bnbTestnetInfo

src/constants/networks/bnb.ts

@@ -65,6 +65,7 @@ const bnbInfo: NetworkInfo = {
   avgrageBlockTimeInSeconds: 3,
   coingeckoNetworkId: 'binance-smart-chain',
   coingeckoNativeTokenId: 'binancecoin',
+  deBankSlug: 'bsc',
 }
 
 export default bnbInfo

src/constants/networks/bttc.ts

@@ -4,6 +4,7 @@ import { createClient } from 'utils/client'
 
 import BTT from 'assets/networks/bttc.png'
 
+const EMPTY = ''
 const EMPTY_ARRAY: any[] = []
 const NOT_SUPPORT = null
 
@@ -65,6 +66,7 @@ const bttcInfo: NetworkInfo = {
   avgrageBlockTimeInSeconds: 2, // TODO: check these info
   coingeckoNetworkId: 'tron',
   coingeckoNativeTokenId: 'bittorrent',
+  deBankSlug: EMPTY,
 }
 
 export default bttcInfo

src/constants/networks/cronos-testnet.ts

@@ -66,6 +66,7 @@ const cronosTestnetInfo: NetworkInfo = {
   avgrageBlockTimeInSeconds: 5.6,
   coingeckoNetworkId: EMPTY,
   coingeckoNativeTokenId: EMPTY,
+  deBankSlug: EMPTY,
 }
 
 export default cronosTestnetInfo

src/constants/networks/cronos.ts

@@ -63,6 +63,7 @@ const cronosInfo: NetworkInfo = {
   avgrageBlockTimeInSeconds: 6,
   coingeckoNetworkId: 'cronos',
   coingeckoNativeTokenId: 'crypto-com-chain',
+  deBankSlug: 'cro',
 }
 
 export default cronosInfo

src/constants/networks/ethereum.ts

@@ -64,6 +64,7 @@ const ethereumInfo: NetworkInfo = {
   avgrageBlockTimeInSeconds: 13.13,
   coingeckoNetworkId: 'ethereum',
   coingeckoNativeTokenId: 'ethereum',
+  deBankSlug: 'eth',
 }
 
 export default ethereumInfo

src/constants/networks/fantom.ts

@@ -59,6 +59,7 @@ const fantomInfo: NetworkInfo = {
   avgrageBlockTimeInSeconds: 1,
   coingeckoNetworkId: 'fantom',
   coingeckoNativeTokenId: 'fantom',
+  deBankSlug: 'ftm',
 }
 
 export default fantomInfo

src/constants/networks/görli.ts

@@ -55,6 +55,7 @@ const görliInfo: NetworkInfo = {
   avgrageBlockTimeInSeconds: 13.13,
   coingeckoNetworkId: EMPTY,
   coingeckoNativeTokenId: EMPTY,
+  deBankSlug: EMPTY,
 }
 
 export default görliInfo