📝 Table of Contents

• About
• Getting Started
• Usage
• Built Using
• Authors

🧐 About

The Transaction UI SDK provides a seamless interface for managing Asset, Items, and Attribute workflows within React applications. Designed to simplify the integration of complex transactional flows, the SDK includes pre-built UI components that are optimized for performance. Developers can easily incorporate asset management, item interactions, and attribute handling into their projects, reducing development time while maintaining flexibility and scalability. With detailed documentation and robust support for React, this SDK is a powerful tool for building dynamic, transaction-focused applications.

🏁 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

No prerequisites are required to install the project.

Installing

A step by step series of examples that tell you how to get a development env running.

Use below command to install the SDK to your project

npm install octopian-ui-sdk

Initializing

In order to use the sdk after installation you need to initialize it, like below.

import { Init } from 'octopian-ui-sdk';

Init('Your-API-Key',"Doman-Name","Auth Token")

you will need to enter the API Key, Domain and auth token provided from login.

🔧 Running the example

find below steps to run the provided example

Break down into end to end tests

open the app in vs code then in terminal redirect to example folder using below

cd example

then install packages using

npm i

then run the app using below command

npm start

• note that you may need to change service id & token that was set in the sample app

🎈 Usage

here is how to use the transactionCatalog View

import { transactionCatalog } from 'octopian-ui-sdk';

function App() {
  return (
    <div className="App">
       {transactionCatalog(
        service_ID, // service id to complete the journey with (Required)
        asset_ID, // asset id to complete the journey with, set to zero if not available (Required)
        item_ID, // item id to complete the journey with, set to zero if not available (Required)
        service_Alias, // service alias to get required transaction journey, set as empty if service id available (Required)
        (result)=>{console.log(result)},// success response callback
        (error)=>{console.log(error)},// failure response callback
        customParameters, // custom parameters which contains a key as alias and a value that will be set to parameters value which will be used to pass custom values to be added to request
        {backgroundColor:"hex color", mainColor:"hex color", headerColor:"hex color", darkMode: boolean},// change colors and mode for the views
        hide_grouping, //boolean with default value (true) which show the asset and items as grid view with no grouping, if set to false it will show groups and assets in a list view instead
        LocalizationMessages, // a set of editable keyword that are in the views
        languageCode, // language code 'en' or 'ar' 
        flowDirection // rtl | ltr sets the flow either from right to left or left to right
       )
        }  

      
    </div>
  );
}

export default App;

here is how to use the viewRequest View

import { viewRequest } from 'octopian-ui-sdk';

function App() {
  return (
    <div className="App">
       {viewRequest(
        RequestId, // Request ID either provide or own request id to complete the journey with (Required)
        IsProvider, // boolean with default value (false) which show wether the request is provider or own request
        (result)=>{console.log(result)},// success response callback
        (error)=>{console.log(error)},// failure response callback
        {backgroundColor:"hex color", mainColor:"hex color", headerColor:"hex color", darkMode: boolean},//color palette change colors and mode for the views (optional)
        localizationMessages // localization messages for changing the text of the views (optional)
        languageCode, // language code 'en' or 'ar' 
        flowDirection // rtl | ltr sets the flow either from right to left or left to right
      )
        }  
    </div>
  );
}

here is how to use the payment Button View

import { paymentButton } from 'octopian-ui-sdk';

function App() {
  return (
    <div className="App">
       {paymentButton(
        service_ID, // service id to complete the journey with (Required)
        asset_ID, // asset id to complete the journey with, set to zero if not available (Required)
        amount, // amount to complete the journey with (Required)
        description, // description to complete the journey with (Required)
        (error)=>{console.log(error)},// failure response callback
        button_color,//color palette change colors and mode for the views
        text_color,//color palette change colors and mode for the views
        button_text,//color palette change colors and mode for the views
      )
        }  
    </div>
  );
}

⛏️ Built Using

• React - Web Framework
• NodeJs - Server Environment

✍️ Authors

• @Octopian - Octopian global services