feat: add email, sms, and metamask extension

components/bank/forms/sendForm.tsx

@@ -136,7 +136,6 @@ export default function SendForm({
             amount: [{ denom: values.selectedToken.coreDenom, amount: amountInBaseUnits }],
           });
 
-      console.log('Estimating fee for address:', address);
       const fee = await estimateFee(address, [msg]);
 
       await tx([msg], {

components/groups/modals/memberManagementModal.tsx

@@ -128,8 +128,6 @@ export function MemberManagementModal({
         weight: member.markedForDeletion ? '0' : member.weight || '1',
       }));
 
-    console.log('Member updates:', memberUpdates);
-
     const msg = updateGroupMembers({
       admin: groupAdmin,
       groupId: BigInt(groupId),

components/react/modal.tsx

@@ -3,9 +3,20 @@ import type { ChainWalletBase, WalletModalProps } from 'cosmos-kit';
 import { WalletStatus } from 'cosmos-kit';
 import React, { useCallback, Fragment, useState, useMemo, useEffect } from 'react';
 import { Dialog, Transition, Portal } from '@headlessui/react';
-import { Connected, Connecting, Error, NotExist, QRCode, WalletList, Contacts } from './views';
+import {
+  Connected,
+  Connecting,
+  Error,
+  NotExist,
+  QRCode,
+  WalletList,
+  Contacts,
+  EmailInput,
+  SMSInput,
+} from './views';
 import { useRouter } from 'next/router';
 import { ToastProvider } from '@/contexts/toastContext';
+import { Web3AuthClient, Web3AuthWallet } from '@cosmos-kit/web3auth';
 
 export enum ModalView {
   WalletList,
@@ -15,6 +26,8 @@ export enum ModalView {
   Error,
   NotExist,
   Contacts,
+  EmailInput,
+  SMSInput,
 }
 
 export const TailwindModal: React.FC<
@@ -78,17 +91,29 @@ export const TailwindModal: React.FC<
 
   const onWalletClicked = useCallback(
     (name: string) => {
+      const wallet = walletRepo?.getWallet(name);
+      if (wallet?.walletInfo.prettyName === 'Email') {
+        setCurrentView(ModalView.EmailInput);
+        return;
+      }
+      if (wallet?.walletInfo.prettyName === 'SMS') {
+        setCurrentView(ModalView.SMSInput);
+        return;
+      }
+
       walletRepo?.connect(name);
 
-      // 1ms timeout prevents _render from determining the view to show first
       setTimeout(() => {
-        const wallet = walletRepo?.getWallet(name);
-
-        if (wallet?.isWalletNotExist) {
+        if (
+          wallet?.walletInfo.name === 'cosmos-extension-metamask' &&
+          wallet.message?.includes("Cannot read properties of undefined (reading 'request')")
+        ) {
           setCurrentView(ModalView.NotExist);
           setSelectedWallet(wallet);
-        }
-        if (wallet?.walletInfo.mode === 'wallet-connect') {
+        } else if (wallet?.isWalletNotExist) {
+          setCurrentView(ModalView.NotExist);
+          setSelectedWallet(wallet);
+        } else if (wallet?.walletInfo.mode === 'wallet-connect') {
           setCurrentView(ModalView.QRCode);
           setQRWallet(wallet);
         }
@@ -111,6 +136,49 @@ export const TailwindModal: React.FC<
             wallets={walletRepo?.wallets || []}
           />
         );
+      case ModalView.EmailInput:
+        return (
+          <EmailInput
+            onClose={onCloseModal}
+            onReturn={() => setCurrentView(ModalView.WalletList)}
+            onSubmit={async email => {
+              try {
+                const emailWallet = walletRepo?.wallets.find(
+                  w => w.walletInfo.prettyName === 'Email'
+                ) as Web3AuthWallet | undefined;
+
+                if (emailWallet?.client instanceof Web3AuthClient) {
+                  console.log('Setting login hint:', email);
+                  emailWallet.client.setLoginHint(email);
+                  await walletRepo?.connect(emailWallet.walletInfo.name);
+                } else {
+                  console.error('Email wallet or client not found');
+                }
+              } catch (error) {
+                console.error('Email login error:', error);
+                // Handle the error appropriately in your UI
+              }
+            }}
+          />
+        );
+
+      case ModalView.SMSInput:
+        return (
+          <SMSInput
+            onClose={onCloseModal}
+            onReturn={() => setCurrentView(ModalView.WalletList)}
+            onSubmit={phone => {
+              const smsWallet = walletRepo?.wallets.find(w => w.walletInfo.prettyName === 'SMS') as
+                | Web3AuthWallet
+                | undefined;
+
+              if (smsWallet?.client instanceof Web3AuthClient) {
+                smsWallet.client.setLoginHint(phone);
+                walletRepo?.connect(smsWallet.walletInfo.name);
+              }
+            }}
+          />
+        );
       case ModalView.Connected:
         return (
           <Connected
@@ -125,11 +193,11 @@ export const TailwindModal: React.FC<
         );
       case ModalView.Connecting:
         let subtitle: string;
-        if (currentWalletData!.mode === 'wallet-connect') {
+        if (currentWalletData!?.mode === 'wallet-connect') {
           subtitle = `Approve ${currentWalletData!.prettyName} connection request on your mobile.`;
         } else {
           subtitle = `Open the ${
-            currentWalletData!.prettyName
+            currentWalletData!?.prettyName
           } browser extension to connect your wallet.`;
         }
 

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/EmailInput.tsx

@@ -0,0 +1,63 @@
+import { XMarkIcon, ArrowLeftIcon } from '@heroicons/react/24/outline';
+import { Formik, Form } from 'formik';
+import * as Yup from 'yup';
+import { TextInput } from '../inputs/TextInput';
+
+const validationSchema = Yup.object({
+  email: Yup.string().email('Invalid email address').required('Email is required'),
+});
+
+export const EmailInput = ({
+  onClose,
+  onReturn,
+  onSubmit,
+}: {
+  onClose: () => void;
+  onReturn: () => void;
+  onSubmit: (email: string) => void;
+}) => {
+  return (
+    <div className="p-1 relative max-w-sm mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <button
+          onClick={onReturn}
+          className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"
+        >
+          <ArrowLeftIcon className="w-5 h-5" />
+        </button>
+        <h1 className="text-sm font-semibold">Enter Email</h1>
+        <button
+          onClick={onClose}
+          className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"
+        >
+          <XMarkIcon className="w-5 h-5" />
+        </button>
+      </div>
+
+      <Formik
+        initialValues={{ email: '' }}
+        validationSchema={validationSchema}
+        onSubmit={values => onSubmit(values.email)}
+      >
+        {({ isValid, dirty }) => (
+          <Form className="space-y-4">
+            <TextInput
+              name="email"
+              type="email"
+              placeholder="[email protected]"
+              className="w-full p-3 rounded-lg dark:bg-[#ffffff0c] bg-[#f0f0ff5c]"
+            />
+
+            <button
+              type="submit"
+              disabled={!isValid || !dirty}
+              className="w-full p-3 rounded-lg bg-primary text-white disabled:opacity-50 transition"
+            >
+              Continue with Email
+            </button>
+          </Form>
+        )}
+      </Formik>
+    </div>
+  );
+};

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-extension-metamask'
+                ? '/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

@@ -28,7 +28,7 @@ export const NotExist = ({
           <ChevronLeftIcon className="w-5 h-5" aria-hidden="true" />
         </button>
         <Dialog.Title as="h3" className="text-lg font-semibold">
-          {name}
+          {name === 'Cosmos MetaMask Extension' ? 'Metamask' : name}
         </Dialog.Title>
         <button
           type="button"
@@ -40,20 +40,23 @@ 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"
         />
-        <p className="mt-3 font-medium text-black dark:text-white">Install {name}</p>
+        <p className="mt-3 font-medium text-black dark:text-white">
+          Install {name === 'Cosmos MetaMask Extension' ? 'Metamask' : name}
+        </p>
         <p className="mt-1 text-sm text-gray-500 dark:text-white/75">
-          To connect your {name} wallet, install the browser extension.
+          To connect your {name === 'Cosmos MetaMask Extension' ? '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="flex-shrink-0 w-5 h-5 mr-2 text-white" />
-          Install {name}
+          Install {name === 'Cosmos MetaMask Extension' ? 'Metamask' : name}
         </button>
       </div>
     </div>