📝 Table of Contents

• Problem statement
• Idea / Solution
• Dependencies / Limitations
• Getting Started
• Setting up a local environment
• Technology Stack
• Authors
• Stake and support

🧐 Problem statement

The ideal scenario envisions a streamlined integration process with Bakrypt.io 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 Bakrypt.io 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.

• Since version 0.5.0 the module includes Stake Address authentication. The authentication handshake is done after signing and validating the CIP-8 message. You can disable the wallet authentication ("Connect Wallet") by setting the bakToken in the BakBridgeOptions.

Authorization and Access Tokens

🏁 Getting Started

You can install the Bak Bridge module via npmjs.com or by installing it locally.

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({
        container: bridgeRef.current, # Required
        client: {
            baseUrl: "https://testnet.bakrypt.io/v1/", # Optional: Defaults to https://bakrypt.io/v1/ for mainnet
            headers: { 'X-CSRFToken': "<additional headers>" }, # Optional: Add additional headers to the axios client.
        },
    });
  }, [bridgeRef]);

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

}

Local installation.

Download the latest release, and unzip the package into your local directory.

# [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: "https://testnet.bakrypt.io/v1/", # Defaults to https://bakrypt.io/v1/ for mainnet
            headers: { 'X-CSRFToken': "<additional headers>" }, # Optional: Add additional headers to the axios client.
        },
    });
</script>

API

Common Props Ref

Property | Description | Type | Default --- | --- | --- | --- container | DOM container where the app will be loaded. | HTMLElement - required | undefined bakToken | Bearer access token for the session. | string | undefined initial | Valid JSON string representing a collection of one or more assets. | IntakeAssetProps as string | undefined transactionUuid | Bakrypt Transaction UUID. Used to preload an existing transaction and it's assets | string | undefined showTransaction | Open invoice drawer on load. | boolean | false disableForm | Converts the form into a Read-Only collection. | 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: "https://bakrypt.io/v1/" }

Simple Bridge

  new BakBridge({
    container: document.createElement('div')
  })

Extended Bridge

  new BakBridge({
    bakToken: 'DozHXHQj2QBXuYGJa0WSc97SdJR4o6CZfHkql9JFV3A',
    container: document.createElement('div'),
    client: {
      baseUrl: 'https://testnet.bakrypt.io/v1/',
      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: "https://testnet.bakrypt.io" }

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

Prerequisites

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

• React - Web interface
• Antd - Design System
• Tailwind - CSS Utilities
• Formik - Form Library

✍️ Authors

• @bakrypt_io - Idea & Initial work

🎉 ADA Stake Pool

How to start delegating ADAs?

https://bakrypt.io/pool

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.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.