Set instance url tracking on engine (#1866)

* Set instance url tracking on engine

* Better like this

* Also better

* Track other engine connection states

---------

Co-authored-by: Phillip Ho <[email protected]>

Author: nachoiacovino

components/engine/no-authorized-wallet.tsx

@@ -1,14 +1,34 @@
 import { Flex } from "@chakra-ui/react";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useEffect } from "react";
 import { Card, Text } from "tw-components";
 
-export const NoAuthorizedWallet = () => {
+interface EngineNavigationProps {
+  instance: string;
+}
+
+export const NoAuthorizedWallet: React.FC<EngineNavigationProps> = ({
+  instance,
+}) => {
+  const trackEvent = useTrack();
+
+  useEffect(() => {
+    if (instance) {
+      trackEvent({
+        category: "engine",
+        action: "set-engine-instance",
+        label: "no-authorized-wallet",
+        url: instance,
+      });
+    }
+  }, [instance, trackEvent]);
+
   return (
     <Card py={8}>
       <Flex flexDir="column" gap={4}>
         <Text textAlign="center">
-          You do not have permission to view this Engine instance. Please
-          connect from a wallet with permission or ask the admin of the instance
-          to grant you permission.
+          You do not have permission to view this Engine instance. Please sign
+          in with an admin wallet.
         </Text>
       </Flex>
     </Card>

components/engine/no-connected-wallet.tsx

@@ -1,8 +1,29 @@
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import { Flex } from "@chakra-ui/react";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useEffect } from "react";
 import { Card, Text } from "tw-components";
 
-export const NoConnectedWallet = () => {
+interface EngineNavigationProps {
+  instance: string;
+}
+
+export const NoConnectedWallet: React.FC<EngineNavigationProps> = ({
+  instance,
+}) => {
+  const trackEvent = useTrack();
+
+  useEffect(() => {
+    if (instance) {
+      trackEvent({
+        category: "engine",
+        action: "set-engine-instance",
+        label: "no-connected-wallet",
+        url: instance,
+      });
+    }
+  }, [instance, trackEvent]);
+
   return (
     <Card py={8}>
       <Flex flexDir="column" gap={4}>

components/engine/no-server-connection.tsx

@@ -1,13 +1,34 @@
 import { Flex } from "@chakra-ui/react";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useEffect } from "react";
 import { Card, Text } from "tw-components";
 
-export const NoServerConnection = () => {
+interface EngineNavigationProps {
+  instance: string;
+}
+
+export const NoServerConnection: React.FC<EngineNavigationProps> = ({
+  instance,
+}) => {
+  const trackEvent = useTrack();
+
+  useEffect(() => {
+    if (instance) {
+      trackEvent({
+        category: "engine",
+        action: "set-engine-instance",
+        label: "no-server-connection",
+        url: instance,
+      });
+    }
+  }, [instance, trackEvent]);
+
   return (
     <Card py={8}>
       <Flex flexDir="column" gap={4}>
         <Text textAlign="center">
-          We weren&apos;t able to establish a connection with Engine. Please
-          ensure the URL is correct, and the server is running.
+          We weren&apos;t able to establish a connection with your Engine
+          instance. Please confirm the URL is correct and the server is running.
         </Text>
       </Flex>
     </Card>

page-id.ts

@@ -157,8 +157,6 @@ export enum PageId {
   // ---------------------------------------------------------------------------
   //  engine pages
   // ---------------------------------------------------------------------------
-  // thirdweb.com/dashboard/engine
-  Engine = "engine",
 
   // thirdweb.com/dashboard/engine
   EngineManage = "engine-manage",

pages/dashboard/engine/index.tsx

@@ -40,6 +40,7 @@ const EngineManage: ThirdwebNextPage = () => {
             .
           </Text>
         </Flex>
+
         {instanceUrl && (
           <Text>
             Engine URL: <em>{instanceUrl}</em>{" "}
@@ -61,7 +62,7 @@ const EngineManage: ThirdwebNextPage = () => {
         />
 
         {!address ? (
-          <NoConnectedWallet />
+          <NoConnectedWallet instance={instanceUrl} />
         ) : instanceUrl ? (
           enginePermissions.isLoading ? (
             <Center>
@@ -73,11 +74,11 @@ const EngineManage: ThirdwebNextPage = () => {
           ) : enginePermissions.isError &&
             (enginePermissions?.error as { message: string }).message ===
               "401" ? (
-            <NoAuthorizedWallet />
+            <NoAuthorizedWallet instance={instanceUrl} />
           ) : enginePermissions.isError &&
             (enginePermissions?.error as { message: string }).message ===
               "Failed to fetch" ? (
-            <NoServerConnection />
+            <NoServerConnection instance={instanceUrl} />
           ) : (
             <EngineNavigation instance={instanceUrl} />
           )