💰 Confidential Balance
@@ -279,16 +301,18 @@ export const ERC7984Demo = () => {
- {erc7984.canDecrypt
- ? "🔓 Decrypt Balance"
- : erc7984.isDecrypted
- ? `✅ Decrypted: ${erc7984.clear}`
- : erc7984.isDecrypting
- ? "⏳ Decrypting..."
- : "❌ Nothing to decrypt"}
+ {isSmartWallet
+ ? "🚫 Decrypt unavailable (Smart Wallet)"
+ : erc7984.canDecrypt
+ ? "🔓 Decrypt Balance"
+ : erc7984.isDecrypted
+ ? `✅ Decrypted: ${erc7984.clear}`
+ : erc7984.isDecrypting
+ ? "⏳ Decrypting..."
+ : "❌ Nothing to decrypt"}
diff --git a/packages/erc7984example/app/layout.tsx b/packages/erc7984example/app/layout.tsx
index 3191aa5..3b8cd5b 100644
--- a/packages/erc7984example/app/layout.tsx
+++ b/packages/erc7984example/app/layout.tsx
@@ -1,5 +1,4 @@
import Script from "next/script";
-import "@rainbow-me/rainbowkit/styles.css";
import { DappWrapperWithProviders } from "~~/components/DappWrapperWithProviders";
import { ThemeProvider } from "~~/components/ThemeProvider";
import "~~/styles/globals.css";
@@ -13,11 +12,9 @@ export const metadata = getMetadata({
const DappWrapper = ({ children }: { children: React.ReactNode }) => {
return (
-
-
-
+
-
+
{children}
diff --git a/packages/erc7984example/app/providers.tsx b/packages/erc7984example/app/providers.tsx
new file mode 100644
index 0000000..fe18b30
--- /dev/null
+++ b/packages/erc7984example/app/providers.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { PrivyProvider } from "@privy-io/react-auth";
+import { WagmiProvider as PrivyWagmiProvider, createConfig } from "@privy-io/wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { sepolia } from "viem/chains";
+import { createConfig as createWagmiConfig, http } from "wagmi";
+import { WagmiProvider as StandardWagmiProvider } from "wagmi";
+import scaffoldConfig from "~~/scaffold.config";
+
+type Props = {
+ children: ReactNode;
+};
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ refetchOnWindowFocus: false,
+ },
+ },
+});
+
+// Get Privy App ID from environment
+const PRIVY_APP_ID = process.env.NEXT_PUBLIC_PRIVY_APP_ID ?? "";
+
+if (!PRIVY_APP_ID && typeof window !== "undefined") {
+ console.warn("NEXT_PUBLIC_PRIVY_APP_ID is not set. Wallet connection will not work.");
+}
+
+const { alchemyApiKey } = scaffoldConfig;
+
+// Use Sepolia as the primary chain (Privy doesn't work well with local hardhat)
+const activeChain = sepolia;
+
+// Build RPC URL
+const rpcUrl = alchemyApiKey
+ ? `https://eth-sepolia.g.alchemy.com/v2/${alchemyApiKey}`
+ : "https://ethereum-sepolia-rpc.publicnode.com";
+
+// Create Wagmi config using Privy's createConfig (for when Privy is configured)
+export const wagmiConfig = createConfig({
+ chains: [activeChain] as const,
+ transports: {
+ [activeChain.id]: http(rpcUrl),
+ } as Record
>,
+});
+
+// Create standard Wagmi config (for fallback when Privy is not configured)
+const standardWagmiConfig = createWagmiConfig({
+ chains: [activeChain],
+ transports: {
+ [activeChain.id]: http(rpcUrl),
+ },
+});
+
+export function Providers({ children }: Props) {
+ if (!PRIVY_APP_ID) {
+ // Fallback for when Privy is not configured - use standard wagmi provider
+ return (
+
+ {children}
+
+ );
+ }
+
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/packages/erc7984example/components/DappWrapperWithProviders.tsx b/packages/erc7984example/components/DappWrapperWithProviders.tsx
index 1c4b817..d88c96f 100644
--- a/packages/erc7984example/components/DappWrapperWithProviders.tsx
+++ b/packages/erc7984example/components/DappWrapperWithProviders.tsx
@@ -1,51 +1,22 @@
"use client";
-import { useEffect, useState } from "react";
-import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { InMemoryStorageProvider } from "fhevm-sdk";
import { AppProgressBar as ProgressBar } from "next-nprogress-bar";
-import { useTheme } from "next-themes";
import { Toaster } from "react-hot-toast";
-import { WagmiProvider } from "wagmi";
+import { Providers } from "~~/app/providers";
import { Header } from "~~/components/Header";
-import { BlockieAvatar } from "~~/components/helper";
-import { wagmiConfig } from "~~/services/web3/wagmiConfig";
-
-export const queryClient = new QueryClient({
- defaultOptions: {
- queries: {
- refetchOnWindowFocus: false,
- },
- },
-});
export const DappWrapperWithProviders = ({ children }: { children: React.ReactNode }) => {
- const { resolvedTheme } = useTheme();
- const isDarkMode = resolvedTheme === "dark";
- const [mounted, setMounted] = useState(false);
-
- useEffect(() => {
- setMounted(true);
- }, []);
-
return (
-
-
-
-
-
-
- {children}
-
-
-
-
-
+
+
+
+
+ {children}
+
+
+
);
};
diff --git a/packages/erc7984example/components/Header.tsx b/packages/erc7984example/components/Header.tsx
index b67d5d5..de981c8 100644
--- a/packages/erc7984example/components/Header.tsx
+++ b/packages/erc7984example/components/Header.tsx
@@ -3,7 +3,7 @@
import React, { useRef } from "react";
import Image from "next/image";
import Link from "next/link";
-import { RainbowKitCustomConnectButton } from "~~/components/helper";
+import { PrivyConnectButton } from "~~/components/helper/PrivyConnectButton";
import { useOutsideClick } from "~~/hooks/helper";
/**
@@ -33,7 +33,7 @@ export const Header = () => {
{/* Connect Button */}
);
diff --git a/packages/erc7984example/components/helper/BlockieAvatar.tsx b/packages/erc7984example/components/helper/BlockieAvatar.tsx
index 46f47b5..1ea5dc0 100644
--- a/packages/erc7984example/components/helper/BlockieAvatar.tsx
+++ b/packages/erc7984example/components/helper/BlockieAvatar.tsx
@@ -1,10 +1,15 @@
"use client";
-import { AvatarComponent } from "@rainbow-me/rainbowkit";
import { blo } from "blo";
-// Custom Avatar for RainbowKit
-export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) => (
+type BlockieAvatarProps = {
+ address: string;
+ ensImage?: string | null;
+ size: number;
+};
+
+// Custom Avatar component
+export const BlockieAvatar = ({ address, ensImage, size }: BlockieAvatarProps) => (
// Don't want to use nextJS Image here (and adding remote patterns for the URL)
// eslint-disable-next-line @next/next/no-img-element