Merge pull request #771 from haqq-network/dev

haqq-network · Apr 2, 2024 · fa834f2 · fa834f2
2 parents bd51090 + d432992
commit fa834f2
Show file tree

Hide file tree

Showing 20 changed files with 1,481 additions and 1,740 deletions.
diff --git a/apps/haqq-website/app/layout.tsx b/apps/haqq-website/app/layout.tsx
@@ -26,7 +26,7 @@ export const viewport: Viewport = {
 
 const PostHogPageView = dynamic(
   async () => {
-    const { PostHogPageView } = await import('../utils/posthog-page-view');
+    const { PostHogPageView } = await import('../components/posthog-page-view');
     return { default: PostHogPageView };
   },
   {
@@ -46,13 +46,26 @@ const DynamicLinkRedirect = dynamic(
   },
 );
 
+const IdentifyWalletUsers = dynamic(
+  async () => {
+    const { IdentifyWalletUsers } = await import(
+      '../components/identify-wallet-users'
+    );
+    return { default: IdentifyWalletUsers };
+  },
+  {
+    ssr: false,
+  },
+);
+
 export default function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang="en" className="ltr" dir="ltr" translate="no">
       <PHProvider>
         <body className="will-change-scroll">
           <PostHogPageView />
           <DynamicLinkRedirect />
+          <IdentifyWalletUsers />
 
           {children}
 

diff --git a/apps/haqq-website/components/identify-wallet-users.tsx b/apps/haqq-website/components/identify-wallet-users.tsx
@@ -0,0 +1,33 @@
+'use client';
+import { useEffect } from 'react';
+import { usePostHog } from 'posthog-js/react';
+import type { WindowProvider } from 'wagmi';
+
+declare global {
+  interface Window {
+    ethereum?: WindowProvider;
+    __HAQQWALLET__?: {
+      POSTHOG_DISTINCT_ID?: string;
+    };
+  }
+}
+
+export function IdentifyWalletUsers() {
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const isHaqqWallet = Boolean(window.ethereum?.isHaqqWallet);
+
+      if (isHaqqWallet) {
+        const distinctId =
+          window.__HAQQWALLET__?.POSTHOG_DISTINCT_ID ??
+          posthog.get_distinct_id();
+
+        posthog.identify(distinctId);
+      }
+    }
+  }, [posthog]);
+
+  return null;
+}
diff --git a/.../haqq-website/utils/posthog-page-view.tsx → ...-website/components/posthog-page-view.tsx b/.../haqq-website/utils/posthog-page-view.tsx → ...-website/components/posthog-page-view.tsx
diff --git a/apps/islamic-website/app/[locale]/layout.tsx b/apps/islamic-website/app/[locale]/layout.tsx
@@ -54,7 +54,9 @@ async function getMessages(locale: string) {
 
 const PostHogPageView = dynamic(
   async () => {
-    const { PostHogPageView } = await import('../../utils/posthog-page-view');
+    const { PostHogPageView } = await import(
+      '../../components/posthog-page-view'
+    );
     return { default: PostHogPageView };
   },
   {
@@ -65,6 +67,18 @@ const PostHogPageView = dynamic(
   },
 );
 
+const IdentifyWalletUsers = dynamic(
+  async () => {
+    const { IdentifyWalletUsers } = await import(
+      '../../components/identify-wallet-users'
+    );
+    return { default: IdentifyWalletUsers };
+  },
+  {
+    ssr: false,
+  },
+);
+
 export default async function LocaleLayout({
   children,
   params: { locale },
@@ -108,6 +122,8 @@ export default async function LocaleLayout({
         <PHProvider>
           <body className="bg-islamic-bg-black font-alexandria flex min-h-screen flex-col text-white antialiased">
             <PostHogPageView />
+            <IdentifyWalletUsers />
+
             {isScamBannerShow && <ScamBanner />}
             {isMobileUserAgent ? (
               <MobileHeader

diff --git a/apps/islamic-website/components/header/header.tsx b/apps/islamic-website/components/header/header.tsx
@@ -273,7 +273,11 @@ export function MobileHeader({
                 <div className="leading-[0]">
                   <div className="flex flex-row items-center gap-[12px]">
                     {isBuyButtonVisible && (
-                      <Link href="/markets" className="leading-[0]">
+                      <Link
+                        href="/markets"
+                        className="leading-[0]"
+                        data-attr="buy-islm"
+                      >
                         <Button className="!h-[36px] !px-[16px] !py-[4px] !text-[14px] !leading-[28px]">
                           Buy ISLM
                         </Button>
@@ -507,7 +511,7 @@ export function DesktopHeader({
               </HeaderDropdown>
 
               {isBuyButtonVisible && (
-                <Link href="/markets" className="ml-[8px]">
+                <Link href="/markets" className="ml-[8px]" data-attr="buy-islm">
                   <Button>Buy ISLM</Button>
                 </Link>
               )}

diff --git a/apps/islamic-website/components/identify-wallet-users.tsx b/apps/islamic-website/components/identify-wallet-users.tsx
@@ -0,0 +1,33 @@
+'use client';
+import { useEffect } from 'react';
+import { usePostHog } from 'posthog-js/react';
+import type { WindowProvider } from 'wagmi';
+
+declare global {
+  interface Window {
+    ethereum?: WindowProvider;
+    __HAQQWALLET__?: {
+      POSTHOG_DISTINCT_ID?: string;
+    };
+  }
+}
+
+export function IdentifyWalletUsers() {
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const isHaqqWallet = Boolean(window.ethereum?.isHaqqWallet);
+
+      if (isHaqqWallet) {
+        const distinctId =
+          window.__HAQQWALLET__?.POSTHOG_DISTINCT_ID ??
+          posthog.get_distinct_id();
+
+        posthog.identify(distinctId);
+      }
+    }
+  }, [posthog]);
+
+  return null;
+}
diff --git a/...lamic-website/utils/posthog-page-view.tsx → ...-website/components/posthog-page-view.tsx b/...lamic-website/utils/posthog-page-view.tsx → ...-website/components/posthog-page-view.tsx
diff --git a/apps/shell/src/components/app-wrapper.tsx b/apps/shell/src/components/app-wrapper.tsx
@@ -340,10 +340,8 @@ export function AppWrapper({ children }: PropsWithChildren) {
 
   useEffect(() => {
     if (isHaqqWallet) {
-      const distinctId = posthog.get_distinct_id();
       const walletDistinctId = window.__HAQQWALLET__?.POSTHOG_DISTINCT_ID;
-
-      posthog.identify(walletDistinctId ?? distinctId);
+      posthog.identify(walletDistinctId ?? posthog.get_distinct_id());
     }
   }, [posthog, isHaqqWallet]);
 

diff --git a/libs/haqq-website/wallet-page/src/lib/hero-block/hero-block.tsx b/libs/haqq-website/wallet-page/src/lib/hero-block/hero-block.tsx
@@ -192,6 +192,7 @@ export function HeroBlock() {
                     href={appStoreLink}
                     target="_blank"
                     rel="noopener noreferrer"
+                    data-attr="download-ios"
                   >
                     <WalletDownloadButton type="apple" isAvailable />
                   </Link>
@@ -201,6 +202,7 @@ export function HeroBlock() {
                     href={playMarketLink}
                     target="_blank"
                     rel="noopener noreferrer"
+                    data-attr="download-android"
                   >
                     <WalletDownloadButton type="google" isAvailable />
                   </Link>
@@ -212,6 +214,7 @@ export function HeroBlock() {
                   target="_blank"
                   rel="noopener noreferrer"
                   className="inline-block"
+                  data-attr="download-apk"
                   download
                 >
                   <WalletDownloadButton type="apk" isAvailable />
@@ -226,8 +229,8 @@ export function HeroBlock() {
                     href={appStoreLink}
                     target="_blank"
                     rel="noopener noreferrer"
-                    download
                     className="inline-block"
+                    data-attr="download-ios"
                   >
                     <WalletDownloadWithQrButton
                       link={appStoreLink}
@@ -242,8 +245,8 @@ export function HeroBlock() {
                     href={playMarketLink}
                     target="_blank"
                     rel="noopener noreferrer"
-                    download
                     className="inline-block"
+                    data-attr="download-android"
                   >
                     <WalletDownloadWithQrButton
                       link={playMarketLink}
@@ -257,8 +260,9 @@ export function HeroBlock() {
                   href="https://github.com/haqq-network/haqq-wallet/releases/latest/download/haqq.apk"
                   target="_blank"
                   rel="noopener noreferrer"
-                  download
                   className="inline-block"
+                  data-attr="download-apk"
+                  download
                 >
                   <WalletDownloadButton type="apk" isAvailable />
                 </Link>

diff --git a/libs/islamic-website/ui-kit/src/lib/wallet-download-button/wallet-download-button.tsx b/libs/islamic-website/ui-kit/src/lib/wallet-download-button/wallet-download-button.tsx
@@ -15,19 +15,19 @@ export function WalletDownloadButton({
   title?: string;
 }) {
   return (
-    <div
+    <span
       className={clsx(
         'group flex w-fit min-w-[172px] select-none items-center justify-center gap-x-[8px] rounded-xl px-[24px] py-[10px]',
         'cursor-pointer bg-white text-[#2F2F2F]',
         className,
       )}
     >
-      <div className="group-hover:text-islamic-primary-green group-hover:transition-colors group-hover:duration-300">
+      <span className="group-hover:text-islamic-primary-green group-hover:transition-colors group-hover:duration-300">
         {type === 'apple' && <AppStoreLogoIcon />}
         {type === 'google' && <GooglePlayLogoIcon />}
         {type === 'apk' && <AndroidLogoIcon />}
-      </div>
-      <div className="flex flex-col text-start">
+      </span>
+      <span className="flex flex-col text-start">
         <span className="group-hover:text-islamic-primary-green/50 text-[10px] leading-[12px] text-[#8E8E8E] group-hover:transition-colors group-hover:duration-300">
           {title && title}
         </span>
@@ -36,7 +36,7 @@ export function WalletDownloadButton({
           {type === 'google' && 'Google Play'}
           {type === 'apk' && 'Download .apk'}
         </span>
-      </div>
-    </div>
+      </span>
+    </span>
   );
 }
diff --git a/libs/islamic-website/wallet-page/src/lib/wallet-page/wallet-page.tsx b/libs/islamic-website/wallet-page/src/lib/wallet-page/wallet-page.tsx
@@ -38,6 +38,7 @@ export function WalletPage() {
             href="https://apps.apple.com/app/haqq-wallet-by-bored-gen/id6443843352"
             target="_blank"
             rel="noopener noreferrer"
+            data-attr="download-ios"
           >
             <WalletDownloadButton
               type="apple"
@@ -50,6 +51,7 @@ export function WalletPage() {
             href="https://play.google.com/store/apps/details?id=com.haqq.wallet"
             target="_blank"
             rel="noopener noreferrer"
+            data-attr="download-android"
           >
             <WalletDownloadButton
               type="google"
@@ -63,6 +65,7 @@ export function WalletPage() {
             target="_blank"
             rel="noopener noreferrer"
             download
+            data-attr="download-apk"
           >
             <WalletDownloadButton type="apk" />
           </Link>

diff --git a/libs/shell/staking/src/lib/components/delegate-modal-hooked.tsx b/libs/shell/staking/src/lib/components/delegate-modal-hooked.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
+import { usePostHog } from 'posthog-js/react';
 import { useNetwork } from 'wagmi';
 import { getChainParams } from '@haqq/data-access-cosmos';
 import { type EstimatedFeeResponse } from '@haqq/data-access-falconer';
@@ -60,9 +61,12 @@ export function DelegateModalHooked({
   const toast = useToast();
   const cancelPreviousRequest = useRef<(() => void) | null>(null);
   const throttledDelegateAmount = useThrottle(delegateAmount, 300);
+  const posthog = usePostHog();
 
   const handleSubmitDelegate = useCallback(async () => {
     try {
+      posthog.capture('delegate started');
+
       setDelegateEnabled(false);
       const delegationPromise = delegate(
         validatorAddress,
@@ -76,6 +80,7 @@ export function DelegateModalHooked({
         success: (tx) => {
           console.log('Delegation successful', { tx });
           const txHash = tx?.txhash;
+          posthog.capture('delegate success');
 
           return (
             <ToastSuccess>
@@ -97,6 +102,7 @@ export function DelegateModalHooked({
           );
         },
         error: (error) => {
+          posthog.capture('delegate failed');
           return <ToastError>{error.message}</ToastError>;
         },
       });
@@ -111,10 +117,11 @@ export function DelegateModalHooked({
     validatorAddress,
     delegateAmount,
     balance,
+    fee,
     toast,
     onClose,
+    posthog,
     explorer.cosmos,
-    fee,
   ]);
 
   useEffect(() => {

diff --git a/libs/shell/staking/src/lib/components/redelegate-modal-hooked.tsx b/libs/shell/staking/src/lib/components/redelegate-modal-hooked.tsx
@@ -2,6 +2,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Validator } from '@evmos/provider';
 import Link from 'next/link';
+import { usePostHog } from 'posthog-js/react';
 import { useNetwork } from 'wagmi';
 import { getChainParams } from '@haqq/data-access-cosmos';
 import { type EstimatedFeeResponse } from '@haqq/data-access-falconer';
@@ -60,10 +61,12 @@ export function RedelegateModalHooked({
   );
   const cancelPreviousRequest = useRef<(() => void) | null>(null);
   const throttledRedelegateAmount = useThrottle(redelegateAmount, 300);
+  const posthog = usePostHog();
 
   const handleSubmitRedelegate = useCallback(async () => {
     try {
       if (validatorDestinationAddress && validatorAddress) {
+        posthog.capture('redelegate started');
         setRedelegateEnabled(false);
         const redelegationPromise = redelegate(
           validatorAddress,
@@ -78,6 +81,7 @@ export function RedelegateModalHooked({
           success: (tx) => {
             console.log('Redelegation successful', { tx });
             const txHash = tx?.txhash;
+            posthog.capture('redelegate success');
 
             return (
               <ToastSuccess>
@@ -99,6 +103,7 @@ export function RedelegateModalHooked({
             );
           },
           error: (error) => {
+            posthog.capture('redelegate failed');
             return <ToastError>{error.message}</ToastError>;
           },
         });
@@ -112,6 +117,7 @@ export function RedelegateModalHooked({
   }, [
     validatorDestinationAddress,
     validatorAddress,
+    posthog,
     redelegate,
     redelegateAmount,
     balance,