From 1d24a3656f5ba45939d99c8a1f8a200e78651d28 Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 16 Sep 2019 11:21:47 +0200 Subject: [PATCH 1/5] Account: only display identicon for Nimiq Adresses --- src/components/Account.vue | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/Account.vue b/src/components/Account.vue index 665becd2..95a76c19 100644 --- a/src/components/Account.vue +++ b/src/components/Account.vue @@ -5,10 +5,10 @@
- + -
{{ label }}
-
+
{{ label }}
+
@@ -28,9 +28,9 @@ @Component({components: {Amount, Identicon, LabelInput}}) export default class Account extends Vue { - @Prop(String) public address!: string; - @Prop(String) public image?: string; @Prop(String) public label!: string; + @Prop(String) public address?: string; + @Prop(String) public image?: string; @Prop(String) public placeholder?: string; @Prop(String) public walletLabel?: string; @Prop(Number) public balance?: number; @@ -76,7 +76,11 @@ (document.body.lastElementChild as SVGElement).style.display = 'block'; } - private get _isLabelAddress() { + private get _isNimiqAddress() { + return ValidationUtils.isValidAddress(this.address); + } + + private get _isLabelNimiqAddress() { return ValidationUtils.isValidAddress(this.label); } } From baf058630a0bac2978e049aa27543bb254cb418b Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 16 Sep 2019 14:28:39 +0200 Subject: [PATCH 2/5] PaymentInfoLine: expand api for new checkout - support arbitrary crypto currencies - support fiat currencies - add Timer - small positioning adaptions and style fixes Co-authored-by: Sebastian --- src/components/PaymentInfoLine.vue | 102 +++++++++++++++++++++++------ src/stories/index.stories.js | 27 ++++++-- 2 files changed, 104 insertions(+), 25 deletions(-) diff --git a/src/components/PaymentInfoLine.vue b/src/components/PaymentInfoLine.vue index 4ced2aad..192c1c50 100644 --- a/src/components/PaymentInfoLine.vue +++ b/src/components/PaymentInfoLine.vue @@ -1,36 +1,76 @@ @@ -135,20 +126,6 @@ export default class PaymentInfoLine extends Vue { 100% { transform: translate3D(3rem, 0, 0); } } - .description { - display: flex; - flex-direction: row; - align-items: center; - color: inherit; - text-decoration: none; - outline: none; - } - - .description:hover, - .description:focus { - text-decoration: none; - } - .account { padding: 0; width: auto !important; @@ -165,7 +142,6 @@ export default class PaymentInfoLine extends Vue { .account >>> .label { padding-left: .75rem; margin-bottom: .25rem; - transition: opacity .3s ease; font-weight: unset; opacity: 1 !important; /* Remove gradient-fade-out and use text-overflow instead */ @@ -174,43 +150,6 @@ export default class PaymentInfoLine extends Vue { text-overflow: fade; } - .info-circle-container { - position: relative; - opacity: 0.3; - margin-left: 1rem; - transition: opacity .3s ease; - } - - .info-circle-container .nq-icon { - display: block; - } - - .description:hover .account >>> .label, - .description:focus .account >>> .label { - opacity: .7; - } - - .description:hover .info-circle-container, - .description:focus .info-circle-container { - opacity: 1; - } - - .info-circle-container::after { - content: ""; - position: absolute; - left: -0.625rem; - top: -0.625rem; - right: -0.625rem; - bottom: -0.625rem; - border: 0.25rem solid rgba(5, 130, 202, 0.5); /* Based on Nimiq Light Blue */ - border-radius: 50%; - opacity: 0; - } - - .description:focus .info-circle-container::after { - opacity: 1; - } - .timer { margin: auto -.5rem auto 1rem; flex-shrink: 0; diff --git a/src/stories/index.stories.js b/src/stories/index.stories.js index 62ec0b80..b2904c10 100644 --- a/src/stories/index.stories.js +++ b/src/stories/index.stories.js @@ -718,13 +718,9 @@ storiesOf('Components', module) return { components: {PaymentInfoLine}, data: () => ({ cryptoAmount, fiatAmount, origin, address, shopLogo, startTime, expires }), - methods: { - merchantInfoClicked: action('merchant-info-clicked'), - }, template: `
+ :origin="origin" :address="address" :shopLogoUrl="shopLogo" :startTime="startTime" :expires="expires" />
`, }; }) From 5dddb7ddccc24096cf81fb11316b573c9bfe4d2f Mon Sep 17 00:00:00 2001 From: Daniel Date: Sat, 12 Oct 2019 23:45:41 +0200 Subject: [PATCH 4/5] PaymentInfoLine: add inverse theme --- src/components/PaymentInfoLine.vue | 37 ++++++++++++++++++++++++++---- src/stories/index.stories.js | 8 ++++--- tsconfig.json | 2 +- 3 files changed, 38 insertions(+), 9 deletions(-) diff --git a/src/components/PaymentInfoLine.vue b/src/components/PaymentInfoLine.vue index ae102f11..a66d4716 100644 --- a/src/components/PaymentInfoLine.vue +++ b/src/components/PaymentInfoLine.vue @@ -1,14 +1,14 @@ @@ -48,7 +48,7 @@ function amountInfoValidator(value: any) { } @Component({components: {Account, Timer, Amount, ArrowRightSmallIcon}}) -export default class PaymentInfoLine extends Vue { +class PaymentInfoLine extends Vue { private get originDomain() { return this.origin.split('://')[1]; } @@ -60,6 +60,12 @@ export default class PaymentInfoLine extends Vue { @Prop(String) public shopLogoUrl?: string; @Prop(Number) public startTime?: number; @Prop(Number) public endTime?: number; + @Prop({ + type: String, + validator: (value: any) => Object.values(PaymentInfoLine.Themes).includes(value), + default: 'normal', + }) + public theme!: string; public async setTime(time: number) { await this.$nextTick(); // let vue update in case the timer was just added @@ -67,6 +73,15 @@ export default class PaymentInfoLine extends Vue { (this.$refs.timer as Timer).synchronize(time); } } + +namespace PaymentInfoLine { // tslint:disable-line no-namespace + export enum Themes { + NORMAL = 'normal', + INVERSE = 'inverse', + } +} + +export default PaymentInfoLine; diff --git a/src/stories/index.stories.js b/src/stories/index.stories.js index b2904c10..d8b83465 100644 --- a/src/stories/index.stories.js +++ b/src/stories/index.stories.js @@ -697,6 +697,7 @@ storiesOf('Components', module) }; }) .add('PaymentInfoLine', () => { + const theme = select('theme', Object.values(PaymentInfoLine.Themes), PaymentInfoLine.Themes.NORMAL); const cryptoAmount = { amount: number('cryptoAmount.amount', 199862), currency: text('cryptoAmount.currency', 'NIM'), @@ -717,10 +718,11 @@ storiesOf('Components', module) return { components: {PaymentInfoLine}, - data: () => ({ cryptoAmount, fiatAmount, origin, address, shopLogo, startTime, expires }), - template: `
+ data: () => ({ cryptoAmount, fiatAmount, origin, address, shopLogo, startTime, expires, theme }), + template: `
+ :origin="origin" :address="address" :shopLogoUrl="shopLogo" :startTime="startTime" :expires="expires" + :theme="theme"/>
`, }; }) diff --git a/tsconfig.json b/tsconfig.json index 9b534c86..ac68d05f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,7 +21,7 @@ ] }, "lib": [ - "es2015", + "es2017", "dom", "dom.iterable", "scripthost" From c717ebc3e08bb83dc26741d824eb3865d73e123a Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 15 Nov 2019 17:04:54 -0600 Subject: [PATCH 5/5] PaymentInfoLine: use FiatAmount component --- src/components/PaymentInfoLine.vue | 28 +++++++++++++++++++--------- src/stories/index.stories.js | 1 - 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/src/components/PaymentInfoLine.vue b/src/components/PaymentInfoLine.vue index a66d4716..2a52a3eb 100644 --- a/src/components/PaymentInfoLine.vue +++ b/src/components/PaymentInfoLine.vue @@ -8,11 +8,9 @@ :minDecimals="0" :maxDecimals="Math.min(4, cryptoAmount.decimals)" /> -
@@ -31,15 +29,21 @@ import { Component, Prop, Vue } from 'vue-property-decorator'; import Account from './Account.vue'; import Timer from './Timer.vue'; import Amount from './Amount.vue'; +import FiatAmount from './FiatAmount.vue'; import { ArrowRightSmallIcon } from './Icons'; -interface AmountInfo { +interface CryptoAmountInfo { amount: number | bigint | BigInteger; // in the smallest unit currency: string; decimals: number; } -function amountInfoValidator(value: any) { +interface FiatAmountInfo { + amount: number; // in the base unit, e.g. Euro + currency: string; +} + +function cryptoAmountInfoValidator(value: any) { return 'amount' in value && 'currency' in value && 'decimals' in value && (typeof value.amount === 'number' || typeof value.amount === 'bigint' || (value.amount && value.amount.constructor && value.amount.constructor.name.endsWith('Integer'))) @@ -47,15 +51,21 @@ function amountInfoValidator(value: any) { && typeof value.decimals === 'number' && Number.isInteger(value.decimals); } -@Component({components: {Account, Timer, Amount, ArrowRightSmallIcon}}) +function fiatAmountInfoValidator(value: any) { + return 'amount' in value && 'currency' in value + && typeof value.amount === 'number' + && typeof value.currency === 'string'; +} + +@Component({components: {Account, Timer, Amount, FiatAmount, ArrowRightSmallIcon}}) class PaymentInfoLine extends Vue { private get originDomain() { return this.origin.split('://')[1]; } - @Prop({type: Object, validator: amountInfoValidator}) public cryptoAmount!: AmountInfo; - @Prop({type: Object, validator: amountInfoValidator}) public fiatAmount?: AmountInfo; - @Prop(String) public origin!: string; + @Prop({type: Object, required: true, validator: cryptoAmountInfoValidator}) public cryptoAmount!: CryptoAmountInfo; + @Prop({type: Object, validator: fiatAmountInfoValidator}) public fiatAmount?: FiatAmountInfo; + @Prop({type: String, required: true}) public origin!: string; @Prop(String) public address?: string; @Prop(String) public shopLogoUrl?: string; @Prop(Number) public startTime?: number; diff --git a/src/stories/index.stories.js b/src/stories/index.stories.js index d8b83465..67e77ae5 100644 --- a/src/stories/index.stories.js +++ b/src/stories/index.stories.js @@ -706,7 +706,6 @@ storiesOf('Components', module) let fiatAmount = { amount: number('fiatAmount.amount (-1 for unset)', -1), currency: text('fiatAmount.currency', 'EUR'), - decimals: number('fiatAmount.decimals', 2), }; if (fiatAmount.amount < 0) fiatAmount = null; const origin = text('origin', 'https://shop.nimiq.com');