Merge branch 'main' into webauthn

apps/playground/src/components/cardano/connect-browser-wallet.tsx

@@ -1,10 +1,13 @@
-import { CardanoWallet, useWalletList } from "@meshsdk/react";
+import { useEffect, useRef } from "react";
+
+import { CardanoWallet, useWallet, useWalletList } from "@meshsdk/react";
 
 import { getProvider } from "./mesh-wallet";
 
 export default function ConnectBrowserWallet() {
   const wallets = useWalletList();
   const hasAvailableWallets = wallets.length > 0;
+
   return (
     <>
       {hasAvailableWallets ? (

apps/playground/src/components/site/navbar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import {
   Bars4Icon,
@@ -7,6 +7,9 @@ import {
   SunIcon,
   XMarkIcon,
 } from "@heroicons/react/24/solid";
+import toast from "react-hot-toast";
+
+import { useWallet } from "@meshsdk/react";
 
 import Icon from "~/components/icon";
 import Link from "~/components/link";
@@ -29,6 +32,16 @@ export default function Navbar() {
 
   const [query, setQuery] = useState<string>("");
 
+  const { connected } = useWallet();
+  const connectedRef = useRef(false);
+
+  useEffect(() => {
+    if (connected && !connectedRef.current) {
+      connectedRef.current = true;
+      toast("Wallet connected");
+    }
+  }, [connected]);
+
   useEffect(() => {
     setIsSSR(false);
   }, []);

apps/playground/src/pages/apis/wallets/browserwallet/connect-wallet.tsx

@@ -1,4 +1,3 @@
-import { BrowserWallet } from "@meshsdk/core";
 import { useWallet } from "@meshsdk/react";
 
 import ConnectBrowserWallet from "~/components/cardano/connect-browser-wallet";