Dashboard notify user if no Frame account is / can be connected

packages/dashboard/src/components/composed/Sidebar/Bottom/MenuButton/index.tsx

@@ -1,9 +1,14 @@
 import { Menu, Text, useMantineColorScheme, createStyles } from "@mantine/core";
+import { showNotification, hideNotification } from "@mantine/notifications";
 import { useAccount, useConnect, useDisconnect } from "wagmi";
 import { InjectedConnector } from "@wagmi/core";
 import { Slash } from "react-feather";
 import { useDash } from "src/hooks";
 import Button from "src/components/composed/Sidebar/Bottom/MenuButton/Button";
+import {
+  walletConnectionNotifications,
+  walletConnectionNotificationId
+} from "src/utils/notifications";
 
 const useStyles = createStyles((theme, _params, _getRef) => {
   const { colors, colorScheme, fn } = theme;
@@ -33,7 +38,28 @@ function MenuButton(): JSX.Element {
   const { classes } = useStyles();
 
   if (!isConnected) {
-    return <Button onClick={() => void connect()} />;
+    return (
+      <Button
+        onClick={async () => {
+          try {
+            await window.ethereum?.request({ method: "eth_requestAccounts" });
+            hideNotification(walletConnectionNotificationId);
+          } catch (err) {
+            const { message } = (err as any) || {};
+            showNotification(
+              /^No Frame account selected$/i.test(message)
+                ? walletConnectionNotifications["no-frame-account"]()
+                : /^Permission denied, approve .* in Frame to continue$/i.test(
+                    message
+                  )
+                ? walletConnectionNotifications["no-frame-permission"]()
+                : walletConnectionNotifications["general"](message)
+            );
+          }
+          connect();
+        }}
+      />
+    );
   } else {
     return (
       <Menu

packages/dashboard/src/utils/notifications/index.ts

@@ -1,2 +1,3 @@
 export * from "src/utils/notifications/decode";
 export * from "src/utils/notifications/analytics";
+export * from "src/utils/notifications/wallet-connection";

packages/dashboard/src/utils/notifications/wallet-connection.tsx

@@ -0,0 +1,33 @@
+import { Text, Code } from "@mantine/core";
+import type { NotificationProps } from "@mantine/notifications";
+
+export const walletConnectionNotificationId = "wallet-connection";
+
+const baseNotification = {
+  id: walletConnectionNotificationId,
+  autoClose: false,
+  color: "yellow"
+};
+
+export const walletConnectionNotifications = {
+  "no-frame-account": () => ({
+    ...baseNotification,
+    title: "Frame wallet not ready",
+    message: "Connect a Frame account to continue"
+  }),
+  "no-frame-permission": () => ({
+    ...baseNotification,
+    title: "Connection denied",
+    message: (
+      <Text>
+        Allow connection to {window.location.host}, under
+        <Code>DAPPS</Code> in your active Frame account
+      </Text>
+    )
+  }),
+  "general": (message: string) => ({
+    ...baseNotification,
+    title: "Cannot connect to wallet",
+    message
+  })
+} satisfies Record<string, (message: string) => NotificationProps>;