From 8890ada65629e574464aa702a4a1ed563234e04c Mon Sep 17 00:00:00 2001
From: Philipp Giese <giese.philipp+git@gmail.com>
Date: Tue, 22 Oct 2024 17:07:19 +0200
Subject: [PATCH] update styles for wallet connect

---
 .../src/panel/routes/ConnectButton/index.tsx  | 33 +++++++------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/extension/src/panel/routes/ConnectButton/index.tsx b/extension/src/panel/routes/ConnectButton/index.tsx
index fe206574..67c9e6bc 100644
--- a/extension/src/panel/routes/ConnectButton/index.tsx
+++ b/extension/src/panel/routes/ConnectButton/index.tsx
@@ -1,10 +1,7 @@
-import { Alert, Button, RawAddress, Tag } from '@/components'
-import { validateAddress } from '@/utils'
+import { Alert, Button } from '@/components'
 import { invariant } from '@epic-web/invariant'
-import classNames from 'classnames'
 import { ZeroAddress } from 'ethers'
 import React from 'react'
-import { RiAlertLine } from 'react-icons/ri'
 import { ChainId, parsePrefixedAddress } from 'ser-kit'
 import { CHAIN_NAME } from '../../../chains'
 import { ProviderType, Route } from '../../../types'
@@ -12,7 +9,6 @@ import { useInjectedWallet, useWalletConnect } from '../../providers'
 import { isConnectedTo } from '../routeHooks'
 import { Account } from './Account'
 import { InjectedWallet } from './InjectedWallet'
-import classes from './style.module.css'
 import { WalletConnect } from './WalletConnect'
 
 interface Props {
@@ -111,23 +107,18 @@ const ConnectButton: React.FC<Props> = ({ route, onConnect, onDisconnect }) => {
     walletConnect.accounts.some((acc) => acc.toLowerCase() === pilotAddress) &&
     walletConnect.chainId !== chainId
   ) {
+    const chainName = CHAIN_NAME[chainId] || `#${chainId}`
+
     return (
-      <div
-        className={classNames(
-          classes.connectedContainer,
-          classes.connectionWarning
-        )}
-      >
-        <RawAddress>{validateAddress(pilotAddress)}</RawAddress>
-        <Tag head={<RiAlertLine />} color="warning">
-          Chain mismatch
-        </Tag>
-        <Button
-          onClick={() => walletConnect.disconnect()}
-          className={classes.disconnectButton}
-        >
-          Disconnect
-        </Button>
+      <div className="flex flex-col gap-4">
+        <Account providerType={route.providerType}>{pilotAddress}</Account>
+
+        <Alert title="Chain mismatch">
+          The connected wallet belongs to a different chain. Connect a wallet on{' '}
+          {chainName} to use Pilot.
+        </Alert>
+
+        <Button onClick={() => walletConnect.disconnect()}>Disconnect</Button>
       </div>
     )
   }