Enhance claim component with preset amount buttons and update max claim limit to 0.1 BTC

miladsoft · miladsoft · commit d7ad0765726c · 2024-12-10T22:12:49.000+04:00
diff --git a/faucet/src/app/components/claim.component.ts b/faucet/src/app/components/claim.component.ts
@@ -17,7 +17,7 @@ export interface ClaimResponse {
   template: `
     <div class="claim-container">
       <h2 class="section-title">Claim Your Bitcoin</h2>
-    
+
       <form (ngSubmit)="submitClaim()" #claimForm="ngForm" class="claim-form">
         <!-- Bitcoin Address Input -->
         <div class="form-group">
@@ -39,10 +39,17 @@ export interface ClaimResponse {
             Bitcoin address is required.
           </div>
         </div>
-    
+
+        <!-- Preset Amount Buttons -->
+        <div class="preset-buttons">
+          <button type="button" (click)="setAmount(0.001)" class="preset-button">0.001 BTC</button>
+          <button type="button" (click)="setAmount(0.01)" class="preset-button">0.01 BTC</button>
+          <button type="button" (click)="setAmount(0.1)" class="preset-button">0.1 BTC</button>
+        </div>
+
         <!-- Amount Input -->
         <div class="form-group">
-          <label for="amount">Amount (max: 0.001 BTC)</label>
+          <label for="amount">Amount (max: 0.1 BTC)</label>
           <input
             type="number"
             id="amount"
@@ -51,26 +58,26 @@ export interface ClaimResponse {
             #amountInput="ngModel"
             (blur)="amountTouched.set(true)"
             [class.invalid]="amountInput.invalid && shouldShowError(amountTouched())"
-            placeholder="Enter amount (e.g., 0.001)"
+            placeholder="Enter amount (e.g., 0.1)"
             min="0.00001"
-            max="0.001"
+            max="0.1"
             step="0.00001"
             required
             class="form-control"
             [disabled]="isSubmitting()"
           />
           <div *ngIf="amountInput.invalid && shouldShowError(amountTouched())" class="error">
-            Please enter a valid amount between 0.00001 and 0.001 BTC.
+            Please enter a valid amount between 0.00001 and 0.1 BTC.
           </div>
         </div>
-    
+
         <!-- Submit Button -->
         <button type="submit" [disabled]="isSubmitting() || claimForm.invalid" class="submit-button">
           <ng-container *ngIf="isSubmitting(); else submitText">Submitting...</ng-container>
           <ng-template #submitText>Claim Bitcoin</ng-template>
         </button>
       </form>
-    
+
       <!-- Response Message -->
       <div *ngIf="submissionStatus()" class="response-message" [ngClass]="submissionStatus()?.type">
         <div *ngIf="submissionStatus()?.type === 'success'">
@@ -81,6 +88,14 @@ export interface ClaimResponse {
           <p>{{ submissionStatus()?.message }}</p>
         </div>
       </div>
+
+      <!-- Description Box -->
+      <div class="description-box">
+        <h3>About This Faucet</h3>
+        <p>
+          This faucet is designed to provide small amounts of Testnet Bitcoins to users for their experiments. The maximum claim per transaction is <strong>0.1 BTC</strong>. Abuse of this service may result in restrictions to ensure fair usage.
+        </p>
+      </div>
     </div>
   `,
   styles: [`
@@ -92,49 +107,49 @@ export interface ClaimResponse {
       margin: 2rem auto;
       box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
     }
-    
+
     .section-title {
       text-align: center;
       color: #086c81;
       margin-bottom: 1.5rem;
       font-size: 1.5rem;
       font-weight: bold;
     }
-    
+
     .claim-form {
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
-    
+
       .form-group {
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
-      }
-    
+       }
+
       label {
         font-weight: bold;
         color: #022229;
       }
-    
+
       .form-control {
         padding: 0.75rem;
         border: 1px solid #cbdde1;
         border-radius: 8px;
         font-size: 1rem;
       }
-    
+
       .form-control:focus {
         outline: none;
         border-color: #086c81;
         box-shadow: 0 0 4px #086c81;
       }
-    
+
       .error {
         font-size: 0.875rem;
         color: #ff0000;
       }
-    
+
       .submit-button {
         background-color: #086c81;
         color: #ffffff;
@@ -144,17 +159,130 @@ export interface ClaimResponse {
         font-size: 1rem;
         cursor: pointer;
         transition: background-color 0.3s ease;
-    
+
         &:disabled {
           background-color: #cbdde1;
           cursor: not-allowed;
         }
-    
+
         &:hover:not(:disabled) {
           background-color: #0a758c;
         }
       }
     }
+
+    .preset-buttons {
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+    }
+
+    .preset-button {
+      background-color: #086c81;
+      color: #ffffff;
+      padding: 0.5rem 1rem;
+      border: none;
+      border-radius: 8px;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+    }
+
+    .preset-button:hover {
+      background-color: #0a758c;
+    }
+
+    .response-message {
+      margin-top: 20px;
+      padding: 20px;
+      border-radius: 8px;
+      font-size: 1rem;
+      font-weight: bold;
+      text-align: center;
+      word-wrap: break-word; /* Ensure text wraps within the container */
+    }
+
+    .response-message.success {
+      background-color: #d4edda;
+      color: #155724;
+      border: 1px solid #c3e6cb;
+    }
+
+    .response-message.error {
+      background-color: #f8d7da;
+      color: #721c24;
+      border: 1px solid #f5c6cb;
+    }
+
+    .description-box {
+      margin-top: 2rem;
+      padding: 1rem;
+      background-color: #ffffff;
+      border: 1px solid #cbdde1;
+      border-radius: 8px;
+      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    @media (max-width: 768px) {
+      .claim-container {
+        padding: 1rem;
+      }
+
+      .claim-form {
+        gap: 1rem;
+        padding: 0 0.5rem; /* Adjust padding for smaller screens */
+      }
+
+      .form-group {
+        padding: 0 0.5rem; /* Ensure equal padding on both sides for smaller screens */
+      }
+
+      .preset-buttons {
+        flex-direction: column;
+        gap: 0.5rem;
+      }
+
+      .response-message {
+        font-size: 0.875rem;
+        padding: 15px;
+        word-wrap: break-word; /* Ensure text wraps within the container */
+      }
+
+      .description-box {
+        padding: 0.75rem;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .claim-container {
+        padding: 1rem;
+        margin: 1rem;
+      }
+
+      .claim-form {
+        gap: 0.75rem;
+        padding: 0 0.25rem; /* Adjust padding for smaller screens */
+      }
+
+      .form-group {
+        padding: 0 0.25rem; /* Ensure equal padding on both sides for smaller screens */
+      }
+
+      .preset-buttons {
+        flex-direction: column;
+        gap: 0.5rem;
+      }
+
+      .response-message {
+        font-size: 0.75rem;
+        padding: 10px;
+        word-wrap: break-word; /* Ensure text wraps within the container */
+      }
+
+      .description-box {
+        padding: 0.5rem;
+      }
+    }
   `]
 })
 export class ClaimComponent {
@@ -173,7 +301,7 @@ export class ClaimComponent {
 
   // Validation Signals
   isAddressValid: Signal<boolean> = computed(() => !!this.address());
-  isAmountValid: Signal<boolean> = computed(() => this.amount() !== null && this.amount()! > 0 && this.amount()! <= 0.001);
+  isAmountValid: Signal<boolean> = computed(() => this.amount() !== null && this.amount()! > 0 && this.amount()! <= 0.1);
 
   constructor(private apiService: ApiService) {}
 
@@ -228,4 +356,8 @@ export class ClaimComponent {
     this.amountTouched.set(false);
     this.formSubmitted.set(false);
   }
+
+  setAmount(amount: number): void {
+    this.amount.set(amount);
+  }
 }
diff --git a/faucet/src/app/components/home.component.ts b/faucet/src/app/components/home.component.ts
@@ -29,12 +29,12 @@ import { RouterModule } from '@angular/router';
           <article class="step" #stepElement>
             <div class="step-icon" aria-hidden="true">2</div>
             <h3>Enter the Amount</h3>
-            <p>Specify the amount (less than 50 BTC test).</p>
+            <p>Specify the amount (less than 0.1 BTC test).</p>
           </article>
           <article class="step" #stepElement>
             <div class="step-icon" aria-hidden="true">3</div>
             <h3>Claim Your Bitcoin</h3>
-            <p>Submit your request and get your free Bitcoin instantly! (1 request per IP per 24 hours)</p>
+            <p>Submit your request and get your free Bitcoin instantly!</p>
           </article>
         </div>
       </section>
diff --git a/faucet/src/app/components/layout.component.ts b/faucet/src/app/components/layout.component.ts
@@ -22,7 +22,7 @@ import { ScrollService } from '../services/scroll.service';
     </header>
 
     <!-- Main Content -->
-    <div class="content">
+    <div class="main-content">
       <router-outlet></router-outlet>
     </div>
 
diff --git a/faucet/src/styles.scss b/faucet/src/styles.scss
@@ -5,6 +5,7 @@ body, html {
   font-family: 'Inter', sans-serif;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   overscroll-behavior: none;
   -webkit-overflow-scrolling: auto;
 }
@@ -73,6 +74,7 @@ nav {
   text-align: center;
   padding: 0.3rem 0;
   width: 100%;
+  margin-top: auto;
 }
 
 .footer a {
@@ -264,7 +266,7 @@ nav {
     grid-template-columns: 1fr;
     gap: 1.5rem;
   }
-  
+
   .step {
     max-width: 400px;
     margin: 0 auto;
@@ -310,7 +312,6 @@ nav {
 }
 
 .form-control {
-  width: 100%;
   padding: 10px;
   border: 1px solid #ced4da;
   border-radius: 5px;
