d144d4b Change input from number to string — radicle-explorer

modified public/index.css

@@ -247,10 +247,10 @@ a.address {

 	border-bottom-color: transparent;
 }
 input[type="text"], input[type="number"], button {
 input[type="text"], button {
 	line-height: 1.6;
 }
 input[type="text"], input[type="number"] {
 input[type="text"] {
 	outline: none;
 	border: none;
 	font-size: 1rem;

@@ -261,18 +261,13 @@ input[type="text"], input[type="number"] {

 	padding: 1rem 1.5rem;
 	margin: 1rem;
 }
 input[type="text"]::placeholder, input[type="number"]::placeholder {
 input[type="text"]::placeholder {
 	color: var(--color-secondary);
 	opacity: 1 !important;
 }
 input[type="text"].small, input[type="number"].small {
 input[type="text"].small {
 	font-size: 0.875rem;
 }
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 input.wide {
 	width: 44ch;
 }

modified src/base/faucet/Index.svelte

@@ -1,32 +1,34 @@

 <script lang="ts">
   import type { Config } from "@app/config";
   import { BigNumber } from "@ethersproject/bignumber";
   import { formatEther, parseUnits } from "@ethersproject/units";
   import type { ethers } from "ethers";
   import type { BigNumber } from "@ethersproject/bignumber";
   import { toWei } from "@app/utils";
   import { formatEther } from "@ethersproject/units";
   import { onMount } from "svelte";
   import { navigate } from "svelte-routing";
   import { getMaxWithdrawAmount, lastWithdrawalByUser, calculateTimeLock } from "./lib";
   export let config: Config;
   let amount = 0;
   let amount: string;
   let maxWithdrawAmount: BigNumber;
   let lastWithdrawal: BigNumber;
   let error: string | undefined;
   async function withdraw() {
     const [state, message] = await isAbleToWithdraw(amountBN);
     const [state, message] = await isAbleToWithdraw(amount);
     if (state === true) navigate("/faucet/withdraw", { state: { amount } });
     else error = message;
   }
   async function isAbleToWithdraw(amount: ethers.BigNumber): Promise<[boolean, string?]> {
     if (amount.isZero()) { return [false, "Not able to withdraw zero tokens"]; }
     if (parseUnits(amountBN.toString()).gt(maxWithdrawAmount)) return [false, `Reduce amount, max withdrawal is ${formatEther(maxWithdrawAmount)}`];
   async function isAbleToWithdraw(amount: string): Promise<[boolean, string?]> {
     if (!amount || amount === "0") { return [false, "Not able to withdraw zero tokens"]; }
     if (toWei(amount).gt(maxWithdrawAmount)) return [false, `Reduce amount, max withdrawal is ${formatEther(maxWithdrawAmount)}`];
     let currentTime = new Date().getTime();
     let timelock = await calculateTimeLock(amountBN, config);
     let nextAvailableWithdraw = lastWithdrawal.add(timelock).mul(Math.pow(10,3));
     if (nextAvailableWithdraw.gt(currentTime)) return [false, `Not ready to withdraw, return after ${new Date(nextAvailableWithdraw.toNumber()).toUTCString()}`];
     let timelock = await calculateTimeLock(amount, config);
     // Converting a 10 digit to 13 digit timestamp by multiplying by 1000
     // since JS doesn't display a correct Date string when passing a 10 digit timestamp.
     let nextAvailableWithdraw = lastWithdrawal.add(timelock).mul(1000);
     if (nextAvailableWithdraw.gt(currentTime)) return [false, `Not ready to withdraw, return after ${new Date(nextAvailableWithdraw.toNumber()).toLocaleString('en-GB')}`];
     return [true];
   }

@@ -35,8 +37,6 @@

     maxWithdrawAmount = await getMaxWithdrawAmount(config);
     lastWithdrawal = await lastWithdrawalByUser(config);
   });
   $: amountBN = amount ? BigNumber.from(amount) : BigNumber.from(0);
 </script>
 <style>

@@ -54,7 +54,7 @@

     margin: 1rem 1.5rem 0rem;
     color: var(--color-secondary);
   }
   input[type="number"] {
   input[type="text"] {
     margin: 0;
     margin-right: 1.5rem;
   }

@@ -101,7 +101,7 @@

       <div class="input-main">
         <div class="name">
           <input
             type="number"
             type="text"
             placeholder="Set amount to withdraw"
             bind:value={amount}
             on:input={() => error = ""}

modified src/base/faucet/Withdraw.svelte

@@ -12,6 +12,7 @@

   export let config: Config;
   let error: Error;
   let amount: string = window.history.state.amount;
   let state: State = {
     status: Status.Failed,
     error: "Error withdrawing, something happened.",

@@ -23,7 +24,7 @@

   onMount(async () => {
     try {
       state.status = Status.Signing;
       const tx = await withdraw(window.history.state.amount, config);
       const tx = await withdraw(amount, config);
       state.status = Status.Pending;
       await tx.wait();
       state.status = Status.Success;

@@ -70,7 +71,7 @@

     <span slot="body" class="loader">
       {#if state.status === Status.Success}
         The amount of {window.history.state.amount.toString()} RAD tokens has been successfully transfered to
         The amount of {amount} RAD tokens has been successfully transfered to
         <span class="highlight">{requester}</span>
       {:else}
         <Loading small center />

modified src/base/faucet/lib.ts

@@ -3,9 +3,9 @@ import * as ethers from 'ethers';

 import type { Config } from '@app/config';
 import { assert } from '@app/error';
 import type { TransactionResponse } from '@ethersproject/providers';
 import { parseUnits } from '@ethersproject/units';
 import { toWei } from '@app/utils';
 export async function withdraw(amount: number, config: Config): Promise<TransactionResponse> {
 export async function withdraw(amount: string, config: Config): Promise<TransactionResponse> {
   assert(config.signer);
   const faucet = new ethers.Contract(

@@ -14,7 +14,7 @@ export async function withdraw(amount: number, config: Config): Promise<Transact

     config.signer
   );
   return faucet.withdraw(config.radToken.address, ethers.utils.parseUnits(amount.toString()));
   return faucet.withdraw(config.radToken.address, toWei(amount));
 }
 export async function getMaxWithdrawAmount(config: Config): Promise<ethers.BigNumber> {

@@ -29,7 +29,7 @@ export async function getMaxWithdrawAmount(config: Config): Promise<ethers.BigNu

   return faucet.maxWithdrawAmount();
 }
 export async function calculateTimeLock(amount: ethers.BigNumber, config: Config): Promise<ethers.BigNumber> {
 export async function calculateTimeLock(amount: string, config: Config): Promise<ethers.BigNumber> {
   assert(config.signer);
   const faucet = new ethers.Contract(

@@ -38,7 +38,7 @@ export async function calculateTimeLock(amount: ethers.BigNumber, config: Config

     config.signer
   );
   return faucet.calculateTimeLock(parseUnits(amount.toString()));
   return faucet.calculateTimeLock(toWei(amount));
 }
 export async function lastWithdrawalByUser(config: Config): Promise<ethers.BigNumber> {

modified src/utils.ts

@@ -10,6 +10,7 @@ import type { EnsProfile } from "@app/base/registrations/registrar";

 import { getAvatar, getSeedHost, getSeedId, getAnchorsAccount, getRegistration } from '@app/base/registrations/registrar';
 import type { BasicProfile } from '@datamodels/identity-profile-basic';
 import { ProfileType } from '@app/profile';
 import { parseUnits } from "@ethersproject/units";
 export enum AddressType {
   Contract,

@@ -61,6 +62,10 @@ export async function toClipboard(text: string): Promise<void> {

   return navigator.clipboard.writeText(text);
 }
 export function toWei(amount: string): BigNumber {
   return parseUnits(amount);
 }
 export function isAddressEqual(left: string, right: string): boolean {
   return left.toLowerCase() === right.toLowerCase();
 }