### Install Blockscout UI SDK

Source: https://github.com/blockscout/app-sdk/blob/main/README.md

Instructions for installing the Blockscout UI SDK using npm or yarn package managers.

```bash
npm install @blockscout/app-sdk
# or
yarn add @blockscout/app-sdk
```

--------------------------------

### Setup Transaction Toast Notifications (React)

Source: https://github.com/blockscout/app-sdk/blob/main/README.md

Demonstrates how to set up the `NotificationProvider` to enable transaction toast notifications within a React application.

```tsx
import { NotificationProvider } from "@blockscout/app-sdk";

function App() {
  return (
    <NotificationProvider>
      <YourApp />
    </NotificationProvider>
  );
}
```

--------------------------------

### Setup Transaction History Popup (React)

Source: https://github.com/blockscout/app-sdk/blob/main/README.md

Illustrates how to set up the `TransactionPopupProvider` to enable the transaction history popup feature in a React application.

```tsx
import { TransactionPopupProvider } from "@blockscout/app-sdk";

function App() {
  return (
    <TransactionPopupProvider>
      <YourApp />
    </TransactionPopupProvider>
  );
}
```

--------------------------------

### useTransactionPopup Hook API Reference

Source: https://github.com/blockscout/app-sdk/blob/main/README.md

API signature for the `useTransactionPopup` hook, detailing the `openPopup` function and its parameters for opening the transaction history popup.

```typescript
const { openPopup } = useTransactionPopup();

// Open transaction popup
openPopup(options: {
  chainId: string;
  address?: string;
}): void
```

--------------------------------

### useNotification Hook API Reference

Source: https://github.com/blockscout/app-sdk/blob/main/README.md

API signature for the `useNotification` hook, detailing the `openTxToast` function and its parameters for opening transaction toast notifications.

```typescript
const { openTxToast } = useNotification();

// Open a transaction toast
openTxToast(chainId: string, hash: string): Promise<void>
```

--------------------------------

### Use Transaction History Popup (React)

Source: https://github.com/blockscout/app-sdk/blob/main/README.md

Demonstrates how to use the `useTransactionPopup` hook to open a transaction history popup. This can be used to display transactions for a specific address or all transactions on a chain.

```tsx
import { useTransactionPopup } from "@blockscout/app-sdk";

function YourComponent() {
  const { openPopup } = useTransactionPopup();

  // Show transactions for a specific address
  const showAddressTransactions = () => {
    openPopup({
      chainId: "1", // Ethereum mainnet
      address: "0x123...", // Optional: specific address
    });
  };

  // Show all transactions for a chain
  const showAllTransactions = () => {
    openPopup({
      chainId: "1", // Ethereum mainnet
    });
  };

  return (
    <div>
      <button onClick={showAddressTransactions}>
        View Address Transactions
      </button>
      <button onClick={showAllTransactions}>View All Transactions</button>
    </div>
  );
}
```

--------------------------------

### Use Transaction Toast Notifications (React)

Source: https://github.com/blockscout/app-sdk/blob/main/README.md

Shows how to use the `useNotification` hook to open transaction toast notifications. This includes sending a transaction and then calling `openTxToast` with the chain ID and transaction hash.

```tsx
import { useNotification } from "@blockscout/app-sdk";

function YourComponent() {
  const { openTxToast } = useNotification();

  const handleTransaction = async (txHash) => {
    try {
      // Your transaction logic here
      await sendTransaction();

      // Show transaction toast
      openTxToast("1", txHash); // '1' is the chain ID for Ethereum mainnet
    } catch (error) {
      console.error("Transaction failed:", error);
    }
  };

  return (
    <button onClick={() => handleTransaction("0x123...")}>
      Send Transaction
    </button>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.