Binance Smart Chain support

.env.defaults

@@ -23,6 +23,7 @@ SUPPORT_TABBED_ONBOARDING=false
 SUPPORT_KEYRING_LOCKING=true
 SUPPORT_FORGOT_PASSWORD=false
 SUPPORT_AVALANCHE=false
+SUPPORT_BINANCE_SMART_CHAIN=false
 ENABLE_ACHIEVEMENTS_TAB=true
 SUPPORT_ACHIEVEMENTS_BANNER=false
 SWITCH_RUNTIME_FLAGS=false

background/constants/coin-types.ts

@@ -11,6 +11,7 @@ export const coinTypesByAssetSymbol = {
   RBTC: 137,
   MATIC: 966,
   AVAX: 9000,
+  BNB: 714,
 } as const
 
 /**

background/constants/currencies.ts

@@ -75,6 +75,18 @@ export const AVAX: NetworkBaseAsset = {
   },
 }
 
+export const BNB: NetworkBaseAsset = {
+  name: "Binance Coin",
+  symbol: "BNB",
+  decimals: 18,
+  coinType: coinTypesByAssetSymbol.BNB,
+  metadata: {
+    coinGeckoID: "binancecoin",
+    tokenLists: [],
+    websiteURL: "https://bnbchain.org",
+  },
+}
+
 export const BTC: NetworkBaseAsset = {
   name: "Bitcoin",
   symbol: "BTC",
@@ -87,7 +99,7 @@ export const BTC: NetworkBaseAsset = {
   },
 }
 
-export const BASE_ASSETS = [ETH, BTC, MATIC, RBTC, OPTIMISTIC_ETH, AVAX]
+export const BASE_ASSETS = [ETH, BTC, MATIC, RBTC, OPTIMISTIC_ETH, AVAX, BNB]
 
 export const BASE_ASSETS_BY_SYMBOL = BASE_ASSETS.reduce<{
   [assetSymbol: string]: NetworkBaseAsset

background/constants/networks.ts

@@ -1,5 +1,5 @@
 import { EVMNetwork, Network } from "../networks"
-import { AVAX, BTC, ETH, MATIC, OPTIMISTIC_ETH, RBTC } from "./currencies"
+import { AVAX, BNB, BTC, ETH, MATIC, OPTIMISTIC_ETH, RBTC } from "./currencies"
 
 export const ETHEREUM: EVMNetwork = {
   name: "Ethereum",
@@ -41,6 +41,14 @@ export const AVALANCHE: EVMNetwork = {
   coingeckoPlatformID: "avalanche",
 }
 
+export const BINANCE_SMART_CHAIN: EVMNetwork = {
+  name: "BNB Smart Chain",
+  baseAsset: BNB,
+  chainID: "56",
+  family: "EVM",
+  coingeckoPlatformID: "binance-smart-chain",
+}
+
 export const OPTIMISM: EVMNetwork = {
   name: "Optimism",
   baseAsset: OPTIMISTIC_ETH,
@@ -77,7 +85,9 @@ export const EIP_1559_COMPLIANT_CHAIN_IDS = new Set(
 )
 
 export const CHAINS_WITH_MEMPOOL = new Set(
-  [ETHEREUM, POLYGON, AVALANCHE, GOERLI].map((network) => network.chainID)
+  [ETHEREUM, POLYGON, AVALANCHE, GOERLI, BINANCE_SMART_CHAIN].map(
+    (network) => network.chainID
+  )
 )
 
 export const NETWORK_BY_CHAIN_ID = {
@@ -87,6 +97,7 @@ export const NETWORK_BY_CHAIN_ID = {
   [ARBITRUM_ONE.chainID]: ARBITRUM_ONE,
   [AVALANCHE.chainID]: AVALANCHE,
   [OPTIMISM.chainID]: OPTIMISM,
+  [BINANCE_SMART_CHAIN.chainID]: BINANCE_SMART_CHAIN,
   [GOERLI.chainID]: GOERLI,
   [FORK.chainID]: FORK,
 }
@@ -107,6 +118,7 @@ export const CHAIN_ID_TO_0X_API_BASE: {
   [GOERLI.chainID]: "goerli.api.0x.org",
   [ARBITRUM_ONE.chainID]: "arbitrum.api.0x.org",
   [AVALANCHE.chainID]: "avalanche.api.0x.org",
+  [BINANCE_SMART_CHAIN.chainID]: "bsc.api.0x.org",
 }
 
 export const NETWORKS_SUPPORTING_SWAPS = new Set(
@@ -135,4 +147,5 @@ export const CHAIN_ID_TO_RPC_URLS: {
   ],
   [GOERLI.chainID]: ["https://ethereum-goerli-rpc.allthatnode.com"],
   [AVALANCHE.chainID]: ["https://api.avax.network/ext/bc/C/rpc"],
+  [BINANCE_SMART_CHAIN.chainID]: ["https://rpc.ankr.com/bsc"],
 }

background/features.ts

@@ -28,6 +28,8 @@ export const RuntimeFlag = {
   HIDE_TOKEN_FEATURES: process.env.HIDE_TOKEN_FEATURES === "true",
   SUPPORT_RSK: process.env.SUPPORT_RSK === "true",
   SUPPORT_AVALANCHE: process.env.SUPPORT_AVALANCHE === "true",
+  SUPPORT_BINANCE_SMART_CHAIN:
+    process.env.SUPPORT_BINANCE_SMART_CHAIN === "true",
   SUPPORT_ACHIEVEMENTS_BANNER:
     process.env.SUPPORT_ACHIEVEMENTS_BANNER === "true",
   SUPPORT_NFT_TAB: process.env.SUPPORT_NFT_TAB === "true",

background/redux-slices/accounts.ts

@@ -2,7 +2,12 @@ import { createSlice } from "@reduxjs/toolkit"
 import { createBackgroundAsyncThunk } from "./utils"
 import { AccountBalance, AddressOnNetwork, NameOnNetwork } from "../accounts"
 import { EVMNetwork, Network } from "../networks"
-import { AnyAsset, AnyAssetAmount, SmartContractFungibleAsset } from "../assets"
+import {
+  AnyAsset,
+  AnyAssetAmount,
+  FungibleAsset,
+  SmartContractFungibleAsset,
+} from "../assets"
 import {
   AssetMainCurrencyAmount,
   AssetDecimalAmount,
@@ -172,9 +177,22 @@ function updateCombinedData(immerState: AccountState) {
       [symbol: string]: AnyAssetAmount
     }>((acc, combinedAssetAmount) => {
       const assetSymbol = combinedAssetAmount.asset.symbol
+      let { amount } = combinedAssetAmount
+
+      if (acc[assetSymbol]?.asset) {
+        const { decimals } = acc[assetSymbol].asset as FungibleAsset
+        const assetDecimals =
+          "decimals" in combinedAssetAmount.asset
+            ? combinedAssetAmount.asset.decimals
+            : 0
+        if (assetDecimals > decimals) {
+          amount /= BigInt(`1${"0".repeat(assetDecimals - decimals)}`)
+        }
+      }
+
       acc[assetSymbol] = {
         ...combinedAssetAmount,
-        amount: (acc[assetSymbol]?.amount || 0n) + combinedAssetAmount.amount,
+        amount: (acc[assetSymbol]?.amount || 0n) + amount,
       }
       return acc
     }, {})

background/redux-slices/assets.ts

@@ -110,6 +110,13 @@ const selectPairedAssetSymbol = (
   pairedAssetSymbol: string
 ) => pairedAssetSymbol
 
+const selectChainID = (
+  _: AssetsState,
+  _2: string,
+  _3: string,
+  chainID: string
+) => chainID
+
 /**
  * Executes an asset transfer between two addresses, for a set amount. Supports
  * an optional fixed gas limit.
@@ -187,9 +194,21 @@ export const transferAsset = createBackgroundAsyncThunk(
  * the selector will return them in the order [ETH, USD].
  */
 export const selectAssetPricePoint = createSelector(
-  [selectAssetsState, selectAssetSymbol, selectPairedAssetSymbol],
-  (assets, assetSymbol, pairedAssetSymbol) => {
-    const pricedAsset = assets.find(
+  [
+    selectAssetsState,
+    selectAssetSymbol,
+    selectPairedAssetSymbol,
+    selectChainID,
+  ],
+  (assets, assetSymbol, pairedAssetSymbol, chainID) => {
+    const pricedAsset = (
+      chainID
+        ? assets.filter(
+            (asset) =>
+              "homeNetwork" in asset && asset.homeNetwork.chainID === chainID
+          )
+        : assets
+    ).find(
       (asset) =>
         asset.symbol === assetSymbol &&
         pairedAssetSymbol in asset.recentPrices &&

background/redux-slices/dapp.ts

@@ -5,6 +5,7 @@ import { createBackgroundAsyncThunk } from "./utils"
 import { keyPermissionsByChainIdAddressOrigin } from "../services/provider-bridge/utils"
 import {
   AVALANCHE,
+  BINANCE_SMART_CHAIN,
   ETHEREUM,
   GOERLI,
   OPTIMISM,
@@ -131,6 +132,7 @@ const dappSlice = createSlice({
             POLYGON,
             OPTIMISM,
             AVALANCHE,
+            BINANCE_SMART_CHAIN,
             GOERLI,
           ].map((network) => ({
             ...permission,

background/redux-slices/selectors/accountsSelectors.ts

@@ -82,7 +82,8 @@ const computeCombinedAssetAmountsData = (
   assets: AssetsState,
   mainCurrencySymbol: string,
   currentNetwork: EVMNetwork,
-  hideDust: boolean
+  hideDust: boolean,
+  useCurrentNetwork = false
 ): {
   combinedAssetAmounts: CompleteAssetAmount[]
   totalMainCurrencyAmount: number | undefined
@@ -98,7 +99,8 @@ const computeCombinedAssetAmountsData = (
       const assetPricePoint = selectAssetPricePoint(
         assets,
         assetAmount.asset.symbol,
-        mainCurrencySymbol
+        mainCurrencySymbol,
+        useCurrentNetwork ? currentNetwork.chainID : undefined
       )
 
       const mainCurrencyEnrichedAssetAmount =
@@ -260,7 +262,8 @@ export const selectCurrentAccountBalances = createSelector(
         assets,
         mainCurrencySymbol,
         currentNetwork,
-        hideDust
+        hideDust,
+        true
       )
 
     return {
@@ -319,14 +322,16 @@ const getAccountType = (
 const getTotalBalance = (
   accountBalances: { [assetSymbol: string]: AccountBalance },
   assets: AssetsState,
-  mainCurrencySymbol: string
+  mainCurrencySymbol: string,
+  chainID: string
 ) => {
   return Object.values(accountBalances)
     .map(({ assetAmount }) => {
       const assetPricePoint = selectAssetPricePoint(
         assets,
         assetAmount.asset.symbol,
-        mainCurrencySymbol
+        mainCurrencySymbol,
+        chainID
       )
 
       if (typeof assetPricePoint === "undefined") {
@@ -397,7 +402,12 @@ function getNetworkAccountTotalsByCategory(
         avatarURL: accountData.ens.avatarURL ?? accountData.defaultAvatar,
         localizedTotalMainCurrencyAmount: formatCurrencyAmount(
           mainCurrencySymbol,
-          getTotalBalance(accountData.balances, assets, mainCurrencySymbol),
+          getTotalBalance(
+            accountData.balances,
+            assets,
+            mainCurrencySymbol,
+            network.chainID
+          ),
           desiredDecimals.default
         ),
       }
@@ -469,7 +479,8 @@ export const selectAccountTotalsForOverview = createSelector(
           accountsTotal[normalizedAddress].totals[chainID] = getTotalBalance(
             accountData.balances,
             assetsState,
-            mainCurrencySymbol
+            mainCurrencySymbol,
+            chainID
           )
         })
       )

background/redux-slices/utils/0x-swap-utils.ts

@@ -97,7 +97,8 @@ export async function getAssetAmount(
   const assetPricePoint = selectAssetPricePoint(
     assets,
     asset?.symbol,
-    hardcodedMainCurrencySymbol
+    hardcodedMainCurrencySymbol,
+    network.chainID
   )
 
   return enrichAssetAmountWithMainCurrencyValues(

background/services/chain/index.ts

@@ -31,6 +31,7 @@ import {
   CHAINS_WITH_MEMPOOL,
   EIP_1559_COMPLIANT_CHAIN_IDS,
   AVALANCHE,
+  BINANCE_SMART_CHAIN,
 } from "../../constants"
 import { FeatureFlags, isEnabled } from "../../features"
 import PreferenceService from "../preferences"
@@ -271,6 +272,9 @@ export default class ChainService extends BaseService<Events> {
       ARBITRUM_ONE,
       ...(isEnabled(FeatureFlags.SUPPORT_RSK) ? [ROOTSTOCK] : []),
       ...(isEnabled(FeatureFlags.SUPPORT_AVALANCHE) ? [AVALANCHE] : []),
+      ...(isEnabled(FeatureFlags.SUPPORT_BINANCE_SMART_CHAIN)
+        ? [BINANCE_SMART_CHAIN]
+        : []),
     ]
 
     this.trackedNetworks = []

background/services/preferences/db.ts

@@ -257,6 +257,17 @@ export class PreferenceDatabase extends Dexie {
         })
     })
 
+    this.version(13).upgrade((tx) => {
+      return tx
+        .table("preferences")
+        .toCollection()
+        .modify((storedPreferences: Preferences) => {
+          storedPreferences.tokenLists.urls.push(
+            "https://tokens.pancakeswap.finance/pancakeswap-default.json"
+          )
+        })
+    })
+
     // This is the old version for populate
     // https://dexie.org/docs/Dexie/Dexie.on.populate-(old-version)
     // The this does not behave according the new docs, but works

background/services/preferences/defaults.ts

@@ -21,6 +21,7 @@ const defaultPreferences: Preferences = {
       "https://static.optimism.io/optimism.tokenlist.json", // Optimism Default Tokens
       "https://bridge.arbitrum.io/token-list-42161.json", // Arbitrum Default tokens
       "https://raw.githubusercontent.com/traderjoe-xyz/joe-tokenlists/main/src/joe.tokenlist-v2.json", // Trader Joe tokens
+      "https://tokens.pancakeswap.finance/pancakeswap-default.json", // PancakeSwap Default List
     ],
   },
   currency: USD,

ui/_locales/en/messages.json

@@ -626,7 +626,8 @@
         "HIDE_TOKEN_FEATURES": "Hide token features",
         "SUPPORT_ACHIEVEMENTS_BANNER": "Enable achievements banner",
         "SUPPORT_AVALANCHE": "Enable Avalanche network",
-        "SUPPORT_NFT_TAB": "Enable to open NFTs page from tab"
+        "SUPPORT_NFT_TAB": "Enable to open NFTs page from tab",
+        "SUPPORT_BINANCE_SMART_CHAIN": "Enable Binance Smart Chain network"
       }
     }
   },

ui/components/Overview/NetworksChart.tsx

@@ -4,6 +4,7 @@ import {
   OPTIMISM,
   NETWORK_BY_CHAIN_ID,
   POLYGON,
+  BINANCE_SMART_CHAIN,
 } from "@tallyho/tally-background/constants"
 import { FeatureFlags, isEnabled } from "@tallyho/tally-background/features"
 import { AccountTotalList } from "@tallyho/tally-background/redux-slices/selectors"
@@ -16,6 +17,7 @@ const NETWORKS_CHART_COLORS = {
   [POLYGON.chainID]: "#8347E5",
   [ARBITRUM_ONE.chainID]: "#2083C5",
   [OPTIMISM.chainID]: "#CD041C",
+  [BINANCE_SMART_CHAIN.chainID]: "#F3BA2F",
 }
 
 const getNetworksPercents = (

ui/components/Shared/SharedAssetIcon.tsx

@@ -8,7 +8,7 @@ interface Props {
   symbol: string
 }
 
-const hardcodedIcons = new Set(["ETH", "MATIC", "DOGGO", "RBTC", "AVAX"])
+const hardcodedIcons = new Set(["ETH", "MATIC", "DOGGO", "RBTC", "AVAX", "BNB"])
 export default function SharedAssetIcon(props: Props): ReactElement {
   const { size, logoURL, symbol } = props
 

ui/components/TopMenu/TopMenuProtocolList.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from "react"
 import {
   ARBITRUM_ONE,
   AVALANCHE,
+  BINANCE_SMART_CHAIN,
   ETHEREUM,
   GOERLI,
   OPTIMISM,
@@ -57,13 +58,20 @@ const productionNetworks = [
           isDisabled: true,
         },
       ]),
-
-  // {
-  //   name: "Binance Smart Chain",
-  //   info: i18n.t("protocol.compatibleChain"),
-  //   width: 24,
-  //   height: 24,
-  // },
+  ...(isEnabled(FeatureFlags.SUPPORT_BINANCE_SMART_CHAIN)
+    ? [
+        {
+          network: BINANCE_SMART_CHAIN,
+          info: i18n.t("protocol.compatibleChain"),
+        },
+      ]
+    : [
+        {
+          network: BINANCE_SMART_CHAIN,
+          info: i18n.t("comingSoon"),
+          isDisabled: true,
+        },
+      ]),
   // {
   //   name: "Celo",
   //   info: "Global payments infrastructure",