chore: Updated balance component (#11413)

![Screenshot 2025-03-27 at 19 09
53](https://github.com/user-attachments/assets/f821f06f-3142-43dd-9b8f-0104707fdf68)
![Screenshot 2025-03-27 at 19 10
01](https://github.com/user-attachments/assets/0d982ae7-feba-4cfc-bef3-f478d5dfbe8d)


<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the `@orbs-network/twap-ui` and
`@orbs-network/twap-ui-pancake` packages to version `0.11.34`,
introduces new functionalities in the `Twap.tsx` file, and enhances
balance handling in the `TWAPPanel` component.

### Detailed summary
- Updated `@orbs-network/twap-ui` and `@orbs-network/twap-ui-pancake` to
`0.11.34`.
- Added imports for `Orders`, `TWAP`, `ToastProps`, `Percent`, and
`useCurrencyBalances`.
- Introduced a new `Balance` component to manage token balances and user
input.
- Enhanced `onPercentInput` and `onMax` functions for better balance
management.

> The following files were skipped due to too many changes:
`pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

Author: denis-orbs

Diff for: apps/web/package.json

@@ -41,8 +41,8 @@
     "@gnosis.pm/safe-apps-wagmi": "^1.2.0",
     "@kyberswap/pancake-liquidity-widgets": "1.0.6",
     "@next/bundle-analyzer": "13.0.7",
-    "@orbs-network/twap-ui": "0.11.31",
-    "@orbs-network/twap-ui-pancake": "0.11.31",
+    "@orbs-network/twap-ui": "0.11.34",
+    "@orbs-network/twap-ui-pancake": "0.11.34",
     "@pancakeswap/achievements": "workspace:*",
     "@pancakeswap/blog": "workspace:*",
     "@pancakeswap/canonical-bridge": "workspace:*",

Diff for: apps/web/src/views/Swap/Twap/Twap.tsx

@@ -1,7 +1,18 @@
-import { Orders, ToastProps, TWAP as PancakeTWAP } from '@orbs-network/twap-ui-pancake'
+import { Orders, TWAP as PancakeTWAP, ToastProps } from '@orbs-network/twap-ui-pancake'
 import { useTheme } from '@pancakeswap/hooks'
+import { Percent } from '@pancakeswap/sdk'
 import { Currency, CurrencyAmount, TradeType } from '@pancakeswap/swap-sdk-core'
-import { AutoColumn, Button, useMatchBreakpoints, useModal, useToast, useTooltip } from '@pancakeswap/uikit'
+import {
+  AutoColumn,
+  Button,
+  domAnimation,
+  LazyAnimatePresence,
+  useMatchBreakpoints,
+  useModal,
+  useToast,
+  useTooltip,
+} from '@pancakeswap/uikit'
+
 import replaceBrowserHistoryMultiple from '@pancakeswap/utils/replaceBrowserHistoryMultiple'
 import { useUserSingleHopOnly } from '@pancakeswap/utils/user'
 import { CurrencyLogo, NumericalInput, SwapUIV2 } from '@pancakeswap/widgets-internal'
@@ -26,8 +37,10 @@ import {
   useUserV2SwapEnable,
   useUserV3SwapEnable,
 } from 'state/user/smartRouter'
+import { useCurrencyBalances } from 'state/wallet/hooks'
 import { keyframes, styled } from 'styled-components'
 import currencyId from 'utils/currencyId'
+import { maxAmountSpend } from 'utils/maxAmountSpend'
 import { useAccount } from 'wagmi'
 import ArrowDark from '../../../../public/images/swap/arrow_dark.json' assert { type: 'json' }
 import ArrowLight from '../../../../public/images/swap/arrow_light.json' assert { type: 'json' }
@@ -202,10 +215,67 @@ export function TWAPPanel({ limit }: { limit?: boolean }) {
       FlipButton={FlipButton}
       Input={Input}
       CurrencyLogo={TokenLogo}
+      Balance={Balance}
     />
   )
 }
 
+const Balance = ({
+  balance,
+  insufficientBalance,
+  isInputFocus,
+  onValueChange,
+  isSrcToken,
+}: {
+  balance?: string
+  insufficientBalance: boolean
+  isInputFocus: boolean
+  onValueChange: (value: string) => void
+  isSrcToken?: boolean
+}) => {
+  const { address: account } = useAccount()
+  const {
+    [Field.INPUT]: { currencyId: inputCurrencyId },
+    [Field.OUTPUT]: { currencyId: outputCurrencyId },
+  } = useSwapState()
+  const inputCurrency = useCurrency(inputCurrencyId)
+  const outputCurrency = useCurrency(outputCurrencyId)
+  const [inputBalance] = useCurrencyBalances(account, [inputCurrency, outputCurrency])
+  const maxAmountInput = useMemo(() => maxAmountSpend(inputBalance), [inputBalance])
+  const onPercentInput = useCallback(
+    (percent: number) => {
+      if (!isSrcToken) return
+      if (maxAmountInput) {
+        onValueChange(maxAmountInput.multiply(new Percent(percent, 100)).toExact())
+      }
+    },
+    [maxAmountInput, onValueChange, isSrcToken],
+  )
+
+  const onMax = useCallback(() => {
+    if (!isSrcToken) return
+    if (maxAmountInput) {
+      onValueChange(maxAmountInput.toExact())
+    }
+  }, [maxAmountInput, onValueChange, isSrcToken])
+
+  return (
+    <LazyAnimatePresence mode="wait" features={domAnimation}>
+      {account ? (
+        !isInputFocus ? (
+          <SwapUIV2.WalletAssetDisplay
+            isUserInsufficientBalance={insufficientBalance}
+            balance={balance}
+            onMax={onMax}
+          />
+        ) : (
+          <SwapUIV2.AssetSettingButtonList onPercentInput={onPercentInput} />
+        )
+      ) : null}
+    </LazyAnimatePresence>
+  )
+}
+
 const TokenLogo = ({ address, size }: { address?: string; size?: string }) => {
   const currency = useCurrency(address)