Add consent toast to www

apps/www/lib/constants.ts

@@ -35,7 +35,6 @@ export const SITE_URL =
     : 'http://localhost:3000/launch-week'
 export const SITE_ORIGIN = new URL(SITE_URL).origin
 export const TWITTER_USER_NAME = 'supabase'
-export const COOKIE = 'supa-launch-week-ticke-user-id'
 export const DATE = 'April 10th 2023'
 export const TWEET_TEXT =
   "It's almost #SupaLaunchWeek 7! Generate your unique ticket here 👇 you can win a mechanical keyboard 🤩"

apps/www/pages/_app.tsx

@@ -1,23 +1,24 @@
-import '../../../packages/ui/build/css/themes/light.css'
-import '../../../packages/ui/build/css/themes/dark.css'
-
-import '../styles/index.css'
+import { useEffect } from 'react'
+import { AppProps } from 'next/app'
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+import { DefaultSeo } from 'next-seo'
 
 import { API_URL, APP_NAME, DEFAULT_META_DESCRIPTION } from 'lib/constants'
-import { DefaultSeo } from 'next-seo'
-import { AppProps } from 'next/app'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
 import Meta from '~/components/Favicons'
-import '../styles/index.css'
 import { post } from '~/lib/fetchWrapper'
-import { AuthProvider, ThemeProvider, useTelemetryProps } from 'common'
-import Head from 'next/head'
+import PortalToast from 'ui/src/layout/PortalToast'
+import { AuthProvider, ThemeProvider, useConsent, useTelemetryProps } from 'common'
+
+import '../../../packages/ui/build/css/themes/light.css'
+import '../../../packages/ui/build/css/themes/dark.css'
+import '../styles/index.css'
 import 'config/code-hike.scss'
 
