At hashport, we have always believed that bridging is a core public utility needed for a thriving Web3 ecosystem. We built hashport with the ethos of Hedera, utilizing native technologies to connect over 10 public networks and create “Worlds of Possibility” for developers and users alike.

Unfortunately, hashport has received notice that support will no longer be available for the platform. As a result, the validators of hashport will shut down operations of the Hedera-native fungible public bridging utility on May 31, 2026 [12:00 UTC]. The HBAR Faucet will remain fully operational.

REQUIRED ACTION:

• Asset Removal & Unporting: We urge all users to complete all porting transactions and remove assets from hashport smart contracts prior to the deadline. After this date, bridging infrastructure will be disabled, and assets may not be recoverable.
• Action: Move assets from the destination network back to their native network. Hedera users and SaucerSwap Liquidity Providers — If you hold assets bridged in through hashport in liquidity pools, you MUST WITHDRAW them from those pools and unport them BEFORE May 31, 2026
• Risk: Any remaining wrapped assets may become locked and unrecoverable as the validator swarm will no longer verify transactions after the shutdown date.

Understanding Your Wrapped Assets

When you bridge assets through hashport, you hold a wrapped representation of that token on the destination network — learn more on https://www.hashport.network/how-it-works/

• Who issues these tokens? These wrapped assets are issued and secured exclusively by the hashport validator swarm. They are not issued by the original token creators (such as Circle for USDC or the Ethereum Foundation for ETH).
• How do I unwrap them? To “unwrap” your assets, you must use the hashport bridge to move them back to their native network. This process burns the token and releases the original asset from our secure vault to your native wallet.
• Where is the full list? For a complete and up-to-date list of all supported assets that must be unported before the deadline, please refer to our official Token List.

Support & Technical Assistance

If you encounter any issues during the unporting process or have questions regarding specific assets, our technical team is available to assist you. Please reach out to support@hashport.network.

Note: Technical support and bridge functionality will remain active only until May 31, 2026 [12:00 UTC]. Please prioritize your asset removals early to ensure a smooth transition.

We share our heartfelt thanks to the Hedera community, our validator swarm, and the many partners who have supported this journey. While this chapter is closing, we are proud of the interoperability we facilitated together.

A powerful new wave of innovation is rising within the Hedera ecosystem, poised to lift all stakeholders. Builders and users alike are driving this momentum, creating a vibrant, collaborative environment that is propelling the entire community forward.

The HBAR Faucet opens in Beta on October 1, 2025

Hashport created the HBAR Faucet to deliver a nominal amount of HBAR to new qualifying Hedera accounts, in an effort to significantly reduce onboarding friction for ecosystem newcomers.

Launching in tandem with the Faucet is an additional service called Hashpass — an account verification system that aims to help ensure the Hedera ecosystem remains safer from bot activity. Hashpass assigns a score to each Hedera account, which, in time, can help to standardize safe access to various platforms within the Hedera ecosystem.

Overcoming Friction In An Expanding Multichain Ecosystem

For the decentralized economy to achieve mainstream adoption, the user experience must be seamless and secure. Historically, two major points of friction have hindered this progress:

1. The “Cold Start” Problem: Every new user on a network faces an immediate hurdle: acquiring the native token (e.g. HBAR on Hedera) to pay for their first network transactions. The network fee problem is a significant barrier to entry, frustrating new users and slowing DeFi adoption.
2. Complex and Insecure Bridging: Moving assets between networks is often a daunting process, fraught with security risks and complicated interfaces. Users and institutions require a trusted, reliable, and straightforward pathway for their assets.

Today’s launch directly addresses these fundamental challenges with two powerful, purpose-built utilities.

The HBAR Faucet — Your First Drip of HBAR

To eliminate the “cold start” problem on Hedera, we are introducing the HBAR Faucet. This public utility is designed to provide new, first-time users with $0.25 USD in HBAR to cover their initial transaction fees. Such fees could include token associations, DEX Swaps, or generating new accounts.

What the Faucet Does: The Faucet provides new users with easy access to the initial HBAR they need to get started using the Hedera network. This has historically been a significant barrier to entry despite Hedera’s low and predictable network fees priced in USD (e.g., ~$0.0001 for simple transfers).

Who It’s For:

• New Users: Individuals exploring Hedera’s DeFi ecosystem can instantly fund their initial account for their first swap on an exchange like SaucerSwap.
• Existing Users: Individuals looking to bring new assets onto the network from external ecosystems.

HashPass — The Hedera Trust Score

HashPass is an account verification system for the Hedera ecosystem. As Hedera hosts an influx of new users across retail and on the development side, HashPass will help ecosystem dApps and platforms ensure their respective userbases are safer from the potential of malicious botting activity.

Every Hedera account will have a Hashpass score which is determined by a variety of factors including but not limited to:

