Merge pull request #2827 from cowprotocol/hotfix/1.40.6

Hotfix/1.40.6

.env

@@ -33,6 +33,9 @@ REACT_APP_NETWORK_URL_1=https://mainnet.infura.io/v3/586e7e6b7c7e437aa41f5da496a
 REACT_APP_NETWORK_URL_5=https://goerli.infura.io/v3/586e7e6b7c7e437aa41f5da496a749f5
 REACT_APP_NETWORK_URL_100=https://rpc.gnosischain.com
 
+# Wallet Connect
+# REACT_APP_WALLET_CONNECT_V1_BRIDGE='https://safe-walletconnect.safe.global'
+
 # Wallets
 REACT_APP_PORTIS_ID="c0e2bf01-4b08-4fd5-ac7b-8e26b58cd236"
 REACT_APP_FORTMATIC_KEY="pk_live_6AED76CA755EFDC7"

.env.production

@@ -29,6 +29,9 @@ REACT_APP_NETWORK_URL_5=https://goerli.infura.io/v3/586e7e6b7c7e437aa41f5da496a7
 #REACT_APP_NETWORK_URL_100=https://rpc.gnosischain.com/oe-only
 REACT_APP_NETWORK_URL_100=https://rpc.gnosischain.com
 
+# Wallet Connect
+# REACT_APP_WALLET_CONNECT_V1_BRIDGE='https://safe-walletconnect.safe.global'
+
 # Wallets
 REACT_APP_PORTIS_ID="c0e2bf01-4b08-4fd5-ac7b-8e26b58cd236"
 REACT_APP_FORTMATIC_KEY="pk_live_9E53F9A29112A9FC"

.github/workflows/vercel.yml

@@ -41,6 +41,7 @@ jobs:
           REACT_APP_GOOGLE_ANALYTICS_ID=${{ secrets.REACT_APP_GOOGLE_ANALYTICS_ID }}
           REACT_APP_AMPLITUDE_KEY=${{ secrets.REACT_APP_AMPLITUDE_KEY }}
           REACT_APP_LAUNCH_DARKLY_KEY=${{ secrets.REACT_APP_LAUNCH_DARKLY_KEY }}
+          REACT_APP_WALLET_CONNECT_V1_BRIDGE=${{ secrets.REACT_APP_WALLET_CONNECT_V1_BRIDGE }}
           vercel build -t ${{ secrets.VERCEL_TOKEN }} --prod
 
       - name: Get the version

README.md

@@ -182,6 +182,16 @@ The plan:
 
 `emergency.js` is not cached by browser and loaded before all.
 
+## Wallet Connect
+
+The app uses a Wallet Connect v1 bridge.
+
+You can define your own bridge by setting the following environment variable:
+
+```ini
+REACT_APP_WALLET_CONNECT_V1_BRIDGE='https://bridge.walletconnect.org'
+```
+
 ## Documentation
 
 1. [Oveall Architecture](docs/architecture-overview.md)

src/common/pure/OrderSubmittedContent/index.tsx

