From 0b98a357488a6ddcb00acbadc63edf0c8b5f1928 Mon Sep 17 00:00:00 2001
From: marcoelissa <marco.elissa@gmail.com>
Date: Thu, 6 Oct 2022 17:56:02 +0700
Subject: [PATCH] useDarkMode emoji fix

---
 .../Orbis/FloatingChat/ChatToolbar.tsx        | 22 +++++++++++--------
 .../@shared/Orbis/FloatingChat/index.tsx      | 14 +-----------
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx
index e2c162d9c..c805d18fb 100644
--- a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx
+++ b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx
@@ -5,14 +5,18 @@ import EmojiIcon from '@images/emoji.svg'
 import Input from '@shared/FormInput'
 import { useOrbis } from '@context/Orbis'
 import dynamic from 'next/dynamic'
-import Picker, { EmojiClickData, EmojiStyle, Theme } from 'emoji-picker-react'
+import { EmojiClickData, EmojiStyle, Theme } from 'emoji-picker-react'
+import useDarkMode from '@oceanprotocol/use-dark-mode'
+import { useMarketMetadata } from '@context/MarketMetadata'
 
-interface ChatToolbarProps {
-  mode: boolean
-}
+// interface ChatToolbarProps {
+//   mode: boolean
+// }
+
+const ChatToolbar = () => {
+  const { appConfig } = useMarketMetadata()
+  const darkMode = useDarkMode(false, appConfig?.darkModeConfig)
 
-const ChatToolbar: FC<ChatToolbarProps> = ({ mode }) => {
-  console.log('THEME', mode)
   const { orbis, conversationId } = useOrbis()
   const [content, setContent] = useState<string>('')
   const [showPicker, setShowPicker] = useState(false)
@@ -30,8 +34,8 @@ const ChatToolbar: FC<ChatToolbarProps> = ({ mode }) => {
   }
 
   useEffect(() => {
-    console.log(content)
-  }, [content])
+    console.log(darkMode)
+  }, [darkMode])
 
   const sendMessage = async () => {
     const res = await orbis.sendMessage({
@@ -72,7 +76,7 @@ const ChatToolbar: FC<ChatToolbarProps> = ({ mode }) => {
         {showPicker && (
           <Picker
             onEmojiClick={onEmojiClick}
-            theme={mode ? Theme.DARK : Theme.LIGHT}
+            theme={darkMode.value ? Theme.DARK : Theme.LIGHT}
             emojiStyle={EmojiStyle.NATIVE}
             autoFocusSearch={false}
             lazyLoadEmojis={false}
diff --git a/src/components/@shared/Orbis/FloatingChat/index.tsx b/src/components/@shared/Orbis/FloatingChat/index.tsx
index fb726a6e9..a3f62b0dc 100644
--- a/src/components/@shared/Orbis/FloatingChat/index.tsx
+++ b/src/components/@shared/Orbis/FloatingChat/index.tsx
@@ -88,18 +88,6 @@ export default function FloatingChat() {
     }
   }, [conversationId])
 
-  const [mode, setMode] = useState(true)
-
-  const storage: boolean =
-    window !== undefined
-      ? window.localStorage.getItem('oceanDarkMode') === 'true'
-      : false
-
-  useEffect(() => {
-    console.log(storage)
-    setMode(storage)
-  }, [storage])
-
   return (
     <div className={`${styles.wrapper} ${!convOpen && styles.isClosed}`}>
       <div className={styles.floating}>
@@ -163,7 +151,7 @@ export default function FloatingChat() {
               </button>
             </div>
             <Conversation messages={messages} />
-            <ChatToolbar mode={mode} />
+            <ChatToolbar />
           </div>
         )}
       </div>