442/more data on network selector (#447)

* Exporting getExplorerBaseUrl * Added omni-bridge to gchain * Added CoW Prptocl explorer to network dropdown info * Removed duplicated entry of NetworkAlert * Modded NetworkAlert component to add gchain to it * Now properly mod NetworkAlert * Added rinkeby faucet in place of the bridge link
cowprotocol · Apr 27, 2022 · 168423a · 168423a
1 parent 31ad497
commit 168423a
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 7 deletions.
diff --git a/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx b/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx
@@ -14,10 +14,8 @@ import { ChevronDown } from 'react-feather'
 import styled from 'styled-components/macro'
 import { ExternalLink, MEDIA_WIDTHS } from 'theme'
 // import { replaceURLParam } from 'utils/routes'
-
 // import { useAppDispatch } from 'state/hooks'
 // import { switchToNetwork } from 'utils/switchToNetwork'
-
 // MOD imports
 import {
   ActiveRowLinkList,
@@ -27,6 +25,7 @@ import {
 } from '@src/components/Header/NetworkSelector'
 import useChangeNetworks, { ChainSwitchCallbackOptions } from 'hooks/useChangeNetworks'
 import { transparentize } from 'polished'
+import { getExplorerBaseUrl } from 'utils/explorer'
 
 /* const ActiveRowLinkList = styled.div`
   display: flex;
@@ -185,7 +184,8 @@ const BridgeLabel = ({ chainId }: { chainId: SupportedChainId }) => {
     case SupportedChainId.POLYGON:
     case SupportedChainId.POLYGON_MUMBAI:
       return <Trans>Polygon Bridge</Trans>*/
-    // TODO: add bridges, if any
+    case SupportedChainId.RINKEBY:
+      return <Trans>Faucet</Trans>
     default:
       return <Trans>Bridge</Trans>
   }
@@ -253,6 +253,10 @@ function Row({
               <Trans>Help Center</Trans> <LinkOutCircle />
             </ExternalLink>
           ) : null}
+
+          <ExternalLink href={getExplorerBaseUrl(chainId)}>
+            <Trans>CoW Protocol Explorer</Trans> <LinkOutCircle />
+          </ExternalLink>
         </ActiveRowLinkList>
       </ActiveRowWrapper>
     )

