XRPL POAP platform frontend

[JustAnotherDevv]

This repo contains work aimed to satisfy first 3 milestone from the POAP app bounty.

Current features:

• Basic dApp scafoolding with React, Tailwind.
• Support for XUMM and Gem wallets(more on that below),
• Support for creating new event, claiming NFTs for created event, looking up event attendees, verifying user's wallet ownership.
• Basic wireframes showcasing how the dApp would be divided into pages with different features, I am happy to provide more detailed version once there is some feedback given on current general look(in images folder).

Problem that were encountered:

• SignIn XUMM transaction doesn't allow for adding custom memos which is needed for current imlpementation of verification endpoint in the backend. The verification works assuming that the backend is running modified version that does not need custom memos.
• It seems like the Gem wallet does not yet support all transaction types like accepting NFT transfers etc which is why currently the dApp only support signing with it.
• For the further miletones past the third one there is need for some changes to the original backend but I believe firstly we should focus on the first milestones and decide on both structure and styling for the dApp.

Please let me know if you have any feedback, I want o iterate on this submission with community. Note that this is work in progress and I am planning on doing code refactoring in upcoming days.

[JustAnotherDevv]

I have recorded quick video showcasing core functionalities of the dApp

[jonathanlei]

hey! just tried running your app but when I put in my xumm api key in env it gives me access denied, maybe I'm not putting in the right env variable? updating the README instructions could help

[JustAnotherDevv]

hey! just tried running your app but when I put in my xumm api key in env it gives me access denied, maybe I'm not putting in the right env variable? updating the README instructions could help

I have change env variable name to VITE_XUMM_API_KEY to clarify that it's API Key, not the API Secret from the Xumm Developer Console. Also you have to add http://localhost:3000 to the Origin/Redirect URIs. These steps were added to the readme too.

[jonathanlei]

thank you, I can now login with my xumm wallet and API key.
but when I try to create an event - it gave me this error

and the backend running on 4000's error message is this:

any idea why this is happening?

hey! just tried running your app but when I put in my xumm api key in env it gives me access denied, maybe I'm not putting in the right env variable? updating the README instructions could help

I have change env variable name to VITE_XUMM_API_KEY to clarify that it's API Key, not the API Secret from the Xumm Developer Console. Also you have to add http://localhost:3000 to the Origin/Redirect URIs. These steps were added to the readme too.

thanks for the changes! now I can login via XUMM but when I try to create an event - nothing happens on the webpage

[JustAnotherDevv]

thank you, I can now login with my xumm wallet and API key. but when I try to create an event - it gave me this error

and the backend running on 4000's error message is this:

any idea why this is happening?

hey! just tried running your app but when I put in my xumm api key in env it gives me access denied, maybe I'm not putting in the right env variable? updating the README instructions could help

I have change env variable name to VITE_XUMM_API_KEY to clarify that it's API Key, not the API Secret from the Xumm Developer Console. Also you have to add http://localhost:3000 to the Origin/Redirect URIs. These steps were added to the readme too.

thanks for the changes! now I can login via XUMM but when I try to create an event - nothing happens on the webpage

In the error log we can see that it is produced in the line 71 in index.js file with the code related to xrpl library(Wallet.fromSeed). This line contains code: const minterWallet = await xrpl.Wallet.fromSeed( process.env.WALLET_SEED );

So it looks like you might have forgotten to set environment variables for the backend POAP infrastructure. I would recommend getting seed for devnet account since this is the default network for the backend and then pasting it to the WALLET_SEED variable, also don't forget to set other vatiables for infura etc if you want IPFS uploads to work properly.

[jonathanlei]

thanks for updating the README and give me more instructions on backend setup (I got the infura and a devnet wallet seed in the env file), I was able to get to batchMint step but this error showed up

[JustAnotherDevv]

The error from your message happens if the INFURA env variables have incorrect setup. You need both INFURA_ID and INFURA_SECRET. If you have changed those please restart the backend and it should work properly.

[jonathanlei]

The error from your message happens if the INFURA env variables have incorrect setup. You need both INFURA_ID and INFURA_SECRET. If you have changed those please restart the backend and it should work properly.

I do have both env variables setup and restarted the backend, just to clarify INFURA_ID are you referring to API Key on the dashboard?

[JustAnotherDevv]

The error from your message happens if the INFURA env variables have incorrect setup. You need both INFURA_ID and INFURA_SECRET. If you have changed those please restart the backend and it should work properly.

I do have both env variables setup and restarted the backend, just to clarify INFURA_ID are you referring to API Key on the dashboard?

Yeah, it's API Key. I just did setup from scratch with my own key and secret and it worked correctly + few other people from Ripple have tested it few months ago so it should work correctly.

[jonathanlei]

I was able to get it running with help from @JST5000, I think the issue was that I set my env for the backend to be devnet, and once I switched to testnet it worked. The wireframes looks good where it separates out the attendees and organizer's features.
Ready for second review with @JST5000