• Account age
• Transaction count
• Transaction diversity
• Interactions with NFTs, tokens, and staking
• Current known asset value

Hashport Central Hub to Get Started on Hedera

To support this launch, Hashport has unveiled a new resource hub at hashport.network.

The landing page is the first place new users can begin their journey on Hedera and ensure that they are using verified tools and platforms.

1. Web3 Wallets: Get direct links and setup guides for the network’s leading wallets, including HashPack, Kabila, and Metamask.
2. The HBAR Faucet: A direct link to the HBAR Faucet where you can collect your HBAR drip.
3. Bridge: Linking the interoperability portals hashport and LayerZero.
4. Decentralized Exchanges (DEXes): Find your way to Hedera’s primary liquidity venues, including HbarSuite, Stader, Origin, Bonzo Finance and SaucerSwap, the network’s leading DEX.
5. NFTs: Streamline interactions with Hedera accounts by getting a .hbar name at HNS. Trade the wide range of NFTs that the Hedera ecosystem has to offer on the SentX marketplace.
6. Network Endpoints: For developers, this section shares links to Mainnet, Testnet, and Mirror Node endpoints via Arkhia to streamline the development and deployment process.
7. Hedera Data: Track the data and activity on Hedera with its data providers such as Hgraph, QuickNode, Hashscan, or Dragonglass.

The future of the digital economy is multi-chain. With the HBAR Faucet and Hashpass, Hashport is laying the secure, reliable, and accessible foundation for that future on Hedera.

Visit our new “Getting Started on Hedera” page and watch the Faucet tutorial.

Begin your journey today.

MANTRA is an institutional-grade layer-1 blockchain network for Real World Assets (RWAs), capable of adherence and enforcement of real world regulatory requirements.

MANTRA addresses key industry challenges, including liquidity fragmentation and cross-chain interoperability, setting the foundation for a secure, scalable infrastructure. MANTRA offers a suite of products tailored to RWA’s for users to easily integrate and access tokenized versions of these assets.

The collaboration between Hashport and MANTRA holds great promise to enhance the landscape of Web3 interoperability. Both the Hedera Public Network and MANTRA are well-aligned in their focus towards integrating Real World Assets, setting a solid foundation for synergy. With Hashport’s initiatives to facilitate robust cross-chain interactions, this new partnership holds the potential to unlock new possibilities for the future of RWA interoperability!

Thank You to Our Departing Validator

We would also like to extend our gratitude to departing validator; Polygon. We truly appreciate the significant role Polygon has played as a validator for Hashport. Over the past few years, their efforts have been of great help in developing the platform. We thank them for their commitment to advancing interoperability within the Hedera ecosystem.

Exciting Developments Ahead for Hashport!

Hashport has a number of exciting developments lined up over the coming months for the platform and ecosystem. These initiatives aim to enhance the connectivity and utility of the Hedera Public Network, providing more seamless and robust integrations for our users. Our team is dedicated to driving innovation and improving the overall user experience across the Hedera ecosystem and beyond for the Hedera Public Network!

We are committed to staying at the forefront of Web3 interoperability and delivering top-notch solutions that meet the evolving needs of our users.

Stay tuned for more updates!

SaucerSwap stands as the leading decentralized exchange (DEX) on Hedera, facilitating the trading of HBAR and HTS assets in a permissionless manner. Focused on user autonomy, security, and censorship resistance, SaucerSwap operates without reliance on trusted intermediaries. By leveraging the Hedera Token Service (HTS), SaucerSwap offers fast, efficient, and cost-effective transactions while protecting against MEV-based attacks. Their unique approach to fair transaction ordering enhances the security and reliability of the Hedera network.

Thank You to Our Departing Validators

We would like to extend our gratitude to departing validators; Animoca, Calaxy, and StableNode. Their contributions to Hashport over the last several years have been instrumental in helping to shape the platform. We are grateful for their dedication & support towards enhancing interoperability for the Hedera ecosystem.

Exciting Developments Ahead for Hashport!

Hashport has a number of exciting developments lined up over the coming months for the platform and ecosystem. These initiatives aim to enhance the connectivity and utility of the Hedera Public Network, providing more seamless and robust integrations for our users. Our team is dedicated to driving innovation and improving the overall user experience across the Hedera ecosystem and beyond for the Hedera Public Network.

We are committed to staying at the forefront of interoperability advancements and delivering top-notch solutions that meet the evolving needs of our users.

Stay tuned for more updates!

HashPack is the premier wallet within the Hedera Hashgraph ecosystem, serving both new and seasoned Web3 users with an unparalleled user experience. By integrating with 95% of decentralized applications (dApps) and servicing 95% of active users on Hedera, HashPack sets the benchmark for ecosystem activity and innovation. Their commitment to providing the best user experience makes them a vital addition to the Hashport validator lineup.

Thank You to Our Departing Validators

