React

Welcome to the guide! This guide is designed for developers working in a React environment using TypeScript. We'll walk through the installation process and show you how to create and broadcast a Bitcoin SV transaction using the BSV SDK. Whether you're freshly starting on BSV or transitioning an existing project to use the SDK, this would be your go-to guide.

Prerequisites

Ensure that you have Node.js installed on your system. You can download and install Node.js from nodejs.org. Basic knowledge of JavaScript, React and TypeScript is recommended for this guide.

Setting Up

Begin by creating a new project using Create React App with the TypeScript template:

npx create-react-app my-bsv-app --template typescript
cd my-bsv-app

Next, install the BSV SDK package in your project:

npm install @bsv/sdk

Writing the Component

Let's now create a Button component that builds and broadcasts a transaction when clicked.

1. Create a new file in your project, such as src/components/BsvButton.tsx.

2. At the top of your component file, import the necessary modules from the BSV SDK:

import React from 'react';
import { PrivateKey, Transaction, ARC, P2PKH } from '@bsv/sdk';

3. Define a new component function, BsvButton, that handles the creation and broadcast of a transaction upon a button click:

const BsvButton: React.FC = () => {
  const handleClick = async () => {
    const privKey = PrivateKey.fromWif('...')
    const sourceTransaction = Transaction.fromHex('...') // your source transaction goes here

    const version = 1
    const input = {
      sourceTransaction,
      sourceOutputIndex: 0,
      unlockingScriptTemplate: new P2PKH().unlock(privKey),
    }
    const output = {
      lockingScript: new P2PKH().lock(privKey.toPublicKey().toHash()),
      change: true
    }

    const tx = new Transaction(version, [input], [output])
    await tx.fee()
    await tx.sign()

    // grab your api key from https://console.taal.com
    const apiKey = 'mainnet_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' // replace
    await tx.broadcast(new ARC('https://api.taal.com/arc', apiKey))
  }

  return (
    <button onClick={handleClick}>
      Create Transaction
    </button>
  );
}

4. Finally, export the BsvButton component:

export default BsvButton;

Integrating into Application

Now, let's integrate our BsvButton component into our app:

1. Open src/App.tsx.

2. Delete all of its content and replace it with the following:

import React from 'react';
import BsvButton from './components/BsvButton';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <BsvButton />
      </header>
    </div>
  );
}

export default App;

Running the App

To run your application, just type the following command in your terminal:

npm run start

Now when you click the button, a transaction will be created, signed, and broadcast to the BSV network.

Conclusion

Congratulations! You've successfully integrated the BSV SDK into your TypeScript & React application and created a button which broadcasts a bitcoin transaction on click. This guide covered the basic steps needed to get you started, but the BSV SDK can do a lot more. Explore the SDK documentation to dive deep into all the features and functionalities available to build scalable applications on the BSV blockchain.