hashport Widget

This repository contains the components used to build the hashport Widget. This is a package that provides a user interface to interact with the hashport bridge. It comes complete with state management, styles, and wallet connectors.

⚠ Note: @hashport/widget is a React library that uses components from MUI.

Quick Start

Installation

Install the package and its peer dependencies.

npm install @hashport/widget @hashgraph/sdk hashconnect

⚠ Note: The widget currently only supports Hedera wallet connections through HashPack. EVM connections are handled by RainbowKit.

Basic Usage

import { HashportWidget } from '@hashport/widget';

const MyApp = () => {
    return <HashportWidget />;
};

Lazy Loading

The hashport widget comes with a number of large packages. Because of this, using the HashportWidget directly can impact the load time of an application. To help alleviate this problem @hashport/widget provides the LazyHashportWidget. This component uses lazy loading and React Suspense to load the widget only when a user requests it. Learn more about code splitting in React here.