a

package.json

@@ -31,7 +31,7 @@
     "@ethersproject/experimental": "^5.7.0",
     "@gelatonetwork/relay-sdk": "^5.5.2",
     "@marcius-capital/binance-api": "^0.2.16",
-    "@orbs-network/liquidity-hub-widget": "0.0.204",
+    "@orbs-network/liquidity-hub-widget": "0.0.217",
     "@rainbow-me/rainbowkit": "^1.0.8",
     "@react-spring/web": "^9.3.0",
     "@reduxjs/toolkit": "^1.9.7",

src/components/App/SpotTrading/SpotTradeDetails/index.tsx

@@ -1,4 +1,4 @@
-import { useFromTokenPanel, useTransactionEstimateGas } from '@orbs-network/liquidity-hub-widget'
+import { useFormatNumber, useFromTokenPanel, usePriceUsd, useTransactionEstimateGasPrice, zeroAddress } from '@orbs-network/liquidity-hub-widget'
 import CollapseChevron from 'components/CollapseChevron'
 
 import { Info as InfoIcon } from 'components/Icons'
@@ -82,7 +82,9 @@ export default function SpotTradeDetails({}: {}) {
   const [isCollapsed, setIsCollapsed] = useState<boolean>(false)
   const { token, amount } = useFromTokenPanel()
 
-  const txFee = useTransactionEstimateGas()
+  const { data: usd } = usePriceUsd({ address: zeroAddress })
+
+  const txFee = useFormatNumber({ value: useTransactionEstimateGasPrice(usd) })
 
   return (
     <Wrapper>

src/components/App/SpotTrading/SpotTradeInput/index.tsx

@@ -1,11 +1,10 @@
-import { Token } from '@orbs-network/liquidity-hub-widget'
+import { Token, useFormatNumber, useUsdAmount } from '@orbs-network/liquidity-hub-widget'
 import TokenDropdown from 'components/App/SpotTrading/TokenDropdown'
 import BalanceWallet from 'components/BalanceWallet'
 import LineChartBaseline from 'components/Icons/LineChartBaseline'
 import { SpotCustomBox } from 'components/InputBox'
 import TokenSelectionModal from 'components/Modals/SpotTrading/TokenSelectionModal'
 import { Row } from 'components/Row'
-import { useUsdAmount } from 'hooks/useSpotTrading'
 import { useIsLaptop, useIsMobile } from 'lib/hooks/useWindowSize'
 import { useCallback, useState } from 'react'
 import styled from 'styled-components'
@@ -64,7 +63,8 @@ export default function SpotTradeInput({
   const [isOpen, setIsOpen] = useState(false)
   const isMobile = useIsMobile()
   const isLaptop = useIsLaptop()
-   const usd = useUsdAmount(token?.address, value || '0')
+   const usd = useUsdAmount(token?.address, value || '0').usd
+   const _balance = useFormatNumber({ value: balance })
 
   const _onTokenSelect = useCallback(
     (token: Token) => {
@@ -82,7 +82,7 @@ export default function SpotTradeInput({
         <TokenDropdown token={token} onClick={() => setIsOpen(true)} />
         <Row gap="4px">
           <BalanceWallet />
-          <Label>Balance: {balance || '0.00'}</Label>
+          <Label>Balance: {_balance || '0.00'}</Label>
         </Row>
       </ColumnContainer>