Bonadocs: The Postman for Web3

All right, we're live. GM everybody. Uh, welcome to what's going to be another great DevNTell. So, if you didn't know, DevNTell is a 30-minute window for builders to showcase something they're passionate about or have been working on in Web3. It can be an awesome project you've been working on, demonstrating unit testing best practices, automation goodies, smart contracts, how to structure a project, etc. Basically, if you've got a passion for something, this is your opportunity to share it with the community. And today, I am ecstatic to have David on uh from Bonadocs. Uh, welcome David. Pleasure to have you on, man.

Yeah, hi. So it's always great to be here to speak with other builders and just share ideas.

Yeah, man. Definitely. And uh, thank you so much for stepping up to take up uh the slot for today. Uh, really appreciate that.

Yeah, likewise.

Yeah, man. Uh, I guess uh before we get into the content, did you want to give a uh introduction about yourself? Uh, for folks who aren't familiar.

Yeah, for sure. Uh, I'm David, uh co-founder of Bonadocs. Um, so Bonadocs is basically the future of smart contract development and distribution. Right? So we're building like a collaborative tool for documentation, integration, um of smart contracts um in Web3 in general. Right? So, yeah. That's basically what we're doing right now. Before now, I used to be part of- I used to be an engineer at Consensys and um now we're currently- Bonadocs is currently um part of the Consensys Made in fellowship program. So, yeah. Right now, just to help developers improve their productivity and you know, improve integrations in Web3.

That's amazing, man. And uh, how long have you been working on Bonadocs? And- and are you working on it just by yourself?

Uh, so we started working on Bonadocs around Q3/Q4 last year. Um, currently working with- with a team of designers and engineers, there's myself, and there's Hamad, um who is our CTO, right at Bonadocs. And um, yeah, we're just working on it together to- it's basically developers building cool stuff for developers. I think that's a good way to put it.

I like it. Yeah, that- that is the way, man. Um, yeah. I guess uh in the interest of time, uh let's- let's get right into the content.

Yeah. Um, okay, let me share my screen.

Okay, I think everyone can see my screen now. Yeah, so, to just like give an overview of what Bonadocs is, um one of our major missions is to simplify smart contract integration um through a suite of products and- or tools as we like to like call it. Right? So we just noticed that there was- based on our experience, me and- me and the team, um we had issues collaborating with other engineers, um in Web3 while you know, dealing with smart contracts or building dapps. In comparison to our previous experience, like in Web2, we're- you know, teams use Postman or use um Swagger or like whatever collaborative API management tools, we just noticed like that was missing in Web3 for engineers. So, the primary way people share contracts is through Etherscan's um verification page or Etherscan's contract page. Right? Or they go to like Tenderly. Um, and we just noticed that that wasn't like enough to cement like the- the collaboration part of um working in Web3. Right? So, we are building like Bonadocs to simplify integrations and collaboration in Web3.

So, just like going over a view of our- of our product, or our tools, and specifically I'll be demoing the Bonadocs Docgen, which we'll get to in a bit. Um, so some of our tools are like Docgen, which I've mentioned. There's the widget. The widget is basically a way to interact with your smart contract methods from anywhere, including your documentation. Right? Um, there's the registry, which is under development. So, the registry is a platform whereby you can basically look for contracts or look for protocols on different networks, right? And interact with them directly from like a platform, an all-inclusive platform. Right? So, that's what the registry is. And we're working on like building integrations with like the Linea network, um to enable their devs onboard um people onto their- to onboard devs into their protocols basically and explore their protocols. Then there's the editor, which is something we're working on also for engineering teams to enable their developers, both dapp developers and Solidity developers, to work together and collaborate from a single place, um which also includes like things like testing, include like converting your contracts to NPMs, and other like other complex things that are very important for enterprise teams. Right? So, those are primarily um what Bonadocs offers right now. Um, so basically just like simpler integrations, much more human-like interact with documentation, um and yeah, to help developers. So, to speak exactly, to speak more on Docgen before we jump into the demo for Docgen. So, Docgen is basically a beautiful interactive um documentation website for your project in seconds. So basically the idea is that you can easily go from your code to documentation in just seconds without having to manually write your code- manually write your documentation. Then- because usually the way it works currently is people write documentations, right? And they have their contract page on Etherscan. So they share the two um to whoever is supposed to integrate um their protocol or their contract. Right? Which creates like a form of like fragmentation. So what this does is you're enabled to publish a documentation website that contains both widgets for your smart contract methods, meaning you don't have to go to an external point to call your smart contract methods. You can call them directly from your docs, and you can also have the documentation in the same place. Right? So, just to quickly go over what that looks like um in real life, I would go into- so we're going to use the Uniswap V3 protocol. Right? So, Uniswap V3 protocol um contains like the core contracts for the protocol and enables people to like, you know, perform actions such as swap and the rest on the V3 um protocol. Right? So, how it works, I've set everything up here just before the call, um but yeah, how it works is basically you first have to install the Bonadocs-slash-Docgen.

