How to Communicate with Users in a Web3-Native Way: Private + Secure + Intuitive

going to be doing a little bit of live coding I'm not doing live coding before so please bear with me when I kind of run into things we have a few people around um there's Tim fantastic CEO assistant for the day uh Nathan designer Tom at the back moving some photos and Misha who will be here shortly as well later so if you're stuck with anything either raise your hand one of them will come over or if you've got any questions we'll either answer them as we go or at the end as well this Workshop we've kind of built it as a um you know we can follow along what we're doing I want you to be on your laptops building it as well getting experience trying things out see what works through what doesn't we've got a workshop so you can follow along if you find that easier but I'm here to kind of guide you through it Okay cool so um let's let us get started and I'm going to run over to here oops I'm going to close this because we don't need that one for the moment and we're going to get started um yeah so first of all if you want to do things by yourself on your own pace uh you can go to this link at the bottom ifworkshop.e.limo and you'll see exactly the same thing that we're working on today so I'm going to head over that over head over this head over there now um so to get started for those of you who don't yet have a mailchain account um it's actually to create an account I would say if you do have one it's probably still a really good idea to create a new one anyway we're going to be using your secret recovery phrase which is a really important piece of information that you don't want to be sharing anyway and we've got to get that into environment outside your computer so um I'm going to just sort of build create that account now and you can follow along and I'll explain a little bit about what we've done and how we've done things as well so you can get an idea um so we don't need that instead we're going to head over to the main application so app.mailchain.com and if you go to the register page you'll see what looks like a very very familiar um you know user interface for registering and creating user accounts so in this what I would suggest um you do is you know come up with a username and just add something like I don't know Dash MC Dash Workshop so that you can see that this is available for you and you can use it for the workshop and use it for any other code and experiments and you're not having to use your main account and filling it up with messages for testing purposes so um let me head over here and I've got my username ready so I'm just going to pop in Rob for a password uh I'm going to create myself a nice very strong password well I can't type and talk long passwords so if you can bear with me so there's a couple of buttons to click and accept I'm going to prove that I am a human by apparently you know identifying some soccer balls which is great before I click continue I'm going to do a couple of things so inside of here just going to bring your attention to this is the secret recovery phrase so now I've shown it on the phrase it is not a secret recovery phrase anymore um sorry on screen sorry I can generate new ones and that's done securely on your client end so I'm going to kind of hide that and generate myself a couple of new ones so you can't see what's going on now for those of you that are familiar with web3 I've just typed in username and password that's probably settled in some of your like tingly sensors off as like that doesn't sound like a safe thing to do um and in many respects the traditional way that this is built with oauth does present some problems what we mean by that for us it doesn't hit our bar or level of security at mailchain we've built a truly end-to-end encrypted security platform where only you and the sorry the sender and the recipient ever knows about the contents of the messages to achieve that we need a secret that only the client knows and all the processing happens on the client whether that is inside the browser the mobile application or on a you know a server that you're running through the SDK or any client that you're building through the SDK so we've built a password a username and password entry system using the opaque protocol what that allows us to do is presents a very familiar interface for users they register of username and password however that password unlike in oauth is never sent to us it never leaves the user's machine instead there's a series of handshakes and key exchanges between the client and us and at the result at the end of it there's a shared session and a secret that only the client knows with this secret they can then control their secret recovery phrase do authentication and authenticate request backwards and forwards so to fight suffice to say it is a safe way of being able to communicate and it's something that we're really really happy with and we we hope that we've bridged the kind of the user interface and the security for users and for us as well so um I'm going to just add sort of mailchain oh sorry dash dash Workshop here so that um you know Rob has already taken that's my normal one so I'm going to create a new account for this Workshop so it's asked me to identify my human again because I've changed something so I'm gonna select all the watches very quickly hopefully that is correct I'm gonna lock myself in now I'm going to download the secret recovery phrase and I do encourage you to do that it's going to make things easier if you skip if you click skip for any reason it's okay you can grab it from the user interface through the session settings page and someone can kind of walk you through that and also do save your password inside a password manager of your choice so I'm going to download that there which is great okay so it's a mail interface it should look pretty familiar to anyone that's used mail um so that should be everyone here um inbox sent archive Etc and I can compose mails but we're not going to spend very much time inside the user interface instead we're going to be spending the majority of our time inside the code and kind of checking the user interface to see how things go so also make sure that you have metamask installed I've already got that installed and I expect many of you have already so I'm not going to kind of run through that as well um and for this I'm going to be using visual studio code and node.

