withdraw modal ui
This commit is contained in:
parent
e5e691d9a4
commit
69caf3eb00
|
@ -74,7 +74,7 @@ function DepositModal({ isOpen, onClose }: ModalProps) {
|
|||
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">Select Token</h2>
|
||||
<h2 className="mb-4 text-center">{t('select-token')}</h2>
|
||||
<DepositTokenList onSelect={handleSelectToken} />
|
||||
</EnterBottomExitBottom>
|
||||
<FadeInFadeOut
|
||||
|
@ -83,7 +83,7 @@ function DepositModal({ isOpen, onClose }: ModalProps) {
|
|||
>
|
||||
<div>
|
||||
<h2 className="mb-4 text-center">{t('deposit')}</h2>
|
||||
<div className="mb-4 grid grid-cols-2">
|
||||
<div className="grid grid-cols-2 pb-6">
|
||||
<div className="col-span-2 flex justify-between">
|
||||
<Label text={t('token')} />
|
||||
<LinkButton
|
||||
|
@ -132,22 +132,24 @@ function DepositModal({ isOpen, onClose }: ModalProps) {
|
|||
<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="font-bold text-th-green">+12%</p>
|
||||
<p className="text-th-green">+12%</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('deposit-value')}</p>
|
||||
<p className="font-bold text-th-fgd-1">$1,000.00</p>
|
||||
<p className="text-th-fgd-1">$1,000.00</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex items-center">
|
||||
<p>{t('collateral-multiplier', { token: selectedToken })}</p>
|
||||
<p>
|
||||
{t('token-collateral-multiplier', { token: selectedToken })}
|
||||
</p>
|
||||
<InfoTooltip content={t('collateral-multiplier-desc')} />
|
||||
</div>
|
||||
<p className="font-bold text-th-fgd-1">0.8x</p>
|
||||
<p className="text-th-fgd-1">0.8x</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('collateral-value')}</p>
|
||||
<p className="font-bold text-th-fgd-1">$800.00</p>
|
||||
<p className="text-th-fgd-1">$800.00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,16 +1,25 @@
|
|||
import { useState } from 'react'
|
||||
import { ChevronDownIcon } from '@heroicons/react/solid'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Image from 'next/image'
|
||||
import { ChangeEvent, useState } from 'react'
|
||||
|
||||
import mangoStore from '../../store/state'
|
||||
import { ModalProps } from '../../types/modal'
|
||||
import { notify } from '../../utils/notifications'
|
||||
import Button from '../shared/Button'
|
||||
import Input from '../forms/Input'
|
||||
import Label from '../forms/Label'
|
||||
import Button, { LinkButton } from '../shared/Button'
|
||||
import Loading from '../shared/Loading'
|
||||
import Modal from '../shared/Modal'
|
||||
import { EnterBottomExitBottom, FadeInFadeOut } from '../shared/Transitions'
|
||||
import WithdrawTokenList from '../shared/WithdrawTokenList'
|
||||
|
||||
function WithdrawModal({ isOpen, onClose }: ModalProps) {
|
||||
const { t } = useTranslation('common')
|
||||
const [inputAmount, setInputAmount] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [selectedToken, setSelectedToken] = useState('USDC')
|
||||
const [showTokenList, setShowTokenList] = useState(false)
|
||||
|
||||
const handleWithdraw = async () => {
|
||||
const client = mangoStore.getState().client
|
||||
|
@ -46,14 +55,73 @@ function WithdrawModal({ isOpen, onClose }: ModalProps) {
|
|||
}
|
||||
}
|
||||
|
||||
const handleTokenSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setSelectedToken(e.target.value)
|
||||
const handleSelectToken = (token: string) => {
|
||||
setSelectedToken(token)
|
||||
setShowTokenList(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<div>
|
||||
<div className="relative mt-1 rounded-md shadow-sm">
|
||||
<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-96 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={() => console.log('Set max input amount')}
|
||||
>
|
||||
<span className="mr-1 font-normal text-th-fgd-3">
|
||||
{t('available-balance')}
|
||||
</span>
|
||||
<span className="text-th-fgd-1">0</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>
|
||||
{/* <div className="relative mt-1 rounded-md shadow-sm">
|
||||
<div className="absolute inset-y-0 left-0 flex items-center">
|
||||
<label htmlFor="token" className="sr-only">
|
||||
Token
|
||||
|
@ -79,13 +147,29 @@ function WithdrawModal({ isOpen, onClose }: ModalProps) {
|
|||
value={inputAmount}
|
||||
onChange={(e) => setInputAmount(e.target.value)}
|
||||
/>
|
||||
</div> */}
|
||||
<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>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('withdrawal-value')}</p>
|
||||
<p className="text-th-fgd-1">$1,000.00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-center">
|
||||
<Button onClick={handleWithdraw} className="flex items-center">
|
||||
{submitting ? <Loading className="mr-2 h-5 w-5" /> : null} Withdraw
|
||||
</Button>
|
||||
</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>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -12,7 +12,7 @@ const DepositTokenItem = ({
|
|||
const { name } = bank
|
||||
return (
|
||||
<button
|
||||
className="grid w-full grid-cols-3 rounded-md border border-th-bkg-4 px-4 py-3 md:hover:border-th-fgd-4"
|
||||
className="grid w-full grid-cols-3 gap-4 rounded-md border border-th-bkg-4 px-4 py-3 md:hover:border-th-fgd-4"
|
||||
onClick={() => onSelect(name)}
|
||||
>
|
||||
<div className="col-span-1 flex items-center">
|
||||
|
@ -24,7 +24,7 @@ const DepositTokenItem = ({
|
|||
src={`/icons/${name.toLowerCase()}.svg`}
|
||||
/>
|
||||
</div>
|
||||
<p className="font-bold text-th-fgd-1">{name}</p>
|
||||
<p className="text-th-fgd-1">{name}</p>
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-end">
|
||||
<p className="text-th-green">
|
||||
|
@ -32,7 +32,7 @@ const DepositTokenItem = ({
|
|||
</p>
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-end">
|
||||
<p className="text-th-fgd-1">100%</p>
|
||||
<p className="text-th-fgd-1">0.8x</p>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
|
|
|
@ -1,22 +1,26 @@
|
|||
import { useTranslation } from 'next-i18next'
|
||||
import mangoStore from '../../store/state'
|
||||
import DepositTokenItem from './DepositTokenItem'
|
||||
|
||||
const DepositTokenList = ({ onSelect }: { onSelect: (x: any) => void }) => {
|
||||
const { t } = useTranslation('common')
|
||||
const group = mangoStore((s) => s.group)
|
||||
const banks = group?.banksMap
|
||||
? Array.from(group?.banksMap, ([key, value]) => ({ key, value }))
|
||||
: []
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-3 px-4 pb-2">
|
||||
<div className="grid grid-cols-3 gap-4 px-4 pb-2">
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs">Token</p>
|
||||
<p className="text-xs">{t('token')}</p>
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-end">
|
||||
<p className="text-xs">Deposit Rate (APR)</p>
|
||||
<p className="text-xs">{t('rate')}</p>
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-end">
|
||||
<p className="text-xs">Collateral Weight</p>
|
||||
<p className="whitespace-nowrap text-xs">
|
||||
{t('collateral-multiplier')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
|
|
|
@ -0,0 +1,36 @@
|
|||
import { Bank } from '@blockworks-foundation/mango-v4'
|
||||
import Image from 'next/image'
|
||||
import { formatDecimal } from '../../utils/numbers'
|
||||
|
||||
const WithdrawTokenItem = ({
|
||||
bank,
|
||||
onSelect,
|
||||
}: {
|
||||
bank: Bank
|
||||
onSelect: (x: any) => void
|
||||
}) => {
|
||||
const { name } = bank
|
||||
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"
|
||||
onClick={() => onSelect(name)}
|
||||
>
|
||||
<div className="col-span-1 flex items-center">
|
||||
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
||||
<Image
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={`/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>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default WithdrawTokenItem
|
|
@ -0,0 +1,35 @@
|
|||
import { useTranslation } from 'next-i18next'
|
||||
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 banks = group?.banksMap
|
||||
? Array.from(group?.banksMap, ([key, value]) => ({ key, value }))
|
||||
: []
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-2 px-4 pb-2">
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs">{t('token')}</p>
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-end">
|
||||
<p className="text-xs">{t('available-balance')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{banks.map((bank) => (
|
||||
<WithdrawTokenItem
|
||||
bank={bank.value}
|
||||
key={bank.value.name}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default WithdrawTokenList
|
|
@ -182,8 +182,8 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
|||
<>
|
||||
<div className="mb-0.5 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
|
||||
<FlipNumbers
|
||||
height={36}
|
||||
width={24}
|
||||
height={40}
|
||||
width={26}
|
||||
play
|
||||
delay={0.025}
|
||||
duration={1}
|
||||
|
@ -214,8 +214,8 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
|||
<>
|
||||
<div className="mb-0.5 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
|
||||
<FlipNumbers
|
||||
height={36}
|
||||
width={24}
|
||||
height={40}
|
||||
width={26}
|
||||
play
|
||||
numbers={formatFixedDecimals(
|
||||
chartData[chartData.length - 1]['price']
|
||||
|
|
|
@ -32,21 +32,21 @@ const Index: NextPage = () => {
|
|||
<p className="mb-1">{t('account-value')}</p>
|
||||
<div className="flex items-center text-5xl font-bold text-th-fgd-1">
|
||||
$
|
||||
<FlipNumbers
|
||||
height={48}
|
||||
width={32}
|
||||
play={mangoAccount}
|
||||
delay={0.05}
|
||||
duration={1}
|
||||
numbers={
|
||||
mangoAccount
|
||||
? formatDecimal(
|
||||
toUiDecimals(mangoAccount.getEquity().toNumber()),
|
||||
2
|
||||
)
|
||||
: (0).toFixed(2)
|
||||
}
|
||||
/>
|
||||
{mangoAccount ? (
|
||||
<FlipNumbers
|
||||
height={48}
|
||||
width={32}
|
||||
play
|
||||
delay={0.05}
|
||||
duration={1}
|
||||
numbers={formatDecimal(
|
||||
toUiDecimals(mangoAccount.getEquity().toNumber()),
|
||||
2
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
(0).toFixed(2)
|
||||
)}
|
||||
</div>
|
||||
{/* <div className="text-5xl font-bold text-th-fgd-1">
|
||||
$
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
{
|
||||
"account-value": "Account Value",
|
||||
"available-balance": "Available Balance",
|
||||
"balance": "Balance",
|
||||
"borrow": "Borrow",
|
||||
"buy": "Buy",
|
||||
"close-account": "Close Account",
|
||||
"collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"collateral-multiplier": "Collateral Multiplier",
|
||||
"collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
|
||||
"collateral-value": "Collateral Value",
|
||||
"connect": "Connect",
|
||||
|
@ -25,13 +26,18 @@
|
|||
"more": "More",
|
||||
"portfolio": "Portfolio",
|
||||
"price": "Price",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
"rolling-change": "24h Change",
|
||||
"select-token": "Select Token",
|
||||
"sell": "Sell",
|
||||
"settings": "Settings",
|
||||
"stats": "Stats",
|
||||
"token": "Token",
|
||||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"trade": "Trade",
|
||||
"wallet-balance": "Wallet Balance",
|
||||
"withdraw": "Withdraw"
|
||||
}
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawal-value": "Withdrawal Value"
|
||||
}
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
{
|
||||
"account-value": "Account Value",
|
||||
"available-balance": "Available Balance",
|
||||
"balance": "Balance",
|
||||
"borrow": "Borrow",
|
||||
"buy": "Buy",
|
||||
"close-account": "Close Account",
|
||||
"collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"collateral-multiplier": "Collateral Multiplier",
|
||||
"collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
|
||||
"collateral-value": "Collateral Value",
|
||||
"connect": "Connect",
|
||||
|
@ -25,13 +26,18 @@
|
|||
"more": "More",
|
||||
"portfolio": "Portfolio",
|
||||
"price": "Price",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
"rolling-change": "24h Change",
|
||||
"select-token": "Select Token",
|
||||
"sell": "Sell",
|
||||
"settings": "Settings",
|
||||
"stats": "Stats",
|
||||
"token": "Token",
|
||||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"trade": "Trade",
|
||||
"wallet-balance": "Wallet Balance",
|
||||
"withdraw": "Withdraw"
|
||||
}
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawal-value": "Withdrawal Value"
|
||||
}
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
{
|
||||
"account-value": "Account Value",
|
||||
"available-balance": "Available Balance",
|
||||
"balance": "Balance",
|
||||
"borrow": "Borrow",
|
||||
"buy": "Buy",
|
||||
"close-account": "Close Account",
|
||||
"collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"collateral-multiplier": "Collateral Multiplier",
|
||||
"collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
|
||||
"collateral-value": "Collateral Value",
|
||||
"connect": "Connect",
|
||||
|
@ -25,14 +26,18 @@
|
|||
"more": "More",
|
||||
"portfolio": "Portfolio",
|
||||
"price": "Price",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
"rolling-change": "24h Change",
|
||||
"select-token": "Select Token",
|
||||
"sell": "Sell",
|
||||
"settings": "Settings",
|
||||
"stats": "Stats",
|
||||
"token": "Token",
|
||||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"trade": "Trade",
|
||||
"wallet-balance": "Wallet Balance",
|
||||
"withdraw": "Withdraw"
|
||||
}
|
||||
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawal-value": "Withdrawal Value"
|
||||
}
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
{
|
||||
"account-value": "Account Value",
|
||||
"available-balance": "Available Balance",
|
||||
"balance": "Balance",
|
||||
"borrow": "Borrow",
|
||||
"buy": "Buy",
|
||||
"close-account": "Close Account",
|
||||
"collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"collateral-multiplier": "Collateral Multiplier",
|
||||
"collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
|
||||
"collateral-value": "Collateral Value",
|
||||
"connect": "Connect",
|
||||
|
@ -25,13 +26,17 @@
|
|||
"more": "More",
|
||||
"portfolio": "Portfolio",
|
||||
"price": "Price",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
"rolling-change": "24h Change",
|
||||
"select-token": "Select Token",
|
||||
"sell": "Sell",
|
||||
"settings": "Settings",
|
||||
"stats": "Stats",
|
||||
"token": "Token",
|
||||
"token-collateral-multiplier": "{{token}} Collateral Multiplier",
|
||||
"trade": "Trade",
|
||||
"wallet-balance": "Wallet Balance",
|
||||
"withdraw": "Withdraw"
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawal-value": "Withdrawal Value"
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue