feat(synapse-interface): portfolio gas tokens

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Token } from '@/utils/types'
+import Image from 'next/image'
+import { getParsedBalance } from './PortfolioTokenAsset'
+
+export const GasTokenAsset = ({
+  token,
+  balance,
+}: {
+  token: Token
+  balance: bigint
+}) => {
+  const { icon, symbol, decimals } = token
+  const parsedBalance = getParsedBalance(balance, decimals as number, 3)
+
+  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="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}
+        />
+        {parsedBalance} {symbol}
+        <div className="text-sm text-secondary">gas token</div>
+      </div>
+
+      <div className="p-1 text-sm text-secondary">Not bridgable</div>
+    </div>
+  )
+}

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

@@ -14,6 +14,7 @@ import { useBridgeState } from '@/slices/bridge/hooks'
 import { hasOnlyZeroes } from '@/utils/hasOnlyZeroes'
 import { PortfolioAssetActionButton } from './PortfolioAssetActionButton'
 import { trimTrailingZeroesAfterDecimal } from '@/utils/trimTrailingZeroesAfterDecimal'
+import { zeroAddress } from 'viem'
 
 const handleFocusOnBridgeInput = () => {
   inputRef.current.focus()
@@ -34,7 +35,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 +59,8 @@ export const PortfolioTokenAsset = ({
     )
   }, [token, balance, portfolioChainId])
 