diff --git a/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx b/src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx
@@ -0,0 +1,182 @@
+import { Trans } from '@lingui/macro'
+import { CHAIN_INFO } from 'constants/chainInfo'
+import { SupportedChainId } from 'constants/chains'
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { ArrowUpRight } from 'react-feather'
+import { useDarkModeManager } from '@src/state/user/hooks'
+import styled from 'styled-components/macro'
+import { ExternalLink, HideSmall } from 'theme'
+
+import { AutoRow } from 'components/Row'
+
+const L2Icon = styled.img`
+  width: 24px;
+  height: 24px;
+  margin-right: 16px;
+`
+
+/* export const Controls = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  padding: 0 20px 20px 20px;
+` */
+
+const BodyText = styled.div`
+  color: ${({ color }) => color};
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 8px;
+  font-size: 14px;
+`
+const RootWrapper = styled.div`
+  position: relative;
+  margin-top: 16px;
+`
+
+const SHOULD_SHOW_ALERT = {
+  /* [SupportedChainId.OPTIMISM]: true,
+  [SupportedChainId.OPTIMISTIC_KOVAN]: true,
+  [SupportedChainId.ARBITRUM_ONE]: true,
+  [SupportedChainId.ARBITRUM_RINKEBY]: true,
+  [SupportedChainId.POLYGON]: true,
+  [SupportedChainId.POLYGON_MUMBAI]: true, */
+  [SupportedChainId.XDAI]: true,
+}
+
+type NetworkAlertChains = keyof typeof SHOULD_SHOW_ALERT
+
+const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
+  [darkMode in 'dark' | 'light']: { [chainId in NetworkAlertChains]: string }
+} = {
+  dark: {
+    /* [SupportedChainId.POLYGON]:
+      'radial-gradient(100% 93.36% at 0% 6.64%, rgba(160, 108, 247, 0.1) 0%, rgba(82, 32, 166, 0.1) 100%)',
+    [SupportedChainId.POLYGON_MUMBAI]:
+      'radial-gradient(100% 93.36% at 0% 6.64%, rgba(160, 108, 247, 0.1) 0%, rgba(82, 32, 166, 0.1) 100%)',
+    [SupportedChainId.OPTIMISM]:
+      'radial-gradient(948% 292% at 42% 0%, rgba(255, 58, 212, 0.01) 0%, rgba(255, 255, 255, 0.04) 100%),radial-gradient(98% 96% at 2% 0%, rgba(255, 39, 39, 0.01) 0%, rgba(235, 0, 255, 0.01) 96%)',
+    [SupportedChainId.OPTIMISTIC_KOVAN]:
+      'radial-gradient(948% 292% at 42% 0%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.04) 100%),radial-gradient(98% 96% at 2% 0%, rgba(255, 39, 39, 0.04) 0%, rgba(235, 0, 255, 0.01 96%)',
+    [SupportedChainId.ARBITRUM_ONE]:
+      'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.01) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.05) 0%, rgba(33, 114, 229, 0.05) 100%), hsla(0, 0%, 100%, 0.05)',
+    [SupportedChainId.ARBITRUM_RINKEBY]:
+      'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.05) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.05) 0%, rgba(33, 114, 229, 0.1) 100%), hsla(0, 0%, 100%, 0.05)', */
+    // TODO: adjust colors
+    [SupportedChainId.XDAI]:
+      'radial-gradient(100% 93.36% at 0% 6.64%, rgba(160, 108, 247, 0.1) 0%, rgba(82, 32, 166, 0.1) 100%)',
+  },
+  light: {
+    /* [SupportedChainId.POLYGON]:
+      'radial-gradient(182.71% 205.59% at 2.81% 7.69%, rgba(130, 71, 229, 0.2) 0%, rgba(167, 202, 255, 0.2) 100%)',
+    [SupportedChainId.POLYGON_MUMBAI]:
+      'radial-gradient(182.71% 205.59% at 2.81% 7.69%, rgba(130, 71, 229, 0.2) 0%, rgba(167, 202, 255, 0.2) 100%)',
+    [SupportedChainId.OPTIMISM]:
+      'radial-gradient(92% 105% at 50% 7%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%),radial-gradient(100% 97% at 0% 12%, rgba(235, 0, 255, 0.1) 0%, rgba(243, 19, 19, 0.1) 100%), hsla(0, 0%, 100%, 0.1)',
+    [SupportedChainId.OPTIMISTIC_KOVAN]:
+      'radial-gradient(92% 105% at 50% 7%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%),radial-gradient(100% 97% at 0% 12%, rgba(235, 0, 255, 0.1) 0%, rgba(243, 19, 19, 0.1) 100%), hsla(0, 0%, 100%, 0.1)',
+    [SupportedChainId.ARBITRUM_ONE]:
+      'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(circle at top left, hsla(206, 50%, 75%, 0.01), hsla(215, 79%, 51%, 0.12)), hsla(0, 0%, 100%, 0.1)',
+    [SupportedChainId.ARBITRUM_RINKEBY]:
+      'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(circle at top left, hsla(206, 50%, 75%, 0.01), hsla(215, 79%, 51%, 0.12)), hsla(0, 0%, 100%, 0.1)', */
+    // TODO: adjust colors
+    [SupportedChainId.XDAI]:
+      'radial-gradient(182.71% 205.59% at 2.81% 7.69%, rgba(130, 71, 229, 0.2) 0%, rgba(167, 202, 255, 0.2) 100%)',
+  },
+}
+
+const ContentWrapper = styled.div<{ chainId: NetworkAlertChains; darkMode: boolean; logoUrl: string }>`
+  background: ${({ chainId, darkMode }) => BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID[darkMode ? 'dark' : 'light'][chainId]};
+  border-radius: 20px;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  :before {
+    background-image: url(${({ logoUrl }) => logoUrl});
+    background-repeat: no-repeat;
+    background-size: 300px;
+    content: '';
+    height: 300px;
+    opacity: 0.1;
+    position: absolute;
+    transform: rotate(25deg) translate(-90px, -40px);
+    width: 300px;
+    z-index: -1;
+  }
+`
+const Header = styled.h2`
+  font-weight: 600;
+  font-size: 16px;
+  margin: 0;
+`
+
+const LinkOutToBridge = styled(ExternalLink)`
+  align-items: center;
+  border-radius: 8px;
+  color: white;
+  display: flex;
+  font-size: 16px;
+  justify-content: space-between;
+  padding: 6px 8px;
+  margin-right: 12px;
+  text-decoration: none !important;
+  width: 100%;
+`
+
+const StyledArrowUpRight = styled(ArrowUpRight)`
+  margin-left: 12px;
+  width: 24px;
+  height: 24px;
+`
+
+const TEXT_COLORS: { [chainId in NetworkAlertChains]: string } = {
+  /* [SupportedChainId.POLYGON]: 'rgba(130, 71, 229)',
+  [SupportedChainId.POLYGON_MUMBAI]: 'rgba(130, 71, 229)',
+  [SupportedChainId.OPTIMISM]: '#ff3856',
+  [SupportedChainId.OPTIMISTIC_KOVAN]: '#ff3856',
+  [SupportedChainId.ARBITRUM_ONE]: '#0490ed',
+  [SupportedChainId.ARBITRUM_RINKEBY]: '#0490ed', */
+  [SupportedChainId.XDAI]: '#0490ed', // TODO: adjust colors
+}
+
+function shouldShowAlert(chainId: number | undefined): chainId is NetworkAlertChains {
+  return Boolean(chainId && SHOULD_SHOW_ALERT[chainId as unknown as NetworkAlertChains])
+}
+
+export function NetworkAlert() {
+  const { chainId } = useActiveWeb3React()
+  const [darkMode] = useDarkModeManager()
+
+  console.log(`networkalert/shouldshow`, chainId, shouldShowAlert(chainId))
+  if (!shouldShowAlert(chainId)) {
+    return null
+  }
+
+  const { label, logoUrl, bridge } = CHAIN_INFO[chainId]
+  const textColor = TEXT_COLORS[chainId]
+
+  return bridge ? (
+    <RootWrapper>
+      <ContentWrapper chainId={chainId} darkMode={darkMode} logoUrl={logoUrl}>
+        <LinkOutToBridge href={bridge}>
+          <BodyText color={textColor}>
+            <L2Icon src={logoUrl} />
+            <AutoRow>
+              <Header>
+                <Trans>{label} token bridge</Trans>
+              </Header>
+              <HideSmall>
+                <Trans>Deposit tokens to the {label} network.</Trans>
+              </HideSmall>
+            </AutoRow>
+          </BodyText>
+          <StyledArrowUpRight color={textColor} />
+        </LinkOutToBridge>
+      </ContentWrapper>
+    </RootWrapper>
+  ) : null
+}
diff --git a/src/custom/components/NetworkAlert/NetworkAlert/index.tsx b/src/custom/components/NetworkAlert/NetworkAlert/index.tsx
@@ -0,0 +1 @@
+export * from './NetworkAlert'
diff --git a/src/custom/constants/chainInfo/chainInfoMod.ts b/src/custom/constants/chainInfo/chainInfoMod.ts
@@ -68,6 +68,7 @@ export const CHAIN_INFO: ChainInfoMap = {
     docs: 'https://docs.cow.fi/',
     explorer: 'https://rinkeby.etherscan.io/',
     infoLink: 'https://cow.fi',
+    bridge: 'https://www.rinkeby.io/#faucet', // actually a faucet rather than a bridge
     label: 'Rinkeby',
     logoUrl: RinkebyLogo,
     nativeCurrency: { name: 'Rinkeby Ether', symbol: 'rETH', decimals: 18 },
@@ -178,6 +179,7 @@ export const CHAIN_INFO: ChainInfoMap = {
   [SupportedChainId.XDAI]: {
     networkType: NetworkType.L1,
     docs: 'https://docs.gnosischain.com/',
+    bridge: 'https://omni.gnosischain.com/bridge',
     explorer: 'https://blockscout.com/xdai/mainnet/',
     infoLink: 'https://www.xdaichain.com/',
     label: 'Gnosis Chain',

diff --git a/src/custom/pages/Swap/SwapMod.tsx b/src/custom/pages/Swap/SwapMod.tsx
@@ -563,7 +563,6 @@ export default function Swap({
       {/* CoWmunity Fees Discount Modal */}
       <CowSubsidyModal isOpen={showCowSubsidyModal} onDismiss={closeModals} />
 
-      <NetworkAlert />
       <AffiliateStatusCheck />
       <StyledAppBody className={className}>
         <SwapHeader allowedSlippage={allowedSlippage} />

diff --git a/src/custom/utils/explorer.ts b/src/custom/utils/explorer.ts
@@ -24,7 +24,7 @@ function _getExplorerUrlByEnvironment() {
 
 const EXPLORER_BASE_URL: Partial<Record<ChainId, string>> = _getExplorerUrlByEnvironment()
 
-function _getExplorerBaseUrl(chainId: ChainId): string {
+export function getExplorerBaseUrl(chainId: ChainId): string {
   const baseUrl = EXPLORER_BASE_URL[chainId]
 
   if (!baseUrl) {
@@ -35,13 +35,13 @@ function _getExplorerBaseUrl(chainId: ChainId): string {
 }
 
 export function getExplorerOrderLink(chainId: ChainId, orderId: OrderID): string {
-  const baseUrl = _getExplorerBaseUrl(chainId)
+  const baseUrl = getExplorerBaseUrl(chainId)
 
   return baseUrl + `/orders/${orderId}`
 }
 
 export function getExplorerAddressLink(chainId: ChainId, address: string): string {
-  const baseUrl = _getExplorerBaseUrl(chainId)
+  const baseUrl = getExplorerBaseUrl(chainId)
 
   return baseUrl + `/address/${address}`
 }