Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Payroll: update for @aragon/api-react, hooks, and new data format #851

wants to merge 3 commits into
base: master


None yet
1 participant
Copy link

commented May 14, 2019

Still in heavy development.

This is more or less a complete rewrite in state from the original, aiming to more elegantly handle accounts and contract state. It also updates aragonAPI to modern versions (e.g. api-react).

In doing so, a lot of the frontend scaffolding of the original was discarded, in hopes of simplifying their implementations (especially Table, which forced a very narrow API for data intake). It may be useful to refer to the original source for more context about particular components.

NOTE: the WebWorker script's facelift is still in-progress and will be pushed soon. It does not work yet.

Work left, in roughly this priority:

  • Rewrite WebWorker script (@sohkai)
  • Sanity check the current hooks and connected state (@bpierre)
  • Render MyPayroll screen
    • Update PartitionBar component to use aragonUI's (@bpierre)
    • Use a similar table and filtering approach as Finance's
  • Make sure panels (in the order of RequestPayroll, EditSalaryAllocation, and AddEmployee) work
    • Update DatePicker to the one we have in Finance / use aragonUI's TextInput
  • Render TeamPayroll screen
    • (Nice to have) Update LineChart component to use aragonUI's

See mockups in the original design issue, and an Invision of what the original app used to look like.

Out of scope:

  • Fully responsive views (just having the MenuButton appear is enough)

To run locally (once the state works):

In one terminal:

cd future-apps/payroll/app
npm run start

In another terminal:

cd future-apps/payroll/
npm run dev

(An organization will be put on staging soon to make this setup easier)


The WebWorker should return state conforming to this pattern:

WebWorker state
  financeAddress: '<string>',
  vaultAddress: '<string>',
  priceFeedAddress: '<string>',
  rateExpiryTime: '<string>',
  employees: [
      employeeId: '<string>',
      removed: false, // true if employee does not exist in the contract anymore (cannot call any contract getters)
      data: {
        lastAllocationUpdate: 123,
        endDate: 123,
        isActive: false,
      payments: [
          token: '<string>',
          amount: '<string>',
          exchangeRate: '<string>',
          reference: '<string>',
          denominationAmount: '<string>',
          date: 123
  allowedTokens: [
      symbol: '<string>',
      decimals: '<string>',
      name: '<string>',
      address: '<string>'
  denominationToken: {
    symbol: '<string>',
    decimals: '<string>',
    name: '<string>',
    address: '<string>'
  totalPaymentsOverTime: {
    monthly: [
        interval: { start: 123, end: 123 },
        amount: '<string>'
    quarterly: {},
    yearly: {}

In general, most state will be left as a string unless it can be safely coerced into a number (e.g. dates and times)

The app reducer takes this state and will produce roughly similar state, with the following exceptions:

  • In cases where a string denotes a number, a BN.js number will be used instead
  • In cases where a number denotes a date, a Date will be used instead
  • Each employee includes a new paidAmountForYear value (a BN), representing the amount paid to this employee in the current calendar year



There are a number of hooks spread out across app-logic.js, employee-hooks.js, pricefeed-hooks.js, and utils/hooks.js. For the most part, they are meant to be used once at the top level component (App), to help extract state calculations (and avoid refetching network state too often).

Hook specs:

  • Actions (calling api.<function>)
  • useCurrentEmployee(): gets the current employee associated with the connected account (if any), and their salary allocation
  • useExchangeRates(): gets the latest price feed information for the set of allowed tokens, updating once a minute or on events from the price feed
  • useVaultBalancesInDenominationToken(): gets the latest vault balances, listed in denomination tokens (i.e. converted to base salary currency), updating once a minute
  • employee.useEmployeeSalary(): gets the current total owed salary as well as their converted amounts for each selected payout token


As a result of the scaffolding refactor, most of the "container" components in screens/ were reduced to shells (connected to their required data) that don't actually render much state. In general, we just need to render the information in a table, and attach filters (like we do in Finance).

There are also a number of outdated components that have since been integrated in aragonUI, which we should update (PartitionBar, LineChart).

@sohkai sohkai force-pushed the payroll-modernize branch from 570527d to ebc734a May 15, 2019

sohkai added some commits May 17, 2019

@sohkai sohkai force-pushed the payroll-modernize branch from b801fc9 to 51108c7 May 17, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.