cyb-ts

[Edit section]

[Copy link]

• • •

The cyb-ts repository implements a decentralized application for the Cyber network, providing a user interface and functionality for interacting with the blockchain, managing IPFS content, and facilitating various decentralized features. It serves as a client-side application that allows users to interact with the Cyber network, create and manage cyberlinks, handle transactions, and participate in network governance.

The application is built using React and TypeScript, with Redux for state management. The core functionality is divided into several key areas:

1. User Interface: The application provides a comprehensive set of reusable UI components in the …/components directory. These components include basic elements like buttons and inputs, as well as more complex components for data visualization and specialized content display. The main application pages and containers are implemented in the …/pages and …/containers directories, providing functionality for features such as the Brain visualization, Hub management, and Portal interface.

2. Blockchain Interaction: The application interacts with the Cyber blockchain through services implemented in the …/neuron and …/lcd directories. These services handle tasks such as sending transactions, querying blockchain data, and managing user accounts. The blockchain interaction flow typically involves:

   • Constructing transaction messages using the Soft3MessageFactory class
   • Sending transactions to the blockchain using the appropriate service methods
   • Querying blockchain data using the LCD (Light Client Daemon) API

3. IPFS Integration: The application integrates with IPFS for decentralized content storage and retrieval. The IPFS functionality is implemented in the …/ipfs directory, providing methods for adding content to IPFS, retrieving content, and managing IPFS nodes. The IPFS integration process typically includes:

   • Adding content to IPFS using the addIfpsMessageOrCid function
   • Retrieving content from IPFS using the appropriate IPFS node implementation (e.g., HeliaNode, JsIpfsNode, or KuboNode)
   • Managing IPFS content caching using the ipfsCacheDb function

4. Cyberlinks: A core feature of the application is the ability to create and visualize cyberlinks, which are connections between particles (content) on the Cyber network. The cyberlink functionality is implemented in the …/cyberlinks directory. The process of creating and visualizing cyberlinks typically involves:

   • Creating cyberlinks using the appropriate blockchain transaction
   • Fetching cyberlink data using utility functions like getLink, getFromLink, and getToLink
   • Visualizing cyberlinks using the CyberlinksGraph component

5. State Management: The application uses Redux for state management, with the core Redux functionality implemented in the …/redux directory. The state management system includes:

   • Feature slices for managing different aspects of the application state (e.g., current account, IBC denominations, liquidity pools)
   • Custom Redux hooks (useAppDispatch and useAppSelector) for interacting with the Redux store
   • Asynchronous state management using Redux Thunk

The application also includes several other important features, such as the Adviser for interactive content display, the Scripting Engine for executing Rune scripts, and the Queue Management system for prioritizing IPFS content fetching tasks. These features are implemented in their respective directories within …/features and …/services.

Key design choices in the application include:

• Modular architecture with clear separation of concerns between UI components, services, and state management
• Use of React hooks and functional components for improved performance and code readability
• Integration of IPFS for decentralized content storage and retrieval
• Custom implementation of blockchain interaction services to support the specific requirements of the Cyber network

For more detailed information on specific components and features, refer to the relevant sections in this wiki, such as User Interface Components, Core Features, and Backend Services.

User Interface Components

[Edit section]

[Copy link]

References: src/components, src/layouts

• • •

The …/components directory contains a collection of reusable React components that form the foundation of the application's user interface. These components are designed to be modular, customizable, and easily integrated into various parts of the application.

Core UI Components

[Edit section]

[Copy link]

References: src/components/Button, src/components/Input, src/components/MainContainer, src/components/LinearGradientContainer

• • •

The Button component in …/Button provides a customizable button with optional image support. The ButtonImgText component extends this functionality, allowing for an image to be displayed alongside the button text.

Data Visualization Components

[Edit section]

[Copy link]

References: src/components/Table, src/components/DonutChart, src/components/SearchItem

• • •

The Table component in …/Table.tsx provides a reusable table with sorting functionality. Key features include:

Navigation and Menu Components

[Edit section]

[Copy link]

References: src/components/Tabs, src/components/appMenu, src/layouts

• • •

The navigation and menu components in the Cyb-TS application provide a versatile set of UI elements for user interaction and navigation. These components are primarily located in the …/appMenu directory.

Specialized Display Components

[Edit section]

[Copy link]

References: src/components/contentIpfs, src/components/TableTxsInfinite, src/components/particle

The ContentIpfs component in …/contentIpfs.tsx handles rendering various types of IPFS content. It determines the appropriate rendering method based on the content type:

Application Pages and Containers

[Edit section]

[Copy link]

References: src/pages, src/containers

• • •

The application's structure is built around several key pages and containers, each handling specific functionality:

Brain Visualization

[Edit section]

[Copy link]

References: src/pages/Brain

• • •

The Brain page displays a graph visualization of the user's cyberlinks using the CyberlinksGraphContainer component. This component is responsible for rendering the interactive graph, allowing users to explore their cyberlink connections visually.

Hub Management

[Edit section]

[Copy link]

References: src/pages/Hub

• • •

The Hub page displays tables for channels, networks, and tokens. The main components are:

Key and Account Management

[Edit section]

[Copy link]

References: src/pages/Keys

• • •

The Keys page manages user accounts and keys through several interconnected components:

Portal Interface

[Edit section]

[Copy link]

References: src/pages/Portal

• • •

The Portal interface is implemented in the …/Map directory, providing a map-like visualization with interactive links and icons. Key components include:

Settings and Configuration

[Edit section]

[Copy link]

References: src/pages/Settings

• • •

The settings and configuration options are primarily managed through components in the …/Settings directory. The Settings component in …/Settings.tsx defines the main routing structure for the settings page, rendering the Layout component as the main container and setting up nested routes for specific settings sections like IPFS, Keys, and Audio.

Social Media Integration

[Edit section]

[Copy link]

References: src/pages/Social

• • •

The Social component in …/Social.tsx serves as the main container for social media and community-related features. It renders instances of Discord, Twitter, Telegram, and GitHub components, along with additional hub links and email contact information.

Oracle Functionality

[Edit section]

[Copy link]

References: src/pages/oracle

• • •

The Oracle functionality is implemented across two main components: the Learn page and the Oracle landing page.

Robot Features

[Edit section]

[Copy link]

References: src/pages/robot

• • •

The Robot Features are implemented primarily in the …/robot directory. The main components include:

Teleport Feature

[Edit section]

[Copy link]

References: src/pages/teleport

• • •

The Teleport feature enables users to transfer assets between different blockchain networks using the Inter-Blockchain Communication (IBC) protocol. The main components are:

WASM Integration

[Edit section]

[Copy link]

References: src/containers/wasm

• • •

The WASM integration in the Cyb-TS application is primarily handled in the …/wasm directory. This functionality allows users to interact with WebAssembly codes and contracts on the blockchain.

Governance System

[Edit section]

[Copy link]

References: src/containers/governance

• • •

The governance system is implemented primarily in the …/governance directory. Key components include:

Energy Management

[Edit section]

[Copy link]

References: src/containers/energy

• • •

The RoutedEnergy component in …/index.tsx manages energy-related functionality. It fetches and displays information about energy slots, income, and outcome using hooks like useGetSlots and useGetSourceRoutes.

IPFS Content Handling

[Edit section]

[Copy link]

References: src/containers/ipfs

• • •

The Ipfs component in …/ipfs.tsx manages IPFS content handling:

Core Features

[Edit section]

[Copy link]

References: src/features, src/services

• • •

The application's core features revolve around blockchain interactions, IPFS integration, and cyberlinks management. These features are implemented across various modules:

Cyberlinks

[Edit section]

[Copy link]

References: src/features/cyberlinks, src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer.tsx, src/features/cyberlinks/GraphNew/GraphNew.tsx, src/features/cyberlinks/GraphFullscreenBtn/GraphFullscreenBtn.tsx, src/features/cyberlinks/graph/GraphActionBar/GraphActionBar.tsx

• • •

The CyberlinksGraphContainer component in …/CyberlinksGraphContainer.tsx acts as a wrapper:

Cyberlink Management Services

[Edit section]

[Copy link]

References: src/services/neuron/neuronApi.ts

In the …/neuronApi.ts file, the management of cyberlinks is facilitated through a set of functions designed to streamline the creation and broadcasting process. The service introduces enhanced capabilities for handling multiple cyberlinks and transaction hashes, which are pivotal for the efficient operation of the Cyber network.

IPFS Integration

[Edit section]

[Copy link]

References: src/features/ipfs, src/services/ipfs

• • •

The IPFS integration in the Cyber ecosystem is implemented through three main node types: HeliaNode, JsIpfsNode, and KuboNode, each providing different approaches to interacting with the IPFS network. These implementations are located in …/impl.

Blockchain Interactions

[Edit section]

[Copy link]

References: src/services/neuron, src/features/staking

• • •

The neuronApi module in …/neuronApi.ts provides core functionality for interacting with the Cyber blockchain:

Studio Feature

[Edit section]

[Copy link]

References: src/features/studio, src/features/studio/Studio.tsx, src/features/studio/StudioWrapper.tsx, src/features/studio/ActionBar.tsx, src/features/studio/Studio.module.scss

• • •

The Studio feature serves as the creative hub within the CYB-TS application, where users can craft and manage markdown content, orchestrate keywords, and construct cyberlinks. Central to this feature is the Studio component, which integrates various sub-components to offer a seamless content creation and management experience.

Studio Editor Components

[Edit section]

[Copy link]

References: src/features/studio/components/Editor/MilkdownEditor.tsx, src/features/studio/components/Editor/feature/feature.ts, src/features/studio/components/Editor/plugins/cybSyntax/pluginCybSyntax.ts

The MilkdownEditor component in …/MilkdownEditor.tsx integrates the Milkdown library to provide a Markdown editor within the Studio feature. It is designed to allow users to edit and update Markdown content, with an update method exposed through a React ref for programmatic content updates. The component accepts content, onChange, and milkdownRef props to handle initial content, content changes, and external control of the editor, respectively.

Studio Context Management

[Edit section]

[Copy link]

References: src/features/studio/studio.context.tsx

• • •

The file …/studio.context.tsx introduces a React context that is essential for the studio feature, focusing on the management of markdown content, keywords, and cyberlink transactions. It encapsulates several state variables and functions that are crucial for the studio's functionality:

Studio Utility Functions

[Edit section]

[Copy link]

References: src/features/studio/utils/utils.ts

• • •

Within the Studio feature of the Cyber network's decentralized application, a set of utility functions in …/utils.ts plays a crucial role in managing cyberlinks and keywords. These functions are essential for ensuring the integrity and usability of the cyberlink structures within the network.

Cybernet

[Edit section]

[Copy link]

References: src/features/cybernet

The Cybernet application is implemented in …/cybernet, with the main UI components located in …/ui. The application manages subnets and delegation through several key components:

Sense

[Edit section]

[Copy link]

References: src/features/sense

• • •

The SenseItem type represents individual sense items, containing properties like id, transactionHash, type, meta, timestamp, memo, and from. The formatApiData() function transforms API response data into the SenseItem format.

IBC History

[Edit section]

[Copy link]

References: src/features/ibc-history

• • •

The HistoryContext and HistoryContextProvider in …/historyContext.tsx manage the IBC transaction history. Key functionalities include:

Scripting Engine

[Edit section]

[Copy link]

References: src/services/scripting

• • •

The Rune scripting engine, implemented in …/engine.ts, provides core functionality for executing Rune scripts and interacting with the OpenAI API. Key components include:

Queue Management

[Edit section]

[Copy link]

References: src/services/QueueManager

• • •

The QueueManager class manages a queue of IPFS content fetching tasks, prioritizing and executing them based on various factors. Key features include:

Time History

[Edit section]

[Copy link]

References: src/features/TimeHistory

• • •

The Time History feature tracks and displays the user's recent actions and their timestamps. The core functionality is implemented in …/TimeHistory.tsx:

Adviser

[Edit section]

[Copy link]

References: src/features/adviser

• • •

The Adviser component provides an interactive and customizable content display with audio narration capabilities. Key features include:

State Management

[Edit section]

