feat: add email, sms, and metamask extension

components/react/views/Connected.tsx

@@ -57,7 +57,7 @@ export const Connected = ({
           <Image
             height={0}
             width={0}
-            src={getRealLogo(logo)}
+            src={name === 'Cosmos MetaMask Extension' ? '/metamask.svg' : getRealLogo(logo)}
             alt={name}
             className="w-8 h-8 rounded-full mr-2"
           />

components/react/views/Connecting.tsx

@@ -43,7 +43,7 @@ export const Connecting = ({
       </div>
       <div className="flex flex-col w-full h-full mt-4 sm:px-8 sm:py-6">
         <img
-          src={getRealLogo(logo)}
+          src={name === 'Cosmos MetaMask Extension' ? '/metamask.svg' : getRealLogo(logo)}
           alt={name}
           className="flex-shrink-0 w-20 h-20 mx-auto aspect-1"
         />

components/react/views/Error.tsx

@@ -45,7 +45,11 @@ export const Error = ({
       <div className="flex flex-col w-full h-full py-6 mt-4 sm:px-8">
         <div className="p-3 border rounded-full border-red-600 mx-auto aspect-1 flex-shrink-0">
           <Image
-            src={getRealLogo(logo)}
+            src={
+              currentWalletName === 'Cosmos MetaMask Extension'
+                ? '/metamask.svg'
+                : getRealLogo(logo)
+            }
             alt="Wallet type logo"
             className="flex-shrink-0 w-16 h-16 aspect-1"
             width={16}

components/react/views/NotExist.tsx

@@ -40,7 +40,7 @@ export const NotExist = ({
       </div>
       <div className="flex flex-col w-full h-full py-6 mt-4 sm:px-8">
         <img
-          src={getRealLogo(logo)}
+          src={name === 'Cosmos MetaMask Extension' ? '/metamask.svg' : getRealLogo(logo)}
           alt={name}
           className="flex-shrink-0 w-16 h-16 mx-auto aspect-1"
         />

components/react/views/WalletList.tsx

@@ -15,15 +15,17 @@ export const WalletList = ({
   const isDarkMode = document.documentElement.classList.contains('dark');
 
   const social = wallets.filter(wallet =>
-    ['Google', 'Twitter', 'Apple', 'Discord', 'GitHub', 'Reddit'].includes(
+    ['Google', 'Twitter', 'Apple', 'Discord', 'GitHub', 'Reddit', 'Email', 'SMS'].includes(
       wallet.walletInfo.prettyName
     )
   );
 
   const browser = wallets.filter(wallet =>
-    ['Keplr', 'Cosmostation', 'Leap', 'Station'].includes(wallet.walletInfo.prettyName)
+    ['Keplr', 'Cosmostation', 'Leap', 'Station', 'Cosmos MetaMask Extension'].includes(
+      wallet.walletInfo.prettyName
+    )
   );
-
+  console.log(wallets);
   const mobile = wallets.filter(wallet =>
     ['Wallet Connect', 'Keplr Mobile', 'Cosmostation Mobile', 'Leap Mobile'].includes(
       wallet.walletInfo.prettyName
@@ -40,7 +42,7 @@ export const WalletList = ({
         <XMarkIcon className="w-5 h-5" aria-hidden="true" />
       </button>
 
-      {/* Browser and Social sections - browaer hidden on mobile/tablet */}
+      {/* Browser and Social sections - browser hidden on mobile/tablet */}
       <div className="hidden md:block">
         <div className="space-y-2 mb-4">
           {browser.map(({ walletInfo: { name, prettyName, logo } }) => (
@@ -50,11 +52,17 @@ export const WalletList = ({
               className="flex items-center w-full p-3 rounded-lg dark:bg-[#ffffff0c] bg-[#f0f0ff5c] dark:hover:bg-[#0000004c] hover:bg-[#a8a8a84c] transition"
             >
               <img
-                src={getRealLogo(logo?.toString() ?? '')}
+                src={
+                  prettyName === 'Cosmos MetaMask Extension'
+                    ? '/metamask.svg'
+                    : getRealLogo(logo?.toString() ?? '')
+                }
                 alt={prettyName}
                 className="w-10 h-10 rounded-xl mr-3"
               />
-              <span className="text-md">{prettyName}</span>
+              <span className="text-md">
+                {prettyName === 'Cosmos MetaMask Extension' ? 'MetaMask' : prettyName}
+              </span>
             </button>
           ))}
         </div>

package.json

@@ -33,6 +33,7 @@
     "@chain-registry/assets": "^1.64.83",
     "@cosmjs/cosmwasm-stargate": "0.32.4",
     "@cosmjs/stargate": "npm:@liftedinit/[email protected]",
+    "@cosmos-kit/cosmos-extension-metamask": "^0.12.1",
     "@cosmos-kit/react": "2.18.0",
     "@cosmos-kit/web3auth": "2.11.0",
     "@fontsource/manrope": "^5.0.21",

pages/_app.tsx

@@ -15,6 +15,7 @@ import {
   manifestTestnetAssets,
 } from '@/config';
 import { SignerOptions, wallets } from 'cosmos-kit';
+import { wallets as cosmosExtensionWallets } from '@cosmos-kit/cosmos-extension-metamask';
 import { ChainProvider } from '@cosmos-kit/react';
 import { Registry } from '@cosmjs/proto-signing';
 import { TailwindModal } from '../components';
@@ -145,6 +146,16 @@ function ManifestApp({ Component, pageProps }: ManifestAppProps) {
             name: 'Reddit',
             logo: '/reddit',
           },
+          {
+            provider: 'email_passwordless',
+            name: 'Email',
+            logo: '/email',
+          },
+          {
+            provider: 'sms_passwordless',
+            name: 'SMS',
+            logo: '/sms',
+          },
         ],
 
         client: {
@@ -167,7 +178,7 @@ function ManifestApp({ Component, pageProps }: ManifestAppProps) {
   );
 
   // combine the web3auth wallets with the other wallets
-  const combinedWallets = [...web3AuthWallets, ...wallets];
+  const combinedWallets = [...web3AuthWallets, ...wallets, ...cosmosExtensionWallets];
 
   // this is stop ssr errors when we render the web3auth signing modal
   const [isBrowser, setIsBrowser] = useState(false);