We would like to extend our gratitude to departing validators; Animoca, Calaxy, and StableNode. Their contributions to Hashport over the last several years have been instrumental in helping to shape the platform. We are grateful for their dedication & support towards enhancing interoperability for the Hedera ecosystem.

Exciting Developments Ahead for Hashport!

Hashport has a number of developments lined up over the coming months for the platform and ecosystem! These initiatives aim to enhance the connectivity and utility of the Hedera Public Network, providing more seamless and robust integrations for our users. Our team is dedicated to driving innovation and improving the overall user experience across the Hedera ecosystem and beyond for the Hedera Public Network.

We are committed to staying at the forefront of interoperability advancements and delivering top-notch solutions that meet the evolving needs of our users.

Stay tuned for more updates!

— — 
Highlights of the Month:

• Hashport is now two years old! We published an anniversary blog that highlighted some of Hashport’s achievements we have made in the past 12 months. 🌉
• Hedera has achieved the 30 billion milestone. 🚀
• Total Volume on Hashport has passed 35.9 million this month. 📈
• The Hashport team attended Hong Kong Fintech Week with The HBAR Foundation, The Hashgraph Association, Arkhia, HNS, & our validators Animoca Brands & Worldpay. 🌐
• Hashport was featured at the Hedera booth at the Singapore Fintech Festival. ✊

• Hashport was mentioned by DappRadar alongside HNS, our validator BCW Group, & Arkhia as Web3 infrastructure providers in the Hedera ecosystem.
• Learn more about SaucerSwap, Hedera’s high TPS, Calaxy tokens, Hedera Name Service (HNS), Hashport API, the features on our Hashport Metrics Page & Smart Contract Verification on Hedera.
• Check out our Know Your Dapp thread about HeliSwap, a Hedera-native DEX where Hashport-supported HTS tokens are available.
• In the past four weeks, $WBTC, $WETH, $WAVAX, $LINK, $QNT, & $USDC were the most frequently ported tokens on Hashport.

— — 
Featured Articles:

Hashport was born on 9 Nov 2021. Two years later, it has grown into a popular bridge that supports 62+ tokens & 12 networks. 🌐 Happy 2nd birthday!

Read on to learn more about what we accomplished in 2023: 🎉 Hashport Turns Two: Enabling Interoperability for Web3 Networks

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.

Website | Twitter | Reddit | Telegram | LinkedIn | YouTube | GitHub

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.

Hashport Monthly Review: November 2023 was originally published in Coinmonks on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hashport, Hedera’s native interoperability solution, turns two today! Since its launch in 2021, the Hedera ecosystem has shown tremendous support for the platform

Enabling cross-network access to the Hedera ecosystem is our primary mission & your support means the world to us. Let’s take a moment to look back at what we’ve accomplished in a year!

Tokens, Networks, & Wallets

Back in November 2022, 5 EVM-compatible networks, 32 tokens, & 3 wallets were integrated with Hashport. Fast forward 12 months, we have expanded our support to 12 networks & 62 tokens and counting! We now provide 7 different ways for users to connect their wallets to the Hashport interoperability portal — MetaMask, Venly, HashPack, Blade Wallet, Rainbow, Coinbase Wallet, & WalletConnect.

Features & Media Mentions

Throughout 2023, Hashport has been featured on media platforms and invited as an interview guest on various shows. Listed below is a notable selection of our features:

• Hashport’s token-porting utility was featured by Google Cloud in an article titled “Leveraging Google Cloud to make decentralized finance faster, more scalable and secure”;
• Our two-part interview with Generation Infinity’s King Solomon;
• The Rollup interviewed our Head of BD Jesse Whitesde to discuss Directed Acyclic Graphs (DAG), building critical Web3 infrastructure, & upgrades the Hedera community can expect to see.
• Hashport was featured on Bitboy’s YouTube as a special guest, where Ben & Jesse discussed at length about interoperability, our validator swarm, & the Hedera network. The Hashport-PRO enterprise oracle Axiom was featured by Worldpay from FIS at TOKEN 2049. Axiom is proud to support Worldpay’s Proof-of-Reserves solution enabled on Hedera’s Stablecoin Studio.

Part of the Wider Web3 Community

As we expanded our influence within the Hedera community and extended our support to other DLT networks, the Hashport interoperability solution began to gain community recognition. In 2023, we have been listed as an ecosystem application on:

• Hedera’s ecosystem page;
• The HBAR Foundation’s Hedera ecosystem list;
• The HashPack Community page;
• CoinMarketCap;
• Alchemy;
• DappRadar;
• Magic Square; &
• The Arbitrum portal.

The Hedera ecosystem expands

The Hedera community grows stronger every day with 230+ ecosystem dApps. Together with Arkhia, we created a visual overview of the HBAR ecosystem where people can easily browse dApps in the vibrant Hedera community.

Hashport SDK

