Gen Z Developer Moses Finlay Integrates NEAR on Tracker

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

1. 0:04

   hey guys welcome back it's mozilla here in the last video i introduced myself and talked about some of my backstory as a developer i also talked about tracker and an integration with near protocol if you haven't seen the first video yet you should definitely check it out just to give you a quick overview we started tracker because we needed a way to make our communities financially sustainable while also building tools that empower community builders to build thriving communities

2. 0:28

   so far we've built a paid advertising system for our groups we also have built-in email lists a paid job board and even a donation integration in this video i'll be adding the ability for users to tip near tokens on tracker this feature will allow users to connect their near wallet and then enable them to send your tokens directly to another user let's get right into it okay so this is the profile on your tracker account right here

3. 0:52

   as you can see we have cash app paypal bitcoin patreon we will be adding near protocol to the top the first step is to add a near login button they will have the option to show a tip button on their post so it'll look like this and when they click it they'll see their monetization methods up here so let's start building i am on near's documentation page for their javascript client and fortunately tracker is built on react

4. 1:16

   so it will integrate perfectly all right so we're starting to see some progress i just made this connect to near button and when i click it i'm hoping that it takes me to then your wallet awesome so this just took me to my testnet wallet and if i click more information i can see that tracker.testnet is requesting access if i click allow it should redirect me back to my profile um it still says connect to near so now i need to build a disconnect near button

5. 1:45

   and that's what i'll do right now okay so i just built this disconnect near button it should disconnect my account and nothing happens so i just figured out why the logging out button isn't working pretty sure it's because when you click it it doesn't refresh this window right here now clicking disconnect should refresh and there we go now we need to actually record when a user signs in right now it's storing all

6. 2:16

   this data in local storage but we actually want to record this data in our database so it's persistent across devices okay so now that we've built a way for a user to connect to their new wallet and disconnect their near wallet we're going to be adding the tip button for near and that will go right here and basically a user will be able to click it and window will pop up where they'll be requested to transfer tokens to the

7. 2:46

   author's near wallet this is the near tip button when you click it this modal pops up that shows the user's account id and you can even copy it the next step is going to be a nice ui element where the user can see the equivalent number of near to us dollars so the user could type in 20 dollars and see the number of near that's equal to then we'll be adding a button right above here that says tip when they click that it will request to transfer that number of tokens

8. 3:18

   out of their near wallet so i just finished this ui element where a user can convert us dollars to near so for example if i typed in 15 that would show the number of near that fifteen dollars is equivalent to at the time of this recording near is just about three dollars and as you can see in my code editor i have set the near price to be a fixed number of three what we're going to need to do

9. 3:42

   is actually make this a dynamic value and the way we're going to do that is grab the price of near in us dollars from coin market caps api so now that we've made the price of near dynamic using coin market caps api we're going to be adding a tip button here and when the user clicks it it will take them to their near wallet where they'll be requested to transfer this number of tokens out of their near wallet and into the authors near wallet so let's head over to near's api documentation and figure out how to transfer tokens

10. 4:18

    all right so we just finished the near button and in this window i can type in ten dollars and that'll convert it to near and down in the button you can see tip 3.29 near if i click that it will take me to my testnet wallet it'll request a transfer 3.3 near out of my wallet if i click allow it says transferring and if we give it a second it redirects us back to our application all right now if i head over to my test

11. 4:41

    note wallet we can actually see that transaction we just created yep there it is we transferred 3.3 near out of my account and we sent it right to mostly.testing so i basically sent it from osfindling.testnet to the same account um just for testing and it succeeded so yeah and that's the feature complete so now that we're done i want to do a brief overview of the feature as a whole so so far we've built a um connect and

12. 5:05

    disconnect near button a user can go to the profile and connect their near wallet to their tracker account then we built a tip button so a user can monetize their posts and when they click it there's a near option when they click the near option they see this nice ui element where a user can convert their us dollars in engineer if i were to type in 15 we see that amount right here and if they click that it takes them to their near wallet where they'll be requested to transfer those tokens

13. 5:31

    and that's it that's the feature complete i ran into a few issues along the way but we ended up getting it to work i just wanted to mention how simple it was building an integration like this season year i had a lot of fun anyways that's all for now i really hope you enjoyed this video and you found it helpful i'll see you next time you