April 23, 2023, 9:08pm
I’m trying to use the claim widget, but apparently it’s not working.
The widget keeps loading but no content is shown.
At first I thought it was because the asset is set to be claimed from the 30th April, but then I tested with other people’s instance-ids, and got the same result (didn’t work as well).
I tried to open it on Chrome and Safari.
The page is located at
https://www.moreabstract.xyz/ (scroll down and click on “claim here”)
The code can be found at GitHub - vitorjaguat/auction-page2: Listings page for Manifold assets
Thanks in advance!
One issue I notice on that page is that you are loading both the marketplace.umd.min.js and claimComplete.umd.min.js
You should try loading only what you need (claimComplete.umd.min.js). Let me know when you do this and if it helps resolve your issue.
You should also try claim widget 1.5.2
April 24, 2023, 2:22pm
I’m loading marketplace.umd.min.js because the website will display the complete listing widget when user clicks on the cards that are on the home page. This section is working perfectly.
April 24, 2023, 2:30pm
I’ve tried claim widget 1.5.2, but still doesn’t work here. It will only load the footer, as you can see below:
Have you tried using ‘defer’ in your script tags?
Do this for all the widget js files. Your reactive next app may not be rendering the elements in time.
April 24, 2023, 3:41pm
I’ve tried, still not working. There are these errors on the console, seems that they are related to the claim widget script:
Hi, your current live code does not have the defer prop in the js tags in the head. Can you please add them and see if that helps?
I see you’ve made the change and it’s still not working. Continuing to investigate.
So I took a look at your code, if you click on the repo, it will show you that this is actually a problem with the next.js app (click on it and you will see that next.js is seemingly doing some server rendering stuff that’s changing the elements underneath the claim widget)
I would suggest trying the widget with a fresh next project with the bare minimum elements and working up from there to see if it fixes the issue.
Actually, I can reproduce with a base case. Again, claim widget is a supported feature yet, so the eta on that is unknown.
We’ve identified the issue. Try using claim widget 1.3.9 in the meantime.
April 28, 2023, 7:56pm
I ended up inserting the claim page via iframe. The other widgets are working good though.
Thanks a lot for your care and replies!
Ah cool. The latest version should be good to go:
If you’re using an iframe, it can be pretty funky, in that, changing your wallet won’t actually switch things within the iframe component (because the iframe has it’s own wallet/metamask hook).
April 28, 2023, 9:19pm
Yeah, now it’s working well and looking good!
The ‘connect’ button has no border-radius, so it looks a bit strange on small screens.
I added ‘border-radius: var(–manifold-border–radius);’ to the ‘.m-connection-container’ class on my globals and now it’s perfect.
Stopping by to say THANKS to manifold and wilkins for the assistance.
Claim is smooth and live at https://moreabstract.xyz