Introducing B3Forge - Candid UI: Seamlessly Integrate and Customize Your dApp Interfaces

Project Highlights

B3Forge is designed to centralize principles and standardize the interfaces for the essential parts of decentralized applications (dApps) that interact with digital assets and need to be trusted by users. It provides a set of tools and APIs that developers can use to create reliable and user-friendly applications for their own interfaces, while also making these applications available in the app store. This ensures that users can manage and transfer their assets seamlessly, even if problems arise.

Developers can use B3Forge to create customizable user interfaces for decentralized applications. Users can further tailor these interfaces based on their specific needs. For example, a user can customize the interface to manage only ICP and Bitcoin tokens without any additional functionalities. This flexibility allows users to design and implement interfaces that are perfectly suited to their unique use cases.

Web3 Advantages

Unlike traditional Web2 projects, which rely on centralized servers, B3Forge operates on decentralized networks. This means there is no single point of failure, enhancing security and reliability. Web3 projects give users more control over their data and assets. In B3Forge, users have full ownership and control over their interfaces and canisters, ensuring they are not dependent on a central authority.

B3Forge can seamlessly integrate with other dApps on the Internet Computer, allowing for greater flexibility and functionality. The open nature of blockchain technology ensures transparency. All transactions and interactions in B3Forge are transparent and can be audited, which builds trust among users. Additionally, Web3 projects often use tokens to incentivize users and developers. B3Forge could potentially integrate with token-based incentive models to reward users for their participation and contributions.

How Is It Built?

Technical Overview

B3Forge is built using JavaScript, leveraging the Candid interface provided by DFINITY. We created custom wrappers around the Candid visitor, which is available in the DFINITY repository, to enhance functionality and streamline the integration process. Each app’s data is stored securely on the Internet Computer, ensuring decentralized and reliable data storage. The backend, written in Rust, acts like an app store where interfaces created by users are stored based on their canister ID.

  • Languages: JavaScript & Rust
  • Frameworks: React for frontend development
  • Libraries: ic-reactor, a set of packages we developed that wrap around agent-js, and custom wrappers around the Candid visitor from DFINITY
  • 3rd Party Services: Integrated with Internet Identity for user authentication

Design Decisions

Key design decisions include using the Candid interface to compile the necessary data needed from generating the form to displaying the response in a customizable way. Additionally, we utilize a super-efficient storing approach that compresses a huge amount of customization into a single 32-byte chunk of data on the blockchain. This makes each app super small and storable safely without concerns about scalability. These choices ensure that B3Forge remains user-friendly and accessible to developers of varying experience levels.

Internet Computer Superpowers

B3Forge utilizes several unique features of the Internet Computer, such as:

  • Seamless Canister Integration: Using Candid to enable smooth and efficient communication with canisters.
  • Internet Identity: Ensuring secure and decentralized user authentication without relying on centralized systems.
  • Scalability: Leveraging the Internet Computer’s scalability to handle growing user demands without compromising performance.

These features enhance the project’s capabilities, making it a robust and reliable tool for decentralized application development.

Go-To-Market Strategy

To attract users, we plan to engage with developer communities on platforms like the DFINITY forum, Twitter, and GitHub. We will share tutorials, conduct webinars, and participate in hackathons to demonstrate the capabilities of B3Forge. Partnerships with influential blockchain projects and thought leaders will also play a crucial role in our strategy. Additionally, we plan to implement the same functionality for Ethereum contracts, allowing users to add functions directly from Ethereum contract addresses and gain the same functionality. This integration will potentially attract a huge number of users to the Internet Computer (ICP).

Monetization

While B3Forge is currently focused on user adoption and feedback, future monetization strategies may include offering premium features, subscription plans, and providing customized solutions for enterprise clients. Decentralizing governance through an SNS (Service Nervous System) launch is also being considered to ensure community-driven growth and sustainability.

Status of the Project

We have successfully developed and tested the core functionalities of B3Forge. Our initial testing phase involved creating a simple ICRC token app, and the feedback has been promising. We are now inviting developers to engage with the tool, test it, and provide feedback on the DFINITY forum.

Future Plans

Our next steps include integrating more advanced customization options, enhancing the drag-and-drop functionality, and expanding the range of supported canister interactions. We also plan to attend major blockchain conferences and apply for grants to further develop and promote B3Forge.


