diff --git a/examples/hello/frontend/package.json b/examples/hello/frontend/package.json index 0ccc7468..0974580d 100644 --- a/examples/hello/frontend/package.json +++ b/examples/hello/frontend/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@zetachain/toolkit": "16.0.1", + "@zetachain/wallet": "1.0.12", "clsx": "^2.1.1", "ethers": "^6.13.2", "react": "^19.1.0", @@ -32,5 +33,9 @@ "typescript": "~5.8.3", "typescript-eslint": "^8.35.1", "vite": "^7.0.4" + }, + "resolutions": { + "@noble/hashes": "1.8.0", + "@noble/curves": "1.9.7" } } diff --git a/examples/hello/frontend/src/App.tsx b/examples/hello/frontend/src/App.tsx index 678929b6..a154812e 100644 --- a/examples/hello/frontend/src/App.tsx +++ b/examples/hello/frontend/src/App.tsx @@ -1,13 +1,23 @@ +import { UniversalSignInContextProvider } from '@zetachain/wallet/react'; + import { AppContent } from './AppContent'; import { Header } from './components/Header'; -import { ThemeProvider } from './context/ThemeProvider'; +import { USE_DYNAMIC_WALLET } from './constants/wallets'; +import { useTheme } from './hooks/useTheme'; function App() { - return ( - + const { theme } = useTheme(); + + return USE_DYNAMIC_WALLET ? ( + +
+ + + ) : ( + <>
- + ); } diff --git a/examples/hello/frontend/src/AppContent.tsx b/examples/hello/frontend/src/AppContent.tsx index 2cb33dba..00b101b7 100644 --- a/examples/hello/frontend/src/AppContent.tsx +++ b/examples/hello/frontend/src/AppContent.tsx @@ -1,23 +1,7 @@ -import { ConnectedContent } from './ConnectedContent'; -import { SUPPORTED_CHAINS } from './constants/chains'; -import { DisconnectedContent } from './DisconnectedContent'; -import { useWallet } from './hooks/useWallet'; +import { USE_DYNAMIC_WALLET } from './constants/wallets'; +import { DynamicAppContent } from './DynamicAppContent'; +import { Eip6963AppContent } from './Eip6963AppContent'; export function AppContent() { - const { account, selectedProvider, decimalChainId } = useWallet(); - - const supportedChain = SUPPORTED_CHAINS.find( - (chain) => chain.chainId === decimalChainId - ); - - if (!account || !selectedProvider) { - return ; - } - - return ( - - ); + return USE_DYNAMIC_WALLET ? : ; } diff --git a/examples/hello/frontend/src/ConnectedContent.css b/examples/hello/frontend/src/ConnectedContent.css index 50cae796..e45f5c2c 100644 --- a/examples/hello/frontend/src/ConnectedContent.css +++ b/examples/hello/frontend/src/ConnectedContent.css @@ -42,32 +42,6 @@ } } -.call-input { - background-color: rgba(var(--primary-color-rgb), 0.8); - font-size: 1.25rem; - height: 100%; - padding: 0.785rem; - width: 100%; -} - -.call-button { - font-size: 1rem; - padding: 1rem; - transition: all 0.2s ease-in-out; - white-space: nowrap; - width: 100%; - - &:disabled { - background-color: rgba(126, 126, 126, 0.5); - cursor: not-allowed; - opacity: 0.7; - } -} - -.input-counter { - font-size: 1.5rem; -} - [data-theme='light'] .content-container-inner-description { color: #696e75; @@ -103,22 +77,4 @@ .content-container-inner-description { font-size: 18px; } - - .input-container-inner { - align-items: center; - display: flex; - flex-direction: row; - justify-content: space-between; - } - - .call-input { - font-size: 1.75rem; - padding: 0.785rem; - } - - .call-button { - font-size: 1.5rem; - padding: 1rem 2rem; - width: max-content; - } } diff --git a/examples/hello/frontend/src/ConnectedContent.tsx b/examples/hello/frontend/src/ConnectedContent.tsx index c14d5cec..a6772493 100644 --- a/examples/hello/frontend/src/ConnectedContent.tsx +++ b/examples/hello/frontend/src/ConnectedContent.tsx @@ -1,21 +1,67 @@ import './ConnectedContent.css'; +import { type PrimaryWallet } from '@zetachain/wallet'; + import { NetworkSelector } from './components/NetworkSelector'; import type { SupportedChain } from './constants/chains'; +import { USE_DYNAMIC_WALLET } from './constants/wallets'; import { Footer } from './Footer'; +import { useDynamicSwitchChainHook } from './hooks/useDynamicSwitchChainHook'; import { useSwitchChain } from './hooks/useSwitchChain'; import { MessageFlowCard } from './MessageFlowCard'; import type { EIP6963ProviderDetail } from './types/wallet'; interface ConnectedContentProps { - selectedProvider: EIP6963ProviderDetail; + selectedProvider: EIP6963ProviderDetail | null; supportedChain: SupportedChain | undefined; + primaryWallet?: PrimaryWallet | null; // Dynamic wallet from context } -export function ConnectedContent({ +const DynamicConnectedContent = ({ selectedProvider, supportedChain, -}: ConnectedContentProps) { + primaryWallet, +}: ConnectedContentProps) => { + const { switchChain } = useDynamicSwitchChainHook(); + + const handleNetworkSelect = (chain: SupportedChain) => { + switchChain(chain.chainId); + }; + + return ( +
+
+
+
+

Say Hello from

+ +
+

+ Make a cross-chain call with a message from{' '} + {supportedChain?.name || 'a supported network'} to a universal + contract on ZetaChain that emits a{' '} + HelloEvent. +

+
+ +
+
+
+ ); +}; + +const Eip6963ConnectedContent = ({ + selectedProvider, + supportedChain, + primaryWallet, +}: ConnectedContentProps) => { const { switchChain } = useSwitchChain(); const handleNetworkSelect = (chain: SupportedChain) => { @@ -43,9 +89,30 @@ export function ConnectedContent({