+
+ );
+
+ const unloggedInView = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isBlurred ?
+ {coreKitStatus === COREKIT_STATUS.REQUIRED_SHARE ? (
+
+ );
+
+ return (
+
+
+ ) : (
+
+ )}
+ Account Recovery Options
+
+
+
+ Device / Social MFA Factor
+ + +
+
+
+ Device / Social MFA Factor
+
+
+
+
+
+
+
+ Mnemonic Factor
+
+ setMnemonicFactor(e.target.value)} placeholder="Enter your mnemonic phrase" />
+
+
+
+
+ Danger Zone
+ +
+
+ );
+}
+
+export default App;
diff --git a/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/BitcoinComponent.tsx b/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/BitcoinComponent.tsx
new file mode 100644
index 00000000..57a1b2dc
--- /dev/null
+++ b/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/BitcoinComponent.tsx
@@ -0,0 +1,240 @@
+import { Web3AuthMPCCoreKit } from "@web3auth/mpc-core-kit";
+import { useEffect, useState } from "react";
+import ecc from "@bitcoinerlab/secp256k1";
+import { networks, Psbt, payments, SignerAsync } from "bitcoinjs-lib";
+import * as bitcoinjs from "bitcoinjs-lib";
+import { createBitcoinJsSignerBip340 } from "./BitcoinSigner";
+import axios from "axios";
+import { BlurredLoading } from "./Loading";
+
+bitcoinjs.initEccLib(ecc);
+
+const BTCValidator = (pubkey: Buffer, msghash: Buffer, signature: Buffer): boolean => {
+ return ecc.verifySchnorr(Uint8Array.from(msghash), Uint8Array.from(pubkey), Uint8Array.from(signature));
+};
+
+const uiConsole = (...args: any): void => {
+ const el = document.querySelector("#console>p");
+ if (el) {
+ el.innerHTML = JSON.stringify(args || {}, null, 2);
+ }
+ console.log(...args);
+};
+
+const getAddress = (bip340Signer: SignerAsync, network: networks.Network): string | undefined => {
+ return payments.p2tr({ pubkey: bip340Signer.publicKey.subarray(1, 33), network }).address;
+};
+
+interface BitcoinComponentProps {
+ coreKitInstance: Web3AuthMPCCoreKit;
+}
+
+const handleSendTransaction = async (signedTransaction: string) => {
+ try {
+ const response = await axios.post(`https://blockstream.info/testnet/api/tx`, signedTransaction);
+ console.log("Transaction sent successfully:", response.data);
+ uiConsole("Transaction sent successfully:", response.data);
+ return response.data;
+ } catch (error) {
+ console.error("Error sending transaction:", error);
+ uiConsole("Error sending transaction", error);
+ throw error;
+ }
+};
+
+export const BitcoinComponent: React.FC+ + Web3Auth MPC Core Kit + {" "} + Bitcoin Taproot Example +
+ + {isLoading ? ( +
+
+ )}
+
+
+
+
+ {coreKitStatus === COREKIT_STATUS.LOGGED_IN && (
+ {coreKitStatus === COREKIT_STATUS.LOGGED_IN ? loggedInView : unloggedInView}
+
+
+ )}
+
+
+
+
+
+ );
+};
diff --git a/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/BitcoinSigner.ts b/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/BitcoinSigner.ts
new file mode 100644
index 00000000..3f566386
--- /dev/null
+++ b/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/BitcoinSigner.ts
@@ -0,0 +1,33 @@
+import { secp256k1 } from "@tkey/common-types";
+import { Web3AuthMPCCoreKit } from "@web3auth/mpc-core-kit";
+import { networks, SignerAsync } from "bitcoinjs-lib";
+import * as bitcoinjs from "bitcoinjs-lib";
+import ECPairFactory from "ecpair";
+
+import ecc from "@bitcoinerlab/secp256k1";
+import BN from "bn.js";
+
+const ECPair = ECPairFactory(ecc);
+
+export function createBitcoinJsSignerBip340(props: { coreKitInstance: Web3AuthMPCCoreKit; network: networks.Network }): SignerAsync {
+ const bufPubKey = props.coreKitInstance.getPubKeyPoint().toSEC1(secp256k1, true);
+ const xOnlyPubKey = bufPubKey.subarray(1, 33);
+ const keyPair = ECPair.fromPublicKey(bufPubKey);
+ const tweak = bitcoinjs.crypto.taggedHash("TapTweak", xOnlyPubKey);
+ const tweakedChildNode = keyPair.tweak(tweak);
+ const pk = tweakedChildNode.publicKey;
+
+ return {
+ sign: async (msg: Buffer) => {
+ let sig = await props.coreKitInstance.sign(msg);
+ return sig;
+ },
+ signSchnorr: async (msg: Buffer) => {
+ const keyTweak = new BN(tweak);
+ let sig = await props.coreKitInstance.sign(msg, { keyTweak });
+ return sig;
+ },
+ publicKey: pk,
+ network: props.network,
+ };
+}
diff --git a/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/Loading.tsx b/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/Loading.tsx
new file mode 100644
index 00000000..44fe7f2d
--- /dev/null
+++ b/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/Loading.tsx
@@ -0,0 +1,39 @@
+import loader from "./spinner.svg"; // Tell webpack this JS file uses this image
+
+const Loading = () => (
+ Bitcoin Component
+ +
+ setReceiverAddr(e.target.value)} placeholder="Receiver Address" className="input-field" />
+ setAmount(e.target.value)} placeholder="Amount (satoshis)" className="input-field" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isLoading && + ⚠️ Warning: Demo Purpose Only +
++ Use a{" "} + + faucet + {" "} + to get testnet BTC to Taproot Addresses. +
+This implementation sends transactions via a centralized server (BlockStream).
+In a production environment, transactions should be relayed directly to Bitcoin nodes.
+
+ 
+
+);
+
+// New BlurredLoading component
+const BlurredLoading = () => (
+
+
+);
+
+export { Loading, BlurredLoading };
+export default Loading;
diff --git a/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/index.css b/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/index.css
new file mode 100644
index 00000000..ec2585e8
--- /dev/null
+++ b/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/index.css
@@ -0,0 +1,13 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
diff --git a/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/index.tsx b/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/index.tsx
new file mode 100644
index 00000000..cfd77849
--- /dev/null
+++ b/mpc-core-kit-web/mpc-core-kit-bitcoin-taproot/src/index.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+const root = ReactDOM.createRoot(
+ document.getElementById("root") as HTMLElement
+);
+root.render(
+
+
+
+