I could just do it again just to, you know, illustrate properly for everyone on the call. Right? So, um [David installs Docgen via Yarn]. So, the idea is that we are build- we built like this hardhat plugin right into this library that enables you to just add it directly into your module-dot-exports under hardhat. So, if you come to your hardhat-dot-config-dot-ts, you import it directly here, right? And you're able to, if you go down here, um add this Docgen um object. Right? So this- this should include um the- more things like the name of the project. So, let's say Uniswap V3 protocol um documentation, um summary description, let's say core contracts of V3 um protocol. So, the output um directory property is basically um the name, right, like of your repo- sorry, your folder. So, this folder is going to be where your documentation is in, your Docusaurus documentation, which we generate. Um, and then like deployment addresses. So, under like your prot- under a protocol you have like multiple contracts. Right? So, in order to like have widgets, because documentation is integrated with widgets, so if you want widgets on- inside your docs, right, so you can specify the particular contracts that you want to add um widgets for each of- for each of its method.

So, for this we would like the Uniswap V3 factory, right, to be the contract that has widgets inside. So if you want like all of your contracts to have widgets, you would have to add each of them, like Uniswap V3 factory, like if you go under contracts here you'll see a bunch of um of them here, right? V3 factory, V3 pool, whichever one you want, right? You can basically add more contracts here that now have widgets. So you'll get to understand that in a bit um once we publish it. So, we can then go on to do um [David runs npx hardhat docgen]. Oh, first we have to like cd into the contracts, you know, um folder, then we do npx hardhat docgen.

I guess while we wait, um uh David, uh [Inaudible].

Oh, it's done. Okay. I'll save my question for later. Go for it.

Uh, okay. Or you could as well just ask it now, just before we open the UI.

Okay. Uh, yes. Uh, I was going to ask um does this only work with uh deployed smart contracts onto like testnets and mainnets, or can this also work with local development?

Um, primarily right now, it's basically when it's deployed, like when- once you're already done, right, with the contract and all of that. Um, but- but, if you do not want to um have widgets and stuff like that for now, you can basically just generate the documentation without the widgets. Right? But if you want like it to have like widgets and all of that for interactivity, you would have to like deploy it so you have like the contract address, so it can be generated on- on the widget in the docs. So yes, you would have to have it deployed to have widgets. But if you don't want widgets, you can just use it locally like that. Gotcha, gotcha. Yeah, although like once you have- once we have the editor platform out, you'll be able to have um whether it's local, whether you've not like deployed it or anything, you can use like your ABI to set up your editor and you know, interact with it from there. So those are for like internal development. So like this Docgen is mostly focused at, you know, external developers using your documentation.

Gotcha, gotcha.

Yeah. So, um let's go into- let me stop what's- the former- the former site that we built in. So we cd site, right? And we install our yarn and yarn start.

So, I'm reloading the site. Okay. So this is just a bit of MDX, um sorry, MD um- I think I should just remove these characters and it will- it will go. It has to do with the markdown model. Okay. So, what you get is this full documentation here. Right? So you have the V3- Uniswap V3 protocol as written here, um and you have all of the contracts. So you can see all the contracts from the protocol, and then you can see the Uniswap V3 factory. Right? So, as I mentioned earlier, because we added the contract address for Uniswap V3 factory to make it interactive, um we have it here. So if you want like all of them to be interactive, you would have to add the contract address for each of the contracts then it populates on this table. Um, you can also like go into your file and change all this boilerplate um text just to quickly set up your own documentation. So let's go to I- Uniswap factory.

Yeah. So what we have here is basically methods and events for this particular contract. Right? So, let's take for instance we have um this method 'owner'. Right? So usually if you go to Etherscan you'll be able to see um this um method- owner function. Right? But directly in your docs using um the Bonadocs Docgen, you can basically query it and get a response directly from here. Right? So, for instance, let's look for something slightly more complex. Right? So this is like 'getPool' to enable us get the pool address for a particular token pair um with their fee. So you can basically see the parameters and what's availa- what you're supposed to get back from that particular function. So you can see token A, the contract address of either token 0, token 1, token B, the contract address of the other token, and fee, the fee collected you know on every swap in that pool. Right? So, let's quickly [David looks for a pool address on Etherscan]. So we're going to use like a pool, an existing pool, right, um so we're going to use this pool from Etherscan which was created around like 2 hours 15 minutes ago. So we'll take this and I'll add it there as token A, and this our second token, and our fee would be one thousand- okay, I think it's ten thousand. Um, and so we can query it from here and you can have the pool address. Right? So this is just like a bit of a demo of what the Docgen can do for you and how you can quickly go from code to documentation um as quickly as possible.

