Merge remote-tracking branch 'origin/develop'

near · Jul 13, 2023 · f4b4f3d · f4b4f3d · vercel · Jul 13, 2023
2 parents 1165c63 + 0562226
commit f4b4f3d
Show file tree

Hide file tree

Showing 20 changed files with 135 additions and 55 deletions.
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+User-agent: *
+Sitemap: https://beta.near.org/sitemap.xml
+Sitemap: https://near.org/sitemap.xml
diff --git a/src/components/navigation/desktop/DesktopNavigation.tsx b/src/components/navigation/desktop/DesktopNavigation.tsx
@@ -9,7 +9,7 @@ import { useBosComponents } from '@/hooks/useBosComponents';
 import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import { useAuthStore } from '@/stores/auth';
 import { recordEvent } from '@/utils/analytics';
-import { flushEvents, recordClick } from '@/utils/analytics';
+import { flushEvents } from '@/utils/analytics';
 
 import LogoBlack from '../icons/logo-black.svg';
 import NearLogotype from '../icons/near-logotype.svg';
@@ -150,18 +150,13 @@ export const DesktopNavigation = () => {
     };
   }, []);
 
-  async function clearAnalytics(event: React.UIEvent) {
-    recordClick(event);
-    await flushEvents();
-  }
-
-  function handleSignIn(event: React.UIEvent) {
-    clearAnalytics(event);
+  function handleSignIn() {
+    flushEvents();
     requestAuthentication();
   }
 
-  function handleCreateAccount(event: React.UIEvent) {
-    clearAnalytics(event);
+  function handleCreateAccount() {
+    flushEvents();
     requestAuthentication(true);
   }
 

diff --git a/src/components/navigation/mobile/AccordionMenu.tsx b/src/components/navigation/mobile/AccordionMenu.tsx
@@ -6,8 +6,6 @@ import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { recordTouchStart } from '@/utils/analytics';
-
 import { CurrentComponent } from '../CurrentComponent';
 import { navLinkData } from '../org-links';
 
@@ -143,12 +141,11 @@ const Wrapper = styled.div`
 
 const AccordionTrigger = forwardRef<HTMLButtonElement, ComponentProps<typeof Accordion.Trigger>>(
   ({ children, className, ...props }, forwardedRef) => (
-    <Accordion.Header className="AccordionHeader" onTouchStart={recordTouchStart}>
+    <Accordion.Header className="AccordionHeader">
       <Accordion.Trigger
         className={classNames('AccordionTrigger', className)}
         {...props}
         ref={forwardedRef}
-        onTouchStart={recordTouchStart}
       >
         {children}
         <i className="ph ph-caret-down AccordionChevron" aria-hidden></i>
@@ -179,7 +176,7 @@ const ListItem = forwardRef<
 >(({ className, children, title, ...props }, forwardedRef) => {
   if (props.route) {
     return (
-      <li onTouchStart={(e) => recordTouchStart(e)}>
+      <li>
         <Link className={classNames('ListItemLink', className)} ref={forwardedRef} href={props.route}>
           <div className="ListItemHeading">{title}</div>
           <p className="ListItemText">{children}</p>
@@ -188,7 +185,7 @@ const ListItem = forwardRef<
     );
   } else {
     return (
-      <li onTouchStart={(e) => recordTouchStart(e)}>
+      <li>
         <a
           className={classNames('ListItemLink', className)}
           {...props}

diff --git a/src/components/navigation/mobile/MenuLeft.tsx b/src/components/navigation/mobile/MenuLeft.tsx
@@ -1,6 +1,5 @@
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import type { UIEvent } from 'react';
 import { useRef } from 'react';
 import { useEffect } from 'react';
 import React from 'react';
@@ -10,7 +9,7 @@ import { Button } from '@/components/lib/Button';
 import { useBosComponents } from '@/hooks/useBosComponents';
 import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import { useAuthStore } from '@/stores/auth';
-import { flushEvents, recordClick } from '@/utils/analytics';
+import { flushEvents } from '@/utils/analytics';
 
 import { UserDropdownMenu } from '../desktop/UserDropdownMenu';
 import NearLogotype from '../icons/near-logotype.svg';
@@ -136,19 +135,14 @@ export function MenuLeft(props: Props) {
   const previousPath = useRef('');
   const { requestAuthentication } = useSignInRedirect();
 
-  async function clearAnalytics(event: UIEvent) {
-    recordClick(event);
-    await flushEvents();
-  }
-
-  function handleSignIn(event: UIEvent) {
-    clearAnalytics(event);
+  function handleSignIn() {
+    flushEvents();
     props.onCloseMenu();
     requestAuthentication();
   }
 
-  function handleCreateAccount(event: UIEvent) {
-    clearAnalytics(event);
+  function handleCreateAccount() {
+    flushEvents();
     props.onCloseMenu();
     requestAuthentication(true);
   }

diff --git a/src/components/navigation/mobile/TopNavigation.tsx b/src/components/navigation/mobile/TopNavigation.tsx
@@ -10,7 +10,6 @@ import { VmComponent } from '@/components/vm/VmComponent';
 import { useBosComponents } from '@/hooks/useBosComponents';
 import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import { useAuthStore } from '@/stores/auth';
-import { recordClick } from '@/utils/analytics';
 
 import LogoBlack from '../icons/logo-black.svg';
 import NearLogotype from '../icons/near-logotype.svg';
@@ -131,8 +130,7 @@ export function TopNavigation(props: Props) {
   const accountId = useAuthStore((store) => store.accountId);
   const { requestAuthentication } = useSignInRedirect();
 
-  function handleCreateAccount(event: React.UIEvent) {
-    recordClick(event);
+  function handleCreateAccount() {
     requestAuthentication(true);
   }
 

diff --git a/src/components/near-org/ComponentWrapperPage.tsx b/src/components/near-org/ComponentWrapperPage.tsx
@@ -2,7 +2,6 @@ import { useEffect } from 'react';
 
 import { VmComponent } from '@/components/vm/VmComponent';
 import { useCurrentComponentStore } from '@/stores/current-component';
-import { recordClick } from '@/utils/analytics';
 
 import { MetaTags } from '../MetaTags';
 
@@ -29,7 +28,6 @@ export function ComponentWrapperPage(props: Props) {
         style={{
           paddingTop: 'var(--body-top-padding)',
         }}
-        onPointerUp={recordClick}
       >
         <VmComponent src={props.src} props={props.componentProps} />
       </div>

diff --git a/src/components/near-org/NearOrg.Ecosystem.CommunityPage.jsx b/src/components/near-org/NearOrg.Ecosystem.CommunityPage.jsx
@@ -3,7 +3,6 @@
 import styled from 'styled-components';
 
 import { VmComponent } from '@/components/vm/VmComponent';
-import { recordClick } from '@/utils/analytics';
 import { useBosComponents } from '@/hooks/useBosComponents';
 
 export function NearOrgEcosystemCommunityPage() {
@@ -246,7 +245,7 @@ export function NearOrgEcosystemCommunityPage() {
 
   return (
     <>
-      <Wrapper className="container-xl" onPointerUp={recordClick}>
+      <Wrapper className="container-xl">
         <Section>
           <Flex gap="16px" direction="column" alignItems="start">
             <H1>Community</H1>

diff --git a/src/components/near-org/NearOrg.Ecosystem.GetFundingPage.jsx b/src/components/near-org/NearOrg.Ecosystem.GetFundingPage.jsx
@@ -3,7 +3,6 @@
 import styled from 'styled-components';
 
 import { VmComponent } from '@/components/vm/VmComponent';
-import { recordClick } from '@/utils/analytics';
 import { useBosComponents } from '@/hooks/useBosComponents';
 
 export function NearOrgEcosystemGetFundingPage() {
@@ -322,7 +321,7 @@ export function NearOrgEcosystemGetFundingPage() {
 
   return (
     <>
-      <Wrapper className="container-xl" onPointerUp={recordClick}>
+      <Wrapper className="container-xl">
         <Section center>
           <Flex gap="16px" direction="column" alignItems="center">
             <H1>Get Funded. Build the Future.</H1>

diff --git a/src/components/near-org/NearOrg.Ecosystem.OverviewPage.jsx b/src/components/near-org/NearOrg.Ecosystem.OverviewPage.jsx
@@ -3,7 +3,6 @@
 import styled from 'styled-components';
 
 import { VmComponent } from '@/components/vm/VmComponent';
-import { recordClick } from '@/utils/analytics';
 import { useBosComponents } from '@/hooks/useBosComponents';
 
 export function NearOrgEcosystemOverviewPage() {
@@ -429,7 +428,7 @@ export function NearOrgEcosystemOverviewPage() {
 
   return (
     <>
-      <Wrapper className="container-xl" onPointerUp={recordClick}>
+      <Wrapper className="container-xl">
         <Section center style={{ position: 'relative' }}>
           <Flex gap="16px" direction="column" alignItems="center">
             <H1>Building the Open Web together</H1>

diff --git a/src/components/near-org/NearOrg.Ecosystem.WorkAndEarnPage.jsx b/src/components/near-org/NearOrg.Ecosystem.WorkAndEarnPage.jsx
@@ -3,7 +3,6 @@
 import styled from 'styled-components';
 
 import { VmComponent } from '@/components/vm/VmComponent';
-import { recordClick } from '@/utils/analytics';
 import { useBosComponents } from '@/hooks/useBosComponents';
 
 export function NearOrgEcosystemWorkAndEarnPage() {
@@ -120,7 +119,7 @@ export function NearOrgEcosystemWorkAndEarnPage() {
 
   return (
     <>
-      <Wrapper className="container-xl" onPointerUp={recordClick}>
+      <Wrapper className="container-xl">
         <Section>
           <Flex gap="16px" direction="column" alignItems="start">
             <H1>Work & Earn</H1>

diff --git a/src/components/near-org/NearOrg.HomePage.jsx b/src/components/near-org/NearOrg.HomePage.jsx
@@ -3,9 +3,8 @@
 import styled from 'styled-components';
 
 import { VmComponent } from '@/components/vm/VmComponent';
-import { useAuthStore } from '@/stores/auth';
-import { recordClick } from '@/utils/analytics';
 import { useBosComponents } from '@/hooks/useBosComponents';
+import { useAuthStore } from '@/stores/auth';
 
 export function NearOrgHomePage() {
   const signedIn = useAuthStore((store) => store.signedIn);
@@ -85,7 +84,7 @@ export function NearOrgHomePage() {
   };
 
   return (
-    <Wrapper onPointerUp={recordClick}>
+    <Wrapper>
       <Container center>
         <Flex gap="32px" direction="column" alignItems="center">
           <H1>

diff --git a/src/components/near-org/NearOrg.UsePage.jsx b/src/components/near-org/NearOrg.UsePage.jsx
@@ -3,7 +3,6 @@
 import styled from 'styled-components';
 
 import { VmComponent } from '@/components/vm/VmComponent';
-import { recordClick } from '@/utils/analytics';
 import { useBosComponents } from '@/hooks/useBosComponents';
 
 export function NearOrgUsePage() {
@@ -163,7 +162,7 @@ export function NearOrgUsePage() {
 
   return (
     <>
-      <Wrapper className="container-xl" onPointerUp={recordClick}>
+      <Wrapper className="container-xl">
         <Section center>
           <H1>Your first steps to becoming a Web3 citizen</H1>
         </Section>

diff --git a/src/components/sandbox/Sandbox.js b/src/components/sandbox/Sandbox.js
@@ -8,7 +8,6 @@ import { useBosComponents } from '@/hooks/useBosComponents';
 import { useAuthStore } from '@/stores/auth';
 import { useCurrentComponentStore } from '@/stores/current-component';
 import { useVmStore } from '@/stores/vm';
-import { recordClick } from '@/utils/analytics';
 
 import { Spinner } from '../lib/Spinner';
 import BannerOboarding from './Banners/BannerOboarding';
@@ -505,7 +504,7 @@ export const Sandbox = ({ onboarding = false }) => {
 
   return (
     <MainWrapper>
-      <div onPointerUp={recordClick}>
+      <div>
         <MobileBlocker onboarding={onboarding} />
 
         {onboarding && (

diff --git a/src/hooks/useClickTracking.ts b/src/hooks/useClickTracking.ts
@@ -0,0 +1,24 @@
+import { useCallback, useEffect } from 'react';
+
+import { recordClick, recordTouchStart } from '@/utils/analytics';
+
+export function useClickTracking() {
+  const onClickEvent = useCallback((event: PointerEvent) => {
+    switch (event.pointerType) {
+      case 'touch':
+        recordTouchStart(event);
+        break;
+      default:
+        recordClick(event);
+        break;
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('pointerdown', onClickEvent);
+
+    return () => {
+      window.removeEventListener('pointerdown', onClickEvent);
+    };
+  }, [onClickEvent]);
+}
diff --git a/src/pages/[componentAccountId]/widget/[componentName].tsx b/src/pages/[componentAccountId]/widget/[componentName].tsx
@@ -6,7 +6,6 @@ import { useBosComponents } from '@/hooks/useBosComponents';
 import { useDefaultLayout } from '@/hooks/useLayout';
 import { useAuthStore } from '@/stores/auth';
 import { useCurrentComponentStore } from '@/stores/current-component';
-import { recordClick } from '@/utils/analytics';
 import type { NextPageWithLayout } from '@/utils/types';
 
 const ViewComponentPage: NextPageWithLayout = () => {
@@ -26,7 +25,7 @@ const ViewComponentPage: NextPageWithLayout = () => {
   }, [router.query]);
 
   return (
-    <div className="container-xl" onPointerUp={recordClick}>
+    <div className="container-xl">
       <div className="row">
         <div
           className="d-inline-block position-relative overflow-hidden"

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -14,6 +14,7 @@ import { useEffect } from 'react';
 
 import { Toaster } from '@/components/lib/Toast';
 import { useBosLoaderInitializer } from '@/hooks/useBosLoaderInitializer';
+import { useClickTracking } from '@/hooks/useClickTracking';
 import { useHashUrlBackwardsCompatibility } from '@/hooks/useHashUrlBackwardsCompatibility';
 import { usePageAnalytics } from '@/hooks/usePageAnalytics';
 import { useAuthStore } from '@/stores/auth';
@@ -33,6 +34,7 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
   useBosLoaderInitializer();
   useHashUrlBackwardsCompatibility();
   usePageAnalytics();
+  useClickTracking();
   const getLayout = Component.getLayout ?? ((page) => page);
   const router = useRouter();
   const authStore = useAuthStore();
@@ -77,6 +79,11 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
       <Head>
         <meta name="google-site-verification" content="CDEVFlJTyVZ2vM7ePugKgWsl_7Rd-MrfDv42u0vZ0B0" />
         <link rel="icon" href="favicon.ico" />
+        <link
+          rel="canonical"
+          href={`${process.env.NEXT_PUBLIC_HOSTNAME}/near/widget/NearOrg.HomePage`}
+          key="canonical"
+        />
       </Head>
 
       <Script id="phosphor-icons" src="https://unpkg.com/@phosphor-icons/[email protected]" async />

diff --git a/src/pages/embed/[accountId]/widget/[componentName].tsx b/src/pages/embed/[accountId]/widget/[componentName].tsx
@@ -6,7 +6,6 @@ import { useBosComponents } from '@/hooks/useBosComponents';
 import { useSimpleLayout } from '@/hooks/useLayout';
 import { useAuthStore } from '@/stores/auth';
 import { useCurrentComponentStore } from '@/stores/current-component';
-import { recordClick } from '@/utils/analytics';
 import type { NextPageWithLayout } from '@/utils/types';
 
 const EmbedComponentPage: NextPageWithLayout = () => {
@@ -26,7 +25,7 @@ const EmbedComponentPage: NextPageWithLayout = () => {
   }, [router.query]);
 
   return (
-    <div className="d-inline-block position-relative overflow-hidden" onPointerUp={recordClick}>
+    <div className="d-inline-block position-relative overflow-hidden">
       <VmComponent
         key={components.tosCheck}
         src={components.tosCheck}