liquidity hub integration

package.json

@@ -31,6 +31,7 @@
     "@ethersproject/experimental": "^5.7.0",
     "@gelatonetwork/relay-sdk": "^5.5.2",
     "@marcius-capital/binance-api": "^0.2.16",
+    "@orbs-network/liquidity-hub-ui-sdk": "0.0.19",
     "@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,6 +1,7 @@
+import { useFormatNumber, useFromTokenPanel, useNetworkFee } from '@orbs-network/liquidity-hub-ui-sdk'
 import CollapseChevron from 'components/CollapseChevron'
 
-import { Info as InfoIcon } from 'components/Icons'
+import { Info as InfoIcon, Loader } from 'components/Icons'
 import { Row, RowBetween } from 'components/Row'
 import { useState } from 'react'
 import styled from 'styled-components'
@@ -79,12 +80,18 @@ const StyledInfoIcon = styled(InfoIcon)`
 
 export default function SpotTradeDetails({}: {}) {
   const [isCollapsed, setIsCollapsed] = useState<boolean>(false)
+  const { token, amount } = useFromTokenPanel()
 
+  const _amount = useFormatNumber({ value: amount })
+  const networkFee = useNetworkFee()
   return (
     <Wrapper>
       <RowBetween>
         <Label reducedOpacity>
-          <Label weight="600">0.00 BTC</Label> is all you pay, fees included
+          <Label weight="600">
+            {_amount || '0.00'} {token?.symbol}
+          </Label>{' '}
+          is all you pay, fees included
         </Label>
         <Row
           gap="5px"
@@ -101,31 +108,11 @@ export default function SpotTradeDetails({}: {}) {
 
       <DetailsWrapper isCollapsed={isCollapsed}>
         <Separator />
-
-        <RowBetween>
-          <ColumnContainer orientation="left">
-            <Label>Platform Fees</Label>
-            <Label reducedOpacity>Depends on the Settings</Label>
-          </ColumnContainer>
-          <ColumnContainer>
-            <Label reducedOpacity>as low as</Label>
-            <Label>$2.69</Label>
-          </ColumnContainer>
-        </RowBetween>
-
         <RowBetween>
           <Row width="fit-content" gap="5px">
             <Label>Network Fee</Label> <StyledInfoIcon />
           </Row>
-
-          <Label>$1.47</Label>
-        </RowBetween>
-
-        <Separator />
-
-        <RowBetween>
-          <Label weight="600">Total Fees</Label>
-          <Label>$4.15</Label>
+          {networkFee.isLoading ? <Loader /> : <Label>≈${networkFee.value || '-'}</Label>}
         </RowBetween>
       </DetailsWrapper>
     </Wrapper>

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

@@ -1,3 +1,4 @@
+import { useFromTokenPanel, useSwapTokens, useToTokenPanel } from '@orbs-network/liquidity-hub-ui-sdk'
 import SpotTradeInput from 'components/App/SpotTrading/SpotTradeInput'
 import Swap from 'components/Icons/Swap'
 import { useIsLaptop, useIsMobile } from 'lib/hooks/useWindowSize'
@@ -55,65 +56,60 @@ const SwapContainer = styled.div<{ isHovering?: boolean }>`
 `};
 `
 