+  const isBridgeableGasToken = addresses[portfolioChainId] === zeroAddress
+
   return (
     <div
       id="portfolio-token-asset"
@@ -82,6 +85,9 @@ export const PortfolioTokenAsset = ({
           src={icon}
         />
         {parsedBalance} {symbol}
+        {isBridgeableGasToken ? (
+          <div className="text-sm text-secondary">gas token</div>
+        ) : null}
       </div>
       <PortfolioAssetActionButton
         selectCallback={handleFromSelectionCallback}
@@ -92,7 +98,7 @@ export const PortfolioTokenAsset = ({
   )
 }
 
-const getParsedBalance = (
+export const getParsedBalance = (
   balance: bigint,
   decimals: number,
   places?: number

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { Address } from 'viem'
 import { useDispatch } from 'react-redux'
-import _ from 'lodash'
+import _, { isArray } from 'lodash'
 import { CHAINS_BY_ID } from '@/constants/chains'
 import {
   TokenAndBalance,
@@ -19,6 +19,9 @@ import { TWITTER_URL, DISCORD_URL } from '@/constants/urls'
 import { setFromToken, setToToken } from '@/slices/bridge/reducer'
 import { PortfolioTokenVisualizer } from './PortfolioTokenVisualizer'
 import { PortfolioNetwork } from './PortfolioNetwork'
+import { GAS_TOKENS } from '@/constants/tokens'
+import { GasTokenAsset } from './GasTokenAsset'
+import { GasToken } from '@/constants/tokens/gasTokens'
 
 type SingleNetworkPortfolioProps = {
   connectedAddress: Address
@@ -30,6 +33,37 @@ type SingleNetworkPortfolioProps = {
   fetchState: FetchState
 }
 
+const filterOutGasTokens = (
+  tokens: TokenAndBalance[],
+  chainId: number
+): [TokenAndBalance[], TokenAndBalance[]] => {
+  const gasTokens = GAS_TOKENS[chainId]
+
+  let filteredGasTokens: TokenAndBalance[] = []
+  let remainingTokens: TokenAndBalance[] = []
+
+  if (!gasTokens && !isArray(tokens)) {
+    return [filteredGasTokens, remainingTokens]
+  }
+
+  if (!gasTokens && isArray(tokens)) {
+    remainingTokens = [...tokens]
+  } else {
+    const gasTokenAddresses = gasTokens?.flatMap((token) =>
+      Object.values(token.addresses)
+    )
+    tokens?.forEach((token) => {
+      if (gasTokenAddresses?.includes(token.tokenAddress)) {
+        filteredGasTokens.push(token)
+      } else {
+        remainingTokens.push(token)
+      }
+    })
+  }
+
+  return [filteredGasTokens, remainingTokens]
+}
+
 export const SingleNetworkPortfolio = ({
   connectedAddress,
   portfolioChainId,
@@ -47,6 +81,12 @@ export const SingleNetworkPortfolio = ({
   const isUnsupportedChain: boolean = !chain
 
   const sortedTokens = sortTokensByBalanceDescending(portfolioTokens)
+
+  const [gasTokens, bridgeableTokens] = filterOutGasTokens(
+    sortedTokens,
+    portfolioChainId
+  )
+
   const hasNoTokenBalance: boolean =
     _.isNull(portfolioTokens) || _.isEmpty(portfolioTokens)
 
@@ -110,9 +150,14 @@ export const SingleNetworkPortfolio = ({
             connectedChain={chain}
           />
         )}
-        {sortedTokens &&
-          sortedTokens.length > 0 &&
-          sortedTokens.map(({ token, balance }: TokenAndBalance) => (
+        {gasTokens &&
+          gasTokens.length > 0 &&
+          gasTokens.map(({ token, balance }: TokenAndBalance) => (
+            <GasTokenAsset key={token.symbol} token={token} balance={balance} />
+          ))}
+        {bridgeableTokens &&
+          bridgeableTokens.length > 0 &&
+          bridgeableTokens.map(({ token, balance }: TokenAndBalance) => (
             <PortfolioTokenAsset
               key={token.symbol}
               token={token}

packages/synapse-interface/constants/tokens/gasTokens.ts

@@ -0,0 +1,108 @@
+import { zeroAddress } from 'viem'
+import bscImg from '@assets/chains/bnb.svg'
+import metisImg from '@assets/chains/metis.svg'
+import moonbeamImg from '@assets/chains/moonbeam.svg'
+import moonriverImg from '@assets/chains/moonriver.svg'
+import harmonyImg from '@assets/chains/harmony.svg'
+import cantoImg from '@assets/chains/canto.svg'
+import dogechainImg from '@assets/chains/dogechain.svg'
+import cronosImg from '@assets/chains/cronos.svg'
+
+import * as CHAINS from '@/constants/chains/master'
+
+export type GasToken = {
+  addresses: { [x: number]: string }
+  chainId: number
+  decimals: number
+  symbol: string
+  name: string
+  icon: any
+}
+
+export const BNB: GasToken = {
+  addresses: {
+    [CHAINS.BNB.id]: zeroAddress,
+  },
+  chainId: 56,
+  decimals: 18,
+  symbol: 'BNB',
+  name: 'Binance Coin',
+  icon: bscImg,
+}
+
+export const METIS: GasToken = {
+  addresses: {
+    [CHAINS.METIS.id]: zeroAddress,
+  },
+  chainId: 1088,
+  name: 'Metis',
+  symbol: 'METIS',
+  decimals: 18,
+  icon: metisImg,
+}
+
+export const NOTE: GasToken = {
+  addresses: {
+    [CHAINS.CANTO.id]: zeroAddress,
+  },
+  chainId: 7700,
+  name: 'Canto',
+  symbol: 'NOTE',
+  decimals: 18,
+  icon: cantoImg,
+}
+
+export const MOVR: GasToken = {
+  addresses: {
+    [CHAINS.MOONRIVER.id]: zeroAddress,
+  },
+  chainId: 1285,
+  name: 'Moonriver',
+  symbol: 'MOVR',
+  decimals: 18,
+  icon: moonriverImg,
+}
+
+export const GLMR: GasToken = {
+  addresses: {
+    [CHAINS.MOONBEAM.id]: zeroAddress,
+  },
+  chainId: 1284,
+  name: 'Glimmer',
+  symbol: 'GLMR',
+  decimals: 18,
+  icon: moonbeamImg,
+}
+
+export const ONE: GasToken = {
+  addresses: {
+    [CHAINS.HARMONY.id]: zeroAddress,
+  },
+  chainId: 1666600000,
+  name: 'Harmony One',
+  symbol: 'ONE',
+  decimals: 18,
+  icon: harmonyImg,
+}
+
+export const CRO: GasToken = {
+  addresses: {
+    [CHAINS.CRONOS.id]: zeroAddress,
+  },
+  chainId: 25,
+  name: 'Cronos',
+  symbol: 'CRO',
+  decimals: 18,
+  icon: cronosImg,
+}
+
+export const DOGE: GasToken = {
+  addresses: {
+    [CHAINS.DOGE.id]: zeroAddress,
+  },
+  chainId: 2000,
+  name: 'DOGE',
+  symbol: 'DOGE',
+  decimals: 18,
+  icon: dogechainImg,
+}

packages/synapse-interface/constants/tokens/index.ts

@@ -1,10 +1,12 @@
 import _ from 'lodash'
 import * as CHAINS from '@constants/chains/master'
 import * as all from '@constants/tokens/bridgeable'
+import * as allGasTokens from '@constants/tokens/gasTokens'
 import * as allPool from '@constants/tokens/poolMaster'
 import { GMX, ETH, USDC, USDT, WETH } from '@constants/tokens/bridgeable'
 import { SYN_ETH_SUSHI_TOKEN } from '@constants/tokens/sushiMaster'
 import { Token } from '@utils/types'
+import { GasToken } from '@constants/tokens/gasTokens'
 
 const allSwap = [WETH, USDC, USDT]
 
@@ -13,6 +15,10 @@ interface TokensByChain {
   [cID: string]: Token[]
 }
 
+interface GasTokensByChain {
+  [cID: string]: GasToken[]
+}
+
 interface TokenByKey {
   [cID: string]: Token
 }
@@ -69,6 +75,25 @@ const getBridgeableTokens = (): TokensByChain => {
   return bridgeableTokens
 }
 
+const getGasTokens = (): GasTokensByChain => {
+  const gasTokens: GasTokensByChain = {}
+  Object.entries(allGasTokens).map(([key, token]) => {
+    for (const cID of Object.keys(token.addresses)) {
+      // Skip if the token is paused on the current chain
+      if (PAUSED_TOKENS_BY_CHAIN[cID]?.includes(key)) continue
+
+      if (!gasTokens[cID]) {
+        gasTokens[cID] = [token]
+      } else {
+        if (!gasTokens[cID]?.includes(token)) {
+          gasTokens[cID] = [...gasTokens[cID], token]
+        }
+      }
+    }
+  })
+  return gasTokens
+}
+
 const getTokenHashMap = () => {
   const tokenHashMap = {}
 
@@ -93,6 +118,7 @@ export const TOKENS_SORTED_BY_SYMBOL = Array.from(
   new Set(sortedTokens.map((token) => token.symbol))
 )
 export const BRIDGABLE_TOKENS = getBridgeableTokens()
+export const GAS_TOKENS = getGasTokens()
 
 export const tokenSymbolToToken = (chainId: number, symbol: string) => {
   if (chainId) {

packages/synapse-interface/utils/actions/fetchPortfolioBalances.tsx

@@ -1,6 +1,10 @@
 import { sortByTokenBalance } from '../sortTokens'
 import { Chain, Token } from '../types'
-import { BRIDGABLE_TOKENS, POOLS_BY_CHAIN } from '@/constants/tokens'
+import {
+  BRIDGABLE_TOKENS,
+  POOLS_BY_CHAIN,
+  GAS_TOKENS,
+} from '@/constants/tokens'
 import { FetchState } from '@/slices/portfolio/actions'
 
 export interface TokenAndBalance {
@@ -50,16 +54,24 @@ export const fetchPortfolioBalances = async (
 
   try {
     const balancePromises = filteredChains.map(async (chainId) => {
-      let currentChainTokens
       const currentChainId = Number(chainId)
+      let currentChainTokens
+
+      currentChainTokens = BRIDGABLE_TOKENS[chainId]
 
       if (POOLS_BY_CHAIN[chainId]) {
-        currentChainTokens = BRIDGABLE_TOKENS[chainId].concat(
-          POOLS_BY_CHAIN[chainId]
-        )
-      } else {
-        currentChainTokens = BRIDGABLE_TOKENS[chainId]
+        // currentChainTokens = BRIDGABLE_TOKENS[chainId].concat(
+        //   POOLS_BY_CHAIN[chainId]
+        // )
+        currentChainTokens = currentChainTokens.concat(POOLS_BY_CHAIN[chainId])
+      }
+
+      if (GAS_TOKENS[chainId]) {
+        currentChainTokens = currentChainTokens.concat(GAS_TOKENS[chainId])
       }
+      // else {
+      //   currentChainTokens = BRIDGABLE_TOKENS[chainId]
+      // }
 
       const [tokenBalances] = await Promise.all([
         getTokenBalances(address, currentChainTokens, currentChainId),