From 3856f0cacc89b9a5574563f86982ab5a1a2117bc Mon Sep 17 00:00:00 2001
From: Neil Dwyer <neildwyer1991@gmail.com>
Date: Thu, 15 Aug 2024 11:30:03 -0700
Subject: [PATCH] Toast on error generating token (#88)

---
 package-lock.json           | 43 ++++++++++++++++++++++++++++---------
 package.json                |  3 ++-
 src/hooks/useConnection.tsx |  9 +++++++-
 src/pages/_app.tsx          |  2 ++
 4 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 22ad9c3..11b495d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,8 @@
         "next": "^14.0.4",
         "qrcode.react": "^3.1.0",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-hot-toast": "^2.4.1"
       },
       "devDependencies": {
         "@types/js-yaml": "^4.0.9",
@@ -1705,12 +1706,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -2007,8 +2008,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -2776,9 +2776,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -3073,6 +3073,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.14",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -4601,6 +4609,21 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 612a7c5..0db5564 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "next": "^14.0.4",
     "qrcode.react": "^3.1.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-hot-toast": "^2.4.1"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
diff --git a/src/hooks/useConnection.tsx b/src/hooks/useConnection.tsx
index 2addebc..0ed145f 100644
--- a/src/hooks/useConnection.tsx
+++ b/src/hooks/useConnection.tsx
@@ -4,6 +4,7 @@ import { useCloud } from "@/cloud/useCloud";
 import React, { createContext, useState } from "react";
 import { useCallback } from "react";
 import { useConfig } from "./useConfig";
+import toast from "react-hot-toast";
 
 export type ConnectionMode = "cloud" | "manual" | "env"
 
@@ -36,7 +37,13 @@ export const ConnectionProvider = ({
     let token = "";
     let url = "";
     if (mode === "cloud") {
-      token = await generateToken();
+      try {
+        token = await generateToken();
+      } catch (error) {
+        toast.error(
+          "Failed to generate token, you may need to increase your role in this LiveKit Cloud project."
+        );
+      }
       url = cloudWSUrl;
     } else if (mode === "env") {
       if(!process.env.NEXT_PUBLIC_LIVEKIT_URL) {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 7c501ee..c68396e 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,10 +1,12 @@
 import { CloudProvider } from "@/cloud/useCloud";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
+import { Toaster } from "react-hot-toast";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <CloudProvider>
+      <Toaster />
       <Component {...pageProps} />
     </CloudProvider>
   );}