lukso-network/tools-dapp-boilerplate

Broken ProfilePreview.tsx component

Closed this issue ยท 4 comments

When I connect UP It's correctly displaying my UP address but not updating my profile image or other metadata in the component; I was wondering if this was due to the recent changes to verifiableURL... I haven't explored this myself yet.
No errors in the console.

Screenshot 2023-12-27 at 5 02 21 PM

Hugoo commented

Hey thanks - yeah this is very likely because of outdated lib. We I'll check this starting next week.

Hugoo commented

@tantodefi I upgraded the libs here:

85ffb5a

It should solve the issue.
I'll make some tests next week.

Wow thanks so much for the quick fix!
I tried it and it's still not loading the profile data in the ProfilePreview.tsx
I was actually wondering if the ipfsGateway URL in SupportedNetworks.json was still accurate?
"ipfsGateway": "https://api.universalprofile.cloud/ipfs"
Looked in the docs but couldn't find it on https://docs.lukso.tech/networks/mainnet/parameters/
Will keep issue open and keep an eye out for those tests next week! :)

Hey @tantodefi,

I have been investigating this issue for the last two days- checking storage, networks, and browsers. Here are the outcomes:

Investigation

The bug is unrelated to our IPFS RPCs. I've checked the IPFS links separately, and everything works flawlessly there. Both the testnet and mainnet use the same address.

The ProfilePreview stays empty because of the missing provider object. Currently, the Universal Profile Browser Extension officially only supports Chrome. Here, the app has no issues connecting to the correct network and showing data on the ProfilePreview component.

However, there is an issue when using Opera, Firefox, or potentially other unsupported browsers: Here, the extension and network data are not adequately injected into the window.ethereum object used across this repository.

I'm assuming you're using such a browser because I could not reproduce this issue elsewhere for both testnet and mainnet profiles.

Bugfix

I've talked back to the extension team: Instead of relying on the window.ethereum object, its recommended to use the window.lukso object. If dApps want to allow for regular wallets and the Universal Profile Browser Extension, it is recommended to add a fallback to the regular wallet.ethereum whenever wallet.lukso is unavailable.

As this dApp acts as a reference implementation for developers on LUKSO, I've applied those changes.

This bug is now resolved with PR: #12 (referenced above).

โœ… Successfully tested within Chrome, Opera, Firefox
โœ… Verified all functionality on network switches and context updates.
๐Ÿ—ƒ๏ธ Added an internal ticket so that the bug can be resolved in future extension releases.

Screenshots

img1
img2

What next?

๐Ÿ‘‰๐Ÿป This PR will be closed as soon as I merge #12. Feel free to test and give further feedback.
๐Ÿ‘‰๐Ÿป I will add our RPC endpoints to the Network Parameters for better clarity.
๐Ÿ‘‰๐Ÿป I will update the Connection Guide to the new provider setup.

Thanks again for the valuable feedback. This definitely helped us ๐Ÿ™๐Ÿป