js for all the examples so let's kind of get started and we're going to step into the first exercise and that is where we're going to be using um a mailchain account to send a message so what I'm going to do is I'm going to just head over to my terminal window um I'm going to figure out where I am great I'm here I'm going to make myself a directory for this mailchain Workshop I'm going to try and do Less Bell image Stakes and I'm going to head over to there I'm going to initialize a git repository um makes life easier for me what I'm going to do here is actually um get a git ignore on this hit oh yeah sorry that's going to be tiny for everyone isn't it thank you very much Tim so what I've done there I've just created a directory I've just gone inside of it and I've run git in it to initialize myself a GitHub repository so now I'm going to be grabbing a git ignore from GitHub so that I can um you know have things set up nicely and securely and it'll look kind of will make sense when we talk about environment variables a little bit later on so I'm just going to grab a curl command for that and you can see it in the instructions steps and open up myself my code editor so we're going to spend most the time inside of here great so um here we are and I'm going to just commit the get ignore as well so it's done brilliant so to start things off we're going to create ourselves a uh a server actually I should run through what we're going to be doing here let me pause myself a second so we're going to be creating a server that allows you to get started with the SDK sending a message and what's going to see it then inside the user interface so we get a feel of how things work so we're going to set ourselves up a um a local node server I'm just going to create myself an npm package I'm going to accept all of the defaults because the defaults are brilliant uh for these purposes so once we've done that um to make things easier for pattern in secrets on more securely for passing in Secrets we're going to be using environment variables environment variables as suitable for your local machine and if you're using environment variables in production environments there's quite a lot of tools to help you manage that but for now we're just going to be focusing on what we're going to do in a local machine to make sure that we store a secret recovery phase safely and we don't copy it somewhere that we really shouldn't be copying it I'm also going to just adjust the screen slightly so you can see the bottom here of the console window because that's going to be important okay fantastic so um once we've got all that set up and before we do that let's install our SDK so we have created an SDK because although we have a API that you can communicate directly with it is difficult to communicate with the API the reason I say is difficult is because you need to authenticate from the client side rather than the server side so the client authenticates and communicates with the server you need to verify all the responses and decrypt the responses and you need to encrypt and sign everything you send so the SDK kind of does all this for you so it just kind of like removes all that you know complexity and makes it very very easy for you to be able to um use to be able to send and eventually receive messages as well so um well that's installing we're going to Now set up ourselves um our dot m file um so what we're going to do is we're going to create a dot m file and we're going to just call it um M so dot m it's attach dot EnV and that's going to create a file here so I'm going to add into here my secret recovery phrase um I'm going to do it in a way that means that I'm not revealing it to everybody on the stage so that should pop that inside my environment file and we'll find out if it has a little bit later on cool so now inside the server.js I'm going to set this up so that we can sort of figure out if my client has actually authenticated correctly AKA have I set up for environment file correctly so I'm going to just require a donim so we have this uh all good then I'm going to import the mailchain SDK I'm sorry no great so now that's imported what I'm going to do is get my secret recovery phrase into here and that's grabbing it from the environment file so once I've done that I'm going to instantiate the SDK and there's a few different ways to do this but because we're using the secret recovery phrase that is the one I'm going to be opting for and now I've got a mailchain SDK available already we need to use an asynchronous function so that we can be able to call the various different methods so I'm just going to create that and have this um available to us great so now what I'm going to do is probably the easiest way to check if I've authenticated correctly is get the local user and see what comes back out so if I have entered my secret recorder phase correctly this will work so let's give it a try and take a look so I'm going to run npm start and see what comes out oh I've not installed dot m so that's going to be something that I'm going to add now rates here we go so that is my username so now I have authenticated I'm inside and we can start working and now we can start sending the first message so to send a message it's pretty straightforward we just need to compose the message body the SDK takes care of everything else for us so what I'm going to do now we've got our user logged in here I'm going to just set this up so to send a message we need to fill out the details as you can imagine we follow in a mail pattern so we need to have who it is sent from who it is sent to and some information about the body so what I'm going to do is I'm actually going to just kind of send it from the user that I have here so from myself and a very simple test case is I'm going to send it to myself if you note here that the two is a is an array you can send to many people just like you would expect in normal um normal email so so I'm going to get myself um hello world yeah from mailchain that sounds great I'm going to get myself some content and here it's worth noting that we require that you put HTML as well because the browser or the client will display everything in HTML um which is which is very nice because you can format emails or format messages into whichever way that you want to um oh dear I've popped open here okay so once that is done um I just need to close my function properly foreign and now we can take a look see whether that is worked correctly because I'm going to just console log out the result this is a good way to just confirm everything is done correctly and I'm going to run npm start again assuming everything has worked we will see a response come down from here and what this is doing is looking at the solution secret recovery phrase we have a quite complex keychain which allows us to pick the relevant keys for the messaging and the encryption in the Inbox and it is proposing and creating that message if we pop over to the UI so if you've got your account open um this is going to be a useful button for today if you just refresh your inbox you'll now see the new message that we popped inside of it so simple as that and that's kind of how we start and you know essentially that piece of functionality is going to run all the way through but what we're going to do now is layer on some more interesting use cases and interests and abilities to be able to address people so let's start addressing or sending messages um from an ethereum account what I'm going to do for that is I suggest to make things nice and safe and secure is we create a test account and pop it into your metamask so that we're just using this for the purpose of the workshop my preferred way of creating a test development only account is just to run this command here openssl get myself a random string and I pop it in there clearly this is not a secure account anymore because everyone's just seen what's going on there so to do that inside of metamask you just open it you click on this icon at the top go import account and paste it inside now for the purposes today I'm not actually going to confirm this particular one I'll explain why a little bit later on but suffice to say I do have myself an address inside of here called it zero one Workshop I suggest when you add your address to here also give it a name it's going to make things a little bit easier to keep track of you can do that by changing it inside the Account Details so now to add addresses or wallets addresses inside of mailchain you click on the register your wallet it'll pop up it'll give you a few options of different wallets that we support obviously we're adding more over time and if there's any that you particularly want do let us know um when you click connect it'll allow you to pick which wallet you want to I'm going to select the one that um I previously added and I'm going to confirm this it's going to guide me through what's happening so the wallet is now connected what we want to do is we we never want to have access to your private key for sending transactions and instead we want you to be able to use a separate messaging key for communication so in this verify address step that is what we're doing here so this message um we've just been formatted quite strangely inside of metamask uh is US explaining what we're doing the the key things to be aware of is this is the address that we're um that you're about to sign with what I'm about to sign with this is the messaging key that's going to be used that's generated by the keyring this is the public key all this information will be public and will be made available to anyone that wants to know and this is a non so that we can just keep a an idea of the tracking of the order now that you sign this there's a couple of other things that happen it's going to go look to see if I've Associated any ens free name Unstoppable other sort of visual names even coinbase as well and again we're kind of adding more and more you can give it a label as well if you want to see it in your inbox anyway but at the moment I'm just going to stick with the defaults and um I'm going to skip this particular step for now so when we hit done what you'll notice here hopefully is there's another mailbox and this is the mailbox that I have just gone and added so once that is done um we can now start messaging from this address so I'm going to go grab the address so I'm just going to copy it from here I'm going to head over to my example and instead of the from I'm going to delete that and I'm going to change it so I put the ethereum address that we just had I'm going to type ethereum Dot mailchain.com so what is now going to happen is it's going to allow us to use this address that I've now registered and send the message from me if you want to experiment and doing kosher experiment throw a different address in there that you haven't registered and it will not work because it will not be able to find the correct keys so I'm just going to change this a little bit different so I'm going to put hello from ethereum wallet I'm going to put that here as well as just so we can distinguish the message a little bit easier so I'm going to run the command again and give it a moment to to run this is and again it's completed successfully it's given us a little bit of status so I'm going to pop over to the inbox I'm going to take a little look oh I've refreshed the page inside the wrong one but that's not a problem I can now see my message and as we can see it's been sent from the ethereum address that I registered here so these are the same addresses you can see the identicon we've got an idea what's going on and of course I can reply forward um things like that but let's stick back in the code because that's where we're going to be spending our day today so that gives you an idea of how you can now send messages from an ethereum address let's try send a message to an assume address but bear with me there's going to be a little bit of twist in this one because we're going to do something slightly different um and it will give you an idea of things that you can do with mailchain that are pretty helpful so I'm actually now going to run the same command before so I'm going to create myself a um another ethereum account but this I'm actually going to do it I'm going to add it to my wallet so if I remember the process correctly not quite import accounts private key import I'm going to be diligent today and I'm going to give it a name so zero two Workshop uh probably a mail chain Workshop that sounds great so I've got my account my address here now I'm going to make it I'm going to deviate from the previous step what we're doing before I'm not going to register inside mailchain for the moment instead I'm going to send a message to it directly so we're going to pop over to here I'm going to take out this I'm going to add that in there and I'm going to do the it's about this correctly ethereum.mailchain.com so I'm going to hit start it's sending now from the ethereum address I've registered two in ethereum address I own but I've not yet registered um and we're going to see what happens so it's gone through successfully if I head over to the UI I refresh the page and as you'd expect and imagine there is no message inside of here so instead what we're going to do we're going to register the new address that I created so we're going to pop it to metamask um it's nicely conveniently selected the new address for me so I'm going to accept that connect um you can now verify the address and it's the very similar message there will be a different messaging key so each address that gets created there are different messaging keys so it keeps them all separate it's actually a really good opportunity to bring in when you add messages when you add register addresses with mailchain we have no way of knowing that you've made that you've done that action so the you have a single view where you can see all your mail and your addresses but only you can see that that is not something that we can see and I think that's a really important part about the safety of using web3 you want to be able to use your different identities and we believe that people are going to have many many identities tens maybe even hundreds of entities for the different things they do but we also think that people when they use these identities they may want to use them together but not reveal that they've done that so the way that we've built the user interface and the uh the different security layers that we have in place it is not possible for anyone else by looking at public information or us by looking at our information to understand that these accounts are added together it is only You by downloading the encrypted information that you can never see this so um again you can look for an ens name which obviously I haven't got because I haven't created one here so I'm going to skip that I should apply that actually and this time I'm going to click the synchronize step and the synchronized step is going to say hey actually I've just read an account and I'd like to find out if there are any messages that were sent to this address before I registered and here we are so this is the message sent from my ethereum address I registered before to the new ethereum address and I've got the message inside of here so this gives you a really kind of interesting way of being able to talk with users and communicate with them even if they're not yet on mailchain but you can still kind of you know be able to get messages out to them and as soon as they register they're going to have all that information that they were expected to have received and it'll give them a kind of a really nice sort of experience when they kind of log in um thank you uh Joey Joey said yes hi guys nice to meet you yeah my address is there um if you want to ping me up Rob at mailchain that's the one that I use more frequently but great to see you um let me get a like back to you oh dear it's on this I've shrunk my screen so much I can't get to it here we go make a slight adjustment cool it's a bit too big okay so that's that's kind of the end of what I'm going to call step one um we've got a few more steps but that gives you like the very basics of the functionality that you can imagine so let's kind of let's just press on because we've got some really interesting stuff that we can do as well ah there's a there's a big hand up there that's kind of like I'm gonna see it on okay hello hi just a quick question about this you can send the user messages before they actually signed up usually that causes problems with end-to-end decryption hmm it does cause problems of entering encryption it's uh there is we have not found a way yet to be able to vend keys in a completely fully private way so this is the only part of our system where we can't maintain the fully entering encryption so when you use this um and you ask for a messaging key so that the so when you kind of say behind the scenes what happens is I want to send a message to this address here it'll give you back a messaging key in all situations and it will tell you whether the messaging key has been a key that has been signed up by the user or a key that has been provided by us so then you as a developer can make a judgment call based on the type of information you're sending whether hey it's you know relatively information on you can send them an update something like this or I'm sending them something that is truly sensitive and private so this is kind of one of the well this is the only compromise we've really had to make on our security posture um and I think this is going to get less and less over time naturally as more people start using the platform or some people will you know find other ways to do it and I think the type of encryption methodologies that come in will make it easier but it's a very good call out and a good spot this is something that you should be aware of and you'll see it inside the SDK when you query for messaging okay did you consider the approach of just holding the messages in the outbox of the sender until there's a real secure encryption key available so that's look that's a really really interesting approach and something that not considered in enough depth so I'd really like to have a chat with you after about it like off the top of my head there's obviously some benefits and some like anything there's downsides and benefits to it it'll work quite well inside our application where we have an inbox if it's someone sending from a server side then you need the developer needs to be maintaining that information and sending and and when that person is finally online or that dresses has finally been registered but it's definitely a really good way of looking at the problem as well so yeah I'd like uh if you're around afterwards it'd be nice to have a little chat absolutely I'd love to all right thank you okay cool all right so actually we're we're now going to kind of work on sending uh to ens addresses so I don't know how many people are following along but if you want to take a moment just to kind of catch up and if there's any other questions I can kind of answer them well everyone's kind of getting themselves up to up to speed okay yes there is a question over there Nathan can we transport the microphone yeah thanks uh I'm curious do I need to do this flow with setting up password and uh downloading the 12 words or I can just connect my existing address to mailchain and see the inbox if I got any emails and just start using it without creating like a new account in the new mnemonic so what can you say that again I didn't quite I didn't quite catch um the question fully yeah sure so the first step we did was to set up the password and download the mnemonic phrase that we just did and then the second step was to connect my existing like some other accounts on metamask and see the inbox for those accounts do I have to do step one or I can just go ahead and connect my metamask and start using email right away so we have um I don't know how many infants coming from um the way that we've kind of build it up to to utilize the inbox you need a mailchain account to be able to see everything inside of there to send messages to send onto the protocol you do not need one so if you wanted to you can use the protocol to be able to communicate it's just they wouldn't land inside the the inbox so we have kind of different layers inside the architecture that allows people more choice so I fully expect that people will come along and build a much cooler more exciting inbox and they will use their own way of organizing the inbox possibly our keychain maybe not but they would use the protocol to be able to do the communication so we kind of have these different layers on top so the examples we're going through at the moment use the inbox it makes it much easier to show things but as a developer or as developers here I imagine you're going to do some stuff that I'm going to be really excited about and some stuff that I've never even thought about and I'm going to be super excited about so um yeah anyone that has any crazy ideas I'd love to hear them afterwards as well cool any other questions for the moment or we'll press on and I'll give you a chance to ask questions after the next stage but I'm sure there'll be a few all right cool so what we're going to do now is we're going to work with um well we're kind of called There's different ways to express an address we have the address as you see it here um and this comes directly from the public key there's also other ways more friendly names whether they be in ens Unstoppable free name coinbase and many others as well lens is another great example so you can start messaging directly to these identities and these identities obviously you know people have chosen to create these identities and they tend to want to communicate in the context of their identities that is really the key of what we're trying to build here it's contextual communication so instead of sending an address send a message directly through the address you can send it to the identity and that allows the user to organize their identities inside the inbox send from their identities and also potentially put rules around the type of messages they want to receive against those identities so what we're going to do we're going to extend what we had done in part one to send a message from an ens name to a a regular um ethereum address now what I have set up earlier is a ens name um now we're going to use so I'm going to just kind of put my ens name into here so it is Rob foreign .

