# @blowfishxyz/ui

> Package containing Blowfish reusable UI components

Latest version **0.0.1-beta.20** (published 2024-09-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @blowfishxyz/ui
pnpm add @blowfishxyz/ui
yarn add @blowfishxyz/ui
bun add @blowfishxyz/ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-beta.20 |
| Published | 2024-09-06 |
| First published | 2023-07-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 453.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | chriskvl, metreniuk, kimpers |

## Links

- npm: https://www.npmjs.com/package/@blowfishxyz/ui
- npm.io page: https://npm.io/package/@blowfishxyz/ui

## Dependencies (6)

- [swr](https://npm.io/package/swr.md) ^2.0.4
- [deepmerge](https://npm.io/package/deepmerge.md) ^4.3.1
- [decimal.js](https://npm.io/package/decimal.js.md) ^10.4.3
- [styled-components](https://npm.io/package/styled-components.md) 6.0.4
- [@floating-ui/react](https://npm.io/package/@floating-ui/react.md) ^0.23.1
- [@emotion/is-prop-valid](https://npm.io/package/@emotion/is-prop-valid.md) ^1.2.0

## Recent versions

- 0.0.1-beta.20 (latest) — 2024-09-06
- 0.0.1-beta.19 — 2024-08-05
- 0.0.1-beta.18 — 2024-07-15
- 0.0.1-beta.17 — 2024-06-25
- 0.0.1-beta.16 — 2024-05-17
- 0.0.1-beta.15 — 2024-03-20
- 0.0.1-beta.14 — 2024-03-09
- 0.0.1-beta.13 — 2024-03-08
- 0.0.1-beta.12 — 2024-03-07
- 0.0.1-beta.11 — 2024-02-28
- 0.0.1-beta.10 — 2024-02-23
- 0.0.1-beta.9 — 2024-01-08
- 0.0.1-beta.8 — 2023-12-04
- 0.0.1-beta.7 — 2023-11-13
- 0.0.1-beta.5 — 2023-10-03
- … 9 more at https://npm.io/package/@blowfishxyz/ui/versions

## README

![](https://framerusercontent.com/images/LMkkyrT6aZKMqZNobSZKDY8lnM.jpg)

# `@blowfish/ui` 🐡

This package offers a set of customizable React UI components designed to simplify the integration of the Blowfish API into your React applications.

# API Documentation

See https://docs.blowfish.xyz

# Examples

See https://storybook.blowfish.xyz

# Key Features

- **Zero-overhead Integration:** You need to just pass the API response to the component.
- **TypeScript Support:** All components are using [`@blowfishxyz/api-client`](https://www.npmjs.com/package/@blowfishxyz/api-client) that relies on the latest Blowfish API version.
- **Customizable theme:** `BlowfishUIProvider` comes with a `light` and `dark` theme built-in. You can still override the theme with a `themeOverride`, it will deeply merge it with the selected theme.

# Components

## EVM

Use `StateChangePreviewEvm` to display state changes simulated by the Blowfish API. You can use [`@blowfishxyz/api-client`](https://www.npmjs.com/package/@blowfishxyz/api-client) to simulate transactions and pass the response as `scanResult` prop.

You can also use `SimulationWarning` to display Blowfish warnings.

**Note:** For more control over how you want to display state changes, you can use `SimulationResultEvm` to display each state change separately.

### Example

```tsx
import React from "react";
import useSWR from "swr";
import { createEvmClient, type EvmTxData } from "@blowfishxyz/api-client";
import {
  SimulationWarning,
  StateChangePreviewEvm,
  BlowfishUIProvider,
} from "@blowfishxyz/ui";

function EvmApp() {
  const userAccount = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045";
  const tx: EvmTxData = {
    data: "0xa9059cbb000000000000000000000000c02aaa39b223fe8d0a0e5c4f27ead9083c756cc2000000000000000000000000000000000000000000000000002386f26fc10000",
    from: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
    to: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
  };
  const origin = "https://unkown-domain.dev";

  const scanTransactions = () => {
    return createEvmClient({
      basePath: "https://api.blowfish.xyz",
      // Optional: It's highly encouraged to use a proxy server to not expose your API key on the client (see: https://docs.blowfish.xyz/docs/wallet-integration-guide#optional-proxy-server)
      apiKey: "4daa1e3b-87e6-40b2-8883-758feb6a8e46",
      chainFamily: "ethereum",
      chainNetwork: "mainnet",
    }).scanTransactions([tx], userAccount, {
      origin,
    });
  };

  const { data } = useSWR(tx.data, scanTransactions);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <BlowfishUIProvider mode="auto">
      <div>
        <StateChangePreviewEvm
          scanResult={data}
          chainFamily="ethereum"
          chainNetwork="mainnet"
        />
        <div>
          {data.warnings.map((warning) => (
            <SimulationWarning key={warning.message} warning={warning} />
          ))}
        </div>
      </div>
    </BlowfishUIProvider>
  );
}
```

## Solana

Use `StateChangePreviewSolana` to display state changes for solana transactions.

**Note:** For more control over how you want to display state changes, you can use `SimulationResultSolana` to display each state change separately.

### Example

```tsx
import React from "react";
import useSWR from "swr";
import { Languages, createSolanaClient } from "@blowfishxyz/api-client";
import {
  BlowfishUIProvider,
  SimulationWarning,
  StateChangePreviewSolana,
} from "@blowfishxyz/ui";

function SolanaApp() {
  const userAccount = "FXxHSp14Yfmwn5c3ynpxx3AMHU3JVmdXJu1MgEwz3bAu";
  const tx =
    "AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAED1/GM77uLGslrQf0lxej6sBRDW3dUMBw4Mxo1zRrpZGZafbJORJb+gzh+vcMdhnn8px1N+NcuQ1Lj1KvhFRwAywbd9uHXZaGT2cvhRs7reawctIXtX1s3kTqM9YV+/wCpBn9A83Xu7uaFQt8+0152j5cclxp+kZToz5JJnbLwpxQBAgIBACMGAgF0db0rJ/DnR+R6kWV6kj4FchRRhx9TXx7HEF7/uDTADQ==";
  const origin = "https://unkown-domain.dev";

  const scanTransactions = () => {
    return createSolanaClient({
      basePath: "https://api.blowfish.xyz",
      // Optional: It's highly encouraged to use a proxy server to not expose your API key on the client (see: https://docs.blowfish.xyz/docs/wallet-integration-guide#optional-proxy-server)
      apiKey: "4daa1e3b-87e6-40b2-8883-758feb6a8e46",
      chainNetwork: "mainnet",
      // Optional
      language: Languages.En,
    }).scanTransactions([tx], userAccount, {
      origin,
    });
  };

  const { data } = useSWR(tx, scanTransactions);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <BlowfishUIProvider mode="auto">
      <div>
        <StateChangePreviewSolana
          scanResult={data}
          userAccount={userAccount}
          chainNetwork="mainnet"
        />
        <div>
          {data.aggregated.warnings.map((warning) => (
            <SimulationWarning key={warning.message} warning={warning} />
          ))}
        </div>
      </div>
    </BlowfishUIProvider>
  );
}
```

## BlowfishUIProvider

Wrap your app inside `BlowfishUIProvider`.

- `mode` – choose a styling theme: **light**, **dark**, or **auto** (relies on `prefers-color-scheme` user preference).
- `themeOverride` – override parts of the theme or the whole theme.
- `fontFamily` – sets a root font family for `@blowfishxyz/ui`. Make sure to set up font loading on your side.

### Example

```tsx
import React from "react";
import { BlowfishUIProvider } from "@blowfishxyz/ui";

function App(props: AppProps) {
  const themeOverride = useMemo(
    () => ({
      colors: {
        foregroundPrimary: yourTheme.foregroundPrimary,
        backgroundPrimary: yourTheme.backgroundPrimary,
      },
    }),
    []
  );
  return (
    <BlowfishUIProvider
      mode="light"
      themeOverride={themeOverride}
      fontFamily="Roboto"
    >
      {props.children}
    </BlowfishUIProvider>
  );
}
```

---
_Source: https://npm.io/package/@blowfishxyz/ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._