Coinbase + Nightly + Trust + Rabby wallets

src/sections/web3-connect/accounts/Web3ConnectAccount.styled.ts

@@ -68,13 +68,19 @@ export const SAccountItem = styled.div<{
   }}
 `
 
-export const SChangeAccountButton = styled(Button)`
-  border: 1px solid rgba(${theme.rgbColors.brightBlue300}, 0.12);
-  border-top-color: transparent;
+export const SChangeAccountButton = styled(Button)<{ isActive?: boolean }>`
+  border: 1px solid transparent;
+  border-color: ${({ isActive }) =>
+    isActive ? `rgba(${theme.rgbColors.brightBlue300}, 0.12)` : ""};
+  border-top-color: ${({ isActive }) =>
+    isActive ? `transparent` : `rgba(${theme.rgbColors.alpha0}, 0.12)`};
 
   border-radius: ${theme.borderRadius.medium}px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 
-  background: rgba(${theme.rgbColors.primaryA15}, 0.12);
+  background: ${({ isActive }) =>
+    isActive
+      ? `rgba(${theme.rgbColors.primaryA15}, 0.12)`
+      : `rgba(${theme.rgbColors.alpha0}, 0.06)`};
 `

src/sections/web3-connect/accounts/Web3ConnectEvmAccount.tsx

@@ -26,9 +26,7 @@ export const Web3ConnectEvmAccount: FC<
   // Allow account changing for MetaMask wallets,
   // but disable for MetaMask-like as it doesn't provide a way to open the account selection programmatically
   const shouldAllowAccountChange =
-    isActive &&
-    isMetaMask(wallet?.extension) &&
-    !isMetaMaskLike(wallet?.extension)
+    isMetaMask(wallet?.extension) && !isMetaMaskLike(wallet?.extension)
 
   return (
     <div>
@@ -51,6 +49,7 @@ export const Web3ConnectEvmAccount: FC<
       </SAccountItem>
       {shouldAllowAccountChange && (
         <SChangeAccountButton
+          isActive={isActive}
           variant="outline"
           fullWidth
           size="small"

src/sections/web3-connect/constants/providers.ts

@@ -8,6 +8,7 @@ export enum WalletProviderType {
   NovaWallet = "nova-wallet",
   TrustWallet = "trustwallet",
   BraveWallet = "bravewallet",
+  CoinbaseWallet = "coinbasewallet",
   Phantom = "phantom",
   Enkrypt = "enkrypt",
   MantaWallet = "manta-wallet-js",
@@ -32,6 +33,7 @@ export const EVM_PROVIDERS: WalletProviderType[] = [
   WalletProviderType.TalismanEvm,
   WalletProviderType.SubwalletEvm,
   //WalletProviderType.TrustWallet,
+  WalletProviderType.CoinbaseWallet,
   WalletProviderType.BraveWallet,
   WalletProviderType.Phantom,
   WalletProviderType.WalletConnectEvm,

src/sections/web3-connect/signer/EthereumSigner.ts

@@ -82,6 +82,7 @@ export class EthereumSigner {
   }
 
   getPermitNonce = async (): Promise<BigNumber> => {
+    await this.requestNetworkSwitch("hydration")
     const callPermit = new Contract(
       CALL_PERMIT_ADDRESS,
       CALL_PERMIT_ABI,

src/sections/web3-connect/wallets/CoinbaseWallet.ts

@@ -0,0 +1,23 @@
+import { WalletProviderType } from "sections/web3-connect/constants/providers"
+import { isCoinbaseWallet } from "utils/metamask"
+import { MetaMask } from "./MetaMask"
+import CoinbaseWalletLogo from "assets/icons/CoinbaseWalletLogo.svg"
+
+export class CoinbaseWallet extends MetaMask {
+  extensionName = WalletProviderType.CoinbaseWallet
+  title = "Coinbase Wallet"
+  installUrl = "https://www.coinbase.com/wallet"
+  logo = {
+    src: CoinbaseWalletLogo,
+    alt: "Coinbase Wallet Logo",
+  }
+
+  get installed() {
+    const provider = this._provider || window.ethereum
+    return isCoinbaseWallet(provider)
+  }
+
+  get rawExtension() {
+    return this._provider || window.ethereum
+  }
+}

src/sections/web3-connect/wallets/index.ts

@@ -18,6 +18,7 @@ import {
 } from "sections/web3-connect/constants/providers"
 import { useWeb3ConnectStore } from "sections/web3-connect/store/useWeb3ConnectStore"
 import { WalletConnectEvm } from "sections/web3-connect/wallets/WalletConnectEvm"
+import { CoinbaseWallet } from "sections/web3-connect/wallets/CoinbaseWallet"
 
 export type WalletProvider = {
   type: WalletProviderType
@@ -74,6 +75,12 @@ const metaMask: Wallet = new MetaMask({
   ),
 }) */
 
+const coinbaseWallet: Wallet = new CoinbaseWallet({
+  onAccountsChanged: onMetaMaskLikeAccountChange(
+    WalletProviderType.CoinbaseWallet,
+  ),
+})
+
 const walletConnect: Wallet = new WalletConnect({
   onModalClose: (session) => {
     if (!session) {
@@ -103,6 +110,7 @@ export let SUPPORTED_WALLET_PROVIDERS: WalletProvider[] = [
   talismanEvm,
   subwalletEvm,
   subwallet,
+  coinbaseWallet,
   //trustWallet,
   novaWallet,
   walletConnect,
@@ -150,13 +158,18 @@ const eip6963ProvidersByRdns = new Map([
     "com.brave.wallet",
     { Wallet: BraveWallet, type: WalletProviderType.BraveWallet },
   ],
+  [
+    "com.coinbase.wallet",
+    { Wallet: CoinbaseWallet, type: WalletProviderType.CoinbaseWallet },
+  ],
 ])
 
 /**
  * Handles the event of EIP-6963 standard to announce injected Wallet Providers
  * For more information, refer to https://eips.ethereum.org/EIPS/eip-6963
  */
 export function handleAnnounceProvider(event: EIP6963AnnounceProviderEvent) {
+  console.log(event.detail)
   const provider = eip6963ProvidersByRdns.get(event.detail.info.rdns)
 
   if (provider) {

src/utils/metamask.ts

@@ -13,6 +13,7 @@ const METAMASK_LIKE_CHECKS = [
   "isTrust",
   "isBraveWallet",
   "isEnkrypt",
+  "isCoinbaseWallet",
 ] as const
 type MetaMaskLikeChecksValues = (typeof METAMASK_LIKE_CHECKS)[number]
 
@@ -97,6 +98,10 @@ export function isBraveWallet(provider: Maybe<ExternalProvider>) {
   return isMetaMaskLike(provider) && !!provider?.isBraveWallet
 }
 
+export function isCoinbaseWallet(provider: Maybe<ExternalProvider>) {
+  return isMetaMaskLike(provider) && !!provider?.isCoinbaseWallet
+}
+
 export function isEnkrypt(provider: Maybe<ExternalProvider>) {
   return isMetaMaskLike(provider) && !!provider?.isEnkrypt
 }