chore: MMConnect Configuration Improvements (#91)

Makes improvements to MM Connect configurability and testabilty

- **Scope selection for MMConnect**: Auto Connect via MM Connect now
passes selected scopes from checkboxes instead of hardcoding
`['eip155:1']`.
- **Network checkboxes**: Removed `disabled` attribute so scopes can be
selected before connecting.
- **Supported networks configuration**: Added RPC URLs for all featured
networks (Ethereum, Linea, Arbitrum, Avalanche, BNB, Optimism, Polygon,
zkSync, Base, Localhost, Solana) in `MetaMaskConnectProvider`.
- **Disconnect button**: Added red "Disconnect MMConnect Session" button
that appears when a MMConnect session is active.

This enables users to select desired scopes via checkboxes before
auto-connecting via MMConnect, improving the test dapp's flexibility for
multi-chain testing.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Enables scope-selectable MM Connect auto-connect, configures supported
networks, and adds a session disconnect button.
> 
> - **UI (App.tsx)**:
> - Auto Connect via `MM_CONNECT_ID` now passes selected scopes from
checkboxes/custom inputs.
>   - Network checkboxes enabled for pre-connection scope selection.
> - Shows red "Disconnect MMConnect Session" button when an MM Connect
session is active.
> - **SDK**:
> - `SDK.setExtensionIdAndConnect` accepts optional `scopes:
CaipChainId[]` and forwards to provider for MM Connect.
> - `useSDK.connect` signature updated to accept optional scopes and
propagate to SDK.
> - **MetaMaskConnectProvider**:
> - `connect(scopes?: Scope[])` accepts scopes; defaults to
`['eip155:1']` when none provided.
> - Adds `supportedNetworks` RPC URLs for featured chains (Ethereum,
Linea, Arbitrum, Avalanche, BNB, OP, Polygon, zkSync, Base, Localhost,
Solana).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
243190e. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: ffmcgee <joao.carlos@consensys.net>

Author: adonesky1

src/App.tsx

@@ -859,7 +859,14 @@ function App() {
           </button>
           <button
             onClick={() => {
-              connect(MM_CONNECT_ID).catch((error) => {
+              const selectedScopesArray = [
+                ...Object.keys(selectedScopes).filter((scope) => {
+                  const caipChainId = scope as CaipChainId;
+                  return selectedScopes[caipChainId];
+                }),
+                ...customScopes.filter((scope) => scope.length),
+              ] as CaipChainId[];
+              connect(MM_CONNECT_ID, selectedScopesArray).catch((error) => {
                 console.error('Auto-connect via MM Connect failed:', error);
               });
             }}
@@ -869,6 +876,26 @@ function App() {
           >
             Auto Connect via MM Connect
           </button>
+          {extensionId === MM_CONNECT_ID &&
+            isExternallyConnectableConnected &&
+            currentSession && (
+              <button
+                onClick={() => {
+                  disconnect();
+                  setExtensionId('');
+                  localStorage.removeItem('extensionId');
+                }}
+                style={{
+                  backgroundColor: '#dc2626',
+                  color: 'white',
+                  border: 'none',
+                }}
+                data-testid="disconnect-mm-connect-button"
+                id="disconnect-mm-connect-button"
+              >
+                Disconnect MMConnect Session
+              </button>
+            )}
         </div>
       </section>
       <section>
@@ -907,7 +934,6 @@ function App() {
                             [chainId]: evt.target.checked,
                           }))
                         }
-                        disabled={!isExternallyConnectableConnected}
                         data-testid={`network-checkbox-${escapeHtmlId(
                           chainId,
                         )}`}

src/sdk/SDK.ts

@@ -109,7 +109,10 @@ export class SDK {
     this.#provider?.disconnect();
   }
 
-  public async setExtensionIdAndConnect(extensionId: string): Promise<boolean> {
+  public async setExtensionIdAndConnect(
+    extensionId: string,
+    scopes?: CaipChainId[],
+  ): Promise<boolean> {
     // TODO add logic once we have CAIP-294 wallet discovery + or hardcode the stable extensionId
     let connected;
     if (extensionId === WINDOW_POST_MESSAGE_ID) {
@@ -118,7 +121,9 @@ export class SDK {
     } else if (extensionId === MM_CONNECT_ID) {
       this.#provider =
         new MetaMaskConnectProvider() as unknown as MetaMaskMultichainBaseProvider;
-      connected = await this.#provider.connect();
+      // Convert CaipChainId[] to Scope[] for MetaMaskConnectProvider
+      // Scope is from @metamask/connect-multichain and is compatible with CaipChainId
+      connected = await this.#provider.connect(scopes as unknown as any);
     } else {
       this.#provider = new MetaMaskMultichainExternallyConnectableProvider();
       connected = await this.#provider.connect(extensionId);

src/sdk/providers/MetaMaskConnectProvider.ts

@@ -13,14 +13,27 @@ class MetaMaskConnectProvider implements Provider {
 
   #walletSession: unknown = { sessionScopes: {} };
 
-  async connect(): Promise<boolean> {
+  async connect(scopes?: Scope[]): Promise<boolean> {
     if (this.#mmConnect) {
       this.disconnect();
     }
 
     this.#mmConnect = await createMetamaskConnect({
       api: {
-        supportedNetworks: {},
+        supportedNetworks: {
+          'eip155:1': 'https://eth.llamarpc.com',
+          'eip155:59144': 'https://rpc.linea.build',
+          'eip155:42161': 'https://arb1.arbitrum.io/rpc',
+          'eip155:43114': 'https://avalanche.public-rpc.com',
+          'eip155:56': 'https://bsc-dataseed.binance.org',
+          'eip155:10': 'https://0xrpc.io/op',
+          'eip155:137': 'https://polygon-rpc.com',
+          'eip155:324': 'https://mainnet.era.zksync.io',
+          'eip155:8453': 'https://mainnet.base.org',
+          'eip155:1337': 'http://localhost:8545',
+          'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp':
+            'https://api.mainnet-beta.solana.com',
+        },
       },
       dapp: {
         name: 'MultichainTest Dapp',
@@ -39,7 +52,11 @@ class MetaMaskConnectProvider implements Provider {
       },
     });
 
-    await this.#mmConnect?.connect(['eip155:1'], []);
+    const scopesToUse =
+      scopes && scopes.length > 0
+        ? scopes
+        : (['eip155:1'] as unknown as Scope[]);
+    await this.#mmConnect?.connect(scopesToUse, []);
 
     return true;
   }

src/sdk/useSDK.ts

@@ -7,7 +7,7 @@ type UseSDKReturn = {
   isConnected: boolean;
   currentSession: any;
   extensionId: string;
-  connect: (extensionId: string) => Promise<void>;
+  connect: (extensionId: string, scopes?: CaipChainId[]) => Promise<void>;
   disconnect: () => void;
   createSession: (
     scopes: CaipChainId[],
@@ -131,10 +131,13 @@ export function useSDK({
   }, [sdk, isConnected]);
 
   const connect = useCallback(
-    async (newExtensionId: string) => {
+    async (newExtensionId: string, scopes?: CaipChainId[]) => {
       if (sdk) {
         try {
-          const connected = await sdk.setExtensionIdAndConnect(newExtensionId);
+          const connected = await sdk.setExtensionIdAndConnect(
+            newExtensionId,
+            scopes,
+          );
           setIsConnected(connected);
           if (connected) {
             localStorage.setItem('extensionId', newExtensionId);