web4: scroll comments into view

[petersalomonsen]

Enables "scroll into view" for proposal comments functionality for https://github.com/NEAR-DevHub/neardevhub-bos/pull/868

Example link to comment being scrolled into view: https://devhublink.testnet.page/proposal/127?accountId=theori.near&blockHeight=121684702

[petersalomonsen]

@race-of-sloths please, include my PR in the race

[race-of-sloths]

@petersalomonsen Thank you for your contribution! Your pull request is now a part of the Race of Sloths! New Sloth joined the Race! Welcome!

[

<source media="(prefers-color-scheme: light)" srcset="https://badge.race-of-sloths.com/petersalomonsen?type=bot&theme=light">
<img alt="Shows profile picture for the author of the PR" src="https://badge.race-of-sloths.com/petersalomonsen?type=bot&theme=white">

](https://race-of-sloths.com/profile/petersalomonsen)

Current status: executed

| Reviewer | Score | |--------|--------| | @frol | 3 | **The average score is 3** @petersalomonsen check out your results on the [Race of Sloths Leaderboard!](https://race-of-sloths.com/leaderboard) and in the [profile](https://race-of-sloths.com/profile/petersalomonsen)

What is the Race of Sloths

Race of Sloths is a friendly competition where you can participate in challenges and compete with other open-source contributors within your normal workflow For contributors: - Tag @race-of-sloths inside your pull requests - Wait for the maintainer to review and score your pull request - Check out your position in the [Leaderboard](https://race-of-sloths.com/leaderboard) - Keep weekly and monthly streaks to reach higher positions - Boast your contributions with a dynamic picture of your [Profile](https://race-of-sloths.com/profile/petersalomonsen) For maintainers: - Score pull requests that participate in the Race of Sloths - Engage contributors with fair scoring and fast responses so they keep their streaks - Promote the Race to the point where the Race starts promoting you - Grow the community of your contributors Feel free to check [our website](https://race-of-sloths.com) for additional details!

Bot commands

- For contributors - **Include a PR:** `@race-of-sloths include` to enter the Race with your PR - For maintainers: - **Assign points:** `@race-of-sloths score [1/2/3/5/8/13]` to award points based on your assessment. - **Reject this PR:** `@race-of-sloths exclude` to send this PR back to the drawing board. - **Exclude repo:** `@race-of-sloths pause` to stop bot activity in this repo until `@race-of-sloths unpause` command is called

[petersalomonsen]

@petersalomonsen Can you provide an example link to test?

yeah, you can also find it in the frontend PR as referred to in the description, but here is a link the deployment on testnet ( with a frontend that points to mainnet ): https://devhublink.testnet.page/proposal/127?accountId=theori.near&blockHeight=121684702

[Tguntenaar]

The preview does not work for me: ![Uploading Screenshot 2024-07-18 at 17.35.46.png…]()

[frol]

@Tguntenaar I find it not the best solution:

1. It makes the contract build "not reproducible" without the knowledge to the API key (cargo-near reproducible builds do not even support env variables passing, so I would avoid that)
2. There is too much of indirection for this API key to travel from github build process of a contract down to web4 gateway JS code
3. We already have the key in our widgets
4. @petersalomonsen Can we pass extra variable to the BOS components via context (next to context.networkId) or maybe at least via props (e.g. implicitly passing ?gateway=devhub.near.page when rendering the top-level component)?

[petersalomonsen]

@Tguntenaar the preview link works now ( it was pointing to devgovgigs.petersalomonsen.near preview environment which I have deleted, now it is pointing to devhub.near )

@frol @Tguntenaar Regarding tracking the gateway being used. We don't need to include it in the contract build process.

There are other alternatives, and the easiest is to pass the additional information we want to track into props. Then it will be automatically visible in PostHOG too.

Passing into context seems not to be supported out of the box in the VM, so I think props is better then.

We can also go into more "hacky" alternatives like extracting the key from the widget, but I would prefer just passing the information we want to track into props.

And finally, regarding this PR. The solution on looking for an element id to scroll to, is an attempt to create a generic solution for finding such elements that can be scrolled to. An alternative would be to lock it to only proposals, and only then wait for the element to appear. In that case we need to revisit this every time we want to support scrolling to a comment element for something else than proposals, so I would prefer the current solution @frol .

[Tguntenaar]

Thanks for the quick feedback guys, @petersalomonsen the preview looks good to me!

Just for reference the issue we are talking about #879

[race-of-sloths]

🌟 Score recorded!

@frol, thank you for scoring this pull request in the Race of Sloths!

[race-of-sloths]

✅ PR is finalized!

Your contribution is much appreciated with a final score of 3! You have received 45 (30 base + 15 weekly bonus) Sloth points for this contribution

Another weekly streak completed, well done @petersalomonsen! To keep your weekly streak and get another bonus make pull request next week! Looking forward to see you in race-of-sloths