Claim widget (not working?)

Product Questions & Discussion
1

Hello!
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
Snapshot:

Screen Shot 2023-04-23 at 18.05.47
Screen Shot 2023-04-23 at 18.05.473024×1964 233 KB

Thanks in advance!

1 Like
2

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.

3

You should also try claim widget 1.5.2

4

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.

5

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:

Screen Shot 2023-04-24 at 11.29.26
Screen Shot 2023-04-24 at 11.29.261920×1128 83.9 KB

6

Have you tried using ‘defer’ in your script tags?

example

Do this for all the widget js files. Your reactive next app may not be rendering the elements in time.

7

I’ve tried, still not working. There are these errors on the console, seems that they are related to the claim widget script:

Screen Shot 2023-04-24 at 12.40.43
Screen Shot 2023-04-24 at 12.40.431080×1410 237 KB

Screen Shot 2023-04-24 at 12.40.56
Screen Shot 2023-04-24 at 12.40.561090×850 145 KB

8

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?

9

I see you’ve made the change and it’s still not working. Continuing to investigate.

10

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.

11

Actually, I can reproduce with a base case. Again, claim widget is a supported feature yet, so the eta on that is unknown.

12

We’ve identified the issue. Try using claim widget 1.3.9 in the meantime.

13

I ended up inserting the claim page via iframe. The other widgets are working good though.
Thanks a lot for your care and replies! :smiley:

14

Ah cool. The latest version should be good to go:
1.5.3

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).

1 Like
15

Yeah, now it’s working well and looking good!
Thanks!
The ‘connect’ button has no border-radius, so it looks a bit strange on small screens.

Screen Shot 2023-04-28 at 18.14.29
Screen Shot 2023-04-28 at 18.14.291554×1302 84.7 KB

I added ‘border-radius: var(–manifold-border–radius);’ to the ‘.m-connection-container’ class on my globals and now it’s perfect.

Thanks again.

16

Stopping by to say THANKS to manifold and wilkins for the assistance.
Claim is smooth and live at https://moreabstract.xyz

1 Like