We invite all developers to join us on this journey, test our tools, and provide valuable feedback. Together, let’s revolutionize decentralized application development with B3Forge.

18 Likes

This looks great! Can I log in with browser wallets as well?

I see some ICDV in there!

2 Likes

Not yet, but I’ll add Ethereum login soon.
ICDV is the main example in the demo because of the standard it supports :wink:.

2 Likes

If you want to be a customer service hero, if you could emulate something like in this pull request it would be very helpful for teams that need to help users call functions outside of their dapp workflow:

It is a bit subtle, but if you hit the following URL you’ll notice that the items get filled in for you.

https://u4mx2-ziaaa-aaaap-qbgva-cai.icp0.io/canister?canisterId=jwcfb-hyaaa-aaaaj-aac4q-cai&defaultValues=%257B%2522method%2522%253A%2522icrc1_balance_of%2522%252C%2522args%2522%253A%255B%257B%2522owner%2522%253A%2522s6bzd-46mcd-mlbx5-cq2jv-m2mhx-nhj6y-erh6g-y73vq-fnfe6-zax3q-mqe%2522%252C%2522subaccount%2522%253A%255B%255D%257D%255D%257D.

So a customer service agent can go to https://u4mx2-ziaaa-aaaap-qbgva-cai.icp0.io/, fill in the canister id, and then as they fill it in the URL changes…you can grab that URL and send it to someone to have all the items filled in…they they just need to connect with plug/wallet/II and they can call the function.

With II it is especially helpful because you can host it as a page on your domain at a customer service URL and get the user to have the same principle as using the dapp.

If you add something like an ICConnect(which I think ICReactor gets you most of the way there) that lets you use all wallets you’re going to be pretty close to in a position to replace icscan as the defacto “Let me mess around with this canister” platform. The IC dashboard is pretty good, but I don’t expect them to let us log in with third party wallets any time soon.

2 Likes

Also…being able to copy results as candid and json is a huge bonus. (actually copying the inputs as candid or json can be huge as well because often you want to grab that and plug it into dfx.)

The other pain point I’ve had with these tools is treating nat8 arrays as blobs and making it super easy to load in blobs/nat8 arrays(arrays in general are tough UX problems).

2 Likes

Thank you very much for the suggestion and for engaging with B3Forge.

Actually, my next milestone for the B3Forge project includes implementing a similar feature. With this feature, you will be able to modify a function with defaultValues for each argument so that query calls can be executed automatically. Update calls will only need to be confirmed by the user. Once configured, you can share the function URL with others, and the arguments will be pre-filled with the values set by the developer by default. This will enhance the ease of use and streamline the process for customer service and end-users alike.

Copying results as Candid and JSON is an easy task for the B3Forge project, and I will definitely implement this feature. Additionally, I plan to provide users with function snippets or code that can be easily copied and pasted into their websites, with CSS customization options available.

We already support this for nat8/blob. Did you have a chance to try it?

1 Like

That’s the spirit! The whole point of creating B3Forge was to give developers the freedom and tools to experiment and innovate with canisters. So, go ahead and mess around—B3Forge has got you covered! :smile:

1 Like

The Hex entry works great…sometimes dfx uses the \xx format and it would be nice to be able to use that as well because sometimes that is what you get from as the reply from the canister.

Also, for example, if you take a look at https://sehgq-cqaaa-aaaap-ahc4q-cai.icp0.io/candid/gtzpn-mqaaa-aaaal-qbvga-cai?category=status and look at stage_library_nft_origyn you’ll see we have a ‘content’ blob…it would be nice to be able to select a file and have the UI convert it to hex…as a reach…it would be even cooler if it was smart enough to know that the IC doesn’t allow more than 2MB for ingress and had some way to split the file into chunks and indicate which one you want. I know this is a highly specific request…but as a dev tool it would be amazing.

As I was poking around another feature I though of was to be able to paste in Candid and have it get assigned to the form(maybe like an edit raw tab). With ICRC16 and the ICRC3 Value types you get extensible types and selecting all the variants for a deeply nested value would get quite tedious.

3 Likes

Yes, I saw it. The problem is that it tries to convert it to an image:

Screenshot 2024-05-16 at 4.32.31 PM

Interestingly, this means it passed this test:

Is this a chunked image? Is there a reason why not saving the whole image after all chunks are received into the canister?

Yes, that’s a perfect idea. I’ll consider adding this feature.