-export default function MyApp({ Component, pageProps }: AppProps) {
+export default function App({ Component, pageProps }: AppProps) {
   const router = useRouter()
   const telemetryProps = useTelemetryProps()
+  const { consentValue, hasAcceptedConsent } = useConsent()
 
   function handlePageTelemetry(route: string) {
     return post(`${API_URL}/telemetry/page`, {
@@ -32,6 +33,8 @@ export default function MyApp({ Component, pageProps }: AppProps) {
   }
 
   useEffect(() => {
+    if (!hasAcceptedConsent) return
+
     function handleRouteChange(url: string) {
       handlePageTelemetry(url)
     }
@@ -41,16 +44,17 @@ export default function MyApp({ Component, pageProps }: AppProps) {
     return () => {
       router.events.off('routeChangeComplete', handleRouteChange)
     }
-  }, [router.events])
+  }, [router.events, consentValue])
 
   useEffect(() => {
+    if (!hasAcceptedConsent) return
     /**
      * Send page telemetry on first page load
      */
     if (router.isReady) {
       handlePageTelemetry(router.asPath)
     }
-  }, [router.isReady])
+  }, [router.isReady, consentValue])
 
   const site_title = `${APP_NAME} | The Open Source Firebase Alternative`
   const { basePath } = useRouter()
@@ -85,6 +89,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
       />
       <AuthProvider>
         <ThemeProvider detectSystemColorPreference={false}>
+          <PortalToast />
           <Component {...pageProps} />
         </ThemeProvider>
       </AuthProvider>

apps/www/public/planetpg-egor_romanov-rss.xml

@@ -0,0 +1,19 @@
+
+  <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+    <channel>
+      <title>'Postgres | Supabase Blog</title>
+      <link>https://supabase.com/blog</link>
+      <description>Latest Postgres news from Egor Romanov at Supabase</description>
+      <language>en</language>
+      <lastBuildDate>Wed, 12 Jul 2023 22:00:00 GMT</lastBuildDate>
+      <atom:link href="https://supabase.com/planetpg-egor_romanov-rss.xml" rel="self" type="application/rss+xml"/>
+      <item>
+  <guid>https://supabase.com/blog/pgvector-performance</guid>
+  <title>pgvector 0.4.0 performance</title>
+  <link>https://supabase.com/blog/pgvector-performance</link>
+  <description>There&apos;s been lot of talk about pgvector performance lately, so we took some datasets and pushed pgvector to the limits to find out its strengths and limitations.</description>
+  <pubDate>Wed, 12 Jul 2023 22:00:00 GMT</pubDate>
+</item>
+
+    </channel>
+  </rss>

apps/www/public/planetpg-pavel-rss.xml

@@ -5,9 +5,16 @@
       <link>https://supabase.com/blog</link>
       <description>Latest Postgres news from Pavel Borisov at Supabase</description>
       <language>en</language>
-      <lastBuildDate>Thu, 15 Dec 2022 23:00:00 GMT</lastBuildDate>
+      <lastBuildDate>Wed, 12 Jul 2023 22:00:00 GMT</lastBuildDate>
       <atom:link href="https://supabase.com/planetpg-pavel-rss.xml" rel="self" type="application/rss+xml"/>
       <item>
+  <guid>https://supabase.com/blog/pgvector-performance</guid>
+  <title>pgvector 0.4.0 performance</title>
+  <link>https://supabase.com/blog/pgvector-performance</link>
+  <description>There&apos;s been lot of talk about pgvector performance lately, so we took some datasets and pushed pgvector to the limits to find out its strengths and limitations.</description>
+  <pubDate>Wed, 12 Jul 2023 22:00:00 GMT</pubDate>
+</item>
+<item>
   <guid>https://supabase.com/blog/new-in-postgres-15</guid>
   <title>What&apos;s new in Postgres 15?</title>
   <link>https://supabase.com/blog/new-in-postgres-15</link>

apps/www/public/rss.xml

@@ -5,9 +5,16 @@
       <link>https://supabase.com</link>
       <description>Latest news from Supabase</description>
       <language>en</language>
-      <lastBuildDate>Tue, 11 Jul 2023 22:00:00 GMT</lastBuildDate>
+      <lastBuildDate>Wed, 12 Jul 2023 22:00:00 GMT</lastBuildDate>
       <atom:link href="https://supabase.com/rss.xml" rel="self" type="application/rss+xml"/>
       <item>
+  <guid>https://supabase.com/blog/pgvector-performance</guid>
+  <title>pgvector 0.4.0 performance</title>
+  <link>https://supabase.com/blog/pgvector-performance</link>
+  <description>There&apos;s been lot of talk about pgvector performance lately, so we took some datasets and pushed pgvector to the limits to find out its strengths and limitations.</description>
+  <pubDate>Wed, 12 Jul 2023 22:00:00 GMT</pubDate>
+</item>
+<item>
   <guid>https://supabase.com/blog/postgrest-11-1-release</guid>
   <title>What is new in PostgREST v11.1?</title>
   <link>https://supabase.com/blog/postgrest-11-1-release</link>

package-lock.json

@@ -4362,6 +4362,36 @@
         "@mdx-js/react": "*"
       }
     },
