add available balance to withdraw modal
This commit is contained in:
saml33
parent
4d49012eba
commit
b7a47f60fe
|
|
@ -95,74 +95,75 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
|
|||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<EnterBottomExitBottom
|
||||
className="absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6 pb-0"
|
||||
show={showTokenList}
|
||||
>
|
||||
<h2 className="mb-4 text-center">{t('select-token')}</h2>
|
||||
<WithdrawTokenList onSelect={handleSelectToken} />
|
||||
</EnterBottomExitBottom>
|
||||
<FadeInFadeOut
|
||||
className="flex h-full flex-col justify-between"
|
||||
show={isOpen}
|
||||
>
|
||||
<div>
|
||||
<h2 className="mb-4 text-center">{t('withdraw')}</h2>
|
||||
<div className="grid grid-cols-2 pb-6">
|
||||
<div className="col-span-2 flex justify-between">
|
||||
<Label text={t('token')} />
|
||||
<LinkButton
|
||||
className="mb-2 no-underline"
|
||||
onClick={() => handleSizePercentage('100')}
|
||||
>
|
||||
<span className="mr-1 font-normal text-th-fgd-3">
|
||||
{t('available-balance')}
|
||||
</span>
|
||||
<span className="text-th-fgd-1 underline">{tokenMax}</span>
|
||||
</LinkButton>
|
||||
<div className="h-80">
|
||||
<EnterBottomExitBottom
|
||||
className="absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6"
|
||||
show={showTokenList}
|
||||
>
|
||||
<h2 className="mb-4 text-center">{t('select-token')}</h2>
|
||||
<WithdrawTokenList onSelect={handleSelectToken} />
|
||||
</EnterBottomExitBottom>
|
||||
<FadeInFadeOut
|
||||
className="flex h-full flex-col justify-between"
|
||||
show={isOpen}
|
||||
>
|
||||
<div>
|
||||
<h2 className="mb-4 text-center">{t('withdraw')}</h2>
|
||||
<div className="grid grid-cols-2 pb-6">
|
||||
<div className="col-span-2 flex justify-between">
|
||||
<Label text={t('token')} />
|
||||
<LinkButton
|
||||
className="mb-2 no-underline"
|
||||
onClick={() => handleSizePercentage('100')}
|
||||
>
|
||||
<span className="mr-1 font-normal text-th-fgd-3">
|
||||
{t('available-balance')}
|
||||
</span>
|
||||
<span className="text-th-fgd-1 underline">{tokenMax}</span>
|
||||
</LinkButton>
|
||||
</div>
|
||||
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-th-bkg-1">
|
||||
<button
|
||||
onClick={() => setShowTokenList(true)}
|
||||
className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
|
||||
>
|
||||
<div className="mr-2.5 flex min-w-[24px] items-center">
|
||||
<Image
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={`/icons/${selectedToken.toLowerCase()}.svg`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="text-xl font-bold">{selectedToken}</div>
|
||||
<ChevronDownIcon className="h-6 w-6" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<Input
|
||||
type="text"
|
||||
name="withdraw"
|
||||
id="withdraw"
|
||||
className="w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-th-bkg-1 p-3 text-right text-xl font-bold tracking-wider text-th-fgd-1 focus:outline-none"
|
||||
placeholder="0.00"
|
||||
value={inputAmount}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setInputAmount(e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 mt-2">
|
||||
<ButtonGroup
|
||||
activeValue={sizePercentage}
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-bkg-4 bg-th-bkg-1">
|
||||
<button
|
||||
onClick={() => setShowTokenList(true)}
|
||||
className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
|
||||
>
|
||||
<div className="mr-2.5 flex min-w-[24px] items-center">
|
||||
<Image
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={`/icons/${selectedToken.toLowerCase()}.svg`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="text-xl font-bold">{selectedToken}</div>
|
||||
<ChevronDownIcon className="h-6 w-6" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<Input
|
||||
type="text"
|
||||
name="withdraw"
|
||||
id="withdraw"
|
||||
className="w-full rounded-lg rounded-l-none border border-th-bkg-4 bg-th-bkg-1 p-3 text-right text-xl font-bold tracking-wider text-th-fgd-1 focus:outline-none"
|
||||
placeholder="0.00"
|
||||
value={inputAmount}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setInputAmount(e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 mt-2">
|
||||
<ButtonGroup
|
||||
activeValue={sizePercentage}
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="space-y-2 border-y border-th-bkg-3 py-4">
|
||||
{/* <div className="space-y-2 border-y border-th-bkg-3 py-4">
|
||||
<div className="flex justify-between">
|
||||
<p>{t('health-impact')}</p>
|
||||
<p className="text-th-red">-12%</p>
|
||||
|
|
@ -172,18 +173,23 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
|
|||
<p className="text-th-fgd-1">$1,000.00</p>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="mt-4 flex justify-center">
|
||||
<Button
|
||||
onClick={handleWithdraw}
|
||||
className="flex w-full items-center justify-center"
|
||||
size="large"
|
||||
disabled={!inputAmount}
|
||||
>
|
||||
{submitting ? <Loading className="mr-2 h-5 w-5" /> : t('withdraw')}
|
||||
</Button>
|
||||
</div>
|
||||
</FadeInFadeOut>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-center">
|
||||
<Button
|
||||
onClick={handleWithdraw}
|
||||
className="flex w-full items-center justify-center"
|
||||
size="large"
|
||||
disabled={!inputAmount}
|
||||
>
|
||||
{submitting ? (
|
||||
<Loading className="mr-2 h-5 w-5" />
|
||||
) : (
|
||||
t('withdraw')
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</FadeInFadeOut>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { Bank } from '@blockworks-foundation/mango-v4'
|
||||
import Image from 'next/image'
|
||||
import { useMemo } from 'react'
|
||||
import mangoStore from '../../store/state'
|
||||
import { formatDecimal } from '../../utils/numbers'
|
||||
|
||||
const WithdrawTokenItem = ({
|
||||
|
|
@ -9,7 +11,20 @@ const WithdrawTokenItem = ({
|
|||
bank: Bank
|
||||
onSelect: (x: any) => void
|
||||
}) => {
|
||||
const { name } = bank
|
||||
const { mint, name } = bank
|
||||
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
|
||||
const jupiterTokens = mangoStore((s) => s.jupiterTokens)
|
||||
|
||||
const logoUri = useMemo(() => {
|
||||
let logoURI
|
||||
if (jupiterTokens.length) {
|
||||
logoURI = jupiterTokens.find(
|
||||
(t) => t.address === mint.toString()
|
||||
)!.logoURI
|
||||
}
|
||||
return logoURI
|
||||
}, [mint, jupiterTokens])
|
||||
|
||||
return (
|
||||
<button
|
||||
className="grid w-full grid-cols-2 rounded-md border border-th-bkg-4 px-4 py-3 md:hover:border-th-fgd-4"
|
||||
|
|
@ -21,13 +36,17 @@ const WithdrawTokenItem = ({
|
|||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={`/icons/${name.toLowerCase()}.svg`}
|
||||
src={logoUri || `/icons/${name.toLowerCase()}.svg`}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-th-fgd-1">{name}</p>
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-end">
|
||||
<p className="text-th-fgd-1">0</p>
|
||||
<p className="text-th-fgd-1">
|
||||
{mangoAccount && mangoAccount.getUi(bank) > 0
|
||||
? formatDecimal(mangoAccount.getUi(bank))
|
||||
: 0}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,15 +1,18 @@
|
|||
import { Bank } from '@blockworks-foundation/mango-v4'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { useMemo } from 'react'
|
||||
import mangoStore from '../../store/state'
|
||||
import DepositTokenItem from './DepositTokenItem'
|
||||
import WithdrawTokenItem from './WithdrawTokenItem'
|
||||
|
||||
const WithdrawTokenList = ({ onSelect }: { onSelect: (x: any) => void }) => {
|
||||
const { t } = useTranslation('common')
|
||||
const group = mangoStore((s) => s.group)
|
||||
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
|
||||
const banks = group?.banksMap
|
||||
? Array.from(group?.banksMap, ([key, value]) => ({ key, value }))
|
||||
: []
|
||||
return (
|
||||
|
||||
return mangoAccount ? (
|
||||
<>
|
||||
<div className="grid grid-cols-2 px-4 pb-2">
|
||||
<div className="col-span-1">
|
||||
|
|
@ -29,7 +32,7 @@ const WithdrawTokenList = ({ onSelect }: { onSelect: (x: any) => void }) => {
|
|||
))}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
) : null
|
||||
}
|
||||
|
||||
export default WithdrawTokenList
|
||||
|
|
|
|||
Loading…
Reference in New Issue