SyntraLink's Editor is composed of three main components: the editor page, the left sidebar, and the right sidebar. The editor page is where the dynamic content creation takes place, leveraging a function that generates, wraps, and renders the page contents within a drag-and-drop context, based on the configuration retrieved from the InterPlanetary File System (IPFS).
Overview of SyntraLink Editor Components
Left Sidebar
Is pivotal for interaction with the SyntraLink dashboard's smart contract, the user's contract, and IPFS. It is organized into several key areas:
Page Configuration Menu: This section allows users to specify the page's display format and settings, directly influencing the dynamic content creation process. Element Addition: Users can add elements to the page's configuration file through dedicated functions that communicate with the global context, enhancing the page's functionality and interactivity. Template Selection Menu: This feature offers a selection of predefined templates that users can apply as the page's configuration, simplifying the design process by providing standard layouts and settings.
AI Component: An innovative addition that integrates an API call to OpenAI, delivering specific content that can inform logic additions to standard contracts. This component also includes a deployer that interacts with a compilation server running Solidity and JavaScript, facilitating the integration of AI-generated insights into the platform.
NFTs Component: Specifically designed for the ERC-721 standard, this component enables users to perform a "lazymint" function on the SyntraNFTDrop contract. It allows for the mixing of traits, uploading artwork to IPFS, and finally invoking the lazymint function to assign imagery to tokens, streamlining the NFT creation process.
SetClaimCondition Component: Exclusive to SyntraLink's NFT Drops, this interface allows for user-friendly setting of NFT claiming conditions through the setClaimCondition() function of the SyntraNFTDrop contract, ensuring a seamless user experience in managing NFT distributions.
Right Sidebar
Focuses on editing the page's configuration file, offering tools and functionalities tailored to customize the user's project with precision and flexibility. Together, these components form a comprehensive ecosystem for dynamic content creation, smart contract interaction, and NFT management, encapsulated within the SyntraLink editor platform.
As a seventh option, the SyntraLink editor introduces the "Save Project" component, which is designed to save the project's content into a JSON file and publish it on the InterPlanetary File System (IPFS). This file becomes the reference point for subsequent renderings of the page within the Syntra systems, ensuring continuity and accessibility of the project data.
Additionally, the right menu of the SyntraLink editor is dedicated to the customization of the page's CSS, providing a comprehensive suite of tools for precise visual modifications. This menu includes: Background:
For setting the background properties of the page or components.
BordersInput: To adjust border styles, widths, and radii.
ColorsInput: For selecting and applying color schemes.
DimensionsInput: To specify height, width, and other dimension-related properties.
Filters: For applying visual effects like blur, brightness, and contrast.
FlexBox: To manage layout using the Flexbox model, adjusting alignment, direction, and spacing. FontsInput: For font family, size, weight, and other typography settings.
Grid: To control layout using the CSS Grid layout system.
MarginsInput: For setting the margin space outside of borders.
Others: A category for additional CSS properties not covered in the above categories.
PositioningInput: For controlling the positioning of elements (static, relative, absolute, fixed, or sticky).
Shadows: To apply box-shadow or text-shadow effects for depth and emphasis.
Each of these components in the right menu allows for detailed and specific adjustments to the visual aspects of the page, enabling creators to fine-tune the appearance of their projects with precision.
Enhancing User Interactivity
SyntraLink editor enriches its functionality with the inclusion of draggable elements, designed to enhance user interactivity and integration with blockchain technologies. These elements are pivotal in creating a dynamic and interactive environment within the editor. They include:
Text: A component that allows users to modify and customize text content directly within the editor, offering flexibility in content creation and layout design.
Image: This component provides the capability to upload and manage images, enabling users to visually enrich their projects with graphical elements.
WalletChecker: A specialized component that invokes the walletCheck function from a contract. It utilizes a JSON file stored on IPFS and Merkle trees to verify whether a user belongs to the whitelist of a specific project, ensuring controlled access based on predefined criteria.
Web3 Button: The cornerstone of the editor, this component allows for the connection to any contract, whether deployed internally by the user or externally. It enables the invocation of specific contract functions by storing the contract's ABI within the project's configuration files. This approach facilitates knowledge of callable functions and their arguments. If an ABI is not directly available within the project, the component refers to Etherscan's APIs to fetch the specific ABI, allowing interaction with and obtaining results from any deployed and verified contract on Etherscan. This feature significantly broadens the scope of what users can achieve within their projects.
Supply: This component displays key metrics such as the total number of NFTs, the number minted, and the remaining supply by calling the getAllTokens() method of the smart contract. It provides real-time insights into the status of NFT projects, enhancing transparency and user engagement. These draggable elements play a critical role in the SyntraLink editor, offering users a versatile and powerful toolkit
Additionally, the SyntraLink editor features the following components to further empower its users with dynamic functionalities and customizable options for building responsive and interactive web experiences:
Timer: This component utilizes the getClaimConditions() function from the SyntraLink ERC721Drop contract to determine the timeframe during which a user is eligible for minting. It displays this information clearly, providing users with critical insights into the minting process and deadlines. This ensures that users are well-informed about the availability and timing for participating in NFT drops, enhancing user engagement and participation in time-sensitive events.
Card (to be renamed as Section): This draggable component facilitates the nesting and rendering of other draggable elements within it, allowing users to create grouped sets of components. It is designed to support a mobile-responsive behavior through the implementation of columns and the use of FlexBox. This approach enables a seamless website-building experience, allowing for the creation of sophisticated, responsive layouts that adapt smoothly to various screen sizes and devices. The Section component's flexibility and adaptability make it an invaluable tool for users aiming to design and deploy engaging, professional-quality web pages and applications.
Together, these components enrich the SyntraLink editor, providing a comprehensive suite of tools that enable users to design, customize, and deploy interactive and responsive web experiences seamlessly integrated with blockchain functionalities.