Project Shadow

Welcome, welcome GM GHE to another what's going to be a fantastic DevNTell with codingwithmanny, or Manny. If you didn't know, DevNTell is a 30-minute window for members of the DAO to showcase something they are passionate about or have been working on. This could be an awesome project you've been working on, demonstrating unit testing best practices, an honorary smart contracts, how to structure a project, and so on and so forth. Basically, if you've got a passion for something, this is your opportunity to share it with the community. And I am happy to hand it over to Manny, who is going to be showing us his and Raz's hackathon project they did for Web3Con. So, Manny, over to you, bud.

Hello, guys. Alright, so I will not guarantee that this is not buggy at all, as in there is some things that I've been working on even up until this presentation or this demo. So bear with me, but I'll give you guys a small overview as to what Shadow is, what was the motivation behind it, and then obviously get into a demo. Now, Shadow is basically a way for DAOs or even organizations that have like wallet verification or some sort of gating to be able to manage, organize, and validate, but also have an API to build on top of that to make it extensible in the sense that you can have different apps connect to it and use it as a validation tool. And I think that this is one of the things that, you know, that comes from seeing a lot of validation tools out there. They're rarely siloed, and they don't necessarily work a lot with other tools. And my goal with Raz what not was to be able to build something that not only allows you to manage different users but also be able to make it work with Discord, make it work with Livepeer, make it work with any type of API that you wanted to or even build on top of it and create a custom app so that you don't have to handle the wallet verification in a sense, and then you'd be able to restrict access and add access as you needed to. So, why? Because we need tools that increase visibility and that can easily work with other tools, apps, API, etc. So this is a big motivation behind that, right? So what's the state of it? It's in alpha. You know, it's getting there, but there is source code out also on GitHub. So what's left is some clean-up code, refactoring like the members view, some tagging, and some other things that I just want to make sure that it's cleaned up again. Last week was a bit crazy, this week also with trying to get things done at the same time. It's definitely a challenge. But if you guys do want to check out the code, the repository is on github.com/codingwithmanny/project-shadow-app. There's both a front-end and a back-end to this. So with that said, maybe just because obviously this is going to be like free form, anybody have any initial questions at this stage?

Do you build all of your presentations in Figma?

I used to do a lot of Illustrator back in the day, but just Figma just seemed to be a lot easier and there's no price tag associated with it, right? So, yeah.

I love it.

No further questions from me.

Thank you, your honor.

Do you plan to try and get a team around it, Manny? Like maybe do like a budget application and build it in the DAO or separate, or you're not sure, or?

Definitely open to a lot of aspects. I think that this came out of just an immediate need that I saw with just different apps and then also being able to rebuild things over and over again. And I'm like why are we rebuilding this to be able to have this authentication aspect of things so to be able to validate users from their wallets? So in terms of it like yeah, I'd be happy to look for I mean if I win that if we win like the hackathon then that's a different story right? But as far as it goes I yeah, the idea is like it's going to be fully open source so anybody could take this deploy it themselves. I'm even going to add like some Docker configs to it so if anybody wants to like quickly deploy it locally on their computer just to test it out or even deploy it to production like AWS or DigitalOcean they can do that. I'm also trying to work on a way of it to work out of the box with Netlify. So instead of just a single API you could use functions instead. So they're serverless functions. That's something also I'm trying to work at. So it just makes it a lot easier for people to get up and running and just work with the code and implement it within any organization they want. But yes, looking for potentially more work, maybe even finding let's see, let's see where this goes. So, any other questions? Nice, okay well I'll jump into the demo time then.

Yeah, hi I have one question. Can you summarize what this app is about?

Yep, so it's a way for DAOs or organizations to be able to like manage wallet verifications or manage users across multiple platforms. So like think of like to an extent like think of CollabLand that does your validation on on Discord. Like imagine that you could do that validation on any platform you wanted and have a central place to be able to manage that. So like if you want Discord or if you wanted a custom app that allows token gating in that sense. Does that answer your question?