@@ -42,7 +42,7 @@ export function OrderSubmittedContent({ chainId, hash, onDismiss }: OrderSubmitt
         <Trans>Order Submitted</Trans>
       </Caption>
       {/*TODO: unify and fix explorer link. Refs: ExplorerLink, DisplayLink, EnhancedTransactionLink*/}
-      <ExternalLink href={getExplorerLink(chainId, hash, 'transaction')}>
+      <ExternalLink href={getExplorerLink(chainId, 'transaction', hash)}>
         <Trans>View on Explorer ↗</Trans>
       </ExternalLink>
       <ActionButton onClick={onDismiss}>

src/legacy/components/AddressInputPanel/index.tsx

@@ -115,7 +115,7 @@ export function AddressInputPanel({
                 {label ?? <Trans>Recipient</Trans>}
               </ThemedText.Black>
               {address && chainId && (
-                <ExternalLink href={getExplorerLink(chainId, name ?? address, 'address')} style={{ fontSize: '14px' }}>
+                <ExternalLink href={getExplorerLink(chainId, 'address', name ?? address)} style={{ fontSize: '14px' }}>
                   <Trans>(View on Explorer)</Trans>
                 </ExternalLink>
               )}

src/legacy/components/ExplorerLink/index.tsx

@@ -1,33 +1,83 @@
+import { PropsWithChildren } from 'react'
+
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
+
 import { ExternalLink } from 'legacy/theme'
-import { BlockExplorerLinkType, getExplorerLabel, getEtherscanLink } from 'legacy/utils'
+import { getExplorerLabel, getEtherscanLink } from 'legacy/utils'
+import { getExplorerBaseUrl } from 'legacy/utils/explorer'
 import { supportedChainId } from 'legacy/utils/supportedChainId'
 
 import { useWalletInfo } from 'modules/wallet'
 
-interface Props {
-  id: string
-  type?: BlockExplorerLinkType
+interface PropsBase extends PropsWithChildren {
+  // type?: BlockExplorerLinkType
   label?: string
   className?: string
+  defaultChain?: SupportedChainId
+}
+
+interface PropsWithId extends PropsBase {
+  type: 'transaction' | 'token' | 'address' | 'block' | 'token-transfer'
+  id: string
+}
+
+interface PropsWithoutId extends PropsBase {
+  type: 'cow-explorer-home'
 }
 
+export type Props = PropsWithId | PropsWithoutId
+
 /**
  * Creates a link to the relevant explorer: Etherscan, GP Explorer or Blockscout
  * @param props
  */
 export function ExplorerLink(props: Props) {
-  const { id, label, type = 'transaction', className } = props
   const { chainId: _chainId } = useWalletInfo()
-  const chainId = supportedChainId(_chainId)
+  const chainId = supportedChainId(_chainId) || props.defaultChain
 
   if (!chainId) {
     return null
   }
 
-  const linkLabel = label || getExplorerLabel(chainId, id, type)
+  const url = getUrl(chainId, props)
+  const { className } = props
+
+  const linkContent = getContent(chainId, props)
   return (
-    <ExternalLink className={className} href={getEtherscanLink(chainId, id, type)}>
-      {linkLabel} <span style={{ fontSize: '0.8em' }}>↗</span>
+    <ExternalLink className={className} href={url}>
+      {linkContent}
     </ExternalLink>
   )
 }
+
+function getUrl(chainId: SupportedChainId, props: Props) {
+  const { type } = props
+
+  if (type === 'cow-explorer-home') {
+    return getExplorerBaseUrl(chainId)
+  }
+
+  // return
+  return getEtherscanLink(chainId, type, props.id)
+}
+
+function getLabel(chainId: SupportedChainId, props: Props) {
+  const { label, type } = props
+
+  const id = type !== 'cow-explorer-home' ? props.id : undefined
+
+  return label || getExplorerLabel(chainId, type, id)
+}
+function getContent(chainId: SupportedChainId, props: Props) {
+  if (props.children) {
+    return props.children
+  }
+
+  const linkLabel = getLabel(chainId, props)
+
+  return (
+    <>
+      {linkLabel} <span style={{ fontSize: '0.8em' }}>↗</span>
+    </>
+  )
+}

src/legacy/components/Popups/TransactionPopupMod.tsx

@@ -40,7 +40,7 @@ export default function TransactionPopup({
         ) : (
           summary
         )}
-        {chainId && <ExplorerLink id={hash} />}
+        {chainId && <ExplorerLink id={hash} type="transaction" />}
       </AutoColumn>
     </RowNoFlex>
   )

src/legacy/components/SearchModal/ImportToken/index.tsx

@@ -68,7 +68,7 @@ function CardComponent({ theme, key, token, chainId, list }: CardComponentProps)
           </ThemedText.DarkGray>
         </AutoColumn>
         {chainId && (
-          <ExternalLink href={getExplorerLink(chainId, token.address, 'address')}>
+          <ExternalLink href={getExplorerLink(chainId, 'address', token.address)}>
             <AddressText fontSize={12}>{token.address}</AddressText>
           </ExternalLink>
         )}

src/legacy/components/SearchModal/ManageTokens/ManageTokensMod.tsx

@@ -88,15 +88,15 @@ export default function ManageTokens({ setModalView, setImportToken, ImportToken
         <RowBetween key={token.address} width="100%">
           <RowFixed>
             <CurrencyLogo currency={token} size={'20px'} />
-            <ExternalLink href={getExplorerLink(chainId, token.address, 'address')}>
+            <ExternalLink href={getExplorerLink(chainId, 'address', token.address)}>
               <ThemedText.Main ml={'10px'} fontWeight={600}>
                 <TokenSymbol token={token} /> {/* MOD */}
               </ThemedText.Main>
             </ExternalLink>
           </RowFixed>
           <RowFixed>
             <TrashIcon onClick={() => removeToken(chainId, token.address)} />
-            <ExternalLinkIcon href={getExplorerLink(chainId, token.address, 'address')} />
+            <ExternalLinkIcon href={getExplorerLink(chainId, 'address', token.address)} />
           </RowFixed>
         </RowBetween>
       ))

src/legacy/components/SearchModal/TokenImportCard/TokenImportCardMod.tsx

@@ -51,7 +51,7 @@ const TokenImportCard = ({ list, token }: TokenImportCardProps) => {
           </ThemedText.DarkGray>
         </AutoColumn>
         {chainId && (
-          <ExternalLink href={getExplorerLink(chainId, token.address, 'address')}>
+          <ExternalLink href={getExplorerLink(chainId, 'address', token.address)}>
             <AddressText fontSize={12}>{token.address}</AddressText>
           </ExternalLink>
         )}

src/legacy/components/Tokens/TokensTableRow.tsx

@@ -199,7 +199,7 @@ const DataRow = ({
       <Cell>{fiatValue}</Cell>
 
       <Cell>
-        <ExtLink href={getBlockExplorerUrl(chainId, tokenData.address, 'token')}>
+        <ExtLink href={getBlockExplorerUrl(chainId, 'token', tokenData.address)}>
           <TableButton>
             <SVG src={EtherscanImage} title="View token contract" description="View token contract" />
           </TableButton>

src/legacy/components/TransactionConfirmationModal/DisplayLink.tsx

@@ -27,9 +27,9 @@ export function DisplayLink({ id, chainId }: DisplayLinkProps) {
       ? orderCreationHash
       : undefined
   const href = ethFlowHash
-    ? getBlockExplorerUrl(chainId, ethFlowHash, 'transaction')
-    : getEtherscanLink(chainId, id, 'transaction')
-  const label = getExplorerLabel(chainId, ethFlowHash || id, 'transaction')
+    ? getBlockExplorerUrl(chainId, 'transaction', ethFlowHash)
+    : getEtherscanLink(chainId, 'transaction', id)
+  const label = getExplorerLabel(chainId, 'transaction', ethFlowHash || id)
 
   return (
     <ExternalLinkCustom href={href}>

src/legacy/components/Version/index.tsx

@@ -15,7 +15,7 @@ import pkg from '../../../../package.json'
 function _getContractsUrls(chainId: ChainId, contractAddressMap: typeof GP_SETTLEMENT_CONTRACT_ADDRESS) {
   const contractAddress = contractAddressMap[chainId]
   if (!contractAddress) return '-'
-  return getEtherscanLink(chainId, contractAddress, 'address')
+  return getEtherscanLink(chainId, 'address', contractAddress)
 }
 
 const VERSIONS: Record<

src/legacy/components/swap/UnsupportedCurrencyFooter/UnsupportedCurrencyFooterMod.tsx

@@ -99,7 +99,7 @@ export default function UnsupportedCurrencyFooter({
                         <ThemedText.Body fontWeight={500}>{token.symbol}</ThemedText.Body>
                       </AutoRow>
                       {chainId && (
-                        <ExternalLink href={getEtherscanLink(chainId, token.address, 'address')}>
+                        <ExternalLink href={getEtherscanLink(chainId, 'address', token.address)}>
                           <AddressText>{token.address}</AddressText>
                         </ExternalLink>
                       )}

src/legacy/constants/index.ts

@@ -141,7 +141,7 @@ export const FLASHBOTS_LINK = 'https://explore.flashbots.net/'
 export const GAS_PRICE_UPDATE_THRESHOLD = ms`5s`
 export const GAS_FEE_ENDPOINTS = {
   [ChainId.MAINNET]: 'https://api.blocknative.com/gasprices/blockprices',
-  [ChainId.GNOSIS_CHAIN]: 'https://blockscout.com/xdai/mainnet/api/v1/gas-price-oracle',
+  [ChainId.GNOSIS_CHAIN]: 'https://gnosis.blockscout.com/api/v1/gas-price-oracle',
   [ChainId.GOERLI]: '',
 }
 export const GAS_API_KEYS = {

src/legacy/hooks/useActivityDerivedState.ts

@@ -93,7 +93,7 @@ export function getActivityLinkUrl(params: {
 
     if (transactionHash) {
       // It's an Ethereum transaction: Etherscan link
-      return getEtherscanLink(chainId, transactionHash, 'transaction')
+      return getEtherscanLink(chainId, 'transaction', transactionHash)
     } else if (safeTransaction && safeTransaction) {
       // It's a safe transaction: Gnosis Safe Web link
       const { safe, safeTxHash } = safeTransaction
@@ -102,7 +102,7 @@ export function getActivityLinkUrl(params: {
   } else if (order) {
     if (order.orderCreationHash && (order.status === OrderStatus.CREATING || order.status === OrderStatus.FAILED)) {
       // It's a EthFlow transaction: Etherscan link
-      return getEtherscanLink(chainId, order.orderCreationHash, 'transaction')
+      return getEtherscanLink(chainId, 'transaction', order.orderCreationHash)
     } else {
       // It's an order: GP Explorer link
       return getExplorerOrderLink(chainId, id)

src/legacy/utils/index.ts

@@ -62,7 +62,7 @@ export function formattedFeeAmount(feeAmount: FeeAmount): number {
   return feeAmount / 10000
 }
 
-const GP_ORDER_ID_LENGTH = 114 // 112 (56 bytes in hex) + 2 (it's prefixed with "0x")
+const COW_ORDER_ID_LENGTH = 114 // 112 (56 bytes in hex) + 2 (it's prefixed with "0x")
 
 const ETHERSCAN_URLS: { [chainId in ChainId]: string } = {
   1: 'etherscan.io',
@@ -73,7 +73,13 @@ const ETHERSCAN_URLS: { [chainId in ChainId]: string } = {
   100: 'gnosisscan.io',
 }
 
-export type BlockExplorerLinkType = 'transaction' | 'token' | 'address' | 'block' | 'token-transfer'
+export type BlockExplorerLinkType =
+  | 'transaction'
+  | 'token'
+  | 'address'
+  | 'block'
+  | 'token-transfer'
+  | 'cow-explorer-home'
 
 function getEtherscanUrl(chainId: ChainId, data: string, type: BlockExplorerLinkType): string {
   const url = ETHERSCAN_URLS[chainId] || ETHERSCAN_URLS[1]
@@ -101,26 +107,28 @@ function getEtherscanUrl(chainId: ChainId, data: string, type: BlockExplorerLink
 }
 
 // Get the right block explorer URL by chainId
-export function getBlockExplorerUrl(chainId: ChainId, data: string, type: BlockExplorerLinkType): string {
+export function getBlockExplorerUrl(chainId: ChainId, type: BlockExplorerLinkType, data: string): string {
   return getEtherscanUrl(chainId, data, type)
 }
 
-export function isGpOrder(data: string, type: BlockExplorerLinkType) {
-  return type === 'transaction' && data.length === GP_ORDER_ID_LENGTH
+export function isCowOrder(type: BlockExplorerLinkType, data?: string) {
+  if (!data) return false
+
+  return type === 'transaction' && data.length === COW_ORDER_ID_LENGTH
 }
 
-export function getEtherscanLink(chainId: ChainId, data: string, type: BlockExplorerLinkType): string {
-  if (isGpOrder(data, type)) {
-    // Explorer for GP orders:
-    //    If a transaction has the size of the GP orderId, then it's a meta-tx
+export function getEtherscanLink(chainId: ChainId, type: BlockExplorerLinkType, data: string): string {
+  if (isCowOrder(type, data)) {
+    // Explorer for CoW orders:
+    //    If a transaction has the size of the CoW orderId, then it's a meta-tx
     return getExplorerOrderLink(chainId, data)
   } else {
     return getEtherscanUrl(chainId, data, type)
   }
 }
 
-export function getExplorerLabel(chainId: ChainId, data: string, type: BlockExplorerLinkType): string {
-  if (isGpOrder(data, type)) {
+export function getExplorerLabel(chainId: ChainId, type: BlockExplorerLinkType, data?: string): string {
+  if (isCowOrder(type, data) || type === 'cow-explorer-home') {
     return 'View on Explorer'
   } else if (chainId === ChainId.GNOSIS_CHAIN) {
     return 'View on Gnosisscan'

src/modules/account/containers/AccountDetails/index.tsx

@@ -187,7 +187,7 @@ export function AccountDetails({
   const disconnectWallet = useDisconnectWallet()
 
   const explorerOrdersLink = account && chainId && getExplorerAddressLink(chainId, account)
-  const explorerLabel = chainId && account ? getExplorerLabel(chainId, account, 'address') : undefined
+  const explorerLabel = chainId && account ? getExplorerLabel(chainId, 'address', account) : undefined
 
   const activities = useMultipleActivityDescriptors({ chainId, ids: pendingTransactions.concat(confirmedTransactions) })
   const activitiesGroupedByDate = groupActivitiesByDay(activities)
@@ -264,7 +264,7 @@ export function AccountDetails({
                 <AddressLink
                   hasENS={!!ENSName}
                   isENS={!!ENSName}
-                  href={getEtherscanLink(chainId, ENSName ? ENSName : account, 'address')}
+                  href={getEtherscanLink(chainId, 'address', ENSName ? ENSName : account)}
                 >
                   {explorerLabel} ↗
                 </AddressLink>