Web3 Wallet Demo on NEAR from DevHub Live 15 - Guest: Alex Shevchenko

Captions as YouTube publishes them, usually machine-generated, so product and people names can be misheard.

1. 0:00

   what you're seeing right now is a stage in deployment of a new website this is an onboarding portal for people who are working with who are very used to web through wallets um this website is uh fully open source so anyone is able to use different things out of it um and uh uh who knows maybe it is going to be eventually included into the new.org or maybe maybe some somewhere on devhub or or something right so uh but again this is just the onboarding portal because

2. 0:34

   not everything will be possible for users to access directly in metamask and other web three compatible wallets so what users are usually going to see in their metamask is something that they are very familiar with uh naturally so uh they are going to see a new network which is a near protocol network uh they are going to see their address which is an ordinary ethereum address that they are usually seeing in other blockchains they are going to see

3. 1:14

   near as a balance of their wallet and actually this account is going to be the near account so if we're going to go to to near blocks unfortunately we would not be able to see this particular account right away but there will be uh but in order to in order to do in order to find this account we need to have this protocol upgrade to happen at the moment we're kind of emulating it however uh people will be able to log

4. 1:47

   in with the near wallet uh and this is the ordinary wallet selector um call or World selector library that is called here and uh you and people will be able to click on the ethereum wallet alternatively people will be able directly click login with ethereum uh so this is an extension of the bullet selector that now Powers two buttons uh but like if you click login with near and then you click ethereum wallet this is the this is the thing that you're going to see if you click login with ethereum wallet two buttons are not

5. 2:25

   necessarily to it is not necessary to have these two buttons here but uh um still um you would be able to to have this so normalize it with like one single login button if you want yeah it can be just one single login button so no problem so I'm logging in as you can see ordinary with metamask right so so the same permissions the website will be able to see the address account balance

6. 2:49

   activity you know all of the stuff so I'm connecting now in the login you able to see that uh that this is my account well at the moment is 0x something something dot something do near but in the end in the final version you going to see after the protocol upgrade that it's going to be zerox entress and that's it um and now let's see how you are able to so this is all the onboarding front end right so people are able to see to learn more about near they're able to uh

7. 3:27

   get new near wallet or use the ethereum wallet uh they are able to earn near by completing quests uh they are able to use own ramps exchanges or Bridge some things and then people are able to do staken so staken is one of the crucial features um in the near protocol uh and it is actually a delegated staken so you don't need to run your own validator you can delegate your near into the other validator and um uh obviously St is not available directly in metamask

8. 4:02

   there is no button to stake here so you need to have a front end that will give you an opportunity to S and this onboard in front end is actually implementing this taken uh this taken of the uh inside of the near protocol so this is how the taken looks like uh as you can see I have already staked a little bit of near 0.1 near which earned a little bit more near as you can see already uh but I'm able to stake more tokens so

9. 4:32

   let's try to do this I'm saying that I would like to stake uh more tokens into this validator and uh this is just an ordinary web3 front end there is nothing nothing specific that is happening but here is the interesting thing when the front end creates the transaction then this is what is displayed to the user by the wallet selector you're able to see which account by the way here we see this t near this is this is what we need to add before the

10. 5:03

    upgrade um so this is my account that is trying to call deposit and stake function uh on the smart contract zad deal. V1 near with a deposit or the amount of near that is attached to this transaction point one near there are some details you're able to see these are just the generic details uh the Json details of the near call so this is a function call with the parameters uh the method name is deposed in stake there are no arguments there there is some gas

11. 5:35

    that is attached to this uh transaction and there's this deposit which is the amount of near that is attached to this transaction so I can click confirm the transaction so this is like a detailed view of the near transaction we unfortunately cannot show this detailed view directly in the web3 wallet however this is something that is rendered by the front end and people who are curious about what actually they are executing

12. 5:59

    um uh they are able to see this moreover directly into this uh thin into this part of the of the wallet selector we would be able to uh add uh in the future some additional um kind of analysis of the uh of the actions so for example if the front end uh tries to add a full a full access key to the user's account which is a little bit strange thing to do it can be highlighted in red that you

13. 6:32

    know this is a strange action and please make sure that you fully understand what is happening right now so th this screen can be used as an additional prodection yeah and then you when you click confirm transaction you redirected to an ordinary metamask uh um uh transaction sign in window and as you can see here there is there is some kind of function called Somewhere uh your attention point one year there is an estimation of the of