Right, yeah.

The best example would probably be CollabLand but just like with more with more granular permissions and means to be able to validate users and also generate forms on the fly, and I'll kind of go into that and what that means. All right, so what you'll see here in the main application it's very simple to begin with there's really only like two major sections versus like and then a few sub-sections. An account settings section which makes sense. The idea is just to be able to update your information but also to be able to which I'm adding is the ability to delete your account completely just to comply with like GDPR compliance so that you don't you can if you wanted to you can remove your entire organization with with a click of a button. Typically the way that you do an organization is just you know, hello my org. You'll get you'll create a new organization and you have four different sections that you can kind of work towards that you can work with in. So your existing members that you can add manually. You have your forms which is a way for you to be able to intake users or even generate forms on the fly so that you know if you want to give a specific user a form and it's like a one-time use for them to be able to validate it so people can't abuse that form in adding their wallet. You can also set that up in terms of forms. And then your settings which is where your API key and your secret key are and basically you can use that and I'll show an example of an app being able to take advantage of those API keys and be able to create like a public section on a site that says hey did this is this user's wallet validated in in the in this organization? Okay, give them access to be able to see specific information then.

So, you can add members it's not you know John Wick. I don't do any validation on the wallet just yet but you can see the idea of what you're adding is an address, the name, if they've validated, basically if they've actually gone in signed their wallet and verified that that's that that's actually their wallet. And then giving them access as to being able to disable things like okay just because they've you can essentially blacklist then at that point specific users to not access whatever application if it if it pings the Shadow API to say hey does this does this user have access? No. Okay, well then as far as it goes don't give them access then. By the way all the UI is done from scratch this is not a framework. So like everything from the modals to the error states to etc. This is using Tailwind and basically just created this I created Raz and I created more work for ourselves in terms of the amount of UI work that we redid from scratch and we wanted to keep it very simple. To give you an idea of what a form looks like, you'll essentially give it a name. There's different types of thing different types of settings you can set up for a form which is like form access whether or not it's active or disabled. So the idea that you know hey I want to only create a form for a certain period of time. I can activate it and then go back here and disable it. And then form use you can say hey this allows for multiple uses or a single use and like once that use is done that form is disabled but you can re-enable it again if you want to. And then obviously the search functionality of being able to see different forms and deleting things etc. Like all that's kind of built in to be able to make sure that you can go in and manage your forms essentially. So, that is like the forms and members side of things. So I'll jump over to what it would be like if a user were to register themselves. So let's say in this organization there's no user that's set up. So what I'm going to do is I'm going to create a create a form that will allow a specific user to have a single use. So this one is active and there's a single use. And you'll notice that there's a form verification URL. So I can take that form and share it with a user and they would be able to verify their their address. So here I'm going to go into go to this your URL. Go to MetaMask and this does a nonce the same standards of signing with Ethereum. So it'll go through it'll prompt me for my specific address I'll sign it and it says it's verified. And then what's interesting is that because we said this was a single use, this should not load again because it says the form is not found anymore. So basically any time that they we make a request any type of form, it's it won't be found because that one was only a one-time use. We can also then see and let me just refresh this or what not into the forms that that single use was disabled and now it can no longer be used. We can activate it again and then under members we can we should have seen the user but okay maybe that's a bug. I believe it's under yeah I need to go back in terms of the the organization again but the idea is like it should happen within this the same I think I have the wrong API point. But you'll see the actual user come through and I think the address was for this one C33F which is this one. So they're validated but you can see their access is disabled essentially. So you can give them access to other pages and the this is a it's not necessarily working right now but as far as it goes we have this idea of what is it? Orgs? There's like a public orgs page but for users to be able to sign in I can't remember but it's not necessarily working right now but to be able to go in and see all the members as well. So you can make that that's where this comes in where you can make it public or private. So if you want it to be public you can give it you can make it completely the site accessible to anybody to be able to access that and see who's in the DAO or you can make it private where you require a user to be able to sign in with their with their wallet to be able to see who's all within the organization basically. That's the sample of the app in terms of how simplified it is but it allows you to really just manage different users. I'm going to pause right here because there's another aspect which is the API which I'm going to go into but did anybody have any questions so far with the app?