SDK is short for software development kits. Now that the Hashport GitHub is publicly accessible, developers of Hedera-native dApps can use the Hashport SDK, widget, & React app to integrate its token-bridging feature directly onto their platforms.

Learn more in our first blog of the Hashport SDK Series:

What a productive and exciting 12 months it has been for Hashport! We are thankful for all of the community support & we are eager to continue pushing the boundaries of cross-network interoperability for the ecosystem. We look forward to another year of BUIDLing & bringing critical value to the Hedera network.

Hello Future!

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.

Website | Twitter | Reddit | Telegram | LinkedIn | YouTube | GitHub

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.

Hashport Turns Two: Enabling Interoperability for Web3 Networks was originally published in Coinmonks on Medium, where people are continuing the conversation by highlighting and responding to this story.

— — 
Highlights of the Month:

• Hashport was welcomed as a member of the Hashgraph DeFi Alliance, accelerating the growth of the HBAR DeFi ecosystem with Headstarter, SaucerSwap, Stader, and HashPack. 🤝
• Hedera has processed 3 billion mainnet transactions in one month and has cruised past the 25B milestone 🚀
• Total Volume on Hashport has passed 34 million this month. 📈
• We have integrated Base, Coinbase’s L2 network built on OP Stack, along with two network tokens — $AERO from liquidity marketplace Aerodrome & $BSWAP, the token of Base-native DEX BaseSwap.
• By popular request, we integrated the Hedera-native $DOVU token following $DOV’s migration to Hedera.
• Our HTS tokens and liquidity pools on SaucerSwap can be accessed through GeckoTerminal, CoinGecko’s real-time decentralised exchange tracker. 🛸 GeckoTerminal’s integration with the DEX connects the Hedera community with a broader crypto ecosystem.

• Our validator Worldpay from FIS’ Proof-of-Reserves use case, which is supported by Hashport-PRO Axiom enterprise Oracle service, was mentioned in The HBAR Bull’s recent weekly updates.
• The importance of Hashport as Hedera’s interoperability solution was highlighted in a recent townhall with The HBAR Foundation’s Shayne Higdon and The Hashgraph Association’s Rob Allen.
• Learn more about the use cases enabled by Hedera’s first Enterprise Oracle solution by reading our new threads on Hashport-PRO Axiom.
• Learn more about Hedera’s fast TPS, ISO 20022 compliance, gossip protocol and virtual voting.
• Check out our Know Your Token thread about LINK, our supported token that has recently risen to become one of the Top Ported Tokens on our platform.
• In the past four weeks, $LINK, $DOV, $WBTC, $HBAR, and $USDC were the most frequently ported tokens on Hashport.

— — 
Technical Updates & Token Addresses

The 3-part Hashport SDK Series is now available on Medium!

The Hashport SDK provides engineers of Hedera-native DEXes an easy toolkit to integrate the Hashport app. The react-client package is an example of how to use the SDK on the frontend and further simplifies integration into the dApp’s frontend. Click on the links below to access the blogs in our SDK Series.

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

🟡 Hashport integrated 2 Base network tokens and the Hedera-native DOVU token. Aerodrome’s AERO token, BaseSwap’s $BSWAP, and the new DOVU token have been added to the portal. Here are the token addresses for your reference. 🌐

$AERO — 0x0f3414b61B902513e04E76cA4d1a7B003D09F54b
$AERO[hts] — 0.0.3862616
$BSWAP — 0x78a087d713Be963Bf307b18F2Ff8122EF9A63ae9
$BSWAP[hts] — 0.0.3862617
$DOV — 0xac3211a5025414af2866ff09c23fc18bc97e79b1
$DOV[hts] — 0.0.624505
$DOVU — 0.0.3716059
$DOVU[eth] — 0x2aeAbde1aB736c59E9A19BeD67681869eEF39526
$DOVU[0x] — 0x8B4caE9Af23EB752515A88497e678e9aDff1753d
$DOVU[ava] — 0xe0EcF8B3fAb0D379f18117E5e9f8b1E0E7566b66
$DOVU[bsc] — 0xe821C045f9149B44ef96f8054B9c6d94f4c89417
$DOVU[arb] — 0xe821C045f9149B44ef96f8054B9c6d94f4c89417
$DOVU[opt] — 0xd91fF310DF12FBb9D4C77A55BeDa0367e2244Ca6
$DOVU[ftm] — 0x2E64747523Fb2Bd079f7cAa3Af904cC15886916F
$DOVU[cro] — 0xf58988341516DFADE0eaE3710D69083E0Ce75235
$DOVU[moon] — 0xe32C01d807C2290fEe75625CdEde876a0a1c8eC0
$DOVU[aur] — 0x4007168965cBdB189A98E03C28695F900D92a11E
$DOVU[base] — 0xB38266e0e9D9681b77aEB0A280E98131b953F865

— — 
Featured Articles:

🌐 Base, Coinbase’s L2 network built on OP Stack, has been integrated with Hashport! 🪙 Two Base tokens have been added — $AERO from liquidity marketplace Aerodrome and $BSWAP, the token of Base-native DEX BaseSwap.

Read on to learn more: Coinbase L2 Base Chain Integrated on Hashport!

🌿The Hedera -native $DOVU token and its wrapped versions are now on Hashport. 🌳 The existing Ethereum-native $DOV and its HTS counterpart $DOV[hts] remain available on the portal. 🌉

Learn more in our latest blog: Hedera-native DOVU Integrated on Hashport!

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.

Website | Twitter | Reddit | Telegram | LinkedIn | YouTube | GitHub

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.

Token Integrations & SDK: Hashport October 2023 Review was originally published in Coinmonks on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

• Install MetaMask and HashPack
• Create an account in MetaMask
• Create a testnet Hedera account

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.

Website | Twitter | Reddit | Telegram | LinkedIn | YouTube | GitHub

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.

Installing and Using the Hashport Widget was originally published in Coinmonks on Medium, where people are continuing the conversation by highlighting and responding to this story.

In September, we introduced the Hashport SDK to the Hedera community. By making the SDK available to the public, it allowed developers of Hedera-native dApps to integrate Hashport directly onto their platforms.

The first piece in our Hashport SDK Series focused on the benefits of using the Hashport SDK. As a follow-up, in this blog, we will provide you with a step-by-step tutorial on installing and using the react client to build a minimal replica of the Hashport bridge using the @hashport/react-client package. By the end of this tutorial, you will have a simple React app that lets you bridge assets from the Hedera network to other supported EVM-compatible networks and back.

@hashport/react-client Tutorial

To get started, you must:

• Install MetaMask and HashPack
• Create an account in MetaMask
• Create a testnet Hedera account

Please note that the @hashport/react-client package works only with React. If you are looking to use Hashport on the backend or a different framework, consider looking at the @hashport/sdk package.

Initialise a React App

To get started, open a terminal and the following command:

npm create vite@latest

This will run a CLI tool that walks you through setting up a project with Vite. We’ll name this project hashport-react-tutorial, choose React as our framework and the TypeScript + SWC option. It’ll prompt you to run the following commands:

cd hashport-react-tutorial
npm install
npm run dev

If you run those you’ll see a basic project open at localhost:3000 in your browser. Go ahead and Ctrl + C in the terminal to stop the application and open your favourite IDE. I’ll be using VS Code.

Installation

Now that we have our react app set up, we’ll need to install @hashport/react-client and its peer dependencies.

npm install @hashport/react-client @rainbow-me/rainbowkit wagmi @hashgraph/sdk hashconnect

The Hashport bridge allows us to move funds between supported EVM-compatible chains and the Hedera network. We need a way to connect to both of those, so our solution is to use RainbowKit (@rainbow-me/rainbowkit and wagmi) for EVM wallets and HashPack (@hashgraph/sdk and hashconnect) for Hedera wallets.

Note: Since v1 of RainbowKit came out, wagmi migrated from its dependency on ethers.js to viem, so why aren’t we installing that, too? The @hashport/react-client is built on the framework agnostic @hashport/sdk which has viem as a dependency. That means installing @hashport/react-client will also install viem.

Before we start writing anything, we have one more thing we need to take care of. Both RainbowKit and Hashconnect have dependencies on a few node modules that are supported in the browser. To see why this is a problem, go to App.tsx, strip out the contents of the App component and add the following:

import ‘./App.css’;
import { createHashPackSigner, useHashConnect, HashportClientProviderWithRainbowKit } from "@hashport/react-client";

const App = () => {
  const { hashConnect, pairingData } = useHashConnect({ mode: 'testnet' });
  const hederaSigner = pairingData && createHashPackSigner(hashConnect, pairingData);

  return (
    <HashportClientProviderWithRainbowKit mode="testnet" 
hederaSigner={hederaSigner}>
      Hello World!
    </HashportClientProviderWithRainbowKit>
  )
}

Now try to run npm run dev in the terminal. When you go to your browser, you’ll see… nothing! Let’s open the dev tools to see why. Right-click and choose “Inspect”. You’ll notice an error message saying that global is not defined. That’s because global is the NodeJS equivalent of the window object in the browser, but the browser doesn’t know what to do with this. Fortunately, RainbowKit has provided a simple solution for this. Create a new file called polyfills.ts and add the following:

import { Buffer } from ‘buffer’;

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

export {};

Then go back to App.tsx and add this line at the top:

import “./polyfills”

Now if we try to run npm run dev again, you’ll see that everything loads up just fine! There’s a message saying Please connect signers for both EVM and Hedera networks, but we’ll take care of that in a minute. We’re finally ready to start developing!

Step 1: The Hashport contexts, RainbowKit, and HashPack

Now that things are working, let’s take a minute to understand what we have in App.tsx so far. The @hashport/react-client package uses React Context to manage state without having to pass props around. In this case, the HashportClientProviderWithRainbowKit component is a provider that gives us access to a number of utility hooks for managing state related to a transaction. It manages EVM Wallet connections under the hood with RainbowKit, but we still need to pass in a signer for Hedera. That’s where HashPack, the popular HBAR wallet, comes in. The @hashport/react-client library currently only supports Hedera connections with HashPack, but in the future, we plan to add more. (If you are up for the challenge, try submitting a PR here!) You can read up on how to connect HashPack with the hashconnect package, but to make things simpler, @hashport/react-client comes with a useHashConnect hook that manages connecting and disconnecting HashPack for you. One final thing to make note of is the mode prop that we pass to both the useHashConnect hook and the HashportClientProviderWithRainbowKit component. We pass testnet in so we can try making transactions without using real funds.

Note: hashconnect saves wallet connection data in localStorage but it does not reset itself if the app’s mode changes. If you are experiencing connection troubles when switching from testnet to mainnet and vice versa, try deleting the hashconnectData key in localStorage before reconnecting.

If we spin up the application, we get an error message asking us to connect our EVM and Hedera wallets. We can use the RainbowKit button to connect the EVM wallet, but what about the Hedera one? Update the code in App.tsx to match the following:

import ‘./App.css’;
import { createHashPackSigner, useHashConnect, HashportClientProviderWithRainbowKit } from "@hashport/react-client";
const App = () => {
  const { hashConnect, pairingData } = useHashConnect({ mode: 'testnet' });
  const hederaSigner = pairingData && createHashPackSigner(hashConnect, pairingData);
  const accountId = pairingData?.accountIds[0];

  return (
    <HashportClientProviderWithRainbowKit
      mode="testnet"
      hederaSigner={hederaSigner}
      renderConnectButton={(children, RainbowKitButton) => (
        <main>
          <h1>hashport</h1>
          <div className="button-group">
            <RainbowKitButton />
            <button onClick={() => hashConnect.connectToLocalWallet()}>
              {accountId ?? 'Connect HashPack'}
            </button>
          </div>
          {children}
        </main>
      )}
    >
      <div className="container">
        Hello World!
      </div>
    </HashportClientProviderWithRainbowKit>
  )
}

Here we’ve used the renderConnectButton prop to define how we want our wallet connection buttons to be displayed. The prop takes a function with two arguments: the children (i.e., everything inside the provider) and the RainbowKitButton. Running npm run dev should now look something like this:

It looks weird with the buttons stacked like that, so replace the styles in App.css with this:

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 0.5em
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}

.status-text {
  color: rgb(107, 129, 255);
  font-style: italic;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-block: 1rem
}

If you click the “Connect HashPack” button, your HashPack extension should pop open prompting you to connect. After connecting and updating the styles, you should have something like this:

There’s one more context we should add: ProcessingTransactionProvider. This context lets us use hooks related to the current state of a transaction. Depending on the kind of transaction, there may be a number of different steps, so it’s a good idea to update the user at each step. Add the following to App.tsx:

const App = () => {
  // …

  return (
    <HashportClientProviderWithRainbowKit
      // …
    >
      <ProcessingTransactionProvider>
        Hello World!
      </ProcessingTransactionProvider>
    </HashportClientProviderWithRainbowKit>
  )
}

With that, our application has everything needed to manage the state of a user’s transaction.

Step 2: Add token selection options and inputs

Now that we understand all the pieces that make it possible to develop with Hashport, let’s start adding some interactive elements. Create a new file SelectSource.tsx and add the following code:

import { AssetId, useBridgeParamsDispatch, useTokenList } from '@hashport/react-client';
import { ChangeEventHandler } from 'react';

export const SelectSource = () => {
  const { setSourceAsset } = useBridgeParamsDispatch();
  const { data: tokens } = useTokenList();

  const handleChooseSource: ChangeEventHandler<HTMLSelectElement> = e => {
    const sourceAsset = tokens?.fungible.get(e.target.value as AssetId);
    sourceAsset && setSourceAsset(sourceAsset);
  };

  return tokens ? (
    <select onChange={handleChooseSource}>
      <option value=""> - Choose source asset - </option>
      {Array.from(tokens.fungible.entries()).map(([id, token]) => (
        <option key={id} value={id}>
          {token.symbol}
        </option>
      ))}
    </select>
  ) : (
    <p>loading tokens…</p>
  );
};

