feat(synapse-interface): bridge gas handler

packages/synapse-interface/components/Portfolio/components/HoverTooltip.tsx → packages/synapse-interface/components/HoverTooltip.tsx

@@ -1,21 +1,35 @@
 import React, { useState } from 'react'
 
-export const HoverTooltip = ({ children, hoverContent }) => {
+export const HoverTooltip = ({
+  children,
+  hoverContent,
+  isActive = true,
+}: {
+  children: React.ReactNode
+  hoverContent: React.ReactNode
+  isActive?: boolean
+}) => {
   const [showTooltip, setShowTooltip] = useState(false)
 
   const activateTooltip = () => setShowTooltip(true)
   const hideTooltip = () => setShowTooltip(false)
 
-  return (
-    <div
-      onMouseEnter={activateTooltip}
-      onMouseLeave={hideTooltip}
-      className="relative"
-    >
-      {children}
-      <Tooltip isHovered={showTooltip}>{hoverContent}</Tooltip>
-    </div>
-  )
+  if (!isActive) {
+    return <div>{children}</div>
+  } else {
+    return (
+      <div
+        onMouseEnter={activateTooltip}
+        onMouseLeave={hideTooltip}
+        className="relative w-fit"
+      >
+        {children}
+        {hoverContent ? (
+          <Tooltip isHovered={showTooltip}>{hoverContent}</Tooltip>
+        ) : null}
+      </div>
+    )
+  }
 }
 
 const Tooltip = ({

packages/synapse-interface/components/Portfolio/components/GasTokenAsset.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Image from 'next/image'
 import { Token } from '@/utils/types'
 import { getParsedBalance } from '@/utils/getParsedBalance'
-import { HoverTooltip } from './HoverTooltip'
+import { HoverTooltip } from '../../HoverTooltip'
 import GasIcon from '@/components/icons/GasIcon'
 
 export const GasTokenAsset = ({

packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx

@@ -1,21 +1,18 @@
 import React, { useCallback } from 'react'
-import _ from 'lodash'
+import { zeroAddress } from 'viem'
+import { isNumber } from 'lodash'
+import Image from 'next/image'
 import { useAppDispatch } from '@/store/hooks'
-import {
-  setFromChainId,
-  setFromToken,
-  updateFromValue,
-} from '@/slices/bridge/reducer'
+import { setFromChainId, setFromToken } from '@/slices/bridge/reducer'
 import { Token } from '@/utils/types'
 import { inputRef } from '../../StateManagedBridge/InputContainer'
-import Image from 'next/image'
 import { useBridgeState } from '@/slices/bridge/hooks'
 import { PortfolioAssetActionButton } from './PortfolioAssetActionButton'
-import { trimTrailingZeroesAfterDecimal } from '@/utils/trimTrailingZeroesAfterDecimal'
-import { zeroAddress } from 'viem'
-import GasIcon from '@/components/icons/GasIcon'
-import { HoverTooltip } from './HoverTooltip'
+import { HoverTooltip } from '@/components/HoverTooltip'
 import { getParsedBalance } from '@/utils/getParsedBalance'
+import { useGasEstimator } from '@/utils/hooks/useGasEstimator'
+import GasIcon from '@/components/icons/GasIcon'
+import { trimTrailingZeroesAfterDecimal } from '@/utils/trimTrailingZeroesAfterDecimal'
 
 const handleFocusOnBridgeInput = () => {
   inputRef.current?.focus()
@@ -37,30 +34,26 @@ export const PortfolioTokenAsset = ({
   const dispatch = useAppDispatch()
   const { fromChainId, fromToken } = useBridgeState()
   const { icon, symbol, decimals, addresses } = token
-
-  const tokenDecimals = _.isNumber(decimals)
+  const tokenAddress = addresses[portfolioChainId]
+  const tokenDecimals = isNumber(decimals)
     ? decimals
     : decimals[portfolioChainId]
 
-  const parsedBalance = getParsedBalance(balance, tokenDecimals, 3)
+  const parsedBalance = getParsedBalance(balance, tokenDecimals, 4)
   const parsedBalanceLong = getParsedBalance(balance, tokenDecimals, 8)
 
   const isDisabled = false
-  const isTokenSelected =
-    fromToken === token && fromChainId === portfolioChainId
+  const isPortfolioChainSelected = fromChainId === portfolioChainId
+  const isTokenSelected = isPortfolioChainSelected && fromToken === token
+  const isGasToken = tokenAddress === zeroAddress
 
-  const handleFromSelectionCallback = useCallback(() => {
+  const { maxBridgeableGas } = useGasEstimator()
+
+  const handleFromSelectionCallback = useCallback(async () => {
     dispatch(setFromChainId(portfolioChainId))
     dispatch(setFromToken(token))
     handleFocusOnBridgeInput()
-    dispatch(
-      updateFromValue(
-        trimTrailingZeroesAfterDecimal(getParsedBalance(balance, tokenDecimals))
-      )
-    )
-  }, [token, balance, portfolioChainId])
-
-  const isBridgeableGasToken = addresses[portfolioChainId] === zeroAddress
+  }, [token, portfolioChainId])
 
   return (
     <div
@@ -70,14 +63,7 @@ export const PortfolioTokenAsset = ({
         ${isTokenSelected ? 'bg-tint border-surface' : 'border-transparent'}
       `}
     >
-      <div
-        onClick={handleFromSelectionCallback}
-        className={`
-          flex items-center gap-2
-          pl-2 pr-4 py-2 cursor-pointer rounded
-          hover:bg-surface active:opacity-70
-        `}
-      >
+      <div className="flex items-center gap-2 py-2 pl-2 pr-4 rounded cursor-default">
         <Image
           loading="lazy"
           alt={`${symbol} img`}
@@ -86,23 +72,31 @@ export const PortfolioTokenAsset = ({
         />
         <HoverTooltip
           hoverContent={
-            <div className="whitespace-nowrap">
-              {parsedBalanceLong} {symbol}
-            </div>
+            isPortfolioChainSelected && isGasToken && maxBridgeableGas ? (
+              <div className="whitespace-nowrap">
+                Available:{' '}
+                {trimTrailingZeroesAfterDecimal(maxBridgeableGas.toFixed(8))}{' '}
+                {symbol}
+              </div>
+            ) : (
+              <div className="whitespace-nowrap">
+                {parsedBalanceLong} {symbol}
+              </div>
+            )
           }
         >
           <div>
             {parsedBalance} {symbol}
           </div>
         </HoverTooltip>
 
-        {isBridgeableGasToken ? (
+        {isGasToken && (
           <HoverTooltip
             hoverContent={<div className="whitespace-nowrap">Gas token</div>}
           >
             <GasIcon className="pt-0.5 m-auto fill-secondary" />
           </HoverTooltip>
-        ) : null}
+        )}
       </div>
       <PortfolioAssetActionButton
         selectCallback={handleFromSelectionCallback}

packages/synapse-interface/components/Portfolio/components/PortfolioTokenVisualizer.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image'
 import { TokenAndBalance } from '@/utils/actions/fetchPortfolioBalances'
-import { HoverTooltip } from './HoverTooltip'
+import { HoverTooltip } from '../../HoverTooltip'
 
 export const PortfolioTokenVisualizer = ({
   portfolioTokens,

packages/synapse-interface/components/StateManagedBridge/AvailableBalance.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { joinClassNames } from '@/utils/joinClassNames'
+import { HoverTooltip } from '../HoverTooltip'
+import { Token } from '@/utils/types'
+import { trimTrailingZeroesAfterDecimal } from '@/utils/trimTrailingZeroesAfterDecimal'
+
+export const AvailableBalance = ({
+  balance,
+  maxBridgeableBalance,
+  isGasToken,
+  isGasEstimateLoading,
+  isDisabled,
+  onMaxBalance,
+}: {
+  balance?: string
+  maxBridgeableBalance?: number
+  gasCost?: string
+  isGasToken: boolean
+  isGasEstimateLoading: boolean
+  isDisabled: boolean
+  onMaxBalance?: () => void
+}) => {
+  const labelClassName = joinClassNames({
+    space: 'block',
+    textColor: 'text-xxs md:text-xs',
+    animation: 'transition-all duration-150 transform-gpu',
+    hover: 'hover:opacity-70 cursor-pointer',
+  })
+
+  if (isDisabled) {
+    return null
+  } else if (isGasToken && isGasEstimateLoading) {
+    return (
+      <label className={labelClassName} htmlFor="inputRow">
+        <span className="animate-pulse text-zinc-500 dark:text-zinc-400">
+          calculating gas...
+        </span>
+      </label>
+    )
+  } else {
+    return (
+      <label
+        onClick={onMaxBalance}
+        className={labelClassName}
+        htmlFor="inputRow"
+      >
+        <span className="text-zinc-500 dark:text-zinc-400">Available: </span>
+        {maxBridgeableBalance?.toFixed(4) ?? balance ?? '0.0'}
+      </label>
+    )
+  }
+}