[Copy link]

References: src/redux, src/hooks

• • •

The Redux-based state management system in the application is implemented using the @reduxjs/toolkit library. The state is organized into several slices, each managing a specific aspect of the application's data.

Redux Store Configuration

[Edit section]

[Copy link]

References: src/redux/store.ts

• • •

The Redux store is configured using configureStore from @reduxjs/toolkit. Key aspects:

Redux Slices and Reducers

[Edit section]

[Copy link]

References: src/redux/features, src/redux/reducers

• • •

Redux slices and reducers manage different aspects of the application state:

Custom Redux Hooks

[Edit section]

[Copy link]

References: src/redux/hooks.ts

• • •

Two custom React Redux hooks are defined in …/hooks.ts:

Asynchronous State Management

[Edit section]

[Copy link]

References: src/redux/features, src/redux/actions

• • •

Asynchronous state management in the Redux store is primarily handled through thunk actions and side effects in the feature slices. The pocket slice in …/pocket.ts demonstrates this approach:

Backend Services

[Edit section]

[Copy link]

References: src/services

The backend services of the application are primarily implemented in the …/services directory, which contains various subdirectories for specific functionalities.

Database Management

[Edit section]

[Copy link]

References: src/services/CozoDb

• • •

The createCozoDb() function in …/cozoDb.ts initializes and manages a CozoDb instance, providing methods for database operations:

Blockchain Interaction

[Edit section]

[Copy link]

References: src/services/backend/services, src/services/lcd, src/services/neuron

• • •

The DbApiWrapper class in …/DbApi.ts serves as the primary interface for blockchain interactions. It provides methods for managing transactions, cyberlinks, and other blockchain-related data:

IPFS Integration

[Edit section]

[Copy link]

References: src/services/ipfs

• • •

The IPFS integration in the Cyber project is implemented through three main node types: HeliaNode, JsIpfsNode, and KuboNode, all of which implement the IpfsNode interface. These classes are defined in …/impl.

Community Management

[Edit section]

[Copy link]

References: src/services/community

• • •

The community management functionality is implemented in the …/community directory. Two main functions handle the core operations:

Relayer Service

[Edit section]

[Copy link]

References: src/services/relayer

• • •

The IBC relayer service is implemented in the …/relayer directory, with the main functionality provided by the relay function in …/relay.ts. This function sets up and manages the relaying process between two blockchain networks using the IBC protocol. Key components include:

Service Worker

[Edit section]

[Copy link]

References: src/services/service-worker

The service worker, implemented in …/service-worker.ts, provides caching and offline functionality for the Cyb.ai application. Key features include:

Utility Functions

[Edit section]

[Copy link]

References: src/utils, src/hooks

The …/utils directory contains a collection of utility functions and helpers used throughout the application. These utilities cover a wide range of functionality, including blockchain network detection, address validation, and data conversion.

Date and Time Handling

[Edit section]

[Copy link]

References: src/utils/date.ts

• • •

The …/date.ts file provides utility functions for date and time handling:

Asynchronous Operations

[Edit section]

[Copy link]

References: src/utils/async

• • •

The …/async directory provides utilities for efficient asynchronous data processing and error handling. Key functionalities include:

IPFS Integration

[Edit section]

[Copy link]

References: src/utils/ipfs

• • •

The …/helpers.ts file provides utility functions for interacting with the IPFS network:

Application Menu Generation

[Edit section]

[Copy link]

References: src/utils/appsMenu

• • •

The getMenuItems() function in …/appsMenu.ts generates the main application menu for the Cybernet application. It returns an array of menu item objects, each representing a different application or feature within the platform.

Search and Data Retrieval

[Edit section]

[Copy link]

References: src/utils/search

The …/utils.ts file contains utility functions for performing searches and retrieving data from the Cyber network. Key functionalities include:

Logging and Error Handling

[Edit section]

[Copy link]

References: src/utils/logging

• • •

The custom logging system in …/logging provides error interception and cross-window communication features. Key components include:

Miscellaneous Utilities

[Edit section]

[Copy link]

References: src/utils/utils.ts

The utils.ts file contains various utility functions for common tasks: