feat: support dynamic balance text for asset input (aave#1349)

* feat: support dynamic balance text for asset input

* chore: withdraw modal text

* chore: use lt() method

Author: drewcook

src/components/transactions/AssetInput.tsx

@@ -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>({
@@ -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;
@@ -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

src/components/transactions/Borrow/BorrowModalContent.tsx

@@ -242,6 +242,7 @@ export const BorrowModalContent = ({
         capType={CapType.borrowCap}
         isMaxSelected={isMaxSelected}
         maxValue={maxAmountToBorrow.toString(10)}
+        balanceText={<Trans>Available</Trans>}
       />
 
       {blockingError !== undefined && (

src/components/transactions/Repay/CollateralRepayModalContent.tsx

@@ -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}
@@ -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 && (

src/components/transactions/Repay/RepayModalContent.tsx

@@ -219,6 +219,7 @@ export const RepayModalContent = ({
         onSelect={setTokenToRepayWith}
         isMaxSelected={isMaxSelected}
         maxValue={maxAmountToRepay.toString(10)}
+        balanceText={<Trans>Wallet balance</Trans>}
       />
 
       {maxRepayWithDustRemaining && (

src/components/transactions/Stake/StakeModalContent.tsx

@@ -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">

src/components/transactions/Supply/SupplyModalContent.tsx

@@ -241,6 +241,7 @@ export const SupplyModalContent = ({
         isMaxSelected={isMaxSelected}
         disabled={supplyTxState.loading}
         maxValue={maxAmountToSupply.toString(10)}
+        balanceText={<Trans>Wallet balance</Trans>}
       />
 
       {blockingError !== undefined && (

src/components/transactions/Swap/SwapModalContent.tsx

@@ -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

src/components/transactions/UnStake/UnStakeModalContent.tsx

@@ -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">

src/components/transactions/Withdraw/WithdrawModalContent.tsx

@@ -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 && (