fix: connect wallet button (#3324)

* fix: make dialog provider an isolate

* fix: use button for connect wallet

* chore: document esoteric changes

src/lib/components/Dialog.tsx

@@ -40,7 +40,10 @@ export function Provider({ value, children }: ProviderProps) {
     }
   }, [active])
   return (
-    <div ref={ref}>
+    <div
+      ref={ref}
+      style={{ isolation: 'isolate' }} // creates a new stacking context, preventing the dialog from intercepting non-dialog clicks
+    >
       <Context.Provider value={context}>{children}</Context.Provider>
     </div>
   )

src/lib/components/Swap/Swap.fixture.tsx

@@ -71,6 +71,7 @@ function Fixture() {
       defaultOutputAddress={optionsToAddressMap[defaultOutput]}
       defaultOutputAmount={defaultOutputAmount}
       tokenList={tokens}
+      onConnectWallet={() => console.log('onConnectWallet')} // this handler is included as a test of functionality, but only logs
     />
   )
 }

src/lib/components/Wallet.tsx

 import { Trans } from '@lingui/macro'
 import { Wallet as WalletIcon } from 'lib/icons'
-import styled, { ThemedText } from 'lib/theme'
+import { ThemedText } from 'lib/theme'
 
+import { TextButton } from './Button'
 import Row from './Row'
 
 interface WalletProps {
@@ -9,17 +10,15 @@ interface WalletProps {
   onClick?: () => void
 }
 
-const ClickableRow = styled(Row)<{ onClick?: unknown }>`
-  cursor: ${({ onClick }) => onClick && 'pointer'};
-`
-
 export default function Wallet({ disabled, onClick }: WalletProps) {
   return disabled ? (
-    <ThemedText.Caption color="secondary">
-      <ClickableRow gap={0.5} onClick={onClick}>
-        <WalletIcon />
-        <Trans>Connect your wallet</Trans>
-      </ClickableRow>
-    </ThemedText.Caption>
+    <TextButton disabled={!onClick} onClick={onClick} color="secondary" style={{ filter: 'none' }}>
+      <ThemedText.Caption>
+        <Row gap={0.5}>
+          <WalletIcon />
+          <Trans>Connect your wallet</Trans>
+        </Row>
+      </ThemedText.Caption>
+    </TextButton>
   ) : null
 }