So, for an organization is it open for basically anybody to spin up their own organization or is your idea that that particular tier would cost people like X amount of whatever to be able to create organizations?

You mean like an actual pricing model for like for like an actual SaaS product? Yeah, yeah. So that that is something that I have toyed around with which is to kind of follow along potentially again nothing is set in stone but potentially follow the Supabase model which is have the entire code completely open source but if somebody doesn't want to be able to go through and set that up and trying to manage it or etc, have a hosted solution so that somebody can go in and sign up at a single website and have everything done for them.

Oh, awesome. Awesome.

I think the goal is to make it as open source as possible so that people can just work with it and then if not then you know like if they don't want to be able to manage that then at least there's a simple page solution for it as well too.

Have you got plans Manny to like maybe have like a inside the organization like an integration section and then you can like integrate with Discord or integrate with?

Yes. So that's where the hooks comes in is that you'll like you'll have hooks at when somebody signs up. I've already like tested this it actually works and I can show on the API side of things like I do have an entire Postman to be able dedicated to this for just going through and being able to test valid URLs like in terms of when somebody signs up. So there is one which is a regular web hook which you'll send through if somebody signs up it'll hit the web hook and send the information in terms of their wallet whether when they've been validated and potentially their nonce data essentially to any API URL that you want. There is the integration that I want to add for Discord, there's the integration I want to add for Telegram and for Signal. So that way because all these are web hooks essentially on the time of sign up as far as it goes yeah like I'll be adding more and more web hooks to be able to allow for validation the same way that you would do essentially for CollabLand.

Nice.

And I guess maybe you'll get into this but do you see you opening it up for people to make their own web hooks or are just kind of restricted to kind of like you and Raz at the start and then kind of open it up later or?

In terms of the features is is it goes as fast as we need to if anybody wants to contribute as as a as a web hook to begin with like a like a custom web hook that's dedicated to a service like Discord I'm definitely open to that. The first implementation is just a simple web hook so that it can go to like let's say you wanted to validate it and it just goes through and you can save it to a custom DB like custom database and then you manage it on your side what not. So there is a lot of that you can do too. But the first implementation's done but yeah open to other people participate like participating if they want to or contributing.

I had a quick question. So I'm also I'm working on the Solana hack week project that's around Patreon trying to do a Patreon version of that and there was a lot of parallels to this where we want people to basically sign up for like a month right they're going to pay to gate kind of content. And then the thing we want to really add is a in the blockchain we wanted to make sure people could take their audiences with them so if a fan and a creator you know so it's heavily the web3 side like we're trying to create an API and we don't have any of the service part but we're also talking about gate gating a lot of things like based on subscription right? and so a lot of things like you're doing here like if we look up a receipt for a fan then all of a sudden they can do all kinds of fun stuff like like some of the gating that you're doing here. So it's just interesting I'm just wondering how there's a lot of parallel sort of things I'm just wondering how to create public goods that cover a lot of these use cases. Because you obviously have a really cool management interface that we don't even have but then we're also trying to make sure stuff's on the blockchain so that people could take their own UI and and do their own pieces with it with their fans.