-export default function SpotTradeForm({
-  onUpdateFromToken,
-  onUpdateToToken,
-  onClickSwap,
-  tokenFrom,
-  tokenTo,
-}: {
-  onUpdateFromToken(value: string): void
-  onUpdateToToken(value: string): void
-  onClickSwap(): void
-  tokenFrom: any
-  tokenTo: any
-}) {
-  const isMobile = useIsMobile()
-  const isLaptop = useIsLaptop()
-  const [isHoveringSwapButton, setIsHoveringSwapButton] = useState<boolean>(false)
-
-  const updateFromTokenAmount = (value: string): void => {
-    onUpdateFromToken?.(value)
-  }
-
-  const updateToTokenAmount = (value: string): void => {
-    onUpdateToToken?.(value)
-  }
+const FromToken = () => {
+  const { token, onChange, onTokenSelect, amount, balance } = useFromTokenPanel()
+  return (
+    <SpotTradeInput
+      leftLabel="From"
+      rightLabel="Exchange"
+      token={token}
+      onUpdateValue={onChange}
+      value={amount}
+      isSrc
+      onTokenSelect={onTokenSelect}
+      balance={balance}
+    />
+  )
+}
 
-  const handleSwapClick = () => {
-    onClickSwap?.()
-  }
+const ToToken = () => {
+  const { token, onTokenSelect, amount, balance } = useToTokenPanel()
+  return (
+    <SpotTradeInput
+      onTokenSelect={onTokenSelect}
+      token={token}
+      leftLabel="To"
+      rightLabel="Receive"
+      value={amount}
+      balance={balance}
+    />
+  )
+}
 
+const SwapTokens = () => {
+  const swapTokens = useSwapTokens()
+  const [isHoveringSwapButton, setIsHoveringSwapButton] = useState<boolean>(false)
+  const isMobile = useIsMobile()
+  const isLaptop = useIsLaptop()
+  return (
+    <SwapButton
+      onMouseEnter={() => setIsHoveringSwapButton(true)}
+      onMouseLeave={() => setIsHoveringSwapButton(false)}
+      isHovering={isHoveringSwapButton}
+      onClick={swapTokens}
+    >
+      <SwapContainer isHovering={isHoveringSwapButton}>
+        <Swap size={isLaptop || isMobile ? '16' : '24'} />
+      </SwapContainer>
+    </SwapButton>
+  )
+}
+export default function SpotTradeForm() {
   return (
     <Wrapper>
-      <SpotTradeInput
-        leftLabel="From"
-        rightLabel="Exchange"
-        tokenBalance={tokenFrom.balance}
-        tokenName={tokenFrom.name}
-        onUpdateValue={updateFromTokenAmount}
-        value={tokenFrom.value}
-        tokenValue="0.00"
-      />
-      <SwapButton
-        onMouseEnter={() => setIsHoveringSwapButton(true)}
-        onMouseLeave={() => setIsHoveringSwapButton(false)}
-        isHovering={isHoveringSwapButton}
-        onClick={handleSwapClick}
-      >
-        <SwapContainer isHovering={isHoveringSwapButton}>
-          <Swap size={isLaptop || isMobile ? '16' : '24'} />
-        </SwapContainer>
-      </SwapButton>
-      <SpotTradeInput
-        leftLabel="To"
-        rightLabel="Receive"
-        tokenBalance={tokenTo.balance}
-        tokenName={tokenTo.name}
-        onUpdateValue={updateToTokenAmount}
-        value={tokenTo.value}
-        tokenValue="0.00"
-      />
+      <FromToken />
+      <SwapTokens />
+      <ToToken />
     </Wrapper>
   )
 }

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

@@ -1,9 +1,19 @@
+import {
+  Token,
+  useFormatNumber,
+  useSetMaxBalance,
+  useUsdAmount,
+  useBalancesLoading,
+} from '@orbs-network/liquidity-hub-ui-sdk'
 import TokenDropdown from 'components/App/SpotTrading/TokenDropdown'
 import BalanceWallet from 'components/BalanceWallet'
+import { Loader } from 'components/Icons'
 import LineChartBaseline from 'components/Icons/LineChartBaseline'
 import { SpotCustomBox } from 'components/InputBox'
+import TokenSelectionModal from 'components/Modals/SpotTrading/TokenSelectionModal'
 import { Row } from 'components/Row'
-import { useIsLaptop, useIsMobile } from 'lib/hooks/useWindowSize'
+import { useIsLaptop } from 'lib/hooks/useWindowSize'
+import { useCallback, useState } from 'react'
 import styled from 'styled-components'
 
 const Wrapper = styled.div`
@@ -38,49 +48,85 @@ const ColumnContainer = styled.div<{ orientation?: string }>`
   gap: 5px;
 `
 
+const Balance = ({ balance, onClick }: { balance?: string; onClick?: () => void }) => {
+  const _balance = useFormatNumber({ value: balance })
+
+  const isLoading = useBalancesLoading()
+
+  return (
+    <StyledBalance gap="4px">
+      <BalanceWallet />
+      {isLoading ? (
+        <>
+          <Label onClick={onClick}>Balance: </Label>
+          <Loader size="15px" />
+        </>
+      ) : (
+        <Label onClick={onClick}>Balance: {_balance || '-'}</Label>
+      )}
+    </StyledBalance>
+  )
+}
+
+const StyledBalance = styled(Row)`
+  cursor: pointer;
+`
+
 export default function SpotTradeInput({
   leftLabel,
   rightLabel,
-  tokenBalance,
-  tokenName,
   onUpdateValue,
   value,
-  tokenValue,
+  isSrc,
+  token,
+  onTokenSelect,
+  balance,
 }: {
   leftLabel: string
   rightLabel: string
-  tokenBalance: string
-  tokenName: string
-  onUpdateValue(value: string): void
-  value: string
-  tokenValue: string
+  onUpdateValue?: (value: string) => void
+  value?: string
+  isSrc?: boolean
+  token?: Token
+  onTokenSelect: (token: Token) => void
+  balance?: string
 }) {
-  const isMobile = useIsMobile()
+  const [isOpen, setIsOpen] = useState(false)
   const isLaptop = useIsLaptop()
-  const onValueChange = (value: string): void => {
-    onUpdateValue?.(value)
-  }
+  const setMaxBalance = useSetMaxBalance()
+  const usd = useFormatNumber({ value: useUsdAmount(token?.address, value || '0').usd })
+
+  const _onTokenSelect = useCallback(
+    (token: Token) => {
+      onTokenSelect(token)
+      setIsOpen(false)
+    },
+    [onTokenSelect, setIsOpen]
+  )
 
   return (
     <Wrapper>
       <ColumnContainer orientation="left">
         <Label>{leftLabel}</Label>
-        <TokenDropdown tokenName={tokenName} />
-        <Row gap="4px">
-          <BalanceWallet />
-          <Label>Balance: {tokenBalance}</Label>
-        </Row>
+        <TokenDropdown token={token} onClick={() => setIsOpen(true)} />
+        <Balance balance={balance} onClick={isSrc ? setMaxBalance : undefined} />
       </ColumnContainer>
 
-
       <ColumnContainer>
         <Label>{rightLabel}</Label>
-        <SpotCustomBox value={value} onChange={onValueChange} placeholder="0.00" isLaptop={isLaptop || isMobile} />
+        <SpotCustomBox
+          disabled={!isSrc}
+          value={value || ''}
+          onChange={(value: string) => onUpdateValue?.(value)}
+          placeholder="0.00"
+          isLaptop={isLaptop}
+        />
         <Row gap="4px" width="fit-content">
           <LineChartBaseline />
-          <Label>${tokenValue}</Label>
+          <Label>${usd || '0'}</Label>
         </Row>
       </ColumnContainer>
+      <TokenSelectionModal isOpen={isOpen} closeModal={() => setIsOpen(false)} onTokenSelect={_onTokenSelect} />
     </Wrapper>
   )
 }