feat(synapse-interface): portfolio gas tokens

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

@@ -0,0 +1,55 @@
+import React from 'react'
+import Image from 'next/image'
+import { Token } from '@/utils/types'
+import { getParsedBalance } from '@/utils/getParsedBalance'
+import { HoverTooltip } from './HoverTooltip'
+import GasIcon from '@/components/icons/GasIcon'
+
+export const GasTokenAsset = ({
+  token,
+  balance,
+}: {
+  token: Token
+  balance: bigint
+}) => {
+  const { icon, symbol, decimals } = token
+  const parsedBalance = getParsedBalance(balance, decimals as number, 3)
+  const parsedBalanceLong = getParsedBalance(balance, decimals as number, 8)
+
+  return (
+    <div
+      id="gas-token-asset"
+      className={`
+        p-2 flex items-center border-y text-white
+        justify-between last:rounded-b-md border-transparent
+      `}
+    >
+      <div className="relative flex items-center gap-2 py-2 pl-2 pr-4 rounded">
+        <Image
+          loading="lazy"
+          alt={`${symbol} img`}
+          className="w-6 h-6 rounded-md"
+          src={icon}
+        />
+        <HoverTooltip
+          hoverContent={
+            <div className="whitespace-nowrap">
+              {parsedBalanceLong} {symbol}
+            </div>
+          }
+        >
+          <div>
+            {parsedBalance} {symbol}
+          </div>
+        </HoverTooltip>
+        <HoverTooltip
+          hoverContent={<div className="whitespace-nowrap">Gas token</div>}
+        >
+          <GasIcon className="pt-0.5 m-auto fill-secondary" />
+        </HoverTooltip>
+      </div>
+
+      <div className="p-2 text-sm opacity-70">Not bridgeable</div>
+    </div>
+  )
+}

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

@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+
+export const HoverTooltip = ({ children, hoverContent }) => {
+  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>
+  )
+}
+
+const Tooltip = ({
+  isHovered,
+  children,
+}: {
+  isHovered: boolean
+  children: React.ReactNode
+}) => {
+  if (isHovered) {
+    return (
+      <div
+        className={`
+          absolute left-1/2 bottom-full translate-x-[-50%]
+          z-50 hover-content px-2 py-1 text-white mb-1
+          border border-solid border-[#252537]
+          bg-[#101018] rounded-md text-left text-sm
+        `}
+      >
+        <data>{children}</data>
+      </div>
+    )
+  }
+}

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

@@ -7,13 +7,15 @@ import {
   updateFromValue,
 } from '@/slices/bridge/reducer'
 import { Token } from '@/utils/types'
-import { formatBigIntToString } from '@/utils/bigint/format'
 import { inputRef } from '../../StateManagedBridge/InputContainer'
 import Image from 'next/image'
 import { useBridgeState } from '@/slices/bridge/hooks'
-import { hasOnlyZeroes } from '@/utils/hasOnlyZeroes'
 import { PortfolioAssetActionButton } from './PortfolioAssetActionButton'
 import { trimTrailingZeroesAfterDecimal } from '@/utils/trimTrailingZeroesAfterDecimal'
