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

use amount and value in account action modals

This commit is contained in:
saml33 2022-12-29 13:01:37 +11:00
parent d1b2bf5c87
commit 99f190d576
11 changed files with 152 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
components/BorrowForm.tsx
View File

@ -315,32 +315,62 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
/>
{tokenBalance ? (
<div className="flex justify-between">
<p>{t('withdraw-value')}</p>
<p className="font-mono text-th-fgd-1">
{isBorrow
? formatFixedDecimals(
bank.uiPrice * tokenBalance.toNumber(),
true
)
: inputAmount
? formatFixedDecimals(
bank.uiPrice * parseFloat(inputAmount),
true
)
: '$0.00'}
<p>{t('withdraw-amount')}</p>
<p className="font-mono text-th-fgd-2">
{isBorrow ? (
<>
{tokenBalance.toNumber()}{' '}
<span className="text-xs text-th-fgd-3">
(
{formatFixedDecimals(
bank.uiPrice * tokenBalance.toNumber(),
true
)}
</span>
</>
) : inputAmount ? (
<>
{inputAmount}{' '}
<span className="text-xs text-th-fgd-3">
(
{formatFixedDecimals(
bank.uiPrice * parseFloat(inputAmount),
true
)}
)
</span>
</>
) : (
<>
0{' '}
<span className="text-xs text-th-fgd-3">($0.00)</span>
</>
)}
</p>
</div>
) : null}
<div className="flex justify-between">
<p>{t('borrow-value')}</p>
<p className="font-mono text-th-fgd-1">
{isBorrow
? formatFixedDecimals(
bank.uiPrice *
(parseFloat(inputAmount) - tokenBalance.toNumber()),
true
)
: '$0.00'}
<p>{t('borrow-amount')}</p>
<p className="font-mono text-th-fgd-2">
{isBorrow ? (
<>
{parseFloat(inputAmount) - tokenBalance.toNumber()}{' '}
<span className="text-xs text-th-fgd-3">
(
{formatFixedDecimals(
bank.uiPrice *
(parseFloat(inputAmount) -
tokenBalance.toNumber()),
true
)}
)
</span>
</>
) : (
<>
0 <span className="text-xs text-th-fgd-3">($0.00)</span>
</>
)}
</p>
</div>
<div className="flex justify-between">
@ -349,7 +379,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
{t('loan-origination-fee')}
</p>
</Tooltip>
<p className="font-mono text-th-fgd-1">
<p className="font-mono text-th-fgd-2">
{isBorrow
? formatFixedDecimals(
bank.uiPrice *
@ -381,7 +411,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
<ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
{t('swap:insufficient-collateral')}
</div>
) : isBorrow ? (
) : isBorrow || !inputAmount ? (
<div className="flex items-center">
<ArrowUpLeftIcon className="mr-2 h-5 w-5" />
{tokenBalance.toNumber()

29
components/DepositForm.tsx
View File

@ -317,14 +317,25 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
isDeposit
/>
<div className="flex justify-between">
<p>{t('deposit-value')}</p>
<p className="font-mono">
{bank?.uiPrice
? formatFixedDecimals(
bank.uiPrice * Number(inputAmount),
true
)
: '-'}
<p>{t('deposit-amount')}</p>
<p className="font-mono text-th-fgd-2">
{bank?.uiPrice && inputAmount ? (
<>
{inputAmount}{' '}
<span className="text-xs text-th-fgd-3">
(
{formatFixedDecimals(
bank.uiPrice * Number(inputAmount),
true
)}
)
</span>
</>
) : (
<>
0 <span className="text-xs text-th-fgd-3">($0.00)</span>
</>
)}
</p>
</div>
{/* <div className="flex justify-between">
@ -339,7 +350,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
<Tooltip content={t('tooltip-collateral-value')}>
<p className="tooltip-underline">{t('collateral-value')}</p>
</Tooltip>
<p className="font-mono">
<p className="font-mono text-th-fgd-2">
{formatFixedDecimals(
bank!.uiPrice! *
Number(inputAmount) *

29
components/RepayForm.tsx
View File

@ -285,21 +285,32 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
/>
) : null}
<div className="flex justify-between">
<p>{t('repayment-value')}</p>
<p className="font-mono">
{bank?.uiPrice
? formatFixedDecimals(
bank.uiPrice * Number(inputAmount),
true
)
: '-'}
<p>{t('repayment-amount')}</p>
<p className="font-mono text-th-fgd-2">
{bank?.uiPrice && inputAmount ? (
<>
{inputAmount}{' '}
<span className="text-xs text-th-fgd-3">
(
{formatFixedDecimals(
bank.uiPrice * Number(inputAmount),
true
)}
)
</span>
</>
) : (
<>
0 <span className="text-xs text-th-fgd-3">($0.00)</span>
</>
)}
</p>
</div>
<div className="flex justify-between">
<div className="flex items-center">
<p>{t('outstanding-balance')}</p>
</div>
<p className="font-mono">
<p className="font-mono text-th-fgd-2">
{floorToDecimal(
borrowAmount - Number(inputAmount),
walletBalance.maxDecimals

27
components/WithdrawForm.tsx
View File

@ -278,14 +278,25 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
uiAmount={Number(inputAmount)}
/>
<div className="flex justify-between">
<p>{t('withdraw-value')}</p>
<p className="font-mono text-th-fgd-1">
{bank?.uiPrice
? formatFixedDecimals(
bank.uiPrice * Number(inputAmount),
true
)
: '-'}
<p>{t('withdraw-amount')}</p>
<p className="font-mono text-th-fgd-2">
{bank?.uiPrice && inputAmount ? (
<>
{inputAmount}{' '}
<span className="text-xs text-th-fgd-3">
(
{formatFixedDecimals(
bank.uiPrice * Number(inputAmount),
true
)}
)
</span>
</>
) : (
<>
0 <span className="text-xs text-th-fgd-3">($0.00)</span>
</>
)}
</p>
</div>
</div>

30
components/modals/UserSetupModal.tsx
View File

@ -473,14 +473,28 @@ const UserSetupModal = ({
</div>
<div className="mb-10 border-y border-th-bkg-3">
<div className="flex justify-between px-2 py-4">
<p>{t('deposit-value')}</p>
<p className="font-mono">
{depositBank
? formatFixedDecimals(
depositBank.uiPrice * Number(depositAmount),
true
)
: ''}
<p>{t('deposit-amount')}</p>
<p className="font-mono text-th-fgd-2">
{depositBank?.uiPrice && depositAmount ? (
<>
{depositAmount}{' '}
<span className="text-xs text-th-fgd-3">
(
{formatFixedDecimals(
depositBank.uiPrice * Number(depositAmount),
true
)}
)
</span>
</>
) : (
<>
0{' '}
<span className="text-xs text-th-fgd-3">
($0.00)
</span>
</>
)}
</p>
</div>
</div>

7
public/locales/en/common.json
View File

@ -24,7 +24,6 @@
"borrow-fee": "Borrow Fee",
"borrow-funds": "Borrow Funds",
"borrow-rate": "Borrow Rate (APR)",
"borrow-value": "Borrow Value",
"buy": "Buy",
"cancel": "Cancel",
"chart-unavailable": "Chart Unavailable",
@ -52,9 +51,9 @@
"delegate-desc": "Delegate your Mango account to another wallet address",
"delegate-placeholder": "Enter a wallet address to delegate to",
"deposit": "Deposit",
"deposit-amount": "Deposit Amount",
"deposit-more-sol": "Your SOL wallet balance is low. Add more to pay for transactions",
"deposit-rate": "Deposit Rate (APR)",
"deposit-value": "Deposit Value",
"disconnect": "Disconnect",
"edit-account": "Edit Account",
"edit-profile-image": "Edit Profile Image",
@ -94,7 +93,7 @@
"remove-delegate": "Remove Delegate",
"repay": "Repay",
"repay-borrow": "Repay Borrow",
"repayment-value": "Repayment Value",
"repayment-amount": "Repayment Amount",
"rolling-change": "24h Change",
"save": "Save",
"select-borrow-token": "Select Borrow Token",
@ -135,6 +134,6 @@
"wallet-balance": "Wallet Balance",
"wallet-disconnected": "Disconnected from wallet",
"withdraw": "Withdraw",
"withdraw-value": "Withdraw Value"
"withdraw-amount": "Withdraw Amount"
}

7
public/locales/es/common.json
View File

@ -24,7 +24,6 @@
"borrow-fee": "Borrow Fee",
"borrow-funds": "Borrow Funds",
"borrow-rate": "Borrow Rate (APR)",
"borrow-value": "Borrow Value",
"buy": "Buy",
"cancel": "Cancel",
"chart-unavailable": "Chart Unavailable",
@ -52,9 +51,9 @@
"delegate-desc": "Delegate your Mango account to another wallet address",
"delegate-placeholder": "Enter a wallet address to delegate to",
"deposit": "Deposit",
"deposit-amount": "Deposit Amount",
"deposit-more-sol": "Your SOL wallet balance is low. Add more to pay for transactions",
"deposit-rate": "Deposit Rate (APR)",
"deposit-value": "Deposit Value",
"disconnect": "Disconnect",
"edit-account": "Edit Account",
"edit-profile-image": "Edit Profile Image",
@ -94,7 +93,7 @@
"remove-delegate": "Remove Delegate",
"repay": "Repay",
"repay-borrow": "Repay Borrow",
"repayment-value": "Repayment Value",
"repayment-amount": "Repayment Amount",
"rolling-change": "24h Change",
"save": "Save",
"select-borrow-token": "Select Borrow Token",
@ -135,6 +134,6 @@
"wallet-balance": "Wallet Balance",
"wallet-disconnected": "Disconnected from wallet",
"withdraw": "Withdraw",
"withdraw-value": "Withdraw Value"
"withdraw-amount": "Withdraw Amount"
}

7
public/locales/ru/common.json
View File

@ -24,7 +24,6 @@
"borrow-fee": "Borrow Fee",
"borrow-funds": "Borrow Funds",
"borrow-rate": "Borrow Rate (APR)",
"borrow-value": "Borrow Value",
"buy": "Buy",
"cancel": "Cancel",
"chart-unavailable": "Chart Unavailable",
@ -52,9 +51,9 @@
"delegate-desc": "Delegate your Mango account to another wallet address",
"delegate-placeholder": "Enter a wallet address to delegate to",
"deposit": "Deposit",
"deposit-amount": "Deposit Amount",
"deposit-more-sol": "Your SOL wallet balance is low. Add more to pay for transactions",
"deposit-rate": "Deposit Rate (APR)",
"deposit-value": "Deposit Value",
"disconnect": "Disconnect",
"edit-account": "Edit Account",
"edit-profile-image": "Edit Profile Image",
@ -94,7 +93,7 @@
"remove-delegate": "Remove Delegate",
"repay": "Repay",
"repay-borrow": "Repay Borrow",
"repayment-value": "Repayment Value",
"repayment-amount": "Repayment Amount",
"rolling-change": "24h Change",
"save": "Save",
"select-borrow-token": "Select Borrow Token",
@ -135,6 +134,6 @@
"wallet-balance": "Wallet Balance",
"wallet-disconnected": "Disconnected from wallet",
"withdraw": "Withdraw",
"withdraw-value": "Withdraw Value"
"withdraw-amount": "Withdraw Amount"
}

7
public/locales/zh/common.json
View File

@ -24,7 +24,6 @@
"borrow-fee": "Borrow Fee",
"borrow-funds": "Borrow Funds",
"borrow-rate": "Borrow Rate (APR)",
"borrow-value": "Borrow Value",
"buy": "Buy",
"cancel": "Cancel",
"chart-unavailable": "Chart Unavailable",
@ -52,9 +51,9 @@
"delegate-desc": "Delegate your Mango account to another wallet address",
"delegate-placeholder": "Enter a wallet address to delegate to",
"deposit": "Deposit",
"deposit-amount": "Deposit Amount",
"deposit-more-sol": "Your SOL wallet balance is low. Add more to pay for transactions",
"deposit-rate": "Deposit Rate (APR)",
"deposit-value": "Deposit Value",
"disconnect": "Disconnect",
"edit-account": "Edit Account",
"edit-profile-image": "Edit Profile Image",
@ -94,7 +93,7 @@
"remove-delegate": "Remove Delegate",
"repay": "Repay",
"repay-borrow": "Repay Borrow",
"repayment-value": "Repayment Value",
"repayment-amount": "Repayment Amount",
"rolling-change": "24h Change",
"save": "Save",
"select-borrow-token": "Select Borrow Token",
@ -135,6 +134,6 @@
"wallet-balance": "Wallet Balance",
"wallet-disconnected": "Disconnected from wallet",
"withdraw": "Withdraw",
"withdraw-value": "Withdraw Value"
"withdraw-amount": "Withdraw Amount"
}

7
public/locales/zh_tw/common.json
View File

@ -24,7 +24,6 @@
"borrow-fee": "Borrow Fee",
"borrow-funds": "Borrow Funds",
"borrow-rate": "Borrow Rate (APR)",
"borrow-value": "Borrow Value",
"buy": "Buy",
"cancel": "Cancel",
"chart-unavailable": "Chart Unavailable",
@ -52,9 +51,9 @@
"delegate-desc": "Delegate your Mango account to another wallet address",
"delegate-placeholder": "Enter a wallet address to delegate to",
"deposit": "Deposit",
"deposit-amount": "Deposit Amount",
"deposit-more-sol": "Your SOL wallet balance is low. Add more to pay for transactions",
"deposit-rate": "Deposit Rate (APR)",
"deposit-value": "Deposit Value",
"disconnect": "Disconnect",
"edit-account": "Edit Account",
"edit-profile-image": "Edit Profile Image",
@ -94,7 +93,7 @@
"remove-delegate": "Remove Delegate",
"repay": "Repay",
"repay-borrow": "Repay Borrow",
"repayment-value": "Repayment Value",
"repayment-amount": "Repayment Amount",
"rolling-change": "24h Change",
"save": "Save",
"select-borrow-token": "Select Borrow Token",
@ -135,6 +134,6 @@
"wallet-balance": "Wallet Balance",
"wallet-disconnected": "Disconnected from wallet",
"withdraw": "Withdraw",
"withdraw-value": "Withdraw Value"
"withdraw-amount": "Withdraw Amount"
}

4
utils/constants.ts
View File

@ -60,6 +60,6 @@ export const DEFAULT_MARKET_NAME = 'SOL/USDC'
export const MIN_SOL_BALANCE = 0.04
export const ACCOUNT_ACTION_MODAL_HEIGHT = '496px'
export const ACCOUNT_ACTION_MODAL_HEIGHT = '506px'
export const ACCOUNT_ACTION_MODAL_INNER_HEIGHT = '434px'
export const ACCOUNT_ACTION_MODAL_INNER_HEIGHT = '444px'