feat: add coinbase wallet support (#3264)

apps/web/src/components/Common/Providers/index.tsx

@@ -1,4 +1,8 @@
-import { IS_MAINNET, WALLETCONNECT_PROJECT_ID } from '@lenster/data/constants';
+import {
+  APP_NAME,
+  IS_MAINNET,
+  WALLETCONNECT_PROJECT_ID
+} from '@lenster/data/constants';
 import { ApolloProvider, webClient } from '@lenster/lens/apollo';
 import getRpc from '@lenster/lib/getRpc';
 import getLivepeerTheme from '@lib/getLivepeerTheme';
@@ -12,6 +16,7 @@ import { ThemeProvider } from 'next-themes';
 import type { ReactNode } from 'react';
 import { configureChains, createConfig, WagmiConfig } from 'wagmi';
 import { mainnet, polygon, polygonMumbai } from 'wagmi/chains';
+import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
 import { InjectedConnector } from 'wagmi/connectors/injected';
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
 import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
@@ -29,6 +34,7 @@ const { chains, publicClient } = configureChains(
 
 const connectors: any = [
   new InjectedConnector({ chains, options: { shimDisconnect: true } }),
+  new CoinbaseWalletConnector({ options: { appName: APP_NAME } }),
   new WalletConnectConnector({
     options: { projectId: WALLETCONNECT_PROJECT_ID },
     chains

packages/lib/getWalletDetails.spec.ts

@@ -12,6 +12,14 @@ describe('getWalletDetails', () => {
     );
   });
 
+  test('should return correct details for Coinbase Waller', () => {
+    const walletDetails = getWalletDetails('Coinbase Wallet');
+    expect(walletDetails.name).toBe('Coinbase Wallet');
+    expect(walletDetails.logo).toBe(
+      `${STATIC_IMAGES_URL}/wallets/coinbase.svg`
+    );
+  });
+
   test('should return correct details for name other than WalletConnect', () => {
     const walletDetails = getWalletDetails('SomeOtherWallet');
     expect(walletDetails.name).toBe('SomeOtherWallet');

packages/lib/getWalletDetails.ts

@@ -16,12 +16,17 @@ const getWalletDetails = (name: string): WalletDetails => {
     WalletConnect: {
       name: 'WalletConnect',
       logo: `${STATIC_IMAGES_URL}/wallets/walletconnect.svg`
+    },
+    'Coinbase Wallet': {
+      name: 'Coinbase Wallet',
+      logo: `${STATIC_IMAGES_URL}/wallets/coinbase.svg`
     }
   };
   const defaultDetails: WalletDetails = {
     name,
     logo: `${STATIC_IMAGES_URL}/wallets/browser-wallet.svg`
   };
+
   return walletDetails[name] || defaultDetails;
 };