chore: switch to leap metamask snap (#562)

fmorency · web-flow · commit e76735829cc3 · 2025-09-25T08:45:35.000-04:00
diff --git a/bun.lock b/bun.lock
diff --git a/components/react/__tests__/modal.test.tsx b/components/react/__tests__/modal.test.tsx
@@ -1,14 +1,12 @@
-import { State } from '@cosmos-kit/core';
 import { Web3AuthClient } from '@cosmos-kit/web3auth';
-import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, jest, mock, spyOn, test } from 'bun:test';
 import type { ChainWalletBase } from 'cosmos-kit';
 import { WalletStatus } from 'cosmos-kit';
 import React from 'react';
 
 import { TailwindModal } from '@/components/react/modal';
 import { clearAllMocks, mockModule, mockRouter } from '@/tests';
-import { renderWithChainProvider } from '@/tests/render';
 
 describe('TailwindModal', () => {
   let mockWalletRepo: any;
@@ -115,7 +113,7 @@ describe('TailwindModal', () => {
           ),
           React.createElement(
             'button',
-            { onClick: () => onWalletClicked('cosmos-extension-metamask') },
+            { onClick: () => onWalletClicked('leap-cosmos-metamask-snap') },
             'Metamask'
           ),
           React.createElement('button', { onClick: () => onWalletClicked('Email') }, 'Email'),
diff --git a/components/react/modal.tsx b/components/react/modal.tsx
@@ -161,19 +161,10 @@ export const TailwindModal: React.FC<
   }, []);
 
   /**
-   * Helper to handle a metamask extension that doesn't fully register as 'NotExist'
+   * Helper to handle extension that doesn't fully register as 'NotExist'
    * in the standard wallet flow. We force set the view to NotExist if we detect the error message.
    */
-  const handleMetamaskErrorCheck = (wallet: ChainWalletBase) => {
-    if (
-      wallet?.walletInfo.name === 'cosmos-extension-metamask' &&
-      wallet.message?.includes("Cannot read properties of undefined (reading 'request')")
-    ) {
-      setCurrentView(ModalView.NotExist);
-      setSelectedWallet(wallet);
-      return true;
-    }
-
+  const handleWalletNotExists = (wallet: ChainWalletBase) => {
     if (wallet?.isWalletNotExist) {
       setCurrentView(ModalView.NotExist);
       setSelectedWallet(wallet);
@@ -295,7 +286,7 @@ export const TailwindModal: React.FC<
       // or if the wallet doesn't exist. This ensures the error message has time
       // to populate in the wallet's state after calling `getWallet()`.
       setTimeout(() => {
-        if (handleMetamaskErrorCheck(wallet)) {
+        if (handleWalletNotExists(wallet)) {
           return;
         }
 
diff --git a/components/react/views/Connected.tsx b/components/react/views/Connected.tsx
@@ -57,9 +57,7 @@ export const Connected = ({
           <Image
             height={0}
             width={0}
-            src={
-              name === 'Cosmos MetaMask Extension' ? '/metamask.svg' : getRealLogo(logo, isDarkMode)
-            }
+            src={name === 'Leap Cosmos MetaMask' ? '/metamask.svg' : getRealLogo(logo, isDarkMode)}
             alt={name}
             className="w-8 h-8 rounded-full mr-2"
           />
diff --git a/components/react/views/Connecting.tsx b/components/react/views/Connecting.tsx
@@ -45,9 +45,7 @@ export const Connecting = ({
       </div>
       <div className="flex flex-col w-full h-full mt-4 sm:px-8 sm:py-6">
         <img
-          src={
-            name === 'Cosmos MetaMask Extension' ? '/metamask.svg' : getRealLogo(logo, isDarkMode)
-          }
+          src={name === 'Leap Cosmos MetaMask' ? '/metamask.svg' : getRealLogo(logo, isDarkMode)}
           alt={name}
           className="shrink-0 w-20 h-20 mx-auto aspect-1"
         />
diff --git a/components/react/views/Error.tsx b/components/react/views/Error.tsx
@@ -49,7 +49,7 @@ export const Error = ({
         <div className="p-3 border rounded-full border-red-600 mx-auto aspect-1 shrink-0">
           <Image
             src={
-              currentWalletName === 'Cosmos MetaMask Extension'
+              currentWalletName === 'Leap Cosmos MetaMask'
                 ? '/metamask.svg'
                 : getRealLogo(logo, isDarkMode)
             }
diff --git a/components/react/views/NotExist.tsx b/components/react/views/NotExist.tsx
@@ -31,7 +31,7 @@ export const NotExist = ({
           <ChevronLeftIcon className="w-5 h-5" aria-hidden="true" />
         </button>
         <Dialog.Title as="h3" className="text-lg font-semibold">
-          {name === 'Cosmos MetaMask Extension' ? 'Metamask' : name}
+          {name === 'Leap Cosmos MetaMask' ? 'Metamask' : name}
         </Dialog.Title>
         <button
           type="button"
@@ -43,25 +43,23 @@ export const NotExist = ({
       </div>
       <div className="flex flex-col w-full h-full py-6 mt-4 sm:px-8">
         <img
-          src={
-            name === 'Cosmos MetaMask Extension' ? '/metamask.svg' : getRealLogo(logo, isDarkMode)
-          }
+          src={name === 'Leap Cosmos MetaMask' ? '/metamask.svg' : getRealLogo(logo, isDarkMode)}
           alt={name}
           className="shrink-0 w-16 h-16 mx-auto aspect-1"
         />
         <p className="mt-3 font-medium text-black dark:text-white">
-          Install {name === 'Cosmos MetaMask Extension' ? 'Metamask' : name}
+          Install {name === 'Leap Cosmos MetaMask' ? 'Metamask' : name}
         </p>
         <p className="mt-1 text-sm text-gray-500 dark:text-white/75">
-          To connect your {name === 'Cosmos MetaMask Extension' ? 'Metamask' : name} wallet, install
-          the browser extension.
+          To connect your {name === 'Leap Cosmos MetaMask' ? 'Metamask' : name} wallet, install the
+          browser extension.
         </p>
         <button
           className={`rounded-lg btn-primary btn btn-md ${name.length >= 12 ? 'w-1/2' : 'w-1/3'} mx-auto inline-flex justify-center items-center py-2.5 font-medium mt-4 text-white`}
           onClick={onInstall}
         >
           <ArrowDownTrayIcon className="shrink-0 w-5 h-5 mr-2 text-white" />
-          Install {name === 'Cosmos MetaMask Extension' ? 'Metamask' : name}
+          Install {name === 'Leap Cosmos MetaMask' ? 'Metamask' : name}
         </button>
       </div>
     </div>
diff --git a/components/react/views/WalletList.tsx b/components/react/views/WalletList.tsx
@@ -33,7 +33,7 @@ export const WalletList = ({
   const isDarkMode = document.documentElement.classList.contains('dark');
 
   const socialOrder = ['Google', 'Twitter', 'Apple', 'Discord', 'GitHub', 'Reddit', 'Email', 'SMS'];
-  const browserOrder = ['Leap', 'Keplr', 'Cosmostation', 'Cosmos MetaMask Extension', 'Ledger'];
+  const browserOrder = ['Leap', 'Keplr', 'Cosmostation', 'Leap Cosmos MetaMask', 'Ledger'];
   let mobileOrder = ['Wallet Connect', 'Keplr Mobile'];
   let leapLogo;
   if (isLeapDappBrowser) {
@@ -94,15 +94,15 @@ export const WalletList = ({
               >
                 <img
                   src={
-                    prettyName === 'Cosmos MetaMask Extension'
+                    prettyName === 'Leap Cosmos MetaMask'
                       ? '/metamask.svg'
                       : getRealLogo(logo?.toString() ?? '', isDarkMode)
                   }
                   alt={prettyName}
                   className="w-10 h-10 rounded-xl mr-3"
                 />
                 <span className="text-md flex-1 text-left">
-                  {prettyName === 'Cosmos MetaMask Extension' ? 'MetaMask' : prettyName}
+                  {prettyName === 'Leap Cosmos MetaMask' ? 'MetaMask' : prettyName}
                 </span>
                 {hasMobileVersion(prettyName) &&
                   prettyName !== 'Cosmostation' &&
diff --git a/contexts/__tests__/web3AuthContext.test.tsx b/contexts/__tests__/web3AuthContext.test.tsx
@@ -39,7 +39,7 @@ describe('Web3AuthContext', () => {
       },
     }));
 
-    mockModule('@cosmos-kit/cosmos-extension-metamask', () => ({
+    mockModule('@cosmos-kit/leap-metamask-cosmos-snap', () => ({
       wallets: [],
     }));
 
diff --git a/contexts/web3AuthContext.tsx b/contexts/web3AuthContext.tsx
@@ -1,5 +1,4 @@
 import { MainWalletBase } from '@cosmos-kit/core';
-import { wallets as cosmosExtensionWallets } from '@cosmos-kit/cosmos-extension-metamask';
 import {
   SignData,
   Web3AuthClient,
@@ -173,7 +172,6 @@ export const Web3AuthProvider = ({ children }: { children: ReactNode }) => {
   const wallets = [
     ...web3AuthWallets,
     ...cosmosWallets.for('keplr', 'cosmostation', 'leap', 'ledger'),
-    ...cosmosExtensionWallets,
   ];
 
   return (
diff --git a/package.json b/package.json
@@ -34,10 +34,10 @@
     "@chain-registry/assets": "1.70.340",
     "@cosmjs/cosmwasm-stargate": "0.32.4",
     "@cosmjs/stargate": "npm:@manifest-network/stargate@0.32.4-ll.3",
-    "@cosmos-kit/cosmos-extension-metamask": "0.13.0",
-    "@cosmos-kit/ledger": "2.14.0",
-    "@cosmos-kit/react": "2.22.0",
-    "@cosmos-kit/web3auth": "2.16.0",
+    "@cosmos-kit/leap-metamask-cosmos-snap": "0.15.3",
+    "@cosmos-kit/ledger": "2.14.3",
+    "@cosmos-kit/react": "2.22.3",
+    "@cosmos-kit/web3auth": "2.16.3",
     "@fontsource/manrope": "5.2.5",
     "@headlessui/react": "2.2.0",
     "@headlessui/tailwindcss": "0.2.2",
@@ -62,7 +62,7 @@
     "bech32": "2.0.0",
     "chain-registry": "1.69.340",
     "cosmjs-types": "0.9.0",
-    "cosmos-kit": "2.23.9",
+    "cosmos-kit": "2.25.2",
     "country-flag-icons": "1.5.18",
     "daisyui": "5.0.6",
     "dayjs": "1.11.13",

Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ export const Error = ({`
`49`	`49`	`<div className="p-3 border rounded-full border-red-600 mx-auto aspect-1 shrink-0">`
`50`	`50`	`<Image`
`51`	`51`	`src={`
`52`		`- currentWalletName === 'Cosmos MetaMask Extension'`
	`52`	`+ currentWalletName === 'Leap Cosmos MetaMask'`
`53`	`53`	`? '/metamask.svg'`
`54`	`54`	`: getRealLogo(logo, isDarkMode)`
`55`	`55`	`}`