chore(rwa): add analytics (#2800)

Author: sstraatemans

packages/apps/rwa-demo/package.json

@@ -3,7 +3,8 @@
   "version": "0.1.6",
   "private": true,
   "scripts": {
-    "build": "pnpm run generate & next build",
+    "prebuild": "pnpm run generate",
+    "build": "next build",
     "dev": "next dev",
     "generate": "pactjs contract-generate --contract \"coin\" --api \"https://api.testnet.chainweb.com/chainweb/0.0/testnet04/chain/0/pact\"",
     "generate:sdk": "cache-sh -i \"{codegen-sdk.yml,./node_modules/@kadena/graph/generated-schema.graphql,src/**/*.graph.ts,src/__generated__/**}\" -- graphql-codegen --config codegen-sdk.yml",
@@ -17,6 +18,7 @@
   },
   "dependencies": {
     "@apollo/client": "~3.9.11",
+    "@google-analytics/data": "~3.2.2",
     "@graphql-yoga/apollo-link": "~3.3.0",
     "@hookform/resolvers": "^3.2.0",
     "@kadena/client": "workspace:*",
@@ -52,6 +54,7 @@
     "@kadena/pactjs-cli": "workspace:*",
     "@kadena/pactjs-generator": "workspace:*",
     "@testing-library/react-hooks": "^8.0.1",
+    "@types/gtag.js": "~0.0.12",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",

packages/apps/rwa-demo/src/app/(app)/layout.tsx

@@ -10,6 +10,7 @@ import {
 
 import { ActiveTransactionsList } from '@/components/ActiveTransactionsList/ActiveTransactionsList';
 import { AssetInfo } from '@/components/AssetInfo/AssetInfo';
+import { CookieConsent } from '@/components/CookieConsent/CookieConsent';
 import { DemoBanner } from '@/components/DemoBanner/DemoBanner';
 import { FrozenInvestorBanner } from '@/components/FrozenInvestorBanner/FrozenInvestorBanner';
 import { GasPayableBanner } from '@/components/GasPayableBanner/GasPayableBanner';
@@ -93,6 +94,7 @@ const RootLayout = ({
         topBanner={
           <Stack width="100%" gap="xs" flexDirection="column">
             <DemoBanner />
+            <CookieConsent />
             <GraphOnlineBanner />
             <FrozenInvestorBanner />
             <GasPayableBanner />

packages/apps/rwa-demo/src/app/(loggedout)/layout.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { CookieConsent } from '@/components/CookieConsent/CookieConsent';
 import { GasPayableBanner } from '@/components/GasPayableBanner/GasPayableBanner';
 import { Card, Stack, Text } from '@kadena/kode-ui';
 import React from 'react';
@@ -25,6 +26,7 @@ const RootLayout = ({
     >
       <Stack flexDirection="column" className={cardWrapperClass}>
         <Card className={cardClass}>
+          <CookieConsent />
           <GasPayableBanner />
           {children}
         </Card>

packages/apps/rwa-demo/src/app/layout.tsx

@@ -3,6 +3,7 @@
 import { mediaProviderStyles } from '@kadena/kode-ui';
 import React from 'react';
 
+import { Analytics } from '@/components/Analytics/Analytics';
 import { Providers } from './Providers';
 
 const RootLayout = ({
@@ -20,7 +21,10 @@ const RootLayout = ({
         />
       </head>
       <body>
-        <Providers>{children}</Providers>
+        <Providers>
+          <Analytics />
+          {children}
+        </Providers>
       </body>
     </html>
   );

packages/apps/rwa-demo/src/components/AccountProvider/AccountProvider.tsx

@@ -123,6 +123,7 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
 
   const selectAccount = (account: IWalletAccount) => {
     setAccount(account);
+
     localStorage.setItem(getAccountCookieName(), JSON.stringify(account)!);
     router.replace('/');
   };
@@ -174,7 +175,7 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
         localStorage.removeItem(getAccountCookieName());
       }
     }
-  }, []);
+  }, [account?.address]);
 
   const initProps = async (accountProp?: IWalletAccount) => {
     if (!accountProp) {
@@ -196,21 +197,19 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
   };
 
   useEffect(() => {
-    if (accountRoles.isMounted) {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      initProps(account);
-    }
-  }, [accountRoles.isMounted]);
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    initProps(account);
+  }, [account?.address]);
 
   useEffect(() => {
-    if (!account) {
+    if (!account?.address) {
       setIsAgentState(false);
       setIsOwnerState(false);
       setIsComplianceOwnerState(false);
       setIsInvestorState(false);
       return;
     }
-  }, [account]);
+  }, [account?.address]);
 
   const sign = async (tx: IUnsignedCommand): Promise<ICommand | undefined> => {
     const { message, close } = await getWalletConnection();

packages/apps/rwa-demo/src/components/AccountProvider/utils.ts

@@ -90,6 +90,7 @@ export async function getWalletConnection(page: string = '') {
       throw new Error('TIMEOUT');
     }),
   ]).catch(async () => {
+    console.log(walletUrl());
     wallet.location.href = walletUrl();
     // todo: replace this by a better way to know when the wallet is ready
     return waitForWallet();

packages/apps/rwa-demo/src/components/Analytics/Analytics.tsx

@@ -0,0 +1,59 @@
+import { analyticsPageView } from '@/utils/analytics';
+import { env } from '@/utils/env';
+import { usePathname } from 'next/navigation';
+import Script from 'next/script';
+import type { FC } from 'react';
+import React, { useEffect } from 'react';
+
+export const Analytics: FC = () => {
+  const pathname = usePathname();
+  // 👇 send page views when users gets to the landing page
+  useEffect(() => {
+    if (!env.TRACKING_ID) return;
+
+    gtag('config', env.TRACKING_ID, {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      send_page_view: false, //manually send page views to have full control
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!env.TRACKING_ID) return;
+    analyticsPageView({
+      page_path: pathname ?? window.location.pathname,
+      send_to: env.TRACKING_ID,
+    });
+  }, [pathname]);
+
+  if (!env.TRACKING_ID) {
+    return null;
+  }
+  return (
+    <>
+      <Script
+        rel="dns-prefetch"
+        src={`https://www.googletagmanager.com/gtag/js?id=${env.TRACKING_ID}`}
+      ></Script>
+      <Script
+        id="gtag-init"
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+
+
+
+            gtag('consent', 'default', {
+              'analytics_storage': 'denied'
+            });
+
+            gtag('config', '${env.TRACKING_ID}', {
+              'debug_mode': false
+            });
+          `,
+        }}
+      />
+    </>
+  );
+};

packages/apps/rwa-demo/src/components/CookieConsent/CookieConsent.tsx

@@ -0,0 +1,77 @@
+import { updateConsent } from '@/utils/analytics';
+import { MonoCheck, MonoClose, MonoCookie } from '@kadena/kode-icons';
+import {
+  Notification,
+  NotificationButton,
+  NotificationFooter,
+  NotificationHeading,
+  Text,
+} from '@kadena/kode-ui';
+import type { FC } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { containerClass, notificationWrapperClass } from './styles.css';
+
+export const CookieConsent: FC = () => {
+  const [cookieConsent, setCookieConsent] = useState<boolean | null>(null);
+  const [mounted, setMounted] = useState<boolean>(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const stickyValue = localStorage.getItem('cookie_consent');
+    if (stickyValue === null) return;
+    setCookieConsent(JSON.parse(stickyValue));
+  }, []);
+
+  useEffect(() => {
+    if (cookieConsent === null) return;
+    updateConsent(cookieConsent);
+  }, [cookieConsent]);
+
+  const handleAccept = useCallback(() => {
+    setCookieConsent(true);
+  }, []);
+
+  const handleReject = useCallback(() => {
+    setCookieConsent(false);
+  }, []);
+
+  if (cookieConsent !== null || !mounted) return null;
+
+  return (
+    <section aria-labelledby="cookie-heading" className={containerClass}>
+      <div className={notificationWrapperClass}>
+        <Notification
+          intent="info"
+          type="inlineStacked"
+          icon={<MonoCookie />}
+          role="none"
+        >
+          <NotificationHeading id="cookie-heading">
+            Cookie Consent
+          </NotificationHeading>
+          <Text variant="ui">
+            This notification concerns the cookie policy requirement to ask
+            users for their consent to use <strong>Google Analytics</strong> or
+            other tracking tools for better optimizations/performances.
+          </Text>
+          <NotificationFooter>
+            <NotificationButton
+              intent={'positive'}
+              onClick={handleAccept}
+              icon={<MonoCheck />}
+            >
+              Accept
+            </NotificationButton>
+            <NotificationButton
+              intent={'negative'}
+              onClick={handleReject}
+              icon={<MonoClose />}
+            >
+              Reject
+            </NotificationButton>
+          </NotificationFooter>
+        </Notification>
+      </div>
+    </section>
+  );
+};

packages/apps/rwa-demo/src/components/CookieConsent/styles.css.ts

@@ -0,0 +1,19 @@
+import { atoms } from '@kadena/kode-ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const containerClass = style([
+  atoms({
+    backgroundColor: 'semantic.info.default',
+  }),
+  {
+    position: 'relative',
+    top: 'unset',
+    zIndex: 9999,
+  },
+]);
+
+export const notificationWrapperClass = style([
+  {
+    marginInline: 'auto',
+  },
+]);