From ff716c68ea222da0777a532253d6920d49f6cfd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Wed, 11 Jan 2023 13:26:58 +0800 Subject: [PATCH 01/10] Update current block when new one is mined --- app/services/kredits.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/app/services/kredits.js b/app/services/kredits.js index dc62d47..12a58eb 100644 --- a/app/services/kredits.js +++ b/app/services/kredits.js @@ -118,9 +118,12 @@ export default Service.extend({ }); await kredits.init(); - this.set('kredits', kredits); - this.set('currentBlock', await kredits.provider.getBlockNumber()); + this.set('currentBlock', await this.kredits.provider.getBlockNumber()); + this.kredits.provider.on('block', blockNumber => { + console.debug('[kredits] New block mined:', blockNumber); + this.set('currentBlock', blockNumber) + }); if (this.currentUserAccounts && this.currentUserAccounts.length > 0) { this.getCurrentUser.then(contributorData => { @@ -738,5 +741,5 @@ export default Service.extend({ this.contributors .findBy('address', to) .incrementProperty('balance', value); - }, + } }); From fe27b010da7a8fbe07718a868e03c4d46caab1f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Wed, 11 Jan 2023 13:59:41 +0800 Subject: [PATCH 02/10] Add confirmed-in component --- app/components/confirmed-in/component.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 app/components/confirmed-in/component.js diff --git a/app/components/confirmed-in/component.js b/app/components/confirmed-in/component.js new file mode 100644 index 0000000..1d7a1c7 --- /dev/null +++ b/app/components/confirmed-in/component.js @@ -0,0 +1,23 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { inject as service } from '@ember/service'; + +export default class ConfirmedInComponent extends Component { + @service kredits; + + @tracked confirmedAtBlock = null; + + constructor(confirmedAtBlock) { + super(...arguments); + this.confirmedAtBlock = confirmedAtBlock; + } + + get confirmedInBlocks () { + return this.confirmedAtBlock - this.kredits.currentBlock; + } + + get confirmedInSeconds () { + // A new block is mined every 30 seconds on average + return this.confirmedInBlocks * 30; + } +} From 6c7de97e387c78b1fa702fe0c50672042fcaa29b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Wed, 11 Jan 2023 14:10:35 +0800 Subject: [PATCH 03/10] Get duration in human time --- app/components/confirmed-in/component.js | 7 ++++ tests/unit/components/confirmed-in-test.js | 40 ++++++++++++++++++++++ 2 files changed, 47 insertions(+) create mode 100644 tests/unit/components/confirmed-in-test.js diff --git a/app/components/confirmed-in/component.js b/app/components/confirmed-in/component.js index 1d7a1c7..e14c639 100644 --- a/app/components/confirmed-in/component.js +++ b/app/components/confirmed-in/component.js @@ -1,6 +1,7 @@ import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { inject as service } from '@ember/service'; +import moment from 'moment'; export default class ConfirmedInComponent extends Component { @service kredits; @@ -20,4 +21,10 @@ export default class ConfirmedInComponent extends Component { // A new block is mined every 30 seconds on average return this.confirmedInBlocks * 30; } + + get confirmedInHumanTime () { + console.debug(this.confirmedInBlocks); + console.debug(this.confirmedInSeconds); + return moment.duration(this.confirmedInSeconds, "seconds").humanize(); + } } diff --git a/tests/unit/components/confirmed-in-test.js b/tests/unit/components/confirmed-in-test.js new file mode 100644 index 0000000..7f9d796 --- /dev/null +++ b/tests/unit/components/confirmed-in-test.js @@ -0,0 +1,40 @@ +import { module, test } from 'qunit'; +import { setupTest } from 'ember-qunit'; +import createComponent from 'kredits-web/tests/helpers/create-component'; +// import moment from 'moment'; + +module('Unit | Component | confirmed-in', function(hooks) { + setupTest(hooks); + + test('it exists', function(assert) { + let component = createComponent('component:confirmed-in'); + assert.ok(component); + }); + + test('#confirmedInBlocks', function(assert) { + const kredits = this.owner.lookup('service:kredits'); + kredits.set('currentBlock', 419550); + let component = createComponent('component:confirmed-in'); + component.confirmedAtBlock = 420000; + + assert.equal(component.confirmedInBlocks, 450); + }) + + test('#confirmedInSeconds', function(assert) { + const kredits = this.owner.lookup('service:kredits'); + kredits.set('currentBlock', 419550); + let component = createComponent('component:confirmed-in'); + component.confirmedAtBlock = 420000; + + assert.equal(component.confirmedInSeconds, 13500); + }) + + test('#confirmedInHumanTime', function(assert) { + const kredits = this.owner.lookup('service:kredits'); + kredits.set('currentBlock', 419550); + let component = createComponent('component:confirmed-in'); + component.confirmedAtBlock = 420000; + + assert.equal(component.confirmedInHumanTime, '4 hours'); + }) +}); From 662e76979b458587bd2cd4ee8aec5e92dd2ce70b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Wed, 11 Jan 2023 14:19:03 +0800 Subject: [PATCH 04/10] Show confirmation ETA for proposed reimbursements --- app/components/confirmed-in/component.js | 10 +------- app/components/confirmed-in/template.hbs | 1 + .../reimbursement-list/template.hbs | 23 +++++++++++-------- .../components/_reimbursement-list.scss | 20 ++++++++++++++++ 4 files changed, 36 insertions(+), 18 deletions(-) create mode 100644 app/components/confirmed-in/template.hbs diff --git a/app/components/confirmed-in/component.js b/app/components/confirmed-in/component.js index e14c639..4ed1426 100644 --- a/app/components/confirmed-in/component.js +++ b/app/components/confirmed-in/component.js @@ -1,20 +1,12 @@ import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; import { inject as service } from '@ember/service'; import moment from 'moment'; export default class ConfirmedInComponent extends Component { @service kredits; - @tracked confirmedAtBlock = null; - - constructor(confirmedAtBlock) { - super(...arguments); - this.confirmedAtBlock = confirmedAtBlock; - } - get confirmedInBlocks () { - return this.confirmedAtBlock - this.kredits.currentBlock; + return this.args.confirmedAtBlock - this.kredits.currentBlock; } get confirmedInSeconds () { diff --git a/app/components/confirmed-in/template.hbs b/app/components/confirmed-in/template.hbs new file mode 100644 index 0000000..1529053 --- /dev/null +++ b/app/components/confirmed-in/template.hbs @@ -0,0 +1 @@ +Confirming in {{this.confirmedInBlocks}} blocks (~ {{this.confirmedInHumanTime}}) diff --git a/app/components/reimbursement-list/template.hbs b/app/components/reimbursement-list/template.hbs index b904207..2a3a187 100644 --- a/app/components/reimbursement-list/template.hbs +++ b/app/components/reimbursement-list/template.hbs @@ -3,12 +3,12 @@

  • - - Expenses covered by {{reimbursement.contributor.name}} - + + Expenses covered by {{reimbursement.contributor.name}} +

    @@ -30,17 +30,22 @@

    • {{/each}} - {{#if this.kredits.currentUserIsCore}} -

    +

    +

    + +

    +

    Inspect IPFS data - + {{#if this.kredits.currentUserIsCore}} + + {{/if}}

    - {{/if}} +
    {{/each}} \ No newline at end of file diff --git a/app/styles/components/_reimbursement-list.scss b/app/styles/components/_reimbursement-list.scss index dfbb5d8..556f69a 100644 --- a/app/styles/components/_reimbursement-list.scss +++ b/app/styles/components/_reimbursement-list.scss @@ -31,4 +31,24 @@ ul.reimbursement-list { } } } + + div.meta { + grid-column-start: 1; + grid-column-end: 3; + margin-top: 0.6rem; + border-top: 1px solid $item-border-color; + display: flex; + + p { + flex: 1; + padding: 1.6rem 0 1rem 0; + + &.confirmation-eta { + } + + &.actions { + text-align: right; + } + } + } } From e2a80eafd1a8b321bb6cf6472c235aa5b57a6473 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Fri, 13 Jan 2023 14:14:24 +0800 Subject: [PATCH 05/10] Remove dev logs --- app/components/confirmed-in/component.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/components/confirmed-in/component.js b/app/components/confirmed-in/component.js index 4ed1426..487419b 100644 --- a/app/components/confirmed-in/component.js +++ b/app/components/confirmed-in/component.js @@ -15,8 +15,6 @@ export default class ConfirmedInComponent extends Component { } get confirmedInHumanTime () { - console.debug(this.confirmedInBlocks); - console.debug(this.confirmedInSeconds); return moment.duration(this.confirmedInSeconds, "seconds").humanize(); } } From 89f6fa0b5c573b28e06466fb4f6bb9301682b00c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Fri, 13 Jan 2023 15:57:50 +0800 Subject: [PATCH 06/10] Use component argument in tests --- tests/unit/components/confirmed-in-test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/unit/components/confirmed-in-test.js b/tests/unit/components/confirmed-in-test.js index 7f9d796..7f1831c 100644 --- a/tests/unit/components/confirmed-in-test.js +++ b/tests/unit/components/confirmed-in-test.js @@ -15,7 +15,7 @@ module('Unit | Component | confirmed-in', function(hooks) { const kredits = this.owner.lookup('service:kredits'); kredits.set('currentBlock', 419550); let component = createComponent('component:confirmed-in'); - component.confirmedAtBlock = 420000; + component.args.confirmedAtBlock = 420000; assert.equal(component.confirmedInBlocks, 450); }) @@ -24,7 +24,7 @@ module('Unit | Component | confirmed-in', function(hooks) { const kredits = this.owner.lookup('service:kredits'); kredits.set('currentBlock', 419550); let component = createComponent('component:confirmed-in'); - component.confirmedAtBlock = 420000; + component.args.confirmedAtBlock = 420000; assert.equal(component.confirmedInSeconds, 13500); }) @@ -33,7 +33,7 @@ module('Unit | Component | confirmed-in', function(hooks) { const kredits = this.owner.lookup('service:kredits'); kredits.set('currentBlock', 419550); let component = createComponent('component:confirmed-in'); - component.confirmedAtBlock = 420000; + component.args.confirmedAtBlock = 420000; assert.equal(component.confirmedInHumanTime, '4 hours'); }) From a93be41e087c32f522ef0ffd93d871f47dfef815 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Fri, 13 Jan 2023 14:56:43 +0800 Subject: [PATCH 07/10] Add expense-list component, DRY up code, add tags --- app/components/add-reimbursement/template.hbs | 24 +++---------- app/components/expense-list/component.js | 9 +++++ app/components/expense-list/template.hbs | 27 ++++++++++++++ .../reimbursement-list/template.hbs | 19 ++-------- app/styles/components/_expense-list.scss | 36 +++++++++---------- 5 files changed, 60 insertions(+), 55 deletions(-) create mode 100644 app/components/expense-list/component.js create mode 100644 app/components/expense-list/template.hbs diff --git a/app/components/add-reimbursement/template.hbs b/app/components/add-reimbursement/template.hbs index 43235b3..145b8e3 100644 --- a/app/components/add-reimbursement/template.hbs +++ b/app/components/add-reimbursement/template.hbs @@ -44,26 +44,10 @@

    Expense items

    {{#if this.expenses}} -
      - {{#each this.expenses as |expense|}} -
    • -
      -

      - {{expense.date}}: - {{expense.title}} -

      -

      {{expense.description}}

      -
      -
      - {{fmt-fiat-currency expense.amount expense.currency}} -
      -
      - -
      -
      • - {{/each}} -
    + +

    diff --git a/app/components/expense-list/component.js b/app/components/expense-list/component.js new file mode 100644 index 0000000..640d820 --- /dev/null +++ b/app/components/expense-list/component.js @@ -0,0 +1,9 @@ +import Component from '@glimmer/component'; + +export default class ExpenseListComponent extends Component { + + get showDeleteButton () { + return !!this.args.deletable; + } + +} diff --git a/app/components/expense-list/template.hbs b/app/components/expense-list/template.hbs new file mode 100644 index 0000000..dcfc5ee --- /dev/null +++ b/app/components/expense-list/template.hbs @@ -0,0 +1,27 @@ +

      + {{#each @expenses as |expense|}} +
    • +

      + {{expense.date}}: + {{expense.title}} +

      +
      + {{fmt-fiat-currency expense.amount expense.currency}} +
      +

      + {{expense.description}} +

      +

      + {{#each expense.tags as |tag|}} + + {{/each}} +

      + {{#if this.showDeleteButton}} +
      + +
      + {{/if}} +
      • + {{/each}} +
    diff --git a/app/components/reimbursement-list/template.hbs b/app/components/reimbursement-list/template.hbs index 2a3a187..50dcedf 100644 --- a/app/components/reimbursement-list/template.hbs +++ b/app/components/reimbursement-list/template.hbs @@ -14,22 +14,9 @@ {{sats-to-btc reimbursement.amount}} BTC

    -
      - {{#each reimbursement.expenses as |expense|}} -
    • -
      -

      - {{expense.date}}: - {{expense.title}} -

      -

      {{expense.description}}

      -
      -
      - {{fmt-fiat-currency expense.amount expense.currency}} -
      -
      • - {{/each}} -
    + + +

    diff --git a/app/styles/components/_expense-list.scss b/app/styles/components/_expense-list.scss index b369f5f..b5a9650 100644 --- a/app/styles/components/_expense-list.scss +++ b/app/styles/components/_expense-list.scss @@ -17,32 +17,30 @@ ul.expense-list { } } - .description { - grid-row-start: 1; - grid-row-end: 3; - } - - .amount { - justify-self: end; - // font-weight: normal; - } - - .actions { - justify-self: end; - } - h4 { font-size: 1.2rem; font-weight: normal; line-height: 2rem; } - p { - line-height: 2rem; + .amount { + justify-self: end; + } - &.description { - font-size: 1rem; - opacity: 0.7; + .description { + font-size: 1rem; + opacity: 0.7; + grid-column-start: span 2; + } + + .tags { + button { + margin-left: 0; } } + + .actions { + justify-self: end; + } + } From 138cec0389ad0783e3a57ad1b42ec2ac9a0b8405 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Fri, 13 Jan 2023 15:34:43 +0800 Subject: [PATCH 08/10] Localize date in expense list --- app/components/expense-list/template.hbs | 2 +- app/helpers/fmt-date-localized.js | 8 ++++++++ app/utils/get-locale.js | 5 +++++ 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 app/helpers/fmt-date-localized.js create mode 100644 app/utils/get-locale.js diff --git a/app/components/expense-list/template.hbs b/app/components/expense-list/template.hbs index dcfc5ee..64b033c 100644 --- a/app/components/expense-list/template.hbs +++ b/app/components/expense-list/template.hbs @@ -2,7 +2,7 @@ {{#each @expenses as |expense|}}

  • - {{expense.date}}: + {{fmt-date-localized expense.date}}: {{expense.title}}

    diff --git a/app/helpers/fmt-date-localized.js b/app/helpers/fmt-date-localized.js new file mode 100644 index 0000000..a27bb28 --- /dev/null +++ b/app/helpers/fmt-date-localized.js @@ -0,0 +1,8 @@ +import { helper } from '@ember/component/helper'; +import getLocale from 'kredits-web/utils/get-locale'; + +export default helper(function(dateStr) { + const date = new Date(dateStr); + const locale = getLocale(); + return new Intl.DateTimeFormat(locale).format(date); +}); diff --git a/app/utils/get-locale.js b/app/utils/get-locale.js new file mode 100644 index 0000000..f80eb77 --- /dev/null +++ b/app/utils/get-locale.js @@ -0,0 +1,5 @@ +export default function() { + return (navigator.languages && navigator.languages.length) ? + navigator.languages[0] : + navigator.language; +} From 1095bf021825380cfb9b880d438f3e73baeaa473 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Fri, 13 Jan 2023 15:35:22 +0800 Subject: [PATCH 09/10] Add more button colors, icon style for small buttons Plus tag icon for the tag buttons --- app/components/expense-list/template.hbs | 4 +- app/styles/_buttons.scss | 47 +++++++++++++++++------- app/templates/components/icon-tag.hbs | 1 + 3 files changed, 38 insertions(+), 14 deletions(-) create mode 100644 app/templates/components/icon-tag.hbs diff --git a/app/components/expense-list/template.hbs b/app/components/expense-list/template.hbs index 64b033c..3633663 100644 --- a/app/components/expense-list/template.hbs +++ b/app/components/expense-list/template.hbs @@ -13,7 +13,9 @@

    {{#each expense.tags as |tag|}} - + {{/each}}

    {{#if this.showDeleteButton}} diff --git a/app/styles/_buttons.scss b/app/styles/_buttons.scss index eb0c2ff..db5a8bc 100644 --- a/app/styles/_buttons.scss +++ b/app/styles/_buttons.scss @@ -31,32 +31,53 @@ button, input[type=submit], .button { &.small { font-size: 0.86rem; padding: 0.2rem 0.8rem; + + svg { + width: 1em; + height: 1em; + vertical-align: middle; + margin-right: 0.4rem; + } } &.danger:not(:disabled) { color: $red; background-color: rgba(40, 21, 21, 0.6); border-color: rgba(40, 21, 21, 1); - - &:hover { - background-color: rgba(40, 21, 21, 0.8); - } - &:focus, &:active, &.active { - border-color: $red; - } + &:hover { background-color: rgba(40, 21, 21, 0.8); } + &:focus, &:active, &.active { border-color: $red; } } &.green:not(:disabled) { color: $green; background-color: rgba(21, 40, 21, 0.6); border-color: rgba(21, 40, 21, 1); + &:hover { background-color: rgba(21, 40, 21, 0.8); } + &:focus, &:active, &.active { border-color: $green; } + } - &:hover { - background-color: rgba(21, 40, 21, 0.8); - } - &:focus, &:active, &.active { - border-color: $green; - } + &.pink:not(:disabled) { + color: $pink; + background-color: rgba(40, 21, 40, 0.6); + border-color: rgba(40, 21, 40, 1); + &:hover { background-color: rgba(40, 21, 40, 0.8); } + &:focus, &:active, &.active { border-color: $pink; } + } + + &.purple:not(:disabled) { + color: $purple; + background-color: rgba(24, 21, 40, 0.6); + border-color: rgba(24, 21, 40, 1); + &:hover { background-color: rgba(24, 21, 40, 0.8); } + &:focus, &:active, &.active { border-color: $purple; } + } + + &.yellow:not(:disabled) { + color: $yellow; + background-color: rgba(40, 40, 21, 0.6); + border-color: rgba(40, 40, 21, 1); + &:hover { background-color: rgba(40, 40, 21, 0.8); } + &:focus, &:active, &.active { border-color: $yellow; } } &.icon { diff --git a/app/templates/components/icon-tag.hbs b/app/templates/components/icon-tag.hbs new file mode 100644 index 0000000..7219b15 --- /dev/null +++ b/app/templates/components/icon-tag.hbs @@ -0,0 +1 @@ + \ No newline at end of file From 7cd023a21bb03341ea0e7e8b506de30e8d14f6fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= <842+raucao@users.noreply.github.com> Date: Sun, 15 Jan 2023 12:34:40 +0800 Subject: [PATCH 10/10] Update app/components/add-reimbursement/template.hbs Co-authored-by: Manuel Wiedenmann --- app/components/add-reimbursement/template.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/add-reimbursement/template.hbs b/app/components/add-reimbursement/template.hbs index 145b8e3..0e6a74c 100644 --- a/app/components/add-reimbursement/template.hbs +++ b/app/components/add-reimbursement/template.hbs @@ -46,7 +46,7 @@ {{#if this.expenses}} + @deletable={{true}} />