Allows placing orders with matic, instead of wmatic (#830)

* allows placing orders with matic, instead of wmatic * refactor blockchain explorer * updating prettier extend and packages
gnosis · Nov 17, 2021 · 9fc16d1 · 9fc16d1
1 parent be8e58b
commit 9fc16d1
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 43 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -32,8 +32,7 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
     'plugin:@typescript-eslint/recommended',
-    'prettier/@typescript-eslint',
-    'prettier/react',
+    'prettier',
     'plugin:prettier/recommended',
     'plugin:import/errors',
     'plugin:import/warnings',

diff --git a/package.json b/package.json
@@ -49,13 +49,13 @@
     "@types/rebass": "^4.0.5",
     "@types/styled-components": "^5.1.7",
     "@types/testing-library__cypress": "^5.0.5",
-    "@typescript-eslint/eslint-plugin": "^4.8.2",
-    "@typescript-eslint/parser": "^4.8.2",
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
+    "@typescript-eslint/parser": "^5.3.1",
     "@web3-react/types": "^6.0.7",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^4.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-sort-destructure-keys": "^1.3.5",
     "husky": "^4.3.6",
     "lint-staged": "^11.2.6",

diff --git a/src/components/auction/Claimer/index.tsx b/src/components/auction/Claimer/index.tsx
@@ -12,7 +12,7 @@ import {
 import { useWalletModalToggle } from '../../../state/application/hooks'
 import { DerivedAuctionInfo, useDerivedClaimInfo } from '../../../state/orderPlacement/hooks'
 import { AuctionIdentifier } from '../../../state/orderPlacement/reducer'
-import { getFullTokenDisplay, isTokenWETH, isTokenXDAI } from '../../../utils'
+import { getFullTokenDisplay, isTokenWETH, isTokenWMATIC, isTokenXDAI } from '../../../utils'
 import { Button } from '../../buttons/Button'
 import { ButtonAnchor } from '../../buttons/ButtonAnchor'
 import { ButtonType } from '../../buttons/buttonStylingTypes'
@@ -133,6 +133,8 @@ const Claimer: React.FC<Props> = (props) => {
         ? 'WXDAI'
         : biddingTokenDisplay === 'ETH'
         ? 'WETH'
+        : biddingTokenDisplay === 'WMATIC'
+        ? 'MATIC'
         : biddingTokenDisplay,
     [biddingTokenDisplay],
   )
@@ -165,22 +167,26 @@ const Claimer: React.FC<Props> = (props) => {
 
   const isXDAI = isTokenXDAI(derivedAuctionInfo.biddingToken.address, chainId)
   const isWETH = isTokenWETH(derivedAuctionInfo.biddingToken.address, chainId)
+  const isMATIC = isTokenWMATIC(derivedAuctionInfo.biddingToken.address, chainId)
 
   const showUnwrapButton = useMemo(
     () =>
-      (isXDAI || isWETH) &&
+      (isXDAI || isWETH || isMATIC) &&
       account &&
       chainId === Web3ChainId &&
       claimableBiddingToken &&
       claimableBiddingToken.greaterThan('0'),
-    [Web3ChainId, account, chainId, claimableBiddingToken, isWETH, isXDAI],
+    [Web3ChainId, account, chainId, claimableBiddingToken, isWETH, isXDAI, isMATIC],
   )
-
+  // eslint-disable-next-line
+  console.log('isMATIC', isMATIC)
   const unwrapTooltip = `Unwrap ${biddingToken.symbol} on ${
-    isXDAI ? 'Honeyswap' : 'Uniswap'
+    isXDAI ? 'Honeyswap' : isMATIC ? 'QuickSwap' : 'Uniswap'
   }. Do it after you claimed your ${biddingTokenDisplayWrapped}`
   const unwrapURL = isXDAI
     ? `https://app.honeyswap.org/#/swap?inputCurrency=${biddingToken.address}`
+    : isMATIC
+    ? 'https://quickswap.exchange/#/swap?inputCurrency=${biddingToken.address}'
     : `https://app.uniswap.org/#/swap?inputCurrency=${biddingToken.address}`
 
   return (

diff --git a/src/components/auction/OrderPlacement/index.tsx b/src/components/auction/OrderPlacement/index.tsx
@@ -28,6 +28,7 @@ import {
   EASY_AUCTION_NETWORKS,
   getFullTokenDisplay,
   isTokenWETH,
+  isTokenWMATIC,
   isTokenXDAI,
 } from '../../../utils'
 import { convertPriceIntoBuyAndSellAmount, getInverse } from '../../../utils/prices'
@@ -343,7 +344,9 @@ const OrderPlacement: React.FC<OrderPlacementProps> = (props) => {
   const isWrappable =
     biddingTokenBalance &&
     biddingTokenBalance.greaterThan('0') &&
-    (isTokenXDAI(biddingToken.address, chainId) || isTokenWETH(biddingToken.address, chainId)) &&
+    (isTokenXDAI(biddingToken.address, chainId) ||
+      isTokenWETH(biddingToken.address, chainId) ||
+      isTokenWMATIC(biddingToken.address, chainId)) &&
     !!account &&
     !!biddingToken.address
 
@@ -407,6 +410,10 @@ const OrderPlacement: React.FC<OrderPlacementProps> = (props) => {
                     ? window.open(
                         `https://app.honeyswap.org/#/swap?inputCurrency=${biddingToken.address}`,
                       )
+                    : chainId == 137
+                    ? window.open(
+                        `https://quickswap.exchange/#/swap?inputCurrency=${biddingToken.address}`,
+                      )
                     : window.open(
                         `https://app.uniswap.org/#/swap?inputCurrency=${biddingToken.address}`,
                       ),

diff --git a/src/components/form/AmountInputPanel/index.tsx b/src/components/form/AmountInputPanel/index.tsx
@@ -5,6 +5,7 @@ import styled, { keyframes } from 'styled-components'
 import { Token } from '@josojo/honeyswap-sdk'
 import ReactTooltip from 'react-tooltip'
 
+import { unwrapMessage } from '../../../constants'
 import { useActiveWeb3React } from '../../../hooks'
 import { ApprovalState } from '../../../hooks/useApproveCallback'
 import { ChainId, getTokenDisplay } from '../../../utils'
@@ -128,8 +129,7 @@ const AmountInputPanel: React.FC<Props> = (props) => {
   const { account } = useActiveWeb3React()
   const isUnlocking = unlock.unlockState === ApprovalState.PENDING
   const error = info?.type === InfoType.error
-  const dataTip =
-    chainId == 100 ? `Unwrap WXDAI to XDAI on Honeyswap` : `Unwrap WETH to ETH on Uniswap`
+  const dataTip = unwrapMessage[chainId]
 
   return (
     <>

diff --git a/src/components/modals/ClaimConfirmationModal/index.tsx b/src/components/modals/ClaimConfirmationModal/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
+import { explorerNames } from '../../../constants'
 import { useActiveWeb3React } from '../../../hooks'
 import { ExternalLink } from '../../../theme'
 import { getExplorerLink } from '../../../utils'
@@ -75,7 +76,7 @@ const ClaimConfirmationModal: React.FC<Props> = (props) => {
               {pendingText}
             </Text>
             <Link href={getExplorerLink(chainId, hash, 'transaction')}>
-              <span>View transaction {`on ${chainId === 100 ? 'Blockscout' : 'Etherscan'}`}</span>
+              <span>View transaction {`on ${explorerNames[chainId]}`}</span>
               <LinkIcon />
             </Link>
           </>

diff --git a/src/components/modals/ConfirmationModal/index.tsx b/src/components/modals/ConfirmationModal/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
+import { explorerNames } from '../../../constants'
 import { useActiveWeb3React } from '../../../hooks'
 import { ExternalLink } from '../../../theme'
 import { getExplorerLink } from '../../../utils'
@@ -98,7 +99,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = (props) => {
               {pendingText}
             </Text>
             <Link href={getExplorerLink(chainId, hash, 'transaction')}>
-              <span>View transaction {`on ${chainId === 100 ? 'Blockscout' : 'Etherscan'}`}</span>
+              <span>View transaction {`on ${explorerNames[chainId]}`}</span>
               <LinkIcon />
             </Link>
           </>

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -15,6 +15,20 @@ export const chainNames = {
   137: 'Polygon',
 }
 
+export const explorerNames = {
+  1: 'Etherscan',
+  4: 'Etherscan',
+  100: 'Blockscout',
+  137: 'Polyscan',
+}
+
+export const unwrapMessage = {
+  1: `Unwrap WETH to ETH on Uniswap`,
+  4: `Unwrap WETH to ETH on Uniswap`,
+  100: `Unwrap WXDAI to XDAI on Honeyswap`,
+  137: `Unwrap WMATIC to MATIC on Quickswap`,
+}
+
 const MAINNET_WALLETS = {
   INJECTED: {
     connector: injected,

diff --git a/src/hooks/useApproveCallback.ts b/src/hooks/useApproveCallback.ts
@@ -6,7 +6,7 @@ import { TokenAmount } from '@josojo/honeyswap-sdk'
 
 import { useTokenAllowance } from '../data/Allowances'
 import { useHasPendingApproval, useTransactionAdder } from '../state/transactions/hooks'
-import { ChainId, calculateGasMargin, isTokenWETH, isTokenXDAI } from '../utils'
+import { ChainId, calculateGasMargin, isTokenWETH, isTokenWMATIC, isTokenXDAI } from '../utils'
 import { getLogger } from '../utils/logger'
 import { useActiveWeb3React } from './index'
 import { useTokenContract } from './useContract'
@@ -45,7 +45,8 @@ export function useApproveCallback(
     // amountToApprove will be defined if currentAllowance is
     if (
       isTokenXDAI(amountToApprove?.token?.address, chainId) ||
-      isTokenWETH(amountToApprove?.token?.address, chainId)
+      isTokenWETH(amountToApprove?.token?.address, chainId) ||
+      isTokenWMATIC(amountToApprove?.token?.address, chainId)
     ) {
       return ApprovalState.APPROVED
     }

diff --git a/src/hooks/usePlaceOrderCallback.ts b/src/hooks/usePlaceOrderCallback.ts
@@ -25,6 +25,7 @@ import {
   getEasyAuctionContract,
   getTokenDisplay,
   isTokenWETH,
+  isTokenWMATIC,
   isTokenXDAI,
 } from '../utils'
 import { getLogger } from '../utils/logger'
@@ -202,7 +203,11 @@ const getEstimateParams = (
   signature: string,
 ): EstimateAndParams => {
   const easyAuctionContract: Contract = getEasyAuctionContract(chainId, library, account)
-  if (isTokenXDAI(biddingToken.address, chainId) || isTokenWETH(biddingToken.address, chainId)) {
+  if (
+    isTokenXDAI(biddingToken.address, chainId) ||
+    isTokenWETH(biddingToken.address, chainId) ||
+    isTokenWMATIC(biddingToken.address, chainId)
+  ) {
     const depositAndPlaceOrderContract = getContract(
       DEPOSIT_AND_PLACE_ORDER[chainId],
       depositAndPlaceOrderABI,

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -229,6 +229,7 @@ export function escapeRegExp(string: string): string {
 export function getTokenDisplay(token: Token, chainId: ChainId): string {
   if (isTokenXDAI(token.address, chainId)) return `XDAI`
   if (isTokenWETH(token.address, chainId)) return `ETH`
+  if (isTokenWMATIC(token.address, chainId)) return `MATIC`
   return (
     token?.symbol?.slice(0, 7) || token?.name?.slice(0, 7) || token?.address.slice(0, 7) || '🤔'
   )
@@ -238,6 +239,7 @@ export function getTokenDisplay(token: Token, chainId: ChainId): string {
 export function getFullTokenDisplay(token: Token, chainId: ChainId): string {
   if (isTokenXDAI(token.address, chainId)) return `XDAI`
   if (isTokenWETH(token.address, chainId)) return `ETH`
+  if (isTokenWMATIC(token.address, chainId)) return `MATIC`
   return token?.symbol || token?.name || token?.address || '🤔'
 }
 
@@ -254,6 +256,10 @@ export function isTokenWETH(tokenAddress?: string, chainId?: ChainId): boolean {
   )
 }
 
+export function isTokenWMATIC(tokenAddress?: string, chainId?: ChainId): boolean {
+  return !!tokenAddress && !!chainId && tokenAddress == WETH[chainId].address && chainId === 137
+}
+
 export function isTimeout(timeId: NodeJS.Timeout | undefined): timeId is NodeJS.Timeout {
   return typeof timeId !== 'undefined'
 }