Skip to content

Commit

Permalink
code refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@CodeMuhammed
CodeMuhammed authored Sep 11, 2024
1 parent 8d74627 commit 28bb56b
Show file tree
Hide file tree
Showing 6 changed files with 139 additions and 153 deletions.
78 changes: 35 additions & 43 deletions app/vaults/[id]/dialogs/deposit.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,64 @@
import { useDeposit } from '@/app/hooks/use_exec';
import { useQueryBalance } from '@/app/hooks/use_query';
import { Currency } from '@/app/types/currency';
import { walletState } from '@/app/state';
import classNames from 'classnames';
import { MutableRefObject, useEffect, useLayoutEffect, useState } from 'react'
import { FaSpinner } from 'react-icons/fa';
import { useRecoilValue } from 'recoil';
import { createPortal } from 'react-dom';
import { useDeposit } from '@/app/hooks/use_exec'
import { useQueryBalance } from '@/app/hooks/use_query'
import { Currency } from '@/app/types/currency'
import { walletState } from '@/app/state'
import classNames from 'classnames'
import { useEffect, useLayoutEffect, useState } from 'react'
import { FaSpinner } from 'react-icons/fa'
import { useRecoilValue } from 'recoil'
import { createPortal } from 'react-dom'

type DepositDialogButonProps = {
to_address: string,
currency: Currency,
vault_page_ref: MutableRefObject<any>
}

