-
Your Balance: {balance}
+
Your Balance: {Number(balance).toFixed(8)}
{/*
- ) : null}
+ )
+
{!formState.isValid ? (
<>
diff --git a/src/pages/send/components/receive/Receive.js b/src/pages/send/components/receive/Receive.js
index 9ec9f9c..1decf0a 100644
--- a/src/pages/send/components/receive/Receive.js
+++ b/src/pages/send/components/receive/Receive.js
@@ -18,7 +18,7 @@ const Receive = ({ isShowing, hide, address }) => {
const calcAmountConverted = useCallback(() => {
let currentValue = Number(amount);
currentValue = currentValue / (rate || 1.0);
- return currentValue.toFixed(4);
+ return currentValue.toFixed(8);
}, [amount, rate]);
const handleSelectedFiat = async (e) => {
diff --git a/src/pages/send/components/sendForm/SendForm.js b/src/pages/send/components/sendForm/SendForm.js
index c7f91a2..7a1e836 100644
--- a/src/pages/send/components/sendForm/SendForm.js
+++ b/src/pages/send/components/sendForm/SendForm.js
@@ -1,25 +1,53 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
import { createAndSendRawTransaction, getFee } from '../../../../lib/sapi';
import { isAddress, isPK } from '../../../../lib/smart';
import style from './SendForm.module.css';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
import useModal from '../../../../util/useModal';
import Modal from '../modal/Modal';
import barcode from '../../../../assets/images/barcode.svg';
+import useDebounce from '../../../../util/useDebounce';
+import MaskedInput from 'react-text-mask';
+import createNumberMask from 'text-mask-addons/dist/createNumberMask'
+import { subtractFloats, sumtractFloats } from '../../../../lib/math';
+
+const defaultMaskOptions = {
+ prefix: '',
+ suffix: '',
+ includeThousandsSeparator: true,
+ thousandsSeparatorSymbol: '',
+ allowDecimal: true,
+ decimalSymbol: '.',
+ decimalLimit: 8, // how many digits allowed after the decimal
+ integerLimit: 30, // limit length of integer numbers
+ allowNegative: false,
+ allowLeadingZeroes: false,
+}
+const currencyMask = createNumberMask(defaultMaskOptions)
+
function Send({ address, balance, privateKey, withdraw }) {
const { isShowing, toggle } = useModal(false);
+ const [amount, setAmount] = useState();
const [txid, setTxId] = useState();
const [fee, setFee] = useState();
const [loading, setLoading] = useState(false);
const [type, setType] = useState();
- const { register, handleSubmit, errors, setError, setValue, formState, triggerValidation, getValues } = useForm({
+ const debouncedAmount = useDebounce(amount, 1000);
+
+ const { control, register, handleSubmit, errors, setError, setValue, formState, triggerValidation, getValues } = useForm({
mode: 'onChange',
defaultValues: {
- amount: withdraw ? Number(balance - 0.002).toFixed(4) : null,
+ amount: withdraw ? Number(balance - 0.002) : null,
},
});
+ useEffect(() => {
+ if (debouncedAmount) {
+ getFeeFromSAPI(debouncedAmount);
+ }
+ }, [debouncedAmount]);
+
const onSubmit = (data) => {
setLoading(true);
createAndSendRawTransaction(data?.addressTo, Number(data?.amount), String(privateKey || data?.privateKey))
@@ -31,21 +59,27 @@ function Send({ address, balance, privateKey, withdraw }) {
const getFeeFromSAPI = (amount) => {
getFee(Number(amount), address).then((fee) => {
setFee(fee);
- if (fee && Number(getValues('amount')) + fee > balance) {
- setError('amount', 'invalid', 'Requested amount exceeds balance');
- }
+ // if (fee && Number(getValues("amount")) + fee > balance) {
+ // setError("amount", "invalid", "Requested amount exceeds balance");
+ // }
});
};
+ const handleSendAllFunds = async () => {
+ const amount = subtractFloats(balance, 0.001).toFixed(8);
+ setValue('amount', amount, true);
+ setAmount(amount);
+ }
+
if (txid) {
return (
);
}
@@ -91,13 +125,16 @@ function Send({ address, balance, privateKey, withdraw }) {
+ { balance > 0.001 && }
{errors.amount && {errors.amount.message}}
- {fee && (
+
+ {fee && !errors.amount && (
Fee: {fee}
-
Amount with fee: {Number(getValues('amount')) + fee}
+
Requested Amount: {sumtractFloats(getValues('amount'), 0.001)}
)}
{!privateKey ? (
diff --git a/src/pages/send/components/sendForm/SendForm.module.css b/src/pages/send/components/sendForm/SendForm.module.css
index ed53260..2216599 100644
--- a/src/pages/send/components/sendForm/SendForm.module.css
+++ b/src/pages/send/components/sendForm/SendForm.module.css
@@ -32,3 +32,23 @@
border: 1px solid rgba(254, 199, 39, 0.5);
border-radius: 4px;
}
+
+.requestedAmount {
+ font-weight: 600;
+ color: #333;
+ background: #eee;
+ padding: 10px;
+ border-radius: 4px;
+}
+
+.sendFundsMessage {
+ display: flex;
+ align-items: center;
+ padding: 0;
+ margin: 0 0 30px;
+ line-height: normal;
+}
+
+.sendFundsMessage button {
+ margin-left: 10px;
+}