I was more talking about uploading a chunk of data…but yes for this strange thing:

The library id is a file name…like 10g.png. So I guess your code thinks it is a local file…but it is on the canister in an nft in this case…you’re not going to really be able to link it unless you follow the origyn_nft schema.

Oh, now I get it. So, you will show the NFT images using those chunks at the end? Is this following a standard for those chunks that I can follow to create a customizable output component for it? For example, we have an standard the array only has records as children to be shown as a table:


can we have something like that for those chunks?

2 Likes

Converting a file into a u8 array is pretty much doable. For chunking, we can standardize it by setting a function with a specific prefix like “chunk_file_max_{size}”. This way, the UI will recognize that it needs to chunk the file, display a file input, and handle the chunking and looping calls. This can be easily integrated into the UI builder. Additionally, we can add select options for the u8 array to enhance usability. This approach should make handling large files more seamless and intuitive.

2 Likes

New Update: Migration from Next.js to Vite

Excited to announce that successfully migrated our project from Next.js to Vite! This transition is a significant step towards improving our development workflow, gaining full control over route management, and fixing persistent routing bugs.

What Has Changed?

  • Route Management: We have restructured our route management to be more flexible and reliable. This change addresses several routing bugs that were present in our previous setup.
  • Dynamic Imports and Asset Handling: Optimized our dynamic imports and asset handling processes, ensuring that all necessary resources are correctly included in the build output.

What’s Next?

While this migration brings many improvements, it has also resulted in the temporary loss of some static pages. Rest assured, we are actively working on restoring these pages and enhancing them with the new capabilities provided by Vite.

How You Can Help

If you encounter any issues or have feedback regarding the new setup, please do not hesitate to share your thoughts on the forum. Your input is invaluable as we continue to improve and evolve B3Forge.

Thank you for your continued support and enthusiasm for B3Forge. We look forward to delivering an even better platform with these updates.

5 Likes

Hey!

As the guy who using icp dashboard to interact with canister. I love your product

It’s great if we have some tag for canister like canister support icrc1, icrc2, etc… to fast overview on the UI

1 Like

Hey!

Thanks for the feedback and for using B3Forge! I’m glad you love the product.

That’s a great suggestion. Adding tags for canisters, such as canister support for ICRC1, ICRC2, etc., would definitely provide a faster overview on the UI. I’ll consider integrating this feature to enhance the user experience.

2 Likes

New Update: B3Forge Now Includes Playground Feature!

Hello everyone,

I’m excited to share an update about B3Forge!

We have recently added a new playground feature that allows users to modify the Candid to create interactive UI forms. This addition gives users even more powerful tools to customize their decentralized application interfaces effectively.

b3forge-playground-ezgif.com-speed

Try It Out:

Give the new playground feature a shot at B3Forge Playground.

I look forward to hearing your feedback on the new playground feature. Your suggestions and comments are invaluable as we continue to improve B3Forge.

Thank you for your support!

8 Likes

Wow, this is very cool! Do you mind we link your playground from the Candid repo’s README?

As for customizing the UI, we currently have a proposal to allow developers to specify how they want the UI to be rendered: spec: candid type selector by chenyan-dfinity · Pull Request #555 · dfinity/candid · GitHub. When this feature lands on Candid UI, the user can say something like blob.type = "file" to upload a file into a blob value, or blob.type = "image" to display an image from a blob type. I think this can be implemented purely using the visitor pattern. It would be great if people from the community can contribute to speed up the implementation.

2 Likes

I would be honored to have the B3Forge Playground linked from the Candid repo’s README. It would be a great way for more developers to discover and use B3Forge!

OMG, that’s exactly the solution I’ve been looking for! Having this feature implemented sooner would be incredibly helpful for my work with B3Forge.

If there’s anything I can do to help make this happen or any contributions needed, I’m ready to assist in any way possible.

6 Likes

@b3hr4d I was surprised on how good the data parsing/display is for the canister tab, super helpful thank you

But when I use the playground with the same canister sctyd-5qaaa-aaaag-aa5lq-cai, it gives me the error Candid interface not fetched!, but it works in the canister tab

2 Likes

Thank you so much for your kind words! I’m glad to hear that.

Regarding the issue you’re experiencing with the playground, could you please share the Candid code you are using? I’ve tested it on my end, and it worked without any problems.