feat(Metis): add Metis Optimistic Layer2

cspell.json

@@ -160,6 +160,8 @@
         "multicall",
         "multihop",
         "Mutex",
+        "netswap",
+        "nett",
         "newsfeed",
         "NFTRSS",
         "nftscan",

docs/evm-integration.md

@@ -100,3 +100,4 @@ Goto `chrome-extension://jkoeaghipilijlahjplgbfiocjhldnap/dashboard.html#/wallet
 | xDai      | <https://github.com/DimensionDev/Maskbook/pull/4140> |
 | Arbitrum  | <https://github.com/DimensionDev/Maskbook/pull/3558> |
 | Avalanche | <https://github.com/DimensionDev/Maskbook/pull/5289> |
+| Metis     | <https://github.com/DimensionDev/Maskbook/pull/5322> |

packages/dashboard/src/pages/Labs/components/SwapSettingDialog.tsx

@@ -11,6 +11,7 @@ import {
     useAvalancheNetworkTradeProvider,
     useXDaiNetworkTradeProvider,
     useCeloNetworkTradeProvider,
+    useMetisNetworkTradeProvider,
     useFantomNetworkTradeProvider,
     useAuroraNetworkTradeProvider,
 } from '../../Settings/api'
@@ -63,6 +64,12 @@ export default function SwapSettingDialog({ open, onClose }: SettingDialogProps)
 
     const celoOptions = [{ label: 'SushiSwap', value: TradeProvider.SUSHISWAP }]
 
+    const metisOptions = [
+        { label: 'Tethys', value: TradeProvider.TETHYS },
+        { label: 'SushiSwap', value: TradeProvider.SUSHISWAP },
+        { label: 'NetSwap', value: TradeProvider.NETSWAP },
+    ]
+
     const avalancheOptions = [
         { label: 'SushiSwap', value: TradeProvider.SUSHISWAP },
         { label: 'TraderJoe', value: TradeProvider.TRADERJOE },
@@ -115,6 +122,12 @@ export default function SwapSettingDialog({ open, onClose }: SettingDialogProps)
             options: celoOptions,
             onChange: (value: string) => Services.Settings.setCeloNetworkTradeProvider(Number.parseInt(value, 10)),
         },
+        {
+            legend: t.labs_settings_swap_network({ network: 'Metis' }),
+            value: useMetisNetworkTradeProvider(),
+            options: metisOptions,
+            onChange: (value: string) => Services.Settings.setMetisNetworkTradeProvider(Number.parseInt(value, 10)),
+        },
         {
             legend: t.labs_settings_swap_network({ network: 'Fantom' }),
             value: useFantomNetworkTradeProvider(),

packages/dashboard/src/pages/Settings/api.ts

@@ -43,6 +43,11 @@ export const [useCeloNetworkTradeProvider] = createGlobalState(
     Messages.events.celoNetworkTradeProviderSettings.on,
 )
 
+export const [useMetisNetworkTradeProvider] = createGlobalState(
+    Services.Settings.getMetisNetworkTradeProvider,
+    Messages.events.metisNetworkTradeProviderSettings.on,
+)
+
 export const [useAvalancheNetworkTradeProvider] = createGlobalState(
     Services.Settings.getAvalancheNetworkTradeProvider,
     Messages.events.avalancheNetworkTradeProviderSettings.on,

packages/mask/shared/flags.ts

@@ -55,6 +55,7 @@ export const Flags = {
     fantom_enabled: true,
     flow_enabled: true,
     celo_enabled: true,
+    metis_enabled: true,
     aurora_enabled: true,
     nft_airdrop_enabled: false,
 

packages/mask/src/components/shared/ApplicationBoard.tsx

@@ -92,6 +92,7 @@ const SUPPORTED_CHAIN_ID_LIST = [
     ChainId.xDai,
     ChainId.Celo,
     ChainId.Fantom,
+    ChainId.Metis,
     ChainId.Aurora,
     ChainId.Avalanche,
 ]

packages/mask/src/extension/background-script/SettingsService.ts

@@ -17,6 +17,7 @@ import {
     xdaiNetworkTradeProviderSettings,
     avalancheNetworkTradeProviderSettings,
     celoNetworkTradeProviderSettings,
+    metisNetworkTradeProviderSettings,
     fantomNetworkTradeProviderSettings,
     auroraNetworkTradeProviderSettings,
 } from '../../plugins/Trader/settings'
@@ -82,6 +83,8 @@ export const [getAvalancheNetworkTradeProvider, setAvalancheNetworkTradeProvider
 )
 export const [getCeloNetworkTradeProvider, setCeloNetworkTradeProvider] = create(celoNetworkTradeProviderSettings)
 
+export const [getMetisNetworkTradeProvider, setMetisNetworkTradeProvider] = create(metisNetworkTradeProviderSettings)
+
 export const [getFantomNetworkTradeProvider, setFantomNetworkTradeProvider] = create(fantomNetworkTradeProviderSettings)
 
 export const [getAuroraNetworkTradeProvider, setAuroraNetworkTradeProvider] = create(auroraNetworkTradeProviderSettings)

packages/mask/src/plugins/EVM/constants.ts

@@ -137,6 +137,16 @@ export const PLUGIN_NETWORKS: Web3Plugin.NetworkDescriptor[] = [
         iconColor: 'rgb(53, 208, 127)',
         isMainnet: true,
     },
+    {
+        ID: `${PLUGIN_ID}_metis`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Metis,
+        type: NetworkType.Metis,
+        name: 'Metis',
+        icon: new URL('./assets/metis.png', import.meta.url),
+        iconColor: 'rgb(2, 223, 206)',
+        isMainnet: true,
+    },
     {
         ID: `${PLUGIN_ID}_fantom`,
         networkSupporterPluginID: PLUGIN_ID,

packages/mask/src/plugins/RedPacket/base.ts

@@ -24,6 +24,7 @@ export const base: Plugin.Shared.Definition = {
                     ChainId.Arbitrum,
                     ChainId.xDai,
                     ChainId.Fantom,
+                    ChainId.Metis,
                     ChainId.Avalanche,
                 ],
             },

packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeProviderIcon.tsx

@@ -8,13 +8,15 @@ import { SushiSwapIcon } from '../../../../resources/SushiSwapIcon'
 import { UniswapIcon } from '../../../../resources/UniswapIcon'
 import { ZRXIcon } from '../../../../resources/ZRXIcon'
 import { DODOIcon } from '../../../../resources/DODOIcon'
+import { NETSWAPIcon } from '../../../../resources/NETSWAPIcon'
 import { OpenOceanIcon } from '../../../../resources/OpenOceanIcon'
 import { PangolinIcon } from '../../../../resources/PangolinIcon'
 import { TrisolarisIcon } from '../../../../resources/TrisolarisIcon'
 import { resolveTradeProviderName } from '../../pipes'
 
 const quickswapIcon = new URL('../../../../resources/quickswap.png', import.meta.url).toString()
 const pancakeswapIcon = new URL('../../../../resources/pancakeswap.png', import.meta.url).toString()
+const tethysIcon = new URL('../../../../resources/tethys.png', import.meta.url).toString()
 const traderjoeIcon = new URL('../../../../resources/traderjoe.png', import.meta.url).toString()
 const wannaswapIcon = new URL('../../../../resources/wannaswap.png', import.meta.url).toString()
 
@@ -60,18 +62,24 @@ export function TradeProviderIcon(props: TradeProviderIconProps) {
                     className={classes.icon}
                 />
             )
+        case TradeProvider.TETHYS:
+            return (
+                <img src={tethysIcon} alt={resolveTradeProviderName(TradeProvider.TETHYS)} className={classes.icon} />
+            )
         case TradeProvider.WANNASWAP:
             return (
                 <img
-                    src={pancakeswapIcon}
-                    alt={resolveTradeProviderName(TradeProvider.PANCAKESWAP)}
+                    src={wannaswapIcon}
+                    alt={resolveTradeProviderName(TradeProvider.WANNASWAP)}
                     className={classes.icon}
                 />
             )
         case TradeProvider.DODO:
             return <DODOIcon classes={{ root: classes.icon }} />
         case TradeProvider.BANCOR:
             return <BancorIcon classes={{ root: classes.icon }} />
+        case TradeProvider.NETSWAP:
+            return <NETSWAPIcon classes={{ root: classes.icon }} />
         case TradeProvider.TRADERJOE:
             return (
                 <img

packages/mask/src/plugins/Trader/SNSAdaptor/trending/TraderView.tsx

@@ -204,7 +204,7 @@ export function TraderView(props: TraderViewProps) {
     // #endregion
 
     // #region if the coin is a native token or contract address exists
-    const isNativeToken = ['eth', 'matic', 'bnb', 'avax'].includes(coinSymbol)
+    const isNativeToken = ['eth', 'matic', 'bnb', 'avax', 'metis'].includes(coinSymbol)
     const isSwappable = (!!trending?.coin.contract_address || isNativeToken) && chainIdValid && tradeProviders.length
     // #endregion
 

packages/mask/src/plugins/Trader/apis/trader/index.ts

@@ -46,13 +46,14 @@ export async function getAvailableTraderProviders(chainId: ChainId) {
             return [TradeProvider.SUSHISWAP, TradeProvider.OPENOCEAN]
         case NetworkType.Celo:
             return [TradeProvider.SUSHISWAP]
+        case NetworkType.Metis:
+            return [TradeProvider.TETHYS, TradeProvider.NETSWAP]
         case NetworkType.Fantom:
             return [TradeProvider.SUSHISWAP]
         case NetworkType.Aurora:
             return [TradeProvider.DODO, TradeProvider.WANNASWAP, TradeProvider.TRISOLARIS]
         case NetworkType.Boba:
         case NetworkType.Fuse:
-        case NetworkType.Metis:
         case NetworkType.Optimistic:
             console.error('To be implement network: ', networkType)
             return []

packages/mask/src/plugins/Trader/constants/0x.ts

@@ -8,11 +8,11 @@ export const ZRX_BASE_URL: Record<NetworkType, string> = {
     [NetworkType.xDai]: 'https://xdai.api.0x.org/',
     [NetworkType.Avalanche]: 'https://avalanche.api.0x.org/',
     [NetworkType.Celo]: 'https://celo.api.0x.org/',
+    [NetworkType.Metis]: 'https://metis.api.0x.org/',
     [NetworkType.Fantom]: 'https://fantom.api.0x.org/',
     [NetworkType.Aurora]: 'https://aurora.api.0x.org/',
     [NetworkType.Boba]: '',
     [NetworkType.Fuse]: '',
-    [NetworkType.Metis]: '',
     [NetworkType.Optimistic]: '',
 }
 

packages/mask/src/plugins/Trader/constants/dodo.ts

@@ -10,10 +10,10 @@ export const networkNames: Record<NetworkType, string> = {
     [NetworkType.xDai]: 'xdai',
     [NetworkType.Avalanche]: 'avalanche',
     [NetworkType.Celo]: 'celo',
+    [NetworkType.Metis]: 'metis',
     [NetworkType.Fantom]: 'fantom',
     [NetworkType.Aurora]: 'aurora',
     [NetworkType.Boba]: '',
     [NetworkType.Fuse]: '',
-    [NetworkType.Metis]: '',
     [NetworkType.Optimistic]: '',
 }

packages/mask/src/plugins/Trader/constants/index.ts

@@ -9,6 +9,8 @@ export * from './quickswap'
 export * from './pancakeswap'
 export * from './dodo'
 export * from './bancor'
+export * from './netswap'
+export * from './tethys'
 export * from './traderjoe'
 export * from './pangolindex'
 export * from './wannaswap'

packages/mask/src/plugins/Trader/constants/netswap.ts

@@ -0,0 +1,14 @@
+import { ChainId } from '@masknet/web3-shared-evm'
+import { USDC, USDT, WNATIVE, NETT, WNATIVE_ONLY } from './trader'
+import type { ERC20AgainstToken, ERC20TokenCustomizedBase } from './types'
+
+/**
+ * Some tokens can only be swapped via certain pairs,
+ * so we override the list of bases that are considered for these tokens.
+ */
+export const NETSWAP_CUSTOM_BASES: ERC20TokenCustomizedBase = {}
+
+export const NETSWAP_BASE_AGAINST_TOKENS: ERC20AgainstToken = {
+    ...WNATIVE_ONLY,
+    [ChainId.Metis]: [WNATIVE, USDC, USDT, NETT].map((x) => x[ChainId.Metis]),
+}

packages/mask/src/plugins/Trader/constants/openocean.ts

@@ -10,10 +10,10 @@ export const networkNames: Record<NetworkType, string> = {
     [NetworkType.xDai]: 'xdai',
     [NetworkType.Celo]: 'celo',
     [NetworkType.Fantom]: 'fantom',
+    [NetworkType.Boba]: 'boba',
     [NetworkType.Avalanche]: 'avalanche',
     [NetworkType.Aurora]: 'aurora',
-    [NetworkType.Boba]: '',
     [NetworkType.Fuse]: '',
-    [NetworkType.Metis]: '',
+    [NetworkType.Metis]: 'metis',
     [NetworkType.Optimistic]: '',
 }

packages/mask/src/plugins/Trader/constants/tethys.ts

@@ -0,0 +1,14 @@
+import { ChainId } from '@masknet/web3-shared-evm'
+import { USDC, USDT, TETHYS, WNATIVE, WNATIVE_ONLY } from './trader'
+import type { ERC20AgainstToken, ERC20TokenCustomizedBase } from './types'
+
+/**
+ * Some tokens can only be swapped via certain pairs,
+ * so we override the list of bases that are considered for these tokens.
+ */
+export const TETHYS_CUSTOM_BASES: ERC20TokenCustomizedBase = {}
+
+export const TETHYS_BASE_AGAINST_TOKENS: ERC20AgainstToken = {
+    ...WNATIVE_ONLY,
+    [ChainId.Metis]: [WNATIVE, USDC, USDT, TETHYS].map((x) => x[ChainId.Metis]),
+}

packages/mask/src/plugins/Trader/constants/trader.ts

@@ -48,6 +48,8 @@ export const NFTX = createERC20Tokens('NFTX_ADDRESS', 'NFTX', 'NFTX', 18)
 export const STETH = createERC20Tokens('stETH_ADDRESS', 'stakedETH', 'stETH', 18)
 export const CUSD = createERC20Tokens('cUSD_ADDRESS', 'Celo Dollar', 'cUSD', 18)
 export const CEUR = createERC20Tokens('cEUR_ADDRESS', 'Celo Euro', 'cEUR', 18)
+export const NETT = createERC20Tokens('NETT_ADDRESS', 'Netswap Token', 'NETT', 18)
+export const TETHYS = createERC20Tokens('TETHYS_ADDRESS', 'Tethys', 'TETHYS', 18)
 export const JOE = createERC20Tokens('JOE_ADDRESS', 'JoeToken', 'JOE', 18)
 export const PNG = createERC20Tokens('PNG_ADDRESS', 'Pangolin', 'PNG', 18)
 
@@ -74,6 +76,8 @@ export const WNATIVE_ONLY: ERC20AgainstToken = {
     [ChainId.Avalanche]: [WNATIVE[ChainId.Avalanche]],
     [ChainId.Avalanche_Fuji]: [WNATIVE[ChainId.Avalanche_Fuji]],
     [ChainId.Celo]: [WNATIVE[ChainId.Celo]],
+    [ChainId.Metis]: [WNATIVE[ChainId.Metis]],
+    [ChainId.Metis_Stardust]: [WNATIVE[ChainId.Metis_Stardust]],
     [ChainId.Fantom]: [WNATIVE[ChainId.Fantom]],
     [ChainId.Aurora]: [WNATIVE[ChainId.Aurora]],
     [ChainId.Aurora_Testnet]: [WNATIVE[ChainId.Aurora_Testnet]],

packages/mask/src/plugins/Trader/helpers/uniswap.ts

@@ -101,7 +101,7 @@ export function uniswapPriceTo(price: Price<Currency, Currency>) {
 
 export function uniswapTokenTo(token: Token) {
     return {
-        type: ['eth', 'matic', 'bnb'].includes(token.name?.toLowerCase() ?? '')
+        type: ['eth', 'matic', 'bnb', 'metis'].includes(token.name?.toLowerCase() ?? '')
             ? EthereumTokenType.Native
             : EthereumTokenType.ERC20,
         name: token.name,

packages/mask/src/plugins/Trader/pipes.ts

@@ -56,7 +56,9 @@ export const resolveTradeProviderName = createLookupTableResolver<TradeProvider,
         [TradeProvider.PANCAKESWAP]: 'PancakeSwap',
         [TradeProvider.DODO]: 'DODO',
         [TradeProvider.BANCOR]: 'Bancor',
+        [TradeProvider.NETSWAP]: 'NetSwap',
         [TradeProvider.OPENOCEAN]: 'OpenOcean',
+        [TradeProvider.TETHYS]: 'Tethys',
         [TradeProvider.TRADERJOE]: 'TraderJoe',
         [TradeProvider.PANGOLIN]: 'PangolinDex',
         [TradeProvider.TRISOLARIS]: 'Trisolaris',
@@ -87,6 +89,8 @@ export function resolveTradeProviderLink(tradeProvider: TradeProvider, networkTy
                     return 'https://xdai.api.0x.org/'
                 case NetworkType.Celo:
                     return 'https://celo.api.0x.org/'
+                case NetworkType.Metis:
+                    return 'https://metis.api.0x.org/'
                 case NetworkType.Fantom:
                     return 'https://fantom.api.0x.org/'
                 case NetworkType.Avalanche:
@@ -95,7 +99,6 @@ export function resolveTradeProviderLink(tradeProvider: TradeProvider, networkTy
                     return 'https://aurora.api.0x.org/'
                 case NetworkType.Boba:
                 case NetworkType.Fuse:
-                case NetworkType.Metis:
                 case NetworkType.Avalanche:
                 case NetworkType.Optimistic:
                     console.error('To be implement network: ', networkType)
@@ -118,8 +121,12 @@ export function resolveTradeProviderLink(tradeProvider: TradeProvider, networkTy
             return 'https://app.dodoex.io'
         case TradeProvider.BANCOR:
             return 'https://app.bancor.network/eth/swap'
+        case TradeProvider.NETSWAP:
+            return 'https://netswap.io/#/swap'
         case TradeProvider.OPENOCEAN:
             return 'https://openocean.finance/classic'
+        case TradeProvider.TETHYS:
+            return 'http://tethys.finance'
         case TradeProvider.TRADERJOE:
             return 'https://traderjoexyz.com/#/trade'
         case TradeProvider.PANGOLIN:
@@ -166,6 +173,8 @@ export function resolveTradePairLink(tradeProvider: TradeProvider, address: stri
                     return `https://analytics-xdai.sushi.com/pairs/${address}`
                 case NetworkType.Celo:
                     return `https://analytics-celo.sushi.com/pairs/${address}`
