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

Install the package

npm

npm install @blowfishxyz/ui

yarn

yarn add @blowfishxyz/ui

pnpm

pnpm add @blowfishxyz/ui

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 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.

EVM

Use StateChangePreviewEvm to display state changes simulated by the Blowfish API. You can use @blowfishxyz/api-client to simulate transactions and pass the response as scanResult prop.

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

Use SimulationWarning to display Blowfish warnings.

Example

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>
  );
}

You can find more examples of EVM simulations in our Storybook

Solana

Use StateChangePreviewSolana to display state changes for solana transactions. You can use @blowfishxyz/api-client to simulate transactions and pass the response as scanResult prop.

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

Use SimulationWarning to display Blowfish warnings.

Example

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>
  );
}

You can find more examples of Solana simulations in our Storybook

`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

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>
  );
}