feat: Integrate dynamic wallet on Hello frontend example

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"
   }
 }

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 (
-    <ThemeProvider>
+  const { theme } = useTheme();
+
+  return USE_DYNAMIC_WALLET ? (
+    <UniversalSignInContextProvider environment="sandbox" theme={theme}>
+      <Header />
+      <AppContent />
+    </UniversalSignInContextProvider>
+  ) : (
+    <>
       <Header />
       <AppContent />
-    </ThemeProvider>
+    </>
   );
 }
 

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 <DisconnectedContent />;
-  }
-
-  return (
-    <ConnectedContent
-      selectedProvider={selectedProvider}
-      supportedChain={supportedChain}
-    />
-  );
+  return USE_DYNAMIC_WALLET ? <DynamicAppContent /> : <Eip6963AppContent />;
 }

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;
-  }
 }

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 (
+    <div className="main-container">
+      <div className="content-container">
+        <div className="content-container-inner">
+          <div className="content-container-inner-header">
+            <h1>Say Hello from</h1>
+            <NetworkSelector
+              selectedChain={supportedChain}
+              onNetworkSelect={handleNetworkSelect}
+            />
+          </div>
+          <p className="content-container-inner-description">
+            Make a cross-chain call with a message from{' '}
+            {supportedChain?.name || 'a supported network'} to a universal
+            contract on ZetaChain that emits a{' '}
+            <span className="highlight">HelloEvent</span>.
+          </p>
+        </div>
+        <MessageFlowCard
+          selectedProvider={selectedProvider}
+          supportedChain={supportedChain}
+          primaryWallet={primaryWallet}
+        />
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+const Eip6963ConnectedContent = ({
+  selectedProvider,
+  supportedChain,
+  primaryWallet,
+}: ConnectedContentProps) => {
   const { switchChain } = useSwitchChain();
 
   const handleNetworkSelect = (chain: SupportedChain) => {
@@ -43,9 +89,30 @@ export function ConnectedContent({
         <MessageFlowCard
           selectedProvider={selectedProvider}
           supportedChain={supportedChain}
+          primaryWallet={primaryWallet}
         />
       </div>
       <Footer />
     </div>
   );
+};
+
+export function ConnectedContent({
+  selectedProvider,
+  supportedChain,
+  primaryWallet,
+}: ConnectedContentProps) {
+  return USE_DYNAMIC_WALLET ? (
+    <DynamicConnectedContent
+      selectedProvider={selectedProvider}
+      supportedChain={supportedChain}
+      primaryWallet={primaryWallet}
+    />
+  ) : (
+    <Eip6963ConnectedContent
+      selectedProvider={selectedProvider}
+      supportedChain={supportedChain}
+      primaryWallet={primaryWallet}
+    />
+  );
 }

examples/hello/frontend/src/DisconnectedContent.tsx

@@ -1,8 +1,10 @@
 import './DisconnectedContent.css';
 
-import { ConnectWallet } from './components/ConnectWallet';
+import { ConnectDynamicWallet } from './components/ConnectDynamicWallet';
+import { ConnectEip6963Wallet } from './components/ConnectEip6963Wallet';
 import { IconAnimation } from './components/icons/IconAnimation';
 import { IconZetaChainLogo } from './components/icons/IconZetaChainLogo';
+import { USE_DYNAMIC_WALLET } from './constants/wallets';
 import { Footer } from './Footer';
 
 export function DisconnectedContent() {
@@ -21,7 +23,11 @@ export function DisconnectedContent() {
             Connect your EVM wallet and trigger the Universal Hello contract on
             ZetaChain testnet from any currently supported EVM chain.
           </p>
-          <ConnectWallet />
+          {USE_DYNAMIC_WALLET ? (
+            <ConnectDynamicWallet />
+          ) : (
+            <ConnectEip6963Wallet />
+          )}
         </div>
         <div className="hero-content-animation">
           <IconAnimation />

examples/hello/frontend/src/DynamicAppContent.tsx

@@ -0,0 +1,30 @@
+import { useUniversalSignInContext } from '@zetachain/wallet/react';
+
+import { ConnectedContent } from './ConnectedContent';
+import { SUPPORTED_CHAINS } from './constants/chains';
+import { DisconnectedContent } from './DisconnectedContent';
+
+export function DynamicAppContent() {
+  const { primaryWallet, network } = useUniversalSignInContext();
+
+  const account = primaryWallet?.address || null;
+  const decimalChainId = network || null;
+
+  const supportedChain = SUPPORTED_CHAINS.find(
+    (chain) => chain.chainId === decimalChainId
+  );
+
+  const isDisconnected = !account;
+
+  if (isDisconnected) {
+    return <DisconnectedContent />;
+  }
+
+  return (
+    <ConnectedContent
+      selectedProvider={null}
+      supportedChain={supportedChain}
+      primaryWallet={primaryWallet}
+    />
+  );
+}

examples/hello/frontend/src/Eip6963AppContent.tsx

@@ -0,0 +1,25 @@
+import { ConnectedContent } from './ConnectedContent';
+import { SUPPORTED_CHAINS } from './constants/chains';
+import { DisconnectedContent } from './DisconnectedContent';
+import { useEip6963Wallet } from './hooks/useEip6963Wallet';
+
+export function Eip6963AppContent() {
+  const { selectedProvider, decimalChainId } = useEip6963Wallet();
+
+  const supportedChain = SUPPORTED_CHAINS.find(
+    (chain) => chain.chainId === decimalChainId
+  );
+
+  const isDisconnected = !selectedProvider;
+
+  if (isDisconnected) {
+    return <DisconnectedContent />;
+  }
+
+  return (
+    <ConnectedContent
+      selectedProvider={selectedProvider}
+      supportedChain={supportedChain}
+    />
+  );
+}

examples/hello/frontend/src/MessageFlowCard.tsx

@@ -1,25 +1,31 @@
 import './MessageFlowCard.css';
 
 import { evmCall } from '@zetachain/toolkit/chains/evm';
-import { ethers, ZeroAddress } from 'ethers';
+import { type PrimaryWallet } from '@zetachain/wallet';
+import { ZeroAddress } from 'ethers';
 import { useEffect, useRef, useState } from 'react';
 
 import { Button } from './components/Button';
 import { IconApprove, IconEnvelope, IconSendTitle } from './components/icons';
 import { ConfirmedContent } from './ConfirmedContent';
 import type { SupportedChain } from './constants/chains';
+import { HELLO_UNIVERSAL_CONTRACT_ADDRESS } from './constants/contracts';
 import type { EIP6963ProviderDetail } from './types/wallet';
+import { getSignerAndProvider } from './utils/ethersHelpers';
 import { formatNumberWithLocale } from './utils/formatNumber';
 
 interface MessageFlowCardProps {
-  selectedProvider: EIP6963ProviderDetail;
+  selectedProvider: EIP6963ProviderDetail | null;
   supportedChain: SupportedChain | undefined;
+  primaryWallet?: PrimaryWallet | null; // Dynamic wallet from context
 }
 
 export function MessageFlowCard({
   selectedProvider,
   supportedChain,
+  primaryWallet = null,
 }: MessageFlowCardProps) {
+
   const MAX_STRING_LENGTH = 2000;
   const [isUserSigningTx, setIsUserSigningTx] = useState(false);
   const [isTxReceiptLoading, setIsTxReceiptLoading] = useState(false);
@@ -33,17 +39,19 @@ export function MessageFlowCard({
 
   const handleEvmCall = async () => {
     try {
-      const ethersProvider = new ethers.BrowserProvider(
-        selectedProvider.provider
-      );
-      const signer =
-        (await ethersProvider.getSigner()) as ethers.AbstractSigner;
+      const signerAndProvider = await getSignerAndProvider({
+        selectedProvider,
+        primaryWallet,
+      });
+
+      if (!signerAndProvider) {
+        throw new Error('Failed to get signer');
+      }
 
-      const helloUniversalContractAddress =
-        '0x61a184EB30D29eD0395d1ADF38CC7d2F966c4A82';
+      const { signer } = signerAndProvider;
 
       const evmCallParams = {
-        receiver: helloUniversalContractAddress,
+        receiver: HELLO_UNIVERSAL_CONTRACT_ADDRESS,
         types: ['string'],
         values: [stringValue],
         revertOptions: {