export default function DepositDialogButton({ to_address, currency, vault_page_ref }: DepositDialogButonProps) {
const [is_open, setIsOpen] = useState(false);
const [document_node, setDocumentNode] = useState<globalThis.Document>();
const { address } = useRecoilValue(walletState);
const [amount, setAmount] = useState('');
const { mutate: deposit, isLoading, isSuccess } = useDeposit(to_address);
export default function DepositDialogButton({ to_address, currency }: DepositDialogButonProps) {
const [is_open, setIsOpen] = useState(false)
const [document_node, setDocumentNode] = useState<globalThis.Document>()
const [amount, setAmount] = useState('')
const [from_address, setFromAddress] = useState("")

// We use local_address to get the current balance when
// the modal is open
const [local_address, setLocalAddress] = useState("")
const { balance } = useQueryBalance(local_address, currency)
const { address } = useRecoilValue(walletState)
const { mutate: deposit, isLoading, isSuccess } = useDeposit(to_address)
const { balance } = useQueryBalance(from_address, currency)

// Set document node where modal will be inserted
// Ensure the browser document is available
useLayoutEffect(() => {
setDocumentNode(document)
})

// Only get balance when the dialog is open
// Only get EOA balance when the dialog is open
useEffect(() => {
if (is_open) {
setLocalAddress(address)
} else {
setLocalAddress("")
}
if (is_open) setFromAddress(address)
}, [is_open])

// Close modal when the deposit is done
// Close the modal when the deposit is done
useEffect(() => {
if (isSuccess) {
close_modal();
}
if (isSuccess) close_modal()
}, [isSuccess])

function close_modal() {
setFromAddress("")
setAmount('')
setIsOpen(false)
}

// Validate user input to make sure it is not bigger than available balance
function validate_amount(amount: number) {
if (amount > Number(balance)) {
setAmount('');
setAmount('')
} else {
setAmount(`${amount}`);
setAmount(`${amount}`)
}
}

function handle_deposit() {
deposit({
amount: Number(amount),
currency
})
}

const modal_content = <>
{
is_open &&
Expand Down Expand Up @@ -99,12 +97,7 @@ export default function DepositDialogButton({ to_address, currency, vault_page_r
<div className="flex w-full justify-end">
<button
className="inline-flex justify-center rounded-md border border-zinc-400 px-4 py-2 text-xs lg:text-base font-medium"
disabled={!Boolean(amount) && isLoading} type="button" onClick={() => {
deposit({
amount: Number(amount),
currency
})
}}
disabled={!Boolean(amount) && isLoading} type="button" onClick={handle_deposit}
>
{
isLoading && <>
Expand All @@ -122,7 +115,7 @@ export default function DepositDialogButton({ to_address, currency, vault_page_r
</div>
</div>
}
</>;
</>

return (
<>
Expand All @@ -132,8 +125,7 @@ export default function DepositDialogButton({ to_address, currency, vault_page_r

{document_node && createPortal(
modal_content,
vault_page_ref.current,
"deposit"
document_node.body
)}
</>
)
Expand Down
58 changes: 28 additions & 30 deletions app/vaults/[id]/dialogs/withdraw.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,47 @@
import { useWithdraw } from '@/app/hooks/use_exec';
import { useQueryBalance } from '@/app/hooks/use_query';
import { Currency } from '@/app/types/currency';
import { selectedChainState } from '@/app/state';
import classNames from 'classnames';
import { MutableRefObject, useEffect, useId, useLayoutEffect, useState } from 'react'
import { FaSpinner } from 'react-icons/fa';
import { useRecoilValue } from 'recoil';
import { createPortal } from 'react-dom';
import { useWithdraw } from '@/app/hooks/use_exec'
import { useQueryBalance } from '@/app/hooks/use_query'
import { Currency } from '@/app/types/currency'
import { selectedChainState } from '@/app/state'
import classNames from 'classnames'
import { useEffect, useLayoutEffect, useState } from 'react'
import { FaSpinner } from 'react-icons/fa'
import { useRecoilValue } from 'recoil'
import { createPortal } from 'react-dom'

type WithdrawDialogButtonProps = {
from_address: string,
currency: Currency,
vault_page_ref: MutableRefObject<any>
currency: Currency
}

export default function WithdrawDialogButton({ from_address, currency, vault_page_ref }: WithdrawDialogButtonProps) {
const id = useId();
const [is_open, setIsOpen] = useState(false);
const [document_node, setDocumentNode] = useState<globalThis.Document>();
const [amount, setAmount] = useState('');
export default function WithdrawDialogButton({ from_address, currency }: WithdrawDialogButtonProps) {
const [is_open, setIsOpen] = useState(false)
const [document_node, setDocumentNode] = useState<globalThis.Document>()
const [amount, setAmount] = useState('')

const { mutate: withdraw, isLoading, isSuccess } = useWithdraw(from_address);
const [to_address, setToAddress] = useState("");
const [send_memo, setSendMemo] = useState("");
const chainInfo = useRecoilValue(selectedChainState);
const { mutate: withdraw, isLoading, isSuccess } = useWithdraw(from_address)
const [to_address, setToAddress] = useState("")
const [send_memo, setSendMemo] = useState("")
const chainInfo = useRecoilValue(selectedChainState)

// Ensure the browser document is available
useLayoutEffect(() => {
setDocumentNode(document)
})

// Only get vault balance when the dialog is open
const [vault_address, setVaultAddress] = useState("");
const { balance } = useQueryBalance(vault_address, currency);
const [vault_address, setVaultAddress] = useState("")
const { balance } = useQueryBalance(vault_address, currency)
useEffect(() => {
is_open ? setVaultAddress(from_address) : setVaultAddress("");
if (is_open) setVaultAddress(from_address)
}, [is_open])

// Close the modal when the deposit is done
useEffect(() => {
if (isSuccess) close_modal();
if (isSuccess) close_modal()
}, [isSuccess])

function close_modal() {
setVaultAddress("")
setToAddress("")
setAmount("")
setSendMemo("")
Expand All @@ -55,15 +54,15 @@ export default function WithdrawDialogButton({ from_address, currency, vault_pag
currency,
to_address: Boolean(to_address) ? to_address : null,
send_memo
});
})
}

// Validate user input to make sure it is not bigger than available balance
function validate_amount(amount: number) {
if (amount > Number(balance)) {
setAmount('');
setAmount('')
} else {
setAmount(`${amount}`);
setAmount(`${amount}`)
}
}

Expand Down Expand Up @@ -163,7 +162,7 @@ export default function WithdrawDialogButton({ from_address, currency, vault_pag
</div>
</div>
}
</>;
</>

return (
<>
Expand All @@ -173,8 +172,7 @@ export default function WithdrawDialogButton({ from_address, currency, vault_pag

{document_node && createPortal(
modal_content,
vault_page_ref.current,
id
document_node.body
)}
</>
)
Expand Down
Loading

0 comments on commit 28bb56b

Please sign in to comment.