I’ve successfully added the connect wallet widget, it works.
Now, I’m trying to add the ‘buy now button’ widget to the same page. I’ve minted a test contract, token and created the gallery page (link below).
When adding the buy button widget code to the page, I can only see the spinner. In the console, an error is displayed.
I’ve created the apps via dev dashboard.
Important: I’m not a developer. I do some html/css stuff but I’m struggling with this for obvious reasons is there that I can do this by myself? Any settings that I need to change in my server?
Got it, thank you. I seem to have managed to add the card widget and I’m customising the CSS to hide and format the way I want. One thing though is that it seems like the image on the card is only displayed if the wallet is connected (via its widget). Can you confirm that? For now, I’ve hidden the image and would add it myself on the page.
Also, I’d like to test the whole flow, but I listed the token on the Gallery at 1ETH lol Is that a way that I can cancel or edit this listing? Couldn’t find it.
You can cancel the listing in the Gallery app by hitting the 3 dots then kinda scrolling down within the box. It’s a bit funky, but you should see cancel button there.
gotcha! Thanks anyway for the support here, it’s been super helpful. I’m gonna jump to Figma to first design this page and then work on the code, so if you need anything from my side, just let me know - here or via twitter @rbardin
hey! wanted to share that I made great progress today and already coded the page. I decided to hide that div for now and successfully styled everything else as I designed in Figma. I was almost celebrating but I’m experiencing a weird situation - which is also happening on the test page you’ve seen.
If I try to connect with any other wallet that is not the one that I used to create the authentication app via Dev Dashboard, then 1) the buy button switches when wallet message pops up, which is great, but 2) a signature request is displayed on the wallet and signing it reverses everything - wallet goes back to ‘connect wallet’ and buy button to ‘connect to buy’. Posting gifs below.
Can you help me, pls?
Wallet that I used to create the authentication app via dev dashboard
Another wallet - everything is reversed after signing.
Btw, i’ve tried adding the data-delay-auth=“always” but it didnt work. Also thought that it was missing the data-grant-type - I’ve tried it set to signature or token - but it also didnt fix it.
Sounds great! It’s probably just some tiny thing we missed. Will circle back to this tomorrow.
Alright, managed to fix the connect wallet and executed the transaction now! everything worked!!! I was also able to replace some labels on the buy button - original is a bit weird saying ‘buy now [amount] per token’, so just create a new one. Thank you very much to the whole team for providing this! even I, def not a proper developer, was able to implement it! <3
A final question: the success button - also the one that stays on the page indefinitely after transaction is successful - is ‘view on opensea’. Is there any way to override this to send either to Etherscan (tx) or somewhere else?
LFG!! Great to hear. Would love to collect your feedback if you have any (besides what you’ve given already) on how we can make this a better developer experience!
Would you want like a prop for data-view-on-link or something?
Is the data-view-on-link the bit on the success button that says ‘view on opensea’ currently? Can I use it already? Sorry if this sounds stupid, but idk what prop means in this case lol
I think I can write up a couple of things as feedback, definitely. For example:
the wallet connect issue seemed to be related to the fact that I created an App via Dev Dashboard and follow the instructions (maybe I misread it), but I came across the codepen you have in the docs and both data-client-id and data-app-name were not present in the code. So I tested it out and then it worked - I’m assuming the card widget I’m using just needs to know if there’s a wallet connected. So maybe clarify that bit.
I think this data overrides can be super useful, like I mentioned in regards to the buttons’ labels. I actually looked into the js and tested it out, so I could have my own text
the link on the success message perhaps could be customisable? both label and link. For example, ‘View on etherscan’ + link to the tx or a data value that allows for adding a custom link that, once the transaction is successful, the page is redirected - in my case, I actually designed a ‘success’ page, so I could add a proper thank you message etc and add a few useful links.
Happy to talk more if you want. I actually would love to show you the page in private since the project is not online yet.
data-xxx are the props (like data-data-auth, etc) that you’ve been using.
Right now we don’t have anything to let you customize the success button, always just says “View on Opensea”. Would it be helpful to you if we made the feature for that, so you can choose how people view it?
I’ve shown this to a couple of people and they said ‘it’s really cool, but the OS link…’, so I’m sure this would be super useful - like I said, to the tx itself on etherscan or even an optional data-xxx that you just add a URL/page and the widget automatically understands and redirects after success is displayed.
I’ve actually switched to the Buy Now button widget via Claim Page and everything is working great! I was wondering though if there’s a way to override the title of the success modal at the end when it says ‘Checkout’ at the top? Since it’s the final step and it comes after the confetti, would it be possible to override it with a title like ‘Congratulations!’?
is there that I can do this by myself? Any settings that I need to change in my server?
