Wallet connect meta data

.eslintrc.json

@@ -8,9 +8,7 @@
       "jsx": true
     }
   },
-  "ignorePatterns": [
-    "node_modules/**/*"
-  ],
+  "ignorePatterns": ["node_modules/**/*"],
   "settings": {
     "react": {
       "version": "detect"
@@ -21,11 +19,12 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
     "prettier/@typescript-eslint",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:jsx-a11y/recommended"
   ],
   "rules": {
     "@typescript-eslint/explicit-function-return-type": "off",
     "prettier/prettier": "error",
     "@typescript-eslint/no-explicit-any": "off"
   }
-}
+}

README.md

@@ -67,13 +67,29 @@ yarn start:default
 yarn cypress
 ```
 
-### Configuring the environment (optional)
+## Configuring the environment (optional)
+The app has some default configuration, but it's highly encouraged to define your own.
+
+### Local configuration
+Make a copy of `.env` named `.env.local`, this will allow you to set your own configuration only in your local environment.
+
+### Production configuration
+Modify the environment variables in `.env.production`, or override them in build time.
+
+### App Id
+The app id is included in all signed transaction, although the Gnosis Protocol is not using this information for now, it
+could be used for implementing incentive programs.
+
+To set your own, change `REACT_APP_ID` environment variable. Ask for your id at [chat.gnosis.io](https://chat.gnosis.io)
+
+
+### Supported networks
+You can change the supported networks and their RPC endpoint.
 
 To have the interface default to a different network when a wallet is not connected:
 
-1. Make a copy of `.env` named `.env.local`
-2. Change `REACT_APP_NETWORK_ID` to `"{YOUR_NETWORK_ID}"`. This will be your default network id
-3. Define your own list of supported networks:
+1. Change `REACT_APP_NETWORK_ID` to `"{YOUR_NETWORK_ID}"`. This will be your default network id
+2. Define your own list of supported networks:
 
 ```ini
 REACT_APP_SUPPORTED_CHAIN_IDS="1,4,100"
