feat: Add BTC signet support (#297)

Author: hernan-clich

examples/hello/frontend/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@zetachain/toolkit": "16.1.4",
+    "@zetachain/toolkit": "16.2.0",
     "@zetachain/wallet": "1.0.13",
     "clsx": "^2.1.1",
     "ethers": "^6.13.2",

examples/hello/frontend/src/App.tsx

@@ -3,21 +3,26 @@ import { UniversalSignInContextProvider } from '@zetachain/wallet/react';
 import { AppContent } from './AppContent';
 import { Header } from './components/Header';
 import { USE_DYNAMIC_WALLET } from './constants/wallets';
+import { UnisatWalletProvider } from './context/UnisatWalletProvider';
 import { useTheme } from './hooks/useTheme';
 
 function App() {
   const { theme } = useTheme();
 
-  return USE_DYNAMIC_WALLET ? (
-    <UniversalSignInContextProvider environment="sandbox" theme={theme}>
-      <Header />
-      <AppContent />
-    </UniversalSignInContextProvider>
-  ) : (
-    <>
-      <Header />
-      <AppContent />
-    </>
+  return (
+    <UnisatWalletProvider>
+      {USE_DYNAMIC_WALLET ? (
+        <UniversalSignInContextProvider environment="sandbox" theme={theme}>
+          <Header />
+          <AppContent />
+        </UniversalSignInContextProvider>
+      ) : (
+        <>
+          <Header />
+          <AppContent />
+        </>
+      )}
+    </UnisatWalletProvider>
   );
 }
 

examples/hello/frontend/src/ConnectedContent.tsx

@@ -18,6 +18,7 @@ interface ConnectedContentProps {
   supportedChain: SupportedChain | undefined;
   primaryWallet?: PrimaryWallet | null;
   account?: string | null;
+  onChainSelect?: (chain: SupportedChain) => void;
 }
 
 const DynamicConnectedContent = ({
@@ -85,11 +86,15 @@ const Eip6963ConnectedContent = ({
   selectedProvider,
   supportedChain,
   account,
+  onChainSelect,
 }: ConnectedContentProps) => {
   const { switchChain } = useSwitchChain();
 
   const handleNetworkSelect = (chain: SupportedChain) => {
-    switchChain(chain.chainId);
+    onChainSelect?.(chain);
+    if (chain.chainType === 'EVM') {
+      switchChain(chain.chainId);
+    }
   };
 
   return (
@@ -126,6 +131,7 @@ export function ConnectedContent({
   supportedChain,
   primaryWallet,
   account,
+  onChainSelect,
 }: ConnectedContentProps) {
   return USE_DYNAMIC_WALLET ? (
     <DynamicConnectedContent
@@ -138,6 +144,7 @@ export function ConnectedContent({
       selectedProvider={selectedProvider}
       supportedChain={supportedChain}
       account={account}
+      onChainSelect={onChainSelect}
     />
   );
 }

examples/hello/frontend/src/Eip6963AppContent.tsx

@@ -1,15 +1,30 @@
+import { useEffect, useState } from 'react';
+
 import { ConnectedContent } from './ConnectedContent';
-import { SUPPORTED_CHAINS } from './constants/chains';
+import { SUPPORTED_CHAINS, type SupportedChain } from './constants/chains';
 import { DisconnectedContent } from './DisconnectedContent';
 import { useEip6963Wallet } from './hooks/useEip6963Wallet';
 
 export function Eip6963AppContent() {
   const { selectedProvider, decimalChainId, account } = useEip6963Wallet();
 
-  const supportedChain = SUPPORTED_CHAINS.find(
+  // Find the EVM chain from wallet
+  const evmChain = SUPPORTED_CHAINS.find(
     (chain) => chain.chainId === decimalChainId
   );
 
+  // Track selected chain separately to support non-EVM chains (SOL, BTC)
+  const [selectedChain, setSelectedChain] = useState<
+    SupportedChain | undefined
+  >(evmChain);
+
+  // Sync with EVM wallet changes (when user switches chains in MetaMask, etc.)
+  useEffect(() => {
+    if (evmChain && evmChain.chainType === 'EVM') {
+      setSelectedChain(evmChain);
+    }
+  }, [evmChain]);
+
   const isDisconnected = !selectedProvider;
 
   if (isDisconnected) {
@@ -19,7 +34,8 @@ export function Eip6963AppContent() {
   return (
     <ConnectedContent
       selectedProvider={selectedProvider}
-      supportedChain={supportedChain}
+      supportedChain={selectedChain}
+      onChainSelect={setSelectedChain}
       account={account}
     />
   );

examples/hello/frontend/src/components/NetworkSelector.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import { SUPPORTED_CHAINS, type SupportedChain } from '../constants/chains';
 import { USE_DYNAMIC_WALLET } from '../constants/wallets';
+import { useUnisatWallet } from '../context/UnisatWalletProvider';
 import { Dropdown, type DropdownOption } from './Dropdown';
 
 interface NetworkSelectorProps {
@@ -19,12 +20,19 @@ export const NetworkSelector = ({
   disabled = false,
   className = '',
 }: NetworkSelectorProps) => {
+  const { connect: connectUnisatWallet, switchChain: switchUnisatChain } =
+    useUnisatWallet();
+
   // Convert chains to dropdown options
   const options: DropdownOption<SupportedChain>[] = useMemo(
     () =>
-      SUPPORTED_CHAINS.filter(
-        (chain) => USE_DYNAMIC_WALLET || chain.chainType === 'EVM'
-      ).map((chain) => ({
+      SUPPORTED_CHAINS.filter((chain) => {
+        if (USE_DYNAMIC_WALLET) {
+          return chain.chainType === 'EVM' || chain.chainType === 'SOL';
+        } else {
+          return chain.chainType === 'EVM' || chain.chainType === 'BTC';
+        }
+      }).map((chain) => ({
         id: chain.chainId,
         label: chain.name,
         value: chain,
@@ -45,7 +53,17 @@ export const NetworkSelector = ({
     [selectedChain, options]
   );
 
-  const handleSelect = (option: DropdownOption<SupportedChain>) => {
+  const handleSelect = async (option: DropdownOption<SupportedChain>) => {
+    if (option.value.chainType === 'BTC') {
+      try {
+        await connectUnisatWallet();
+        await switchUnisatChain('BITCOIN_SIGNET');
+      } catch (error) {
+        console.error('Failed to connect/switch Unisat wallet:', error);
+        return; // Don't update selection if connection failed
+      }
+    }
+
     onNetworkSelect?.(option.value);
   };
 

examples/hello/frontend/src/constants/chains.ts

@@ -2,7 +2,7 @@ export interface SupportedChain {
   explorerUrl: (txHash: string) => string;
   name: string;
   chainId: number;
-  chainType: 'EVM' | 'SOL';
+  chainType: 'EVM' | 'SOL' | 'BTC';
   icon: string;
   colorHex: string;
 }
@@ -69,8 +69,20 @@ export const SUPPORTED_CHAINS: SupportedChain[] = [
     icon: '/logos/solana-logo.svg',
     colorHex: '#9945FF',
   },
+  {
+    explorerUrl: (txHash: string) =>
+      `https://mempool.space/signet/tx/${txHash}`,
+    name: 'Bitcoin Signet',
+    chainId: 18333,
+    chainType: 'BTC',
+    icon: '/logos/bitcoin-logo.svg',
+    colorHex: '#F7931A',
+  },
 ];
 
+export const BITCOIN_GATEWAY_ADDRESS_SIGNET =
+  'tb1qy9pqmk2pd9sv63g27jt8r657wy0d9ueeh0nqur';
+
 export const SUPPORTED_CHAIN_IDS = SUPPORTED_CHAINS.map(
   (chain) => chain.chainId
 );