improve swap mobile layout
This commit is contained in:
saml33
parent
ff36519fe7
commit
2806f0b940
|
|
@ -313,9 +313,11 @@ const MobileTokenListItem = ({ bank }: { bank: Bank }) => {
|
|||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p>{bank.name}</p>
|
||||
<p className="text-sm">
|
||||
<span className="mr-1 text-th-fgd-4">{t('balance')}:</span>
|
||||
<p className="text-th-fgd-1">{bank.name}</p>
|
||||
<p className="font-mono text-sm text-th-fgd-1">
|
||||
<span className="mr-1 font-body text-th-fgd-4">
|
||||
{t('balance')}:
|
||||
</span>
|
||||
{mangoAccount
|
||||
? formatDecimal(mangoAccount.getTokenBalanceUi(bank))
|
||||
: 0}
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@ const SwapHistoryTable = ({
|
|||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<div className="mt-4 space-y-2">
|
||||
<div>
|
||||
{tradeHistory.map((h) => {
|
||||
const {
|
||||
block_datetime,
|
||||
|
|
@ -201,16 +201,8 @@ const SwapHistoryTable = ({
|
|||
} = h
|
||||
|
||||
const borrowAmount =
|
||||
swap_in_loan > 0
|
||||
? `${trimDecimals(
|
||||
swap_in_loan,
|
||||
countLeadingZeros(swap_in_loan) + 2
|
||||
)} ${swap_in_symbol}`
|
||||
: loan > 0
|
||||
? `${trimDecimals(
|
||||
loan,
|
||||
countLeadingZeros(loan) + 2
|
||||
)} ${swap_out_symbol}`
|
||||
loan > 0
|
||||
? `${trimDecimals(loan, countLeadingZeros(loan) + 2)}`
|
||||
: 0
|
||||
const borrowFee =
|
||||
swap_in_loan_origination_fee > 0
|
||||
|
|
@ -219,10 +211,7 @@ const SwapHistoryTable = ({
|
|||
? loan_origination_fee.toFixed(4)
|
||||
: 0
|
||||
return (
|
||||
<div
|
||||
key={signature}
|
||||
className="rounded-md border border-th-bkg-4 p-4"
|
||||
>
|
||||
<div key={signature} className="border-b border-th-bkg-3 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex w-1/2 items-center">
|
||||
|
|
@ -235,12 +224,15 @@ const SwapHistoryTable = ({
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1.5 whitespace-nowrap leading-none text-th-fgd-1">{`${swap_in_amount.toFixed(
|
||||
2
|
||||
)} ${swap_in_symbol}`}</p>
|
||||
<p className="text-xs leading-none text-th-fgd-3">
|
||||
<p className="mb-1.5 whitespace-nowrap font-mono leading-none text-th-fgd-1">
|
||||
{swap_in_amount.toFixed(2)}{' '}
|
||||
<span className="font-body">{swap_in_symbol}</span>
|
||||
</p>
|
||||
<p className="font-mono text-xs leading-none text-th-fgd-3">
|
||||
{formatFixedDecimals(swap_in_price_usd, true)}
|
||||
<span className="mx-1 text-th-fgd-4">|</span>
|
||||
<span className="mx-1 font-body text-th-fgd-4">
|
||||
|
|
||||
</span>
|
||||
{formatFixedDecimals(
|
||||
swap_in_amount * swap_in_price_usd,
|
||||
true
|
||||
|
|
@ -261,12 +253,15 @@ const SwapHistoryTable = ({
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1.5 whitespace-nowrap leading-none text-th-fgd-1">{`${swap_out_amount.toFixed(
|
||||
2
|
||||
)} ${swap_out_symbol}`}</p>
|
||||
<p className="text-xs leading-none text-th-fgd-3">
|
||||
<p className="mb-1.5 whitespace-nowrap leading-none text-th-fgd-1">
|
||||
{swap_out_amount.toFixed(2)}{' '}
|
||||
<span className="font-body">{swap_out_symbol}</span>
|
||||
</p>
|
||||
<p className="font-mono text-xs leading-none text-th-fgd-3">
|
||||
{formatFixedDecimals(swap_out_price_usd, true)}
|
||||
<span className="mx-1 text-th-fgd-4">|</span>
|
||||
<span className="mx-1 font-body text-th-fgd-4">
|
||||
|
|
||||
</span>
|
||||
{formatFixedDecimals(
|
||||
swap_out_amount * swap_out_price_usd,
|
||||
true
|
||||
|
|
@ -310,13 +305,16 @@ const SwapHistoryTable = ({
|
|||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">{t('borrow')}</p>
|
||||
<p className="text-th-fgd-1">{borrowAmount}</p>
|
||||
<p className="font-mono text-th-fgd-1">
|
||||
{borrowAmount}{' '}
|
||||
<span className="font-body">{swap_in_symbol}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{t('borrow-fee')}
|
||||
</p>
|
||||
<p className="text-th-fgd-1">${borrowFee}</p>
|
||||
<p className="font-mono text-th-fgd-1">${borrowFee}</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
|
|
|
|||
|
|
@ -246,7 +246,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
|||
</SheenLoader>
|
||||
</>
|
||||
) : chartData.length && baseTokenId && quoteTokenId ? (
|
||||
<div className="relative flex justify-between md:block">
|
||||
<div className="relative">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
{inputTokenInfo && outputTokenInfo ? (
|
||||
|
|
@ -309,8 +309,8 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 h-28 w-1/2 md:h-80 md:w-auto">
|
||||
<div className="-mb-2 flex justify-end md:absolute md:top-[2px] md:right-0">
|
||||
<div className="mt-2 h-40 w-auto md:h-80">
|
||||
<div className="absolute top-[2px] right-0 -mb-2 flex justify-end">
|
||||
<ChartRangeButtons
|
||||
activeValue={daysToShow}
|
||||
names={['24H', '7D', '30D']}
|
||||
|
|
|
|||
|
|
@ -90,6 +90,7 @@
|
|||
"total-interest-value": "Total Interest Value",
|
||||
"trade": "Trade",
|
||||
"trade-history": "Trade History",
|
||||
"transaction": "Transaction",
|
||||
"unavailable": "Unavailable",
|
||||
"update": "Update",
|
||||
"utilization": "Utilization",
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
{
|
||||
"account": "Account",
|
||||
"account-balance": "Account Balance",
|
||||
"account-closed": "Account Closed 👋",
|
||||
"account-balance": "Account Balance",
|
||||
"account-name": "Account Name",
|
||||
"account-name-desc": "Organize your accounts by giving them useful names",
|
||||
"account-update-failed": "Failed to update account",
|
||||
"account-update-success": "Account updated successfully",
|
||||
"account-value": "Account Value",
|
||||
"accounts": "Accounts",
|
||||
"amount": "Amount",
|
||||
"asset-weight": "Asset Weight",
|
||||
"asset-weight-desc": "The asset weight applies a haircut to the value of the collateral in your account health calculation. The lower the asset weight, the less the asset counts towards collateral.",
|
||||
"available": "Available",
|
||||
|
|
@ -23,8 +24,8 @@
|
|||
"chinese": "简体中文",
|
||||
"chinese-traditional": "繁體中文",
|
||||
"close-account": "Close Account",
|
||||
"closing-account": "Closing your account...",
|
||||
"close-account-desc": "Are you sure? Closing your account is irreversible.",
|
||||
"closing-account": "Closing your account...",
|
||||
"collateral-value": "Collateral Value",
|
||||
"connect": "Connect",
|
||||
"connect-helper": "Connect to get started",
|
||||
|
|
@ -46,7 +47,7 @@
|
|||
"governance": "Governance",
|
||||
"health": "Health",
|
||||
"health-impact": "Health Impact",
|
||||
"insufficient-sol": "The Solana blockchain requires 0.00757 SOL to create a Mango Account. This covers rent for your account and will be refunded if you close your account.",
|
||||
"insufficient-sol": "Solana requires 0.00757 SOL rent to create a Mango Account. This will be returned if you close your account.",
|
||||
"interest-earned": "Interest Earned",
|
||||
"interest-earned-paid": "Interest Earned",
|
||||
"language": "Language",
|
||||
|
|
@ -61,8 +62,10 @@
|
|||
"new-account": "New Account",
|
||||
"new-account-failed": "Failed to create account",
|
||||
"new-account-success": "Your new account is ready 😎",
|
||||
"oracle-price": "Oracle Price",
|
||||
"pnl": "PnL",
|
||||
"price": "Price",
|
||||
"quantity": "Quantity",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
"remove": "Remove",
|
||||
|
|
@ -73,6 +76,7 @@
|
|||
"settings": "Settings",
|
||||
"show-zero-balances": "Show Zero Balances",
|
||||
"spanish": "Español",
|
||||
"spread": "Spread",
|
||||
"stats": "Stats",
|
||||
"swap": "Swap",
|
||||
"theme": "Theme",
|
||||
|
|
@ -86,11 +90,12 @@
|
|||
"total-interest-value": "Total Interest Value",
|
||||
"trade": "Trade",
|
||||
"trade-history": "Trade History",
|
||||
"transaction": "Transaction",
|
||||
"unavailable": "Unavailable",
|
||||
"update": "Update",
|
||||
"utilization": "Utilization",
|
||||
"wallet-balance": "Wallet Balance",
|
||||
"wallet-disconnected": "Billetera desconectada",
|
||||
"wallet-disconnected": "Disconnected from wallet",
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawal-value": "Withdrawal Value"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
{
|
||||
"account": "Account",
|
||||
"account-balance": "Account Balance",
|
||||
"account-closed": "Account Closed 👋",
|
||||
"account-balance": "Account Balance",
|
||||
"account-name": "Account Name",
|
||||
"account-name-desc": "Organize your accounts by giving them useful names",
|
||||
"account-update-failed": "Failed to update account",
|
||||
"account-update-success": "Account updated successfully",
|
||||
"account-value": "Account Value",
|
||||
"accounts": "Accounts",
|
||||
"amount": "Amount",
|
||||
"asset-weight": "Asset Weight",
|
||||
"asset-weight-desc": "The asset weight applies a haircut to the value of the collateral in your account health calculation. The lower the asset weight, the less the asset counts towards collateral.",
|
||||
"available": "Available",
|
||||
|
|
@ -23,8 +24,8 @@
|
|||
"chinese": "简体中文",
|
||||
"chinese-traditional": "繁體中文",
|
||||
"close-account": "Close Account",
|
||||
"closing-account": "Closing your account...",
|
||||
"close-account-desc": "Are you sure? Closing your account is irreversible.",
|
||||
"closing-account": "Closing your account...",
|
||||
"collateral-value": "Collateral Value",
|
||||
"connect": "Connect",
|
||||
"connect-helper": "Connect to get started",
|
||||
|
|
@ -46,7 +47,7 @@
|
|||
"governance": "Governance",
|
||||
"health": "Health",
|
||||
"health-impact": "Health Impact",
|
||||
"insufficient-sol": "The Solana blockchain requires 0.00757 SOL to create a Mango Account. This covers rent for your account and will be refunded if you close your account.",
|
||||
"insufficient-sol": "Solana requires 0.00757 SOL rent to create a Mango Account. This will be returned if you close your account.",
|
||||
"interest-earned": "Interest Earned",
|
||||
"interest-earned-paid": "Interest Earned",
|
||||
"language": "Language",
|
||||
|
|
@ -61,8 +62,10 @@
|
|||
"new-account": "New Account",
|
||||
"new-account-failed": "Failed to create account",
|
||||
"new-account-success": "Your new account is ready 😎",
|
||||
"oracle-price": "Oracle Price",
|
||||
"pnl": "PnL",
|
||||
"price": "Price",
|
||||
"quantity": "Quantity",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
"remove": "Remove",
|
||||
|
|
@ -73,6 +76,7 @@
|
|||
"settings": "Settings",
|
||||
"show-zero-balances": "Show Zero Balances",
|
||||
"spanish": "Español",
|
||||
"spread": "Spread",
|
||||
"stats": "Stats",
|
||||
"swap": "Swap",
|
||||
"theme": "Theme",
|
||||
|
|
@ -86,11 +90,12 @@
|
|||
"total-interest-value": "Total Interest Value",
|
||||
"trade": "Trade",
|
||||
"trade-history": "Trade History",
|
||||
"transaction": "Transaction",
|
||||
"unavailable": "Unavailable",
|
||||
"update": "Update",
|
||||
"utilization": "Utilization",
|
||||
"wallet-balance": "Wallet Balance",
|
||||
"wallet-disconnected": "断开钱包连结",
|
||||
"wallet-disconnected": "Disconnected from wallet",
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawal-value": "Withdrawal Value"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
{
|
||||
"account": "Account",
|
||||
"account-balance": "Account Balance",
|
||||
"account-closed": "Account Closed 👋",
|
||||
"account-balance": "Account Balance",
|
||||
"account-name": "Account Name",
|
||||
"account-name-desc": "Organize your accounts by giving them useful names",
|
||||
"account-update-failed": "Failed to update account",
|
||||
"account-update-success": "Account updated successfully",
|
||||
"account-value": "Account Value",
|
||||
"accounts": "Accounts",
|
||||
"amount": "Amount",
|
||||
"asset-weight": "Asset Weight",
|
||||
"asset-weight-desc": "The asset weight applies a haircut to the value of the collateral in your account health calculation. The lower the asset weight, the less the asset counts towards collateral.",
|
||||
"available": "Available",
|
||||
|
|
@ -46,7 +47,7 @@
|
|||
"governance": "Governance",
|
||||
"health": "Health",
|
||||
"health-impact": "Health Impact",
|
||||
"insufficient-sol": "The Solana blockchain requires 0.00757 SOL to create a Mango Account. This covers rent for your account and will be refunded if you close your account.",
|
||||
"insufficient-sol": "Solana requires 0.00757 SOL rent to create a Mango Account. This will be returned if you close your account.",
|
||||
"interest-earned": "Interest Earned",
|
||||
"interest-earned-paid": "Interest Earned",
|
||||
"language": "Language",
|
||||
|
|
@ -61,8 +62,10 @@
|
|||
"new-account": "New Account",
|
||||
"new-account-failed": "Failed to create account",
|
||||
"new-account-success": "Your new account is ready 😎",
|
||||
"oracle-price": "Oracle Price",
|
||||
"pnl": "PnL",
|
||||
"price": "Price",
|
||||
"quantity": "Quantity",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
"remove": "Remove",
|
||||
|
|
@ -73,6 +76,7 @@
|
|||
"settings": "Settings",
|
||||
"show-zero-balances": "Show Zero Balances",
|
||||
"spanish": "Español",
|
||||
"spread": "Spread",
|
||||
"stats": "Stats",
|
||||
"swap": "Swap",
|
||||
"theme": "Theme",
|
||||
|
|
@ -86,11 +90,13 @@
|
|||
"total-interest-value": "Total Interest Value",
|
||||
"trade": "Trade",
|
||||
"trade-history": "Trade History",
|
||||
"transaction": "Transaction",
|
||||
"unavailable": "Unavailable",
|
||||
"update": "Update",
|
||||
"utilization": "Utilization",
|
||||
"wallet-balance": "Wallet Balance",
|
||||
"wallet-disconnected": "斷開錢包連結",
|
||||
"wallet-disconnected": "Disconnected from wallet",
|
||||
"withdraw": "Withdraw",
|
||||
"withdrawal-value": "Withdrawal Value"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue