From 370802163c96906f50d741d8f15db25d41211ec4 Mon Sep 17 00:00:00 2001
From: Joseph Chalabi <100090645+chalabi2@users.noreply.github.com>
Date: Tue, 17 Dec 2024 07:04:14 -0700
Subject: [PATCH] feat: add social links to sidebar (#149)

---------

Co-authored-by: Felix C. Morency <1102868+fmorency@users.noreply.github.com>
---
 .gitignore                            |  2 ++
 components/react/authSignerModal.tsx  | 13 +++++++-----
 components/react/sideNav.tsx          | 30 +++++++++++++++++++++++----
 components/react/views/Connected.tsx  |  4 +++-
 components/react/views/Connecting.tsx |  4 +++-
 components/react/views/Error.tsx      |  4 +++-
 components/react/views/NotExist.tsx   |  4 +++-
 components/react/views/WalletList.tsx |  9 ++++----
 utils/logos.ts                        |  5 ++---
 9 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/.gitignore b/.gitignore
index b5003554..0add2f24 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,5 @@ yarn-error.log*
 next-env.d.ts
 
 .idea/
+
+certificates
\ No newline at end of file
diff --git a/components/react/authSignerModal.tsx b/components/react/authSignerModal.tsx
index c11745c9..5a72c76f 100644
--- 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
index 920b2796..6a4a2479 100644
--- 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
index a893599b..1531b3a9 100644
--- 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
index ec452c6a..f705f081 100644
--- 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
index 1805a0e8..d32482a8 100644
--- 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
index 95b07273..cba6d73f 100644
--- 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
index 160f9dfe..3478b3cc 100644
--- 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
index 153a5ca3..66ecc575 100644
--- 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;