feat: add Xverse to Connect Wallet component

src/app/page.tsx

@@ -1,14 +1,43 @@
 "use client";
 
 import { ConnectButton } from "@rainbow-me/rainbowkit";
-import { ConnectBitcoin } from "@/index";
+import {
+  Swap,
+  useEthersSigner,
+  useZetaChainClient,
+  ConnectBitcoin,
+  useBitcoinWallet,
+} from "@/index";
 import { useAccount, useChainId, useWalletClient } from "wagmi";
 
+const contract = "0xb459F14260D1dc6484CE56EB0826be317171e91F"; // universal swap contract
+
 const Page = () => {
+  const account = useAccount();
+  const chainId = useChainId();
+  const { data: walletClient } = useWalletClient({ chainId });
+  const signer = useEthersSigner({ walletClient });
+  const client = useZetaChainClient({ network: "testnet", signer });
+  const { address: bitcoinAddress } = useBitcoinWallet();
+
   return (
-    <div>
-      <ConnectBitcoin />
-      <ConnectButton />
+    <div className="m-4">
+      <div className="flex justify-end gap-2 mb-10">
+        <ConnectBitcoin />
+        <ConnectButton label="Connect EVM" showBalance={false} />
+      </div>
+      <div className="flex justify-center">
+        <div className="w-[400px]">
+          {client && (
+            <Swap
+              contract={contract}
+              client={client}
+              account={account}
+              bitcoin={bitcoinAddress}
+            />
+          )}
+        </div>
+      </div>
     </div>
   );
 };

src/components/ConnectBitcoin/index.tsx

@@ -17,6 +17,22 @@ import Image, { StaticImageData } from "next/image";
 import okxIcon from "./okx.jpeg";
 import xdefiIcon from "./xdefi.jpeg";
 import unisatIcon from "./unisat.jpeg";
