feat: embedded wallet

package.json

@@ -29,6 +29,7 @@
     "@aztec/entrypoints": "v4.0.0-devnet.1-patch.0",
     "@aztec/foundation": "v4.0.0-devnet.1-patch.0",
     "@aztec/noir-contracts.js": "v4.0.0-devnet.1-patch.0",
+    "@aztec/protocol-contracts": "v4.0.0-devnet.1-patch.0",
     "@aztec/pxe": "v4.0.0-devnet.1-patch.0",
     "@aztec/stdlib": "v4.0.0-devnet.1-patch.0",
     "@aztec/wallet-sdk": "v4.0.0-devnet.1-patch.0",

src/App.tsx

@@ -8,15 +8,18 @@ import { SwapContainer } from './components/swap';
 import { useWallet } from './contexts/wallet';
 import { useOnboarding } from './contexts/onboarding';
 import { OnboardingModal } from './components/OnboardingModal';
+import { TxNotificationCenter } from './components/TxNotificationCenter';
 import type { AztecAddress } from '@aztec/aztec.js/addresses';
 
 export function App() {
-  const { disconnectWallet, setCurrentAddress, isUsingEmbeddedWallet, currentAddress, error: walletError, isLoading: walletLoading } = useWallet();
-  const { isOnboardingModalOpen, startOnboarding, resetOnboarding } = useOnboarding();
+  const { disconnectWallet, setCurrentAddress, currentAddress, error: walletError, isLoading: walletLoading } = useWallet();
+  const { isOnboardingModalOpen, startOnboarding, resetOnboarding, status: onboardingStatus } = useOnboarding();
+
+  const isOnboarded = onboardingStatus === 'completed';
 
   const handleWalletClick = () => {
-    // If already connected, start a new onboarding flow to change wallet
-    if (!isUsingEmbeddedWallet && currentAddress) {
+    // If already onboarded, start a new onboarding flow to change wallet
+    if (isOnboarded && currentAddress) {
       resetOnboarding();
     }
     startOnboarding(); // Start onboarding when clicked from wallet chip
@@ -60,7 +63,7 @@ export function App() {
         {/* Wallet Connection Chip */}
         <WalletChip
           address={currentAddress?.toString() || null}
-          isConnected={!isUsingEmbeddedWallet && currentAddress !== null}
+          isConnected={isOnboarded && currentAddress !== null}
           onClick={handleWalletClick}
           onDisconnect={handleDisconnect}
         />
@@ -131,6 +134,9 @@ export function App() {
           setCurrentAddress(address);
         }}
       />
+
+      {/* Transaction Progress Toasts (embedded wallet only) */}
+      <TxNotificationCenter account={currentAddress?.toString()} />
     </ThemeProvider>
   );
 }

src/components/NetworkSwitcher.tsx

@@ -17,8 +17,10 @@ import { useOnboarding } from '../contexts/onboarding';
 
 export function NetworkSwitcher() {
   const { activeNetwork, availableNetworks, switchNetwork } = useNetwork();
-  const { isUsingEmbeddedWallet, disconnectWallet } = useWallet();
-  const { resetOnboarding } = useOnboarding();
+  const { disconnectWallet } = useWallet();
+  const { resetOnboarding, status: onboardingStatus } = useOnboarding();
+
+  const isOnboarded = onboardingStatus === 'completed';
 
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [pendingNetwork, setPendingNetwork] = useState<string | null>(null);
@@ -27,12 +29,12 @@ export function NetworkSwitcher() {
     const networkId = event.target.value;
     if (networkId === activeNetwork.id) return;
 
-    // If wallet is connected, show confirmation dialog
-    if (!isUsingEmbeddedWallet) {
+    // If user has completed onboarding (external or embedded), show confirmation dialog
+    if (isOnboarded) {
       setPendingNetwork(networkId);
       setConfirmOpen(true);
     } else {
-      // Embedded wallet, switch immediately
+      // Not yet onboarded, switch immediately
       switchNetwork(networkId);
     }
   };

src/components/OnboardingModal.tsx

@@ -49,6 +49,8 @@ export function OnboardingModal({ open, onAccountSelect }: OnboardingModalProps)
     dismissDripError,
     setSimulationGrant,
     hasSimulationGrant,
+    selectEmbeddedWallet,
+    useEmbeddedWallet,
   } = useOnboarding();
   const { discoverWallets, initiateConnection, confirmConnection, cancelConnection, onWalletDisconnect } = useWallet();
   const { activeNetwork } = useNetwork();
@@ -107,7 +109,8 @@ export function OnboardingModal({ open, onAccountSelect }: OnboardingModalProps)
         setDiscoveredWallets(prev => [...prev, wallet]);
       }
       if (!foundAny) {
-        setAccountsError('No wallets found. Make sure your wallet extension is installed.');
+        // No external wallets found — still show wallet selection phase so the embedded option is visible
+        setConnectionPhase('selecting_wallet');
       }
     })();
 
@@ -140,7 +143,8 @@ export function OnboardingModal({ open, onAccountSelect }: OnboardingModalProps)
     }
 
     if (!foundAny) {
-      setAccountsError('No wallets found. Make sure your wallet extension is installed.');
+      // No external wallets found — still show wallet selection phase so the embedded option is visible
+      setConnectionPhase('selecting_wallet');
     }
   };
 
@@ -244,7 +248,7 @@ export function OnboardingModal({ open, onAccountSelect }: OnboardingModalProps)
 
   // Computed display states
   const showWalletSelection =
-    status === 'connecting' && connectionPhase === 'selecting_wallet' && discoveredWallets.length > 0;
+    status === 'connecting' && connectionPhase === 'selecting_wallet';
   const showEmojiVerification = status === 'connecting' && connectionPhase === 'verifying' && pendingConnection !== null;
   const showAccountSelection = status === 'connecting' && connectionPhase === 'selecting_account' && accounts.length > 0;
   const showCompletionTransition = status === 'completed';
@@ -321,8 +325,8 @@ export function OnboardingModal({ open, onAccountSelect }: OnboardingModalProps)
             {/* Wallet Connection Flow */}
             <Collapse in={status === 'connecting'} timeout={400}>
               <Box sx={{ pl: 5, pr: 2, pb: 2 }}>
-                {isLoadingAccounts && connectionPhase === 'discovering' ? (
-                  <WalletDiscovery />
+                {connectionPhase === 'discovering' ? (
+                  <WalletDiscovery onUseEmbedded={selectEmbeddedWallet} />
                 ) : isLoadingAccounts && connectionPhase === 'connecting' && selectedWallet ? (
                   <ConnectingWallet wallet={selectedWallet} />
                 ) : showWalletSelection ? (
@@ -331,6 +335,7 @@ export function OnboardingModal({ open, onAccountSelect }: OnboardingModalProps)
                     cancelledWalletIds={cancelledWalletIds}
                     onSelect={handleWalletSelect}
                     onRefresh={handleRediscover}
+                    onUseEmbedded={selectEmbeddedWallet}
                   />
                 ) : showEmojiVerification && selectedWallet && pendingConnection ? (
                   <EmojiVerification
@@ -346,7 +351,7 @@ export function OnboardingModal({ open, onAccountSelect }: OnboardingModalProps)
             </Collapse>
 
             {/* Flow-specific Messages */}
-            <FlowMessages status={status} hasSimulationGrant={hasSimulationGrant} />
+            <FlowMessages status={status} hasSimulationGrant={hasSimulationGrant} useEmbeddedWallet={useEmbeddedWallet} />
 
             {/* Drip Password Input (shown when balance is 0) */}
             <Collapse in={status === 'awaiting_drip'} timeout={400}>