feat: add new token selector and show balance (#3482)

* feat: add searchable list component in theme package

* fix: token icon not show on BSC (#3383)

* fix: change asset base url of binance token icon

* fix: fetch token icon uri from mask.json

* fix: perfect token icon map for missing in trust wallet and logoURI 404

* refactor: use isSameAddress to compare addresses in TokenIcon

* chore: move special icon list to json file (#3402)

* fix: typo error

* fix: should use incoming chainId when get token asset base uri

Co-authored-by: Septs <[email protected]>

(cherry picked from commit 976f5f4)

* feat: add token list component in dashboard package

* chore: migrate useERC20TokensDetailedFromTokenLists to web3-shared

* chore: @DimensionDev to @masknet

* chore: fix pr comments

* fix: rename TokenIconSpeialIconList to TokenIconSpecialIconList

* fix: remove invalid style

* fix: use currySameAddress in token icon to compare token address

* chore: move TokenList and TokenIcon to share

* chore: remove unused useImageFailOver hook

* chore: move ErrorBoundary / QRCode / locales / useSnackbarCallback to shared from them

* fix: work around for cannot be named without a reference

* chore: remove unused package

* refactor: use deconstruction for getTokenAssetBaseURLConstants in token icon

* refactor: add interface NetworkSettings in setting

* fix: fix prettier

* refactor: use deconstruction for constant

* refactor: rename token list props

* fix: merge develop

* refactor: add comment for token icon load

* refactor: rename searchable list props to item keys to avoid react remove key

* chore: remove useless code

Co-authored-by: Jack Works <[email protected]>

.i18n-codegen.json

@@ -15,8 +15,8 @@
             }
         },
         {
-            "input": "./packages/theme/src/locales/en.json",
-            "output": "./packages/theme/src/locales/i18n_generated",
+            "input": "./packages/shared/src/locales/en.json",
+            "output": "./packages/shared/src/locales/i18n_generated",
             "parser": "i18next",
             "generator": {
                 "type": "i18next/react-hooks",

packages/constants/data/token-asset-base-url.json

@@ -0,0 +1,40 @@
+{
+    "TOKEN_ASSET_BASE_URI": {
+        "Mainnet": [
+            "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum",
+            "https://rawcdn.githack.com/trustwallet/assets/master/blockchains/ethereum"
+        ],
+        "Ropsten": [
+            "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum",
+            "https://rawcdn.githack.com/trustwallet/assets/master/blockchains/ethereum"
+        ],
+        "Rinkeby": [
+            "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum",
+            "https://rawcdn.githack.com/trustwallet/assets/master/blockchains/ethereum"
+        ],
+        "Kovan": [
+            "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum",
+            "https://rawcdn.githack.com/trustwallet/assets/master/blockchains/ethereum"
+        ],
+        "Gorli": [
+            "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum",
+            "https://rawcdn.githack.com/trustwallet/assets/master/blockchains/ethereum"
+        ],
+        "BSC": [
+            "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/smartchain",
+            "https://rawcdn.githack.com/trustwallet/assets/master/blockchains/smartchain"
+        ],
+        "BSCT": [
+            "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/smartchain",
+            "https://rawcdn.githack.com/trustwallet/assets/master/blockchains/smartchain"
+        ],
+        "Matic": [
+            "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/polygon",
+            "https://rawcdn.githack.com/trustwallet/assets/master/blockchains/polygon"
+        ],
+        "Mumbai": [
+            "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/polygon",
+            "https://rawcdn.githack.com/trustwallet/assets/master/blockchains/polygon"
+        ]
+    }
+}

packages/dashboard/.storybook/preview.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { ThemeProvider, StyledEngineProvider } from '@material-ui/core'
 import { StylesProvider } from '@material-ui/styles'
-import { MaskLightTheme, addMaskThemeI18N, applyMaskColorVars } from '@masknet/theme'
+import { MaskLightTheme, addMaskSharedI18N, applyMaskColorVars } from '@masknet/theme'
 import { withMatrix } from 'storybook-addon-matrix'
 import { addDashboardI18N } from '../src/locales'
 import { I18nextProvider, initReactI18next } from 'react-i18next'
@@ -15,7 +15,7 @@ i18n.init({
 })
 i18n.use(initReactI18next)
 addDashboardI18N(i18n)
-addMaskThemeI18N(i18n)
+addMaskSharedI18N(i18n)
 export const parameters = {
     actions: { argTypesRegex: '^on[A-Z].*' },
 }

packages/dashboard/package.json

@@ -11,7 +11,7 @@
     "build": "build -- snowpack build"
   },
   "dependencies": {
-    "@dimensiondev/holoflows-kit": "0.8.0-20210317064617-6c4792c",
+    "@dimensiondev/holoflows-kit": "=0.8.0-20210429202414-74fb9a1",
     "@dimensiondev/kit": "=0.0.0-20210630045432-e05621c",
     "@masknet/icons": "workspace:*",
     "@masknet/plugin-example": "workspace:*",

packages/dashboard/src/components/DashboardFrame/index.tsx

@@ -14,7 +14,7 @@ import {
 } from '@material-ui/core'
 import { Menu as MenuIcon, Close as CloseIcon } from '@material-ui/icons'
 import Color from 'color'
-import { ErrorBoundary } from '@masknet/theme'
+import { ErrorBoundary } from '@masknet/shared'
 import { useState, useContext, useMemo, Suspense } from 'react'
 import { DashboardContext } from './context'
 import { Navigation } from './Navigation'

packages/dashboard/src/initialization/Dashboard.tsx

@@ -4,13 +4,13 @@ import { StylesProvider } from '@material-ui/styles'
 import {
     CustomSnackbarProvider,
     MaskLightTheme,
-    ErrorBoundary,
     applyMaskColorVars,
     MaskDarkTheme,
     useSystemPreferencePalatte,
 } from '@masknet/theme'
 import { ChainId } from '@masknet/web3-shared'
 import { Emitter } from '@servie/events'
+import { ErrorBoundary } from '@masknet/shared'
 
 import i18n from 'i18next'
 import { I18nextProvider } from 'react-i18next'

packages/dashboard/src/initialization/i18n.ts

@@ -1,5 +1,5 @@
 import i18n from 'i18next'
-import { addMaskThemeI18N } from '@masknet/theme'
+import { addMaskSharedI18N } from '@masknet/shared'
 import { addDashboardI18N } from '../locales'
 import { initReactI18next } from 'react-i18next'
 
@@ -10,5 +10,5 @@ i18n.init({
     fallbackLng: 'en',
 })
 i18n.use(initReactI18next)
-addMaskThemeI18N(i18n)
+addMaskSharedI18N(i18n)
 addDashboardI18N(i18n)

packages/dashboard/src/locales/en.json

@@ -72,6 +72,7 @@
     "wallets_empty_collectible_tip": "No collectibles were found. Please add Collectibles.",
     "wallets_address_copied": "Address successfully copied",
     "wallets_address_copy": "Copy",
+    "wallets_loading_token": "Loading Token",
     "personas_setup_connect_tips": "Please connect to your {{type}} account.",
     "personas_setup_connect": "Connect",
     "personas_name_maximum_tips": "Maximum length is {{length}} characters long.",

packages/dashboard/src/locales/zh.json

@@ -41,6 +41,7 @@
     "wallets_balance_Buy": "購買",
     "wallets_balance_Swap": "交換",
     "wallets_balance_Receive": "接收",
+    "wallets_loading_token": "",
     "personas_setup_connect_tips": "",
     "personas_setup_connect": "",
     "personas_name_maximum_tips": "",

packages/dashboard/src/pages/Wallets/components/AddCollectibleDialog/index.tsx

@@ -1,5 +1,6 @@
 import { memo, useMemo, useState } from 'react'
-import { MaskColorVar, MaskDialog, useSnackbarCallback } from '@masknet/theme'
+import { MaskColorVar, MaskDialog } from '@masknet/theme'
+import { useSnackbarCallback } from '@masknet/shared'
 import { Box, Button, DialogActions, DialogContent, makeStyles, TextField } from '@material-ui/core'
 import { useERC721TokenAssetDetailed, useERC721TokenDetailed, useWallet } from '@masknet/web3-shared'
 import { PluginServices } from '../../../../API'

packages/dashboard/src/pages/Wallets/components/AddTokenConfirmUI/index.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react'
 import { useDashboardI18N } from '../../../../locales'
 import { Box, Button, DialogActions, DialogContent, makeStyles, Stack, Typography } from '@material-ui/core'
-import { TokenIcon } from '../TokenIcon'
 import type { ERC20TokenDetailed } from '@masknet/web3-shared'
+import { TokenIcon } from '@masknet/shared'
 
 export interface AddTokenConfirmUIProps {
     onBack: () => void

packages/dashboard/src/pages/Wallets/components/AddTokenDialog/index.tsx

@@ -1,5 +1,6 @@
 import { memo, useState } from 'react'
-import { MaskDialog, useSnackbarCallback } from '@masknet/theme'
+import { MaskDialog } from '@masknet/theme'
+import { useSnackbarCallback } from '@masknet/shared'
 import { ERC20TokenDetailed, useERC20TokenBalance, useERC20TokenDetailed, useWallet } from '@masknet/web3-shared'
 import { useUpdateEffect } from 'react-use'
 import { PluginServices } from '../../../../API'

packages/dashboard/src/pages/Wallets/components/ReceiveDialog/index.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react'
 import { useDashboardI18N } from '../../../../locales'
-import { MaskColorVar, MaskDialog, QRCode, useSnackbarCallback } from '@masknet/theme'
+import { MaskColorVar, MaskDialog } from '@masknet/theme'
+import { QRCode, useSnackbarCallback } from '@masknet/shared'
 import { DialogContent, Typography, makeStyles, DialogActions, Button } from '@material-ui/core'
 import { WalletQRCodeContainer } from '../../../../components/WalletQRCodeContainer'
 import { useCopyToClipboard } from 'react-use'

packages/dashboard/src/pages/Wallets/components/TokenTableRow/index.tsx

@@ -1,14 +1,18 @@
 import { memo } from 'react'
 import { Box, Button, makeStyles, TableCell, TableRow, Typography } from '@material-ui/core'
-import { TokenIcon } from '../TokenIcon'
 import { FormattedCurrency } from '@masknet/shared'
 import { Asset, CurrencyType, formatBalance, formatCurrency, getTokenUSDValue, pow10 } from '@masknet/web3-shared'
 import BigNumber from 'bignumber.js'
 import { useNavigate } from 'react-router'
 import { RoutePaths } from '../../../../type'
 import { useDashboardI18N } from '../../../../locales'
+import { TokenIcon } from '@masknet/shared'
 
 const useStyles = makeStyles((theme) => ({
+    icon: {
+        width: 36,
+        height: 36,
+    },
     symbol: {
         marginLeft: 14,
         fontSize: theme.typography.pxToRem(14),
@@ -31,6 +35,7 @@ export const TokenTableRow = memo<TokenTableRowProps>(({ asset }) => {
             <TableCell className={classes.cell} align="center" variant="body">
                 <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <TokenIcon
+                        classes={{ icon: classes.icon }}
                         address={asset.token.address}
                         name={asset.token.name}
                         chainId={asset.token.chainId}

packages/dashboard/src/pages/Wallets/hooks/useERC20TokensDetailed.ts

@@ -0,0 +1,49 @@
+import {
+    EthereumTokenType,
+    isSameAddress,
+    TokenListsState,
+    useAssetsFromChain,
+    useERC20TokensDetailedFromTokenLists,
+    useEthereumConstants,
+    useNativeTokenDetailed,
+    useTokenConstants,
+} from '@masknet/web3-shared'
+import { uniqBy } from 'lodash-es'
+import { useMemo } from 'react'
+
+export function useERC20TokensDetailed() {
+    const { ERC20_TOKEN_LISTS } = useEthereumConstants()
+    const { value: nativeTokenDetailed } = useNativeTokenDetailed()
+    const { state, tokensDetailed: erc20TokensDetailed } = useERC20TokensDetailedFromTokenLists(ERC20_TOKEN_LISTS)
+
+    //#region mask token
+    const { MASK_ADDRESS } = useTokenConstants()
+    //#endregion
+
+    const tokens = useMemo(
+        () =>
+            uniqBy(
+                nativeTokenDetailed ? [nativeTokenDetailed, ...erc20TokensDetailed] : [...erc20TokensDetailed],
+                (x) => x.address.toLowerCase(),
+            ).sort((a, z) => {
+                if (a.type === EthereumTokenType.Native) return -1
+                if (z.type === EthereumTokenType.Native) return 1
+                if (isSameAddress(a.address, MASK_ADDRESS)) return -1
+                if (isSameAddress(z.address, MASK_ADDRESS)) return 1
+                return 0
+            }),
+        [nativeTokenDetailed, erc20TokensDetailed.length],
+    )
+
+    const {
+        value: assetsDetailedChain = [],
+        loading: assetsDetailedChainLoading,
+        error: assetsDetailedChainError,
+    } = useAssetsFromChain(tokens)
+
+    return {
+        value: assetsDetailedChain,
+        loading: state !== TokenListsState.READY || assetsDetailedChainLoading,
+        error: assetsDetailedChainError,
+    }
+}

packages/dashboard/src/web3/context.ts

@@ -62,6 +62,7 @@ export const Web3Context: Web3ProviderType = {
     getAssetList: PluginServices.Wallet.getAssetsList,
     getAssetsListNFT: PluginServices.Wallet.getAssetsListNFT,
     getERC721TokensPaged,
+    fetchERC20TokensFromTokenLists: Services.Ethereum.fetchERC20TokensFromTokenLists,
 }
 
 export function createExternalProvider() {

packages/theme/stories/components/CrashUI.stories.tsx → packages/dashboard/stories/components/Shared/CrashUI.tsx

@@ -1,5 +1,5 @@
-import { CrashUI as C } from '../../src/Components/ErrorBoundary'
-import { story } from '../utils'
+import { CrashUI as C } from '@masknet/shared'
+import { story } from '@masknet/storybook-shared'
 
 const { meta, of } = story(C)
 export default meta({

packages/dashboard/tsconfig.json

@@ -4,7 +4,7 @@
     "rootDir": "./",
     "outDir": "./dist/"
   },
-  "include": ["./src/", "./stories/", "./src/locales/*.json"],
+  "include": ["./src/", "./stories/", "./src/**/*.json"],
   "references": [
     { "path": "../theme/" },
     { "path": "../maskbook/" },

packages/maskbook/package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "@balancer-labs/sor": "^1.0.0",
     "@dimensiondev/common-protocols": "1.6.0-20201027083702-d0ae6e2",
-    "@dimensiondev/holoflows-kit": "0.8.0-20210317064617-6c4792c",
+    "@dimensiondev/holoflows-kit": "=0.8.0-20210429202414-74fb9a1",
     "@dimensiondev/kit": "=0.0.0-20210630045432-e05621c",
     "@dimensiondev/metamask-extension-provider": "3.0.6-20210519045409-1835d4d",
     "@dimensiondev/stego-js": "=0.11.1-20201027083223-8ab41be",

packages/maskbook/src/UIRoot.tsx

@@ -3,7 +3,7 @@ import { StylesProvider } from '@material-ui/styles'
 import { CssBaseline, StyledEngineProvider, ThemeProvider } from '@material-ui/core'
 import { Web3Provider } from '@masknet/web3-shared'
 import { SnackbarProvider } from '@masknet/theme'
-import { ErrorBoundary, ErrorBoundaryBuildInfoContext } from '@masknet/theme'
+import { ErrorBoundary, ErrorBoundaryBuildInfoContext } from '@masknet/shared'
 import i18nNextInstance from './utils/i18n-next'
 import { useClassicMaskTheme } from './utils/theme'
 import { Web3Context } from './web3/context'

packages/maskbook/src/components/shared/ErrorBoundary.tsx

@@ -1 +1 @@
-export { ErrorBoundary, withErrorBoundary } from '@masknet/theme'
+export { ErrorBoundary, withErrorBoundary } from '@masknet/shared'

packages/maskbook/src/components/shared/InjectedDialog.tsx

@@ -16,7 +16,7 @@ import { Children, cloneElement } from 'react'
 import { useI18N, usePortalShadowRoot } from '../../utils'
 import { mergeClasses, useStylesExtends } from '../custom-ui-helper'
 import { DialogDismissIconUI } from '../InjectedComponents/DialogDismissIcon'
-import { ErrorBoundary } from '@masknet/theme'
+import { ErrorBoundary } from '@masknet/shared'
 import { activatedSocialNetworkUI } from '../../social-network'
 
 const useStyles = makeStyles((theme) => ({

packages/maskbook/src/extension/background-script/EthereumServices/tokenList.ts

@@ -18,6 +18,7 @@ interface TokenList {
         name: string
         symbol: string
         decimals: number
+        logoURI?: string
     }[]
     version: {
         major: number