delvtech/council-kit

Add airdrop claim UI

Closed this issue · 16 comments

akhamisa commented
  • delegation selection
  • Integration w/ karma for delegate info.
Chakravarthy7102 commented

Hey @ryangoree I would like to work on this issue if you haven't already working on this!

ryangoree commented

Hey @Chakravarthy7102 , that's awesome! Just to be clear, this will be brand new UI and require a little bit of design chops. Any concerns there?

Chakravarthy7102 commented

Hey @Chakravarthy7102 , that's awesome! Just to be clear, this will be brand new UI and require a little bit of design chops. Any concerns there?

All good!, can you please share relevant design/wireframes for this UI?

ryangoree commented

There are no wireframes for this yet. I can help jam on some starting on 5/22, but the UI should work like this:

  1. Merkle leaves and proofs for the connected wallet are fetched from an external source (e.g., an AWS s3 bucket). Placeholders will do for now.
  2. The user reviews their airdrop and chooses to simply claim (sends airdrop to their wallet) or claim and delegate (deposits their airdrop into the locking vault and delegates in a single TX).
  3. If they choose to simply claim, a TX is initiated and the user get's a screen confirming that they've claimed their airdrop. If they choose to claim and delegate, they choose their delegate first then TX and confirmation.

The entry point for this UI could be in the header next to the Connect wallet button (if they have an airdrop to claim)

Ofc, I'm open to ideas on any of this if you have some.

Chakravarthy7102 commented

@ryangoree Understood!, but I have few questions

  1. Where should I keep this airdrop claiming interations exactly, I'm thinking on to put this entire claiming process inside single modal (Or maybe a different page altogether) on the user clicks on the claim airdrop button as you mentioned.
  2. How would I know that a particular user have a airdrop waiting for them to claim and what kind of assets the particular airdrop have like is it only NFT's or only currencies or both?
  3. And finally I'm assuming that I should use @council-sdk for claiming or delegating the airdrop.
akhamisa commented

Happy to help jam on the UI wireframing if there's a working session being planned.

This might also get pushed out into Sprint 4 based on some reprioritization of tasks to accommodate a more time-sensitive one, but if @Chakravarthy7102 wants to jam on some ideas, totally open to it.

  • ❤️1
Chakravarthy7102 commented

Hey @akhamisa I would love to jam on some ideas and get some UI wireframes

ryangoree commented

@ryangoree Understood!, but I have few questions

  1. Where should I keep this airdrop claiming interations exactly, I'm thinking on to put this entire claiming process inside single modal (Or maybe a different page altogether) on the user clicks on the claim airdrop button as you mentioned.
  2. How would I know that a particular user have a airdrop waiting for them to claim and what kind of assets the particular airdrop have like is it only NFT's or only currencies or both?
  3. And finally I'm assuming that I should use @council-sdk for claiming or delegating the airdrop.

Great questions!

  1. In our old UI we had a separate page with a simple UI in the middle that went through a few steps 1 at a time. I could see the modal working as well, but am partial to a new page so it doesn't feel like you're at risk of losing your progress if you accidentally close the modal.

  2. Let's assume there will be an endpoint somewhere in AWS like https://[tbd]/airdrop/:address. If the fetch request 404s or returns a falsy value, then they don't have an airdrop. Otherwise, if the account has an airdrop to claim, a payload like this would return:

    {
  "leaf": {
    "address": "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
    "amount": "100.000000000000000000"
  },
  "proof": [
    "0xf5111c4fa6bd06c74ffe8ff51b4b1ae39159381b4e0c2bd39613c0814d047f41",
    "0x3889db47cb95d6d73f4bad64adf84a7724c8c83ffa58c5cad440f142c040a365",
    "0x78c8945665d755d9b62bd8be8c3fbb941c1fd9e129c5f8b12bbbc74a5bf61f52"
  ]
}

    This can be a hardcoded Next.js API endpoint for now. Some example payloads can be found here: https://github.com/delvtech/council-kit/blob/main/packages/council-deploy/src/airdrop/accounts/leavesWithProofs.json

  3. Yes please! 🙂

  • 👍1
ryangoree commented

@Chakravarthy7102 I'm working on wireframes for this. Hoping to have them done by Wed.

Chakravarthy7102 commented

@Chakravarthy7102 I'm working on wireframes for this. Hoping to have them done by Wed.

Great!

akhamisa commented

@Chakravarthy7102 and I are coordinating a time for a walk-through of the wires. I'll keep you optional @ryangoree in case you're able to attend.

  • 👍1
akhamisa commented

@Chakravarthy7102 thanks for taking the time to meet Ryan and me today. I left a comment regarding the ordering of the initial delegate list, in figma (s/b random). If you have any questions, hit us up anytime.

  • ❤️1
Chakravarthy7102 commented

@Chakravarthy7102 thanks for taking the time to meet Ryan and me today. I left a comment regarding the ordering of the initial delegate list, in figma (s/b random). If you have any questions, hit us up anytime.

Got it, Thanks!

akhamisa commented

@Chakravarthy7102 how's it going? Would love a status update.