14. 7:03

    how much does it cost there is an estimation of the gas fee this is the maximum fear 0.03 years so this maximum amount that I'm going to spend in this transaction is 0.13 year this is something that you expect to see in the metamask in the EV compartible networks so I am confirming this transaction and as you know near is a pretty quick blockchain end to endend latency of the transaction execution is approximately 6 seconds while the uh the actual transaction execution and finality of

15. 7:35

    the transaction takes uh no more than two seconds so you can see here that there is a there is already I've stake this and I'm able also to view the transaction in the Explorer and here it is right so let me I hardly consist yeah uh I can I can make this a little bit bigger for all of us so uh as you can see there is the transaction actions this deposit in stake and here is the here is the thing that is actually the interesting thing

16. 8:09

    that happens in the in the user smart contract so my account on near is not just an account it is a smart account it is a smart contract and there is a this method of the smart contract that is executed rlp execute callback um and this method what does it mean it means that the transaction that is created by the metamask which is the rlp encoded transaction this is a specific encoding

17. 8:38

    that is used in the ethereum and we cannot change this so This rlp encoded transaction is passed as a call to the method that is called rlp execute callback and then these near smart contract is unwrapping this transaction checking that the owner um checking that there is a proper signature checking what is actually inside of this transaction what the user wants to call and then it does this call and in this case this is a deposit and stake call

18. 9:10

    after this right so yeah I mean transaction fee is lower um than it was estimated like 0.03 the reason for this is that uh in near protocol like we usually put in the gas limit of 300 teras which results in 0.03 near potential consumption but the usual consumption is much much lower than right so yeah again super straightforward thing uh and as you can see um there is this function call I also can click on this and I see what

19. 9:49

    was happening here directly this is some kind of function call this is a complicated thing yeah but uh but what I'm able to see here is that I'm able also here to click on the button view on the Block Explorer and then magically it goes to the same place so so the user experience here is absolutely the same as in other evm comparable networks yeah very familiar you want to see the details of the transaction yeah it goes there yes the

20. 10:20

    the uh Explorer is not ether scan but it looks and feels like ether scan because newer blocks looks and feel like you can you can get some additional information here um really interesting how does this something like this the people who maybe are aware of like the snap integration that how is this different obviously this is much more now native feeling exactly where's the where's the separation technologically yeah so uh so snaps is a

21. 10:53

    literally manyi front ends that you can embed in metamasks snaps they do not have an ability to work with Ledger they not have the ability to show you this interface of metamask uh they are not able to reuse the same keys that you have on other networks and stuff like that snaps is extremely limited and protected kind of extremely limited feature of metamask and it it puts this in a very protective um kind of

22. 11:23

    playround um so Snaps are always once you install a snap it doesn't look like metamask at all so if you tried near snap's wallet that was developed by here wallet uh it is okayish but the metam for metamask users who are used to see something like this they will never ever understand what is happening interesting moreover let's continue with this thing so this is a staken uh obviously you're able to

23. 11:55

    unstake and and all the stuff according to the near protocol staken rules uh but besides that what you're able to do is actually to see your assets right so you're able to see your portfolio um in my case I have near and Aurora tokens and actually I can uh if I go here there is a a widget of rep Finance uh to swap uh a little bit of near tokens so I have I have four near tokens so I can

24. 12:30

    swap uh let's say .5 near tokens into into Aurora and uh by the way it says four near tokens because there is also three near that is locked because of the storage staken um so it is not showing it correctly in metamask you're going to and this is going to be again changed after the up protocol upgrade in metamask you see the available near that you have 1.47 so I'm swapping half a year here and I'm trying to get this amount of

25. 13:03

    Aurora if I'm clicking swap again there is this th which shows that I need to have two transactions actually happening transaction one transaction two first one is the is depositing of near into the wp near this is what you need to do this is how the r Finance is working you need to First wrap your near token so I'm confirming this transaction again you can see the details now this is what

26. 13:29

    is happening again half a near is used and then 0 Z3 near is used for the gas this transaction is executed and again this is a very handy window that you are able to see here that this is a multitrans action that is here so the first transaction is done and now there is another call which is kind of Ft transfer call this is a specific call to the rep near smart contract and in this call it actually starts to call it calls

