Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pre-populating the Deposit Max Amount #1875

Closed
wants to merge 23 commits into from
Closed

Pre-populating the Deposit Max Amount #1875

Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
7506fda
Prepolutaing the Deposit Max Amount
kirksgithub Oct 16, 2023
5b4578f
Added minor error handling for input value being parsed
kirksgithub Oct 16, 2023
115a516
adjusted setAmount using humanReadableMax string
kirksgithub Oct 16, 2023
d98afe6
Added one more check in case of undefined humanReadableMax
kirksgithub Oct 16, 2023
8da4cd4
Reduced a few lines of code
kirksgithub Oct 16, 2023
f865635
Reduced a few more lines of code
kirksgithub Oct 16, 2023
b0f53ae
Added Max button in case the user clears out the input field
kirksgithub Oct 16, 2023
4e5357f
Minor code cleanup
kirksgithub Oct 16, 2023
8da110b
Added additional check in case humanReadableMax is 0
kirksgithub Oct 16, 2023
e767022
Additional Error Checking
kirksgithub Oct 16, 2023
1c15f3c
Fixed if/else syntax
kirksgithub Oct 16, 2023
fac3f43
Minor fix
kirksgithub Oct 16, 2023
1607801
Remove label prop to outside of Input
kirksgithub Oct 16, 2023
1922acc
checking if humanReadable is set
kirksgithub Oct 16, 2023
7e0d4d6
Added effect for async humanReadableMax & setting setAmount
kirksgithub Oct 16, 2023
42f9c4f
Added error checking when custom amount is greater than Max available
kirksgithub Oct 16, 2023
0f6e1f7
Added additional undefined check for humanReadableMax
kirksgithub Oct 16, 2023
3f7aff2
Added disabled Confirm button
kirksgithub Oct 16, 2023
e0fbd43
Code cleanup
kirksgithub Oct 16, 2023
eb273d8
Added Confirm disabled in case criteria is not met for wallet holdings
kirksgithub Oct 16, 2023
131eae6
Persistent Max button
kirksgithub Oct 16, 2023
6412bdf
Improved disable button & small code cleanup
kirksgithub Oct 16, 2023
6498f4d
Fixed conditional statement for confirm
kirksgithub Oct 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 19 additions & 6 deletions components/DepositTokensButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import useUserGovTokenAccountQuery from '@hooks/useUserGovTokenAccount'
import { useDepositCallback } from './GovernancePower/Vanilla/useDepositCallback'
import useWalletOnePointOh from '@hooks/useWalletOnePointOh'
import Modal from './Modal'
import { useState } from 'react'
import { useState, useEffect } from 'react'
import useGoverningTokenMint from '@hooks/selectedRealm/useGoverningTokenMint'
import { useMintInfoByPubkeyQuery } from '@hooks/queries/mintInfo'
import Input from './inputs/Input'
Expand All @@ -30,12 +30,11 @@ export const DepositTokensButton = ({
const depositTooltipContent = !connected
? 'Connect your wallet to deposit'
: !hasTokensInWallet
? "You don't have any governance tokens in your wallet to deposit."
: undefined
? "You don't have any governance tokens in your wallet to deposit."
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it seems like you're using a different code formatter, any idea what's going on? FWIW I prefer this way of formatting ternaries

Copy link
Contributor Author

@kirksgithub kirksgithub Oct 16, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

using codespace

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as in, using the codespace associated with the repo? interesting. how did you find that btw? I'm new to codespaces and just set it up for personal use.

: undefined

const ButtonToUse = as === 'primary' ? Button : SecondaryButton
const [openModal, setOpenModal] = useState(false)
const [amount, setAmount] = useState('')
const mint = useGoverningTokenMint(role)
const mintInfo = useMintInfoByPubkeyQuery(mint).data?.result

Expand All @@ -44,7 +43,15 @@ export const DepositTokensButton = ({
? undefined
: depositAmount.shiftedBy(-mintInfo.decimals).toNumber()

const [amount, setAmount] = useState('')

useEffect(() => {
if (humanReadableMax && humanReadableMax > 0)
setAmount(humanReadableMax ? humanReadableMax.toString() : '')
}, [humanReadableMax])

const deposit = useDepositCallback(role)

return (
<>
<ButtonToUse
Expand All @@ -59,12 +66,17 @@ export const DepositTokensButton = ({
<Modal isOpen={openModal} onClose={() => setOpenModal(false)}>
<div className="flex flex-col gap-y-4">
<h2>Deposit tokens</h2>
<label>
Amount to deposit
<span>
&nbsp;-&nbsp;<a href="#" onClick={() => { setAmount(humanReadableMax ? humanReadableMax.toString() : '') }}>Max</a>
</span>
</label>
<Input
placeholder={humanReadableMax?.toString() + ' (max)'}
type="number"
label="Amount to deposit"
value={amount}
onChange={(e) => setAmount(e.target.value)}
onChange={(e) => { setAmount(e.target.value) }}
max={humanReadableMax}
/>
<Button
Expand All @@ -76,6 +88,7 @@ export const DepositTokensButton = ({
await deposit(nativeAmount)
setOpenModal(false)
}}
disabled={humanReadableMax !== undefined && (parseInt(amount) > humanReadableMax || parseInt(amount) > 0)}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this seems wrong? if amount > 0 the button is disabled?

>
Confirm
</Button>
Expand Down
Loading