TypeScript icon, indicating that this package has built-in type declarations

0.4.1 • Public • Published


BAK Bridge

Status License

Integrate into your existing platform, this powerful tool empowers you to transform your digital assets into valuable NFTs with ease. The BakBridge intuitive interface ensures a seamless minting experience. You can design and mint native tokens directly into your wallet, simplifying the entire process.

📝 Table of Contents

🧐 Problem statement

The ideal scenario envisions a streamlined integration process with API for transforming digital assets into NFTs. The goal is to encapsulate common use cases with a React application, providing other integrations and applications with a preloaded solution that accelerates the integration with API.

The goal is to create a standardized and efficient method for handling asset validation and file uploads across various widgets and endpoints. This approach will significantly reduce the time and effort required to upload files, ensuring a seamless and user-friendly experience for integrating platforms.

💡 Idea / Solution

Bak Bridge is a drop-in module for your users to preload, create and mint Cardano native tokens using Bakrypt's API. Bak Bridge handles authentication, asset validation, transaction configuration and error handling.


⛓️ Dependencies / Limitations

What are the dependencies to run the app?

  • Register to obtain your account token.

  • The App requires a Bearer Access Token to communicate with Bakrypt's API. Follow the documentation to learn more about our authentication schema.

Authorization and Access Tokens

🏁 Getting Started

You can load Bak Bridge via IPFS or by installing it locally.

CDN installation

# [index].html

<div id="BakBridgeContainer"></div>

<link rel="stylesheet" href="bakbridge/dist/main.css" type="text/css" media="all" />
<script src="bakbridge/dist/index.js"></script>

<script type="text/javascript">
    // Your code here, ensuring BakBridge is defined and ready to use
    window.onload = () => new BakBridge({
        bakToken: '<Bearer Access Token>',
        container: document.querySelector('#BakBridgeContainer'),
        client: {
            baseUrl: "", # Defaults to for mainnet
            headers: { 'X-CSRFToken': "<additional headers>" }, # Optional: Add additional headers to the axios client.

npm installation

npm install bakbridge
# Component.tsx

import BakBridge from "bakbridge";
import "bakbridge/dist/main.css";

function Component = () => {

  const bridgeRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!bridgeRef.current) return;
    new BakBridge({
        bakToken: '<Bearer Access Token>', # Required
        container: bridgeRef.current, # Required
        client: {
            baseUrl: "", # Optional: Defaults to for mainnet
            headers: { 'X-CSRFToken': "<additional headers>" }, # Optional: Add additional headers to the axios client.
  }, [bridgeRef]);

  return (<div ref={bridgeRef}></div>)



Common Props Ref

Property Description Type Default
bakToken Bearer access token for the session. string - required undefined
container DOM container where the app will be loaded. HTMLElement - required undefined
initial Valid JSON string representing a collection of one or more assets. IntakeAssetProps as string undefined
showTransaction Open invoice drawer on load. boolean false
onLoad Trigger after the application is initiated. function () -
onSuccess Trigger after successfully submitting the request. function ( transaction: TransactionProps, collection: OutputAssetProps[] ) -
onCLose Trigger after the application is closed. function ( collection: AssetProps[] ) -
client Axios client custom configurations. {baseUrl?: string;headers?: { [key: string]: string };}; {baseUrl: "" }

Simple Bridge

  new BakBridge({
    bakToken: "<the token>",
    container: document.createElement('div')

Extended Bridge

  new BakBridge({
    bakToken: 'DozHXHQj2QBXuYGJa0WSc97SdJR4o6CZfHkql9JFV3A',
    container: document.createElement('div'),
    client: {
      baseUrl: '',
      headers: { 'X-CSRFToken': 'mrhPuGLbgC7tTompVp11' },
    // transactionUuid: '1d60d7d8-0294-4488-a534-fd27c2ed7ad7', # Existing transaction uuid will overwrite any 'initial' values 
    // showTransaction: true, # This will open the invoice drawer if the transaction exists.
    initial: `[{"blockchain":"ADA","name":"aaaaaa","asset_name":"aaaaaa","image":"ipfs://Qmb8ytDTFfsT7LrkpHBaMpohtAL9kK4pnxWJBMTDx1pbJG","amount":1,"description":null,"attrs":{"111":"11111","2222":"2222"},"files":[{"name":"fdsgfsd","src":"ipfs://QmYf6ZyefsJdieM6sX9knbtYhTkjsTMZ9booBPvmigpnMu"}]`,
    onSuccess: (
      transaction: TransactionProps,
      collection: OutputAssetProps[]
    ) => {
      console.log('The form was successfully submitted')
      console.log(transaction, collection);
    onLoad: () => {
      console.log('The application is loaded!');

PreProd Network

To access PreProd network set the Axios client: { baseUrl: "" }

🚀 Deployment

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See getting started for notes on how to deploy the project on a live system.


pnpm install

Installs all the required libraries.

pnpm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

pnpm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

pnpm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

⛏️ Built With

✍️ Authors

🎉 ADA Stake Pool

How to start delegating ADAs?

Visit our website to learn more on how to start staking and earning rewards. This is a great way to support the development of the project with good incentives for our delegators.

Bakrypt logo

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.




Package Sidebar


npm i bakbridge

Weekly Downloads






Unpacked Size

6.46 MB

Total Files


Last publish


  • wolfie18