feat: display connecting state (#3713)

src/lib/components/Swap/Toolbar/Caption.tsx

@@ -32,6 +32,19 @@ function Caption({ icon: Icon = AlertTriangle, caption }: CaptionProps) {
   )
 }
 
+export function Connecting() {
+  return (
+    <Caption
+      icon={InlineSpinner}
+      caption={
+        <Loading>
+          <Trans>Connecting…</Trans>
+        </Loading>
+      }
+    />
+  )
+}
+
 export function ConnectWallet() {
   return <Caption caption={<Trans>Connect wallet to swap</Trans>} />
 }

src/lib/components/Swap/Toolbar/index.tsx

@@ -17,8 +17,8 @@ const ToolbarRow = styled(Row)`
   ${largeIconCss}
 `
 
-export default memo(function Toolbar({ disabled }: { disabled?: boolean }) {
-  const { chainId } = useActiveWeb3React()
+export default memo(function Toolbar() {
+  const { active, activating, chainId } = useActiveWeb3React()
   const {
     [Field.INPUT]: { currency: inputCurrency, balance: inputBalance, amount: inputAmount },
     [Field.OUTPUT]: { currency: outputCurrency, usdc: outputUSDC },
@@ -28,7 +28,8 @@ export default memo(function Toolbar({ disabled }: { disabled?: boolean }) {
   const isAmountPopulated = useIsAmountPopulated()
   const { type: wrapType } = useWrapCallback()
   const caption = useMemo(() => {
-    if (disabled || !chainId) {
+    if (!active || !chainId) {
+      if (activating) return <Caption.Connecting />
       return <Caption.ConnectWallet />
     }
 
@@ -59,8 +60,9 @@ export default memo(function Toolbar({ disabled }: { disabled?: boolean }) {
 
     return <Caption.Empty />
   }, [
+    activating,
+    active,
     chainId,
-    disabled,
     impact,
     inputAmount,
     inputBalance,

src/lib/components/Swap/index.tsx

@@ -73,7 +73,7 @@ export default function Swap(props: SwapProps) {
             <Input disabled={isDisabled} focused={focused} />
             <ReverseButton disabled={isDisabled} />
             <Output disabled={isDisabled} focused={focused}>
-              <Toolbar disabled={!active} />
+              <Toolbar />
               <SwapButton disabled={isDisabled} />
             </Output>
           </SwapInfoProvider>

src/lib/hooks/useActiveWeb3React.tsx

@@ -16,6 +16,7 @@ type Web3ContextType = {
   accounts?: ReturnType<Web3ReactHooks['useAccounts']>
   account?: ReturnType<Web3ReactHooks['useAccount']>
   active?: ReturnType<Web3ReactHooks['useIsActive']>
+  activating?: ReturnType<Web3ReactHooks['useIsActivating']>
   error?: ReturnType<Web3ReactHooks['useError']>
   ensNames?: ReturnType<Web3ReactHooks['useENSNames']>
   ensName?: ReturnType<Web3ReactHooks['useENSName']>
@@ -82,17 +83,18 @@ export function ActiveWeb3Provider({
 
   const accounts = hooks.useAccounts()
   const account = hooks.useAccount()
+  const activating = hooks.useIsActivating()
   const active = hooks.useIsActive()
   const chainId = hooks.useChainId()
   const ensNames = hooks.useENSNames()
   const ensName = hooks.useENSName()
   const error = hooks.useError()
   const web3 = useMemo(() => {
-    if (connector === EMPTY || !active) {
+    if (connector === EMPTY || !(active || activating)) {
       return EMPTY_CONTEXT
     }
-    return { connector, library, chainId, accounts, account, active, error, ensNames, ensName }
-  }, [account, accounts, active, chainId, connector, ensName, ensNames, error, library])
+    return { connector, library, chainId, accounts, account, active, activating, error, ensNames, ensName }
+  }, [account, accounts, activating, active, chainId, connector, ensName, ensNames, error, library])
 
   // Log web3 errors to facilitate debugging.
   useEffect(() => {