feat: add email, sms, and metamask extension (#148)

--------- Co-authored-by: Felix C. Morency <[email protected]>
liftedinit · Dec 20, 2024 · d3888c5 · d3888c5
1 parent b49a3f8
commit d3888c5
Show file tree

Hide file tree

Showing 30 changed files with 510 additions and 66 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/3js/animatedAsterisk.tsx b/components/3js/animatedAsterisk.tsx
@@ -208,11 +208,9 @@ export default function AnimatedAsterisk({ onLoad }: { onLoad?: () => void }) {
       style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
       camera={{ position: [0, 0, 10] }}
     >
-      <ambientLight intensity={0.2} />
-
       <Suspense fallback={null}>
         {meshes}
-        <Environment files="/rosendal_park_sunset_puresky_4k.hdr" background={false} />
+        <Environment files="/rosendal_park_sunset_puresky_1k.hdr" background={false} />
       </Suspense>
     </Canvas>
   );

diff --git a/components/3js/animatedMesh.tsx b/components/3js/animatedMesh.tsx
@@ -174,11 +174,9 @@ export default function AnimatedShape({
       style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
       camera={{ position: [0, 0, 10] }}
     >
-      <ambientLight intensity={0.2} />
-
       <Suspense fallback={null}>
         {meshes}
-        <Environment files="/rosendal_park_sunset_puresky_4k.hdr" background={false} />
+        <Environment files="/rosendal_park_sunset_puresky_1k.hdr" background={false} />
         <OrbitControls enablePan={false} enableZoom={false} />
       </Suspense>
     </Canvas>

diff --git a/components/3js/pennRoseTriangleScene.tsx b/components/3js/pennRoseTriangleScene.tsx
@@ -148,15 +148,14 @@ function PenroseTriangleScene({ onLoad }: { onLoad: () => void }) {
       <CameraSetup />
 
       {/* Lighting */}
-      <ambientLight intensity={0.5} />
 
       {/* Suspense for async loading */}
       <Suspense fallback={null}>
         {/* Animated Penrose Triangle */}
         <AnimatedPenroseTriangle />
 
         {/* Environment */}
-        <Environment files="/rosendal_park_sunset_puresky_4k.hdr" background={false} />
+        <Environment files="/rosendal_park_sunset_puresky_1k.hdr" background={false} />
       </Suspense>
 
       {/* Adjust the plane to be closer to the Penrose Triangle */}

diff --git a/components/bank/forms/sendForm.tsx b/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], {
@@ -150,7 +149,6 @@ export default function SendForm({
       });
     } catch (error) {
       console.error('Error during sending:', error);
-      // You might want to show this error to the user through a toast or alert
     } finally {
       setIsSending(false);
     }

diff --git a/components/groups/modals/memberManagementModal.tsx b/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),

diff --git a/components/react/modal.tsx b/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';
 import { useDeviceDetect } from '@/hooks';
 export enum ModalView {
   WalletList,
@@ -15,6 +26,8 @@ export enum ModalView {
   Error,
   NotExist,
   Contacts,
+  EmailInput,
+  SMSInput,
 }
 
 export const TailwindModal: React.FC<
@@ -79,17 +92,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(isMobile ? ModalView.Connecting : ModalView.QRCode);
           setQRWallet(wallet);
         }
@@ -112,6 +137,48 @@ 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) {
+                  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
@@ -126,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.`;
         }
 

diff --git a/components/react/views/Connected.tsx b/components/react/views/Connected.tsx
@@ -9,7 +9,6 @@ import { getRealLogo, shiftDigits, truncateString } from '@/utils';
 import Image from 'next/image';
 import { MdContacts } from 'react-icons/md';
 import { Contacts } from './Contacts';
-import { useTheme } from '@/contexts';
 
 export const Connected = ({
   onClose,
@@ -31,7 +30,7 @@ export const Connected = ({
   const { balance } = useBalance(address ?? '');
   const [copied, setCopied] = useState(false);
   const [showContacts, setShowContacts] = useState(false);
-  const { theme } = useTheme();
+  const isDarkMode = document.documentElement.classList.contains('dark');
 
   const copyAddress = () => {
     if (address) {
@@ -50,7 +49,7 @@ export const Connected = ({
       <div className="flex justify-between items-center -mt-4 mb-6">
         <button
           type="button"
-          className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"
+          className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-[#00000033]"
           onClick={onReturn}
         >
           <ChevronLeftIcon className="w-5 h-5" aria-hidden="true" />
@@ -59,7 +58,9 @@ export const Connected = ({
           <Image
             height={0}
             width={0}
-            src={getRealLogo(logo, theme === 'dark')}
+            src={
+              name === 'Cosmos MetaMask Extension' ? '/metamask.svg' : getRealLogo(logo, isDarkMode)
+            }
             alt={name}
             className="w-8 h-8 rounded-full mr-2"
           />
@@ -69,7 +70,7 @@ export const Connected = ({
         </div>
         <button
           type="button"
-          className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"
+          className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-[#00000033]"
           onClick={onClose}
         >
           <XMarkIcon className="w-5 h-5" aria-hidden="true" />

diff --git a/components/react/views/Connecting.tsx b/components/react/views/Connecting.tsx
@@ -27,7 +27,7 @@ export const Connecting = ({
       <div className="flex justify-between items-center mb-2">
         <button
           type="button"
-          className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"
+          className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-[#00000033]"
           onClick={onReturn}
         >
           <ChevronLeftIcon className="w-5 h-5" aria-hidden="true" />
@@ -37,15 +37,19 @@ export const Connecting = ({
         </Dialog.Title>
         <button
           type="button"
-          className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"
+          className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-[#00000033]"
           onClick={onClose}
         >
           <XMarkIcon className="w-5 h-5" aria-hidden="true" />
         </button>
       </div>
       <div className="flex flex-col w-full h-full mt-4 sm:px-8 sm:py-6">
         <img
-          src={getRealLogo(logo, theme === 'dark')}
+          src={
+            name === 'Cosmos MetaMask Extension'
+              ? '/metamask.svg'
+              : getRealLogo(logo, theme === 'dark')
+          }
           alt={name}
           className="flex-shrink-0 w-20 h-20 mx-auto aspect-1"
         />

diff --git a/components/react/views/Contacts.tsx b/components/react/views/Contacts.tsx
@@ -126,7 +126,7 @@ export const Contacts = ({
           {onReturn ? (
             <button
               type="button"
-              className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"
+              className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-[#00000033]"
               onClick={onReturn}
             >
               <ChevronLeftIcon className="w-5 h-5" aria-hidden="true" />
@@ -139,7 +139,7 @@ export const Contacts = ({
           </Dialog.Title>
           <button
             type="button"
-            className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"
+            className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-[#00000033]"
             onClick={onClose}
           >
             <XMarkIcon className="w-5 h-5" aria-hidden="true" />
@@ -192,7 +192,7 @@ export const Contacts = ({
         {onReturn ? (
           <button
             type="button"
-            className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"
+            className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-[#00000033]"
             onClick={onReturn}
           >
             <ChevronLeftIcon className="w-5 h-5" aria-hidden="true" />
@@ -208,7 +208,7 @@ export const Contacts = ({
         </div>
         <button
           type="button"
-          className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"
+          className="p-2 text-primary bg-neutral rounded-full hover:bg-gray-200 dark:hover:bg-[#00000033]"
           onClick={onClose}
         >
           <XMarkIcon className="w-5 h-5" aria-hidden="true" />
@@ -347,13 +347,13 @@ export const Contacts = ({
                     <div className="flex items-center">
                       <button
                         onClick={() => setEditingIndex(index)}
-                        className="ml-2 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 text-blue-500"
+                        className="ml-2 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-[#00000033] transition-colors duration-200 text-blue-500"
                       >
                         <PencilIcon className="w-5 h-5" aria-hidden="true" />
                       </button>
                       <button
                         onClick={() => handleRemoveContact(index)}
-                        className="ml-2 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 text-red-500"
+                        className="ml-2 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-[#00000033] transition-colors duration-200 text-red-500"
                       >
                         <XMarkIcon className="w-5 h-5" aria-hidden="true" />
                       </button>