27. 14:00

    the ref Finance in the end to do the swaping and then I'm again confirming transaction uh there is only Gas payment there is no near that is connected with it I'm calling this and again this transaction gets executed and I'm getting additional Aurora tokens um instead of my half of the near tokens that I was put in there okay so I should have more Aurora tokens and I I can see

28. 14:30

    them in in here I can see that there is I have less near tokens right and and Aurora tokens so here you able to see that I have uh half an year less tokens but what about the Aurora tokens it will be really nice to see these Aurora tokens as year c20s in in the metamask so you're able to add tokens to the wallet no problem uh I can add this token but in general this token was already added so that's why you see this warning that you're can add an additional token but

29. 15:05

    then in metamask directly you're able to see your tokens you can see near on near protocol you can see Aurora on near Network directly and any other near fungible tokens can be directly imported here and shown and shown directly in uh in this um in this uh uh in this front end so I'm going to copy this um and what also you are able to do directly from the metamask frontend is that you're able to send these tokens so I can send to near testing account this

30. 15:42

    I'm to have the test account I can send to near testing account too metamask just give gives an opportunity for me to do this I can send near tokens or I can send Aurora tokens I can send one Aurora token there specify gas price gas limit blah blah blah something is done here it's all already pre-calculated by the RPC so this is done I'm clicking next this is the transaction it calculates everything that it takes one

31. 16:15

    Aurora and a little bit of near for gas mhm I'm doing the transaction and again near is pretty fast it is going to yeah it's confirmed and take a look at this activity send let me let me come here it is send it's called send Aurora minus one Aurora you're able to see the information metamask understands and it just renders all beautifully there are tons of work behind this but yeah but in the end everything is

32. 16:52

    simple and is intuitive for uh for everybody who have been using web wallets and this works not only with metamask again it works with any web three compatible wallets there are some differences in how they are implementing some specific things so we are trying to cover all of the main web three compatible wallets so that there are no glitches there uh but yeah this is what you're getting so you can see your

33. 17:17

    tokens you can see your balances uh you can import more tokens uh you can track your portfolio probably not I'm not sure that you're able to track your portfolio because this is this is like an additional feature of metamask um you're able to track your your activities you're able to see things how you're sending stuff directly for you're able to send tokens directly from metamask and stuff like that the thing that you would not be able to do in metamask is

34. 17:50

    that you would be not be able to send one aora token to the near native account because metamask knows only about 0x accounts so what you you can do here is send one R token into into my account as2 near so I'm confirming this one again it's absolutely the similar thing that is happening here and now it is rendered as F transfer call of this Aurora token there are some details how the things are done and then I confirm this

35. 18:29

    transaction in case I'm doing the Aurora token transfer like that or any fungible token transfer like that then the way how it is going to be rendered in metamask is a little bit different so once it is done we will be able to see that instead of rendering it as one one or or sent it renders it as a function okay yeah makes that because it is not able to understand that we're sending minus one Aur there is minus one Aurora that goes somewhere there is

36. 19:03

    nothing that like it cannot put anything here uh just because of the logic of how ethereum wallets are working yeah but anyway anyway the coordination between evm uh evm style accounts is going to be rented perfectly uh all of the buttons inside of the metamasks uh metamask musk and other we rewards are working properly for transfers of the fungible assets uh all of the uh all of the calls to the near front ends are working flawlessly near developers do not need

37. 19:41

    to do anything with their frent except for upgrading the wallet selector Library this was very important for us also to make sure that there is no need to rewrite some code to make it suitable for or the web3 compatible wallets and stuff like that uh so yeah it's only the update of the dependencies once everything is released uh and so on uh yeah and in this uh uh in this on boarding uh

38. 20:14

    besides that getting near swapping there is just exploration of different apps documentations learn Community all of the stuff like I mean this is like a typical thing but this is again this is an onboarding experience for every body in the system specifically for the uh for the ethereum wet holders and uh um if you if you are a builder of a project near if you want to be listed somewhere here or you have some suggestions on how

39. 20:44

    to build this then uh really please show share with us your your ideas uh kind of the more valuable information we are able to display play here for newcomers to the new ecosystem uh the bigger are the chances that they are going to stick with the new ecosystem and they will be able to find something useful for them inside of the new ecosystem and for sure we have lots of useful things because on near we have more than a, different DBS

40. 21:17

    that are working and near is currently the most utilized blockchain in the world um by the amount of the transactions and by the amount of uh transacting users so U yeah it's just about exploring and finding things inside of the ecosystem