And just like a heads up, we're working on like something really cool with the widgets also. So not only do you have like, you know, individual methods like this, because as developers we've just found out that the way actual development workflow works is the fact that you basically have a workflow which is like a dapp action. Um, so dapp actions are like swap or, you know, um lend or whatever. Right? And these actions come with multiple methods. So basically you need multiple methods to perform a swap or multiple methods to perform, you know, a lend or whatever you think of things like Axelar, right? In order to like do like a- a token transfer you have to do more than one method. So for more complex workflows like that, um we're working on a code executing widget that basically allows you to call multiple contracts, sorry, multiple methods inside a single widget. And you basically can call it with code, with pre-written code of course and um yeah, you can also perform like conditionals and other stuff that you would do like on the front end of your app directly in your docs. Right? So, you have things like maybe swap and you have like a widget that can perform a swap just so the developers can also- and developers can also see the JavaScript code on the front end that calls the methods, you know, the Solidity methods that perform the swap, right? So it just like gives you this form of simple integration where developers can easily see like, you know, boilerplate code that enables them to perform a swap, right, directly in their own front end without like doing too much work or doing too much research um and exploring too much. Right? So if you visited this particular contract um on Etherscan what you would see would look like this.

[David shows the Uniswap V3 factory on Etherscan]. So this is the same contract the V3, um [David navigates Etherscan's contract page]. It still- so look at the getPool method we called. This doesn't have like sufficient information. Right? But like if you compare this with, you know, what we have here um it's just like way- way- way better experience in terms of like, you know, documentation or sharing it to external devs without like looking through the code or finding out um what each parameter is. Because like if you look at this 'fee' here, here it basically you don't have a fee, you basically have to look through the code to get what exactly they're trying to um pass in here as the parameter. So this basically just simplifies our work as devs in- and also like enables protocols to- onboard devs faster without having to, you know, um jump on calls or um you know, have a much more hands-on approach to it. So just something that can be automated and fast. Yeah.

Yeah, this- this is amazing, man. Um, the- yeah just like the quality of the documentation that was generated is like- yeah, it's amazing. It looks- it looks like somebody like hand- wrote it which is really cool. Um, the- the descriptions on the parameters, um are those getting read from the uh smart contract comments on the function? Or how are they [Inaudible]?

Yeah, so like- yeah, so we are using- we're using like in the background we're using um the Solidity Docgen, right? Um, to- we're passing the code um through Solidity Docgen so you're able to generate um this within Docusaurus site. Right? So behind the scenes, yeah, we're using Solidity Docgen to enable us to, you know, get each of the parameters and all of that. So, that obviously that has to do with like the NatSpec comments and all of that, so, yeah.

Gotcha, gotcha. And uh, I guess the- um if- if for some reason the- um the doc- the description on the parameter or something that came up in the document um isn't quite uh- uh up to your quality standards can the developer go and uh change it manually?

Yeah, definitely. Because it's- it's basically Docusaurus site. So you can literally like go into the MD files and change whatever, literally. Right? So, yes. They can- they have full access to everything. It's all extensible.

And then uh is it also possible to uh deploy um this- this set of documents to a- another domain? So say like you- you [Inaudible]?

Oh, yeah. So I was just going to say that yes, you can basically deploy it. You can take out, you know, the- the folder and deploy it to like Netlify or whatever just to, you know, share it with people externally. So yes, because it's Docusaurus documentation, you can basically do everything you can do Docusaurus- your Docusaurus docs with this. Right? So, yeah. Yes, you can deploy it to an external URL or whatever.

Yeah, yeah. That's- that's- that's awesome. Just like- yeah just thinking about this from a developer perspective, like we want to be as lazy as possible, right? So if we can just get a tool to just do this stuff for us. You're- you're already- you're already improving the quality of documentation in the Web3 space quite a bit. So that- that is phenomenal. Yeah.

Yeah, exactly. And if you want to add complex stuff like maybe guides and stuff like that, you can go on to, you know, create a new folder, right? Because this just comes with like the- the contract folders, right? So you can go on to create like a new um guide folder and add your own external docs if you feel like you want to add more context to what your protocol does and all of that. So, yeah. It's basically- so the- one of the reasons why we chose like Docusaurus is because we just felt like it was one of those documentation frameworks that allows you to add, you know, your own thing and just add the more context to your documentation and doesn't like lock you in sort of the way like GitBook does, um and yeah, you can also add like react components using MDX in Docusaurus and it's just- just perfect for- for building.

Yeah, man. Um, yeah, yeah. And then- definitely. And just curious, does the- does the dark- dark mode work? Uh, at the top right out of the box.

Yeah, it does work. [David demonstrates dark mode]. Excellent. Excellent, yes.

Uh, yeah, man. Yeah, this- this is uh great. In- are there [Inaudible]?

Oh, yeah. So like we even have like other color themes. Like you can literally add more color themes and all of that um to- to the widget. So, yeah. It- it's pretty much extensible in- in that regard.

And uh, are you guys just going to be focusing on Solidity uh smart contracts um in regards to support to start, or are there plans to support other uh blockchain smart contract formats as well?

Yeah, so right now we're just supporting Solidity because like it's the most widely used. Um, basically as we build out more like the platform and the entire like toolset we'll basically going to be including much more like, you know, other languages, um I mean even including like other folks like, you know, Starknet and Cairo and, you know, all of that. But right now just focused mainly on Solidity um for Docgen at least.

Gotcha. And uh, is- is this something developers can use today? Or uh- is it in like beta or- or how can people get started with this?

Uh, it's open for everyone to use today, it's all deployed to NPM um right now. Uh, I think a good place to start you go to our Twitter page. I could add links um to- give me a second, let me stop sharing and get- get some links. Um [David searches for links]. Yeah, I've got a [David posts link in chat]. Nice.

And uh we'll be sharing all these links in the YouTube description if they're not there already, um FYI again. Yeah, man. Uh, I guess the uh- so the best place for people to start is to- be docs. Uh, then I guess if folks are interested or have questions um for you or your co-founder, uh what's- what's the best way for- for them to reach out? Um, and to get support if they need it?

Um, right now you can just like reach out to me on Twitter, um and I'll be able to like, you know, see what's the issues and reproduce it and, you know, fix it right now. Um, so yeah.

Gotcha, yeah, yeah. And then that info again um will be available for everybody on the YouTube description um of this video. And I guess before we leave, um I'm always curious to- to hear uh what was- what was like one of the biggest challenges that uh you guys faced while you were uh um building this? Um, like I'm sure there was lots of- lots of early uh roadblocks and whatnot that maybe like stalled you or- or whatever but yeah, it's always interesting to hear uh the- the journey of these things.

Yeah, so specifically for like the widgets, one issue we had was we wanted the widget to be able to work everywhere, not just in the Docusaurus documentation. So that would also include, you know, other frameworks like Astro, um or like basically other frameworks, right? So, we had that initial issue figuring that out, um because every framework has their own um setup, you know, some are like SSR or like Astro, um and we had to like, you know, work back on it, on using like react-dom to be able to like, you know, launch the widget separately outside the- outside the entire documentation and all of that. Um, and one other thing we had an issue with initially was the themes. Right? So, just begin switching from like dark mode to light mode, uh well it works on our documentation, right, but like for another documentation they have a different way of like switching from light mode to dark mode, um whether using like local storage or whatever. So we have to like figure it out for a few documentation frameworks to ensure that if you have this widget in Docusaurus it does work when you switch, if you have it in Astro it does work when you switch. So like all of that was like a little tricky at the beginning but we were able to like figure it out and just support um a few documentations that way.

Gotcha, yeah, man. Uh, yeah, man. Uh, it was all worthwhile uh to get up to this point and uh from uh what I understand you guys aren't done yet, this is just like the early stages and there's going to be more uh awesome features that you guys build on top of this, right? Yeah, so like right now we're trying to integrate the widget into uh the docs of like different other protocols. Um, we're working with like Compound to make their docs interactive also. Um, but like at the end of the day this is just like a go-to-market for the product itself which is the editor, and you know, for testing and security tools and all of that um for developers also. So, yeah. But this is a good way to have people to improve productivity and you know, have people jump on the product immediately. Like straight in the- in the devs.

Yeah, definitely. And uh, yeah. Thank you so much, David and I know Hamad is uh in the crowd here as well. Uh, thank you guys so much for uh coming on today. Really appreciate it. Yeah, likewise, really happy to be here. Yeah, man. Uh, and uh just before everybody leaves today, uh I'd like to present you with the QR code to scan uh to claim your NFT for being an attendee here on DevNTell today. So what you want to do is scan this QR code with your regular QR code scanner on your phone, and fill out the form, and you will be airdropped a NFT uh for being an attendee here on DevNTell today on the Base uh network. Uh, and you'll have uh let's say one hour and a half from this moment to be able to do that. So- definitely you want to get on that. And uh just again, thank you so much David for coming on and giving us this great demo and uh yeah, looking forward to seeing how uh you guys continue to build this out.

Yeah, thanks. Uh, shout out to the DevNTell team for having us.

Yeah, man. Any time, any time. All right all, I want to wish everybody a very happy Friday, happy weekend, and we'll catch you back here next week for another great DevNTell. All right all, see ya. Bye everyone.