Yeah. So the the nice thing about this is like there is an like the app is separated as a single page application and an API. So if you wanted to deploy the API and create your own custom like UI to this, you can fully do that which is like everything's there and I'll be releasing like the Postman requests as well if you wanted to. What is interesting is like so there's there's the idea of token get like token gating right? but like if you're establish if you're early on and you're trying to establish like a just like an NFT and you haven't sold it yet right? The first thing you're trying to do is actually gather as many wallet addresses to begin with because you don't have something that's surrounded like around the actual token in terms of minted right? So this would be like the pre-step to that and making sure that you kind of establish potentially a whitelist right? But the next step would be yes there will be like what I want to add to this as well is the ability to say like oh I just want you like fetch at this current time from this token who did all the transactions so I can get all the wallet addresses that are minted so that you can just input that directly within this application right? And then the other part which is interesting that you mentioned which is if you have like a custom like if you have some sort of way to be able to check for receipts on a monthly basis right? Again the API is extensible in the sense that hey you know this user's transaction they didn't pay for this month I'm going to or it failed and you have some sort of service on your end you can hit this API and then say this user is now disabled and then across any of your platforms that use this they have now been restricted basically. So you have one central system I know it goes around goes against the idea of like decentralization but you need a way to be able to manage it in one way and an easier way as opposed to doing it in so many different places right? Awesome. I'll demo this real quickly and then I'll jump into like some more questions or what not but so this is a Next.js application where I took the API keys that you saw here right? So basically what I'm trying to do is go in and I'm going to say oh this is a members area and I need access. So I'm going to try and sign it this user is active right? And if I switch to another account let's just call it like Polygon test or what not let's connect to this one and let's refresh this. Again this only had like only an hour to set this up. This user is false it's not they're not set up as a member right? But you can using the API keys again this is a completely separate app Next.js or what not I'm going to generate a form for them to be able to sign in. So I generated the URL I've come back I'm going to sign in with that address which I believe is F408 so hold on one second. Connect that verify it's going to go through that signature part. And obviously it's going to work.

Live demos baby.

Oh yeah, you again bear with me on some of this stuff oh great. Okay. But the idea is that it does go through and then you're able to actually check on the on this side going into your wallet it does verify another user is another user that I tried was my original user but you can generate like forms on the fly which then basically just go through validate it so that if you want a user there you go validated what not if you want a user to be validated with a one-time use form and reload this form yeah there's some bug fixing to fix that but you'd be able to go through and generate it essentially even through your application to be able to say hey you know what it looks like you needed a form that's generated or through this app or hey there's like a Discord bot that you want that just says please generate a validation form and it creates the link and the user goes to that link and validates their wallet then essentially they're they're in and they validated from from that point of view so extensible in the sense that you can build apps on top of that API and work with that that user management and that user gating basically. Whew, okay. Questions? I know it's a bit of a weird app but I think there's still a real use case for it.

Oh man this is awesome. Yeah, gang is there any other questions for Manny we're we have about 8 minutes left.

Is there a way to make hooks more of a public good? I mean it just seems like all of these apps need you know their their gating based on so so for the Patreon example we're just going to have a receipt and we can prove you know if they have that receipt then they can unlock Discord or a website or.

Yeah. So like I realize this is like geared towards specifically yeah a solution that you're looking at right? Um, so maybe you could just like quickly briefly walk me through like the idea that if they make a purchase what kind of purchase are they making? Are they making a trans- like an actual credit card transaction or are they making a buying a token basically?

Yeah I mean basically um yeah I mean just getting like an uh we're just throwing on the blockchain a receipt and it just shows what sub- it's more like a subscription type thing. So they get like a month of content at a time. Um and so the receipt expires at a certain time but we can check the chain and just to see you know if they have a receipt for a certain amount of time and then based on that we could you know gate various things like like their content on their website or something like that.

Got it. Yeah. So the way that this essentially would work again this is sort of like a semi-web2 solution for your contract what you would do is you essentially at the time of minting you could hit this API and say include this user in in the you know within the app right? Um otherwise the the issue that you're dealing with is let's say you want to do a validation of that specific token or that like that specific transaction you would have to redo that implementation over and over depending on how many apps you you actually you know like that you need to set up basically. It's not crazy but at the same time it just becomes tedious in the sense that you know like hey I want it for Discord but I also want it for this other page and then maybe I have this other service and I want to be able to kind of allow a whole bunch of users to be able like a single user to be able to have access to all these different things right? So in that sense this would probably be a better solution in in that you once that transaction goes through you hit this API and you say please include this wallet address they've been verified and then you just ping this API to verify if they've if they've been validated versus going to the blockchain to validate them right? Um which isn't to say that it's not a it's not a great way to be able to validate it's just a central way to be able to make it easier for for cross-platform in that sense as well too.

