align swap form elements
This commit is contained in:
saml33
parent
3c55bf5b59
commit
fa08f0e819
|
|
@ -20,6 +20,7 @@ import {
|
|||
PencilIcon,
|
||||
ArrowsRightLeftIcon,
|
||||
CheckCircleIcon,
|
||||
ArrowRightIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Image from 'next/image'
|
||||
|
|
@ -243,36 +244,46 @@ const JupiterRouteInfo = ({
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mb-0.5 text-center text-lg">
|
||||
<span className="text-th-fgd-1">{`${formatFixedDecimals(
|
||||
<p className="mb-0.5 flex items-center text-center text-lg">
|
||||
<span className="mr-1 font-mono tracking-tighter text-th-fgd-1">{`${formatFixedDecimals(
|
||||
amountIn.toNumber()
|
||||
)}`}</span>{' '}
|
||||
{`${inputTokenInfo!.symbol} for`}{' '}
|
||||
<span className="text-th-fgd-1">{`${formatFixedDecimals(
|
||||
{inputTokenInfo!.symbol}
|
||||
<ArrowRightIcon className="mx-2 h-5 w-5 text-th-fgd-4" />
|
||||
<span className="mr-1 font-mono tracking-tighter text-th-fgd-1">{`${formatFixedDecimals(
|
||||
amountOut.toNumber()
|
||||
)}`}</span>{' '}
|
||||
{`${outputTokenInfo.symbol}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 px-1">
|
||||
<div className="flex justify-between">
|
||||
<p className="text-sm text-th-fgd-3">{t('swap:rate')}</p>
|
||||
<div>
|
||||
<div className="flex items-center justify-end">
|
||||
<p className="text-right text-sm text-th-fgd-1">
|
||||
<p className="text-right font-mono text-sm tracking-tighter text-th-fgd-1">
|
||||
{swapRate ? (
|
||||
<>
|
||||
1 {inputTokenInfo!.name} ≈{' '}
|
||||
1{' '}
|
||||
<span className="font-body tracking-wide">
|
||||
{inputTokenInfo!.name} ≈{' '}
|
||||
</span>
|
||||
{formatFixedDecimals(amountOut.div(amountIn).toNumber())}{' '}
|
||||
{outputTokenInfo?.symbol}
|
||||
<span className="font-body tracking-wide">
|
||||
{outputTokenInfo?.symbol}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
1 {outputTokenInfo?.symbol} ≈{' '}
|
||||
1{' '}
|
||||
<span className="font-body tracking-wide">
|
||||
{outputTokenInfo?.symbol} ≈{' '}
|
||||
</span>
|
||||
{formatFixedDecimals(amountIn.div(amountOut).toNumber())}{' '}
|
||||
{inputTokenInfo!.name}
|
||||
<span className="font-body tracking-wide">
|
||||
{inputTokenInfo!.symbol}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
|
|
@ -285,14 +296,14 @@ const JupiterRouteInfo = ({
|
|||
{coingeckoPrices?.outputCoingeckoPrice &&
|
||||
coingeckoPrices?.inputCoingeckoPrice ? (
|
||||
<div
|
||||
className={`text-right ${
|
||||
className={`text-right font-mono tracking-tighter ${
|
||||
coinGeckoPriceDifference.gt(0)
|
||||
? 'text-th-red'
|
||||
: 'text-th-green'
|
||||
}`}
|
||||
>
|
||||
{Decimal.abs(coinGeckoPriceDifference).toFixed(1)}%{' '}
|
||||
<span className="text-th-fgd-3">{`${
|
||||
<span className="font-body tracking-wide text-th-fgd-3">{`${
|
||||
coinGeckoPriceDifference.lte(0)
|
||||
? 'cheaper'
|
||||
: 'more expensive'
|
||||
|
|
@ -307,13 +318,15 @@ const JupiterRouteInfo = ({
|
|||
{t('swap:minimum-received')}
|
||||
</p>
|
||||
{outputTokenInfo?.decimals ? (
|
||||
<p className="text-right text-sm text-th-fgd-1">
|
||||
<p className="text-right font-mono text-sm tracking-tighter text-th-fgd-1">
|
||||
{formatDecimal(
|
||||
JSBI.toNumber(selectedRoute?.otherAmountThreshold) /
|
||||
10 ** outputTokenInfo.decimals || 1,
|
||||
outputTokenInfo.decimals
|
||||
)}{' '}
|
||||
{outputTokenInfo?.symbol}
|
||||
<span className="font-body tracking-wide">
|
||||
{outputTokenInfo?.symbol}
|
||||
</span>
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
@ -321,27 +334,32 @@ const JupiterRouteInfo = ({
|
|||
<>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-sm text-th-fgd-3">{t('borrow-amount')}</p>
|
||||
<p className="text-right text-sm text-th-fgd-1">
|
||||
~ {formatFixedDecimals(borrowAmount)} {inputTokenInfo?.symbol}
|
||||
<p className="text-right font-mono text-sm tracking-tighter text-th-fgd-1">
|
||||
~ {formatFixedDecimals(borrowAmount)}{' '}
|
||||
<span className="font-body tracking-wide">
|
||||
{inputTokenInfo?.symbol}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-sm text-th-fgd-3">Borrow Fee</p>
|
||||
<p className="text-right text-sm text-th-fgd-1">
|
||||
<p className="text-right font-mono text-sm tracking-tighter text-th-fgd-1">
|
||||
~{' '}
|
||||
{formatFixedDecimals(
|
||||
amountIn
|
||||
.mul(inputBank!.loanOriginationFeeRate.toFixed())
|
||||
.toNumber()
|
||||
)}{' '}
|
||||
{inputBank!.name}
|
||||
<span className="font-body tracking-wide">
|
||||
{inputBank!.name}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
<div className="flex justify-between">
|
||||
<p className="text-sm text-th-fgd-3">Est. {t('swap:slippage')}</p>
|
||||
<p className="text-right text-sm text-th-fgd-1">
|
||||
<p className="text-right font-mono text-sm tracking-tighter text-th-fgd-1">
|
||||
{selectedRoute?.priceImpactPct * 100 < 0.1
|
||||
? '< 0.1%'
|
||||
: `${(selectedRoute?.priceImpactPct * 100).toFixed(2)}%`}
|
||||
|
|
@ -377,7 +395,7 @@ const JupiterRouteInfo = ({
|
|||
<div className="flex justify-between">
|
||||
<p className="text-sm text-th-fgd-3">{t('fee')}</p>
|
||||
<div className="flex items-center">
|
||||
<p className="text-right text-sm text-th-fgd-1">
|
||||
<p className="text-right font-mono text-sm tracking-tighter text-th-fgd-1">
|
||||
≈ ${feeValue?.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -395,12 +413,15 @@ const JupiterRouteInfo = ({
|
|||
})}
|
||||
</p>
|
||||
{feeToken?.decimals && (
|
||||
<p className="text-right text-sm text-th-fgd-1">
|
||||
<p className="text-right font-mono text-sm tracking-tighter text-th-fgd-1">
|
||||
{(
|
||||
JSBI.toNumber(info.lpFee?.amount) /
|
||||
Math.pow(10, feeToken.decimals)
|
||||
).toFixed(6)}{' '}
|
||||
{feeToken?.symbol} ({info.lpFee?.pct * 100}%)
|
||||
<span className="font-body tracking-wide">
|
||||
{feeToken?.symbol}
|
||||
</span>{' '}
|
||||
({info.lpFee?.pct * 100}%)
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ const SwapForm = () => {
|
|||
>
|
||||
<div className="p-6 pt-3">
|
||||
<Transition
|
||||
className="thin-scroll absolute top-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-2 p-6 pb-0"
|
||||
className="thin-scroll absolute top-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6 pb-0"
|
||||
show={showConfirm}
|
||||
enter="transition ease-in duration-300"
|
||||
enterFrom="translate-x-full"
|
||||
|
|
@ -223,7 +223,7 @@ const SwapForm = () => {
|
|||
/>
|
||||
</Transition>
|
||||
<EnterBottomExitBottom
|
||||
className="thin-scroll absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-2 p-6 pb-0"
|
||||
className="thin-scroll absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6 pb-0"
|
||||
show={!!showTokenSelect}
|
||||
>
|
||||
<SwapFormTokenList
|
||||
|
|
@ -237,13 +237,13 @@ const SwapForm = () => {
|
|||
/>
|
||||
</EnterBottomExitBottom>
|
||||
<EnterBottomExitBottom
|
||||
className="thin-scroll absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-2 p-6 pb-0"
|
||||
className="thin-scroll absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6 pb-0"
|
||||
show={showSettings}
|
||||
>
|
||||
<SwapSettings onClose={() => setShowSettings(false)} />
|
||||
</EnterBottomExitBottom>
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="text-base text-th-fgd-3">{t('swap')}</h2>
|
||||
<h2 className="text-base text-th-fgd-2">{t('swap')}</h2>
|
||||
<div id="step-eight">
|
||||
<IconButton
|
||||
className="text-th-fgd-2"
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const TokenItem = ({
|
|||
<div>
|
||||
<button
|
||||
key={address}
|
||||
className="flex w-full cursor-pointer items-center justify-between rounded-md p-2 font-normal focus:bg-th-bkg-3 focus:outline-none md:hover:bg-th-bkg-4"
|
||||
className="flex w-full cursor-pointer items-center justify-between rounded-md p-2 font-normal focus:bg-th-bkg-3 focus:outline-none md:hover:bg-th-bkg-2"
|
||||
onClick={() => onSubmit(address)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
|
|
@ -78,7 +78,7 @@ const SwapFormTokenList = ({
|
|||
onTokenSelect: (x: string) => void
|
||||
type: string
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { t } = useTranslation(['common', 'swap'])
|
||||
const [search, setSearch] = useState('')
|
||||
const tokens = mangoStore.getState().jupiterTokens
|
||||
const walletTokens = mangoStore((s) => s.wallet.tokens)
|
||||
|
|
@ -135,7 +135,11 @@ const SwapFormTokenList = ({
|
|||
|
||||
return (
|
||||
<>
|
||||
<p className="mb-3">{type === 'input' ? t('sell') : t('buy')}</p>
|
||||
<p className="mb-3">
|
||||
{type === 'input'
|
||||
? `${t('swap')} ${t('swap:from')}`
|
||||
: `${t('swap')} ${t('swap:to')}`}
|
||||
</p>
|
||||
<IconButton className="absolute top-2 right-2" onClick={onClose} hideBg>
|
||||
<XMarkIcon className="h-5 w-5" />
|
||||
</IconButton>
|
||||
|
|
@ -182,7 +186,7 @@ const SwapFormTokenList = ({
|
|||
</div>
|
||||
) : null}
|
||||
<div className="my-2 border-t border-th-bkg-4"></div>
|
||||
<div className="overflow-auto">
|
||||
<div className="mb-2 overflow-auto">
|
||||
{sortedTokens.map((token) => (
|
||||
<TokenItem
|
||||
key={token.address}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const SwapSettings = ({ onClose }: { onClose: () => void }) => {
|
|||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-6 flex items-center justify-between rounded-md bg-th-bkg-3 p-3">
|
||||
<div className="mt-6 flex items-center justify-between rounded-md bg-th-bkg-2 p-3">
|
||||
<p className="text-th-fgd-1">{t('swap:use-margin')}</p>
|
||||
<Switch
|
||||
className="text-th-fgd-3"
|
||||
|
|
|
|||
Loading…
Reference in New Issue