Facing problems with Public registry app tutorial

[serv]

I am currently going through https://docs.blockstack.org/build-apps/tutorials/public-registry and I am facing several problems.

Problem 1: Lacking instruction to install dependencies for Registering a public URL

I needed to install

• @stacks/connect-react
• @stacks/transactions
• lodash-es

Problem 2: Unhandled Rejection (Error): This must be used within the ConnectProvider component.

Once I install the dependencies above, I am at least able to start the app.
When you are signed out, you don't see this problem. Once you sign in, you see this error.

Unhandled Rejection (Error): This must be used within the ConnectProvider component.

I don't have enough knowledge to solve this problem. Can someone knowledgeable fix the doc to fix the above 2 problems?
Thanks.

[agraebe]

@friedger or @hstove - could you chime whenever you have a chance? 🙏🏼

[agraebe]

@markmhx would you be able to review as part of your planning?

[markmhendrickson]

@agraebe I've put this into the UserX icebox in case we can prioritize contributions here soon. However, given that the platform team will own Stacks.js (including the connect package) going forward, perhaps it'd be best to incorporate into that team's planning instead?

I realize ownership here has been blurry in the past, so perhaps we should sync generally about Stacks.js and related documentation contributions given our new team structuring

@friedger Have you seen this error in the past when writing this tutorial by chance?

[agraebe]

I thought this was related to connect, that's why I asked. If it comes to updates, I'd rely on @friedger because he wrote all of this IIRC :)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed. Please reopen if needed.

[dcsan]

I'm going through the tutorial and immediately hit this problem.
I've been trying all different directions to get a basic functional stacks web app, with each repo I try there's some blocker.

@serv did you ever solve this error - from JANUARY?

I notice theres another breadcrumb a bit later in the tutorial

// src/components/Sharer.jsx
<PublicUrlRegistrar userSession={userSession} />

I'm guessing this might be the branch and code for the tutorial?
https://github.com/friedger/blockstack-todos/tree/tut/public-registry

[dcsan]

So that branch, i'm not sure if it's the whole thing, it just looks like the todo app, but at least it runs

I don't see anything like a provider or anything that looks like it might be the ConnectProvider Component so i guess the error message is misleading.

The parent component has this:

import { useConnect } from '@blockstack/connect';
import { PublicUrlRegistrar } from './PublicUrlRegistrar';

export const Sharer = ({ togglePublic, isPublic }) => {
  const { authOptions } = useConnect();
  const { userSession } = authOptions;

...
                  <PublicUrlRegistrar userSession={userSession} />

which has the problem fn in it:

export const PublicUrlRegistrar = ({ userSession }) => {
  const { doContractCall } = useConnect();

this is normally where it blows up. So maybe if we put two nested useConnect() calls it might be worth trying?
That doesn't seem to make any sense, if it breaks further down it should also break in the app root.

---

ok so after

  yarn add @blockstack/connect
  yarn add @blockstack/stacks-transactions

I'm now stuck on this:

Failed to compile
./node_modules/@blockstack/connect/dist/connect.cjs.development.js
Module not found: Can't resolve 'blockstack' in '/Users/dc/dev/esclabs/stan/client/node_modules/@blockstack/connect/dist'
This error occurred during the build time and cannot be dismissed.

I'm assuming that old @blockstack/connect module has been replaced by this?
https://github.com/hirosystems/connect

In any case I can't find a repo for the old one.

I think the error above maybe cos i'm running a typescript app and am trying to use fully ESM ie es2020?

Not worth trying to patch the broken module.

So if i replace that line in the old tutorial

- import { useConnect } from '@blockstack/connect';
+ import { useConnect } from "@stacks/connect-react";

I'm back to square one

[dcsan]

This tut hasn't been touched for about two years, so I'm guessing all the libraries are out of date.

So given these tutorials are out of date and may take some time to get working again, can any dear readers suggest a modern stacks tutorial that has been used recently and shows how to call a signed contract method?

The nft-nyc thing looked interesting but that's also not functional at least in the current repo state, and depends on micro-stacks or micro-stacks/react and embedded jotai state, and an alpha codebase too.

[dcsan]

OK checking some of the source I assume this is the issue:

https://github.com/hirosystems/connect/blob/main/packages/connect-react/src/react/hooks/use-connect.ts#L23

  const dispatch = useContext(ConnectDispatchContext);
  if (!dispatch) {
    throw new Error('This must be used within the ConnectProvider component.');
  }
  return dispatch;

so it is a looking for a context to use... that's a bit different from the current tutorial, so maybe that was a change in the hiro connect-react. And makes it more messy to refactor to include.

[dcsan]

OK I think i have the minor change to make it work:
in the parent component wrap it like this

import { Connect } from "@stacks/connect-react";

export default function HomePage() {
  const authOptions = {
    appDetails: {
      name: "SOMETHING",
      icon: window.location.origin + "/assets/logo.png",
    }
  }

  return (
    <Box className="home-page-container">
      <Connect authOptions={authOptions} >
        <AuthButton />
      </Connect>
    </Box>
  );
}

and then in the ChildComponent you can continue as usual...

export const AuthButton = () => {
    const { authOptions } = useConnect();

    function doLogin() {
        showConnect({
            appDetails: {
                name: 'YOURAPP',
                icon: window.location.origin + '/assets/astro/zodiac-200.png',
            },
            redirectTo: '/',
            onFinish: (result: any) => {
                // window.location.reload();
            },
            onCancel: () => {
                console.log('cancelled')
            },
            userSession: userSession,
        });
    }

    return (
            <Button onClick={doLogin} size='lg' p={10}> Sign In </Button>
    )

}

[markmhendrickson]

@dcsan Thanks for investigating this issue. Might you want to help resolve this on the connect-react repository level by submitting a PR that patches it for others?

cc @friedger

[dcsan]

it's mainly a problem with the demo app, not the plugin.
the plugins have all moved ahead and aren't backward compatible.

for this particular app i think it's a branch inside the TODO app, so it will end up being a hairball fixing one thing will need to fix the other and not sure where it will end.

in theory I could make a new repo just for the registry app, use the latest version of the hiro plugins, and check it works?

but i'm more tempted to look into micro-stacks and other libs right now and create a better reference app with NFT mint features etc.

[markmhendrickson]

@agraebe mind providing some guidance here on the next steps from your perspective? This is ultimately a question of how this example app should support Hiro docs and the developer journey going forward.

[agraebe]

Note: Now that the Hiro and Stacks docs are split, this particular issue should be on the Hiro docs repo. The tutorial is now available here https://docs.hiro.so/example-apps/public-registry. A new issue was created: hirosystems/docs#50

in theory I could make a new repo just for the registry app, use the latest version of the hiro plugins, and check it works?

This would be my suggestion, too. I think the sample code (for both the todo and the registry app) wasn't touched for a long time and we'd be better off with a clean slate. @dcsan if you would be open to sharing a working sample, I would love to use your code in the tutorial!

[dcsan]

@agraebe i mostly just used the references to build my own app, so don't have a "working version" of this app.
that said the above is the main change that's needed, just make sure to provide a connect wrapper

      <Connect authOptions={authOptions} >
        <AuthButton />
      </Connect>

happy to help / review after you split out the repo

also I noticed that versions I'm using of connect are somehow very out of date.
So there maybe other problems that appear.

[agraebe]

great, thanks for the note! once we get to revisit the sample code, I'll make sure to update that part.

[javalight]

I've run into the exact same problem when working with the tutorials. Any time the tutorials are going to be updated?

After solving the issue using using this method, a new issue came up.

The todo-registry contract no longer exists on the testnet!

export const CONTRACT_ADDRESS = "ST3YPJ6BBCZCMH71TV8BK50YC6QJTWEGCNDFWEQ15";
export const CONTRACT_NAME = "todo-registry";

Also the billboard app tutorial has an issue, I suspect its that the app is not compatible with the newer version of clarinet.

Running clarinet integrate or clarinet check

error: Failed to lex input remainder: '
;; billboard contract
...

Error in the billboard.clar file.

[friedger]

The tutorials are now maintained at https://github.com/hirosystems/docs/tree/main/docs @javalight