feat: show gasusd

KyberNetwork · Mar 14, 2024 · a3a0622 · a3a0622
1 parent 54e888c
commit a3a0622
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 6 deletions.
diff --git a/src/components/SwapForm/SwapActionButton/index.tsx b/src/components/SwapForm/SwapActionButton/index.tsx
@@ -60,6 +60,7 @@ type Props = {
   onWrap: (() => Promise<string | undefined>) | undefined
   buildRoute: () => Promise<BuildRouteResult>
   customChainId?: ChainId
+  setGasUsd?: (val: number) => void
 }
 
 const SwapActionButton: React.FC<Props> = ({
@@ -84,6 +85,7 @@ const SwapActionButton: React.FC<Props> = ({
   onWrap,
   buildRoute,
   customChainId,
+  setGasUsd,
 }) => {
   const theme = useTheme()
   const { changeNetwork } = useChangeNetwork()
@@ -92,6 +94,10 @@ const SwapActionButton: React.FC<Props> = ({
   const [errorWhileSwap, setErrorWhileSwap] = useState('')
   const noRouteFound = routeSummary && !routeSummary.route
 
+  useEffect(() => {
+    if (wrapType === WrapType.WRAP || wrapType === WrapType.UNWRAP) setGasUsd?.(0)
+    if (routeSummary?.gasUsd) setGasUsd?.(+routeSummary.gasUsd)
+  }, [routeSummary?.gasUsd, setGasUsd, wrapType])
   // toggle wallet when disconnected
   const toggleWalletModal = useWalletModalToggle()
 

diff --git a/src/components/SwapForm/TradeSummary.tsx b/src/components/SwapForm/TradeSummary.tsx
@@ -16,6 +16,7 @@ import { useActiveWeb3React } from 'hooks'
 import { isSupportKyberDao, useGasRefundTier } from 'hooks/kyberdao'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
+import { usePaymentToken } from 'state/user/hooks'
 import { ExternalLink, TYPE } from 'theme'
 import { DetailedRouteSummary } from 'types/route'
 import { formattedNum } from 'utils'
@@ -186,6 +187,8 @@ const TradeSummary: React.FC<Props> = ({ routeSummary, slippage }) => {
     }
   }, [hasTrade])
 
+  const [paymentToken] = usePaymentToken()
+  const isHold = paymentToken?.address.toLowerCase() === '0xed4040fD47629e7c8FBB7DA76bb50B3e7695F0f2'.toLowerCase()
   const isPartnerSwap = window.location.pathname.includes(APP_PATHS.PARTNER_SWAP)
   return (
     <Wrapper $visible={alreadyVisible} $disabled={!hasTrade}>
@@ -228,7 +231,7 @@ const TradeSummary: React.FC<Props> = ({ routeSummary, slippage }) => {
               </TextDashed>
             </RowFixed>
             <TYPE.black color={theme.text} fontSize={12}>
-              {gasUsd ? formattedNum(gasUsd, true) : '--'}
+              {gasUsd ? formattedNum(isHold ? +gasUsd * 0.8 : gasUsd, true) : '--'}
             </TYPE.black>
           </RowBetween>
 

diff --git a/src/components/SwapForm/index.tsx b/src/components/SwapForm/index.tsx
@@ -85,6 +85,7 @@ export type SwapFormProps = {
   customChainId?: ChainId
   omniView?: boolean
   onOpenGasToken?: () => void
+  setGasUsd?: (val: number) => void
 }
 
 const SwapForm: React.FC<SwapFormProps> = props => {
@@ -107,6 +108,7 @@ const SwapForm: React.FC<SwapFormProps> = props => {
     customChainId,
     omniView,
     onOpenGasToken,
+    setGasUsd,
   } = props
 
   const { chainId: walletChainId } = useActiveWeb3React()
@@ -297,6 +299,7 @@ const SwapForm: React.FC<SwapFormProps> = props => {
             buildRoute={buildRoute}
             swapInputError={swapInputError}
             customChainId={customChainId}
+            setGasUsd={setGasUsd}
           />
 
           {!isWrapOrUnwrap && <TradeSummary routeSummary={routeSummary} slippage={slippage} />}

diff --git a/src/components/swapv2/GasTokenSetting.tsx b/src/components/swapv2/GasTokenSetting.tsx
@@ -10,6 +10,7 @@ import { NativeCurrencies } from 'constants/tokens'
 import useTheme from 'hooks/useTheme'
 import { usePaymentToken } from 'state/user/hooks'
 import { useCurrencyBalances, useNativeBalance } from 'state/wallet/hooks'
+import { formattedNum } from 'utils'
 
 const tokens = [
   new Token(ChainId.ZKSYNC, '0xed4040fd47629e7c8fbb7da76bb50b3e7695f0f2', 18, 'HOLD', 'HOLD'),
@@ -18,13 +19,46 @@ const tokens = [
   new Token(ChainId.ZKSYNC, '0xbbeb516fb02a01611cbbe0453fe3c580d7281011', 8, 'wBTC', 'wBTC'),
 ]
 
-export default function GasTokenSetting({ onBack }: { onBack: () => void }) {
+export default function GasTokenSetting({ onBack, gasUsd }: { onBack: () => void; gasUsd: number }) {
   const theme = useTheme()
   const ethBalance = useNativeBalance()
   const balances = useCurrencyBalances(tokens)
 
   const [paymentToken, setPaymentToken] = usePaymentToken()
 
+  const gasIcon = (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.33331 4.66667H8.33331V7.33333H4.33331V4.66667Z"
+        stroke="#A9A9A9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M5 10H7.66667" stroke="#A9A9A9" strokeLinecap="round" strokeLinejoin="round" />
+      <path
+        d="M2.33331 14V3.33333C2.33331 2.59667 2.92998 2 3.66665 2H8.99998C9.73665 2 10.3333 2.59667 10.3333 3.33333V14"
+        stroke="#A9A9A9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13 3.33333L13.9426 4.276C14.1926 4.526 14.3333 4.86533 14.3333 5.21867V11.6667C14.3333 12.2187 13.8853 12.6667 13.3333 12.6667V12.6667C12.7813 12.6667 12.3333 12.2187 12.3333 11.6667V10.6667C12.3333 10.2987 12.0346 10 11.6666 10H10.3333"
+        stroke="#A9A9A9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.3334 8H13.0887C12.688 8 12.3774 7.64867 12.4274 7.25067L12.594 5.91733C12.6354 5.584 12.9187 5.33333 13.2554 5.33333H14.3334"
+        stroke="#A9A9A9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M1.66669 14H11" stroke="#A9A9A9" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+
   return (
     <>
       <Flex sx={{ gap: '6px', cursor: 'pointer' }} alignItems="center" role="button" onClick={onBack}>
@@ -49,18 +83,23 @@ export default function GasTokenSetting({ onBack }: { onBack: () => void }) {
         </Text>
       </Flex>
 
-      <Divider />
+      <Divider marginX="-1rem" />
 
       <Flex
         justifyContent="space-between"
-        marginY="0.5rem"
+        padding="0.5rem 1rem"
+        marginX="-1rem"
         role="button"
         onClick={() => {
           setPaymentToken(null)
           onBack()
         }}
         sx={{
           cursor: 'pointer',
+          background: !paymentToken ? rgba(theme.primary, 0.15) : 'transparent',
+          '&:hover': {
+            background: theme.buttonBlack,
+          },
         }}
       >
         <Flex alignItems="center" sx={{ gap: '6px' }}>
@@ -72,9 +111,14 @@ export default function GasTokenSetting({ onBack }: { onBack: () => void }) {
             </Text>
           </div>
         </Flex>
+
+        <Flex alignItems="center" sx={{ gap: '6px' }}>
+          {gasIcon}
+          {gasUsd ? formattedNum(gasUsd, true) : '--'}
+        </Flex>
       </Flex>
 
-      <Divider />
+      <Divider marginX="-1rem" />
 
       <Flex marginTop="0.75rem" alignItems="center" sx={{ gap: '8px' }}>
         <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="EvStationRoundedIcon" width="24px">
@@ -136,6 +180,16 @@ export default function GasTokenSetting({ onBack }: { onBack: () => void }) {
               </Text>
             </div>
           </Flex>
+
+          <Flex alignItems="center" sx={{ gap: '6px' }}>
+            {gasIcon}{' '}
+            {index === 0 && !!gasUsd && (
+              <Text sx={{ textDecoration: 'line-through' }} color={theme.subText}>
+                {formattedNum(gasUsd, true)}
+              </Text>
+            )}{' '}
+            <Text>{gasUsd ? formattedNum(gasUsd * (index === 0 ? 0.8 : 1), true) : '--'}</Text>
+          </Flex>
         </Flex>
       ))}
     </>

diff --git a/src/pages/SwapV3/PopulatedSwapForm.tsx b/src/pages/SwapV3/PopulatedSwapForm.tsx
@@ -20,13 +20,15 @@ type Props = {
   onSelectSuggestedPair: (fromToken: Currency | undefined, toToken: Currency | undefined, amount?: string) => void
   hidden: boolean
   onOpenGasToken: () => void
+  setGasUsd?: (value: number) => void
 }
 const PopulatedSwapForm: React.FC<Props> = ({
   routeSummary,
   setRouteSummary,
   hidden,
   onSelectSuggestedPair,
   onOpenGasToken,
+  setGasUsd,
 }) => {
   const currencyIn = useInputCurrency()
   const currencyOut = useOutputCurrency()
@@ -92,6 +94,7 @@ const PopulatedSwapForm: React.FC<Props> = ({
     onChangeCurrencyIn,
     onChangeCurrencyOut,
     onOpenGasToken,
+    setGasUsd,
   }
 
   return <SwapForm {...props} />

diff --git a/src/pages/SwapV3/index.tsx b/src/pages/SwapV3/index.tsx
@@ -163,6 +163,8 @@ export default function Swap() {
   const tradeRouteComposition = useMemo(() => {
     return getTradeComposition(chainId, routeSummary?.parsedAmountIn, undefined, routeSummary?.route, defaultTokens)
   }, [chainId, defaultTokens, routeSummary])
+
+  const [gasUsd, setGasUsd] = useState(0)
   const swapActionsRef = useRef(null)
 
   return (
@@ -186,6 +188,7 @@ export default function Swap() {
                   setRouteSummary={setRouteSummary}
                   hidden={activeTab !== TAB.SWAP}
                   onOpenGasToken={() => setActiveTab(TAB.GAS_TOKEN)}
+                  setGasUsd={setGasUsd}
                 />
               )}
               {activeTab === TAB.INFO && <TokenInfoTab currencies={currencies} onBack={onBackToSwapTab} />}
@@ -213,7 +216,7 @@ export default function Swap() {
                 />
               )}
               {isCrossChainPage && <CrossChain visible={activeTab === TAB.CROSS_CHAIN} />}
-              {activeTab === TAB.GAS_TOKEN && <GasTokenSetting onBack={() => setActiveTab(TAB.SWAP)} />}
+              {activeTab === TAB.GAS_TOKEN && <GasTokenSetting onBack={() => setActiveTab(TAB.SWAP)} gasUsd={gasUsd} />}
             </AppBodyWrapped>
             {isCrossChainPage && <CrossChainLink isBridge />}
           </SwapFormWrapper>