+                case NetworkType.Metis:
+                    return `https://analytics-sushi.sushi.com/pairs/${address}`
                 case NetworkType.Fantom:
                     return `https://analytics-ftm.sushi.com/pairs/${address}`
                 case NetworkType.Avalanche:
@@ -174,6 +183,7 @@ export function resolveTradePairLink(tradeProvider: TradeProvider, address: stri
                     return `https://analytics-aurora.sushi.com/pairs/${address}`
                 case NetworkType.Boba:
                 case NetworkType.Fuse:
+                case NetworkType.Avalanche:
                 case NetworkType.Metis:
                 case NetworkType.Optimistic:
                     console.error('To be implement network: ', networkType)
@@ -193,9 +203,13 @@ export function resolveTradePairLink(tradeProvider: TradeProvider, address: stri
         case TradeProvider.BANCOR:
             // TODO - Bancor analytics should be available with V3
             return ''
+        case TradeProvider.NETSWAP:
+            return `https://info.netswap.io/pair/${address}`
         case TradeProvider.OPENOCEAN:
             // TODO - OpenOcean
             return ''
+        case TradeProvider.TETHYS:
+            return `https://info.tethys.finance/pair/${address}`
         case TradeProvider.TRADERJOE:
             return `https://analytics.traderjoexyz.com/pairs/${address}`
         case TradeProvider.PANGOLIN:
@@ -295,6 +309,8 @@ export const resolveZrxTradePoolName = createLookupTableResolver<ZrxTradePool, s
         [ZrxTradePool.UniswapV3]: 'Uniswap V3',
         [ZrxTradePool.WaultSwap]: 'WaultSwap',
         [ZrxTradePool.xSigma]: 'xSigma',
+        [ZrxTradePool.NetSwap]: 'NetSwap',
+        [ZrxTradePool.Tethys]: 'Tethys',
         [ZrxTradePool.TraderJoe]: 'TraderJoe',
         [ZrxTradePool.PangolinDex]: 'PangolinDex',
         [ZrxTradePool.Trisolaris]: 'Trisolaris',