feat: connect wallet ux (#3275)

* fix: wallet styling

* feat: onConnectWallet prop

src/lib/assets/svg/wallet.svg

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 7C2 5.89543 2.89543 5 4 5H20C21.1046 5 22 5.89543 22 7V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V7Z" stroke="currentColor" stroke-width="2"/>
+<path d="M4 19H20C21.1046 19 22 18.1046 22 17V14C22 12.8954 21.1046 12 20 12H16C15.4477 12 14.9935 12.4624 14.7645 12.965C14.4438 13.6688 13.789 14.5 12 14.5C10.29 14.5 9.48213 13.7406 9.1936 13.0589C8.96576 12.5206 8.49905 12 7.91447 12H4C2.89543 12 2 12.8954 2 14V17C2 18.1046 2.89543 19 4 19Z" fill="currentColor"/>
+<path d="M22 13V11C22 9.89543 21.1034 9 19.9989 9C14.0294 9 9.97062 9 4.00115 9C2.89658 9 2 9.89543 2 11V13" stroke="currentColor" stroke-width="2"/>
+</svg>

src/lib/components/Swap/index.tsx

@@ -45,6 +45,7 @@ export interface SwapProps {
   defaultOutputAmount?: string
   convenienceFee?: number
   convenienceFeeRecipient?: string | { [chainId: number]: string }
+  onConnectWallet?: () => void
 }
 
 export default function Swap(props: SwapProps) {
@@ -68,7 +69,7 @@ export default function Swap(props: SwapProps) {
     <SwapPropValidator {...props}>
       {onSupportedChain && <SwapInfoUpdater />}
       <Header title={<Trans>Swap</Trans>}>
-        {active && <Wallet disabled={!account} />}
+        {active && <Wallet disabled={!account} onClick={props.onConnectWallet} />}
         <Settings disabled={!active} />
       </Header>
       <div ref={setBoundary}>

src/lib/components/Wallet.tsx

-import { CreditCard } from 'lib/icons'
-import { ThemedText } from 'lib/theme'
+import { Trans } from '@lingui/macro'
+import { Wallet as WalletIcon } from 'lib/icons'
+import styled, { ThemedText } from 'lib/theme'
 
 import Row from './Row'
 
-export default function Wallet({ disabled }: { disabled?: boolean }) {
+interface WalletProps {
+  disabled?: boolean
+  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">
-      <Row gap={0.25}>
-        <CreditCard />
-        Connect wallet to swap
-      </Row>
+      <ClickableRow gap={0.5} onClick={onClick}>
+        <WalletIcon />
+        <Trans>Connect your wallet</Trans>
+      </ClickableRow>
     </ThemedText.Caption>
   ) : null
 }

src/lib/icons/index.tsx

@@ -2,6 +2,7 @@ import { ReactComponent as CheckIcon } from 'lib/assets/svg/check.svg'
 import { ReactComponent as ExpandoIcon } from 'lib/assets/svg/expando.svg'
 import { ReactComponent as LogoIcon } from 'lib/assets/svg/logo.svg'
 import { ReactComponent as SpinnerIcon } from 'lib/assets/svg/spinner.svg'
+import { ReactComponent as WalletIcon } from 'lib/assets/svg/wallet.svg'
 import styled, { Color, css, keyframes } from 'lib/theme'
 import { FunctionComponent, SVGProps } from 'react'
 /* eslint-disable no-restricted-imports */
@@ -14,7 +15,6 @@ import {
   CheckCircle as CheckCircleIcon,
   ChevronDown as ChevronDownIcon,
   Clock as ClockIcon,
-  CreditCard as CreditCardIcon,
   ExternalLink as LinkIcon,
   HelpCircle as HelpCircleIcon,
   Info as InfoIcon,
@@ -77,13 +77,13 @@ export const ArrowUp = icon(ArrowUpIcon)
 export const CheckCircle = icon(CheckCircleIcon)
 export const ChevronDown = icon(ChevronDownIcon)
 export const Clock = icon(ClockIcon)
-export const CreditCard = icon(CreditCardIcon)
 export const HelpCircle = icon(HelpCircleIcon)
 export const Info = icon(InfoIcon)
 export const Link = icon(LinkIcon)
 export const Settings = icon(SettingsIcon)
 export const Slash = icon(SlashIcon)
 export const Trash2 = icon(Trash2Icon)
+export const Wallet = icon(WalletIcon)
 export const X = icon(XIcon)
 export const XOctagon = icon(XOctagonIcon)