The useTokenList hook fetches a list of all the tokens that are supported. It uses React Query under the hood, so you get all the benefits of their declarative API. Here, we just add a quick null check to make sure the data is there, and then we return the rest of the JSX. We’ve also added the useBridgeParamsDispatch. This hook returns callbacks for setting up a transaction. Here, we’ve defined a function handleChooseSource that takes care of selecting the sourceAsset (i.e., the token you want to bridge) by calling setSourceAsset. Pass that into the onChange property of select. Go back to App.tsx, import SelectSource.tsx and replace the “Hello World!” text with the component. If you run the app, you should see a small drop-down that has all the tokens Hashport supports.

Next, create a SelectTarget.tsx file and add this code:

import {
  AssetId,
  useBridgeParamsDispatch,
  useSelectedTokens,
  useTargetTokens,
  useTokenList,
} from '@hashport/react-client';
import { ChangeEventHandler } from 'react';

export const SelectTarget = () => {
  const { setTargetAsset } = useBridgeParamsDispatch();
  const { data: tokens } = useTokenList();
  const { targetAsset } = useSelectedTokens();
  const targetTokens = useTargetTokens();

  const handleChooseTarget: ChangeEventHandler<HTMLSelectElement> = e => {
    const targetAsset = tokens?.fungible.get(e.target.value as AssetId);
    targetAsset && setTargetAsset(targetAsset);
  };

  return tokens ? (
    <select onChange={handleChooseTarget}>
      <option value={''}> - To - </option>
      {targetAsset?.bridgeableAssets.map(({ assetId }) => {
        const asset = tokens?.fungible.get(assetId);
        if (!asset) return;
        return (
          <option key={assetId} value={assetId}>
            {asset.symbol}
          </option>
        );
      })}
      {targetTokens?.map(({ assetId, symbol }) => (
        <option key={assetId} value={assetId}>
          {symbol}
        </option>
      ))}
    </select>
  ) : (
    <p>loading tokens…</p>
  );
};

This code is similar to the SelectSource.tsx but there are two new hooks: useSelectedTokens and targetTokens. Each token on Hashport is only supported for a set number of target networks. The useTargetTokens hook makes it easy for us to show which tokens a user can bridge to. Note that it will only return a value if the user has already selected a source token. Then there’s the useSelectedTokens hook. This returns an object with two properties: sourceAsset and targetAsset. These represent the tokens a user has already chosen. Import this component in App.tsx and add it below the SelectSource component. Now, if you select a source token, you should be able to see all the possible tokens you can bridge in the “--To--” dropdown.

Time to add the amount input. Create an AmountInput.tsx file with this code:

import { useBridgeParamsDispatch, useSelectedTokens } from '@hashport/react-client';
import { ChangeEventHandler } from 'react';

export const AmountInput = () => {
  const { sourceAsset, targetAsset } = useSelectedTokens();
  const { setAmount } = useBridgeParamsDispatch();
  const handleAmount: ChangeEventHandler<HTMLInputElement> = e => {
    setAmount({
      amount: e.target.value,
      sourceAssetDecimals: sourceAsset?.decimals,
      targetAssetDecimals: targetAsset?.decimals,
    });
  };
  return <input placeholder="amount" onChange={handleAmount} />;
};

One thing to note about this file is the use of setAmount from useBridgeParamsDispatch. Tokens on the Hedera network have precision up to 8 decimals whereas EVM networks can have up to 18! This would obviously cause some issues if trying to bridge values that are too precise for Hedera to handle. So, we pass in the decimal places for each token so that the amount can be updated property. Import this component into App.tsx and place it right above the SelectSource component.

Next, we will add another input so we can define the receiving account. Add a new file RecipientInput.tsx with this:

import { useBridgeParamsDispatch } from '@hashport/react-client';
import { ChangeEventHandler } from 'react';

export const RecipientInput = () => {
  const { setRecipient } = useBridgeParamsDispatch();

  const handleRecipient: ChangeEventHandler<HTMLInputElement> = e => {
    setRecipient(e.target.value);
  };

  return <input placeholder="recipient" onChange={handleRecipient} />;
};

It’s important to think about where the tokens will be going. If we are going from Hedera to EVM, we should provide our EVM address as a hex string. If going in the other direction, we should input our Hedera address, which will look something like this: 0.0.555555. Import the component into App.tsx and place it between AmountInput and SelectSource.

Step 3: Add some UX touches

We have everything we need to set up a transaction. But what can we do to display the status of a transaction? Create another file TransactionStatus.tsx and add this:

import { useProcessingTransaction } from '@hashport/react-client';

export const TransactionStatus = () => {
  const processingTx = useProcessingTransaction();

  return (
    <p>
      Transaction Status: <span className="status-text">{processingTx.status}</span>
    </p>
  );
};

We have a new hook! This one is called useProcessingTransaction and it gives us access to a bunch of information about the current transaction (Remember the ProcessingTransactionProvider context we added earlier? That’s where this data is coming from). For now, we will just grab the status off the return value and display it to the user. Let’s import this into App.tsx and stick it at the top, above AmountInput.

