From 70ac250bbe8f995267dc5c18f5af4d3e3b97b32d Mon Sep 17 00:00:00 2001
From: Felix Brucker <felix@felixbrucker.com>
Date: Sat, 30 Mar 2024 18:17:43 +0700
Subject: [PATCH] Add explainer on payout multiples of and share key, closes
 #21

---
 .../integration-settings.component.html            | 10 +++++++++-
 .../integration-settings.component.ts              |  4 +++-
 .../update-payout-options.component.html           | 14 +++++++++++---
 .../update-payout-options.component.ts             |  4 +++-
 .../update-notification-settings.component.html    |  4 ++--
 .../update-notification-settings.component.scss    |  6 ------
 6 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/app/integration-settings/integration-settings.component.html b/src/app/integration-settings/integration-settings.component.html
index ac4fcfc..8559c49 100644
--- a/src/app/integration-settings/integration-settings.component.html
+++ b/src/app/integration-settings/integration-settings.component.html
@@ -1,5 +1,13 @@
 <div>
-  <h6 class="settings-modal-text"><a href="https://dashboard.chia.foxypool.io" target="_blank">Chia-Dashboard</a> Share Key</h6>
+  <h6 class="settings-modal-text">
+    <div class="d-flex gap-2">
+      <a href="https://dashboard.chia.foxypool.io" target="_blank">Chia-Dashboard</a> Share Key
+      <fa-icon
+        [icon]="faInfoCircle"
+        ngbTooltip="To obtain the share key, share your dashboard via the profile page and copy the last part of the url, it will look like this: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx."
+      ></fa-icon>
+    </div>
+  </h6>
   <div class="row">
     <div class="col-12">
       <form [formGroup]="form">
diff --git a/src/app/integration-settings/integration-settings.component.ts b/src/app/integration-settings/integration-settings.component.ts
index 7803b8f..db1842a 100644
--- a/src/app/integration-settings/integration-settings.component.ts
+++ b/src/app/integration-settings/integration-settings.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core'
 import {AccountService} from '../account.service'
-import {faCircleNotch} from '@fortawesome/free-solid-svg-icons'
+import {faCircleNotch, faInfoCircle} from '@fortawesome/free-solid-svg-icons'
 import {ToastService} from '../toast.service'
 import {ChiaDashboardApi} from '../integrations/chia-dashboard-api/api'
 import {AsyncValidatorFn, FormBuilder} from '@angular/forms'
@@ -96,4 +96,6 @@ export class IntegrationSettingsComponent {
       this.isValidatingShareKey = false
     }
   }
+
+  protected readonly faInfoCircle = faInfoCircle
 }
diff --git a/src/app/update-minimum-payout/update-payout-options.component.html b/src/app/update-minimum-payout/update-payout-options.component.html
index 468e861..011a4c0 100644
--- a/src/app/update-minimum-payout/update-payout-options.component.html
+++ b/src/app/update-minimum-payout/update-payout-options.component.html
@@ -2,7 +2,7 @@
   <h6 class="settings-modal-text">Configure a minimum payout amount</h6>
   <div class="row">
     <div class="col-12">
-      <div class="input-group">
+      <div class="input-group has-validation">
         <input
           type="number"
           class="form-control"
@@ -22,10 +22,18 @@ <h6 class="settings-modal-text">Configure a minimum payout amount</h6>
   </div>
 </div>
 <div class="mt-2">
-  <h6 class="settings-modal-text">Payout multiples of</h6>
+  <h6 class="settings-modal-text">
+    <div class="d-flex gap-2">
+      <span>Payout multiples of</span>
+      <fa-icon
+        [icon]="faInfoCircle"
+        ngbTooltip="Only payout multiples of the supplied amount. For example with an input of 0.5 only exactly 0.5, 1, 1.5 etc are paid out, the remainder is kept in the pending balance till the next payout."
+      ></fa-icon>
+    </div>
+  </h6>
   <div class="row">
     <div class="col-12">
-      <div class="input-group">
+      <div class="input-group has-validation">
         <input
           type="number"
           class="form-control"
diff --git a/src/app/update-minimum-payout/update-payout-options.component.ts b/src/app/update-minimum-payout/update-payout-options.component.ts
index 6cf0cd3..7b70f11 100644
--- a/src/app/update-minimum-payout/update-payout-options.component.ts
+++ b/src/app/update-minimum-payout/update-payout-options.component.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core'
-import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+import {faCircleNotch, faInfoCircle} from '@fortawesome/free-solid-svg-icons'
 import {BigNumber} from 'bignumber.js'
 import {AccountService} from '../account.service'
 import {SnippetService} from '../snippet.service'
@@ -106,4 +106,6 @@ export class UpdatePayoutOptionsComponent {
 
     return this.isNewMinimumPayout || this.isNewPayoutMultiplesOf
   }
+
+  protected readonly faInfoCircle = faInfoCircle
 }
diff --git a/src/app/update-notification-settings/update-notification-settings.component.html b/src/app/update-notification-settings/update-notification-settings.component.html
index b6865ec..b0a11aa 100644
--- a/src/app/update-notification-settings/update-notification-settings.component.html
+++ b/src/app/update-notification-settings/update-notification-settings.component.html
@@ -10,7 +10,7 @@ <h5 class="settings-modal-text">Notification settings</h5>
           </label>
         </div>
       </label>
-      <div class="input-group">
+      <div class="input-group has-validation">
         <input
           type="number"
           class="form-control"
@@ -44,7 +44,7 @@ <h5 class="settings-modal-text">Notification settings</h5>
           </label>
         </div>
       </label>
-      <div class="input-group">
+      <div class="input-group has-validation">
         <input
           type="number"
           class="form-control"
diff --git a/src/app/update-notification-settings/update-notification-settings.component.scss b/src/app/update-notification-settings/update-notification-settings.component.scss
index ff11896..e5a6d80 100644
--- a/src/app/update-notification-settings/update-notification-settings.component.scss
+++ b/src/app/update-notification-settings/update-notification-settings.component.scss
@@ -6,12 +6,6 @@ input::-webkit-inner-spin-button {
 input[type=number] {
   -moz-appearance: textfield;
 }
-.input-group-text {
-  border: 1px solid var(--settings-input-field-border-color);
-}
-.form-control {
-  border: 1px solid var(--settings-input-field-border-color);
-}
 .custom-select {
   border: 1px solid var(--settings-input-field-border-color);
   border-top-left-radius: 0;