+import xverseIcon from "./xverse.jpeg";
+import {
+  Params,
+  Requests,
+  RpcResult,
+  SupportedWallet,
+  defaultAdapters,
+  getSupportedWallets,
+  SatsConnectAdapter,
+  setDefaultProvider,
+  getDefaultProvider,
+  removeDefaultProvider,
+  RpcErrorCode,
+  AddressPurpose,
+  BaseAdapter,
+} from "@sats-connect/core";
 
 const formatAddress = (str: string): string => {
   if (str.length <= 10) {
@@ -130,6 +146,14 @@ const Details = React.memo(({ address, disconnect }: any) => {
 });
 
 const Connect = React.memo(({ connectWallet, loading }: any) => {
+  const connectXverse = async () => {
+    const adapter = new BaseAdapter("XverseProviders.BitcoinProvider");
+    const accounts = await adapter.request("getAccounts", {
+      purposes: [AddressPurpose.Stacks, AddressPurpose.Payment],
+    });
+    console.log(accounts);
+  };
+
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -166,6 +190,13 @@ const Connect = React.memo(({ connectWallet, loading }: any) => {
             connectWallet={connectWallet}
             loading={loading}
           />
+          <WalletButton
+            walletType="xverse"
+            icon={xverseIcon}
+            label="Xverse"
+            connectWallet={connectWallet}
+            loading={loading}
+          />
         </div>
       </DialogContent>
     </Dialog>

src/providers/BitcoinWalletProvider/index.tsx

@@ -2,17 +2,20 @@ import React, { createContext, useContext, useState, ReactNode } from "react";
 import unisatWallet from "./unisat";
 import okxWallet from "./okx";
 import xdefiWallet from "./xdefi";
+import xverseWallet from "./xverse";
 
 export const walletTypes = {
   unisat: unisatWallet,
   okx: okxWallet,
   xdefi: xdefiWallet,
+  xverse: xverseWallet,
 };
 
 export type WalletType = keyof typeof walletTypes;
 
 interface WalletContextProps {
   address: string | null;
+  publicKey: string | null;
   loading: { isLoading: boolean; walletType: WalletType | null };
   connectedWalletType: WalletType | null;
   connectWallet: (walletType: WalletType) => void;
@@ -34,6 +37,7 @@ export const BitcoinWalletProvider = ({
   children: ReactNode;
 }) => {
   const [address, setAddress] = useState<string | null>(null);
+  const [publicKey, setPublicKey] = useState<string | null>(null);
   const [loading, setLoading] = useState<{
     isLoading: boolean;
     walletType: WalletType | null;
@@ -44,23 +48,19 @@ export const BitcoinWalletProvider = ({
   const connectWallet = async (walletType: WalletType) => {
     setAddress(null);
     const walletConfig = walletTypes[walletType];
-    const wallet = (window as any)[walletConfig.name];
-    if (wallet) {
-      setLoading({ isLoading: true, walletType });
-      try {
-        const address = await walletConfig.getAddress(wallet);
-        setAddress(address);
-        setConnectedWalletType(walletType);
-      } catch (error) {
-        console.error(`Connection to ${walletConfig.label} failed:`, error);
-        setLoading({ isLoading: false, walletType: null });
-        return;
-      }
-      setLoading({ isLoading: false, walletType: null });
-    } else {
-      console.error("Unsupported wallet type");
+
+    setLoading({ isLoading: true, walletType });
+    try {
+      const { address, publicKey } = await walletConfig.getAddress();
+      setAddress(address);
+      setPublicKey(publicKey);
+      setConnectedWalletType(walletType);
+    } catch (error) {
+      console.error(`Connection to ${walletConfig.label} failed:`, error);
       setLoading({ isLoading: false, walletType: null });
+      return;
     }
+    setLoading({ isLoading: false, walletType: null });
   };
 
   const disconnect = () => {
@@ -79,23 +79,19 @@ export const BitcoinWalletProvider = ({
     }
 
     const walletConfig = walletTypes[connectedWalletType];
-    const wallet = (window as any)[walletConfig.name];
-    if (wallet) {
-      try {
-        const txHash = await walletConfig.sendTransaction(wallet, params);
-        console.log(`Broadcasted a transaction: ${txHash}`);
-      } catch (error) {
-        console.error(`Transaction with ${walletConfig.label} failed:`, error);
-      }
-    } else {
-      console.error("Unsupported wallet type");
+    try {
+      const txHash = await walletConfig.sendTransaction(params);
+      console.log(`Broadcasted a transaction: ${txHash}`);
+    } catch (error) {
+      console.error(`Transaction with ${walletConfig.label} failed:`, error);
     }
   };
 
   return (
     <BitcoinWalletContext.Provider
       value={{
         address,
+        publicKey,
         loading,
         connectedWalletType,
         connectWallet,

src/providers/BitcoinWalletProvider/okx.ts

@@ -1,21 +1,21 @@
 export default {
   label: "OKX Wallet",
   name: "okxwallet",
-  getAddress: async (wallet: any) => {
-    return (await wallet.bitcoinTestnet.connect()).address;
+  getAddress: async () => {
+    const wallet = (window as any).okxwallet;
+    const address = (await wallet.bitcoinTestnet.connect()).address;
+    return { address, publicKey: null };
   },
-  sendTransaction: async (
-    wallet: any,
-    {
-      to,
-      value,
-      memo,
-    }: {
-      to: string;
-      value: number;
-      memo?: string;
-    }
-  ) => {
+  sendTransaction: async ({
+    to,
+    value,
+    memo,
+  }: {
+    to: string;
+    value: number;
+    memo?: string;
+  }) => {
+    const wallet = (window as any).okxwallet;
     const account = await wallet?.bitcoinTestnet?.connect();
     if (!account) throw new Error("No account found");
     const txHash = await wallet.bitcoinTestnet.send({

src/providers/BitcoinWalletProvider/unisat.ts

@@ -1,21 +1,21 @@
 export default {
   label: "Unisat Wallet",
   name: "unisat",
-  getAddress: async (wallet: any) => {
-    return (await wallet.requestAccounts())[0];
+  getAddress: async () => {
+    const wallet = (window as any).unisat;
+    const address = (await wallet.requestAccounts())[0];
+    return { address, publicKey: null };
   },
-  sendTransaction: async (
-    wallet: any,
-    {
-      to,
-      value,
-      memo,
-    }: {
-      to: string;
-      value: number;
-      memo?: string;
-    }
-  ) => {
+  sendTransaction: async ({
+    to,
+    value,
+    memo,
+  }: {
+    to: string;
+    value: number;
+    memo?: string;
+  }) => {
+    const wallet = (window as any).unisat;
     await wallet.requestAccounts();
     const memos = memo && [memo.toLowerCase()];
     const tx = await wallet.sendBitcoin(to, value * 1e8, { memos });

src/providers/BitcoinWalletProvider/xdefi.ts

@@ -1,22 +1,22 @@
 export default {
   label: "XDEFI Wallet",
   name: "xfi",
-  getAddress: async (wallet: any) => {
+  getAddress: async () => {
+    const wallet = (window as any).xfi;
     wallet.bitcoin.changeNetwork("testnet");
-    return (await wallet?.bitcoin?.getAccounts())[0];
+    const address = (await wallet?.bitcoin?.getAccounts())[0];
+    return { address, publicKey: null };
   },
-  sendTransaction: async (
-    wallet: any,
-    {
-      to,
-      value,
-      memo,
-    }: {
-      to: string;
-      value: number;
-      memo?: string;
-    }
-  ) => {
+  sendTransaction: async ({
+    to,
+    value,
+    memo,
+  }: {
+    to: string;
+    value: number;
+    memo?: string;
+  }) => {
+    const wallet = (window as any).unisat;
     wallet.bitcoin.changeNetwork("testnet");
     const account = (await wallet?.bitcoin?.getAccounts())?.[0];
     if (!account) throw new Error("No account found");

src/providers/BitcoinWalletProvider/xverse/index.ts

@@ -0,0 +1,43 @@
+import { AddressPurpose, BaseAdapter } from "@sats-connect/core";
+import { createTransaction, signPsbt } from "./utils";
+
+export default {
+  label: "Xverse Wallet",
+  name: "xverse",
+  getAddress: async () => {
+    const adapter = new BaseAdapter("XverseProviders.BitcoinProvider");
+    const accounts: any = await adapter.request("getAccounts", {
+      purposes: [AddressPurpose.Payment, AddressPurpose.Payment],
+    });
+    console.log(accounts);
+    return {
+      address: accounts.result[0].address,
+      publicKey: accounts.result[0].publicKey,
+    };
+  },
+  sendTransaction: async ({
+    to,
+    value,
+    memo,
+  }: {
+    to: string;
+    value: number;
+    memo?: string;
+  }) => {
+    const adapter = new BaseAdapter("XverseProviders.BitcoinProvider");
+    const accounts: any = await adapter.request("getAccounts", {
+      purposes: [AddressPurpose.Payment, AddressPurpose.Payment],
+    });
+    const address = accounts.result[0].address;
+    const publicKey = accounts.result[0].publicKey;
+
+    const result = await createTransaction(publicKey, address, {
+      memo,
+      amount: value * 1e8,
+      to,
+    });
+
+    const res = await signPsbt(result.psbtB64, result.utxoCnt, address);
+    console.log(res);
+  },
+};