POAP Dashboard App (Milestones 1-4) #2

rikublock · 2023-06-12T08:38:21Z

Proposal details see here
Discussion thread see here

Current Features:

basic app layout and structure
full POAP API bindings
network status
web3 wallet state management (Xumm and Gem wallet support)
mint dialog (create new events)
more (see updates below)

Please checkout the README file for detailed setup instructions.

Will add more features in the coming days.

Feedback on the current state would be appreciated!

Mint Dialog:

Network/Wallet status:

- basic layout - poap api bindings - network status - web3 status (xumm, gem wallet support) - mint page/dialog

JST5000 · 2023-06-12T23:32:54Z

I'll start reviewing this tomorrow :)

JST5000 · 2023-06-13T23:37:06Z

What is unknown? - (Maybe it'd be better to hide that if no value is in there?)

JST5000 · 2023-06-13T23:39:17Z

README.md

+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+## Supported Wallets
+- Xumm (installation details [here](https://xumm.app/))


nit: Xumm is rebranding as Xaman so maybe it'd be good to rename them in this project? (With a note like "Xaman, formerly named Xumm, ..."

rikublock · 2023-06-15T08:09:08Z

What is unknown? - (Maybe it'd be better to hide that if no value is in there?)

It displays the current/selected network (e.g. "Mainnet", etc.) , which is "unknown" until a wallet is connected.

Requires an updated version of the POAP backend

rikublock · 2023-06-16T19:52:31Z

Update 1:

New features:

List of available events overview (Join button not yet implemented)
Event details page (derived from metadata)
Depends on an upgraded/extended version of the POAP API backend (available here). Notable backend changes:
- basic typing
- alternative IPFS provider (web3.storage)
- data is stored in a database (with orm)
- add API endpoint to fetch event data

Problems:

The GemWallet extension is a fairly new project and still lacks a lot of common functionality. This makes it difficult to add the same level of support as will be possible for Xumm. Still missing for instance:
- certain transaction types
- events to notify the dApp about extension state changes (e.g. wallet change, network change, login/logout, etc.)
- etc.
The current POAP API backend has limited functionality. Without changes/additions it won't be possible to implement several of the listed milestones. In an effort to add these missing features I started making changes to the existing backend (e.g. replace the simple participants.json file with a proper orm database)

Misc:

The focus is currently on adding all the features and functionality. Once that is working, I'll make it pretty. Please consider that when reviewing.

Event Overview:

Event Details Page:

JST5000 · 2023-06-16T23:22:32Z

Hey Riku,

When I try to mint a token using an arbitrary account, I run into a problem where it says "500 forbidden" and then the modified version of the backend says it "expected a string" - not sure exactly what's going on.

1st step - adding all the info in:

2nd step - error pops up:

3rd step - Looking at the backend logs

Any thoughts on why that's happening?

rikublock · 2023-06-17T07:52:52Z

Any thoughts on why that's happening?

My guess: The .env file in the backend API project is either missing or misconfigured (specifically the WALLET_SEED variable).

Notes:

Currently the backend can only handle one network (default: devnet) at a time. Make sure to connect a wallet that runs on the same network when testing the frontend app. Otherwise you will likely have issues. In the future I intend to upgrade the backend to simply handle request on any network.
Ensure that the local repos contain the lastest changes (both app and api)

- join dialog - claim request

- handle user does not exist - trim values

- tell the user to look at the wallet to confirm tx

- strong input/type checking - support for start and end date - make use of new POST /api/mint

rikublock · 2023-06-22T15:59:53Z

Update 2:

Frontend App changes:

can now sign up for events with the "join" button (Xumm only!)
added profile dialog and menu (allows to set/update user name and email)
the event creation dialog now accepts a start and end date
all forms now have strict input validation

Backend changes:

added db models NFT and Claim
added /api/user/:address (fetch details about a user)
added /api/updateUser (update user profile info; strong value validation)
updated /api/claim (remove minter param)
updated /api/mint (now accepts dateStart and dateEnd; strong value validation)
many more overall code and typing improvements

Info:

the frontend dashboard app is available here
the forked backend API 2.0 is available here

updated mint dialog:

profile menu:

profile dialog:

JST5000 · 2023-06-22T19:31:08Z

~~Hey @rikublock, when I run the backend with npm i -> npm start it instantly crashes with this error:~~

Nevermind it was caused by the previous run of the code having a legacy database so it never re-initialized. Deleting backend.sqlite3 fixed it for me.

JST5000 · 2023-06-22T19:38:50Z

Tried minting 12 NFTs with an event and the app crashed with this error:

(I logged in with Xumm successfully before this using a Testnet account)

Executing (default): SELECT `Event`.*, `owner`.`walletAddress` AS `owner.walletAddress`, `owner`.`firstName` AS `owner.firstName`, `owner`.`lastName` AS `owner.lastName`, `owner`.`email` AS `owner.email`, `owner`.`isOrganizer` AS `owner.isOrganizer`, `attendees`.`walletAddress` AS `attendees.walletAddress`, `attendees`.`firstName` AS `attendees.firstName`, `attendees`.`lastName` AS `attendees.lastName`, `attendees`.`email` AS `attendees.email`, `attendees`.`isOrganizer` AS `attendees.isOrganizer` FROM (SELECT `Event`.`id`, `Event`.`title`, `Event`.`uri`, `Event`.`count`, `Event`.`dateStart`, `Event`.`dateEnd`, `Event`.`networkId`, `Event`.`ownerWalletAddress` FROM `event` AS `Event` ORDER BY `Event`.`id` DESC LIMIT 50) AS `Event` LEFT OUTER JOIN `user` AS `owner` ON `Event`.`ownerWalletAddress` = `owner`.`walletAddress` LEFT OUTER JOIN ( `participation` AS `attendees->Participation` INNER JOIN `user` AS `attendees` ON `attendees`.`walletAddress` = `attendees->Participation`.`userWalletAddress`) ON `Event`.`id` = `attendees->Participation`.`eventId` ORDER BY `Event`.`id` DESC;
TypeError: Expected String
    at decodeUnsafe (/Users/jmills/Documents/bounty-githubs/riku-poap-backend/node_modules/base-x/src/index.js:66:45)
    at Object.decode (/Users/jmills/Documents/bounty-githubs/riku-poap-backend/node_modules/base-x/src/index.js:109:18)
    at Codec._decodeRaw (/Users/jmills/Documents/bounty-githubs/riku-poap-backend/node_modules/ripple-address-codec/src/xrp-codec.ts:135:24)
    at Codec.decodeChecked (/Users/jmills/Documents/bounty-githubs/riku-poap-backend/node_modules/ripple-address-codec/src/xrp-codec.ts:105:25)
    at Codec.decode (/Users/jmills/Documents/bounty-githubs/riku-poap-backend/node_modules/ripple-address-codec/src/xrp-codec.ts:64:29)
    at Object.decodeSeed (/Users/jmills/Documents/bounty-githubs/riku-poap-backend/node_modules/ripple-address-codec/src/xrp-codec.ts:209:31)
    at deriveKeypair (/Users/jmills/Documents/bounty-githubs/riku-poap-backend/node_modules/ripple-keypairs/src/index.ts:112:32)
    at Function.deriveWallet (/Users/jmills/Documents/bounty-githubs/riku-poap-backend/node_modules/xrpl/src/Wallet/index.ts:297:52)
    at Function.fromSeed (/Users/jmills/Documents/bounty-githubs/riku-poap-backend/node_modules/xrpl/src/Wallet/index.ts:158:19)
    at /Users/jmills/Documents/bounty-githubs/riku-poap-backend/server.ts:87:42

Full screenshot of all logs since backend turned on:

JST5000 · 2023-06-22T19:43:23Z

Separate ask - for the network icon, it looks like a button, but it isn't actually interactable. Could you make it look not clickable/use a different type of component for that?

rikublock · 2023-06-22T19:53:31Z

Full screenshot of all logs since backend turned on:

Looks like the exact same issue from before. Did you check the .env of the backend ?

JST5000 · 2023-06-22T23:41:35Z

Looks like the exact same issue from before. Did you check the .env of the backend ?

Ah sorry for the duplicate ask - you were right about the .env being the problem. My previous POAP backend repo already had the .env setup so I forgot that step.

Currently I'm a bit confused about how event attendees would claim an NFT from the event. As it is now, it seems they would have to sign in via Xumm, but then they would be able to create new events which doesn't seem like something they should be able to do. (If everyday attendees have access to create events using the event organizer's secret, that means they can lock up the organizer's funds by minting a bunch of NFTs)

There's a further challenge I'm noticing now that if you are an event organizer with a Xumm account, it's not compatible with the POAP backend because the backend expects a secret. Since Xumm accounts are initialized via secret numbers instead of secret you can't get the right data type for the .env file.

I think the two work flows which have to be straightforward in this UI are:

Event organizer spinning up an event.
Attendee claiming NFTs at the event.

Maybe the best way to go about that would be to have this UI as written so far just be for the event organizer, and have a button which creates a QR code to claim the NFT that can be shared with attendees?

Then for login, potentially it would require verifying that the wallet that logged in was actually the same as the account on the backend & making the backend accept other forms of private key?

@jonathanlei @rikublock what do you think? (Sorry for the wall of text - trying to figure out the best way to go about this)

rikublock · 2023-06-23T08:34:23Z

@jonathanlei @rikublock what do you think? (Sorry for the wall of text - trying to figure out the best way to go about this)

I imagined the dashboard app to be a flexible "Event Management Platform".

Platform event types:

open:
- any platform user can join the event and claim an NTF (e.g. discord community call)
- optionally the organizer can add a user
- visible to everyone (public)
managed:
- organizer adds users (e.g. private birthday party)
- each user can then claim NFT
- visible only to participants (private)

Platform user permissions:

attendee:
- can join open events
- can claim NFT when attending event
organizer:
- all from attendee
- can create open or managed events
- can add users to owned events
admin:
- all from organizer
- manage platform
- approve new organizer

Usage flow:

a user connects a wallet to the client-side frontend platform app
- by proving address ownership, said user can authenticate with the server-side backend service
- this can happen seamlessly in the background or require explicit user action
once authenticated, depending on permissions a user can:
- create new event
- manage event
- sign up for event
- claim NFT
- add name and email to their account (only stored in backend db, never on chain)
a user can be an organizer, attendee or both
a single user can create many events
a single user can participate in several events
new users would generally start with attendee permissions, becoming an organizer would need approval

As I understand it, Attendify has a vault wallet (WALLET_SEED in .env) that mints and sells NFTs
on behalf of an organizer (event creator). That wallet would typically be different from an organizer's wallet.

Current dashboard implementation:

all users currently have organizer and attendee permissions - anyone can create new events (for easy testing)
all events are open - anyone can sign up (for easy testing)
the sign up and NFT claim steps are combined into one UI action with the "join" button (not ideal, needs changing)

rikublock · 2023-10-28T10:05:44Z

@JST5000

Changes:

Display the address of the event organizer on the admin event page
Redirect after login depending on permissions
Improve admin section in backend readme file

(Changes to both frontend and backend)

JST5000 · 2023-11-08T00:10:04Z

Sorry for the delay, I'll re-review tomorrow.

rikublock · 2023-11-08T16:17:04Z

Sorry for the delay, I'll re-review tomorrow.

NFT ownership verification is the key concern for me at the moment. Reaching a definitive decision on the way forward is critical, as it's currently impeding the progress.

JST5000 · 2023-11-09T00:58:06Z

For the NFT ownership verification, I think Option 2 is best, and that should happen on the event page since it has a similar logic already, and will be a known url for attendees.

While the NFTs can still be released, the page should say something like "You already have an NFT from this event."

Once the event is over though, an end user who visits the site should be able to sign in with Xumm, and see a page which indicates "Verified! <r... (the account address)> owns an NFT from this event." with a big checkmark / easy to verify screen. If they log in, and they do not own an NFT from the event it should say something like "<r... (the account address> does NOT own an NFT from this event." with a red icon like a stop sign.

Does that make sense?

rikublock · 2023-11-09T16:48:13Z

@JST5000

The following pages are intended for attendees (adjust masked event id):

http://localhost:3000/claim/4XyN519z
- Primary link for attendees
- Can be access on the organizer page with the "share" button
- Guides an attendee through the NFT claim process
- Improved the summary step to now display wallet address, NFT id and an indicator for "You have an NFT"
http://localhost:3000/eventm/4XyN519z
- Event info/details page for attendees
- Can be access at any time during the claim process via the "see details" link
http://localhost:3000/verify/4XyN519z NEW
- Checks NFT ownership for an event (independent of event status)
- Can be opened on either an attendee mobile device or an organizer controlled machine
  - Attendee device: Attendee opens the link on their device, connects a wallet and shows their screen to an organizer. Quick, reasonably secure.
  - Organizer device: Attendee connects wallet to organizer machine and results are displayed there. Slower, but impossible to cheat.
- Currently needs to be manually opened in a tab (adjust masked event id)

While the NFTs can still be released, the page should say something like "You already have an NFT from this event."

That can be found at: http://localhost:3000/claim/4XyN519z

Once the event is over though, an end user who visits the site should be able to sign in with Xumm, and see a page which indicates "Verified! <r... (the account address)> owns an NFT from this event." with a big checkmark / easy to verify screen. If they log in, and they do not own an NFT from the event it should say something like "<r... (the account address> does NOT own an NFT from this event." with a red icon like a stop sign.

That can be found at: http://localhost:3000/verify/4XyN519z

Let me know what you think.

rikublock · 2023-11-15T07:56:15Z

@JST5000

Sorry for the delay, I'll re-review tomorrow.

Did you have a chance to review it ? Would it be possible to compile a short list of all the remaining things that need changing?

JST5000 · 2023-11-16T04:35:48Z

I had a chance to briefly check the specific thing previously. I'll do a full review tomorrow to verify all the requirements / try to provide very specific remaining feedback (if any).

JST5000 · 2023-11-17T04:53:05Z

Once you claim your NFT, can you give names to the fields you display afterwards? (For someone who is unfamiliar with the XRPL, it'd be hard to know that you are displaying their wallet address and the NFTokenID)

The verify page looks good. Can you link to it from the /event/ page so it's discoverable? (Ex. "Want to show someone you already have this NFT? [Verify here!]" in smaller text in the bottom right of the page)

Other than that, the verify page looks great :) - Clear, simple, works well.

I also verified that if there is an internet outage immediately after paying the reserve fee, or when canceling an event, the app handles the transactions when the internet comes back on gracefully (paying back the reserve and burning all NFTs in the cancel case).

So I think the two small nits at the top of this comment are all that's left - I've updated the big checklist comment and all individual items are now checked off :)

@rikublock - awesome work!

rikublock · 2023-11-21T09:43:12Z

@JST5000

Once you claim your NFT, can you give names to the fields you display afterwards? (For someone who is unfamiliar with the XRPL, it'd be hard to know that you are displaying their wallet address and the NFTokenID)

That is how it looks now.

The verify page looks good. Can you link to it from the /event/ page so it's discoverable? (Ex. "Want to show someone you already have this NFT? [Verify here!]" in smaller text in the bottom right of the page)

I added a new icon at the top of the event page that links to the verification page. The event description might be quite long. Things at the bottom could be easily missed. In case you prefer text at the bottom of the page, can also add that.

@rikublock - awesome work!

Thanks!

What happens now? What's next?

JST5000 · 2023-11-22T04:25:13Z

@rikublock Sweet - I think it'd till be worth adding a note at the bottom right potentially with the words "Verify ownership" or something like that because I didn't quite expect that icon to be clickable since it looks like a stamp of authenticity rather than a link. But, this looks good to me.

As for next steps:

Please submit to claim all parts of this bounty using this form: https://xrpl.typeform.com/xrpl-bounties
I'm going to ask one of my teammates to do a second technical review. (It'll happen at the earliest next week because of vacations happening for American Thanksgiving)
There may be a bit of feedback from that, but once they approve we'll kick off the payment process.

(Thanks for sticking with it!)

rikublock · 2023-11-22T14:31:33Z

@JST5000

Sweet - I think it'd till be worth adding a note at the bottom right potentially with the words "Verify ownership" or something like that because I didn't quite expect that icon to be clickable since it looks like a stamp of authenticity rather than a link. But, this looks good to me.

Here the updated version:

jonathanlei

LGTM, thanks for the work!

jonathanlei · 2023-11-29T21:28:34Z

src/components/AttendeeTable.tsx

+        type: "boolean",
+        width: 80,
+      },
+      // {


is this going to be used?

It's actually not being used.

could you delete the section then? Just to make sure the code is cleaning

JST5000 · 2023-12-07T17:55:43Z

@rikublock Merged it in :) (If you want to make other changes, please do and @me, I'll aim to give quick reviews!)

rikublock · 2023-12-08T06:18:42Z

@JST5000

@rikublock Merged it in :) (If you want to make other changes, please do and @me, I'll aim to give quick reviews!)

Nice! Might want to copy/fork https://github.com/rikublock/POAP-API2 as well.
(and possibly archive the API v1 to avoid confusion)

rikublock added 2 commits June 9, 2023 13:10

import project

1a69749

- basic layout - poap api bindings - network status - web3 status (xumm, gem wallet support) - mint page/dialog

add setup steps to readme

ab33866

JST5000 reviewed Jun 13, 2023

View reviewed changes

add event overview, event details page

e18c927

Requires an updated version of the POAP backend

rikublock added 11 commits June 17, 2023 09:59

add webpack

f1a6db6

fix dev server routing

25a9eef

add wallet providers

2b1e71e

implement event sign up

32ba19c

- join dialog - claim request

remove old routes

6485cb0

add profile dialog

5f48257

disable close button while loading

816e2bf

improve profile dialog

9397781

- handle user does not exist - trim values

tweak join dialog

d8a891e

- tell the user to look at the wallet to confirm tx

add prettier config

a4f7a8f

rework mint dialog

8cd47fb

- strong input/type checking - support for start and end date - make use of new POST /api/mint

rikublock changed the title ~~[WIP] Basic project structure~~ POAP Dashboard App Jun 22, 2023

rikublock requested a review from JST5000 June 22, 2023 16:00

require event end date to be in the future

ceb6b64

rikublock added 5 commits November 9, 2023 08:37

adjust app version

dda317d

display wallet address after NFT claim

3c3f115

add NFT ownership verification API

2b7ee01

add NFT ownership verification page

3c0259a

clean up comments

9a291a2

rikublock added 4 commits November 21, 2023 08:24

add content box labels

f1b11e1

only redirect during regular login

22aa432

lazy mount add dialog

1311bf8

add verify nft icon to event page

555fac4

rikublock changed the title ~~POAP Dashboard App~~ POAP Dashboard App (Milestones 1-4) Nov 22, 2023

add verify ownership note

b212caa

jonathanlei reviewed Nov 30, 2023

View reviewed changes

JST5000 approved these changes Dec 1, 2023

View reviewed changes

rikublock added 2 commits December 2, 2023 05:39

restore lost license file

8ba6a44

code clean up

d0a03ca

JST5000 merged commit 2180c7a into XRPLBounties:main Dec 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

POAP Dashboard App (Milestones 1-4) #2

POAP Dashboard App (Milestones 1-4) #2

rikublock commented Jun 12, 2023 •

edited

Loading

JST5000 commented Jun 12, 2023

JST5000 commented Jun 13, 2023

JST5000 Jun 13, 2023

rikublock commented Jun 15, 2023

rikublock commented Jun 16, 2023 •

edited

Loading

JST5000 commented Jun 16, 2023

rikublock commented Jun 17, 2023 •

edited

Loading

rikublock commented Jun 22, 2023 •

edited

Loading

JST5000 commented Jun 22, 2023 •

edited

Loading

JST5000 commented Jun 22, 2023 •

edited

Loading

JST5000 commented Jun 22, 2023

rikublock commented Jun 22, 2023 •

edited

Loading

JST5000 commented Jun 22, 2023

rikublock commented Jun 23, 2023 •

edited

Loading

rikublock commented Oct 28, 2023

JST5000 commented Nov 8, 2023

rikublock commented Nov 8, 2023

JST5000 commented Nov 9, 2023

rikublock commented Nov 9, 2023 •

edited

Loading

rikublock commented Nov 15, 2023

JST5000 commented Nov 16, 2023

JST5000 commented Nov 17, 2023

rikublock commented Nov 21, 2023

JST5000 commented Nov 22, 2023

rikublock commented Nov 22, 2023

jonathanlei left a comment

jonathanlei Nov 29, 2023

rikublock Dec 1, 2023

jonathanlei Dec 1, 2023

rikublock Dec 2, 2023

JST5000 commented Dec 7, 2023

rikublock commented Dec 8, 2023

POAP Dashboard App (Milestones 1-4) #2

POAP Dashboard App (Milestones 1-4) #2

Conversation

rikublock commented Jun 12, 2023 • edited Loading

JST5000 commented Jun 12, 2023

JST5000 commented Jun 13, 2023

JST5000 Jun 13, 2023

Choose a reason for hiding this comment

rikublock commented Jun 15, 2023

rikublock commented Jun 16, 2023 • edited Loading

Update 1:

JST5000 commented Jun 16, 2023

rikublock commented Jun 17, 2023 • edited Loading

rikublock commented Jun 22, 2023 • edited Loading

Update 2:

JST5000 commented Jun 22, 2023 • edited Loading

JST5000 commented Jun 22, 2023 • edited Loading

JST5000 commented Jun 22, 2023

rikublock commented Jun 22, 2023 • edited Loading

JST5000 commented Jun 22, 2023

rikublock commented Jun 23, 2023 • edited Loading

rikublock commented Oct 28, 2023

JST5000 commented Nov 8, 2023

rikublock commented Nov 8, 2023

JST5000 commented Nov 9, 2023

rikublock commented Nov 9, 2023 • edited Loading

rikublock commented Nov 15, 2023

JST5000 commented Nov 16, 2023

JST5000 commented Nov 17, 2023

rikublock commented Nov 21, 2023

JST5000 commented Nov 22, 2023

rikublock commented Nov 22, 2023

jonathanlei left a comment

Choose a reason for hiding this comment

jonathanlei Nov 29, 2023

Choose a reason for hiding this comment

rikublock Dec 1, 2023

Choose a reason for hiding this comment

jonathanlei Dec 1, 2023

Choose a reason for hiding this comment

rikublock Dec 2, 2023

Choose a reason for hiding this comment

JST5000 commented Dec 7, 2023

rikublock commented Dec 8, 2023

rikublock commented Jun 12, 2023 •

edited

Loading

rikublock commented Jun 16, 2023 •

edited

Loading

rikublock commented Jun 17, 2023 •

edited

Loading

rikublock commented Jun 22, 2023 •

edited

Loading

JST5000 commented Jun 22, 2023 •

edited

Loading

JST5000 commented Jun 22, 2023 •

edited

Loading

rikublock commented Jun 22, 2023 •

edited

Loading

rikublock commented Jun 23, 2023 •

edited

Loading

rikublock commented Nov 9, 2023 •

edited

Loading