Feat/intercom (#759)

* build: intercom wip * build: sets up intercom * build: removes script tag * fix: add workflow info --------- Co-authored-by: Jeff Wu <[email protected]>
notional-finance · Apr 16, 2024 · 485c683 · 485c683
1 parent 85a4f6b
commit 485c683
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 3 deletions.
diff --git a/.github/workflows/deploy-arb-dev.yml b/.github/workflows/deploy-arb-dev.yml
@@ -38,6 +38,7 @@ jobs:
           NX_DD_SITE: ${{ secrets.NX_DD_SITE }}
           NX_APP_URL: ${{ secrets.NX_APP_URL }}
           NX_DATA_URL: ${{ secrets.NX_DATA_URL }}
+          NX_INTERCOM_APP_ID: ${{ secrets.NX_INTERCOM_APP_ID }}
           # This segment key is not the same as the prod one
           NX_SEGMENT_KEY: ${{ secrets.NX_DEV_SEGMENT_KEY }}
           NX_ENV: ${{ github.event.inputs.environment || 'arb' }}

diff --git a/.github/workflows/deploy-arb.yml b/.github/workflows/deploy-arb.yml
@@ -41,6 +41,7 @@ jobs:
           NX_SEGMENT_KEY: ${{ secrets.NX_SEGMENT_KEY }}
           NX_ENV: ${{ github.event.inputs.environment || 'arb' }}
           NX_COMMIT_REF: ${{ github.sha }}
+          NX_INTERCOM_APP_ID: ${{ secrets.NX_INTERCOM_APP_ID }}
       - name: Publish Dev
         uses: cloudflare/pages-action@1
         with:

diff --git a/apps/web/src/containers/App/App.tsx b/apps/web/src/containers/App/App.tsx
@@ -16,6 +16,7 @@ import {
   LiquidityLeveragedDashboard,
 } from '@notional-finance/shared-web';
 import { Web3OnboardProvider } from '@web3-onboard/react';
+import { IntercomProvider } from 'react-use-intercom';
 import { Redirect, Route, Switch, useParams } from 'react-router';
 import { CompatRouter } from 'react-router-dom-v5-compat';
 import { ServerError } from '../ServerError/server-error';
@@ -264,6 +265,7 @@ export const App = () => {
     state: { themeVariant },
   } = globalState;
   const notionalTheme = useNotionalTheme(themeVariant);
+  const intercomAppId = process.env['NX_INTERCOM_APP_ID'] as string;
 
   return (
     <ThemeProvider theme={notionalTheme}>
@@ -287,9 +289,11 @@ export const App = () => {
                 content="Lend, Borrow, and Earn Leveraged Yield with Fixed or Variable Rates"
               />
             </Helmet>
-            <Web3OnboardProvider web3Onboard={OnboardContext}>
-              <AllRoutes />
-            </Web3OnboardProvider>
+            <IntercomProvider appId={intercomAppId}>
+              <Web3OnboardProvider web3Onboard={OnboardContext}>
+                <AllRoutes />
+              </Web3OnboardProvider>
+            </IntercomProvider>
           </FeatureLoader>
         </NotionalContext.Provider>
       </HelmetProvider>

diff --git a/apps/web/src/containers/App/AppLayoutRoute.tsx b/apps/web/src/containers/App/AppLayoutRoute.tsx
@@ -6,13 +6,15 @@ import {
   metaTagData,
 } from '@notional-finance/shared-web';
 import { WalletSelector } from '@notional-finance/wallet';
+import { useIntercom } from 'react-use-intercom';
 import { Box, styled } from '@mui/material';
 import { colors } from '@notional-finance/styles';
 import { META_TAG_CATEGORIES, RouteType } from '@notional-finance/util';
 import { useWalletConnectedNetwork } from '@notional-finance/notionable-hooks';
 import { usePageTrack } from '@notional-finance/helpers';
 import { useLocation } from 'react-router';
 import { FooterPopup } from '@notional-finance/mui';
+import { useEffect } from 'react';
 
 const AppLayoutRoute = ({
   component: Component,
@@ -27,12 +29,19 @@ const AppLayoutRoute = ({
 }) => {
   const location = useLocation();
   const selectedNetwork = useWalletConnectedNetwork();
+  const { boot } = useIntercom();
   usePageTrack(routeType, selectedNetwork);
 
   const slicedPath = path
     .match(/\/[^/]+/)?.[0]
     ?.slice(1) as META_TAG_CATEGORIES;
 
+  useEffect(() => {
+    if (!landingLayout) {
+      boot();
+    }
+  }, [landingLayout, boot]);
+
   return landingLayout ? (
     <CompatRoute
       path={path}

diff --git a/package.json b/package.json
@@ -66,6 +66,7 @@
     "react-scroll": "^1.8.9",
     "react-slick": "^0.29.0",
     "react-swipeable": "^7.0.0",
+    "react-use-intercom": "^5.4.0",
     "react-youtube": "^9.0.2",
     "recharts": "^2.3.2",
     "regenerator-runtime": "0.13.7",

diff --git a/yarn.lock b/yarn.lock
@@ -19071,6 +19071,11 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-use-intercom@^5.4.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/react-use-intercom/-/react-use-intercom-5.4.0.tgz#9e2287470a3bba83fe4d9ec9991314bdc999fcb6"
+  integrity sha512-fMOfylJoFQbXdVNbsXbNZrK+Qwc45AqjZFzkq8gclxiK72FcZl7IUKbm3g+EVKd6QoNX2AHpDD7sqAEwMvzFaQ==
+
 react-youtube@^9.0.2:
   version "9.0.3"
   resolved "https://registry.yarnpkg.com/react-youtube/-/react-youtube-9.0.3.tgz#5d2f0e977db96bcf03921e9a5727136b32c1c744"