blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

show correct borrow fee unit and remove unnecessary class

This commit is contained in:
saml33 2023-01-06 13:03:58 +11:00
parent c5c0a6f493
commit 65e6afc363
16 changed files with 50 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/BorrowForm.tsx
View File

@ -279,7 +279,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
allowNegative={false} allowNegative={false}
isNumericString={true} isNumericString={true}
decimalScale={bank?.mintDecimals || 6} decimalScale={bank?.mintDecimals || 6}
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover" className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
placeholder="0.00" placeholder="0.00"
value={inputAmount} value={inputAmount}
onValueChange={handleInputChange} onValueChange={handleInputChange}

2
components/DepositForm.tsx
View File

@ -299,7 +299,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
allowNegative={false} allowNegative={false}
isNumericString={true} isNumericString={true}
decimalScale={bank?.mintDecimals || 6} decimalScale={bank?.mintDecimals || 6}
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover" className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
placeholder="0.00" placeholder="0.00"
value={inputAmount} value={inputAmount}
onValueChange={(e: NumberFormatValues) => { onValueChange={(e: NumberFormatValues) => {

2
components/RepayForm.tsx
View File

@ -262,7 +262,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
allowNegative={false} allowNegative={false}
isNumericString={true} isNumericString={true}
decimalScale={bank?.mintDecimals || 6} decimalScale={bank?.mintDecimals || 6}
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover" className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
placeholder="0.00" placeholder="0.00"
value={inputAmount} value={inputAmount}
onValueChange={(e: NumberFormatValues) => { onValueChange={(e: NumberFormatValues) => {

4
components/TokenList.tsx
View File

@ -189,7 +189,7 @@ const TokenList = () => {
<QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" /> <QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
)} )}
</div> </div>
<p className="font-body tracking-wide">{bank.name}</p> <p className="font-body tracking-wider">{bank.name}</p>
</div> </div>
</Td> </Td>
<Td className="text-right"> <Td className="text-right">
@ -558,7 +558,7 @@ const ActionsMenu = ({
<div className="mr-2 flex flex-shrink-0 items-center"> <div className="mr-2 flex flex-shrink-0 items-center">
<Image alt="" width="20" height="20" src={logoURI || ''} /> <Image alt="" width="20" height="20" src={logoURI || ''} />
</div> </div>
<p className="font-body tracking-wide"> <p className="font-body tracking-wider">
{formatTokenSymbol(bank.name)} {formatTokenSymbol(bank.name)}
</p> </p>
</div> </div>

2
components/WithdrawForm.tsx
View File

@ -253,7 +253,7 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
allowNegative={false} allowNegative={false}
isNumericString={true} isNumericString={true}
decimalScale={bank?.mintDecimals || 6} decimalScale={bank?.mintDecimals || 6}
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover" className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
placeholder="0.00" placeholder="0.00"
value={inputAmount} value={inputAmount}
onValueChange={(e: NumberFormatValues) => onValueChange={(e: NumberFormatValues) =>

12
components/account/ActivityFeed.tsx
View File

@ -432,10 +432,8 @@ const ActivityDetails = ({
<p className="mb-0.5 text-sm">{t('activity:asset-liquidated')}</p> <p className="mb-0.5 text-sm">{t('activity:asset-liquidated')}</p>
<p className="font-mono text-th-fgd-1"> <p className="font-mono text-th-fgd-1">
{formatDecimal(asset_amount)}{' '} {formatDecimal(asset_amount)}{' '}
<span className="font-body tracking-wide">{asset_symbol}</span> <span className="font-body tracking-wider">{asset_symbol}</span>
<span className="ml-2 font-body tracking-wide text-th-fgd-3"> <span className="ml-2 font-body text-th-fgd-3">at</span>{' '}
at
</span>{' '}
{formatFixedDecimals(asset_price, true)} {formatFixedDecimals(asset_price, true)}
</p> </p>
<p className="font-mono text-xs text-th-fgd-3"> <p className="font-mono text-xs text-th-fgd-3">
@ -446,10 +444,8 @@ const ActivityDetails = ({
<p className="mb-0.5 text-sm">{t('activity:asset-returned')}</p> <p className="mb-0.5 text-sm">{t('activity:asset-returned')}</p>
<p className="font-mono text-th-fgd-1"> <p className="font-mono text-th-fgd-1">
{formatDecimal(liab_amount)}{' '} {formatDecimal(liab_amount)}{' '}
<span className="font-body tracking-wide">{liab_symbol}</span> <span className="font-body tracking-wider">{liab_symbol}</span>
<span className="ml-2 font-body tracking-wide text-th-fgd-3"> <span className="ml-2 font-body text-th-fgd-3">at</span>{' '}
at
</span>{' '}
{formatFixedDecimals(liab_price, true)} {formatFixedDecimals(liab_price, true)}
</p> </p>
<p className="font-mono text-xs text-th-fgd-3"> <p className="font-mono text-xs text-th-fgd-3">

24
components/account/ActivityFeedTable.tsx
View File

@ -194,7 +194,7 @@ const ActivityFeedTable = ({
} }
> >
<Td> <Td>
<p className="font-body tracking-wide"> <p className="font-body tracking-wider">
{dayjs(block_datetime).format('ddd D MMM')} {dayjs(block_datetime).format('ddd D MMM')}
</p> </p>
<p className="text-xs text-th-fgd-3"> <p className="text-xs text-th-fgd-3">
@ -206,13 +206,13 @@ const ActivityFeedTable = ({
</Td> </Td>
<Td className="text-right font-mono"> <Td className="text-right font-mono">
{amounts.credit.value}{' '} {amounts.credit.value}{' '}
<span className="font-body tracking-wide text-th-fgd-3"> <span className="font-body text-th-fgd-3">
{amounts.credit.symbol} {amounts.credit.symbol}
</span> </span>
</Td> </Td>
<Td className="text-right font-mono"> <Td className="text-right font-mono">
{amounts.debit.value}{' '} {amounts.debit.value}{' '}
<span className="font-body tracking-wide text-th-fgd-3"> <span className="font-body text-th-fgd-3">
{amounts.debit.symbol} {amounts.debit.symbol}
</span> </span>
</Td> </Td>
@ -353,7 +353,7 @@ const MobileActivityFeedItem = ({
{ maximumFractionDigits: 6 } { maximumFractionDigits: 6 }
)} )}
</span> </span>
<span className="font-body tracking-wide text-th-fgd-3"> <span className="font-body text-th-fgd-3">
{activity.activity_details.swap_in_symbol} {activity.activity_details.swap_in_symbol}
</span> </span>
<span className="mx-1 font-body text-th-fgd-3">for</span> <span className="mx-1 font-body text-th-fgd-3">for</span>
@ -363,7 +363,7 @@ const MobileActivityFeedItem = ({
{ maximumFractionDigits: 6 } { maximumFractionDigits: 6 }
)} )}
</span> </span>
<span className="font-body tracking-wide text-th-fgd-3"> <span className="font-body text-th-fgd-3">
{activity.activity_details.swap_out_symbol} {activity.activity_details.swap_out_symbol}
</span> </span>
</> </>
@ -392,7 +392,7 @@ const MobileActivityFeedItem = ({
<span className="mr-1"> <span className="mr-1">
{activity.activity_details.quantity} {activity.activity_details.quantity}
</span> </span>
<span className="font-body tracking-wide text-th-fgd-3"> <span className="font-body text-th-fgd-3">
{activity.activity_details.symbol} {activity.activity_details.symbol}
</span> </span>
</> </>
@ -443,12 +443,10 @@ const MobileActivityFeedItem = ({
<p className="mb-0.5 text-sm">{t('activity:asset-liquidated')}</p> <p className="mb-0.5 text-sm">{t('activity:asset-liquidated')}</p>
<p className="font-mono text-sm text-th-fgd-1"> <p className="font-mono text-sm text-th-fgd-1">
{formatDecimal(activity.activity_details.asset_amount)}{' '} {formatDecimal(activity.activity_details.asset_amount)}{' '}
<span className="font-body tracking-wide"> <span className="font-body tracking-wider">
{activity.activity_details.asset_symbol} {activity.activity_details.asset_symbol}
</span> </span>
<span className="ml-2 font-body tracking-wide text-th-fgd-3"> <span className="ml-2 font-body text-th-fgd-3">at</span>{' '}
at
</span>{' '}
{formatFixedDecimals(activity.activity_details.asset_price, true)} {formatFixedDecimals(activity.activity_details.asset_price, true)}
</p> </p>
<p className="font-mono text-xs text-th-fgd-3"> <p className="font-mono text-xs text-th-fgd-3">
@ -463,12 +461,10 @@ const MobileActivityFeedItem = ({
<p className="mb-0.5 text-sm">{t('activity:asset-returned')}</p> <p className="mb-0.5 text-sm">{t('activity:asset-returned')}</p>
<p className="font-mono text-sm text-th-fgd-1"> <p className="font-mono text-sm text-th-fgd-1">
{formatDecimal(activity.activity_details.liab_amount)}{' '} {formatDecimal(activity.activity_details.liab_amount)}{' '}
<span className="font-body tracking-wide"> <span className="font-body tracking-wider">
{activity.activity_details.liab_symbol} {activity.activity_details.liab_symbol}
</span> </span>
<span className="ml-2 font-body tracking-wide text-th-fgd-3"> <span className="ml-2 font-body text-th-fgd-3">at</span>{' '}
at
</span>{' '}
{formatFixedDecimals(activity.activity_details.liab_price, true)} {formatFixedDecimals(activity.activity_details.liab_price, true)}
</p> </p>
<p className="font-mono text-xs text-th-fgd-3"> <p className="font-mono text-xs text-th-fgd-3">

2
components/modals/UserSetupModal.tsx
View File

@ -462,7 +462,7 @@ const UserSetupModal = ({
allowNegative={false} allowNegative={false}
isNumericString={true} isNumericString={true}
decimalScale={tokenMax.decimals || 6} decimalScale={tokenMax.decimals || 6}
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover" className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
placeholder="0.00" placeholder="0.00"
value={depositAmount} value={depositAmount}
onValueChange={(e: NumberFormatValues) => { onValueChange={(e: NumberFormatValues) => {

2
components/stats/PerpMarketsTable.tsx
View File

@ -85,7 +85,7 @@ const PerpMarketsTable = ({
<Td> <Td>
<div className="flex items-center"> <div className="flex items-center">
<MarketLogos market={market} /> <MarketLogos market={market} />
<p className="font-body tracking-wide">{market.name}</p> <p className="font-body tracking-wider">{market.name}</p>
</div> </div>
</Td> </Td>
<Td> <Td>

2
components/stats/SpotMarketsTable.tsx
View File

@ -67,7 +67,7 @@ const SpotMarketsTable = () => {
<Td> <Td>
<div className="flex items-center"> <div className="flex items-center">
<MarketLogos market={market} /> <MarketLogos market={market} />
<p className="font-body tracking-wide">{market.name}</p> <p className="font-body tracking-wider">{market.name}</p>
</div> </div>
</Td> </Td>
<Td> <Td>

2
components/stats/TokenStats.tsx
View File

@ -119,7 +119,7 @@ const TokenStats = () => {
<QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" /> <QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
)} )}
</div> </div>
<p className="font-body tracking-wide">{bank.name}</p> <p className="font-body tracking-wider">{bank.name}</p>
</div> </div>
</Td> </Td>
<Td> <Td>

17
components/swap/SwapHistoryTable.tsx
View File

@ -114,10 +114,10 @@ const SwapHistoryTable = () => {
return ( return (
<TrBody key={signature}> <TrBody key={signature}>
<Td> <Td>
<p className="font-body tracking-wide"> <p className="font-body tracking-wider">
{dayjs(block_datetime).format('ddd D MMM')} {dayjs(block_datetime).format('ddd D MMM')}
</p> </p>
<p className="font-body text-xs tracking-wide text-th-fgd-3"> <p className="font-body text-xs text-th-fgd-3">
{dayjs(block_datetime).format('h:mma')} {dayjs(block_datetime).format('h:mma')}
</p> </p>
</Td> </Td>
@ -135,7 +135,7 @@ const SwapHistoryTable = () => {
<div> <div>
<p className="whitespace-nowrap"> <p className="whitespace-nowrap">
{`${swap_in_amount.toFixed(inDecimals)}`} {`${swap_in_amount.toFixed(inDecimals)}`}
<span className="ml-1 font-body tracking-wide text-th-fgd-3"> <span className="ml-1 font-body text-th-fgd-3">
{inSymbol} {inSymbol}
</span> </span>
</p> </p>
@ -160,7 +160,7 @@ const SwapHistoryTable = () => {
<div> <div>
<p className="whitespace-nowrap"> <p className="whitespace-nowrap">
{`${trimDecimals(swap_out_amount, outDecimals)}`} {`${trimDecimals(swap_out_amount, outDecimals)}`}
<span className="ml-1 font-body tracking-wide text-th-fgd-3"> <span className="ml-1 font-body text-th-fgd-3">
{outSymbol} {outSymbol}
</span> </span>
</p> </p>
@ -186,7 +186,7 @@ const SwapHistoryTable = () => {
<div className="flex flex-col text-right"> <div className="flex flex-col text-right">
<p> <p>
{borrowAmount} {borrowAmount}
<span className="ml-1 font-body tracking-wide text-th-fgd-3"> <span className="ml-1 font-body text-th-fgd-3">
{inSymbol} {inSymbol}
</span> </span>
</p> </p>
@ -194,7 +194,12 @@ const SwapHistoryTable = () => {
</Td> </Td>
<Td> <Td>
<div className="flex flex-col text-right"> <div className="flex flex-col text-right">
<p>${borrowFee}</p> <p>
{borrowFee}
<span className="ml-1 font-body text-th-fgd-3">
{inSymbol}
</span>
</p>
</div> </div>
</Td> </Td>
<Td> <Td>

18
components/swap/SwapReviewRouteInfo.tsx
View File

@ -340,22 +340,22 @@ const SwapReviewRouteInfo = ({
{swapRate ? ( {swapRate ? (
<> <>
1{' '} 1{' '}
<span className="font-body tracking-wide"> <span className="font-body tracking-wider">
{inputTokenInfo!.name} ≈{' '} {inputTokenInfo!.name} ≈{' '}
</span> </span>
{formatFixedDecimals(amountOut.div(amountIn).toNumber())}{' '} {formatFixedDecimals(amountOut.div(amountIn).toNumber())}{' '}
<span className="font-body tracking-wide"> <span className="font-body tracking-wider">
{outputTokenInfo?.symbol} {outputTokenInfo?.symbol}
</span> </span>
</> </>
) : ( ) : (
<> <>
1{' '} 1{' '}
<span className="font-body tracking-wide"> <span className="font-body tracking-wider">
{outputTokenInfo?.symbol} ≈{' '} {outputTokenInfo?.symbol} ≈{' '}
</span> </span>
{formatFixedDecimals(amountIn.div(amountOut).toNumber())}{' '} {formatFixedDecimals(amountIn.div(amountOut).toNumber())}{' '}
<span className="font-body tracking-wide"> <span className="font-body tracking-wider">
{inputTokenInfo!.symbol} {inputTokenInfo!.symbol}
</span> </span>
</> </>
@ -377,7 +377,7 @@ const SwapReviewRouteInfo = ({
}`} }`}
> >
{Decimal.abs(coinGeckoPriceDifference).toFixed(1)}%{' '} {Decimal.abs(coinGeckoPriceDifference).toFixed(1)}%{' '}
<span className="font-body tracking-wide text-th-fgd-3">{`${ <span className="font-body text-th-fgd-3">{`${
coinGeckoPriceDifference.lte(0) coinGeckoPriceDifference.lte(0)
? 'cheaper' ? 'cheaper'
: 'more expensive' : 'more expensive'
@ -398,7 +398,7 @@ const SwapReviewRouteInfo = ({
10 ** outputTokenInfo.decimals || 1, 10 ** outputTokenInfo.decimals || 1,
outputTokenInfo.decimals outputTokenInfo.decimals
)}{' '} )}{' '}
<span className="font-body tracking-wide"> <span className="font-body tracking-wider">
{outputTokenInfo?.symbol} {outputTokenInfo?.symbol}
</span> </span>
</p> </p>
@ -441,7 +441,7 @@ const SwapReviewRouteInfo = ({
</Tooltip> </Tooltip>
<p className="text-right font-mono text-sm text-th-fgd-2"> <p className="text-right font-mono text-sm text-th-fgd-2">
~{formatFixedDecimals(borrowAmount)}{' '} ~{formatFixedDecimals(borrowAmount)}{' '}
<span className="font-body tracking-wide"> <span className="font-body tracking-wider">
{inputTokenInfo?.symbol} {inputTokenInfo?.symbol}
</span> </span>
</p> </p>
@ -522,7 +522,7 @@ const SwapReviewRouteInfo = ({
.mul(inputBank!.loanOriginationFeeRate.toFixed()) .mul(inputBank!.loanOriginationFeeRate.toFixed())
.toNumber() .toNumber()
)}{' '} )}{' '}
<span className="font-body tracking-wide"> <span className="font-body tracking-wider">
{inputBank!.name} {inputBank!.name}
</span>{' '} </span>{' '}
( (
@ -560,7 +560,7 @@ const SwapReviewRouteInfo = ({
info.lpFee?.amount / info.lpFee?.amount /
Math.pow(10, feeToken.decimals) Math.pow(10, feeToken.decimals)
).toFixed(6)}{' '} ).toFixed(6)}{' '}
<span className="font-body tracking-wide"> <span className="font-body tracking-wider">
{feeToken?.symbol} {feeToken?.symbol}
</span>{' '} </span>{' '}
( (

2
components/trade/OpenOrders.tsx
View File

@ -292,7 +292,7 @@ const OpenOrders = () => {
minimumFractionDigits: getDecimalCount(tickSize), minimumFractionDigits: getDecimalCount(tickSize),
maximumFractionDigits: getDecimalCount(tickSize), maximumFractionDigits: getDecimalCount(tickSize),
})}{' '} })}{' '}
<span className="font-body tracking-wide text-th-fgd-4"> <span className="font-body text-th-fgd-4">
{quoteSymbol} {quoteSymbol}
</span> </span>
</span> </span>

16
components/trade/UnsettledTrades.tsx
View File

@ -167,17 +167,13 @@ const UnsettledTrades = ({
{unsettledSpotBalances[mktAddress].base ? ( {unsettledSpotBalances[mktAddress].base ? (
<div> <div>
{unsettledSpotBalances[mktAddress].base}{' '} {unsettledSpotBalances[mktAddress].base}{' '}
<span className="font-body tracking-wide text-th-fgd-4"> <span className="font-body text-th-fgd-4">{base}</span>
{base}
</span>
</div> </div>
) : null} ) : null}
{unsettledSpotBalances[mktAddress].quote ? ( {unsettledSpotBalances[mktAddress].quote ? (
<div className="ml-4"> <div className="ml-4">
{unsettledSpotBalances[mktAddress].quote}{' '} {unsettledSpotBalances[mktAddress].quote}{' '}
<span className="font-body tracking-wide text-th-fgd-4"> <span className="font-body text-th-fgd-4">{quote}</span>
{quote}
</span>
</div> </div>
) : null} ) : null}
</div> </div>
@ -255,17 +251,13 @@ const UnsettledTrades = ({
{unsettledSpotBalances[mktAddress].base ? ( {unsettledSpotBalances[mktAddress].base ? (
<span className="font-mono text-sm"> <span className="font-mono text-sm">
{unsettledSpotBalances[mktAddress].base}{' '} {unsettledSpotBalances[mktAddress].base}{' '}
<span className="font-body tracking-wide text-th-fgd-4"> <span className="font-body text-th-fgd-4">{base}</span>
{base}
</span>
</span> </span>
) : null} ) : null}
{unsettledSpotBalances[mktAddress].quote ? ( {unsettledSpotBalances[mktAddress].quote ? (
<span className="font-mono text-sm"> <span className="font-mono text-sm">
{unsettledSpotBalances[mktAddress].quote}{' '} {unsettledSpotBalances[mktAddress].quote}{' '}
<span className="font-body tracking-wide text-th-fgd-4"> <span className="font-body text-th-fgd-4">{quote}</span>
{quote}
</span>
</span> </span>
) : null} ) : null}
{connected ? ( {connected ? (

2
components/wallet/ConnectWalletButton.tsx
View File

@ -49,7 +49,7 @@ export const ConnectWalletButton: React.FC = () => {
{connecting ? <Loading className="h-4 w-4" /> : t('connect')} {connecting ? <Loading className="h-4 w-4" /> : t('connect')}
</div> </div>
<div className="text-xxs font-normal leading-3 tracking-wider text-th-fgd-3"> <div className="text-xxs font-normal leading-3 text-th-fgd-3">
{preselectedWalletName} {preselectedWalletName}
</div> </div>
</div> </div>