Installing and Using the Hashport Widget

Published in

Coinmonks

4 min readOct 18, 2023

In the previous two articles in the Hashport SDK Series, we introduced the SDK and provided a detailed guide on how to use the SDK & React Client. In this article, we will provide a step-by-step tutorial on how you can effortlessly integrate the Hashport Widget into your dApp.

@hashport/widget Tutorial

Prerequisites

If you are eager to get started with the Hashport widget, you can skip this, but I recommend taking a look at the @hashport/react-client tutorial. It covers a lot of concepts that were used in creating the widget.

Introduction

The @hashport/widget is a simple solution to bring Hedera and EVM network interoperability to your dApp. With only a few lines of code, you can easily integrate the Hashport interface. Let’s get started!

Initialise a React App

If you don’t already have an application you want to add the widget to, you can scaffold a project with Vite:

npm create vite@latest

Follow the prompts to install the dependencies and run the application.

Installation

Next, install the widget and its dependencies:

npm install @hashport/widget @hashgraph/sdk hashconnect

Add Polyfills

The @hashport/widget uses HashPack and RainbowKit to manage wallet connections. However, both packages use some modules from NodeJS that aren’t meant to be run in the browser. You can read more about this in RainbowKit’s documentation, but a simple fix is to add a polyfills.ts file like so:

import { Buffer } from 'buffer';

window.global = window.global ?? window;
window.Buffer = window.Buffer ?? Buffer;
window.process = window.process ?? { env: {} }; 

export {};

And then import the file into App.tsx:

import “./polyfills”;

Import the Widget

With that out of the way, replace everything in App.tsx with this:

import './App.css';
import './polyfills.ts';
import { HashportWidget } from '@hashport/widget';

function App() {
    return (
        <>
            <h1>hashport widget</h1>
            <HashportWidget />
        </>
    );
}

export default App;

And just like that, tada! You’ve added the widget to your application!

Run npm run dev to see it in action:

Lazy Loading

If you bundle this with your frontend code, you might notice that the @hashport/widget package is fairly large. Adding too many packages can make it hard for your application to load quickly. Most people won’t sit around and wait for the site to load, so it’s important that we display our content quickly!

Fortunately, the @hashport/widget package comes with a Lazy Loadable version! Update the code in App.tsx accordingly.

import './App.css';
import './polyfills';
import { LazyHashportWidget } from '@hashport/widget';

function App() {
    return (
        <>
            <h1>hashport widget</h1>
            <LazyHashportWidget label="Open Widget" />
        </>
    );
}

export default App;

The LazyHashportWidget is a button that opens the widget in a modal. The nice thing about the lazy loadable version is that the code required to run the widget is not downloaded until a user clicks on it. This leaves your site’s load time unaffected while still adding all the functionality Hashport has to offer.

Build for Production

Since we are using Vite, all we need to do is run npm run build. If you are using the LazyHashportWidget, Vite will take care of code splitting for you. If you have any questions or run into issues, head over to the Hashport framework repository and raise an issue!

Conclusion

This tutorial is a quick way to get started with all the possibilities of Hashport. If you want to dive more into the behind-the-scenes workings of the widget, check out the @hashport/react-client tutorial here.

Thanks and have fun building!

If you’re interested in learning more about our API, please check out our Hashport API Series:

Hashport API Series:
1. Introducing the Hashport API
2. Integrating the Hashport API into dApps
3. Using the Hashport API to Port Assets

Feel free to reach out via our contact form or slide into our Twitter (X) DMs.

Hashport SDK Series:
1. Introducing the Hashport SDK
2. Using the Hashport SDK & React Client
3. Installing and Using the Hashport Widget

About Hashport
Hashport is the enterprise-grade public utility that facilitates the movement of digital assets between distributed networks, extending their functionality in a quick, secure, and cost-effective way. In order to remain platform-neutral, Hashport functions without the use of a proprietary token. The network is built on a robust and performant architecture, secured and operated by a group of industry-leading validator partners from around the world. Hashport has passed rigorous security audits and follows industry best practices; regularly performing comprehensive network tests to ensure the integrity of the network.

Disclaimer: The information provided on Hashport’s website does not constitute investment advice, financial advice, trading advice, or any other sort of advice. You should not treat any site content as advice.