com and just visually double checking I've spelled that right and I'm going to say from my ens okay so what now is um is going to happen is I'm going to be able to use my ens name to communicate and someone's going to see me communicating to them in the context of ens and I can obviously you know send to that address as well so let's go run that as well um now I've used a subdomain here I could have sent it from epistol.if but you can use subdomains you can use name wrappers you can use any of the other name services that we support um and these will kind of work out the box in exactly the same way so again there's there's some pretty interesting things you can do there on the way that you can create users accounts using subdomains or name wrappers and be able to have them available for the life of the the account or the subscription that you've set up for them so I'm going to head over again to the inbox I'm going to check my messages and I can see here I've now got uh from epistolo.eth and if I was to reply I can choose which one I want to reply uh to and I've got that all available for me so this as you can imagine now gives you like a whole new Rich way of being able to communicate with users from different communities um you know in a secure way as well in a secure way as always we use these names to be able to help resolve addresses and resolve the messaging keys but essentially the flow is exactly the same and this you know it's it's very much as as easy as that the SDK when it comes to sending messages I think the thing that developers are going to be spending the most time on is figuring out the content of those messages rather than the actual complexity of sending them and that's what the the SDK gives you and makes it available for you to be able to do um we've wrapped up so I just want to kind of be aware as well this SDK here that we're kind of using today is our very opinionated view of how users send messages on mailchain using the mailchain inbox so each of them parts of that sentence are quite important um and what that means is the gentleman asked earlier about do you need a mailchain inbox for this particular example yes because we're using the mailchim a mailchain account because you're using the mailchain inbox however you can access the other parts of the SDK to register keys to be able to communicate on the protocol to send messages to send other types of messages as well and so they're all available for you when you drill down at different levels I think we're going to struggle to get through that in today's Workshop but again if there's something interesting to you I'll be around I can spend as much of today and the rest of the week kind of explaining things like how they work and we have lots of documentation to kind of guide you through too so let's kind of take a look at the next example and this is a pretty interesting one so we really spoke about sending messages kind of handcrafted messages but I'm sure you're now thinking about like what are the other things that that kind of make sense for me to be able to want to do so I'm going to remove get rid of this we don't need that anymore I'm going to pop back to my um terminal screen we're going to clone a different repository so I need to get to the right place and for everyone that's kind of following Along on your own this is part three so here I'm going to grab this and what we're going to be doing here we're going to be using Alchemy Alchemy notify for those who aren't aware how can we build infrastructure that makes it a lot easier to communicate with ethereum and other networks we've been working with ethereum again um but we'll kind of go through what this does we're going to be creating a web hook that listens to events that happen on the blockchain and then respond to them with messages so I'm going to just open up the repository that I just cloned in Visual Studio again I'm gonna just kind of remove a few of these things and get to where I need to be so into the terminal window um and yeah let's start installing things cool so to do this we need to spend a little bit of time inside of alchemy so um let's pop over to there hmm I'm gonna actually just navigate right into the link it's gonna be much easier so if you don't have an Alchemy account uh you can set one up they're free and we're going to be using the notify part if you've headed to the dashboard directly you'll be able to find it inside of here so um I'm going to just clean this one from my what I did earlier uh routine and we'll get everything set up so first off um we need to have a few things up and running so we need to have installed ngrok and again there's instructions in this page for how to install engrock you can see it all on their website uh once you've got it installed you can just run the engrock command I'm going to run it on 8080 to make sure it's all running when it's running it'll give you a little bit of an idea of what's up it's got a pretty helpful web interface which you can click on and I've opened it in the wrong browser so that's not really good um yeah I don't know just copy this great this is useful if something isn't working as expected I'm going to put it here just in case so now once we've got that up and running and one important thing that we need from ngrok is actually the URL that it's listening on it's going to expose to the world um the port on your machine through this through this dress um Alchemy is going to talk to that port to be able to simulate the web hook coming through so I'm going to create myself a web hook put it here I'm going to create it on ethereum I'm going to create it on go early because we're going to be sending some ether around and it's a little bit uh more practical for this example and you're going to be just adding an extra path here so webhook path okay and I only really care about my ethereum address so I'm going to add the ethereum address the one that I um yeah let's add the one that we had the ens name against so I'm going to pop some ethereum here and I'm going to hit create web hook we're down so let's start kind of setting up the the application um I'm going to be just showing you how to set up your get ignore and you know this might feel like a little bit of Overkill but I feel like it's really really important to make sure that you have a good get ignoring Pace because you're going to be copying in your secret recovery phrase and that's an important secret that you GitHub does not want to be storing or you don't want GitHub storing on your behalf so I'm just gonna create this um now inside get ignore there's ah there's a few files already that's fine I'm actually going to just grab a list that I'm going to copy and paste inside of here so we don't accidentally create something inside so once that's been created I'm going to now create a local M file so touch Dot EMV Dot developments.local now that's being created and ah I think I need to I opened up a little folder before so I'm just going to run get init inside this directory that's fine so that's sorted that out for me you may not need to do that I've opened up visual studio in a layer below so it's a little bit confused on me so that's fine so I've now got my git ignore I'm just going to create a few variables that we need so we're going to be running on port 8080 the host is going to be localhost yeah um the signing key is going to be a nice random phrase so I'm going to grab a oh no the signing free is not that the signing phrase It's signing key sorry is what comes from Alchemy so just a quick tip you'll see an idea here that looks very much like a signing key that is not a signing key instead you need to go to here grab the signing key and copy it and once again I've revealed a secret to everybody but that's okay for today I'm taking that off later and here this is where I'm going to be adding my secret recovery phrase I'm not going to add it directly here instead I'm going to just it into there so that I'm not exposing it to everybody so again this this particular command will achieve that for me no it'll put it in the wrong place so that's fine so I will try that again but this time we'll put it to where we want to put it brilliant cool so um since we're now using dot m we need to tell our package manager that we want to use dot m so we'll get that set up and installed cool so to this project kind of comes with most of what we need already and if we take a look look at source Dot TX will be able to see um everything here so you can see it's set in some environment variables it's getting everything you know in place as we need which is all fine we can we can live and ignore most of that what we do need to do though is we need to tell it to use dot m okay and that is fine um yeah and also yeah okay so now we're going to take a little look and oh yeah so I need to configure my dot m just here that's the bit that I was missing dot m dot config sorry and there's there's definitely better ways to do this but for now we're only going to be using one environment so I'm going to forcefully set it to Dot env.development Dot uh local cool so what this code does it kind of spins up a local Express server it's going to be listening on this port here and once it's got a process and event it's going to send things across what we want to do is intercept this event and use it to send messages so um we can start this just to kind of see it running and this will oops well you saw it but we'll make sure it's running there and you can you can see that this is running to verify that it's kind of working end to end always a good step to do at this this moment is we can fire a test event at it so we can send a test notification that test notification is incent and it's now received that it says it's processing that's great so let's see if we can make it do something a little bit more interesting for us so what I'm going to do is uh inside our web hook we've got it inside here that's fine I'm not going to use this sort.