Yeah that makes sense because you're right I mean the simple case is like a boolean like unlock something but you're right when it gets more complicated and you have a lot of things that you're trying to manage I could see this making a lot more sense for that.

And then also you typically depending on how you do customer service it will be like it's it's a shitty feeling from a customer like that they forgot to pay on time you know what I mean? Right. So having those hard deadlines of saying like oh the month is up right automatically. I know you want to make revenue but sometimes in terms of your audience you want to be able to give them a little bit of a leeway this is where that can come in to give you that leeway to say you know like you can manually do it or you can say you know after a certain amount of time of expiration then we'll disable their account too.

I'll post up the Figma again this is just the repo. But yeah if you guys want to check it out maybe not the master branch because of the hackathon but the current branch right now is feature-refactor-2022-march-8th. Um and you'll notice that comes with all the instructions in terms of what you need to do. This does rely on Supabase authentication. I rebuilt this app probably with Raz like three times um but it also works with this specific API so project-shadow-api this is the full version it uses Prisma and SQL and you can use in it there's a Docker compose file so if you want to spin up a database with the actual database structure and how to set it up locally everything is there as well um and open to having you know forks and PRs as well.

I like the emojis in your commit messages.

Oh that's npx git-cz.

Oh nice as a package.

Yeah, yeah it's just for standardized commit like commitizen basically.

Oh got gotcha gotcha. Um I guess one nit-pick question from me since your project is called Project Shadow does it indeed have a dark mode?

Ah that's it's coming. Yes I've thought of that too. Yes a dark mode is coming yes but there's so many things to get to this thing.

Do we have any yeah yeah exactly any final questions here? Urik is asking if the code is public and yes I uh the code is indeed public.

Yes, I'll post the link here Manny/project-shadow-app. I think that's the one I promise that's not porn. Unless it's code porn you're looking for then yes.

Ah yeah there you go nice nice save. Awesome. Well if there's no other questions again feel free to hit me up on Discord I'm obviously here um or check me out on Twitter as well if you guys don't already know I'm semi-active on Twitter so definitely follow me there. Um again I'm somebody who's been in the tech industry probably for 13 years I'm also a lead engineer for another um more Web2 company um dealing with some Web3 projects but if uh if you do have questions even just about the tech or even checking out some other projects that I've worked on uh or check out medium my medium posts or what not everything from how to set up a hard hat solidity contract on localhost using Docker, a Node.js API, even like a essentially a file uploader as well with a progress upload. It's really kind of cool. Or check out some of my other projects in GitHub one of them which is like how to create a Polygon NFT um with all the steps to be able to kind of create and deploy a Polygon NFT in terms of your wallet setup, Alchemy setup, Polygon setup, um going through the entire process and even a gallery as well using Alchemy's API so that you guys can kind of see an NFT gallery as well. These are some projects I've worked on too. But yeah, follow me if you can follow me if you want but that's it.

Definitely give Manny a follow his content is top notch. So and as a OG DevNTell member you can see all his contributions in a lot of the repos and and Figmas that we have scattered around. So definitely give Manny a follow. And with that I guess today's DevNTell is concluded. Thank you again Manny really appreciate you coming on showing all this hard work really excited to see where where this goes. For all our attendees today there is a POAP that I will share the link to very shortly after this and Manny there's also a special speaker POAP for you that I will DM. Ooh, nice. Oh yeah get some POAPs. But yes I'm wishing everybody a very great rest of their days a great rest of or great weekend and we will see you back here next week. Ah yeah. Alright with that I will stop the recording.