End to End Dash Tutorial - 6b
Anthony Campolo debugs Dash Platform JavaScript tutorial scripts on testnet, covering identity creation, name registration, and a React frontend.
Episode Description
Anthony Campolo continues debugging Dash Platform JavaScript tutorial scripts on testnet, working through identity creation, name registration, and connecting the API to a React frontend.
Episode Summary
Anthony Campolo returns to his end-to-end Dash Platform tutorial after intermittent blockchain errors finally cleared, allowing him to make real progress on the JavaScript scripts and accompanying React app. He recaps the project structure, noting his switch to ESM modules, decoupled client configuration, and the importance of using the v4 dev release plus the magic skip-synchronization-before-height value supplied by a Dash Core team member. He successfully runs create identity, retrieve identity, retrieve identity IDs, and register name scripts, walking through what each does while flagging questions about credits and label naming for an upcoming session with Ryan. The retrieve name and register contract scripts remain broken with unclear errors, so he sets those aside, stubs out logging, and pivots to the Express API server and Vite-based React frontend. After updating hardcoded values and pushing fixes, he confirms the full stack works end-to-end: the React app fetches the registered name through the API and renders the response, which now contains noticeably more metadata than before. He closes by listing follow-up tasks including upgrading to Node 20's native watch and env flags, deciding how many frontend frameworks to demonstrate, and scheduling Ryan to help unblock the data contract section.
Speakers
- Anthony Campolo
Chapters
00:00:00 - Debugging Frustrations and Getting Unstuck
Anthony opens the stream acknowledging this is effectively episode 6B in the numbering scheme he borrowed from AJ, and admits the past sessions have been a grind because errors from the create identity script keep appearing and disappearing seemingly at random. Just minutes before going live, he hit a brand new error he had never seen, waited sixty seconds, ran it again, and it worked with no explanation.
He frames this unpredictability as the nature of working against a large decentralized network on testnet, where failures can be hard to trace, and offers no shade to anyone building the platform. The good news is that he now has a working identity ID in hand, which means the tutorial can finally move past the blocker that had stalled previous streams.
00:02:48 - Tutorial Structure and Project Setup Recap
Anthony shares his screen, fixes some broken screenshot references in the tutorial markdown, and walks through the high-level shape of the document. He explains that the Dash Platform is the JavaScript-based layer currently running only on testnet, so nothing here moves real funds, and that the materials he is producing are meant to be ready when mainnet launches.
He highlights two deviations from the official Dash docs: pinning to the v4 dev release rather than the default v3, and rewriting every example as ESM with type module instead of CommonJS require. He also points out that he decoupled the client configuration into its own file holding the wallet mnemonic, rather than instantiating it inline in every script the way the official examples do.
00:06:35 - The Magic Number and Wallet Creation Flow
Anthony zooms in on the skipSynchronizationBeforeHeight value in his client file, which a Dash Core team member supplied and which seems necessary to get create identity working reliably, even though Discord contributors told him changing this number was not what fixed his earlier issue. He treats it as the current magic number for anyone following along.
He then walks through the create wallet script, which calls getWalletAccount, exports the mnemonic, and returns an unused address. The workflow involves taking that address to the testnet faucet, clicking get coins, waiting for the page to time out into a blank error state, and treating that as success. The block explorer can then confirm the funds arrived before any identity work begins.
00:09:19 - Identity Retrieval and Top Up
With a working identity ID stored in his .env, Anthony runs identities.get by destructuring platform off the client, a style he prefers because it leaves room to console.log the platform object when debugging. The retrieval works cleanly, as does the retrieve identity IDs script, which returns a single-element array matching the identity he just created.
He moves to the top up identity script and the identity credit balance check, which both run, then pauses to write himself a note to ask Ryan exactly what credits are and how they relate to the rest of the system. This is a recurring thread in the stream: the code runs, but the conceptual model behind credits has not yet been documented in his tutorial.
00:13:50 - Registering and Retrieving a Name
Anthony introduces names as the Dash equivalent of ENS or domain names tied to an identity. He registers the name "dashstreamtest" against his identity, taking a moment to write a note explaining that the label parameter is just the human-readable name the user wants to claim, even though he originally chose the variable name "label" for reasons he can no longer fully recall.
When he runs retrieve name, however, it returns null repeatedly, even after he stops hardcoding values and properly threads the label through the .env. He flags this as a real problem because the frontend example later in the tutorial depends on this exact response, then makes a note and pushes forward rather than getting stuck again.
00:19:34 - Data Contracts Section Falls Apart
Anthony moves into the data contracts portion of the tutorial, attempting to register a contract. He gets an error he has not seen before, tries hardcoding the identity ID directly to rule out env loading issues, and gets the same failure regardless. Retrieve contract obviously also fails since there is no contract to retrieve.
After cleaning up some hardcoded values and tutorial copy along the way, he decides this whole section needs Ryan's help to debug properly. Critically, he realizes the React frontend example he built does not actually require the contract scripts, only the names work, so he logs the error, marks it as a known issue, and skips ahead rather than letting it block progress.
00:27:20 - The Express API Server
Anthony pivots to the Express server he wrote, which exposes endpoints that wrap the same node scripts he has been running manually. He reviews the available routes covering block hash, block height, wallet creation, all the identity operations, and name registration and retrieval, confirming that the contract endpoints are absent which matches his decision to defer that work.
He hits the name endpoint with his registered name and gets a successful response back, which is a meaningful milestone after the earlier null returns. He also leaves himself a note to upgrade the server scripts to use Node 20's native watch flag and env file support, which would let him drop the nodemon and dotenv dependencies entirely.
00:34:00 - Monorepo Structure and React Frontend
Anthony explains the monorepo layout: base scripts at the root, the API server alongside them, and frontend apps nested as sibling folders rather than under a deeper frontend directory, which he feels keeps things readable. He uses a vanilla React Vite setup as the first frontend.
He copies in the index.html, main file, App component, and CSS, describing the manual scaffolding as meditative even though he could just run a Vite create command. He starts the API server, then the React dev server, and the page successfully fetches the registered name from the backend. Notably, the response payload is much larger than it was last summer, including new fields around domain name lowercase validation that he wants to ask Ryan about.
00:38:52 - Wrap Up, Open Questions, and Next Steps
Anthony updates the UI with a fetch button, a loader, and nicer formatting so the response is actually readable, completing a working end-to-end demo from script to API to React. He acknowledges his tutorial is missing installation instructions for the various frontend folders he has scaffolded across React, Vue, Svelte, Solid, Preact, and Angular, and questions whether Preact still has enough usage to keep.
He closes by writing out his open questions, including whether to ship one frontend or several, and whether each framework should get its own tutorial or just live in the examples repo. He commits his progress, ending the stream at 00:46:56 with plans to bring Ryan on midweek to tackle the data contract failures and the higher-level architectural questions.
Transcript
00:00:02 - Anthony Campolo
Hello, hello everybody.
00:00:05 - Anthony Campolo
Welcome to, this is like episode 5B.
00:00:10 - Anthony Campolo
I've been adopting the naming nomenclature that AJ is already using.
00:00:16 - Anthony Campolo
Seems like he'll number his episodes and then if he's working on something, a couple episodes, he'll add letters to them.
00:00:24 - Anthony Campolo
Really, this should be kind of like 6B, but at this point, I'm not going to go back and make new thumbnails and everything for the one episode we did with Ryan.
00:00:33 - Anthony Campolo
So there is a one episode out there in the ether that's not really that important because we have been trying to debug this code.
00:00:43 - Anthony Campolo
And it's been a challenge because we keep getting different errors seemingly randomly, even right before going on here, like literally two minutes before
00:00:55 - Anthony Campolo
I was running the create identity script again that we've been trying to figure out.
00:00:59 - Anthony Campolo
And I got a brand new error I hadn't even seen yet.
00:01:02 - Anthony Campolo
I'm like, all right, great.
00:01:03 - Anthony Campolo
Well, I guess once again, we're going to not be able to do the thing.
00:01:06 - Anthony Campolo
Then I waited 60 seconds for it to run again, and hey, it worked.
00:01:08 - Anthony Campolo
So that's good.
00:01:11 - Anthony Campolo
It worked.
00:01:13 - Anthony Campolo
No idea why.
00:01:14 - Anthony Campolo
I think, you know, it's kind of the nature of the blockchain.
00:01:19 - Anthony Campolo
When you're dealing with this large decentralized network, sometimes errors can be hard to trace back.
00:01:24 - Anthony Campolo
So...
00:01:25 - Anthony Campolo
Totally get it.
00:01:26 - Anthony Campolo
You know, no shade to anybody out there working on this.
00:01:30 - Anthony Campolo
This is highly complicated tech.
00:01:32 - Anthony Campolo
But yeah, it's just, you know, it's hard when your code is broken and you don't know why.
00:01:37 - Anthony Campolo
And all you can really do is say, hey, does anyone out there know why my code is broken?
00:01:43 - Anthony Campolo
But since the code was not broken, I have an identity ID now.
00:01:48 - Anthony Campolo
So I think we can move ahead.
00:01:50 - Anthony Campolo
With our tutorial and continue kind of rerunning it.
00:01:57 - Anthony Campolo
I'm going to share my screen.
00:02:00 - Anthony Campolo
Let me just do one last.
00:02:03 - Anthony Campolo
Quick check that I don't have anything on my screen.
00:02:08 - Anthony Campolo
That is bad.
00:02:09 - Anthony Campolo
Nope, nope.
00:02:10 - Anthony Campolo
This is a fairly new computer, so I'm trying to keep it locked down.
00:02:16 - Anthony Campolo
All right, so.
00:02:19 - Anthony Campolo
Cool, cool, cool.
00:02:21 - Anthony Campolo
Let's hide this.
00:02:23 - Anthony Campolo
Move that over there.
00:02:26 - Anthony Campolo
I always like to do just one quick check.
00:02:32 - Anthony Campolo
Make sure I'm live.
00:02:34 - Anthony Campolo
There we go.
00:02:35 - Anthony Campolo
Great.
00:02:38 - Anthony Campolo
Okay, so let's get a little recap of kind of where we are, what we've done, and why.
00:02:48 - Anthony Campolo
Oh, actually, real quick, I know what I want to fix first.
00:02:52 - Anthony Campolo
I want to fix these screenshots.
00:03:02 - Anthony Campolo
So this is our tutorial here.
00:03:06 - Anthony Campolo
Definitely didn't mean to do that.
00:03:09 - Anthony Campolo
Meant to zoom in.
00:03:10 - Anthony Campolo
There we go.
00:03:12 - Anthony Campolo
And so we've got, where's our first screenshot?
00:03:18 - Anthony Campolo
There's no first screenshot, I guess.
00:03:22 - Anthony Campolo
This should probably be one, two, three.
00:03:34 - Anthony Campolo
Okay.
00:03:46 - Anthony Campolo
Let's see, that should do it.
00:03:48 - Anthony Campolo
Yeah, great, got the screenshots now.
00:03:51 - Anthony Campolo
I think there's gonna be one more.
00:03:57 - Anthony Campolo
Here
00:04:02 - Anthony Campolo
I think there's a screenshot for the React server, but I guess we'll get to that when we get to it.
00:04:14 - Anthony Campolo
That's fine.
00:04:15 - Anthony Campolo
Let me push those.
00:04:32 - Anthony Campolo
Okay, so this is a tutorial that I've been working on.
00:04:38 - Anthony Campolo
Most of this I wrote back last summer when I was originally doing all of this stuff for Dash.
00:04:46 - Anthony Campolo
Make sure that's visible.
00:04:49 - Anthony Campolo
And yeah, so if we look at kind of high level, we have an introduction where we talk about what is the Dash platform.
00:04:57 - Anthony Campolo
If you're here watching this stream, you probably have somewhat of an idea of what that is.
00:05:00 - Anthony Campolo
This is the JavaScript web-based new platform that is being built out.
00:05:07 - Anthony Campolo
It is currently only running on Testnet, so you can't really use this to push real funds to wallets or buy things out in the real world.
00:05:16 - Anthony Campolo
But we're working this out so that once we are on mainnet, we have good materials and example apps and things that people are going to be able to work with.
00:05:26 - Anthony Campolo
And so I started that by creating a node project with a couple of little defaults.
00:05:33 - Anthony Campolo
This is one thing that is new from last time when I built this.
00:05:37 - Anthony Campolo
I still need to update that there.
00:05:39 - Anthony Campolo
We're now.
00:05:40 - Anthony Campolo
on a version 4 dev net dev test
00:05:47 - Anthony Campolo
so this is basically you can think of this as running at latest and this is kind of like a canary or a next version or whatever you want to call it so if you just install dash by itself you get version 3
00:06:02 - Anthony Campolo
you want to make sure you're using the newest one this is one of the things that was suggested to me as I was trying to debug the errors.
00:06:10 - Anthony Campolo
And then we're set in type to module.
00:06:12 - Anthony Campolo
This is not in the official dash docs because I have rewritten all the examples to be in ESM instead of require.
00:06:22 - Anthony Campolo
And then here we got a whole bunch of scripts.
00:06:24 - Anthony Campolo
So what I've been doing is kind of like.
00:06:27 - Anthony Campolo
Working through all these scripts that I had written and made sure that they still work.
00:06:32 - Anthony Campolo
And seemingly, they all do kind of still work.
00:06:35 - Anthony Campolo
The only real change we made was here in the client.
00:06:39 - Anthony Campolo
There's this skip synchronization before height, and that is not correct anymore.
00:06:45 - Anthony Campolo
So...
00:06:47 - Anthony Campolo
We thought that fixing and updating this number is what fixed our create identity function.
00:06:55 - Anthony Campolo
But both people in the Discord were saying that's not actually the case.
00:06:59 - Anthony Campolo
And then I discovered myself just a couple minutes ago that that is true.
00:07:03 - Anthony Campolo
We were still getting errors.
00:07:05 - Anthony Campolo
But they were different errors.
00:07:06 - Anthony Campolo
So, you know.
00:07:08 - Anthony Campolo
Hard to say.
00:07:10 - Anthony Campolo
Exactly, but I would say for people out there following along, this is the number I got from a Dash Core team member.
00:07:17 - Anthony Campolo
When I have gotten it to work, it has been using this number, so this seems to be the magic number for now.
00:07:24 - Anthony Campolo
I've got another change that I have is that if you look at all these scripts in the actual dash docs, they give you the client in there with the scripts.
00:07:36 - Anthony Campolo
I have decoupled out the client.
00:07:39 - Anthony Campolo
So it has its own file here.
00:07:41 - Anthony Campolo
And this is where you're going to sync your wallet mnemonic and things of that nature.
00:07:49 - Anthony Campolo
So after that, we have a couple scripts that are just reading from the blockchain.
00:07:56 - Anthony Campolo
So this is our get block methods.
00:08:03 - Anthony Campolo
Let's see.
00:08:04 - Anthony Campolo
That is like that.
00:08:05 - Anthony Campolo
Yep.
00:08:07 - Anthony Campolo
And then when you run those, you just get some kind of block numbers back.
00:08:11 - Anthony Campolo
And these are not super duper interesting.
00:08:13 - Anthony Campolo
So I'm going to skip past most of that.
00:08:16 - Anthony Campolo
Then you got the create wallet and identity.
00:08:18 - Anthony Campolo
This is the really important stuff.
00:08:19 - Anthony Campolo
This is how you get a wallet and then start creating stuff on the blockchain.
00:08:25 - Anthony Campolo
So your create wallet script will run get wallet account, set that to a variable, and then export wallet to get your mnemonic back.
00:08:35 - Anthony Campolo
And then get unused address so you can get an address to send funds to.
00:08:42 - Anthony Campolo
Then when you run the command, you get this back.
00:08:45 - Anthony Campolo
And this is a very old wallet from when I first wrote this.
00:08:50 - Anthony Campolo
You need to then use testnet.
00:08:52 - Anthony Campolo
So be aware in testnet when you use it.
00:08:56 - Anthony Campolo
You're going to add in an address.
00:08:58 - Anthony Campolo
Say you're not a robot.
00:08:59 - Anthony Campolo
Hit get coins.
00:09:00 - Anthony Campolo
Then you're going to wait.
00:09:02 - Anthony Campolo
And eventually the site is going to time out and then just go blank and give you an error.
00:09:06 - Anthony Campolo
That means it worked.
00:09:07 - Anthony Campolo
So after you do that, you can then go to the block explorer and see that everything has worked as expected.
00:09:19 - Anthony Campolo
Do I still have?
00:09:20 - Anthony Campolo
I do.
00:09:20 - Anthony Campolo
Okay, good.
00:09:26 - Anthony Campolo
specific address that or the specific function that was really giving us issues was this create identity function
00:09:33 - Anthony Campolo
and it seems here that so you see last time i ran it i was able to get this and then real quick this is probably not super duper necessary but i'm gonna try and keep
00:09:46 - Anthony Campolo
as best as I can, my wallet hidden.
00:09:49 - Anthony Campolo
I don't think it's really the biggest deal if it were to be seen, but it just allows me to take one more thing off the list of things that might be broken if somebody hops on, drains my wallet or something like that.
00:10:04 - Anthony Campolo
Which I'm sure none of you streamers out there would do because you're all nice, kind people, right?
00:10:09 - Anthony Campolo
Of course.
00:10:10 - Anthony Campolo
Okay, so we have a working identity ID now.
00:10:16 - Anthony Campolo
Just kind of depending on how far we get, I may go back and kind of start filling in some of the some of like the the explanations of this code, you know, because right now.
00:10:27 - Anthony Campolo
And like I didn't really talk about too much what an identity is, I don't think.
00:10:31 - Anthony Campolo
So if we go.
00:10:33 - Anthony Campolo
Up here yeah so there's not really a lot of terms defined right now in this tutorial i just want to get the code working first so we'll see how far we get at some point i'm gonna want to do that so
00:10:47 - Anthony Campolo
i think right now we're on the retrieve identity so let's see how
00:10:52 - Anthony Campolo
how this goes now.
00:10:54 - Anthony Campolo
So now we've got our identity ID is set in our .env, and we're going to run this identities.get function.
00:11:07 - Anthony Campolo
And something I'm doing here is I'm destructuring out the platform, and then...
00:11:13 - Anthony Campolo
Running this you could do this as a as a one-liner if you want I like kind of like doing like this because then if you want to like console log the platform you could do that in here think things like that just kind of get some more visibility into your code
00:11:27 - Anthony Campolo
especially when weird things are breaking and you don't know why okay let's see what's gonna go I run this
00:11:42 - Anthony Campolo
Okay, I think that worked.
00:11:45 - Anthony Campolo
Looks like it.
00:11:47 - Anthony Campolo
I actually have.
00:11:52 - Anthony Campolo
So I don't think I need this actually in my .env, so I'm not sure if I really want this same way of logging it out.
00:12:00 - Anthony Campolo
But I do know something I can do is I have this.
00:12:06 - Anthony Campolo
I have this gist where I just like keep useful little snippets and things.
00:12:16 - Anthony Campolo
That's for curl.
00:12:17 - Anthony Campolo
That's probably not going to work.
00:12:19 - Anthony Campolo
Okay, never mind.
00:12:20 - Anthony Campolo
Anyway, let's keep moving on.
00:12:22 - Anthony Campolo
That worked, so.
00:12:24 - Anthony Campolo
Okay, so now we got retrieve identity ID.
00:12:29 - Anthony Campolo
This is going to be the specific IDs that I've got in my wallet.
00:12:40 - Anthony Campolo
If we run that, we're going to get back, I believe, an array of IDs.
00:12:46 - Anthony Campolo
I think there's only going to be one, because I have only created one.
00:12:50 - Anthony Campolo
So that right there is what was created up here.
00:12:56 - Anthony Campolo
Okay, so far, this is all making sense.
00:13:00 - Anthony Campolo
This is all working as intended.
00:13:02 - Anthony Campolo
Which is very good.
00:13:04 - Anthony Campolo
Now we've got top up identity.
00:13:13 - Anthony Campolo
that here
00:13:17 - Anthony Campolo
that
00:13:23 - Anthony Campolo
These are some of the...
00:13:26 - Anthony Campolo
Let me make a note.
00:13:31 - Anthony Campolo
Ask Ryan about credits.
00:13:34 - Anthony Campolo
What are they?
00:13:35 - Anthony Campolo
This is a question I had last time we were doing this.
00:13:38 - Anthony Campolo
How credits relate to all this.
00:13:44 - Anthony Campolo
What they are.
00:13:45 - Anthony Campolo
So we got that there.
00:13:46 - Anthony Campolo
We got identity credit balance.
00:13:48 - Anthony Campolo
So that's good.
00:13:49 - Anthony Campolo
Okay.
00:13:50 - Anthony Campolo
Now, we're going to register a name.
00:13:55 - Anthony Campolo
This is where we start to create something kind of akin to a domain name on your block or like an ENS, Ethereum name, service name, things like that.
00:14:05 - Anthony Campolo
So register name here.
00:14:10 - Anthony Campolo
Now this is taking in the identity ID and the label.
00:14:15 - Anthony Campolo
I don't create a label yet, though.
00:14:18 - Anthony Campolo
I think I...
00:14:21 - Anthony Campolo
Messed up something.
00:14:25 - Anthony Campolo
Wait.
00:14:28 - Anthony Campolo
I think the label is the name you want to give it, if I believe, if I remember correctly.
00:14:34 - Anthony Campolo
Let me just real quick go and check this section out.
00:14:39 - Anthony Campolo
I've done these in names.
00:14:43 - Anthony Campolo
Register a name for an identity.
00:14:51 - Anthony Campolo
Yeah, identity name goes here.
00:14:53 - Anthony Campolo
There's a reason why I called it a label specifically that I'm not quite remembering right now, but I remember going back and forth on trying to decide how to name that variable back when I was doing this.
00:15:06 - Anthony Campolo
So let's see.
00:15:08 - Anthony Campolo
Maybe it'll come to me later, but for now,
00:15:11 - Anthony Campolo
What I'm going to do is I'm not going to process top of the GVDAC because I don't want to go back in there.
00:15:17 - Anthony Campolo
I'm just going to do this, and I'm going to say stream test.
00:15:26 - Anthony Campolo
And then we give this 20, 24, 03, 30.
00:15:36 - Anthony Campolo
Yeah, it's fine.
00:15:37 - Anthony Campolo
That should be fine.
00:15:39 - Anthony Campolo
So let's try that now.
00:15:43 - Anthony Campolo
Register name.
00:15:44 - Anthony Campolo
See what happens.
00:15:56 - Anthony Campolo
Let me make a note to myself to actually explain that.
00:16:07 - Anthony Campolo
Explanation of label.
00:16:10 - Anthony Campolo
It is the dash name you want to identify yourself.
00:16:17 - Anthony Campolo
Okay, and it looks like it worked.
00:16:19 - Anthony Campolo
So that's cool.
00:16:22 - Anthony Campolo
That is very cool.
00:16:28 - Anthony Campolo
Awesome.
00:16:31 - Anthony Campolo
So now that we have registered a name, let's retrieve the name.
00:16:42 - Anthony Campolo
And run name.
00:16:45 - Anthony Campolo
Okay, so.
00:16:52 - Anthony Campolo
I think I know what's wrong.
00:16:53 - Anthony Campolo
Labels, not a process that I need to be anymore.
00:17:02 - Anthony Campolo
Actually, yeah, let's hop off again and just put this in.
00:17:09 - Anthony Campolo
In the place where it goes, which is a .env.
00:17:14 - Anthony Campolo
Okay.
00:17:15 - Anthony Campolo
Boom, boom, boom.
00:17:19 - Anthony Campolo
Just get that hard code out of there.
00:17:23 - Anthony Campolo
Okay.
00:17:24 - Anthony Campolo
Okay.
00:17:32 - Anthony Campolo
Sorry for the bit of the screen switching here.
00:17:39 - Anthony Campolo
This should work as expected now.
00:17:41 - Anthony Campolo
Null.
00:18:09 - Anthony Campolo
Still null.
00:18:13 - Anthony Campolo
Hmm.
00:18:22 - Anthony Campolo
That is odd.
00:18:26 - Anthony Campolo
I should be getting this back.
00:18:35 - Anthony Campolo
Okay, okay.
00:18:38 - Anthony Campolo
Let's do this first.
00:18:45 - Anthony Campolo
If that helps.
00:18:50 - Anthony Campolo
Still no.
00:18:52 - Anthony Campolo
Okay.
00:18:57 - Anthony Campolo
I think that might be an issue when we go forward.
00:19:03 - Anthony Campolo
Because.
00:19:06 - Anthony Campolo
Look at that.
00:19:09 - Anthony Campolo
Because this is the part that is displayed on your front end, the example as it goes on.
00:19:18 - Anthony Campolo
So let's make a note of that.
00:19:30 - Anthony Campolo
Okay, let's keep going though.
00:19:32 - Anthony Campolo
Let's see what happens.
00:19:34 - Anthony Campolo
So now we're in the data contracts section.
00:19:41 - Anthony Campolo
We're going to do a register contract.
00:19:49 - Anthony Campolo
Actually, I'm going to stop here and clean some things up and dash examples.
00:19:58 - Anthony Campolo
I don't have too many notes here, so let's start with first this one.
00:20:12 - Anthony Campolo
a label in .env with your desired name.
00:20:51 - Anthony Campolo
Okay.
00:21:03 - Anthony Campolo
Okay, great.
00:21:04 - Anthony Campolo
Great, great, great.
00:21:07 - Anthony Campolo
I had already known that this was broken.
00:21:11 - Anthony Campolo
Yes, that's right.
00:21:12 - Anthony Campolo
There it is.
00:21:12 - Anthony Campolo
There it is.
00:21:13 - Anthony Campolo
Okay.
00:21:14 - Anthony Campolo
So I already knew that.
00:21:16 - Anthony Campolo
Not sure why, though.
00:21:21 - Anthony Campolo
Maybe it's got...
00:21:23 - Anthony Campolo
Hmm.
00:21:24 - Anthony Campolo
Yeah.
00:21:26 - Anthony Campolo
Okay.
00:21:26 - Anthony Campolo
Anyway, so that's probably fine then, at least for now.
00:21:29 - Anthony Campolo
I think we'll be able to continue on, but I do need to figure out why that's broken at a certain point.
00:21:49 - Anthony Campolo
A bit more descriptive.
00:21:57 - Anthony Campolo
Move it right here.
00:22:14 - Anthony Campolo
Okay, and then I wanted to also fix this part.
00:22:19 - Anthony Campolo
I don't want that hard-coded, of course.
00:22:35 - Anthony Campolo
Let's push those.
00:22:43 - Anthony Campolo
Okay.
00:22:45 - Anthony Campolo
Okay.
00:22:48 - Anthony Campolo
So, boom.
00:22:54 - Anthony Campolo
Okay, all right, we're making good progress, making good progress here.
00:22:58 - Anthony Campolo
So we already got, did I already create those?
00:23:01 - Anthony Campolo
Yeah, okay.
00:23:03 - Anthony Campolo
So let's refresh that.
00:23:11 - Anthony Campolo
Register contract.
00:23:19 - Anthony Campolo
Let's fix that.
00:23:23 - Anthony Campolo
Here we go.
00:23:29 - Anthony Campolo
Okay.
00:23:30 - Anthony Campolo
Got an error.
00:23:33 - Anthony Campolo
So let's see if hard coding the identity ID fixes it like it did last time.
00:23:54 - Anthony Campolo
No, it did not.
00:23:58 - Anthony Campolo
Unless let me try one more thing.
00:24:13 - Anthony Campolo
Okay, so same error no matter what.
00:24:15 - Anthony Campolo
Okay, so I'm going to keep that there then.
00:24:20 - Anthony Campolo
Keep this here because that seems to not actually matter.
00:24:26 - Anthony Campolo
Let's update this.
00:24:31 - Anthony Campolo
It seemed like I had gotten these ones working in the past.
00:24:39 - Anthony Campolo
So, I got a couple broken things in here now, unfortunately.
00:24:44 - Anthony Campolo
But that is the nature of code.
00:24:47 - Anthony Campolo
When you leave it alone for a year, stuff breaks.
00:25:07 - Anthony Campolo
Something went wrong.
00:25:08 - Anthony Campolo
Value error.
00:25:10 - Anthony Campolo
That's what I would need to figure out.
00:25:11 - Anthony Campolo
What does WBGPTR mean?
00:25:18 - Anthony Campolo
Okay, I'm going to keep plowing through.
00:25:33 - Anthony Campolo
I don't have an actual command to run this.
00:25:53 - Anthony Campolo
Doei.
00:25:54 - Anthony Campolo
Doei.
00:26:08 - Anthony Campolo
Okay, that's the, that's getting the wrong contract ID.
00:26:11 - Anthony Campolo
So I can get a contract ID.
00:26:13 - Anthony Campolo
I ain't registered a contract.
00:26:15 - Anthony Campolo
Okay, obviously.
00:26:17 - Anthony Campolo
So, so to retrieve the contract, you gotta be able to create it.
00:26:21 - Anthony Campolo
So that is a bit of an issue.
00:26:38 - Anthony Campolo
All right, I don't think I need the contracts for the front end example I built.
00:26:44 - Anthony Campolo
I think the names are all you need.
00:26:48 - Anthony Campolo
So I'm going to just log that error, the first error, the error from register contract, make sure that's taken care of.
00:27:02 - Anthony Campolo
Okay, that was taken care of.
00:27:03 - Anthony Campolo
Good.
00:27:04 - Anthony Campolo
Okay, so I didn't push it.
00:27:15 - Anthony Campolo
Okay.
00:27:16 - Anthony Campolo
So let's skip ahead a bit.
00:27:20 - Anthony Campolo
I think I want to work through the contract stuff with Ryan on stream.
00:27:26 - Anthony Campolo
So if you're watching this, Ryan, you're out there.
00:27:29 - Anthony Campolo
Help!
00:27:29 - Anthony Campolo
Help me!
00:27:30 - Anthony Campolo
I need help!
00:27:33 - Anthony Campolo
Okay, so let's skip all that and let's go to the Express server out there.
00:27:40 - Anthony Campolo
Here.
00:27:44 - Anthony Campolo
We're going to make our API.
00:27:47 - Anthony Campolo
And so what I had done here is I had, and this is where our stuff gets really complicated.
00:27:55 - Anthony Campolo
So I have an Express server that is going to provide an endpoint that does these node scripts that we're just running.
00:28:04 - Anthony Campolo
So that's pretty much it.
00:28:05 - Anthony Campolo
How you should think about it.
00:28:08 - Anthony Campolo
And then let me just make sure.
00:28:13 - Anthony Campolo
This is probably not all exactly, or maybe it is, let's see.
00:28:19 - Anthony Campolo
Let's block hash, get block, block height, create wallet, create identity, retrieve identity, retrieve identity IDs, update identity, disable key, top up identity,
00:28:32 - Anthony Campolo
Register name, retrieve name.
00:28:35 - Anthony Campolo
Okay, yeah, so these do not have the contract stuff in them yet, which makes sense because, as I was saying, I don't think we needed those to get this to work.
00:28:43 - Anthony Campolo
So that's all fine.
00:28:47 - Anthony Campolo
So I'm going to let that sit for now.
00:28:50 - Anthony Campolo
But I think...
00:28:55 - Anthony Campolo
Yeah, this is where I already have this, but I had...
00:29:01 - Anthony Campolo
Okay, so I don't remember if I still need npm run all.
00:29:07 - Anthony Campolo
That's something I'm going to have to kind of remind myself of.
00:29:11 - Anthony Campolo
But for now, let's do this.
00:29:15 - Anthony Campolo
I'm just going to keep both these in here.
00:29:16 - Anthony Campolo
So if I run either of them, it should work.
00:29:19 - Anthony Campolo
It shouldn't be too big of an issue.
00:29:22 - Anthony Campolo
Let's look at our API server.
00:29:25 - Anthony Campolo
Server.js, which is going to be up here.
00:29:29 - Anthony Campolo
Yep.
00:29:32 - Anthony Campolo
Okay.
00:29:35 - Anthony Campolo
And let's see what happens.
00:29:40 - Anthony Campolo
Okay, okay, okay, okay.
00:29:44 - Anthony Campolo
So we're gonna run this now, but we're going to use our correct name, which was,
00:29:51 - Anthony Campolo
Yeah, so I've done a couple onesie here.
00:29:52 - Anthony Campolo
So you see I got dash stream test.
00:29:55 - Anthony Campolo
I've had AJC web dev test.
00:29:58 - Anthony Campolo
That's a, let's fix that right now.
00:30:01 - Anthony Campolo
That's obnoxious.
00:30:22 - Anthony Campolo
So we're going to want dash stream.
00:30:27 - Anthony Campolo
There's a stream test.
00:30:29 - Anthony Campolo
That's what it was.
00:30:30 - Anthony Campolo
There we go.
00:30:54 - Anthony Campolo
Okay.
00:31:05 - Anthony Campolo
Okay, that's all good.
00:31:06 - Anthony Campolo
And then Dash Stream test.
00:31:11 - Anthony Campolo
Okay, that's fine.
00:31:13 - Anthony Campolo
That already needs to be updated.
00:31:15 - Anthony Campolo
And that's from your, that's your view component.
00:31:19 - Anthony Campolo
Apparently, VS Code does not like the view syntax.
00:31:23 - Anthony Campolo
Maybe I need the view.
00:31:25 - Anthony Campolo
Probably need one of these guys.
00:31:34 - Anthony Campolo
There we go.
00:31:36 - Anthony Campolo
Much nicer.
00:31:39 - Anthony Campolo
Okay, that's all good.
00:31:54 - Anthony Campolo
Okay.
00:31:55 - Anthony Campolo
All righty.
00:31:56 - Anthony Campolo
We are pushing code, people.
00:31:59 - Anthony Campolo
All right.
00:32:02 - Anthony Campolo
Go back up here.
00:32:09 - Anthony Campolo
Okay, and then refresh that.
00:32:18 - Anthony Campolo
Okay, so everything is running as planned.
00:32:23 - Anthony Campolo
I should be able to hit this to get my name back.
00:32:29 - Anthony Campolo
Check, make sure that's all good.
00:32:35 - Anthony Campolo
Okay, look at that.
00:32:40 - Anthony Campolo
What is all this?
00:32:44 - Anthony Campolo
Okay, it worked.
00:32:46 - Anthony Campolo
Awesome.
00:32:48 - Anthony Campolo
Awesome.
00:32:50 - Anthony Campolo
Okay.
00:32:57 - Anthony Campolo
That's killer.
00:32:58 - Anthony Campolo
Okay, so I think we should be good to go all the way up to the end of this React example.
00:33:06 - Anthony Campolo
If that is all the case, a couple things I'm going to want to figure out.
00:33:12 - Anthony Campolo
I just had it.
00:33:13 - Anthony Campolo
Hold on.
00:33:18 - Anthony Campolo
Oh, I want to...
00:33:22 - Anthony Campolo
To update Express server commands to use Node 20 features, including watch and env
00:33:36 - Anthony Campolo
flags.
00:33:37 - Anthony Campolo
So this is pretty cool.
00:33:38 - Anthony Campolo
You no longer need nodemon and .env if you're using
00:33:44 - Anthony Campolo
node 20.
00:33:46 - Anthony Campolo
So that's something I'm going to want to fix.
00:33:54 - Anthony Campolo
All right, so let's keep on keeping on.
00:34:00 - Anthony Campolo
That so now we're doing let me let me explain what's happening now real quick so
00:34:08 - Anthony Campolo
and you know no one's really talking in the in the chat so i'm gonna close this and then check it when when i finish in like 15 minutes or so let me fix these
00:34:20 - Anthony Campolo
ridiculous window setup I've had this whole stream.
00:34:24 - Anthony Campolo
Okay, this is a little nicer.
00:34:27 - Anthony Campolo
Okay, so now what's happening is we've got kind of like, I think this is considered a monorepo setup.
00:34:35 - Anthony Campolo
I am nesting my front ends in with
00:34:39 - Anthony Campolo
the scripts and the API.
00:34:42 - Anthony Campolo
So I kind of like this structure because it separates out.
00:34:48 - Anthony Campolo
There's like the base scripts, which you can just kind of run as I've been showing.
00:34:53 - Anthony Campolo
And then there's your API, which is your backend.
00:34:57 - Anthony Campolo
And then there's your frontend.
00:35:00 - Anthony Campolo
You know, if you really wanted to get nuts with it, you could create like a front end folder that then nests all these folders.
00:35:07 - Anthony Campolo
That's probably a bit more than is really necessary because then you're kind of the more deeply nested you get, the more complicated things tend to be.
00:35:17 - Anthony Campolo
So.
00:35:17 - Anthony Campolo
I'm going to keep this structure like this until anyone...
00:35:21 - Anthony Campolo
tells me otherwise.
00:35:24 - Anthony Campolo
And then once you do all that, so I'm using just a kind of vanilla React Vite setup here.
00:35:40 - Anthony Campolo
And then we want these scripts and all this info.
00:35:56 - Anthony Campolo
So let's go from here up.
00:36:00 - Anthony Campolo
Let's go dash react.
00:36:10 - Anthony Campolo
Okay, and you know this all this stuff, you look here on beat 5 instead of beat 4.
00:36:18 - Anthony Campolo
We're on a slightly updated plugin.
00:36:20 - Anthony Campolo
There may be things that could be updated here to make this cleaner and you know, I kind of decided to build this app piece by piece.
00:36:28 - Anthony Campolo
Really what I should probably do with this tutorial is just run your your V create command and just generate all this by itself.
00:36:35 - Anthony Campolo
But.
00:36:36 - Anthony Campolo
You know, it is kind of a nice exercise to go through, create your whole index.html page, your main function, your app function, your CSS.
00:36:48 - Anthony Campolo
It's meditative.
00:36:51 - Anthony Campolo
Always, it reminds me that I'm a reactive.
00:36:58 - Anthony Campolo
Okay, so let's just get all this code in here.
00:37:03 - Anthony Campolo
Get your app.jsx in here.
00:37:07 - Anthony Campolo
We got that in there, that's correct.
00:37:10 - Anthony Campolo
Add some CSS styling.
00:37:19 - Anthony Campolo
Okay.
00:37:22 - Anthony Campolo
I think that's going to let us hold on actually.
00:37:26 - Anthony Campolo
Whoa, whoa, whoa, whoa, whoa, whoa, whoa, whoa, whoa, whoa, whoa, wait.
00:37:30 - Anthony Campolo
Don't forget, you've got to have your server running.
00:37:35 - Anthony Campolo
Okay, let's see what happens.
00:37:38 - Anthony Campolo
Okay, now, there we go.
00:37:42 - Anthony Campolo
Great.
00:37:44 - Anthony Campolo
So what we have here is the name that I registered being returned.
00:37:53 - Anthony Campolo
And this is different.
00:37:54 - Anthony Campolo
This has...
00:37:57 - Anthony Campolo
Way more information than it did last time.
00:38:05 - Anthony Campolo
So that's really interesting.
00:38:06 - Anthony Campolo
Last time, this was a whole bunch of this stuff was not here.
00:38:09 - Anthony Campolo
That's why I was a little confused when I first ran the node script, and it gave me this huge, huge output.
00:38:15 - Anthony Campolo
So we'll be kind of curious to ask Ryan what all this extra information is and whether I actually need it or not.
00:38:24 - Anthony Campolo
You know, I can definitely see.
00:38:26 - Anthony Campolo
There's something going on with some regular expression stuff.
00:38:30 - Anthony Campolo
Domain name converted to lowercase for cases as if you need this validation.
00:38:34 - Anthony Campolo
So this might just be kind of cover your butt stuff that's been built in to handle all the complexities of, you know, routing, domain naming.
00:38:47 - Anthony Campolo
That type of stuff.
00:38:48 - Anthony Campolo
But this is all great.
00:38:50 - Anthony Campolo
This is all super, super great.
00:38:52 - Anthony Campolo
So now we want a fetch button.
00:38:57 - Anthony Campolo
So let's update this.
00:39:00 - Anthony Campolo
And now what's going to happen is there's going to be a button I can press.
00:39:06 - Anthony Campolo
Fetch the data with a nice little loader and it's formatted a bit more nicely so now we can kind of actually read what the heck's going on here
00:39:17 - Anthony Campolo
css is still being proved we're running off the page here but um okay so we have gotten ourselves back to where we were
00:39:27 - Anthony Campolo
in the beginning that I'm seeing here.
00:39:30 - Anthony Campolo
Ah, there we go.
00:39:31 - Anthony Campolo
I'm also seeing here that I didn't give any of the instructions for actually installing the view things because I wasn't really sure how many of the front ends to include.
00:39:47 - Anthony Campolo
In this tutorial because over in our actual dash examples
00:39:56 - Anthony Campolo
mono repo you can see here i'd already built out a whole bunch of these views felt solid react preact angular i should really get rid of preact i don't think anyone uses preact anymore
00:40:11 - Anthony Campolo
I'll ask Ryan about that.
00:40:13 - Anthony Campolo
Actually, we got a couple notes I need to make.
00:40:17 - Anthony Campolo
Do we really need create?
00:40:21 - Anthony Campolo
How many front ends do we actually want to build out in this tutorial?
00:40:33 - Anthony Campolo
Do we want extra tutorials for each front end framework, or do we just want the dash examples repo with simple commands to spin up?
00:40:55 - Anthony Campolo
Okay.
00:40:57 - Anthony Campolo
All right.
00:40:58 - Anthony Campolo
Feeling good.
00:40:59 - Anthony Campolo
Feeling good about this stream.
00:41:00 - Anthony Campolo
I think we made a lot of progress in terms of getting ourselves back to where we were when I left off last summer.
00:41:11 - Anthony Campolo
We still got some broken node scripts.
00:41:13 - Anthony Campolo
And our whole kind of data contract section is totally busted.
00:41:19 - Anthony Campolo
But that's kind of things I think I want to work through with Ryan.
00:41:25 - Anthony Campolo
And then other stuff in the examples I want to work through.
00:41:33 - Anthony Campolo
Let me just take a few of those loose ends that I had still that I want to update.
00:41:42 - Anthony Campolo
So we can close that.
00:41:46 - Anthony Campolo
Still no comments.
00:41:49 - Anthony Campolo
Dash examples.
00:41:52 - Anthony Campolo
So let's go fix this image.
00:41:56 - Anthony Campolo
Whoops.
00:41:59 - Anthony Campolo
Don't do that.
00:42:02 - Anthony Campolo
I think we were on.
00:42:06 - Anthony Campolo
So yes, this will be screenshot four.
00:42:09 - Anthony Campolo
That's why I had the question marks.
00:42:10 - Anthony Campolo
I wasn't sure.
00:42:15 - Anthony Campolo
And this will need a update screenshot.
00:42:35 - Anthony Campolo
And then I'm going to just drop some of these in into the tutorial.
00:42:39 - Anthony Campolo
So I go through it next time, probably off screen.
00:42:44 - Anthony Campolo
I'll be fixing some of these things.
00:42:53 - Anthony Campolo
I think at the very least, since I have the whole monorepo thing set up in this tutorial, we should do at least two front ends so it makes sense.
00:43:06 - Anthony Campolo
Otherwise, it's like, why is the React thing called React in a React folder?
00:43:12 - Anthony Campolo
It doesn't really make as much sense.
00:43:14 - Anthony Campolo
Include, actually, this.
00:43:18 - Anthony Campolo
I can just copy paste most of what I did up here.
00:43:40 - Anthony Campolo
Okay.
00:43:42 - Anthony Campolo
Actually, I can't even do that.
00:43:44 - Anthony Campolo
I just need to know what was in here.
00:43:47 - Anthony Campolo
Great.
00:43:49 - Anthony Campolo
Great, great, great.
00:43:55 - Anthony Campolo
No view DOM, of course.
00:44:00 - Anthony Campolo
Great.
00:44:01 - Anthony Campolo
It looks like, um,
00:44:04 - Anthony Campolo
These can be dev dependencies.
00:44:07 - Anthony Campolo
So let's do this.
00:44:22 - Anthony Campolo
Okay.
00:44:29 - Anthony Campolo
And then I also want to make sure I have this saved as well.
00:44:35 - Anthony Campolo
So let's get back here.
00:44:44 - Anthony Campolo
Let's see if I've done everything correctly.
00:44:46 - Anthony Campolo
Yeah, it looks like no, no, no modules, no .emvs.
00:44:49 - Anthony Campolo
That's all good.
00:44:54 - Anthony Campolo
Net.
00:45:07 - Anthony Campolo
Okay, cool, great.
00:45:10 - Anthony Campolo
All right, I think I documented all my questions, gave myself a bunch of to-dos, and my tutorial to update.
00:45:18 - Anthony Campolo
And yeah, Ryan, if you're watching this, I would like to have you on next time I do a stream.
00:45:26 - Anthony Campolo
To kind of work out some of these higher level questions I have, and then hopefully you can help me debug or at least get in the right direction of debugging the couple things that are still broken.
00:45:37 - Anthony Campolo
Let me just make sure I commit this here.
00:45:43 - Anthony Campolo
Instructions and to use.
00:45:47 - Anthony Campolo
Okay, awesome.
00:45:49 - Anthony Campolo
Let's stop screen sharing.
00:45:52 - Anthony Campolo
Okay, cool.
00:45:53 - Anthony Campolo
Not sure how many people out there were watching this, but if you were, thanks for joining.
00:45:58 - Anthony Campolo
Hope this was interesting or useful for you in some respects.
00:46:03 - Anthony Campolo
You know, these are kind of just like,
00:46:05 - Anthony Campolo
co-working live streaming.
00:46:07 - Anthony Campolo
I had gone back and watched some of my streams from the summer and I was very glad I had streamed.
00:46:12 - Anthony Campolo
Because I had forgotten so many things.
00:46:15 - Anthony Campolo
But yeah, so don't have a specific date in mind yet.
00:46:21 - Anthony Campolo
But Monday, we're going to be back with Incubator Weekly.
00:46:26 - Anthony Campolo
Hopefully getting on.
00:46:27 - Anthony Campolo
I think we had a guest to talk about some decentralized storage type stuff.
00:46:31 - Anthony Campolo
I may be wrong about that, but that was the last thing I think we had talked about.
00:46:35 - Anthony Campolo
And then sometime midweek, I'll try and work out when Ryan and I can hop on again to work through more of this tutorial.
00:46:44 - Anthony Campolo
So I would guess probably Tuesday, Wednesday, Thursday, one of those dates.
00:46:49 - Anthony Campolo
But yeah, I'm going to call it here.
00:46:52 - Anthony Campolo
Thank you everyone who watched and we'll catch you next time.