Merge remote-tracking branch 'origin/main' into chalabi/group_factory

liftedinit · Dec 18, 2024 · bb39036 · bb39036
2 parents 89b60ac + 3708021
commit bb39036
Show file tree

Hide file tree

Showing 14 changed files with 105 additions and 27 deletions.
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,5 @@ yarn-error.log*
 next-env.d.ts
 
 .idea/
+
+certificates
diff --git a/components/react/authSignerModal.tsx b/components/react/authSignerModal.tsx
@@ -1,12 +1,10 @@
-import { Fragment, useEffect } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import { useEffect } from 'react';
 import { SignData } from '@cosmos-kit/web3auth';
-import { SignDoc } from '@liftedinit/manifestjs/dist/codegen/cosmos/tx/v1beta1/tx';
 import { TxBody, AuthInfo } from '@liftedinit/manifestjs/dist/codegen/cosmos/tx/v1beta1/tx';
 import { decodePubkey } from '@cosmjs/proto-signing';
 import { useWallet, useChain } from '@cosmos-kit/react';
-import Image from 'next/image';
 import { getRealLogo } from '@/utils';
+import { useTheme } from '@/contexts';
 
 type DisplayDataToSignProps = {
   data: SignData;
@@ -121,6 +119,7 @@ const SignModal = ({
   const { address } = useChain('manifest');
   const walletIcon = wallet.wallet?.logo;
   const walletName = wallet.wallet?.prettyName;
+  const { theme } = useTheme();
 
   useEffect(() => {
     const modal = document.getElementById('sign-modal') as HTMLDialogElement;
@@ -138,7 +137,11 @@ const SignModal = ({
       <div className="modal-box max-w-lg w-full dark:bg-[#1D192D] bg-[#FFFFFF] rounded-lg shadow-xl">
         <div className="flex justify-between items-center pb-4">
           <div className="flex items-center gap-3">
-            <img src={getRealLogo(walletIconString)} alt="Wallet type logo" className="w-8 h-8" />
+            <img
+              src={getRealLogo(walletIconString, theme === 'dark')}
+              alt="Wallet type logo"
+              className="w-8 h-8"
+            />
             <h3 className="text-xl font-semibold">{walletName?.toString()} Direct Signer</h3>
           </div>
           <button className="btn btn-sm btn-circle btn-ghost" onClick={onClose}>

diff --git a/components/react/mobileNav.tsx b/components/react/mobileNav.tsx
@@ -16,6 +16,7 @@ import { WalletSection } from '../wallet';
 import { RiMenuUnfoldFill } from 'react-icons/ri';
 import { useState } from 'react';
 import { MdOutlineNetworkPing, MdContacts } from 'react-icons/md';
+import env from '@/config/env';
 
 export default function MobileNav() {
   const closeDrawer = () => {
@@ -60,7 +61,12 @@ export default function MobileNav() {
             <div className="flex flex-row justify-between items-center">
               <div className="flex flex-row gap-4 justify-between items-center">
                 <Image src={'/logo.svg'} alt="logo" width={42} height={42} />
-                <span className="text-2xl leading-tight text-balance">Alberto</span>
+                <div className="flex flex-col">
+                  <p className="text-2xl leading-tight text-balance">Alberto</p>
+                  {env.chainTier === 'mainnet' ? null : (
+                    <p className="text-md uppercase">{env.chainTier}</p>
+                  )}
+                </div>
               </div>
 
               {/* Updated Theme Toggle */}

diff --git a/components/react/modal.tsx b/components/react/modal.tsx
@@ -6,7 +6,7 @@ import { Dialog, Transition, Portal } from '@headlessui/react';
 import { Connected, Connecting, Error, NotExist, QRCode, WalletList, Contacts } from './views';
 import { useRouter } from 'next/router';
 import { ToastProvider } from '@/contexts/toastContext';
-
+import { useDeviceDetect } from '@/hooks';
 export enum ModalView {
   WalletList,
   QRCode,
@@ -46,6 +46,7 @@ export const TailwindModal: React.FC<
 
   const walletStatus = current?.walletStatus || WalletStatus.Disconnected;
   const currentWalletName = current?.walletName;
+  const { isMobile } = useDeviceDetect();
 
   useEffect(() => {
     if (isOpen) {
@@ -89,7 +90,7 @@ export const TailwindModal: React.FC<
           setSelectedWallet(wallet);
         }
         if (wallet?.walletInfo.mode === 'wallet-connect') {
-          setCurrentView(ModalView.QRCode);
+          setCurrentView(isMobile ? ModalView.Connecting : ModalView.QRCode);
           setQRWallet(wallet);
         }
       }, 1);

diff --git a/components/react/sideNav.tsx b/components/react/sideNav.tsx
@@ -4,7 +4,6 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { IconWallet, WalletSection } from '../wallet';
 import { useTheme } from '@/contexts/theme';
-import { useCallback } from 'react';
 import { TailwindModal } from './modal';
 import packageInfo from '../../package.json';
 
@@ -17,7 +16,9 @@ import {
   LightIcon,
 } from '@/components/icons';
 
-import { MdContacts, MdOutlineNetworkPing } from 'react-icons/md';
+import { MdContacts } from 'react-icons/md';
+import { getRealLogo } from '@/utils';
+import env from '@/config/env';
 
 interface SideNavProps {
   isDrawerVisible: boolean;
@@ -133,7 +134,12 @@ export default function SideNav({ isDrawerVisible, setDrawerVisible }: SideNavPr
         <Link href={'/#'} passHref legacyBehavior>
           <Image src={'/logo.svg'} alt="logo" width={48} height={48} className="cursor-pointer" />
         </Link>
-        <p className="text-4xl font-bold">Alberto</p>
+        <div className="flex flex-col">
+          <p className="text-4xl font-bold">Alberto</p>
+          {env.chainTier === 'mainnet' ? null : (
+            <p className="text-md uppercase">{env.chainTier}</p>
+          )}
+        </div>
       </div>
       <ul className="flex-grow mt-8 p-1">
         <NavDrawer Icon={BankIcon} href="/bank" label="Bank" />
@@ -186,8 +192,30 @@ export default function SideNav({ isDrawerVisible, setDrawerVisible }: SideNavPr
             <WalletSection chainName="manifest" />
           </div>
         </ul>
-        <div className="flex flex-row justify-center items-center">
-          <p className="text-sm text-gray-500">v{version}</p>
+        <div className="flex flex-row justify-between items-center">
+          <Link href="https://github.com/liftedinit/manifest-app" target="_blank">
+            <p className="text-sm text-gray-500">v{version}</p>
+          </Link>
+          <div className="flex flex-row justify-between items-center gap-3">
+            <Link href="https://discord.gg/ndYMdRmFpG" target="_blank">
+              <Image
+                src={getRealLogo('/discord', theme === 'dark')}
+                alt={'Discord'}
+                width={12}
+                height={12}
+                className="w-4 h-4 rounded-xl"
+              />
+            </Link>
+            <Link href="https://x.com/ManifestAIs" target="_blank">
+              <Image
+                src={getRealLogo('/x', theme === 'dark')}
+                alt={'Twitter'}
+                width={12}
+                height={12}
+                className="w-4 h-4 rounded-xl"
+              />
+            </Link>
+          </div>
         </div>
       </div>
     </div>

diff --git a/components/react/views/Connected.tsx b/components/react/views/Connected.tsx
@@ -9,6 +9,7 @@ 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,
@@ -30,6 +31,7 @@ export const Connected = ({
   const { balance } = useBalance(address ?? '');
   const [copied, setCopied] = useState(false);
   const [showContacts, setShowContacts] = useState(false);
+  const { theme } = useTheme();
 
   const copyAddress = () => {
     if (address) {
@@ -57,7 +59,7 @@ export const Connected = ({
           <Image
             height={0}
             width={0}
-            src={getRealLogo(logo)}
+            src={getRealLogo(logo, theme === 'dark')}
             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
@@ -4,6 +4,7 @@ import { Dialog } from '@headlessui/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { ChevronLeftIcon } from '@heroicons/react/20/solid';
 import { getRealLogo } from '@/utils';
+import { useTheme } from '@/contexts';
 
 export const Connecting = ({
   onClose,
@@ -20,6 +21,7 @@ export const Connecting = ({
   title: string;
   subtitle: string;
 }) => {
+  const { theme } = useTheme();
   return (
     <div className="mt-3 text-center sm:mt-1.5">
       <div className="flex justify-between items-center mb-2">
@@ -43,7 +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={getRealLogo(logo)}
+          src={getRealLogo(logo, theme === 'dark')}
           alt={name}
           className="flex-shrink-0 w-20 h-20 mx-auto aspect-1"
         />

diff --git a/components/react/views/Error.tsx b/components/react/views/Error.tsx
@@ -5,6 +5,7 @@ import { XMarkIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
 import { ChevronLeftIcon } from '@heroicons/react/20/solid';
 import Image from 'next/image';
 import { getRealLogo } from '@/utils';
+import { useTheme } from '@/contexts';
 export const Error = ({
   currentWalletName,
   onClose,
@@ -18,6 +19,7 @@ export const Error = ({
   onReconnect: () => void;
   logo: string;
 }) => {
+  const { theme } = useTheme();
   return (
     <div className="mt-3 text-center sm:mt-1.5">
       <div className="flex flex-row items-center justify-between">
@@ -45,7 +47,7 @@ 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={getRealLogo(logo, theme === 'dark')}
             alt="Wallet type logo"
             className="flex-shrink-0 w-16 h-16 aspect-1"
             width={16}

diff --git a/components/react/views/NotExist.tsx b/components/react/views/NotExist.tsx
@@ -3,6 +3,7 @@ import { Dialog } from '@headlessui/react';
 import { XMarkIcon, ArrowDownTrayIcon } from '@heroicons/react/24/outline';
 import { ChevronLeftIcon } from '@heroicons/react/20/solid';
 import { getRealLogo } from '@/utils';
+import { useTheme } from '@/contexts';
 
 export const NotExist = ({
   onClose,
@@ -17,6 +18,7 @@ export const NotExist = ({
   logo: string;
   name: string;
 }) => {
+  const { theme } = useTheme();
   return (
     <div className="mt-3 text-center sm:mt-1.5">
       <div className="flex justify-between items-center mb-2">
@@ -40,7 +42,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={getRealLogo(logo, theme === 'dark')}
           alt={name}
           className="flex-shrink-0 w-16 h-16 mx-auto aspect-1"
         />

diff --git a/components/react/views/WalletList.tsx b/components/react/views/WalletList.tsx
@@ -2,6 +2,7 @@
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { ChainWalletBase } from 'cosmos-kit';
 import { getRealLogo } from '@/utils';
+import { useDeviceDetect } from '@/hooks';
 
 export const WalletList = ({
   onClose,
@@ -12,6 +13,7 @@ export const WalletList = ({
   onWalletClicked: (name: string) => void;
   wallets: ChainWalletBase[];
 }) => {
+  // Can't use `useTheme` here because it's not wrapped in a ThemeProvider
   const isDarkMode = document.documentElement.classList.contains('dark');
 
   const social = wallets.filter(wallet =>
@@ -29,6 +31,7 @@ export const WalletList = ({
       wallet.walletInfo.prettyName
     )
   );
+  const { isMobile } = useDeviceDetect();
   return (
     <div className="p-1 relative max-w-sm mx-auto">
       <h1 className="text-sm font-semibold text-center mb-6">Connect Wallet</h1>
@@ -41,7 +44,7 @@ export const WalletList = ({
       </button>
 
       {/* Browser and Social sections - browaer hidden on mobile/tablet */}
-      <div className="hidden md:block">
+      <div className={`${isMobile ? 'hidden' : 'block'}`}>
         <div className="space-y-2 mb-4">
           {browser.map(({ walletInfo: { name, prettyName, logo } }) => (
             <button
@@ -50,7 +53,7 @@ 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={getRealLogo(logo?.toString() ?? '', isDarkMode)}
                 alt={prettyName}
                 className="w-10 h-10 rounded-xl mr-3"
               />
@@ -71,7 +74,7 @@ export const WalletList = ({
               className="flex items-center justify-center p-4 dark:bg-[#ffffff0c] bg-[#f0f0ff5c] dark:hover:bg-[#0000004c] hover:bg-[#a8a8a84c] rounded-lg transition"
             >
               <img
-                src={getRealLogo(logo?.toString() ?? '')}
+                src={getRealLogo(logo?.toString() ?? '', isDarkMode)}
                 alt={prettyName}
                 className={`${prettyName === 'Reddit' || prettyName === 'Google' ? 'w-8 h-8' : 'w-7 h-7'} rounded-md`}
               />
@@ -81,7 +84,7 @@ export const WalletList = ({
       </div>
 
       {/* Mobile Wallets Section - shown on mobile/tablet, hidden on desktop */}
-      <div className="md:hidden">
+      <div className={`${isMobile ? 'block' : 'hidden'}`}>
         <div className="space-y-2">
           {mobile.map(({ walletInfo: { name, prettyName, logo } }) => (
             <button
@@ -90,7 +93,7 @@ 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={getRealLogo(logo?.toString() ?? '', isDarkMode)}
                 alt={prettyName}
                 className="w-10 h-10 rounded-xl mr-3"
               />
@@ -110,7 +113,7 @@ export const WalletList = ({
               className="flex items-center justify-center p-4 dark:bg-[#ffffff0c] bg-[#f0f0ff5c] dark:hover:bg-[#0000004c] hover:bg-[#a8a8a84c] rounded-lg transition"
             >
               <img
-                src={isDarkMode ? logo?.toString() + '_light.svg' : logo?.toString() + '_dark.svg'}
+                src={getRealLogo(logo?.toString() ?? '', isDarkMode)}
                 alt={prettyName}
                 className={`${prettyName === 'Reddit' || prettyName === 'Google' ? 'w-8 h-8' : 'w-7 h-7'} rounded-md`}
               />

diff --git a/hooks/index.tsx b/hooks/index.tsx
@@ -6,3 +6,4 @@ export * from './useQueries';
 export * from './useTx';
 export * from './useContacts';
 export { default as useIsMobile } from './useIsMobile';
+export * from './useDeviceDetect';
diff --git a/hooks/useDeviceDetect.tsx b/hooks/useDeviceDetect.tsx
@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+declare global {
+  interface Navigator {
+    userAgentData?: {
+      mobile: boolean;
+    };
+  }
+}
+export const useDeviceDetect = () => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkDevice = () => {
+      if (navigator.userAgentData) {
+        setIsMobile(navigator.userAgentData.mobile);
+      } else {
+        setIsMobile(
+          /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+        );
+      }
+    };
+
+    checkDevice();
+  }, []);
+
+  return { isMobile };
+};
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "private": false,
   "description": "An application to interact with the Manifest Chain",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -H 0.0.0.0",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

diff --git a/utils/logos.ts b/utils/logos.ts
@@ -1,10 +1,9 @@
 import { ExtendedValidatorSDKType } from '@/components';
 
-export const getRealLogo = (logo: string) => {
-  const isDarkMode = document.documentElement.classList.contains('dark');
+export const getRealLogo = (logo: string, isDarkMode?: boolean) => {
   const localAndHasExtension = /^\/(?!.*\.[0-9a-z]+$)/i.test(logo);
   return localAndHasExtension
-    ? isDarkMode
+    ? isDarkMode === true
       ? logo?.toString() + '_light.svg'
       : logo?.toString() + '_dark.svg'
     : logo;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -37,3 +37,5 @@ yarn-error.log*
		next-env.d.ts

		.idea/

		certificates