+import { zeroAddress } from 'viem'
+import GasIcon from '@/components/icons/GasIcon'
+import { HoverTooltip } from './HoverTooltip'
+import { getParsedBalance } from '@/utils/getParsedBalance'
 
 const handleFocusOnBridgeInput = () => {
   inputRef.current?.focus()
@@ -34,7 +36,7 @@ export const PortfolioTokenAsset = ({
 }: PortfolioTokenAssetProps) => {
   const dispatch = useAppDispatch()
   const { fromChainId, fromToken } = useBridgeState()
-  const { icon, symbol, decimals } = token
+  const { icon, symbol, decimals, addresses } = token
 
   const tokenDecimals = _.isNumber(decimals)
     ? decimals
@@ -58,6 +60,8 @@ export const PortfolioTokenAsset = ({
     )
   }, [token, balance, portfolioChainId])
 
+  const isBridgeableGasToken = addresses[portfolioChainId] === zeroAddress
+
   return (
     <div
       id="portfolio-token-asset"
@@ -73,15 +77,32 @@ export const PortfolioTokenAsset = ({
           pl-2 pr-4 py-2 cursor-pointer rounded
           hover:bg-surface active:opacity-70
         `}
-        title={`${parsedBalanceLong} ${symbol}`}
       >
         <Image
           loading="lazy"
           alt={`${symbol} img`}
           className="w-6 h-6 rounded-md"
           src={icon}
         />
-        {parsedBalance} {symbol}
+        <HoverTooltip
+          hoverContent={
+            <div className="whitespace-nowrap">
+              {parsedBalanceLong} {symbol}
+            </div>
+          }
+        >
+          <div>
+            {parsedBalance} {symbol}
+          </div>
+        </HoverTooltip>
+
+        {isBridgeableGasToken ? (
+          <HoverTooltip
+            hoverContent={<div className="whitespace-nowrap">Gas token</div>}
+          >
+            <GasIcon className="pt-0.5 m-auto fill-secondary" />
+          </HoverTooltip>
+        ) : null}
       </div>
       <PortfolioAssetActionButton
         selectCallback={handleFromSelectionCallback}
@@ -91,14 +112,3 @@ export const PortfolioTokenAsset = ({
     </div>
   )
 }
-
-const getParsedBalance = (
-  balance: bigint,
-  decimals: number,
-  places?: number
-) => {
-  const formattedBalance = formatBigIntToString(balance, decimals, places)
-  const verySmallBalance = balance > 0n && hasOnlyZeroes(formattedBalance)
-
-  return verySmallBalance ? '< 0.001' : formattedBalance
-}

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

@@ -1,16 +1,12 @@
-import { useState } from 'react'
 import Image from 'next/image'
 import { TokenAndBalance } from '@/utils/actions/fetchPortfolioBalances'
+import { HoverTooltip } from './HoverTooltip'
 
 export const PortfolioTokenVisualizer = ({
   portfolioTokens,
 }: {
   portfolioTokens: TokenAndBalance[]
 }) => {
-  const [isT1Hovered, setIsT1Hovered] = useState<boolean>(false)
-  const [isT2Hovered, setIsT2Hovered] = useState<boolean>(false)
-  const [isT3Hovered, setIsT3Hovered] = useState<boolean>(false)
-
   const hasNoTokens: boolean =
     !portfolioTokens || (portfolioTokens && portfolioTokens.length === 0)
   const hasOneToken: boolean = portfolioTokens && portfolioTokens.length > 0
@@ -39,95 +35,71 @@ export const PortfolioTokenVisualizer = ({
     >
       {hasOneToken && (
         <div>
-          <Image
-            loading="lazy"
-            className="w-6 h-6 rounded-md"
-            alt={`${portfolioTokens[0].token.symbol} img`}
-            src={portfolioTokens[0].token.icon}
-            onMouseEnter={() => setIsT1Hovered(true)}
-            onMouseLeave={() => setIsT1Hovered(false)}
-          />
-          <div className="relative">
-            <HoverContent isHovered={isT1Hovered}>
+          <HoverTooltip
+            hoverContent={
               <div className="whitespace-nowrap">
                 {portfolioTokens[0]?.parsedBalance}{' '}
                 {portfolioTokens[0]?.token.symbol}
               </div>
-            </HoverContent>
-          </div>
+            }
+          >
+            <Image
+              loading="lazy"
+              className="w-6 h-6 rounded-md"
+              alt={`${portfolioTokens[0].token.symbol} img`}
+              src={portfolioTokens[0].token.icon}
+            />
+          </HoverTooltip>
         </div>
       )}
+
       {hasOnlyOneToken && (
         <div className="text-white whitespace-nowrap">
           {portfolioTokens[0].parsedBalance} {portfolioTokens[0].token.symbol}
         </div>
       )}
+
       {hasTwoTokens && (
         <div>
-          <Image
-            loading="lazy"
-            className="w-6 h-6 rounded-md"
-            alt={`${portfolioTokens[1].token.symbol} img`}
-            src={portfolioTokens[1].token.icon}
-            onMouseEnter={() => setIsT2Hovered(true)}
-            onMouseLeave={() => setIsT2Hovered(false)}
-          />
-          <div className="relative">
-            <HoverContent isHovered={isT2Hovered}>
+          <HoverTooltip
+            hoverContent={
               <div className="whitespace-nowrap">
                 {portfolioTokens[1]?.parsedBalance}{' '}
                 {portfolioTokens[1]?.token.symbol}
               </div>
-            </HoverContent>
-          </div>
+            }
+          >
+            <Image
+              loading="lazy"
+              className="w-6 h-6 rounded-md"
+              alt={`${portfolioTokens[1].token.symbol} img`}
+              src={portfolioTokens[1].token.icon}
+            />
+          </HoverTooltip>
         </div>
       )}
+
       {numOverTwoTokens > 0 && (
-        <div
-          className="text-white"
-          onMouseEnter={() => setIsT3Hovered(true)}
-          onMouseLeave={() => setIsT3Hovered(false)}
-        >
-          + {numOverTwoTokens}
+        <div className="relative inline-block">
+          <HoverTooltip
+            hoverContent={portfolioTokens?.map(
+              (token: TokenAndBalance, key: number) => {
+                if (key > 1) {
+                  const tokenSymbol = token.token.symbol
+                  const balance = token.parsedBalance
+                  return (
+                    <div className="whitespace-nowrap" key={key}>
+                      {balance} {tokenSymbol}
+                    </div>
+                  )
+                }
+              }
+            )}
+          >
+            <div className="text-white">+ {numOverTwoTokens}</div>
+          </HoverTooltip>
         </div>
       )}
-      <div className="relative inline-block">
-        <HoverContent isHovered={isT3Hovered}>
-          {portfolioTokens?.map((token: TokenAndBalance, key: number) => {
-            if (key > 1) {
-              const tokenSymbol = token.token.symbol
-              const balance = token.parsedBalance
-              return (
-                <div className="whitespace-nowrap" key={key}>
-                  {balance} {tokenSymbol}
-                </div>
-              )
-            }
-          })}
-        </HoverContent>
-      </div>
     </div>
   )
 }
-
-export const HoverContent = ({
-  isHovered,
-  children,
-}: {
-  isHovered: boolean
-  children: React.ReactNode
-}) => {
-  if (isHovered) {
-    return (
-      <div
-        className={`
-          absolute z-50 hover-content p-2 text-white
-          border border-solid border-[#252537]
-          bg-[#101018] rounded-md text-left
-        `}
-      >
-        {children}
-      </div>
-    )
-  }
-}