From dec5bdf1416f667e4860640672df39f0c28a9ec9 Mon Sep 17 00:00:00 2001
From: Eamon Ma <m@eamonma.com>
Date: Mon, 20 Jun 2022 13:29:18 -0400
Subject: [PATCH] Add heap again

---
 pages/_app.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index ca6006a..3dd4cf6 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,16 +1,14 @@
 import { Box, chakra, Heading } from "@chakra-ui/react"
 import Link from "next/link"
 import Image from "next/image"
-import {
-  AnimatePresence,
-  motion,
-} from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
 import { appWithTranslation } from "next-i18next"
 import type { AppProps } from "next/app"
 import React from "react"
 import "../styles/globals.css"
 import SqrlLogo from "../public/sqrl-logo.png"
 import { useRouter } from "next/router"
+import Script from "next/script"
 
 const headingVariants = {
   root: {
@@ -26,6 +24,10 @@ function Application({ Component, pageProps }: AppProps) {
 
   return (
     <React.Fragment>
+      <Script id="heap">
+        {`window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
+        heap.load("${process.env.NEXT_PUBLIC_HEAP_ID}");`}
+      </Script>
       <AnimatePresence exitBeforeEnter>
         <Box
           key="sqrl-logo-container"
@@ -58,7 +60,7 @@ function Application({ Component, pageProps }: AppProps) {
                 w={48}
                 h={48}
               >
-                <Image src={SqrlLogo} layout="fill" objectFit="contain" />
+                <Image alt="logo" src={SqrlLogo} layout="fill" objectFit="contain" />
               </Box>
               <Heading
                 as={motion.h1}