Accepting Crypto with Zabo with Christopher Brown

so I'm going to be talking about Zhou Bo and tell you why we're building this project and what it can be used for and this discussion is basically about the overflow of wallet providers and exchange providers and crypto currencies that we currently see our team is currently made of five people myself and then doggies here from Brazil will is from Toronto and we got Alex out Manning the table he's him and I are from Dallas Fort Worth area of Texas and we have varying degrees of experience in different industries and we can't kind of came together over the last couple years to develop in the crypto ecosystem we launched Sabo as a product about month and a half two months ago so we're pretty new product wise before that it was just a lot of different projects service work and things like that so the problem that we saw commonly across every project that we looked at and we've touched is this plethora of crypto currencies and wallets that we see now we started off with Bitcoin in a single exchange and as the technology has proven itself we've of course seen it grow over time and now today we have this you know really big expanse of crypto currencies and wallets and so the problems that we're trying to solve crypto currency wallets and applications are disconnected for the most part and this is probably the most difficult problem for developers because it's not just that there's a lot of options because maybe a lot of options are good but none of these options interface with each other very much even at the level one protocol layer you got Bitcoin in theory 'm you know disconnected and we've got atomic swap set or making those things a little bit more accessible i guess to each other in a decentralized way but for the most part and the wallets themselves don't talk to each other they each have their own interface that's unique to the other and so it requires a lot of manual work there's decisions that have to be made by the designers so the idea is we can do adapt and we can commit 100% onto the etherium ecosystem and so will inject web 3 or ether x' and get made a mask and we're happy with that and that's that's a that's a design decision that you have to make but that only gets you a very small subset of potential crypto users we know 80% of cryptocurrency is held in Bitcoin and and then beyond that we have a lot of new technologies coming up we've got cosmos we've got polka dot we've got eath etherium Bitcoin of course are the mainstays and then you've got tokens kind of spread out among among these chains so it's it's a very hard problem for developers because if you want to capture a large market I feel like every time I talk to a new crypto project on aetherium bitcoins always on the roadmap but it never quite gets there I haven't really seen anybody meaningfully involve crypto in a in a user system so what I want to do is I actually want to build an application with you guys it's called the crypto Club and kind of show you the power of what we've done with Zhou Bo the workshop app is available at this repository if you guys are interested in coding with me the github is za Bo - API and then there's the Saba workshop app and what I want to show you guys as whoever sets up is going to do that is here's awesome crypto club so this is what we're going to demonstrate is what we're gonna build and the idea is we have a crypto Club the only way to join is if you own cryptocurrency the only way you can pervert prove ownership of cryptocurrency is by connecting a wallet we also have smaller communities within the crypto club and of course to join those you have to own the crypto that that division of the club represents so what we can see here is we have different clubs so we got Bitcoin we've got Bitcoin cash and then we have etherium we've got two ERC 20 tokens spank chain and status and then we've got atom on here so this is this is the type of application that that were envisioning for something like Sabo where you need to access the wider crypto community and not just be isolated to one chain and one type of application so the premise is easy the user can connect a wallet by simply connecting the button here you'll see that it already recognizes my wall and I've got 0.7 ether it shows that I've got ether in the wallet and click on that to donate to the club and I'll go ahead and donate point one and then I logged the transaction here and you'll see here's my transaction object I get the amount way I know who it went to it came from me here's the transaction ID this is this is actually done over rank B and what a what I wanted to show you on this real quick is I actually operated this completely decentralized so I I have a fully sync note so don't I didn't do this on the Wi-Fi and actually it hasn't fully synced on here at all I fired it up right before the workshop to kind of show you guys so zabo api has a dashboard registration system where we issue api keys for server based applications and then we also have a client sdk where you can put a client ID and identify yourself with that said i'm going to show you that next but what i wanted to show you first is that zaba operates completely decentralized so a user can show up with a node and run it and zabo api will talk to that node it will also talk to coin basis custodial api it'll also talk to finances api it'll also talk to mate a mask it'll also talk to ledger so all these wallets and there's no lines change the lines of code so what i just did there with my aetherium node we're gonna rebuild that application using a server or using the regular client sdk and we're going to connect through made a mask and you'll see that i that there was actually no change and then also connect to an exchange can show you guys a connection to Bitcoin and all that so that is here I'll show you this if anybody wants to get on here that there's the workshop again so I'm going to go ahead and start the so once you pull to get repository NPM install you'll get all the necessary packages and then NPM runs start it'll pull up our base application here and we're we're gonna code in for the most part is if you go into source I'm not sure why I have good expanded they're going to source go into scripts and index J s and this is where we're gonna build our code start off with zabo is initialized with a client ID and then you specify the environment and pull this down a little bit is that visible to everybody or is any bit bit bigger yeah close that up so good and actually probably don't need this either all right so we have full documentation a table comm slash Docs also and the first step that you do is you had put in a client ID in an environment if you're operating in decentralized mode the client ID in the environment are done away with and you identify you put decentralized in here and true like this and then you put a use note key in here and then you put the URL to the node that's running on your machine and then I'll get you in decentralized mode and then you can do away with the client ID in the environment that's all detailed and documentation to get access to exchanges and other wallets and things like that you do have to establish zabo with a client ID so we call this an it function and that gets you the Szabo object and the Szabo object is what carries the entire interface with interface you can get balances transaction history and send crypto again those three functions when you calls szabo transactions in you identify the currency Bitcoin and you define the amount the wallet that's connected already knows what addresses from and if it's an exchange account it will translate it into that exchanges API if it's a made of mask it'll send it to mate a mask if it's a direct connection with a node it will translate it into that nodes byte code that it needs and then send it all you have to do is call these three functions and you have access to to all of that so what we do here is to Stan she ate a wallet connection we call zabba connect once we have it initialized with with our information so we have a click handler here on the button this button has an ID of Connect so we're selecting that button and we're adding a click event listener so when that button is clicked we're going to call zaba connect and then what we give you is a non connection event so when this function is called the user is taken to Zappos connection widget if we're using them if we're using the connection widget if it's the the note itself as you saw it was just an immediate connection with the unlocked key store so on connection we get an account object and then the first step that we'll do with the account object is we will create a text node right so we'll do document create text node and this node is going to say congratulations we see that you X amount of crypto currencies so how do we figure out that X when the account connects we give you a currencies array and in that currencies array you get all the currencies that are being held in whatever wallet was connected so we'll do account dot currencies dot length on that and the length of that arrays the number of currencies each current each object in the array gives you the currency ticker so it'll be like BTC ETH spank S&T and then it will give you the balance and that whole whole true for whatever wallets connected and basically the powers you don't have to have an opinion on what wallets connected anymore with this you can accept them all and so we'll create a div here [Music] create great element right and then we're gonna yeah that's right because then we're going to attach this as a child node to the to the Welcome section of the this way will upend the node and then the number welcome in child we will append a div so doesn't really have anything to do with Zhou Bo we just basically create a text note for that we attached it to a div and then we gave the div over to the to the member welcome so now we have a connection so if we reload this we should be able to connect to wallet and what happens when a user selects connect this is what the Saba to connect function does for them is it pulls up all the wallets that they want to connect so this is if your user doesn't show up with a with a decentralized running node they can select any of these so I'll select Finance they're given information on what the applications asking for and the dashboard you can spell out which scopes you want with the connection so you can say I just want to read balances in transaction history or you can also detach you know sending crypto some of the exchange accounts can't transfer crypto outbound all of them all the connections we have right now can transfer crypto inbound so if you want to send crypto into their custodial wallet you can make that connection to make that happen Finance is one where we can move crypto out of but on the server side only so there's a caveat to that so we're showing 13 currencies I don't think I logged the no I didn't log the account but we're showing 13 currencies in this connected bike of Finance account none of them are well actually we haven't connected these buttons yet so there's that so and then you can go back in and you can connect in any other one and then you'll get the currencies out of that wallet alright so then the next step the next step we're going to do is we're going to activate those club buttons so we're going to run a four step in here and then we've got these club buttons which are these down here and what we're going to do is we're iterate through the account and find the currencies that are in the account if any of those currencies in the account match what we need for these two subdivisions of the club we'll go ahead and activate that so we got the club buttons in there and then what we'll do is we'll I think we'll write it if count currencies yeah we'll do some C and what the sum is some is a function that will iterate through the array as soon as it finds whatever it's looking for it immediately loop start the loop over so you don't have to put anything in there that's to make that happen so if the currency object currency which is the ticker in there equals the club buttons i dot ID then we are going to make the button active and I'll go ahead and log this so we can see it on the next one I believe that's what we need to do so what we're doing now is we're iterating through the account currencies we're seeing if one of the currencies match one of the buttons IDs and if it does we're going to make that button active so we can go back through and reload here I missed something on here what's up yeah oh yeah yeah yeah yeah got it all right No the console will give us a clue count is not define what's up oh yeah I got a log it inside the thing that's right dope cool alright so now we're gonna connect will do will be on this one and boom so in the who OB account we've got Bitcoin and Bitcoin cash the iterator found those buttons in there and since I logged the account I'll go ahead and show you guys so here's the account object that you get back from from zabo we have the address here the UID because the address for this account is actually the external account ID for the whole OB account then we got a list of all the currencies that are in that account what we can't do though is from the client side send crypto from the exchange account so if we're sending from a custodial wallet that has to be enacted from the server side client side can handle node can also handle self custody accounts like mathematical ledger but a server connection is required for any it's the same interface just it has to be from a different environment of course because we have to have those server credentials set up and yeah so I guess the final thing let me pull this up real quick make sure we're good on what else we're doing here want to show you guys the donations stuff real quick okay yeah let me uh let's add this real quick so on the domain button donate button we're gonna add eventlistener we're gonna click and then what we're going to do is we're gonna Sabo dock transactions send and we're gonna do in the send function we define the currency which is the selected club these are kind of pre-built varial variables that I've already built for this to address is going to be the club's address which we already define once we select a club and and then we're going to do the amount which is the donate value amount input right oh yeah so in the in the input I change it to donate value and then we will go ahead and just log to X well alright so same interface same thing we've been doing let's hope this pans out we will connect made a mask on this one and all right so I'm a dumbass we've got a theory on we've got spanked token and we've got status we'll click on the status club we'll donate 10 status tokens boom think probably didn't yeah I didn't donate so we'll go through a time a school asked us to confirm it and there's our and there's our transaction again so that in itself is not the impressive feature it's the fact that we haven't changes a line of code and then I can go and connect to ok X account my user can bring their custodial wallet in the same application we can recognize those currencies we can connect to a local node and any wallet in between there and so again what this does for the developers you don't again have to have an opinion on the on the technology being connected to your application it can just take whatever it is so to get started is IVA calm we've got a dashboard there you can register again if you just want to pull the sdk down and connect it decentralized that's available and we have Doc's available QuickStart app if you need a chat with us we're in the Waterloo discord we have our own disc or channels also and I just feel free to reach out and that's all I got Thanks [Applause]