Note: The status can be one of four values: “idle”, “processing”, “error”, or “complete”. If it’s “error”, the hook will also return the error message that occurred during the transaction.

Step 4: Add the Execute button

The last component we will add is a button to execute the transaction, so create ExecuteButton.tsx:

import {
  useBridgeParamsDispatch,
  useProcessingTransaction,
  useProcessingTransactionDispatch,
  useQueueHashportTransaction,
} from '@hashport/react-client';

export const ExecuteButton = () => {
  const { resetBridgeParams } = useBridgeParamsDispatch();
  const queueTransaction = useQueueHashportTransaction();
  const { executeTransaction, confirmCompletion } = useProcessingTransactionDispatch();
  const processingTx = useProcessingTransaction();

  const handleExecute = async () => {
    if (!queueTransaction) return;
    if (processingTx.status === 'complete') {
      confirmCompletion();
      resetBridgeParams();
      return;
    }
    try {
      if (processingTx.id) {
        await executeTransaction(processingTx.id);
    } else {
      const id = await queueTransaction();
      await executeTransaction(id);
    }
  } catch (error) {
    console.log(error);
  }
};

return (
  <button
    disabled={!queueTransaction || processingTx.status === 'processing'}
    onClick={handleExecute}
  >
    {processingTx.status === 'processing'
      ? 'In progress…'
      : processingTx.status === 'complete'
      ? 'Confirm'
      : 'Execute'}
   </button>
  );
};

This one has a lot more going on, so let’s break it down starting with the handleExecute function. First, we make sure that queueTransaction is defined. This comes from the useQueueHashportTransaction hook, which validates all the bridge parameters and fetches a list of steps required to execute a transaction. If any of the parameters are unset, it will return undefined. Next, we check the transaction status. This uses the same hook we saw earlier: useProcessingTransaction. If the status is ‘complete’, we should clear out any leftover state. So, we call confirmCompletion from useProcessingTransactionDispatch and resetBridgeParams from useBridgeParamsDispatch. After that, we check to see if processingTx.id is defined. This is helpful for recovering transactions that encountered an error. If there’s an id, we have a transaction on the queue that we need to complete. We do that by passing this id to executeTransaction, which we got from useProcessingTransactionDispatch. Where does this id come from, you ask? If we look at the next line, we can see that it comes from queueTransaction. When a transaction is queued, this id is generated to internally keep track of transactions. While it’s only possible to execute one transaction at a time, we can queue up multiple transactions. For now, though, we will just stick to queuing and executing one at a time. Finally, we take this handleExecute callback and pass it to the onClick of the button in the return statement. We then add a few conditions to disable the button so we can’t click it if the params aren’t set or if we are already working on a transaction. Import this last component into App.tsx at the bottom of the containing div.

Step 5: Submit a transaction!

We are ready to try our first transaction! But before we do that, we need to get some funds! If you don’t have one already, head over to the Hedera portal to create a testnet account. These accounts are topped off with 10,000 testnet HBAR every 24 hours, which is plenty for what we’ll be doing. Next, if you don’t already have an EVM account, create one in MetaMask. We’ll need to make sure our EVM account has enough ETH to pay for gas. We’ll be testing things out on Sepolia Testnet, so head over to the Sepolia Faucet to have 0.5 Sepolia ETH deposited into your account.

Note: ALWAYS pay attention to what networks you are on and what transactions you are signing for. In our case, we are using testnet, but if the mode prop is omitted in the useHashConnect hook and HashportClientProviderWithRainbowKit, it defaults to mainnet.

With your testnet accounts, connect to the app we’ve created and select HBAR as the source and HBAR[sep] as the target. Enter an amount that’s above the minimum (around 1000 should suffice), paste in your EVM address, and hit that “Submit” button!

You should get a request pop up in your HashPack wallet to execute the deposit transaction. Accept it and follow the rest of the prompts. Congratulations! You just built a bridging app! The only thing left is to get this ready for production.

Step 6: Create a build

We’re almost done. The last thing to do is create a build. Run this command:

npm run build && npm run preview

This will create a build that’s ready for production and output the files into a new directory called dist. The preview command serves the files from the build so you can confirm that everything is working as intended. If you want to serve this as a static frontend application, just serve the contents of the newly created dist directory.

Conclusion

To summarise, we used the @hashport/react-client library to set up a simple application that lets you bridge assets from the Hedera network to and from supported EVM networks. This is just a minimal example; there are lots of things you can do to improve the user experience. If you run into any issues along the way, create an issue on GitHub. Thanks for reading, and have fun building!

Feel free to reach out via our contact form or slide into our Twitter (X) DMs if you’re interested in learning more.

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.

Website | Twitter | Reddit | Telegram | LinkedIn | YouTube | GitHub

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.

Using the Hashport SDK & React Client was originally published in Coinmonks on Medium, where people are continuing the conversation by highlighting and responding to this story.