+    "node_modules/@next/swc-android-arm-eabi": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.2.tgz",
+      "integrity": "sha512-r2rrz+DZ8YYGqzVrbRrpP6GKzwozpOrnFbErc4k36vUTSFMag9yQahZfaBe06JYdqu/e5yhm/saIDEaSVPRP4g==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-android-arm64": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.3.2.tgz",
+      "integrity": "sha512-B+TINJhCf+CrY1+b3/JWQlkecv53rAGa/gA7gi5B1cnBa/2Uvoe+Ue0JeCefTjfiyl1ScsyNx+NcESY8Ye2Ngg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@next/swc-darwin-arm64": {
       "version": "12.3.2",
       "cpu": [
@@ -4376,6 +4406,156 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.2.tgz",
+      "integrity": "sha512-1HkjmS9awwlaeEY8Y01nRSNkSv3y+qnC/mjMPe/W66hEh3QKa/LQHqHeS7NOdEs19B2mhZ7w+EgMRXdLQ0Su8w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-freebsd-x64": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.2.tgz",
+      "integrity": "sha512-h5Mx0BKDCJ5Vu/U8e07esF6PjPv1EJgmRbYWTUZMAflu13MQpCJkKEJir7+BeRfTXRfgFf+llc7uocrpd7mcrg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm-gnueabihf": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.2.tgz",
+      "integrity": "sha512-EuRZAamoxfe/WoWRaC0zsCAoE4gs/mEhilcloNM4J5Mnb3PLY8PZV394W7t5tjBjItMCF7l2Ebwjwtm46tq2RA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.2.tgz",
+      "integrity": "sha512-T9GCFyOIb4S3acA9LqflUYD+QZ94iZketHCqKdoO0Nx0OCHIgGJV5rotDe8TDXwh/goYpIfyHU4j1qqw4w4VnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.2.tgz",
+      "integrity": "sha512-hxNVZS6L3c2z3l9EH2GP0MGQ9exu6O8cohYNZyqC9WUl6C03sEn8xzDH1y+NgD3fVurvYkGU5F0PDddJJLfDIw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.2.tgz",
+      "integrity": "sha512-fCPkLuwDwY8/QeXxciJJjDHG09liZym/Bhb4A+RLFQ877wUkwFsNWDUTSdUx0YXlYK/1gf67BKauqKkOKp6CYw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.2.tgz",
+      "integrity": "sha512-o+GifBIQ2K+/MEFxHsxUZoU3bsuVFLXZYWd3idimFHiVdDCVYiKsY6mYMmKDlucX+9xRyOCkKL9Tjf+3tuXJpw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.2.tgz",
+      "integrity": "sha512-crii66irzGGMSUR0L8r9+A06eTv7FTXqw4rgzJ33M79EwQJOdpY7RVKXLQMurUhniEeQEEOfamiEdPIi/qxisw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.2.tgz",
+      "integrity": "sha512-5hRUSvn3MdQ4nVRu1rmKxq5YJzpTtZfaC/NyGw6wa4NSF1noUn/pdQGUr+I5Qz3CZkd1gZzzC0eaXQHlrk0E2g==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.2.tgz",
+      "integrity": "sha512-tpQJYUH+TzPMIsdVl9fH8uDg47iwiNjKY+8e9da3dXqlkztKzjSw0OwSADoqh3KrifplXeKSta+BBGLdBqg3sg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "license": "MIT",
@@ -42261,186 +42441,6 @@
       "engines": {
         "node": ">=14.17"
       }
-    },
-    "node_modules/@next/swc-android-arm-eabi": {
-      "version": "12.3.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.2.tgz",
-      "integrity": "sha512-r2rrz+DZ8YYGqzVrbRrpP6GKzwozpOrnFbErc4k36vUTSFMag9yQahZfaBe06JYdqu/e5yhm/saIDEaSVPRP4g==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-android-arm64": {
-      "version": "12.3.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.3.2.tgz",
-      "integrity": "sha512-B+TINJhCf+CrY1+b3/JWQlkecv53rAGa/gA7gi5B1cnBa/2Uvoe+Ue0JeCefTjfiyl1ScsyNx+NcESY8Ye2Ngg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "12.3.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.2.tgz",
-      "integrity": "sha512-1HkjmS9awwlaeEY8Y01nRSNkSv3y+qnC/mjMPe/W66hEh3QKa/LQHqHeS7NOdEs19B2mhZ7w+EgMRXdLQ0Su8w==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-freebsd-x64": {
-      "version": "12.3.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.2.tgz",
-      "integrity": "sha512-h5Mx0BKDCJ5Vu/U8e07esF6PjPv1EJgmRbYWTUZMAflu13MQpCJkKEJir7+BeRfTXRfgFf+llc7uocrpd7mcrg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm-gnueabihf": {
-      "version": "12.3.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.2.tgz",
-      "integrity": "sha512-EuRZAamoxfe/WoWRaC0zsCAoE4gs/mEhilcloNM4J5Mnb3PLY8PZV394W7t5tjBjItMCF7l2Ebwjwtm46tq2RA==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "12.3.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.2.tgz",
-      "integrity": "sha512-T9GCFyOIb4S3acA9LqflUYD+QZ94iZketHCqKdoO0Nx0OCHIgGJV5rotDe8TDXwh/goYpIfyHU4j1qqw4w4VnA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "12.3.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.2.tgz",
-      "integrity": "sha512-hxNVZS6L3c2z3l9EH2GP0MGQ9exu6O8cohYNZyqC9WUl6C03sEn8xzDH1y+NgD3fVurvYkGU5F0PDddJJLfDIw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "12.3.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.2.tgz",
-      "integrity": "sha512-fCPkLuwDwY8/QeXxciJJjDHG09liZym/Bhb4A+RLFQ877wUkwFsNWDUTSdUx0YXlYK/1gf67BKauqKkOKp6CYw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "12.3.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.2.tgz",
-      "integrity": "sha512-o+GifBIQ2K+/MEFxHsxUZoU3bsuVFLXZYWd3idimFHiVdDCVYiKsY6mYMmKDlucX+9xRyOCkKL9Tjf+3tuXJpw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "12.3.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.2.tgz",
-      "integrity": "sha512-crii66irzGGMSUR0L8r9+A06eTv7FTXqw4rgzJ33M79EwQJOdpY7RVKXLQMurUhniEeQEEOfamiEdPIi/qxisw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "12.3.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.2.tgz",
-      "integrity": "sha512-5hRUSvn3MdQ4nVRu1rmKxq5YJzpTtZfaC/NyGw6wa4NSF1noUn/pdQGUr+I5Qz3CZkd1gZzzC0eaXQHlrk0E2g==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "12.3.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.2.tgz",
-      "integrity": "sha512-tpQJYUH+TzPMIsdVl9fH8uDg47iwiNjKY+8e9da3dXqlkztKzjSw0OwSADoqh3KrifplXeKSta+BBGLdBqg3sg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }

packages/common/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useBreakpoint'
+export * from './useConsent'
 export * from './useParams'
 export * from './useTelemetryProps'

packages/common/hooks/useConsent.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useRef, useState } from 'react'
+import { toast } from 'react-hot-toast'
+import ConsentToast from 'ui/src/components/ConsentToast'
+
+// Use with PortalToast from 'ui/src/layout/PortalToast'
+export const useConsent = () => {
+  const consentToastId = useRef<string>()
+  const isClient = typeof window !== 'undefined'
+  if (!isClient) return {}
+  const TELEMETRY_CONSENT = 'supabase-consent'
+  const [consentValue, setConsentValue] = useState<string | null>(
+    localStorage?.getItem(TELEMETRY_CONSENT)
+  )
+
+  const handleConsent = (value: 'true' | 'false') => {
+    if (!isClient) return
+    setConsentValue(value)
+    localStorage.setItem(TELEMETRY_CONSENT, value)
+
+    if (consentToastId.current) toast.dismiss(consentToastId.current)
+  }
+
+  useEffect(() => {
+    if (isClient && consentValue === null) {
+      consentToastId.current = toast(
+        <ConsentToast
+          onAccept={() => handleConsent('true')}
+          onOptOut={() => handleConsent('false')}
+        />,
+        {
+          id: 'consent-toast',
+          position: 'bottom-right',
+          duration: Infinity,
+        }
+      )
+    }
+  }, [consentValue])
+
+  return { consentValue, setConsentValue, hasAcceptedConsent: consentValue === 'true' }
+}

packages/ui/index.tsx

@@ -36,9 +36,11 @@ export * from './src/components/Menu'
 export * from './src/components/Modal'
 export * from './src/components/SidePanel'
 export * from './src/components/Dropdown'
+export * from './src/components/ConsentToast'
 export * from './src/components/ContextMenu'
 export * from './src/components/Popover'
 export * from './src/components/ExpandableVideo'
+export * from './src/layout/PortalToast'
 
 // UTILITIES
 

packages/ui/src/components/ConsentToast/ConsentToast.tsx

@@ -0,0 +1,39 @@
+import { noop } from 'lodash'
+import Link from 'next/link'
+import { Button } from 'ui'
+import { useRouter } from 'next/router'
+
+interface ConsentToastProps {
+  onAccept: () => void
+  onOptOut: () => void
+}
+
+const ConsentToast = ({ onAccept = noop, onOptOut = noop }: ConsentToastProps) => {
+  const { basePath } = useRouter()
+
+  return (
+    <div className="space-y-3">
+      <div className="text-sm">
+        <p>
+          This site <span className="underline font-medium">does not</span> use cookies 🍪
+        </p>
+        <p>We use friendly server side analytics to measure and improve your experience</p>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Button type="default" onClick={onAccept}>
+          Accept
+        </Button>
+        <Button type="text" onClick={onOptOut}>
+          Opt out
+        </Button>
+        <Link href={`${basePath}/privacy`}>
+          <a target="_blank" rel="noreferrer">
+            <Button type="text">Learn more</Button>
+          </a>
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default ConsentToast

packages/ui/src/components/ConsentToast/index.ts

@@ -0,0 +1,3 @@
+import ConsentToast from './ConsentToast'
+
+export default ConsentToast

packages/ui/src/layout/PortalToast/PortalToast.tsx

@@ -0,0 +1,71 @@
+import dynamic from 'next/dynamic'
+import { Toaster, ToastBar, toast } from 'react-hot-toast'
+import { Button, IconX } from 'ui'
+
+const PortalRootWithNoSSR = dynamic(
+  // @ts-ignore
+  () => import('@radix-ui/react-portal').then((portal) => portal.Root),
+  { ssr: false }
+)
+
+const PortalToast = () => (
+  // @ts-ignore
+  <PortalRootWithNoSSR className="portal--toast" id="toast">
+    <Toaster
+      position="top-right"
+      toastOptions={{
+        className: '!bg-scale-300 !text-scale-1200 border dark:border-dark !max-w-[600px]',
+        style: {
+          padding: '10px',
+          fontSize: '0.875rem',
+        },
+        error: {
+          duration: 8000,
+        },
+      }}
+    >
+      {(t) => (
+        <ToastBar toast={t} style={t.style}>
+          {({ icon, message }) => {
+            const isConsentToast = t.id === 'consent-toast'
+            return (
+              <>
+                {icon}
+                <div className="flex items-center">
+                  <div
+                    className={`toast-message w-full ${
+                      t.type === 'loading'
+                        ? 'max-w-[380px]'
+                        : isConsentToast
+                        ? 'max-w-[800px]'
+                        : 'max-w-[260px]'
+                    }`}
+                  >
+                    {message}
+                  </div>
+                  {t.type !== 'loading' && !isConsentToast && (
+                    <div className="ml-4">
+                      <Button
+                        className="!p-1"
+                        type="text"
+                        onClick={(event) => {
+                          event.preventDefault()
+                          event.stopPropagation()
+                          toast.dismiss(t.id)
+                        }}
+                      >
+                        <IconX size={14} strokeWidth={2} />
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </>
+            )
+          }}
+        </ToastBar>
+      )}
+    </Toaster>
+  </PortalRootWithNoSSR>
+)
+
+export default PortalToast

packages/ui/src/layout/PortalToast/index.tsx

@@ -0,0 +1,3 @@
+import PortalToast from './PortalToast'
+
+export default PortalToast