perps: add tradingfee percentage tooltip (#787)

src/components/common/SummaryLine.tsx

@@ -1,6 +1,9 @@
 import classNames from 'classnames'
 import React from 'react'
 
+import Text from 'components/common/Text'
+import { Tooltip } from 'components/common/Tooltip'
+
 const infoLineClasses = 'flex flex-row justify-between flex-1 mb-1 text-xs text-white'
 
 interface SummaryLineProps {
@@ -8,11 +11,20 @@ interface SummaryLineProps {
   className?: string
   contentClassName?: string
   label: string
+  tooltip?: string
 }
 export default function SummaryLine(props: SummaryLineProps) {
   return (
     <div className={classNames(infoLineClasses, props.className)}>
+      {props.tooltip ? (
+        <Tooltip content={<span className='text-sm'>{props.tooltip}</span>} type='info' underline>
+          <Text size='xs' className='opacity-40'>
+            {props.label}
+          </Text>
+        </Tooltip>
+      ) : (
         <span className='opacity-40'>{props.label}</span>
+      )}
       <span className={props.contentClassName}>{props.children}</span>
     </div>
   )

src/components/common/Tooltip/index.tsx

@@ -51,8 +51,8 @@ export const Tooltip = (props: Props) => {
         <span
           className={classNames(
             props.underline &&
-              'border-b-1 hover:cursor-pointer border border-x-0 border-t-0 border-dashed border-white/20 pb-1',
-            !reduceMotion && 'transition-all',
+              'border-b hover:cursor-help  border-dashed border-white/20 pb-1 hover:border-transparent',
+            !reduceMotion && 'transition-all duration-200',
             props.className,
           )}
         >

src/components/perps/Module/PerpsModule.tsx

@@ -104,7 +104,7 @@ export function PerpsModule() {
       />
       <AssetAmountInput
         label='Amount'
-        max={BN(1000000)} // TODO: Implement max calculation
+        max={BN(100000000)} // TODO: Implement max calculation
         amount={amount.abs()}
         setAmount={onChangeAmount}
         asset={perpsAsset}

src/components/perps/Module/Summary.tsx

@@ -7,9 +7,10 @@ import { ArrowRight } from 'components/common/Icons'
 import SummaryLine from 'components/common/SummaryLine'
 import Text from 'components/common/Text'
 import TradeDirection from 'components/perps/BalancesTable/Columns/TradeDirection'
-import OpeningFee from 'components/perps/Module/OpeningFee'
+import TradingFee from 'components/perps/Module/TradingFee'
 import { BN_ZERO } from 'constants/math'
 import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
+import useTradingFee from 'hooks/perps/useTradingFee'
 import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
 import { formatLeverage } from 'utils/formatters'
@@ -31,6 +32,7 @@ export default function PerpsSummary(props: Props) {
   const modifyPerpPosition = useStore((s) => s.modifyPerpPosition)
   const closePerpPosition = useStore((s) => s.closePerpPosition)
   const currentAccount = useCurrentAccount()
+  const { data: tradingFee, isLoading } = useTradingFee(props.asset.denom, props.amount)
 
   const newAmount = useMemo(
     () => (props.previousAmount ?? BN_ZERO).plus(props.amount),
@@ -74,8 +76,11 @@ export default function PerpsSummary(props: Props) {
           Summary
         </Text>
         <SummaryLine label='Expected Price'>-</SummaryLine>
-        <SummaryLine label='Fees'>
-          <OpeningFee denom={props.asset.denom} amount={props.amount} />
+        <SummaryLine
+          label='Fees'
+          tooltip={`${tradingFee ? tradingFee.rate.times(100) + '% ' : ''}Trading Fees`}
+        >
+          <TradingFee denom={props.asset.denom} amount={props.amount} />
         </SummaryLine>
         <SummaryLine label='Total'>-</SummaryLine>
       </div>

src/components/perps/Module/TradingFee.tsx

@@ -2,18 +2,18 @@ import BigNumber from 'bignumber.js'
 
 import { CircularProgress } from 'components/common/CircularProgress'
 import DisplayCurrency from 'components/common/DisplayCurrency'
-import useOpeningFee from 'hooks/perps/useOpeningFee'
+import useTradingFee from 'hooks/perps/useTradingFee'
 
 type Props = {
   denom: string
   amount: BigNumber
 }
 
-export default function OpeningFee(props: Props) {
-  const { data: openingFee, isLoading } = useOpeningFee(props.denom, props.amount)
+export default function TradingFee(props: Props) {
+  const { data: openingFee, isLoading } = useTradingFee(props.denom, props.amount)
 
   if (isLoading) return <CircularProgress className='h-full' size={12} />
   if (props.amount.isZero() || !openingFee) return '-'
 
-  return <DisplayCurrency coin={openingFee} />
+  return <DisplayCurrency coin={openingFee.fee} />
 }

src/hooks/perps/useTradingFee.ts

@@ -5,16 +5,17 @@ import useChainConfig from 'hooks/useChainConfig'
 import useClients from 'hooks/useClients'
 import useDebounce from 'hooks/useDebounce'
 import { BNCoin } from 'types/classes/BNCoin'
+import { BN } from 'utils/helpers'
 
-export default function useOpeningFee(denom: string, amount: BigNumber) {
+export default function useTradingFee(denom: string, amount: BigNumber) {
   const chainConfig = useChainConfig()
   const debouncedAmount = useDebounce<string>(amount.toString(), 500)
   const clients = useClients()
   const enabled = !amount.isZero() && clients
 
-  return useSWR(enabled && `${chainConfig.id}/perps/${denom}/openingFee/${debouncedAmount}`, () =>
+  return useSWR(enabled && `${chainConfig.id}/perps/${denom}/tradingFee/${debouncedAmount}`, () =>
     clients!.perps
       .openingFee({ denom, size: amount as any })
-      .then((resp) => BNCoin.fromCoin(resp.fee)),
+      .then((resp) => ({ rate: BN(resp.rate), fee: BNCoin.fromCoin(resp.fee) })),
   )
 }