feat: add Chatwoot (#745)

* feat: add chatwoot, replace discord as main help link

* chore: linting and tsc

* chore: address review

* chore: check chatwoot env variable in build script

---------

Co-authored-by: jackstar12 <[email protected]>
Co-authored-by: jackstar12 <[email protected]>
Co-authored-by: michael1011 <[email protected]>

Author: 3 people

README.md

@@ -8,7 +8,7 @@ We encourage our technical users to check the code and run the web app locally f
 
 ## Resources
 
-* Get Help: [Discord](https://discord.gg/QBvZGcW) | [Telegram](https://t.me/boltzhq)
+* Get Help: [Support Center](https://support.boltz.exchange/hc/center/) | [Discord](https://discord.gg/QBvZGcW) | [Telegram](https://t.me/boltzhq)
 * Read the Docs: [Docs Home](https://docs.boltz.exchange/)
 * Read our Blog: [Substack](https://blog.boltz.exchange/)
 * Follow us: [X/Twitter](https://twitter.com/Boltzhq) | [Nostr](https://snort.social/p/npub1psm37hke2pmxzdzraqe3cjmqs28dv77da74pdx8mtn5a0vegtlas9q8970)

build.py

@@ -35,3 +35,7 @@ def handle_coop_disabled():
             if var not in data:
                 print(f"{var} not in .env file")
                 sys.exit(1)
+
+        for var in ["VITE_CHATWOOT_TOKEN"]:
+            if var not in data:
+                print(f"WARN: {var} not in .env file")

src/chatwoot.ts

@@ -0,0 +1,51 @@
+import log from "loglevel";
+import { onMount } from "solid-js";
+
+import { config } from "./config";
+
+declare global {
+    interface Window {
+        chatwootSettings: {
+            darkMode: string;
+        };
+        chatwootSDK: {
+            run: (config: { websiteToken: string; baseUrl: string }) => void;
+        };
+        $chatwoot: {
+            setCustomAttributes: (attributes: { swapId: string }) => void;
+        };
+    }
+}
+
+const Chatwoot = () => {
+    onMount(() => {
+        const token = import.meta.env.VITE_CHATWOOT_TOKEN;
+        const url = config.chatwootUrl;
+
+        if (token === undefined || url === undefined) {
+            log.warn("Chatwoot URL or token not set");
+            return;
+        }
+
+        const tag = "script";
+        const script = document.createElement(tag);
+        const parent = document.getElementsByTagName(tag)[0];
+        script.src = url + "/packs/js/sdk.js";
+        script.defer = true;
+        script.async = true;
+        parent.parentNode.insertBefore(script, parent);
+        script.onload = function () {
+            window.chatwootSettings = {
+                darkMode: "auto",
+            };
+            window.chatwootSDK.run({
+                websiteToken: token,
+                baseUrl: url,
+            });
+        };
+    });
+
+    return "";
+};
+
+export default Chatwoot;

src/components/Footer.tsx

@@ -17,16 +17,6 @@ const Footer = () => {
 
     return (
         <footer>
-            <h4>
-                {t("feedback")}{" "}
-                <a
-                    title="Discord"
-                    class="discord"
-                    target="_blank"
-                    href={config.discordUrl}>
-                    Discord
-                </a>
-            </h4>
             <div class="socials">
                 <a
                     title="Github"
@@ -79,6 +69,10 @@ const Footer = () => {
                 </a>
             </div>
             <p class="footer-nav">
+                <a target="_blank" href={config.supportUrl}>
+                    {t("support")}
+                </a>{" "}
+                |{" "}
                 <a target="_blank" href={config.blogUrl}>
                     {t("blog")}
                 </a>{" "}

src/components/Nav.tsx

@@ -80,7 +80,7 @@ const Nav = (props: { network: string }) => {
                         <a
                             class="external"
                             target="_blank"
-                            href={config.discordUrl}>
+                            href={config.supportUrl}>
                             {t("help")}
                             <OcLinkexternal2 size={23} />
                         </a>

src/config.ts

@@ -8,6 +8,7 @@ const defaults = {
 
     loglevel: "info" as log.LogLevelDesc,
     defaultLanguage: "en",
+    supportUrl: "https://support.boltz.exchange/hc/center",
     discordUrl: "https://discord.gg/QBvZGcW",
     twitterUrl: "https://twitter.com/boltzhq",
     githubUrl: "https://github.com/BoltzExchange",
@@ -24,6 +25,7 @@ const defaults = {
     telegramUrl: "https://t.me/boltzhq",
     email: "[email protected]",
     dnsOverHttps: "https://1.1.1.1/dns-query",
+    chatwootUrl: "https://support.boltz.exchange",
     preimageValidation: "https://validate-payment.com",
 };
 

src/i18n/i18n.ts

@@ -2,7 +2,6 @@ const dict = {
     en: {
         language: "English",
         status: "Status",
-        feedback: "Got Feedback? Join our",
         fast: "Fast",
         l2: "Built on Layer 2",
         l2_sub: "Boltz utilizes Layer 2 scaling technologies like the Lightning Network",
@@ -21,6 +20,7 @@ const dict = {
         channel: "Channel",
         refund: "Refund",
         blog: "Blog",
+        support: "Support",
         documentation: "Docs",
         onion: "Onion",
         blockexplorer: "open {{ typeLabel }}",
@@ -229,7 +229,6 @@ const dict = {
     de: {
         language: "Deutsch",
         status: "Status",
-        feedback: "Feedback? Schreib uns auf",
         fast: "Schnell",
         l2: "Auf Layer-2 gebaut",
         l2_sub: "Boltz nutzt Layer-2 Skalierungstechnologien wie das Lightning-Netzwerk",
@@ -249,6 +248,7 @@ const dict = {
         channel: "Kanal",
         refund: "Rückerstattung",
         blog: "Blog",
+        support: "Hilfe",
         documentation: "Docs",
         onion: "Onion",
         blockexplorer: "{{ typeLabel }} anzeigen",
@@ -466,7 +466,6 @@ const dict = {
     es: {
         language: "Español",
         status: "Estado",
-        feedback: "¿Tienes comentarios? Únete a nuestro",
         fast: "Rápido",
         l2: "Construido en la Capa 2",
         l2_sub: "Boltz utiliza tecnologías de segunda capa como la red de Lightning",
@@ -485,6 +484,7 @@ const dict = {
         channel: "Canal",
         refund: "Reembolso",
         blog: "Blog",
+        support: "Ayuda",
         documentation: "Docs",
         onion: "Onion",
         blockexplorer: "Ver en {{ typeLabel }}",
@@ -700,7 +700,6 @@ const dict = {
     zh: {
         language: "中文",
         status: "状态",
-        feedback: "有反馈？加入我们的",
         fast: "快速",
         l2: "建立在二层网络之上",
         l2_sub: "Boltz利用像闪电网络这样的二层网络扩展技术",
@@ -719,14 +718,15 @@ const dict = {
         channel: "通道",
         refund: "退款",
         blog: "博客",
+        support: "支持",
         documentation: "文档",
         onion: "洋葱",
         blockexplorer: "打开{{ typeLabel }}",
         blockexplorer_lockup_address: "锁仓地址",
         blockexplorer_lockup_tx: "锁仓交易",
         blockexplorer_claim_tx: "索赔交易",
         blockexplorer_refund_tx: "退款交易",
-        help: "帮助",
+        help: "支持",
         network_fee: "网络费",
         fee: "Boltz费",
         denomination: "面额",
@@ -907,7 +907,6 @@ const dict = {
     ja: {
         language: "日本語",
         status: "ステータス",
-        feedback: "フィードバックはこちらへ",
         fast: "高速",
         l2: "L2技術を活用",
         l2_sub: "Boltzは、LiquidネットワークやLightningネットワークなどのL2スケーリング技術を利用しています",
@@ -926,6 +925,7 @@ const dict = {
         channel: "チャネル",
         refund: "返金",
         blog: "ブログ",
+        support: "ヘルプ",
         documentation: "ドキュメント",
         onion: "Onion",
         blockexplorer: "ブロックエクスプローラーで表示{{ typeLabel }}",

src/index.tsx

@@ -7,6 +7,7 @@ import log from "loglevel";
 import { Match, Show, Switch, createSignal, onMount } from "solid-js";
 import { render } from "solid-js/web";
 
+import Chatwoot from "./chatwoot";
 import Footer from "./components/Footer";
 import Nav from "./components/Nav";
 import Notification from "./components/Notification";
@@ -67,6 +68,7 @@ const App = (props: RouteSectionProps) => {
                         <CreateProvider>
                             <PayProvider>
                                 <SwapChecker />
+                                <Chatwoot />
                                 <Show when={!isEmbedded()}>
                                     <Nav network={config.network} />
                                 </Show>