hypha-dao / dho-web-client

The DHO (Decentralized Human Organization) is a framework to build your organization from the ground up in an organic and participative way and together with others.
https://dao.hypha.earth/
Apache License 2.0
13 stars 8 forks source link

Treasurer screen(s) in the DHO #51

Closed mgravitt closed 4 years ago

mgravitt commented 4 years ago

The treasurers manage the cross-chain redemption of HUSD. The treasurers can use a block explorer or daoctl to create and attest to payments, but it would be easier if there was a GUI screen on the web app. The GUI would also create additional reporting and information for users.

Features

View Redemption Requests

View Payments

Create Payment

Attest Payment

Here's an example of what payments look like on daoctl:

image
sceenius commented 4 years ago

DO you think we can use the table from the wallet for this screen with additional fields and actions?

image

sceenius commented 4 years ago

@dappdever Can we rename [Create Payment] to something like [redeem payment], it sounds like the treasurer can submit a redemption this way.

mgravitt commented 4 years ago

The primary view on this table should have the following columns:

  1. Account name (requestor of the redemption)
  2. Amount of the redemption request (in HUSD)
  3. Requested Date
  4. Entered payment amount (these are payments that have been entered but not yet endorsed by 3 treasurers)
  5. Entered payment amount network (e.g. BTC, ETH, EOS)
  6. Entered payment amount transaction ID (doesn't need to be shown as text, but a button to open in another block explorer window)
  7. Treasurer endorsements (small avatars of the treasurers that have endorsed)

The table can be filtered by:

The "Open redemption requests" view should have a button/action for the treasurer to "Enter transaction details". The treasurer can then specify the amount (default to the amount on the request), the network (select from drop down), and the transaction ID.

The "Partially endorsed redemption requests" should have an action that allows the treasurer to select check boxes of a list of the rows and click "Endorse". This will add their endorsement to the payment.

gregory-latinier commented 4 years ago

I'm missing a few information. When you talk about the 'Users' do you mean everyone ? How can I identify the role Treasurer to display the related information / buttons ? What are the smartcontract methods and tables related to this task ? Do you want the block explorers hard-coded or as a env variables ?

Thanks

mgravitt commented 4 years ago

@gregory-latinier for identifying which users are treasurers, we can rely on badges. I will need to implement this this week. All users should be able to view the screen, but only treasurers have the actions available.

The list of redemption requests are in the redemptions table of the bank.hypha:

cleos -u https://api.telos.kitchen get table bank.hypha bank.hypha redemptions                                                                                                                                 ! master
{
  "rows": [{
      "redemption_id": 0,
      "requestor": "hyphanewyork",
      "amount_requested": "1.00 HUSD",
      "amount_paid": "1.00 HUSD",
      "notes": [],
      "requested_date": "2020-07-01T01:21:36.000",
      "updated_date": "2020-07-01T01:21:36.000"
    },{
      "redemption_id": 1,
      "requestor": "astoryteller",
      "amount_requested": "7000.00 HUSD",
      "amount_paid": "7000.00 HUSD",
      "notes": [],
      "requested_date": "2020-07-01T04:16:37.500",
      "updated_date": "2020-07-01T04:16:37.500"
    },{

Payments are in the payments table of the same contract:

cleos -u https://api.telos.kitchen get table bank.hypha bank.hypha payments                                                                                                                                    ! master
{
  "rows": [{
      "payment_id": 0,
      "creator": "hyphanewyork",
      "redemption_id": 0,
      "amount_paid": "1.00 HUSD",
      "created_date": "2020-07-01T14:05:26.500",
      "confirmed_date": "2020-07-29T15:04:56.000",
      "attestations": [{
          "key": "cometogether",
          "value": "2020-07-29T15:04:56.000"
        },{
          "key": "hyphanewyork",
          "value": "2020-07-01T14:05:26.500"
        }
      ],
      "notes": [{
          "key": "network",
          "value": "N/A"
        },{
          "key": "trx_id",
          "value": "test transaction - n/a"
        }
      ]
    },{
      "payment_id": 2,
      "creator": "hyphanewyork",
      "redemption_id": 1,
      "amount_paid": "7000.00 HUSD",
      "created_date": "2020-07-09T13:15:06.000",
      "confirmed_date": "2020-07-29T15:06:28.500",
      "attestations": [{
          "key": "cometogether",
          "value": "2020-07-29T15:06:28.500"
        },{
          "key": "hyphanewyork",
          "value": "2020-07-09T13:15:06.000"
        }
      ],
      "notes": [{
          "key": "memo",
          "value": "send in a couple of transactions in order to test"
        },{
          "key": "network",
          "value": "BTC"
        },{
          "key": "trx_id",
          "value": "6c77cbb970ebd12aaff278101b65ba89d8c79e9577434b2ea028e43bc8ac1a1f"
        }
      ]
sceenius commented 4 years ago

@dappdever Here's my proposed UI for the table (with 3 cases as examples) -

image

mgravitt commented 4 years ago

@sceenius I think we should have an ID (integer) shown. Each redemption request has a corresponding unique ID (just increments). It could be possible for a member to have two requests of the same amount on the same day, and we have been using the ID# in the memo of the Bitcoin transactions.

I think "SHOW ID" should perhaps be "VIEW TRX". This should open a new window to the transaction on its native network (not exactly sure which block explorers to use, but we will find one for each network and we can link directly to the transaction on that network with the ID).

mgravitt commented 4 years ago

When a user hovers over one of the treasurer avatars, it should show the name and the timestamp of when they endorsed the payment.

mgravitt commented 4 years ago

I imagine we can query the list of payments from our known treasuries and try to line them up so treasurers do not have to copy/paste the transaction ID. For this, we'll have to figure out how to query from the bitpay core server for this (which is what Copay is using). Might need to come in a subsequent release.

sceenius commented 4 years ago

Sounds good. I've added a link to the ID as well. Maybe we need a status field or the PAYMENTS column is enough.

image

sceenius commented 4 years ago

https://fontawesome.com/icons/user-circle?style=regular (for blank avatars)

mgravitt commented 4 years ago

@sceenius @gregory-latinier - there will need to be a small form/dialog (modal?) for entering a payment. This is what would appear when a treasurer clicks "Enter Transaction". The fields on this dialog would be:

@gregory-latinier - this is the action that needs to be called on the bank.hypha contract:

ACTION newpayment(const name &treasurer, const uint64_t &redemption_id, const asset &amount, const map<string, string> &notes);

The network and trx_id should be put into the notes parameter with those keys.

If a comment was entered, it should be added to the notes map with a key of comment

mgravitt commented 4 years ago

@gregory-latinier - here's the action details for when a treasurer clicks the endorse button.

ACTION attestpaymnt(const name &treasurer, const uint64_t &payment_id,
                          const uint64_t &redemption_id, const asset &amount, const map<string, string> &notes);

notes of course are not required, but the UI should allow for an optional string with a key of comment

mgravitt commented 4 years ago

The "View Tx" button should open a new window with a link to a block explorer.

If the network is BTC, the prefix used for the link should be:

https://www.blockchain.com/btc/tx/<trx_id>

If the network is ETH, the prefix used for the link should be:

https://etherscan.io/tx/<trx_id>

If the network is EOS, the prefix used for the link should be:

https://bloks.io/transaction/<trx_id>
sceenius commented 4 years ago

@gregory-latinier For the dialog on the "New TRX" (Enter TRX), please use the out-of-the-box Quasar form (similar to the alert mgr).

gregory-latinier commented 4 years ago

On the screenshot there are values on the right side. How are they calculated ?

mgravitt commented 4 years ago

I think we just use supply for now, per the below queries:

HUSD supply:

cleos -u https://api.telos.kitchen get table husd.hypha HUSD stat                                                                                                     
{
  "rows": [{
      "supply": "167745.22 HUSD",
      "max_supply": "-1.00 HUSD",
      "issuer": "bank.hypha"
    }
  ],
  "more": false,
  "next_key": ""
}

SEEDS supply:

cleos -u https://api.telos.kitchen get table token.seeds SEEDS stat                                                                                                   
{
  "rows": [{
      "supply": "3141584632.0000 SEEDS",
      "initial_supply": "1500000000.0000 SEEDS",
      "issuer": "seed.seeds"
    }
  ],
  "more": false,
  "next_key": ""
}

HYPHA supply:

cleos -u https://api.telos.kitchen get table token.hypha HYPHA stat                                                                                                   {
  "rows": [{
      "supply": "2032440.06 HYPHA",
      "max_supply": "-1.00 HYPHA",
      "issuer": "dao.hypha"
    }
  ],
  "more": false,
  "next_key": ""
}
sceenius commented 4 years ago

@gregory-latinier For larger amounts (e.g. 3141584632.0000 SEEDS) can we use a simplified representation, e.g. "3,141M", or "3.14B" - is there a JS function for this, like for times "4 days ago". The function should kick in for amounts >= 1M.

mgravitt commented 4 years ago

@sceenius @gregory-latinier After reviewing the indexes and table structure in the contract, I think we should change the screen slightly (just changing the filters on the upper-right of the table). I think there should be:

Requestor View

This would show all of the redemptions for a specific requestor, with a newest at the top (there is an index for this). This should probably be the primary/default view for members to see their redemption requests and payments.

cleos -u https://api.telos.kitchen get table --index 2 --key-type i64 --reverse -L gregory.tk -U gregory.tk bank.hypha bank.hypha redemptions

Open View

This would be the primary for treasurers, but anyone could view it I imagine. Perhaps there's a filter at the top for "member view" (for # 1) and "treasurer view" (for this one). This view would show the redemptions sorted by amount due, with the highest quantities due at the top.

cleos -u https://api.telos.kitchen get table --index 3 --key-type i64 --reverse bank.hypha bank.hypha redemptions

NOTE that the limit will default to 10, so we should either increase that to 1000 or implement table pagination

sceenius commented 4 years ago

@gregory-latinier For the Requestor View, can we enable the search box as a filter? This should also take care of the "Open View" vs. "Member View".

image

sceenius commented 4 years ago

Sorry, wrong issue, deleting this