SOV-4263: Test BTC connect implementation from Particle Network

apps/web/components/BTCConnect.tsx

@@ -0,0 +1,78 @@
+import {
+  useETHProvider,
+  useBTCProvider,
+  useConnectModal,
+} from '@particle-network/btc-connectkit';
+
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { Button, WalletIdentity } from '@sovryn/ui';
+
+const BTCConnect = () => {
+  const { account } = useETHProvider();
+  const { openConnectModal, disconnect } = useConnectModal();
+  const { accounts, sendBitcoin, getNetwork } = useBTCProvider();
+  const [balanceBtc, setBalanceBtc] = useState('');
+
+  useEffect(() => {
+    if (!account || accounts.length === 0) {
+      return;
+    }
+
+    const fetchBalances = async () => {
+      try {
+        const networkSuffix =
+          (await getNetwork()) === 'livenet' ? 'main' : 'test3';
+        const response = await fetch(
+          `https://api.blockcypher.com/v1/btc/${networkSuffix}/addrs/${accounts[0]}/balance`,
+        );
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch BTC balance');
+        }
+
+        const data = await response.json();
+        setBalanceBtc((data.balance / 1e8).toFixed(8));
+      } catch (error) {
+        console.error('Error fetching balances:', error);
+      }
+    };
+
+    fetchBalances();
+  }, [account, accounts, getNetwork]);
+
+  const executeTxBtc = useCallback(async () => {
+    try {
+      const hash = await sendBitcoin(accounts[0], 1);
+      alert(`Transaction mined: ${hash}`);
+    } catch (error) {
+      console.error('Error executing BTC transaction:', error);
+    }
+  }, [accounts, sendBitcoin]);
+
+  return !account ? (
+    <Button onClick={openConnectModal} text="Connect to BTC Wallet" />
+  ) : (
+    <div>
+      <h1>Connected</h1>
+      <div className="flex justify-around items-center">
+        <h2>BTC Wallet</h2>
+        <WalletIdentity
+          address={accounts[0]}
+          onDisconnect={disconnect}
+          submenuLabels={{
+            copyAddress: 'Copy Address',
+            disconnect: 'Disconnect',
+          }}
+          className="ml-4"
+        />
+      </div>
+      <h2>Balance: {balanceBtc} BTC</h2>
+      <div className="flex justify-around">
+        <Button onClick={executeTxBtc} text="Execute BTC Transaction" />
+      </div>
+    </div>
+  );
+};
+
+export default BTCConnect;

apps/web/package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@metamask/eth-sig-util": "4.0.1",
+    "@particle-network/btc-connectkit": "^1.0.0-alpha.26",
+    "@particle-network/chains": "^1.5.7",
     "@sovryn/onboard-common": "*",
     "@sovryn/onboard-core": "*",
     "@sovryn/onboard-injected": "*",

apps/web/pages/index.tsx

@@ -1,3 +1,12 @@
+import {
+  ConnectProvider,
+  UnisatConnector,
+  OKXConnector,
+  XverseConnector,
+  BybitConnector,
+} from '@particle-network/btc-connectkit';
+import { BOBTestnet } from '@particle-network/chains';
+
 import { useCallback, useEffect, useState, FC } from 'react';
 
 import dynamic from 'next/dynamic';
@@ -8,6 +17,7 @@ import { Button } from '@sovryn/ui';
 
 import { Wallet } from '../components/Wallet';
 import { onboard } from '../lib/connector';
+import BTCConnect from '../components/BTCConnect';
 
 const OnboardProvider: FC<any> = dynamic(
   () => import('@sovryn/onboard-react').then(mod => mod.OnboardProvider),
@@ -72,7 +82,34 @@ export default function Web() {
           text="Custom"
         />
       </div>
-
+      <ConnectProvider
+        options={{
+          projectId: 'cb827d8b-a1af-4d46-98a7-e922ba68fe91', // this is a test project id
+          clientKey: 'cGEPcgHNFQ7Eb9HIkXVnjSxSlL793qTSH3i0iQzb', // this is a test key
+          appId: 'sibYxrpDDpKPtq5jZDq696rkVWeV8ITCZbM3KAbX', // this is a test app id
+          aaOptions: {
+            accountContracts: {
+              BTC: [
+                {
+                  chainIds: [BOBTestnet.id],
+                  version: '2.0.0',
+                },
+              ],
+            },
+          },
+          walletOptions: {
+            visible: true,
+          },
+        }}
+        connectors={[
+          new UnisatConnector(),
+          new OKXConnector(),
+          new XverseConnector(),
+          new BybitConnector(),
+        ]}
+      >
+        <BTCConnect />
+      </ConnectProvider>
       <OnboardProvider dataAttribute="onboard-demo" />
     </div>
   );