Integrate Bakrypt.io 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.
- Problem statement
- Idea / Solution
- Dependencies / Limitations
- Getting Started
- Setting up a local environment
- Technology Stack
- Authors
- Stake and support
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.
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.
What are the dependencies to run the app?
-
Register to obtain your account token.
-
The App requires a
Bearer Access Tokento 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
bakTokenin the BakBridgeOptions.
Authorization and Access Tokens
You can install the Bak Bridge module via npmjs.com or by installing it locally.
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>)
}
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>
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/" } |
new BakBridge({
container: document.createElement('div')
})
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!');
},
});
To access PreProd network set the Axios client: { baseUrl: "https://testnet.bakrypt.io" }
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.
Installs all the required libraries.
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.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
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!
- @bakrypt_io - Idea & Initial work
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.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.