Skip to content

feat: support dynamic balance text for asset input #1349

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 8, 2022
Merged

feat: support dynamic balance text for asset input #1349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2985afd
feat: support dynamic balance text for asset input
drewcook Dec 7, 2022
bb83e8e
chore: withdraw modal text
drewcook Dec 8, 2022
30b94b6
chore: use lt() method
drewcook Dec 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/components/transactions/AssetInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export interface AssetInputProps<T extends Asset = Asset> {
maxValue?: string;
isMaxSelected?: boolean;
inputTitle?: ReactNode;
balanceText?: ReactNode; // Support translated text
}

export const AssetInput = <T extends Asset = Asset>({
Expand All @@ -87,8 +88,9 @@ export const AssetInput = <T extends Asset = Asset>({
assets,
capType,
maxValue,
inputTitle,
isMaxSelected,
inputTitle,
balanceText,
}: AssetInputProps<T>) => {
const handleSelect = (event: SelectChangeEvent) => {
const newAsset = assets.find((asset) => asset.symbol === event.target.value) as T;
Expand Down Expand Up @@ -256,7 +258,7 @@ export const AssetInput = <T extends Asset = Asset>({
{asset.balance && onChange && (
<>
<Typography component="div" variant="secondary12" color="text.secondary">
<Trans>Balance</Trans>{' '}
{balanceText && balanceText !== '' ? balanceText : <Trans>Balance</Trans>}{' '}
<FormattedNumber
value={asset.balance}
compact
Expand Down
1 change: 1 addition & 0 deletions src/components/transactions/Borrow/BorrowModalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,7 @@ export const BorrowModalContent = ({
capType={CapType.borrowCap}
isMaxSelected={isMaxSelected}
maxValue={maxAmountToBorrow.toString(10)}
balanceText={<Trans>Available</Trans>}
/>

{blockingError !== undefined && (
Expand Down
2 changes: 2 additions & 0 deletions src/components/transactions/Repay/CollateralRepayModalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,7 @@ export function CollateralRepayModalContent({
isMaxSelected={isMaxSelected}
maxValue={debt}
inputTitle={<Trans>Debt amount to repay</Trans>}
balanceText={<Trans>Borrow balance</Trans>}
/>
<AssetInput
value={inputAmount}
Expand All @@ -208,6 +209,7 @@ export function CollateralRepayModalContent({
assets={repayTokens}
onSelect={setTokenToRepayWith}
inputTitle={<Trans>Collateral amount to repay with</Trans>}
balanceText={<Trans>Borrow balance</Trans>}
disableInput
/>
{blockingError !== undefined && (
Expand Down
1 change: 1 addition & 0 deletions src/components/transactions/Repay/RepayModalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,7 @@ export const RepayModalContent = ({
onSelect={setTokenToRepayWith}
isMaxSelected={isMaxSelected}
maxValue={maxAmountToRepay.toString(10)}
balanceText={<Trans>Wallet balance</Trans>}
/>

{maxRepayWithDustRemaining && (
Expand Down
1 change: 1 addition & 0 deletions src/components/transactions/Stake/StakeModalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ export const StakeModalContent = ({ stakeAssetName, icon }: StakeProps) => {
]}
isMaxSelected={isMaxSelected}
maxValue={walletBalance.toString()}
balanceText={<Trans>Wallet balance</Trans>}
/>
{blockingError !== undefined && (
<Typography variant="helperText" color="red">
Expand Down
1 change: 1 addition & 0 deletions src/components/transactions/Supply/SupplyModalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,7 @@ export const SupplyModalContent = ({
isMaxSelected={isMaxSelected}
disabled={supplyTxState.loading}
maxValue={maxAmountToSupply.toString(10)}
balanceText={<Trans>Wallet balance</Trans>}
/>

{blockingError !== undefined && (
Expand Down
2 changes: 2 additions & 0 deletions src/components/transactions/Swap/SwapModalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,13 +190,15 @@ export const SwapModalContent = ({
]}
maxValue={maxAmountToSwap}
isMaxSelected={isMaxSelected}
balanceText={<Trans>Supply balance</Trans>}
/>
<AssetInput
value={outputAmount}
onSelect={setTargetReserve}
usdValue={outputAmountUSD}
symbol={targetReserve.symbol}
assets={swapTargets}
balanceText={<Trans>Supply balance</Trans>}
disableInput
/>
<Box
Expand Down
1 change: 1 addition & 0 deletions src/components/transactions/UnStake/UnStakeModalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ export const UnStakeModalContent = ({ stakeAssetName, icon }: UnStakeProps) => {
]}
isMaxSelected={isMaxSelected}
maxValue={walletBalance}
balanceText={<Trans>Staking balance</Trans>}
/>
{blockingError !== undefined && (
<Typography variant="helperText" color="red">
Expand Down
7 changes: 7 additions & 0 deletions src/components/transactions/Withdraw/WithdrawModalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,13 @@ export const WithdrawModalContent = ({
isMaxSelected={isMaxSelected}
disabled={withdrawTxState.loading}
maxValue={maxAmountToWithdraw.toString(10)}
balanceText={
unborrowedLiquidity.lt(underlyingBalance) ? (
<Trans>Available</Trans>
) : (
<Trans>Supply balance</Trans>
)
}
/>

{blockingError !== undefined && (
Expand Down
2 changes: 1 addition & 1 deletion src/locales/en/messages.js
View file
Open in desktop

Large diffs are not rendered by default.

17 changes: 17 additions & 0 deletions src/locales/en/messages.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,8 @@ msgstr "Assets to supply"
msgid "Author"
msgstr "Author"

#: src/components/transactions/Borrow/BorrowModalContent.tsx
#: src/components/transactions/Withdraw/WithdrawModalContent.tsx
#: src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsList.tsx
msgid "Available"
msgstr "Available"
Expand Down Expand Up @@ -315,6 +317,11 @@ msgstr "Borrow APY, variable"
msgid "Borrow and repay in same block is not allowed"
msgstr "Borrow and repay in same block is not allowed"

#: src/components/transactions/Repay/CollateralRepayModalContent.tsx
#: src/components/transactions/Repay/CollateralRepayModalContent.tsx
msgid "Borrow balance"
msgstr "Borrow balance"

#: src/modules/reserve-overview/BorrowInfo.tsx
msgid "Borrow cap"
msgstr "Borrow cap"
Expand Down Expand Up @@ -1554,6 +1561,10 @@ msgstr "Staking APR"
msgid "Staking Rewards"
msgstr "Staking Rewards"

#: src/components/transactions/UnStake/UnStakeModalContent.tsx
msgid "Staking balance"
msgstr "Staking balance"

#: pages/governance/proposal/[proposalId].governance.tsx
msgid "Started"
msgstr "Started"
Expand Down Expand Up @@ -1589,6 +1600,9 @@ msgid "Supply apy"
msgstr "Supply apy"

#: src/components/transactions/CollateralChange/CollateralChangeModalContent.tsx
#: src/components/transactions/Swap/SwapModalContent.tsx
#: src/components/transactions/Swap/SwapModalContent.tsx
#: src/components/transactions/Withdraw/WithdrawModalContent.tsx
#: src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListMobileItem.tsx
#: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsListMobileItem.tsx
msgid "Supply balance"
Expand Down Expand Up @@ -2059,7 +2073,10 @@ msgstr "Voting results"
msgid "Wallet Balance"
msgstr "Wallet Balance"

#: src/components/transactions/Repay/RepayModalContent.tsx
#: src/components/transactions/Repay/RepayTypeSelector.tsx
#: src/components/transactions/Stake/StakeModalContent.tsx
#: src/components/transactions/Supply/SupplyModalContent.tsx
#: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsList.tsx
#: src/modules/faucet/FaucetAssetsList.tsx
#: src/modules/reserve-overview/ReserveActions.tsx
Expand Down