Update to loading state for injected desktop browsers (#532)

* update injected loading state

* update styles

* update injected connector

* center spinner

package.json

@@ -10,7 +10,7 @@
     "@uniswap/sdk": "^1.0.0-beta.4",
     "@web3-react/core": "6.0.0-beta.19",
     "@web3-react/fortmatic-connector": "6.0.0-beta.19",
-    "@web3-react/injected-connector": "6.0.0-beta.20",
+    "@web3-react/injected-connector": "^6.0.0-beta.21",
     "@web3-react/network-connector": "6.0.0-beta.19",
     "@web3-react/portis-connector": "6.0.0-beta.19",
     "@web3-react/walletconnect-connector": "6.0.0-beta.19",

src/components/WalletModal/Option.js

@@ -64,21 +64,15 @@ const CircleWrapper = styled.div`
 
 const HeaderText = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
-  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.royalBlue : props.color)};
+  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.royalBlue : ({ theme }) => theme.textColor)};
   font-size: 1rem;
   font-weight: 500;
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    font-size: 12px;
-  `};
 `
 
 const SubHeader = styled.div`
   color: ${({ theme }) => theme.textColor};
   margin-top: 10px;
   font-size: 12px;
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    font-size: 10px;
-  `};
 `
 
 const IconWrapper = styled.div`

src/components/WalletModal/PendingView.js

@@ -64,13 +64,20 @@ const ErrorButton = styled.div`
   }
 `
 
+const LoadingWrapper = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap};
+  align-items: center;
+  justify-content: center;
+`
+
 export default function PendingView({ uri = '', size, connector, error = false, setPendingError, tryActivation }) {
   const isMetamask = window.ethereum && window.ethereum.isMetaMask
 
   return (
     <PendingSection>
+      {!error && connector === walletconnect && <WalletConnectData size={size} uri={uri} />}
       <LoadingMessage error={error}>
-        <div>
+        <LoadingWrapper>
           {!error && <SpinnerWrapper src={Circle} />}
           {error ? (
             <ErrorGroup>
@@ -89,28 +96,31 @@ export default function PendingView({ uri = '', size, connector, error = false,
           ) : (
             'Initializing...'
           )}
-        </div>
+        </LoadingWrapper>
       </LoadingMessage>
-      {!error && connector === walletconnect && <WalletConnectData size={size} uri={uri} />}
       {Object.keys(SUPPORTED_WALLETS).map(key => {
         const option = SUPPORTED_WALLETS[key]
         if (option.connector === connector) {
-          if (option.connector === injected && isMetamask && option.name !== 'MetaMask') {
-            return null
-          } else {
-            return (
-              <Option
-                key={key}
-                clickable={false}
-                color={option.color}
-                header={option.name}
-                subheader={option.description}
-                icon={require('../../assets/images/' + option.iconName)}
-              />
-            )
+          if (option.connector === injected) {
+            if (isMetamask && option.name !== 'MetaMask') {
+              return null
+            }
+            if (!isMetamask && option.name === 'MetaMask') {
+              return null
+            }
           }
+          return (
+            <Option
+              key={key}
+              clickable={false}
+              color={option.color}
+              header={option.name}
+              subheader={option.description}
+              icon={require('../../assets/images/' + option.iconName)}
+            />
+          )
         }
-        return true
+        return null
       })}
     </PendingSection>
   )

yarn.lock

@@ -1922,10 +1922,10 @@
     fortmatic "^1.0.0"
     tiny-invariant "^1.0.6"
 
-"@web3-react/injected-connector@6.0.0-beta.20":
-  version "6.0.0-beta.20"
-  resolved "https://registry.yarnpkg.com/@web3-react/injected-connector/-/injected-connector-6.0.0-beta.20.tgz#b04787a4f036eaa6eb4c5ea327bc941a9383303e"
-  integrity sha512-uXVgSn8qUUEFd0figiaxHY9yF5RenpHx4sUDxTjAZrSUwkg2jPBoV7BjPcXPP2LGwqVzFDL4059usNXSV1FVqg==
+"@web3-react/injected-connector@^6.0.0-beta.21":
+  version "6.0.0-beta.21"
+  resolved "https://registry.yarnpkg.com/@web3-react/injected-connector/-/injected-connector-6.0.0-beta.21.tgz#6f200dbfe2fb212b79027b48c510246c6eba8bfd"
+  integrity sha512-B83mz+8uCSyjqndA+E72FffXj29VlBMNey4aNjMsXkcgjgOOhcYQ8e0LZjZo48fdetYuXD4ZimqnGicb3jtbXg==
   dependencies:
     "@web3-react/abstract-connector" "^6.0.0-beta.19"
     "@web3-react/types" "^6.0.0-beta.19"