From 448f08e6b2d9929aeb243707677d8204098b21b3 Mon Sep 17 00:00:00 2001
From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com>
Date: Tue, 9 Jan 2024 15:54:50 +1100
Subject: [PATCH 1/2] feat: add chatwoot

---
 .env         | 9 ++++++++-
 src/App.tsx  | 2 ++
 src/env.d.ts | 3 +++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/.env b/.env
index 556d86c..ac60ba1 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,9 @@
-VITE_FOO=bar
+# Feature flags
 VITE_FEATURE_MIXPANEL=true
+VITE_FEATURE_CHATWOOT=false
+
+VITE_FOO=bar
+
+# chat woot
+VITE_CHATWOOT_TOKEN=jmoXp9BPMSPEYHeJX5YKT15Q
+VITE_CHATWOOT_URL=https://app.chatwoot.com
diff --git a/src/App.tsx b/src/App.tsx
index 29ce22c..f070c74 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import './App.css'
 
 import { Center } from '@chakra-ui/react'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { ChatwootButton } from 'components/Chatwoot'
 import { SelectPair } from 'components/SelectPair'
 import { Status } from 'components/Status/Status'
 import { TradeInput } from 'components/TradeInput'
@@ -27,6 +28,7 @@ function App() {
   return (
     <Center width='full' height='100vh' flexDir='column'>
       <RouterProvider router={router} />
+      <ChatwootButton />
     </Center>
   )
 }
diff --git a/src/env.d.ts b/src/env.d.ts
index 3ad125a..2278f39 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -4,6 +4,9 @@ interface ImportMetaEnv {
   readonly VITE_FOO: string
   readonly VITE_FEATURE_MIXPANEL: boolean
   readonly VITE_MIXPANEL_TOKEN: string
+  readonly VITE_CHATWOOT_URL: string
+  readonly VITE_CHATWOOT_TOKEN: string
+  readonly VITE_FEATURE_CHATWOOT: boolean
 }
 
 interface ImportMeta {

From b417721ffabcb300db77c8f3458957653aa98cbf Mon Sep 17 00:00:00 2001
From: Apotheosis <97164662+0xApotheosis@users.noreply.github.com>
Date: Tue, 9 Jan 2024 15:56:11 +1100
Subject: [PATCH 2/2] fix: add chatwood component

---
 src/components/Chatwoot.tsx | 38 +++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/components/Chatwoot.tsx

diff --git a/src/components/Chatwoot.tsx b/src/components/Chatwoot.tsx
new file mode 100644
index 0000000..19b54f3
--- /dev/null
+++ b/src/components/Chatwoot.tsx
@@ -0,0 +1,38 @@
+import { Button } from '@chakra-ui/react'
+import { useCallback, useEffect } from 'react'
+
+export const ChatwootButton: React.FC = () => {
+  const chatWootEnabled = import.meta.env.VITE_FEATURE_CHATWOOT
+  useEffect(() => {
+    if (!chatWootEnabled) return // Add Chatwoot Settings
+    ;(window as any).chatwootSettings = {
+      hideMessageBubble: true,
+      position: 'left', // This can be left or right
+      locale: 'en', // Language to be set
+      type: 'standard', // [standard, expanded_bubble]
+    }
+
+    // Paste the script from inbox settings except the <script> tag
+    ;(function (d: Document) {
+      const BASE_URL = import.meta.env.VITE_CHATWOOT_URL
+      const g = d.createElement('script')
+      const s = d.getElementsByTagName('script')[0]
+      g.src = BASE_URL + '/packs/js/sdk.js'
+      s.parentNode?.insertBefore(g, s)
+      g.async = true
+      g.onload = function () {
+        ;(window as any).chatwootSDK.run({
+          websiteToken: import.meta.env.VITE_CHATWOOT_TOKEN,
+          baseUrl: BASE_URL,
+        })
+      }
+    })(document)
+  }, [chatWootEnabled])
+
+  const handleChatWoot = useCallback(() => {
+    // @ts-ignore
+    if (window.$chatwoot) window.$chatwoot.toggle()
+  }, [])
+
+  return chatWootEnabled ? <Button onClick={handleChatWoot}>Get support</Button> : null
+}