From 420282bbd867caa47f7b2d9a4e58504590f030bd Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Tue, 20 Aug 2024 23:36:18 -0700 Subject: [PATCH 1/4] feat: send form/modal --- .../nft-dashboard/Balance/Balance.tsx | 4 + .../components/SendButton/SendButton.tsx | 25 +++ .../components/SendForm/SendForm.styles.ts | 119 +++++++++++ .../Balance/components/SendForm/SendForm.tsx | 193 ++++++++++++++++++ .../components/ResultScreen.styles.ts | 21 ++ .../SendForm/components/ResultScreen.tsx | 32 +++ .../components/SendModal/SendModal.styles.ts | 11 + .../components/SendModal/SendModal.tsx | 48 +++++ src/utils/utils.ts | 8 +- 9 files changed, 460 insertions(+), 1 deletion(-) create mode 100644 src/components/nft-dashboard/Balance/components/SendButton/SendButton.tsx create mode 100644 src/components/nft-dashboard/Balance/components/SendForm/SendForm.styles.ts create mode 100644 src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx create mode 100644 src/components/nft-dashboard/Balance/components/SendForm/components/ResultScreen.styles.ts create mode 100644 src/components/nft-dashboard/Balance/components/SendForm/components/ResultScreen.tsx create mode 100644 src/components/nft-dashboard/Balance/components/SendModal/SendModal.styles.ts create mode 100644 src/components/nft-dashboard/Balance/components/SendModal/SendModal.tsx diff --git a/src/components/nft-dashboard/Balance/Balance.tsx b/src/components/nft-dashboard/Balance/Balance.tsx index 50408ab..135f501 100644 --- a/src/components/nft-dashboard/Balance/Balance.tsx +++ b/src/components/nft-dashboard/Balance/Balance.tsx @@ -11,6 +11,7 @@ import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; import useBalanceData from '@app/hooks/useBalanceData'; import { formatBalance } from '@app/utils/balanceFormatter'; import { BaseSwitch } from '@app/components/common/BaseSwitch/BaseSwitch'; // Import BaseSwitch +import SendButton from './components/SendButton/SendButton'; export const Balance: React.FC = () => { const { balanceData, transactions, isLoading } = useBalanceData(); @@ -69,6 +70,9 @@ export const Balance: React.FC = () => { + + + diff --git a/src/components/nft-dashboard/Balance/components/SendButton/SendButton.tsx b/src/components/nft-dashboard/Balance/components/SendButton/SendButton.tsx new file mode 100644 index 0000000..fd9e72b --- /dev/null +++ b/src/components/nft-dashboard/Balance/components/SendButton/SendButton.tsx @@ -0,0 +1,25 @@ +import React, { useState } from 'react'; +import * as S from '../TopUpBalanceButton/TopUpBalanceButton.styles'; +import SendModal from '../SendModal/SendModal'; +import { useAppSelector } from '@app/hooks/reduxHooks'; + +const SendButton: React.FC = () => { + const { theme } = useAppSelector((state) => state.theme); + const [isModalOpen, setIsModalOpen] = useState(false); + const handleButtonClick = () => { + setIsModalOpen(true); + }; + const handleModalClose = () => { + setIsModalOpen(false); + }; + return ( + <> + + {'Send'} + + + + ); +}; + +export default SendButton; diff --git a/src/components/nft-dashboard/Balance/components/SendForm/SendForm.styles.ts b/src/components/nft-dashboard/Balance/components/SendForm/SendForm.styles.ts new file mode 100644 index 0000000..1609fd3 --- /dev/null +++ b/src/components/nft-dashboard/Balance/components/SendForm/SendForm.styles.ts @@ -0,0 +1,119 @@ +import styled from 'styled-components'; +import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; +import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; +import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; +export const ContentWrapper = styled.div` + display: row; + flex-direction: row; + gap: 2rem; +`; +export const TextRow = styled.div` + display: flex; + flex-direction: row; + gap: 1rem; +`; + +export const SubCard = styled(BaseCard)` + background-color: var(--additional-background-color); + cursor: pointer; + box-shadow: 0px 0px 10px 0px var(--shadow-color); + .ant-card-body { + padding: 1rem 2rem; + } +`; +export const SendBody = styled(BaseRow)` + padding-bottom: 1rem; +`; +export const FormSpacer = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; +`; +export const FormHeader = styled.span` + display: flex; + font-size: 2rem; + align-items: center; + text-align: center; + justify-content: center; + width: 100%; + padding-bottom: 1rem; +`; + +export const SubCardHeader = styled.span` + font-size: 1.5rem; +`; + +export const InputHeader = styled.span` + font-size: 1.3rem; +`; + +export const SubCardAmount = styled.span` + font-size: 1.5rem; +`; +export const SubCardContent = styled.div` + display: flex; + justify-content: space-around; + flex-direction: column; + align-items: center; + text-align: center; + gap: 3rem; + padding-top: 1rem; + padding-bottom: 1rem; +`; + +export const InputWrapper = styled.div` + display: flex; + min-width: 25vw; + flex-direction: column; + gap: 0.5rem; +`; +export const TiersRow = styled.div` + display: flex; + flex-direction: row; + gap: 1rem; + justify-content: space-around; +`; + +export const TiersCol = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; + justify-content: space-around; +`; +export const SendFormButton = styled(BaseButton)` + width: 100%; +`; +export const TiersContainer = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; + transition: all 0.5s ease; + padding: 1rem; + .tier-hover:hover { + background-color: var(--primary-color); + } + .selected { + border: 1px solid var(--primary-color); + } + .invalidAmount { + border: 1px solid var(--error-color); + } +`; +export const BalanceInfo = styled.small` + color: var(--subtext-color); +`; + +export const Recipient = styled.span` + color: var(--subtext-color); + word-break: break-all; +`; +export const ErrorText = styled.small` + color: var(--error-color); + display: flex; + flex-direction: row; + align-items: center; +`; +export const AddressText = styled.span` + text-decoration: underline; + color: var(--text-main-color); +`; diff --git a/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx b/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx new file mode 100644 index 0000000..db579d2 --- /dev/null +++ b/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx @@ -0,0 +1,193 @@ +import React, { memo, useEffect, useState } from 'react'; +import { BaseInput } from '@app/components/common/inputs/BaseInput/BaseInput'; +import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; +import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; +import { useResponsive } from '@app/hooks/useResponsive'; +import { BaseSpin } from '@app/components/common/BaseSpin/BaseSpin'; +import * as S from './SendForm.styles'; +import { truncateString } from '@app/utils/utils'; +import useBalanceData from '@app/hooks/useBalanceData'; + +interface SendFormProps { + onSend: (status: boolean, address: string, amount: number) => void; +} +interface SuccessScreenProps { + isSuccess: boolean; + amount: number; + address: string; +} +const subscriptionDuration = 30; //1 month + +const testTiers = [ + { + id: 'tier1', + limit: '1 GB', + amount: 10000, + }, + { + id: 'tier2', + limit: '5 GB', + amount: 40000, + }, + { + id: 'tier3', + limit: '10 GB', + amount: 70000, + }, +]; + +type tiers = 'tier1' | 'tier2' | 'tier3'; +const SendForm: React.FC = ({ onSend }) => { + const { balanceData, isLoading } = useBalanceData(); + const { isTablet, isDesktop } = useResponsive(); + const [loading, setLoading] = useState(false); + const [selectedTier, setSelectedTier] = useState(null); + const [isDetailsOpen, setIsDetailsOpen] = useState(false); + const [inValidAmount, setInvalidAmount] = useState(false); + const [addressError, setAddressError] = useState(false); + const [formData, setFormData] = useState({ + address: '', + amount: '', + tier: '', + }); + + const handleTierChange = (tier: any) => { + setSelectedTier(tier.id); + setFormData({ ...formData, amount: tier.amount }); + }; + + const isValidAddress = (address: string) => { + if (address.length > 0) { + return true; + } + return false; + }; + + const handleAddressSubmit = () => { + //check if valid address + const isValid = isValidAddress(formData.address); + + if (isValid) { + setAddressError(false); + setIsDetailsOpen(true); + } else { + setAddressError(true); + } + }; + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData({ ...formData, [name]: value }); + }; + const handleSend = () => { + if (loading) return; + if (inValidAmount) return; + + setLoading(true); + + //send request here (simulating request for now) + console.log('Sending data', formData); + setTimeout(() => { + setLoading(false); + onSend(true, formData.address, parseInt(formData.amount)); + }, 2000); + }; + + useEffect(() => { + if (formData.amount.length <= 0 || (balanceData && parseInt(formData.amount) > balanceData.latest_balance)) { + setInvalidAmount(true); + } else { + setInvalidAmount(false); + } + }, [formData.amount]); + const ReceiverPanel = memo(() => { + return ( + <> + + Address + + + Continue + + ); + }); + const DetailsPanel = () => { + return ( + + + + Amount + {inValidAmount && selectedTier && Amount exceeds balance} + +
+ + {` Balance: ${balanceData ? balanceData.latest_balance : 0}`} +
+ + + Tiers + {isDesktop || isTablet ? ( + + {testTiers.map((tier) => ( + handleTierChange(tier)} + className={`tier-hover ${selectedTier == tier.id ? 'selected' : ' '} ${ + selectedTier == tier.id && inValidAmount ? 'invalidAmount' : ' ' + } `} + > + + {`${tier.amount} Sats`} + {`${tier.limit} per Month`} + + + ))} + + ) : ( + + {testTiers.map((tier) => ( + handleTierChange(tier)} + className={`tier-hover ${selectedTier == tier.id ? 'selected' : ' '} ${ + selectedTier == tier.id && inValidAmount ? 'invalidAmount' : ' ' + } `} + > + + {`${tier.amount} Sats`} + {`${tier.limit} per Month`} + + + ))} + + )} + + + + Send + + + + ); + }; + return ( + + + + Send + {isDetailsOpen ? ( + <> + + {`To:`} +

+ {truncateString(formData.address, 65)} + + + + ) : ( + + )} + + + + ); +}; + +export default SendForm; diff --git a/src/components/nft-dashboard/Balance/components/SendForm/components/ResultScreen.styles.ts b/src/components/nft-dashboard/Balance/components/SendForm/components/ResultScreen.styles.ts new file mode 100644 index 0000000..c0358bd --- /dev/null +++ b/src/components/nft-dashboard/Balance/components/SendForm/components/ResultScreen.styles.ts @@ -0,0 +1,21 @@ +import styled from 'styled-components'; + +export const ResultScreenWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +`; +export const ResultTextPass = styled.span` + color: green; + font-size: 2rem; +`; +export const ResultTextFail = styled.span` + color: red; + font-size: 2rem; +`; +export const ResultMessage = styled.span` + font-size: 1.5rem; + text-align: center; + padding: 1rem; +`; \ No newline at end of file diff --git a/src/components/nft-dashboard/Balance/components/SendForm/components/ResultScreen.tsx b/src/components/nft-dashboard/Balance/components/SendForm/components/ResultScreen.tsx new file mode 100644 index 0000000..4d2987c --- /dev/null +++ b/src/components/nft-dashboard/Balance/components/SendForm/components/ResultScreen.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; +import { truncateString } from '@app/utils/utils'; +import * as S from './ResultScreen.styles'; +interface ResultScreenProps { + isSuccess: boolean; + amount: number; + receiver: string; +} + +const ResultScreen: React.FC = ({ isSuccess, amount, receiver }) => { + return ( + + {isSuccess ? ( + <> + Success! + + {' '} + You have successfully sent
{amount} Sats
to
{truncateString(receiver, 10)} + + + ) : ( + <> + Failed + This transaction was unable to send. + + )} + + ); +}; + +export default ResultScreen; diff --git a/src/components/nft-dashboard/Balance/components/SendModal/SendModal.styles.ts b/src/components/nft-dashboard/Balance/components/SendModal/SendModal.styles.ts new file mode 100644 index 0000000..10a0908 --- /dev/null +++ b/src/components/nft-dashboard/Balance/components/SendModal/SendModal.styles.ts @@ -0,0 +1,11 @@ +import styled from 'styled-components'; +import { BaseModal } from '@app/components/common/BaseModal/BaseModal'; + +export const SendModal = styled(BaseModal)` + .ant-modal-content { + min-height: 30vh; + padding-left:2rem; + padding-right:2rem; + + } +`; diff --git a/src/components/nft-dashboard/Balance/components/SendModal/SendModal.tsx b/src/components/nft-dashboard/Balance/components/SendModal/SendModal.tsx new file mode 100644 index 0000000..7006558 --- /dev/null +++ b/src/components/nft-dashboard/Balance/components/SendModal/SendModal.tsx @@ -0,0 +1,48 @@ +import React, { useState } from 'react'; +import { BaseModal } from '@app/components/common/BaseModal/BaseModal'; +import { BaseSpin } from '@app/components/common/BaseSpin/BaseSpin'; +import SendForm from '../SendForm/SendForm'; +import * as S from './SendModal.styles'; +import ResultScreen from '../SendForm/components/ResultScreen'; +interface SendModalProps { + isOpen: boolean; + onOpenChange: () => void; +} +interface SuccessScreenProps { + isSuccess: boolean; + amount: number; + address: string; +} +const SendModal: React.FC = ({ isOpen, onOpenChange }) => { + const [isLoading, setIsLoading] = useState(false); + const [isFinished, setIsFinished] = useState(false); + const [successScreenState, setSuccessScreenState] = useState(null); + + const onFinish = (status: boolean, address: string, amount: number) => { + setSuccessScreenState({ isSuccess: status, address, amount }); + setIsFinished(true); + }; + + const handleFinish = () => { + setSuccessScreenState(null); + setIsFinished(false); + onOpenChange(); + }; + return ( + + + {isFinished && successScreenState ? ( + + ) : ( + + )} + + + ); +}; + +export default SendModal; diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 7c97112..701abff 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -158,7 +158,13 @@ export const formatNumberWithCommas = (value: number): string => { export const msToH = (ms: number): number => Math.floor(ms / 3600000); export const hToMS = (h: number): number => h * 3600000; - +export const truncateString = (str: string, num: number): string => { +if (str.length <= num) { +return str; +}else{ +return str.slice(0, num) + '...'; +} +} export const getPaymentCardTypeIcon = (type: string): string | null => { switch (type) { case 'visa': From 60e519e1d5bfeca2be9bf9bdda93eaad6fc76c3a Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Wed, 21 Aug 2024 00:59:36 -0700 Subject: [PATCH 2/4] rework tiered fees --- .../components/SendForm/SendForm.styles.ts | 17 ++ .../Balance/components/SendForm/SendForm.tsx | 153 ++++++++++++------ 2 files changed, 117 insertions(+), 53 deletions(-) diff --git a/src/components/nft-dashboard/Balance/components/SendForm/SendForm.styles.ts b/src/components/nft-dashboard/Balance/components/SendForm/SendForm.styles.ts index 1609fd3..f91d73d 100644 --- a/src/components/nft-dashboard/Balance/components/SendForm/SendForm.styles.ts +++ b/src/components/nft-dashboard/Balance/components/SendForm/SendForm.styles.ts @@ -117,3 +117,20 @@ export const AddressText = styled.span` text-decoration: underline; color: var(--text-main-color); `; + +export const RateValueWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; +`; +export const RateValue = styled.span` + color: green; +`; +export const RBFWrapper = styled.div` + + display: flex; + flex-direction: row; + gap: 1rem; + align-items: center; + justify-content: center; +`; diff --git a/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx b/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx index db579d2..c9614f0 100644 --- a/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx +++ b/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx @@ -7,7 +7,7 @@ import { BaseSpin } from '@app/components/common/BaseSpin/BaseSpin'; import * as S from './SendForm.styles'; import { truncateString } from '@app/utils/utils'; import useBalanceData from '@app/hooks/useBalanceData'; - +import { BaseCheckbox } from '@app/components/common/BaseCheckbox/BaseCheckbox'; interface SendFormProps { onSend: (status: boolean, address: string, amount: number) => void; } @@ -16,44 +16,47 @@ interface SuccessScreenProps { amount: number; address: string; } -const subscriptionDuration = 30; //1 month const testTiers = [ { - id: 'tier1', - limit: '1 GB', - amount: 10000, + id: 'low', + rate: 4, }, { - id: 'tier2', - limit: '5 GB', - amount: 40000, + id: 'med', + rate: 5, }, { - id: 'tier3', - limit: '10 GB', - amount: 70000, + id: 'high', + rate: 5, }, ]; -type tiers = 'tier1' | 'tier2' | 'tier3'; +type tiers = 'low' | 'med' | 'high'; +type Fees = { + [key in tiers]: number; +}; const SendForm: React.FC = ({ onSend }) => { const { balanceData, isLoading } = useBalanceData(); const { isTablet, isDesktop } = useResponsive(); const [loading, setLoading] = useState(false); - const [selectedTier, setSelectedTier] = useState(null); + + const [selectedTier, setSelectedTier] = useState('low'); const [isDetailsOpen, setIsDetailsOpen] = useState(false); + const [inValidAmount, setInvalidAmount] = useState(false); const [addressError, setAddressError] = useState(false); + + const [amountWithFee, setAmountWithFee] = useState(null); + const [formData, setFormData] = useState({ address: '', - amount: '', - tier: '', + amount: '1', }); + const [fees, setFees] = useState({ low: 0, med: 0, high: 0 }); const handleTierChange = (tier: any) => { setSelectedTier(tier.id); - setFormData({ ...formData, amount: tier.amount }); }; const isValidAddress = (address: string) => { @@ -75,6 +78,7 @@ const SendForm: React.FC = ({ onSend }) => { } }; const handleInputChange = (e: React.ChangeEvent) => { + e.preventDefault(); const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; @@ -92,6 +96,17 @@ const SendForm: React.FC = ({ onSend }) => { }, 2000); }; + useEffect(() => { + if (selectedTier) { + const lowFee = parseInt(formData.amount) * testTiers[0].rate; + const medFee = parseInt(formData.amount) * testTiers[1].rate; + const highFee = parseInt(formData.amount) * testTiers[2].rate; + + setFees({ low: lowFee, med: medFee, high: highFee }); + setAmountWithFee(parseInt(formData.amount) + fees[selectedTier]); + } + }, [formData.amount, selectedTier]); //fetched fees should be used here + useEffect(() => { if (formData.amount.length <= 0 || (balanceData && parseInt(formData.amount) > balanceData.latest_balance)) { setInvalidAmount(true); @@ -99,68 +114,100 @@ const SendForm: React.FC = ({ onSend }) => { setInvalidAmount(false); } }, [formData.amount]); - const ReceiverPanel = memo(() => { + + const receiverPanel = () => { return ( <> - Address + Address Continue ); - }); - const DetailsPanel = () => { + }; + const TieredFees = () => { + return ( + <> + handleTierChange(testTiers[0])} + className={`tier-hover ${selectedTier == testTiers[0].id ? 'selected' : ' '} ${ + selectedTier == testTiers[0].id && inValidAmount ? 'invalidAmount' : ' ' + } `} + > + + {`Low Priority`} + + {`${testTiers[0].rate} sat/vB`} + {`${fees?.low} Sats`} + + + + + handleTierChange(testTiers[1])} + className={`tier-hover ${selectedTier == testTiers[1].id ? 'selected' : ' '} ${ + selectedTier == testTiers[1].id && inValidAmount ? 'invalidAmount' : ' ' + } `} + > + + {`Medium Priority`} + + {`${testTiers[1].rate} sat/vB`} + {`${fees?.med} Sats`} + + + + + handleTierChange(testTiers[2])} + className={`tier-hover ${selectedTier == testTiers[2].id ? 'selected' : ' '} ${ + selectedTier == testTiers[2].id && inValidAmount ? 'invalidAmount' : ' ' + } `} + > + + {`High Priority`} + + {`${testTiers[2].rate} sat/vB`} + {`${fees?.high} Sats`} + + + + + ); + }; + const detailsPanel = () => { return ( - Amount - {inValidAmount && selectedTier && Amount exceeds balance} + {`Amount = ${selectedTier && amountWithFee ? amountWithFee : ''} `} + + {inValidAmount && selectedTier && Invalid Amount} +
- + {` Balance: ${balanceData ? balanceData.latest_balance : 0}`}
- Tiers + Tiered Fees + + + RBF Opt In {isDesktop || isTablet ? ( - {testTiers.map((tier) => ( - handleTierChange(tier)} - className={`tier-hover ${selectedTier == tier.id ? 'selected' : ' '} ${ - selectedTier == tier.id && inValidAmount ? 'invalidAmount' : ' ' - } `} - > - - {`${tier.amount} Sats`} - {`${tier.limit} per Month`} - - - ))} + ) : ( - {testTiers.map((tier) => ( - handleTierChange(tier)} - className={`tier-hover ${selectedTier == tier.id ? 'selected' : ' '} ${ - selectedTier == tier.id && inValidAmount ? 'invalidAmount' : ' ' - } `} - > - - {`${tier.amount} Sats`} - {`${tier.limit} per Month`} - - - ))} + )} - + Send @@ -179,10 +226,10 @@ const SendForm: React.FC = ({ onSend }) => {

{truncateString(formData.address, 65)} - + {detailsPanel()} ) : ( - + receiverPanel() )} From 9bfa1414edd1e546c3ebf029bc47c64881c49ab9 Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Wed, 21 Aug 2024 01:12:05 -0700 Subject: [PATCH 3/4] fixed amount return --- .../Balance/components/SendForm/SendForm.tsx | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx b/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx index c9614f0..7b22ae5 100644 --- a/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx +++ b/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx @@ -92,7 +92,7 @@ const SendForm: React.FC = ({ onSend }) => { console.log('Sending data', formData); setTimeout(() => { setLoading(false); - onSend(true, formData.address, parseInt(formData.amount)); + onSend(true, formData.address, amountWithFee ? amountWithFee : 0); }, 2000); }; @@ -185,17 +185,18 @@ const SendForm: React.FC = ({ onSend }) => { {inValidAmount && selectedTier && Invalid Amount} - +
- + {` Balance: ${balanceData ? balanceData.latest_balance : 0}`}
Tiered Fees - - RBF Opt In + + RBF Opt In + {isDesktop || isTablet ? ( @@ -207,7 +208,12 @@ const SendForm: React.FC = ({ onSend }) => { )} - + Send @@ -226,7 +232,7 @@ const SendForm: React.FC = ({ onSend }) => {

{truncateString(formData.address, 65)} - {detailsPanel()} + {detailsPanel()} ) : ( receiverPanel() From 1e65961a8d220a390894051a656b858ffdd3368e Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Wed, 21 Aug 2024 01:28:42 -0700 Subject: [PATCH 4/4] fix: issue with fee state --- .../Balance/components/SendForm/SendForm.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx b/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx index 7b22ae5..9ec189f 100644 --- a/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx +++ b/src/components/nft-dashboard/Balance/components/SendForm/SendForm.tsx @@ -98,15 +98,20 @@ const SendForm: React.FC = ({ onSend }) => { useEffect(() => { if (selectedTier) { - const lowFee = parseInt(formData.amount) * testTiers[0].rate; - const medFee = parseInt(formData.amount) * testTiers[1].rate; - const highFee = parseInt(formData.amount) * testTiers[2].rate; + const vB = parseInt(formData.amount) / 50; + const lowFee = Math.ceil(vB * testTiers[0].rate); + const medFee = Math.ceil(vB * testTiers[1].rate); + const highFee = Math.ceil(vB * testTiers[2].rate); setFees({ low: lowFee, med: medFee, high: highFee }); - setAmountWithFee(parseInt(formData.amount) + fees[selectedTier]); } }, [formData.amount, selectedTier]); //fetched fees should be used here + useEffect(() => { + if (selectedTier) { + setAmountWithFee(parseInt(formData.amount) + fees[selectedTier]); + } + }, [fees]); useEffect(() => { if (formData.amount.length <= 0 || (balanceData && parseInt(formData.amount) > balanceData.latest_balance)) { setInvalidAmount(true);