send instead we're going to change things we're going to go if the web hook event is of type is uh doesn't equal type of address identity so it needs to be an address identity type because that is the one that we're going to be handling for this activity so then we're just going to return a response of um I can do like a 400 I'll send in fact I'm going to put this on another line to make it more readable res brilliant that'll that'll do the trick for that there okay so now that we've got that in place we couldn't start paying attention to the activities that we are interested in they can be sent in a list so I'm just going to pop this um to go through things to go through what's there activity of web hook event dot event dot activity wonderful so during in this for loop we're going to just take a look um see first of all is it and if it's not an external event again we're just going to ignore it activity [Music] doesn't equal external then I'm just going to continue that so we'll skip over that one but that's fine so now I want to grab some information from the activity so let's get some some information out of it we're going to get a from address uh the two address yeah I'll take the value as well that's pretty good um how about an asset and a hash kind of grab everything so now that I've got these I can actually start kind of compose in my composing my message um I'm gonna copy and paste something from the interest of time because uh it's probably gonna take me a while to kind of type this out as I said probably the longest bit we have is grabbing is created on the content so that's just you know created a nicely formatted message for us so now we're kind of we got our message we've used the variables that came from the webhook and we want to start sending it so I'm going to stop this I'm going to add our uh or the mailchain SDK get that installed and we're gonna head over to uh yeah the index file again and we'll we need to import the SDK of course so I'm gonna do that yeah I'm just gonna do the input here so import mail chain from now chain slash SDK so now we've got that available um we need to also configure it with our secret recovery phrase like we have been doing before I'm going to pop this down here so um const questions great now we've got that in place I'm going to instantiate the mail chain clients mail chained off from Secret recovery phrase recovery phrase it could be undefined so that'll sort that out so now we've got it all set up we need to send ourselves [Music] send to the ethereum address that had the transaction the message so I'm gonna just make sure I grab the response what comes here cost response equals a weight margin of sand send mail and tidy that up a little bit it's good we're gonna from what I'm going to do is actually just send it from the um the account that's been registered here just so we don't have to configure one other thing so mailchain dot user so if you ever want to get your main mailchain account you can use this to get the address which I find pretty handy so we're gonna have two and we're going to send it to the address that we received from the web hook sorry so we're going to go from address and in each of this case it's going to be ethereum we do support we are building support for other protocols so you will start seeing new protocols soon so if you're interested in that please do get in touch afterwards and you'll be able to do cross protocol communication as well that'll just come working out the box for you subject and I call them mail subject content mail content that seems pretty good to me so the only thing it's complaining about is asynchronous functions so I'm just going to pop to the top add Ace oh no add async and we should be we should be relatively happy here so um now that looks quite good so what I'm going to do and I'm just going to log out the response so if anything has gone wrong we can see what's up and now we're going to start up the the server and like I'm feeling quite confident about this so we're going to give it a go and see what happens if not I have backup plan um so all is not lost so I'm going to head over to the faucet I'm going to grab myself some eth on go early so I need to go get the address that I'm using for this I'm going to pop that in here I'm going to hit send me some if oh no I don't have enough time okay um Tim who's just put his hand up in the background he's gonna save me and he's gonna send me a little bit of beef so we can make this work so we will know when that happens um there'll be a few seconds for things for it to pop up here are there any questions um while we're waiting for this to to happen no conveniently timed questions from anybody no problems all right so we'll just kind of wait a second there and I will while that's happening talk you through cross protocol communication how that works what that means and as soon as this pops up we'll interrupt and jump into it so at the moment we we allow you to send from a mailchain account or mailchain network account to an ethereum account we support multiple different name Services the name providers over the top of ethereum we also are building out into near which we'll have imminently we're working on other protocols as well and the exciting thing for us is a user messaging from one protocol to another protocol will be exactly the same as their messaging within the same protocol so they won't see or experience or feel any differences inside of that so that's something that's that's going to be kind of like I think really really powerful as well now conveniently we have our web hook oh it looks like Tim's been pretty generous and there's two transactions which is great and now we have um a message that's been sent it's processing another web hook so there's activity which is great news so I'm going to refresh my page here and see what's going on it's activity where did we send it to so did I send it to the wrong place let's take another look I know the demo gods have got me let's have a look what's going on here so that's my go early address and everything's got one address here and it's that one let's have a look I sent it from the correct address should it be in the two address do we think it should have been the two address anyone let's have a Look No it should be the from address do it the two address someone's saying do it the true address yeah you know what let's do it both the from address and the two address oops to address it's a good helpful hint from the audience there thank you okay so I'm going to stop everything start it all up again this is a great way to get you from somebody by the way just kind of like not not have it work first time so um that hopefully is on its way to me again and we'll just wait a few moments for it to to appear aha there it is so now I've received the web hook it is working on sending it come on there we go we've got the message that's been sent through and now hopefully that we sent the correct added or sent it to the correct address we will see what's going on I guess Tim in his inbox has got a few messages here we go so um I'm gonna need to just adjust the size of this focus on the screen a bit we now have our message we've got the you know some formatting we can see some contextual information about the transaction that took place so you can now start imagining I you know I can see a few Northern heads here about how you can start using this to inform users um if you're you know if you're create nfts you give them some sort of experience after purchase after someone's made a transaction after someone's done anything on the network you can inform them and make that experience a lot richer and where we have the end-to-end encryption you can send them sensitive information and that's actually what we're going to touch on quickly next um for this one I'm actually just going to do a demo uh you know really conscious of time and I want to make sure there's plenty of time for questions that people might have at the end and you'll still be able to follow on with it afterwards as well and there are other examples that take a look at so we have um another example here and this is about passwordless Authentication I've clicked on something I shouldn't have clicked on the looks of it um so what passwordless authentication is like using something like magic link and what magic link allows us or you to do here we go we get the right page is to do passwordless authentication so a user can click on a link and they can log themselves in now this is it's a really it's really nice experience the problem then comes is how do I give that user the passwordless link if I care about security if you're not too fast and they trust their email provider so I'm more trustful than others you could send it to their traditional email however there are many problems inside of that and it's very very difficult to fully secure traditional email so with mailchain we do end-to-end encryption and only you and the user can see that message when someone is registered so you can send them a magic link to their address and once they click on it they'll be able to authenticate and it's pretty straightforward so we have inside our um uh mail chain sort of repository we have an examples folder and this gives a couple of examples we've got magic link send API and a few others that we're going to put in after after today so we're going to focus on the magic link example here so do feel free to kind of take a look at this it's a good one to to start and you'll keep up to date with the the new examples the new code you put there so I'm going to just uh close that one off I'm going to see if I can remember where I put the example and here it is examples of JS and I go to magic link and I'm just going to open that up inside of Visual Studio so you can like I said you can clone this or you can produce it in exactly the same way I'm just going to run a demo of it um so we can kind of see it all happening um now what do I have on this I think we want to run npm for this npm start sounds about right aha so I don't have my secrets inside of here that is fine we're gonna we're gonna do that we've got the command for that let me just pop and see what I've got here oh yeah so inside of here you you set up a secret password session key and that is one of my favorite keys that I just generate with um openssh file so we'll put a different one in there for the time being um and now I'm going to add in my secret recovery phrase into there I'm going to add it into the correct one so we've got M that is good I'm now going to run uh npm start again to start things up so what this has done is this is so if you are familiar with Express probably familiar with passport password allows you to build authentication on top of your Express applications and like web to authentication works well jwts are well proven well tested it's really about how you create those jwts and how they authenticate it and this is I think where you know you can add and we can show a really interesting use case so uh now that we've got this up I just need to find out what port this is running on um we can probably Brute Force our way into that let's have a look aha there we go to do's an application that I need so many of um but anyway so to do the application you just need to sign yourself in and what is built here is the ability to be able to sign in with a mailchain address so what I can do is actually let's use the rub the epistolar the ens name that had so app install dot if so I'm going to sign in with my mode chain account there oh yeah that didn't work let's try it at NS dot mail chain.com oh what have I done ah I know what I've done hold on a second Rob's done something they shouldn't have done pretend that didn't happen so I'm just going to I need to edit my M file but because I've got something in there I just need to remove it so we're going to start again so touch dot EnV one of the parameters that I was missing is the from address so what we need to do is we need the it's the secret signing key what is the name of it uh secret underscore uh passport underscore session underscore key equals let's go create another one of these these can be anything really well at least in production they can be anything um and now I need a from underscore address a bit that I was missing uh and I call this Rob what what is what is my account called it is called Rob emcee Workshop I should have asked you Jerry what my um name was come brilliant so close that and Echo that into there and now we're going to run mpm start pop back over to here and this time we don't need that we can do it without it we're gonna run sign in okay so let's take a little look we can pop over to the I'm sorry to the terminal window to see what's happened but basically it's saying check your mailchain inbox uh there's not a lot of logging we've got here on this case but that doesn't matter we're going to pop over to here I may have a few more funds transfers messages but the one I'm really interested in is a sign in to my to-do's app um so if I click the sign in button I've got it I'm here almost spelled it correctly um so now I've done that I'm going to mark that off my to-do's I'm pretty happy about it and I'm going to go sign myself out as well which is going to be quite difficult to tick this off once I sign myself out but that doesn't matter um so if I click sign out it will invalidate my session and that uses passport under the hood with magic link and mailchain as the secure transport which is often The Missing Link in that particular kind of equation there the code is all available I'm not going to talk through it now because I want to make sure I've got a chance to answer any questions or the questions that you all have um so let me kind of hop over here and see if anyone's got any questions machine come on guys you've been sitting watching stuff coding along I'm sure there's a few things that you're quite curious about so we've got the microphone if anyone wants to wants to know anything no lots of lots of silence and I think hopefully happy people uh Tim is there anything else we want to go through quickly well we've got we've got a few more minutes I guess [Music] all right okay well look there's many different examples and let me just kind of point you towards the the GitHub repository that we have so you can see where you can grab the SD code you can see some of our documentation as well but you are all super busy people you have many things to do and a really big event so I want to make sure that you get to experience as much of it as possible um so here's our developer documentation our GitHub is at mailchain slash GitHub you will see our docs our SDK um our examples and a bunch of other stuff that hopefully useful for you um we're on Discord you can message Rob at mailchain Team mailchain Misha we've got quite a few of the team around everyone who raises their hands who's paying attention so if you want to kind of ask us anything please do um and happy event and happy building take care everyone [Applause]