@@ -82,9 +98,17 @@ REACT_APP_NETWORK_URL_4=https://rinkeby.infura.io/v3/{YOUR_INFURA_KEY}
 REACT_APP_NETWORK_URL_100=https://rpc.xdaichain.com
 ```
 
-4. Change `REACT_APP_ID` Ask for your id at [chat.gnosis.io](https://chat.gnosis.io)
-5. Change `REACT_APP_API_STAGING_URL_{XDAI|RINKEBY|MAINNET}` to e.g. `"http://localhost:8080/api"` when running the services locally.
 
-For production:
+### API endpoints
+Fee quote requests and posting orders are sent to an API. This API has the responsibility of collecting orders and 
+handing them to the solvers. 
+
+The reference implementation of th API is [gp-v2-services](https://github.com/gnosis/gp-v2-services). 
+
+The API endpoint is configured using the environment variable `REACT_APP_API_STAGING_URL_{XDAI|RINKEBY|MAINNET}` to e.g. `"http://localhost:8080/api"` when running the services locally.
+
+
+### Wallet Connect bridge
+Wallet Connect allows to connect the app to any [Wallet Connect supported wallet](https://walletconnect.org/wallets).
 
-6. Get your own `App Id` in <chat.cowswap.exchange>, and set it in `REACT_APP_ID`.
+In order to do so, it uses a Websocket, that can be configured using: the env var `WALLET_CONNECT_BRIDGE`.

package.json

@@ -43,7 +43,6 @@
     "@web3-react/fortmatic-connector": "^6.0.9",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/portis-connector": "^6.0.9",
-    "@web3-react/walletconnect-connector": "^6.1.1",
     "@web3-react/walletlink-connector": "^6.0.9",
     "ajv": "^6.12.3",
     "cids": "^1.0.0",
@@ -101,7 +100,6 @@
     "workbox-strategies": "^6.1.0"
   },
   "resolutions": {
-    "@walletconnect/web3-provider": "1.1.1-alpha.0"
   },
   "scripts": {
     "start": "REACT_APP_DISABLE_TOKEN_WARNING=true craco start",
@@ -143,10 +141,10 @@
   },
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "@anxolin/walletconnect-connector": "6.1.9",
+    "@web3-react/walletconnect-connector": "^6.2.0",
     "@gnosis.pm/gp-v2-contracts": "^0.0.1-alpha.17",
     "@uniswap/default-token-list": "^2.0.0",
     "react-appzi": "^1.0.4",
     "react-router-hash-link": "^2.4.0"
   }
-}
+}

src/custom/components/AccountDetails/index.tsx

@@ -10,7 +10,7 @@ import Copy from 'components/AccountDetails/Copy'
 
 import { SUPPORTED_WALLETS } from 'constants/index'
 import { getEtherscanLink } from 'utils'
-import { injected, walletconnect, walletlink, fortmatic, portis } from 'connectors'
+import { injected, walletconnect, walletlink, fortmatic, portis, WalletProvider } from 'connectors'
 import CoinbaseWalletIcon from 'assets/images/coinbaseWalletIcon.svg'
 import WalletConnectIcon from 'assets/images/walletConnectIcon.svg'
 import FortmaticIcon from 'assets/images/fortmaticIcon.png'
@@ -38,22 +38,56 @@ import {
   IconWrapper,
   renderTransactions
 } from './AccountDetailsMod'
+import { ConnectedWalletInfo, useWalletInfo } from 'hooks/useWalletInfo'
+import { MouseoverTooltip } from 'components/Tooltip/TooltipMod'
 
 type AbstractConnector = Pick<ReturnType<typeof useActiveWeb3React>, 'connector'>['connector']
 
-export function formatConnectorName(connector?: AbstractConnector) {
+function getWalletName(connector?: AbstractConnector): string {
   const { ethereum } = window
   const isMetaMask = !!(ethereum && ethereum.isMetaMask)
-  const name = Object.keys(SUPPORTED_WALLETS)
-    .filter(
-      k => SUPPORTED_WALLETS[k].connector === connector && (connector !== injected || isMetaMask === (k === 'METAMASK'))
-    )
-    .map(k => SUPPORTED_WALLETS[k].name)[0]
-  return <WalletName>Connected with {name}</WalletName>
+
+  const walletTuple = Object.entries(SUPPORTED_WALLETS).filter(
+    ([walletType, { connector: walletConnector }]) =>
+      walletConnector === connector && (connector !== injected || isMetaMask === (walletType === 'METAMASK'))
+  )
+  return walletTuple[0]?.[1]?.name || 'Unknown wallet'
+}
+
+export function formatConnectorName(connector?: AbstractConnector, walletInfo?: ConnectedWalletInfo) {
+  const name = walletInfo?.walletName || getWalletName(connector)
+  // In case the wallet is connected via WalletConnect and has wallet name set, add the suffix to be clear
+  // This to avoid confusion for instance when using Metamask mobile
+  // When name is not set, it defaults to WalletConnect already
+  const walletConnectSuffix =
+    walletInfo?.provider === WalletProvider.WALLET_CONNECT && walletInfo?.walletName ? ' (via WalletConnect)' : ''
+
+  return (
+    <WalletName>
+      Connected with {name}
+      {walletConnectSuffix}
+    </WalletName>
+  )
 }
 
-export function getStatusIcon(connector?: AbstractConnector) {
-  if (connector === injected) {
+export function getStatusIcon(connector?: AbstractConnector, walletInfo?: ConnectedWalletInfo) {
+  if (walletInfo && !walletInfo.isSupportedWallet) {
+    /* eslint-disable jsx-a11y/accessible-emoji */
+    return (
+      <MouseoverTooltip text="This wallet is not yet supported">
+        <IconWrapper role="img" aria-label="Warning sign. Wallet not supported">
+          ⚠️
+        </IconWrapper>
+      </MouseoverTooltip>
+    )
+    /* eslint-enable jsx-a11y/accessible-emoji */
+  } else if (walletInfo?.icon) {
+    return (
+      <IconWrapper size={16}>
+        <img src={walletInfo.icon} alt={`${walletInfo?.walletName || 'wallet'} logo`} />
+      </IconWrapper>
+    )
+  } else if (connector === injected) {
     return (
       <IconWrapper size={16}>
         <Identicon />
@@ -104,6 +138,7 @@ export default function AccountDetails({
   openOptions
 }: AccountDetailsProps) {
   const { chainId, account, connector } = useActiveWeb3React()
+  const walletInfo = useWalletInfo()
   const theme = useContext(ThemeContext)
   const dispatch = useDispatch<AppDispatch>()
 
@@ -128,7 +163,7 @@ export default function AccountDetails({
           <YourAccount>
             <InfoCard>
               <AccountGroupingRow>
-                {formatConnectorName(connector)}
+                {formatConnectorName(connector, walletInfo)}
                 <div>
                   {connector !== injected && connector !== walletlink && (
                     <WalletAction
@@ -155,14 +190,14 @@ export default function AccountDetails({
                   {ENSName ? (
                     <>
                       <div>
-                        {getStatusIcon()}
+                        {getStatusIcon(connector, walletInfo)}
                         <p> {ENSName}</p>
                       </div>
                     </>
                   ) : (
                     <>
                       <div>
-                        {getStatusIcon()}
+                        {getStatusIcon(connector, walletInfo)}
                         <p> {account && shortenAddress(account)}</p>
                       </div>
                     </>