End to End Dash Tutorial: Next.js - 6d
Anthony Campolo builds more of a Dash Platform tutorial, working through contracts and documents on testnet before scaffolding a Next.js frontend.
Episode Description
Anthony Campolo continues building a Dash platform tutorial, working through contracts and documents on testnet before scaffolding a Next.js front end with Tailwind styling.
Episode Summary
Anthony Campolo picks up an in-progress Dash platform tutorial, focusing on the contracts and documents portion of the docs after previously completing the identities and names section. He walks through registering a data contract that defines a simple note schema, retrieving it, updating it to add an author property, and then submitting, fetching, updating, and deleting documents on testnet. Along the way he troubleshoots wallet sync errors and insufficient balance issues, eventually figuring out the top-up amount needs to be in the hundreds of millions of credits to cover transaction costs. He also demonstrates the Platform Explorer block explorer for verifying identities, contracts, and documents on chain, and explains his decision to convert all the example code from promise-chain syntax to async/await for readability. The second half of the stream pivots to scaffolding a Next.js project with Tailwind, cleaning up the boilerplate, styling a centered layout, and porting React code that previously talked to an Express API. He hits a server component error requiring "use client", fixes a nested HTML tag warning, and ends by outlining the next stream's plan to migrate the Express endpoints into Next.js API routes and deploy via Vercel or possibly Fleek for IPFS.
Speakers
- Anthony Campolo
Chapters
00:00:00 - Picking Up the Dash Platform Tutorial
Anthony opens the stream by reintroducing the Dash front-end tutorial project he started months ago and recently revived. He explains that testnet issues and minor code changes had stalled progress, but the underlying blockchain methods have remained stable, which he notes is by design since blockchains resist change to prevent subversion. He pulls up the Dash platform docs to orient viewers, pointing out the two main sections covering identities and names versus contracts and documents.
He frames the contracts and documents section as essentially a hello-world CRUD app on chain, where a contract acts as a schema and documents are records written against it. Even deletion leaves a trace on the blockchain, which he notes can be useful for handling exploits while still preserving history.
00:03:21 - Tutorial Structure and Async/Await Conversion
Anthony describes his script-by-script approach to the tutorial, where each section introduces a command, walks through the code, and runs it. He acknowledges that Ryan has asked for a clean end-to-end run-through, but he wants to finish the front-end portion first before recording a polished version. The Node portion is complete, and he has been filling in explanations around the key functions in each script.
He explains his decision to rewrite all the example code from .then promise chains into async/await, arguing that modern JavaScript has largely moved on from promise chains and that async/await produces clearer console output and try/catch/finally blocks. He suggests the official docs could offer both versions through a tabbed interface, giving readers the choice between legacy promises with require imports and modern async/await with ESM.
00:08:21 - Registering and Retrieving the Data Contract
Anthony runs the script to register a data contract whose schema defines a note with a single message string. The terminal returns a contract ID along with the full contract object containing an ID, owner ID, and document schema, which he saves into his .env file for use in later commands. He demonstrates that async/await lets the contract ID print before the rest of the output finishes resolving.
He then introduces the Platform Explorer, a separate block explorer dedicated to identities and data contracts on Dash Platform, distinct from the standard Dash explorer used for wallet addresses and faucet funds. He shows his identity page with credit balances, transactions, documents, and data contracts, and modifies his scripts to print direct explorer links to the terminal so users can click straight through to verify their work on chain.
00:13:09 - Updating the Contract and Adding Screenshots
Anthony runs the retrieve contract script to fetch the same data back from the chain, then moves on to updating the contract by adding an author property alongside the message field. He works through some confusion around the dollar-sign ID syntax used in different parts of the API, where some commands expect a plain ID and others use $id within the schema string.
He pauses to plan screenshots of the schema before and after the update, the data contract create transaction, and the identity create transaction, all from the Platform Explorer. He emphasizes that connecting the CLI commands to visual confirmation on the block explorer helps learners understand what is actually happening on chain rather than staring at JSON output in their terminal.
00:26:57 - Submitting Documents and Debugging Wallet Errors
Anthony moves to submitting a document, the step where a message actually gets written to the data contract. He breaks down the broadcast function that takes the document and the identity together to publish it to the chain, comparing the workflow to deploying smart contracts and submitting MetaMask transactions on Ethereum.
The first run fails with an error saying the identity is not associated with a wallet, then a separate insufficient balance error appears. He walks through topping up the identity with progressively larger numbers, eventually landing somewhere around 100 million credits before the transaction goes through. He flags the awkward UX of needing scientific-notation-sized integers for credit amounts as something that should ideally be improved upstream.
00:35:33 - Confirming the Document on Chain
After a successful submission, Anthony checks his identity on the Platform Explorer and finds the new document listed alongside earlier ones. He notes the satisfaction of seeing a hello-world message persist on a blockchain and reflects on how challenging that same milestone felt to him when he first learned to code five years ago, before tools like ChatGPT existed to help beginners.
He then runs the get documents script, which returns the last five note documents from the contract, demonstrating pagination defaults and noting that querying without limits could become a problem at scale. He realizes he ran update and get in the wrong order in his tutorial draft and makes a mental note to fix the sequencing.
00:40:31 - Updating, Deleting, and Wrapping the Node Portion
Anthony works through updating an existing document, hitting a few small issues like missing quotes around the document ID and forgetting to paste in a value before getting the script to log the updated message correctly. He also notices that the Platform Explorer transaction list seems to start with the oldest entries and runs out before showing his most recent activity, suggesting it needs pagination or a reverse sort.
He runs the delete document script and confirms the deletion message, completing the CRUD walkthrough on chain. He also briefly revisits the Express API example that exposes these scripts as endpoints, demonstrating it still works by hitting a route that returns identity information for a name created earlier in the stream.
00:48:33 - Scaffolding the Next.js Project
Anthony shifts to the front-end portion, debating whether to keep the Express step in the tutorial or jump straight from the Node scripts to a Next.js app with API routes. He starts scaffolding a new Next.js project non-interactively, hits some flag issues where the CLI insists on prompting for certain options, and eventually accepts the interactive prompts to get the project created with the app router, Tailwind, and npm.
After deleting the boilerplate content from the default page, he begins styling a simple centered layout. He shares that he picked up Tailwind only recently after years of avoiding CSS, and he extracts repeated utility classes into a custom class to keep the JSX readable while still leveraging Tailwind's utility-first approach.
00:57:42 - Tailwind Styling and Layout Cleanup
Anthony works through the default Next.js layout's full-screen height behavior, which he has never liked, and overrides it so content sits naturally on the page. He pulls up Dash's brand guidelines to check the official fonts, finding Open Sans for body text and a different face for headers, but decides custom font integration is a project for another stream and falls back to the generic sans stack for now.
He gets the page looking clean with centered content and a working Tailwind setup, then prepares to bring in the React component code from the earlier Express-based example. He is satisfied with the visual result and moves on to porting the actual Dash interaction logic.
01:02:33 - Porting the React Code into Next.js
Anthony copies his existing React component into the Next.js page file, separating out the imports, the useEffect hook, and the JSX return block. He hits his first server component error, which prompts him to add the "use client" directive, and remarks that this is the much-complained-about issue from Twitter that in practice took only seconds to resolve.
He also runs into a hydration warning about a pre tag appearing as a descendant of a p tag, which he fixes by adjusting the markup. He gets the identity fetch working through the Express API the next app is calling and adds a fetch button so users can trigger the request manually rather than only on initial render.
01:09:39 - Wrapping Up and Next Steps
Anthony notices the fetch button has no styling because Next.js's create template no longer ships with default button styles, only links. He briefly tries regenerating the project without Tailwind to compare, but the CLI again forces interactive prompts and he abandons the comparison since there are no buttons in the template either way.
He closes the stream by outlining plans for the next session: porting the Express endpoints into Next.js API routes backed by serverless functions, then deploying. Vercel will be the default deploy target, but he is considering an IPFS path using either Fleek for simplicity or a manual IPFS setup for completeness. Once finished, he will coordinate with Ryan on whether to publish the tutorial on his personal blog, share it through the Dash community, or place it somewhere more official, with the next stream tentatively planned for Friday. The stream ends at 01:13:33.
Transcript
00:00:02 - Anthony Campolo
All right, we are live.
00:00:04 - Anthony Campolo
Welcome back.
00:00:05 - Anthony Campolo
My name is Anthony Campolo.
00:00:08 - Anthony Campolo
And if you've been following these streams, I am building out some front end examples slash a tutorial for the Dash platform.
00:00:19 - Anthony Campolo
I had started this project last summer, actually, many, many months ago.
00:00:25 - Anthony Campolo
And these last couple of weeks kind of picked it back up and have been working through it again, kind of reacquainting myself with the code I wrote and the, you know, general flow of the tutorial.
00:00:39 - Anthony Campolo
And there's issues we're having with testnet for a while that kind of had to work out.
00:00:43 - Anthony Campolo
But and then just some kind of minor changes in how things are working with the code.
00:00:50 - Anthony Campolo
But for the most part, almost everything worked exactly the same in terms of the code that was written back then.
00:00:55 - Anthony Campolo
You know, with blockchains, especially, you have this kind of foundational chain with
00:01:02 - Anthony Campolo
certain methods and ways of interacting with it that likely won't change because it's such a freaking pain to try and get anything to change on a blockchain.
00:01:13 - Anthony Campolo
which is kind of by design because the harder it is to change, the harder it is for someone to come in and subvert the system and change it for their own means.
00:01:21 - Anthony Campolo
But the place we're at now in the tutorial is I had originally gone through, actually let me pull up the dash org.
00:01:33 - Anthony Campolo
Platform docs so I can kind of show what I'm talking about here because they separated out into
00:01:45 - Anthony Campolo
two kind of big chunks, which I think makes a lot of sense.
00:01:50 - Anthony Campolo
Okay.
00:01:53 - Anthony Campolo
So the way they've got it with the docs is they have identities and names as a section
00:02:00 - Anthony Campolo
with all the stuff in terms of registering and retrieving an identity, working with that identity's balance, and then creating and retrieving a name.
00:02:11 - Anthony Campolo
And then separate from that then is the contracts and documents.
00:02:15 - Anthony Campolo
And this is how you can create ways of saving data on the blockchain.
00:02:23 - Anthony Campolo
And what this does is it kind of gives you like a hello world crud app without delete.
00:02:30 - Anthony Campolo
So you learn how to.
00:02:32 - Anthony Campolo
Register the contract, which then allows you to submit documents to it.
00:02:36 - Anthony Campolo
You can kind of have the contract as like the schema for the documents.
00:02:40 - Anthony Campolo
So the simplest thing will just be a message with a string.
00:02:43 - Anthony Campolo
That's kind of what we're going to create, what is created here.
00:02:47 - Anthony Campolo
And then you can read it back.
00:02:50 - Anthony Campolo
So C-R-U-D.
00:02:52 - Anthony Campolo
But, um,
00:02:54 - Anthony Campolo
I actually, I guess you can delete documents here, but they'll still, I mean, even if you delete it, there'll still be a record of it on the blockchain.
00:03:02 - Anthony Campolo
I just, but this probably, what this does, this just makes it inaccessible.
00:03:06 - Anthony Campolo
So this is nice actually, because, you know, if you upload some sort of exploit or someone uploads an exploit, it's give you the ability to delete it.
00:03:21 - Anthony Campolo
That may be actually the contract itself you would have to delete to do that.
00:03:25 - Anthony Campolo
But anyway, so this whole section was stuff that I had kind of just started doing when I kind of took a break last time.
00:03:36 - Anthony Campolo
So I had mostly just kind of gone through and created headings for each of these and.
00:03:44 - Anthony Campolo
Because the way I've been doing this tutorial is...
00:03:51 - Anthony Campolo
I basically go through script by script of what we're doing.
00:03:55 - Anthony Campolo
So, you know, you have...
00:03:59 - Anthony Campolo
And Ryan had asked me to do like a clean run through of this whole thing.
00:04:04 - Anthony Campolo
And I will do that.
00:04:06 - Anthony Campolo
I'm not going to do it today, though, because I want to finish the front end part.
00:04:10 - Anthony Campolo
The node part is all totally done right now.
00:04:12 - Anthony Campolo
But if we're going to have a.
00:04:13 - Anthony Campolo
A video example of the tutorial that we can kind of point people to.
00:04:17 - Anthony Campolo
I don't think it makes sense to do it until we can actually do the whole flow.
00:04:21 - Anthony Campolo
So I basically start with creating a script, and I give you the code for the script, and then I have you run the script.
00:04:28 - Anthony Campolo
Many of these I still need to kind of fill in more.
00:04:31 - Anthony Campolo
Explanations and like we all do is all make sure we're just explaining like these three main functions because this is where the important stuff is happening
00:04:40 - Anthony Campolo
but for the most part that's kind of like how i've been going about making this and so for all of this contracting data stuff i'd had basically put you know
00:04:51 - Anthony Campolo
the command, create the script, run the command, and then I had just copy pasted the code like straight from the docs.
00:04:58 - Anthony Campolo
So last or two nights ago, I went through all of those and got them all working and also converted everything is now written in async await.
00:05:08 - Anthony Campolo
So I had originally, you know, updated the imports and exports to be ESM because that's really a deal breaker for
00:05:15 - Anthony Campolo
if you're trying to work with modern tooling that's getting harder and harder to work with require and almost impossible to work with both of them unless you like want to have that be your full-time job for you so
00:05:28 - Anthony Campolo
We've been on the right imports this whole time, but all the code in the examples, you know, there's nothing necessarily wrong with this, but they're written with, you know, this .then kind of
00:05:39 - Anthony Campolo
promise syntax, which is how many JavaScript developers were doing things for probably a decade or so.
00:05:46 - Anthony Campolo
And that has...
00:05:48 - Anthony Campolo
Been the kind of, if you watch your tutorials and see how to do stuff in JavaScript, the modern way and the way that now people is async await and people held off from this and use promises for a while because of browser compatibility and things like that.
00:06:03 - Anthony Campolo
But at this point, there's really no reason not to use async await, I think, unless
00:06:09 - Anthony Campolo
I don't know.
00:06:09 - Anthony Campolo
I'm not really sure what the argument to be made for why you'd want to use promises aside from just like keeping compatibility with previous stuff or for people who still kind of find.
00:06:21 - Anthony Campolo
And that's most useful.
00:06:22 - Anthony Campolo
But, you know, I think it creates a situation where it's harder to get, like, outputs and console logs and stuff throughout the command.
00:06:35 - Anthony Campolo
So I think that async await, I think, is really the way to go.
00:06:38 - Anthony Campolo
And for me, you know, I find it, and this is just, I find it simpler and more readable because I've done it more in this kind of like what I'm used to.
00:06:46 - Anthony Campolo
But at the same time, the way, let me show this as an example.
00:06:58 - Anthony Campolo
So like here, if you look at this example, there's,
00:07:04 - Anthony Campolo
Hold on, this is slightly different.
00:07:06 - Anthony Campolo
Let me look at it.
00:07:09 - Anthony Campolo
Right, sure, I did.
00:07:15 - Anthony Campolo
Okay, there's some, I forget exactly which, some examples where there's like two places where there'd be something console logged, like you console log something here and then something like in here.
00:07:25 - Anthony Campolo
So I think that can be a little bit confusing, whereas with async await, you kind of just await wherever you need to, and then you have try catch finally for the block.
00:07:37 - Anthony Campolo
That's how I wrote this.
00:07:38 - Anthony Campolo
I'm not really sure how we want to manage this in terms of the actual docs, because I think for sure we're going to want to update this, whether to update the promises to go wait.
00:07:52 - Anthony Campolo
I think some people consider it just like a manner of taste.
00:07:55 - Anthony Campolo
I think it makes sense to just go with the most modern syntax.
00:07:58 - Anthony Campolo
But something that might be a good idea is adding one of those tab things so we can keep all of this old code the way it is and then tab over to ESM, which would both give you the import and also written in async await.
00:08:12 - Anthony Campolo
So that might be the best of both worlds in terms of we can keep both there.
00:08:15 - Anthony Campolo
People can kind of choose which route they want to take.
00:08:21 - Anthony Campolo
But anyway, let's go through these examples.
00:08:32 - Anthony Campolo
Go into here and close this up.
00:08:38 - Anthony Campolo
Great.
00:08:41 - Anthony Campolo
So we would be at right now is registering the contract.
00:08:48 - Anthony Campolo
There we go.
00:08:48 - Anthony Campolo
Yeah, cool.
00:08:53 - Anthony Campolo
So this is going to register the contract, which has the kind of schema, as I was saying.
00:09:02 - Anthony Campolo
So schema is type string, and you're going to have a message.
00:09:07 - Anthony Campolo
So basically, we're going to get back an object that's going to be just message, and then some text, hello from AJC Web Dev.
00:09:18 - Anthony Campolo
And then it's going to console log your contract ID and then the whole contract itself.
00:09:27 - Anthony Campolo
So let's see if that's a working.
00:09:47 - Anthony Campolo
So here's a contract ID.
00:09:49 - Anthony Campolo
So that is able to come out while the next part is.
00:09:53 - Anthony Campolo
So I'm not sure if that's just because async await, but I feel like that's kind of what it enables is stuff like that.
00:10:06 - Anthony Campolo
Okay, so if we look at this, we have an ID, an owner ID, and then the document schema.
00:10:16 - Anthony Campolo
Document schema has, no, is that something that I did?
00:10:23 - Anthony Campolo
Yeah, I'm not sure.
00:10:24 - Anthony Campolo
I think that's probably, you can call that whatever you want, I'm guessing.
00:10:28 - Anthony Campolo
But this is how the...
00:10:31 - Anthony Campolo
The tutorial did it, I believe.
00:10:35 - Anthony Campolo
So let's just keep that the way it is.
00:10:39 - Anthony Campolo
Let me copy paste this.
00:10:41 - Anthony Campolo
Contract ID you want to put in your .env.
00:10:47 - Anthony Campolo
Because we'll need that for a future command.
00:11:18 - Anthony Campolo
Now we got the contract ID.
00:11:20 - Anthony Campolo
Oh, yeah, and I also learned since the last time.
00:11:26 - Anthony Campolo
I was streaming.
00:11:29 - Anthony Campolo
There's a whole different block explorer for the platform.
00:11:32 - Anthony Campolo
So we've been on the original dash block explorer earlier to when you created your wallet and you have an address, you gotta give us some test funds.
00:11:41 - Anthony Campolo
You can do all that through the regular explorer, but here is where things like the identities and the data contracts come in.
00:11:47 - Anthony Campolo
So this is our identity.
00:11:51 - Anthony Campolo
So when we created an identity, we got an identity ID.
00:11:54 - Anthony Campolo
And I'm modifying the commands I had a bit.
00:11:57 - Anthony Campolo
So now it gives you the environment variable, like how it gives it directly.
00:12:04 - Anthony Campolo
It basically says this equals this.
00:12:05 - Anthony Campolo
I'm also going to have an output saying,
00:12:07 - Anthony Campolo
Click this link to go see your thing.
00:12:08 - Anthony Campolo
So right in the terminal, you get a link.
00:12:10 - Anthony Campolo
Just takes that and appends it to this.
00:12:16 - Anthony Campolo
And then here we can see transactions.
00:12:18 - Anthony Campolo
You can see how many credits you have.
00:12:21 - Anthony Campolo
These are all the times I've been topping up this.
00:12:24 - Anthony Campolo
Identity.
00:12:25 - Anthony Campolo
And then you have all these documents.
00:12:26 - Anthony Campolo
You see this is the 2 a.m.
00:12:28 - Anthony Campolo
The other night when I was doing this.
00:12:31 - Anthony Campolo
And then all your data contracts.
00:12:34 - Anthony Campolo
Yeah, see, I was hacking away on that.
00:12:38 - Anthony Campolo
All right.
00:12:40 - Anthony Campolo
And then this is the day.
00:12:41 - Anthony Campolo
So I need a screenshot of this, I believe.
00:13:09 - Anthony Campolo
Okay, so now we've got, that's good.
00:13:15 - Anthony Campolo
Now retrieve contract.
00:13:18 - Anthony Campolo
This will be if we want to just get back the same thing we got back when we created it.
00:13:23 - Anthony Campolo
And then that's why you need the contract ID here so that you can get it back.
00:13:35 - Anthony Campolo
And then there it is.
00:13:39 - Anthony Campolo
Just like before.
00:13:49 - Anthony Campolo
I should give the link in both of these.
00:14:13 - Anthony Campolo
I'm trying to find, I have one that already has it in there.
00:14:35 - Anthony Campolo
There we go.
00:14:37 - Anthony Campolo
Copy paste that.
00:14:50 - Anthony Campolo
Let's just start with this one.
00:14:54 - Anthony Campolo
Except instead of identity, you want data contract.
00:15:00 - Anthony Campolo
Let's try that.
00:15:07 - Anthony Campolo
I got to put in the actual vial.
00:15:26 - Anthony Campolo
Okay, yeah, so that's right.
00:15:27 - Anthony Campolo
It's not going to be name.
00:15:29 - Anthony Campolo
It's going to be something else.
00:15:35 - Anthony Campolo
It's going to be ID.
00:15:36 - Anthony Campolo
So I need, or no, I got ID, but it's not name.
00:15:47 - Anthony Campolo
I think it's this.
00:15:55 - Anthony Campolo
Yeah, there we go.
00:15:56 - Anthony Campolo
Almost.
00:16:15 - Anthony Campolo
What am I doing around there?
00:16:26 - Anthony Campolo
Oh, I see what you mean.
00:16:31 - Anthony Campolo
Yeah, duh.
00:16:33 - Anthony Campolo
I gotta have this whole thing inside the...
00:16:35 - Anthony Campolo
It's on the string of the...
00:16:42 - Anthony Campolo
I think.
00:16:48 - Anthony Campolo
I'm doing.
00:16:49 - Anthony Campolo
What am I doing wrong?
00:17:06 - Anthony Campolo
I think I had an issue with something like this before because the way it gives you
00:17:13 - Anthony Campolo
Oh, no, it's not dollar sign ID for this one.
00:17:16 - Anthony Campolo
There's another one where sometimes the dollar sign, like this thing.
00:17:22 - Anthony Campolo
Anyway, let's see if that works.
00:17:28 - Anthony Campolo
There we go.
00:17:38 - Anthony Campolo
Great, great.
00:17:47 - Anthony Campolo
Yeah, that's right, because this one was dollar sign.
00:17:49 - Anthony Campolo
Yeah, it's name.dollar sign ID, which is a little confusing.
00:17:55 - Anthony Campolo
Okay.
00:18:09 - Anthony Campolo
It was just at retrieve contract.
00:18:34 - Anthony Campolo
Hold on.
00:18:35 - Anthony Campolo
I see it's time to update the tutorial with what I got working.
00:18:50 - Anthony Campolo
And then I'm just going to copy paste that for when I created it.
00:19:07 - Anthony Campolo
Create a new one.
00:19:09 - Anthony Campolo
But no, I can't put it.
00:19:11 - Anthony Campolo
It's the only thing about when you are working with docs,
00:19:17 - Anthony Campolo
And you're also coding something.
00:19:20 - Anthony Campolo
Always flipping back and forth, one to the other.
00:20:32 - Anthony Campolo
Adding some line breaks here to make the output look a little nicer.
00:20:38 - Anthony Campolo
Yes, and you just click that right there.
00:20:40 - Anthony Campolo
Cool.
00:20:43 - Anthony Campolo
Okay.
00:20:45 - Anthony Campolo
Now we can register and retrieve our contract.
00:20:49 - Anthony Campolo
Now we can update it as well.
00:21:03 - Anthony Campolo
And what this update is doing.
00:21:07 - Anthony Campolo
Is it's adding a property for author in addition to the message.
00:21:14 - Anthony Campolo
So we can know who wrote it, I suppose.
00:21:21 - Anthony Campolo
This uses the identity ID and your contract ID.
00:21:31 - Anthony Campolo
Let's see.
00:21:33 - Anthony Campolo
That looks like on platform.
00:21:46 - Anthony Campolo
So now we see, yes, I should screenshot the schema before and after.
00:22:15 - Anthony Campolo
Yeah, that's just screenshot this too.
00:22:17 - Anthony Campolo
Yeah.
00:22:19 - Anthony Campolo
Transaction.
00:22:37 - Anthony Campolo
I should do the same thing with the transaction for what was created also.
00:23:06 - Anthony Campolo
There it is.
00:23:06 - Anthony Campolo
Data contract create.
00:23:13 - Anthony Campolo
Yeah, because this is the stuff that I find that if you can connect the dots for people, like show them stuff on the block explorer, along with what they're doing when they're running the commands, this stuff starts to make a lot more sense and come together.
00:23:29 - Anthony Campolo
Versus when you're just kind of like interacting with the CLI, getting data back, and it's just a bunch of JSON.
00:23:34 - Anthony Campolo
You're just like, what's going on here?
00:23:56 - Anthony Campolo
Cool.
00:23:57 - Anthony Campolo
Cool, cool, cool.
00:23:57 - Anthony Campolo
I should do that for identity as well.
00:24:01 - Anthony Campolo
Identity create.
00:24:07 - Anthony Campolo
And then I did any top up.
00:24:29 - Anthony Campolo
Where's the identity section?
00:24:42 - Anthony Campolo
Okay, I have to create identity.
00:24:58 - Anthony Campolo
Got this one.
00:25:02 - Anthony Campolo
So it doesn't actually look in the identity create transaction specifically.
00:25:53 - Anthony Campolo
Okay, that's probably pretty good.
00:25:58 - Anthony Campolo
So let's keep moving here.
00:26:04 - Anthony Campolo
So we just updated the contract.
00:26:08 - Anthony Campolo
Hey, what's up?
00:26:10 - Anthony Campolo
Thanks for joining.
00:26:12 - Anthony Campolo
Just running through the contracts and documents section right now of the tutorial.
00:26:21 - Anthony Campolo
And there's one point where they tell you to put your contract ID in the client itself.
00:26:31 - Anthony Campolo
They gave a reason for why you do that, which I forget.
00:26:36 - Anthony Campolo
So we grab all this.
00:26:54 - Anthony Campolo
All right, so now we're going to submit the document.
00:26:57 - Anthony Campolo
So this is...
00:27:02 - Anthony Campolo
Where we will write the message to the data contract that we just created.
00:27:09 - Anthony Campolo
So this is great.
00:27:10 - Anthony Campolo
This is very similar to when I was first learning how to use Ethereum.
00:27:15 - Anthony Campolo
I created a tutorial that did something basically like this.
00:27:18 - Anthony Campolo
You create a, they also call them contracts, called smart contracts, which would
00:27:23 - Anthony Campolo
include the actual logic for, you know, what is being done with it.
00:27:30 - Anthony Campolo
And then you would do a transaction with like your MetaMask wallet to update the message.
00:27:38 - Anthony Campolo
So this is similar to that.
00:27:43 - Anthony Campolo
How long from the stream?
00:27:49 - Anthony Campolo
And then what it does here, it hopefully just tells you the exact time the message was written.
00:27:59 - Anthony Campolo
That it will be there until the end of time.
00:28:01 - Anthony Campolo
Until our machines turn to dust.
00:28:07 - Anthony Campolo
Okay, so let's kind of break down.
00:28:10 - Anthony Campolo
There's the note document we create, and then there's this broadcast function, which takes the
00:28:22 - Anthony Campolo
create thing here and also your identity.
00:28:27 - Anthony Campolo
So you feed it the identity along with the document you want to write and then you broadcast it.
00:28:35 - Anthony Campolo
So that's probably all good.
00:28:38 - Anthony Campolo
Let's go ahead and, oh, hold on.
00:28:44 - Anthony Campolo
So what I also want to do is I want to get the document ID.
00:29:08 - Anthony Campolo
Let me just start with why I think it might work.
00:29:13 - Anthony Campolo
We'll see whether it does or not.
00:29:16 - Anthony Campolo
Okay.
00:29:33 - Anthony Campolo
So this is hopefully going to give us back this and then also this.
00:29:43 - Anthony Campolo
Okay, something messed up.
00:29:52 - Anthony Campolo
Identity ID is not associated with a wallet.
00:29:58 - Anthony Campolo
What do you mean?
00:29:59 - Anthony Campolo
How can I not be associated with a wallet?
00:30:05 - Anthony Campolo
Or it's not synced.
00:30:07 - Anthony Campolo
Interesting.
00:30:08 - Anthony Campolo
Interesting.
00:30:20 - Anthony Campolo
Let me try retrieving my identities.
00:30:28 - Anthony Campolo
I did create a couple.
00:30:33 - Anthony Campolo
but they should all be associated with a wallet.
00:30:36 - Anthony Campolo
How do you create an ID without being associated with a wallet?
00:30:55 - Anthony Campolo
So let me try this.
00:30:57 - Anthony Campolo
I go back to registering the contract.
00:31:07 - Anthony Campolo
Let me try this one this time.
00:31:10 - Anthony Campolo
Actually, no.
00:31:20 - Anthony Campolo
Let's try that.
00:31:31 - Anthony Campolo
Okay, then I'll use this contract.
00:31:43 - Anthony Campolo
I'm going to hard code this in over here.
00:31:59 - Anthony Campolo
Okay, let me grab that identity ID one more time.
00:32:33 - Anthony Campolo
Okay, that's fine.
00:32:45 - Anthony Campolo
So it said I had insufficient balance, needed to top up.
00:32:49 - Anthony Campolo
Oh, actually, I ran into this before.
00:32:54 - Anthony Campolo
So we fixed something in the docs for the top-up identity.
00:33:00 - Anthony Campolo
But this needs to be like, this used to say a thousand in this tutorial.
00:33:06 - Anthony Campolo
And I changed it to 100,000.
00:33:08 - Anthony Campolo
And I'm storing it into this error because it needs to be like a million, billion, trillion, like some really, really, really large, ridiculous number.
00:33:18 - Anthony Campolo
This is not ideal.
00:33:19 - Anthony Campolo
I don't know where, but these like ridiculously large decimal places and stuff like that.
00:33:25 - Anthony Campolo
So yeah, I don't know.
00:33:28 - Anthony Campolo
That's obviously not something for me to fix.
00:33:34 - Anthony Campolo
Okay, so not enough balance to cover that.
00:33:37 - Anthony Campolo
So let's try a little less.
00:33:41 - Anthony Campolo
It'll work backwards until it eventually works.
00:33:47 - Anthony Campolo
Because the amount I got from the faucet should be plenty.
00:33:49 - Anthony Campolo
I was able to do all this last time.
00:33:53 - Anthony Campolo
That's fine.
00:33:54 - Anthony Campolo
A little more.
00:34:08 - Anthony Campolo
It's like you look at this, like not a balance cover.
00:34:09 - Anthony Campolo
It's like, so what is this?
00:34:11 - Anthony Campolo
What is this?
00:34:12 - Anthony Campolo
So that's 414 million.
00:34:16 - Anthony Campolo
1, 2, 3, 1, 2, 3, 4, 5, 6, 7, 8.
00:34:17 - Anthony Campolo
This is a billion.
00:34:20 - Anthony Campolo
So now it should be.
00:34:23 - Anthony Campolo
100 million, I think is what I asked for.
00:34:29 - Anthony Campolo
Need some scientific notation up in here.
00:34:35 - Anthony Campolo
It looks like it's going to work unless I don't have enough for each identity.
00:34:43 - Anthony Campolo
For simplicity, I kind of changed this around.
00:34:45 - Anthony Campolo
So when you...
00:34:49 - Anthony Campolo
Retrieve your identities.
00:34:50 - Anthony Campolo
They give you all of them when you top up.
00:34:52 - Anthony Campolo
It does it to all of them, but that's not really a super smart idea.
00:34:56 - Anthony Campolo
Okay, so hopefully that did it.
00:35:05 - Anthony Campolo
And if not, I'll use this one to create it next time.
00:35:17 - Anthony Campolo
Looks like we got something.
00:35:20 - Anthony Campolo
Great.
00:35:20 - Anthony Campolo
Okay, that worked.
00:35:21 - Anthony Campolo
And we got the document ID.
00:35:22 - Anthony Campolo
That's great.
00:35:24 - Anthony Campolo
Okay.
00:35:33 - Anthony Campolo
This was 1, 2, 3, 1, 2, 3.
00:35:36 - Anthony Campolo
So 100, 100 million.
00:35:38 - Anthony Campolo
You're only what this should be.
00:35:56 - Anthony Campolo
So now we'll have more stuff on.
00:36:02 - Anthony Campolo
Chain to view, I think.
00:36:03 - Anthony Campolo
So we just submitted the document.
00:36:07 - Anthony Campolo
So that's after all this.
00:36:10 - Anthony Campolo
After that.
00:36:11 - Anthony Campolo
Okay.
00:36:16 - Anthony Campolo
First, the document ID.
00:36:19 - Anthony Campolo
So let's go back to this.
00:36:28 - Anthony Campolo
Actually, let me start from the identity.
00:36:35 - Anthony Campolo
What was the identity I was just using?
00:36:52 - Anthony Campolo
Okay, so this should have documents now.
00:36:56 - Anthony Campolo
There we go.
00:36:57 - Anthony Campolo
Okay.
00:37:00 - Anthony Campolo
There we go.
00:37:01 - Anthony Campolo
Hey, look at that.
00:37:02 - Anthony Campolo
But that's not the one I just created, though.
00:37:04 - Anthony Campolo
Didn't say hello from the stream.
00:37:11 - Anthony Campolo
Oh, no, I didn't.
00:37:13 - Anthony Campolo
Where did I change that?
00:37:24 - Anthony Campolo
Interesting.
00:37:36 - Anthony Campolo
Whatever.
00:37:36 - Anthony Campolo
I'll keep it that way it is.
00:37:40 - Anthony Campolo
Cool, cool.
00:37:41 - Anthony Campolo
So, I'm gonna want a screenshot of that for sure.
00:37:46 - Anthony Campolo
That's where this whole exercise is just for this.
00:37:50 - Anthony Campolo
The entire tutorial exists for this moment when you get this message and you say, yes, I did it, I'm a real developer now.
00:37:59 - Anthony Campolo
Fantastic moment.
00:38:10 - Anthony Campolo
Okay.
00:38:13 - Anthony Campolo
Thanks for the thumbs up.
00:38:16 - Anthony Campolo
Yeah, so I learned to code probably like five years ago or something, and I still vividly remember the times when just getting to this hello world felt like the most challenging thing I've ever had to do in my entire life.
00:38:36 - Anthony Campolo
I didn't have chat GPT to help me.
00:38:38 - Anthony Campolo
Man, kids these days, they have no idea how good they have it.
00:38:56 - Anthony Campolo
Great.
00:38:58 - Anthony Campolo
And then.
00:39:00 - Anthony Campolo
Does it show up as transaction?
00:39:14 - Anthony Campolo
Okay.
00:39:16 - Anthony Campolo
I'll have to look into that later.
00:39:22 - Anthony Campolo
Yeah, I guess this is just where you...
00:39:25 - Anthony Campolo
Okay, anyway.
00:39:26 - Anthony Campolo
So let's keep moving.
00:39:29 - Anthony Campolo
So now we're going to do.
00:39:34 - Anthony Campolo
Get documents.
00:39:53 - Anthony Campolo
So this is going to give you back five.
00:39:57 - Anthony Campolo
So because you can create as many, you know, you submit as many note documents as you want with as many messages as you want.
00:40:05 - Anthony Campolo
But if you are querying the blockchain, you always want just everything.
00:40:12 - Anthony Campolo
Because that could be an issue if there's too much stuff.
00:40:18 - Anthony Campolo
All right, there we go.
00:40:18 - Anthony Campolo
So there's the last five messages.
00:40:21 - Anthony Campolo
Cool.
00:40:25 - Anthony Campolo
Great, great.
00:40:30 - Anthony Campolo
I did this in reverse.
00:40:31 - Anthony Campolo
That's supposed to be after update.
00:40:37 - Anthony Campolo
Okay, so now we can update this.
00:40:55 - Anthony Campolo
Let me just double check.
00:40:59 - Anthony Campolo
Got all the right things in.
00:41:16 - Anthony Campolo
That's good.
00:41:17 - Anthony Campolo
That's correct.
00:41:28 - Anthony Campolo
Where was the other thing I hard?
00:41:30 - Anthony Campolo
Oh, it's in here.
00:41:33 - Anthony Campolo
Contract ID.
00:41:41 - Anthony Campolo
Okay, that should all be good.
00:41:42 - Anthony Campolo
So hopefully that wasn't the issue earlier.
00:41:50 - Anthony Campolo
Okay, so here.
00:41:54 - Anthony Campolo
Where is the message?
00:42:38 - Anthony Campolo
It might be the wrong document ID.
00:42:40 - Anthony Campolo
Yeah.
00:43:07 - Anthony Campolo
I never got to paste it at all, did I?
00:43:10 - Anthony Campolo
There we go.
00:43:11 - Anthony Campolo
I missed this.
00:43:13 - Anthony Campolo
Okay.
00:43:13 - Anthony Campolo
Let's try that again.
00:43:17 - Anthony Campolo
I'm just putting quotes around that.
00:43:28 - Anthony Campolo
Here, there we go.
00:43:30 - Anthony Campolo
Oops, oops.
00:43:40 - Anthony Campolo
Oops.
00:43:44 - Anthony Campolo
Okay, now I think that'll work.
00:44:04 - Anthony Campolo
Great.
00:44:07 - Anthony Campolo
Okay, so you see here it's logging the thing.
00:44:12 - Anthony Campolo
Great.
00:44:17 - Anthony Campolo
Let's get the message a little more prominent.
00:44:49 - Anthony Campolo
Let's see if that works.
00:45:30 - Anthony Campolo
Yep.
00:45:30 - Anthony Campolo
Cool.
00:45:31 - Anthony Campolo
There we go.
00:45:32 - Anthony Campolo
Awesome.
00:45:37 - Anthony Campolo
Oops, that's not full line right there.
00:45:53 - Anthony Campolo
Okay.
00:45:59 - Anthony Campolo
Cool, cool.
00:46:01 - Anthony Campolo
So next is deleting the document.
00:46:11 - Anthony Campolo
Actually, hold on.
00:46:13 - Anthony Campolo
There should be stuff back here.
00:46:27 - Anthony Campolo
Cool.
00:46:29 - Anthony Campolo
So now the question is, where are those transactions coming in?
00:46:37 - Anthony Campolo
Okay, I think what might be happening here is the transactions need to be flipped around because it starts with the oldest one and then it goes, but then it runs out after.
00:46:48 - Anthony Campolo
1, 2, 3, 4, 5, 6, 7, 8, 9, 10.
00:46:51 - Anthony Campolo
And I don't see any pagination.
00:46:53 - Anthony Campolo
So that might just be something that needs to be updated in Platform Explorer.
00:47:01 - Anthony Campolo
I should have 14 transactions.
00:47:04 - Anthony Campolo
Okay.
00:47:05 - Anthony Campolo
All good.
00:47:34 - Anthony Campolo
All right, almost there.
00:47:36 - Anthony Campolo
Almost there.
00:47:38 - Anthony Campolo
And after we do this, I'm going to try and spin up a Next.js project and get the React code I had last time working in that, which should be trivial.
00:47:48 - Anthony Campolo
Should be.
00:47:49 - Anthony Campolo
We'll see.
00:48:17 - Anthony Campolo
Yeah, message deleted.
00:48:31 - Anthony Campolo
Okay, sweet.
00:48:33 - Anthony Campolo
And then the Express thing already got running.
00:48:38 - Anthony Campolo
You know, the point of the Express example is that if you want to just use a regular old React front end, you also need an API.
00:48:46 - Anthony Campolo
So this shows you how to get an API set up with Express.
00:48:50 - Anthony Campolo
Then I was thinking, you know, that we were then going to migrate that to a Next.js project with API routes that use serverless functions to handle this instead.
00:49:01 - Anthony Campolo
And I think it just might make more sense to just skip right past the Express part.
00:49:06 - Anthony Campolo
Just instead of going Express, then React, and then show how to combine them with Next, just go straight to Next.
00:49:12 - Anthony Campolo
But we'll see.
00:49:14 - Anthony Campolo
I got to first create the next project before I can decide that.
00:49:18 - Anthony Campolo
So this is good to run, I think.
00:49:22 - Anthony Campolo
And then here, if we try and curl this, or actually, let's see what happens when we just open it up over here.
00:49:35 - Anthony Campolo
Yeah, wait, hold on.
00:49:38 - Anthony Campolo
I want to, I know what I want.
00:49:40 - Anthony Campolo
You got to actually give it the,
00:49:44 - Anthony Campolo
the name you want to see.
00:49:46 - Anthony Campolo
Let's do that.
00:49:56 - Anthony Campolo
There we go.
00:49:58 - Anthony Campolo
Okay.
00:49:59 - Anthony Campolo
So this is the identity that I created today, stream test 2024, April 10th.
00:50:06 - Anthony Campolo
And then we got all this information here.
00:50:12 - Anthony Campolo
Cool.
00:50:14 - Anthony Campolo
So that's good.
00:50:17 - Anthony Campolo
Let's close all those out.
00:50:21 - Anthony Campolo
And then what we want to do now is get the React part set up.
00:50:29 - Anthony Campolo
Okay, so...
00:50:36 - Anthony Campolo
Yeah.
00:50:37 - Anthony Campolo
Okay.
00:50:39 - Anthony Campolo
Let's do that.
00:51:04 - Anthony Campolo
Yeah, I always like doing, setting up projects non-interactively.
00:51:14 - Anthony Campolo
So we're going to have to decide all of them.
00:51:20 - Anthony Campolo
Actually, I'm not going to do that in the tutorial.
00:51:23 - Anthony Campolo
I am going to save it for myself.
00:51:42 - Anthony Campolo
I'm just going to call it next.
00:51:51 - Anthony Campolo
Who do you choose?
00:51:53 - Anthony Campolo
Great.
00:51:58 - Anthony Campolo
Probably, you know, want to do app router in the future.
00:52:02 - Anthony Campolo
Definitely want to invest RC.
00:52:10 - Anthony Campolo
I like to use NPM.
00:52:12 - Anthony Campolo
Well, I don't like to use NPM.
00:52:13 - Anthony Campolo
I do use NPM because too many other issues with creating tutorials with the others.
00:52:29 - Anthony Campolo
Okay, so that should do basically what I want.
00:52:38 - Anthony Campolo
Let's see what happens.
00:52:48 - Anthony Campolo
That's not what I want.
00:52:56 - Anthony Campolo
Okay, so I do have to say, no, I don't want the S-Lint.
00:53:06 - Anthony Campolo
Okay, I got to do it for all of them.
00:53:10 - Anthony Campolo
Let's go back.
00:53:26 - Anthony Campolo
I think that might be it.
00:53:37 - Anthony Campolo
There we go.
00:53:38 - Anthony Campolo
That's like just that for a bit of readability.
00:53:41 - Anthony Campolo
Okay.
00:53:42 - Anthony Campolo
So, try this now.
00:54:06 - Anthony Campolo
Hey-o.
00:54:10 - Anthony Campolo
Great, it's using a template though.
00:54:12 - Anthony Campolo
App TW, or maybe that's because I said app router, it has to pick some template.
00:54:21 - Anthony Campolo
All right, that seems to have done it.
00:54:41 - Anthony Campolo
I'm going to, you know, let's do it here.
00:54:53 - Anthony Campolo
I think it's going to be npm run dev.
00:55:08 - Anthony Campolo
Okay, so here's going to be our next JS boilerplate.
00:55:12 - Anthony Campolo
So let's start by getting rid of all that.
00:56:05 - Anthony Campolo
Okay.
00:56:07 - Anthony Campolo
I might actually want to put that above this so it's centered.
00:56:11 - Anthony Campolo
Yep.
00:56:20 - Anthony Campolo
Okay, great.
00:56:34 - Anthony Campolo
Okay, cool.
00:56:52 - Anthony Campolo
Something I like to do with tailwind to...
00:56:57 - Anthony Campolo
Keep the styles clean.
00:57:02 - Anthony Campolo
The HTML, I should say, clean.
00:57:05 - Anthony Campolo
What if we did that?
00:57:06 - Anthony Campolo
What's that going to do?
00:57:09 - Anthony Campolo
Now it's centered.
00:57:27 - Anthony Campolo
Call it cage content, I guess.
00:57:32 - Anthony Campolo
There's a better variable name for that, but that's what we're going to get.
00:57:42 - Anthony Campolo
Is this really far down because of this thing?
00:57:48 - Anthony Campolo
Right.
00:57:50 - Anthony Campolo
Where's that Z10?
00:57:58 - Anthony Campolo
That might be something to do with the global CSS.
00:58:04 - Anthony Campolo
That doesn't look like it.
00:58:11 - Anthony Campolo
The layout is probably...
00:58:14 - Anthony Campolo
It's already...
00:58:15 - Anthony Campolo
No?
00:58:15 - Anthony Campolo
Huh.
00:58:22 - Anthony Campolo
So.
00:58:32 - Anthony Campolo
There we go.
00:58:36 - Anthony Campolo
This is what makes it, it wants to use the whole height of the screen.
00:58:41 - Anthony Campolo
That's the create react example is the same thing.
00:58:45 - Anthony Campolo
I've never liked that default.
00:58:49 - Anthony Campolo
Great.
00:58:58 - Anthony Campolo
One more thing.
00:59:13 - Anthony Campolo
Look at that.
00:59:13 - Anthony Campolo
I know Tailwind.
00:59:15 - Anthony Campolo
Yeah.
00:59:17 - Anthony Campolo
Cool.
00:59:18 - Anthony Campolo
Now we're talking.
00:59:20 - Anthony Campolo
Yeah, I've finally been learning CSS and Tailwind.
00:59:23 - Anthony Campolo
I went like three years without really knowing it at all.
00:59:26 - Anthony Campolo
And then every time I wanted to make my website look better, I would have a bad time.
00:59:33 - Anthony Campolo
This is a pretty good setup.
00:59:35 - Anthony Campolo
Yeah, I just do a little bit of tailwind, get a nice default, and once you learn the important utilities, like, you know, these kind of things, then you start really flying.
00:59:47 - Anthony Campolo
I'm not sure if I want this, though.
00:59:53 - Anthony Campolo
I'm going to want, ooh, there's actually, I can grab a dash font.
00:59:57 - Anthony Campolo
What do I do?
01:00:03 - Anthony Campolo
I learned recently about these Dash brand guidelines.
01:00:06 - Anthony Campolo
Very important.
01:00:15 - Anthony Campolo
Okay, so let's just do, can we do open sands?
01:00:31 - Anthony Campolo
Come on.
01:00:34 - Anthony Campolo
I guess I'll just do sans.
01:00:35 - Anthony Campolo
That would be probably the closest right now.
01:00:40 - Anthony Campolo
Instead of font mono.
01:00:49 - Anthony Campolo
And then the header is supposed to be months.
01:00:59 - Anthony Campolo
That might also be a...
01:01:07 - Anthony Campolo
So that'll be a whole thing.
01:01:09 - Anthony Campolo
Custom fonts.
01:01:23 - Anthony Campolo
This doesn't look that hard.
01:01:30 - Anthony Campolo
All right, I'll do this another time.
01:01:33 - Anthony Campolo
I'll make a note.
01:01:43 - Anthony Campolo
There we go.
01:02:17 - Anthony Campolo
Okay, that's pretty good.
01:02:30 - Anthony Campolo
Okay, cool, cool, cool.
01:02:33 - Anthony Campolo
So now that I've got all of that, let me copy paste this.
01:03:16 - Anthony Campolo
Okay.
01:03:18 - Anthony Campolo
Cool, cool, cool.
01:03:19 - Anthony Campolo
So now...
01:03:23 - Anthony Campolo
I'm going to keep the express part running right now and try and do that before migrating it to next functions.
01:03:32 - Anthony Campolo
So I think we still got this running over here.
01:03:34 - Anthony Campolo
Good.
01:03:36 - Anthony Campolo
Change that to 10.
01:03:40 - Anthony Campolo
And copy paste this into page, I guess.
01:03:44 - Anthony Campolo
Let's see what's going to happen here.
01:03:49 - Anthony Campolo
We have imports up there.
01:04:01 - Anthony Campolo
Use effect here.
01:04:03 - Anthony Campolo
And then return this here.
01:04:11 - Anthony Campolo
In theory, that should be it.
01:04:15 - Anthony Campolo
Let's see.
01:04:16 - Anthony Campolo
In practice, whether that's the case.
01:04:20 - Anthony Campolo
Let's make sure.
01:04:23 - Anthony Campolo
No.
01:04:24 - Anthony Campolo
Hey, hey.
01:04:24 - Anthony Campolo
Yeah, I'm actually, I'm probably going to be finishing up soon, Ryan.
01:04:27 - Anthony Campolo
And you'll be able to kind of watch the whole thing.
01:04:30 - Anthony Campolo
It's been kind of, you know, making a lot of progress.
01:04:32 - Anthony Campolo
Just adding screenshots and cleaning stuff up and the, and like the console logs and things like that.
01:04:40 - Anthony Campolo
So just last kind of like tweaking stuff.
01:04:45 - Anthony Campolo
This is still active and happening.
01:04:49 - Anthony Campolo
That's still there.
01:04:55 - Anthony Campolo
I hit my first server component bug.
01:04:58 - Anthony Campolo
Oh, exciting.
01:04:58 - Anthony Campolo
That's so exciting.
01:05:01 - Anthony Campolo
Really, that's what everyone's been complaining about.
01:05:05 - Anthony Campolo
Sometimes we get an error that says, you forgot to use use client.
01:05:08 - Anthony Campolo
Then you put in use client and it works.
01:05:11 - Anthony Campolo
That does not seem like a huge issue to me.
01:05:16 - Anthony Campolo
But boys, Twitter disagree.
01:05:21 - Anthony Campolo
Sweet.
01:05:21 - Anthony Campolo
All right, we're in.
01:05:22 - Anthony Campolo
We are in the next app.
01:05:23 - Anthony Campolo
And that's the type of thing that.
01:05:27 - Anthony Campolo
They use effect tool.
01:05:29 - Anthony Campolo
Could happen on the server, I suppose.
01:05:35 - Anthony Campolo
But last thing, copy paste all of that.
01:05:54 - Anthony Campolo
Cool.
01:06:38 - Anthony Campolo
So there's also, I added a fetch button as well, so you can click a button to trigger the identity instead of just having it fetch by default when the page renders.
01:06:50 - Anthony Campolo
That's a little weird.
01:06:50 - Anthony Campolo
That shouldn't be lighting up.
01:06:54 - Anthony Campolo
Anyway, actually, I bet if I did that.
01:06:59 - Anthony Campolo
Nope.
01:07:44 - Anthony Campolo
Okay, so that's that.
01:07:47 - Anthony Campolo
And then we'll also need the actual button.
01:08:17 - Anthony Campolo
Okay, let's see if that works.
01:08:45 - Anthony Campolo
Converted by local host.
01:08:46 - Anthony Campolo
3000 go.
01:08:47 - Anthony Campolo
Okay.
01:08:48 - Anthony Campolo
Errors.
01:09:02 - Anthony Campolo
Fascinating.
01:09:06 - Anthony Campolo
Pre-calc appears as a descendant of P.
01:09:11 - Anthony Campolo
Why not?
01:09:13 - Anthony Campolo
You say so, next.
01:09:16 - Anthony Campolo
That's fine, that's fine.
01:09:35 - Anthony Campolo
That should be fixed.
01:09:35 - Anthony Campolo
That should be fixed.
01:09:38 - Anthony Campolo
Boom.
01:09:39 - Anthony Campolo
Great.
01:09:39 - Anthony Campolo
Okay.
01:09:40 - Anthony Campolo
So the fetch button does not look so hot because it does not look like a button.
01:09:44 - Anthony Campolo
So more CSS to fix.
01:09:47 - Anthony Campolo
Thanks.
01:09:48 - Anthony Campolo
Next create template.
01:09:50 - Anthony Campolo
Thanks a lot.
01:09:52 - Anthony Campolo
They probably had a button actually style when I first generated the app, I bet.
01:10:22 - Anthony Campolo
What is just the basic one?
01:10:25 - Anthony Campolo
Let's see what their width tailwind one looks like, I guess.
01:10:35 - Anthony Campolo
Actually, hold on.
01:10:40 - Anthony Campolo
I was supposed to not get tailwind.
01:10:43 - Anthony Campolo
The hell?
01:10:44 - Anthony Campolo
Keep me tailwind anyway.
01:10:50 - Anthony Campolo
That may give me ESN also.
01:10:51 - Anthony Campolo
Okay, so you can't actually say false.
01:10:53 - Anthony Campolo
So you can't do the whole thing not interactively.
01:10:57 - Anthony Campolo
What a jet.
01:10:58 - Anthony Campolo
Okay.
01:11:00 - Anthony Campolo
Anyway.
01:11:11 - Anthony Campolo
Okay, I'm going to make me just do the whole thing again, I guess.
01:11:28 - Anthony Campolo
And then after I look at the CSS for the button, I think I'm going to call it.
01:11:35 - Anthony Campolo
There may not even be any CSS for the button.
01:11:42 - Anthony Campolo
Actually, are there buttons at all here?
01:11:44 - Anthony Campolo
No, it just has links.
01:11:47 - Anthony Campolo
There's no buttons.
01:11:48 - Anthony Campolo
That makes sense, I guess.
01:11:50 - Anthony Campolo
Anyway, okay, cool.
01:11:51 - Anthony Campolo
So that is great.
01:12:00 - Anthony Campolo
All right, thanks everyone for joining.
01:12:03 - Anthony Campolo
So next stream, we'll be porting the Express stuff into the next app.
01:12:14 - Anthony Campolo
So that is just running purely on the API routes and getting your serverless functions to handle the endpoints.
01:12:21 - Anthony Campolo
And then deploy that.
01:12:25 - Anthony Campolo
Obviously Vercel is going to be the simplest, but I might include an example for IPFS because we've been talking about that more.
01:12:31 - Anthony Campolo
I could use Fleek, which is like the Vercel for IPFS.
01:12:34 - Anthony Campolo
That would be very, very simple.
01:12:36 - Anthony Campolo
Or I can kind of just show how to do it with actual IPFS, which would be very, very complicated.
01:12:41 - Anthony Campolo
But that will be a decision for next time.
01:12:44 - Anthony Campolo
But yeah, so this is getting pretty close to being
01:12:47 - Anthony Campolo
done.
01:12:48 - Anthony Campolo
Then once the tutorial is done, I guess I'll have to talk to Ryan to see what to do with it.
01:12:53 - Anthony Campolo
You know, I can just publish it on my blog.
01:12:55 - Anthony Campolo
We can kind of link it around the community or try and find a way to do it more officially.
01:12:59 - Anthony Campolo
I'm not sure, but yeah, probably.
01:13:03 - Anthony Campolo
I'm not sure when the next time I'll stream is.
01:13:05 - Anthony Campolo
I think I'm playing on stream Friday.
01:13:07 - Anthony Campolo
So if you want to see more than...
01:13:13 - Anthony Campolo
Oh, actually.
01:13:16 - Anthony Campolo
Ryan sent me a message.
01:13:20 - Anthony Campolo
Okay.
01:13:22 - Anthony Campolo
Okay, great.
01:13:23 - Anthony Campolo
Awesome.
01:13:25 - Anthony Campolo
Yeah, so I'll catch you guys probably on Friday around the same time of day.
01:13:30 - Anthony Campolo
Later, everybody.
01:13:31 - Anthony Campolo
Thanks for watching.