feat: add social links to sidebar (#149)

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

Hide file tree

Showing 9 changed files with 55 additions and 20 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/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,8 @@ 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 {
@@ -192,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
@@ -13,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 =>
@@ -52,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"
               />
@@ -73,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`}
               />
@@ -92,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"
               />
@@ -112,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/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