feat(Metis): add Metis Optimistic Layer2

cspell.json

@@ -158,6 +158,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/mask/shared/flags.ts

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

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

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

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

@@ -137,6 +137,16 @@ export const PLUGIN_NETWORKS: Web3Plugin.NetworkDescriptor[] = [
         iconColor: 'rgb(53, 208, 127)',
         isMainnet: false,
     },
+    {
+        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/ITO/base.ts

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

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,
                     ChainId.Aurora,
                 ],

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/base.ts

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

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

@@ -105,7 +105,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

@@ -35,7 +35,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',

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

@@ -1,3 +1,3 @@
 import { ChainId } from '@masknet/web3-shared-evm'
 
-export const SUPPORTED_CHAIN_ID_LIST = [ChainId.Mainnet, ChainId.BSC, ChainId.Matic]
+export const SUPPORTED_CHAIN_ID_LIST = [ChainId.Mainnet, ChainId.BSC, ChainId.Matic, ChainId.Metis]

packages/mask/src/plugins/Trader/trader/0x/useTrade.ts

@@ -28,10 +28,10 @@ export function getNativeTokenLabel(networkType: NetworkType) {
         case NetworkType.xDai:
         case NetworkType.Celo:
         case NetworkType.Fantom:
+        case NetworkType.Metis:
         case NetworkType.Aurora:
         case NetworkType.Boba:
         case NetworkType.Fuse:
-        case NetworkType.Metis:
         case NetworkType.Avalanche:
         case NetworkType.Optimistic:
             return NATIVE_TOKEN_ADDRESS

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

@@ -13,6 +13,10 @@ import {
     SUSHISWAP_CUSTOM_BASES,
     UNISWAP_BASE_AGAINST_TOKENS,
     UNISWAP_CUSTOM_BASES,
+    NETSWAP_BASE_AGAINST_TOKENS,
+    NETSWAP_CUSTOM_BASES,
+    TETHYS_BASE_AGAINST_TOKENS,
+    TETHYS_CUSTOM_BASES,
     TRADERJOE_BASE_AGAINST_TOKENS,
     TRADERJOE_CUSTOM_BASES,
     PANGOLIN_BASE_AGAINST_TOKENS,
@@ -102,6 +106,30 @@ export function useGetTradeContext(tradeProvider?: TradeProvider) {
                     ADDITIONAL_TOKENS: {},
                     CUSTOM_TOKENS: PANCAKESWAP_CUSTOM_BASES,
                 }
+            case TradeProvider.NETSWAP:
+                return {
+                    TYPE: tradeProvider,
+                    IS_UNISWAP_V2_LIKE: true,
+                    GRAPH_API: DEX_TRADE.NETSWAP_THEGRAPH,
+                    INIT_CODE_HASH: DEX_TRADE.NETSWAP_INIT_CODE_HASH,
+                    ROUTER_CONTRACT_ADDRESS: DEX_TRADE.NETSWAP_ROUTER_ADDRESS,
+                    FACTORY_CONTRACT_ADDRESS: DEX_TRADE.NETSWAP_FACTORY_ADDRESS,
+                    AGAINST_TOKENS: NETSWAP_BASE_AGAINST_TOKENS,
+                    ADDITIONAL_TOKENS: {},
+                    CUSTOM_TOKENS: NETSWAP_CUSTOM_BASES,
+                }
+            case TradeProvider.TETHYS:
+                return {
+                    TYPE: tradeProvider,
+                    IS_UNISWAP_V2_LIKE: true,
+                    GRAPH_API: DEX_TRADE.TETHYS_THEGRAPH,
+                    INIT_CODE_HASH: DEX_TRADE.TETHYS_INIT_CODE_HASH,
+                    ROUTER_CONTRACT_ADDRESS: DEX_TRADE.TETHYS_ROUTER_ADDRESS,
+                    FACTORY_CONTRACT_ADDRESS: DEX_TRADE.TETHYS_FACTORY_ADDRESS,
+                    AGAINST_TOKENS: TETHYS_BASE_AGAINST_TOKENS,
+                    ADDITIONAL_TOKENS: {},
+                    CUSTOM_TOKENS: TETHYS_CUSTOM_BASES,
+                }
             case TradeProvider.TRADERJOE:
                 return {
                     TYPE: tradeProvider,

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

@@ -108,6 +108,10 @@ export function useTradeCallback(
             return dodo
         case TradeProvider.BANCOR:
             return bancor
+        case TradeProvider.NETSWAP:
+            return uniswapV2Like
+        case TradeProvider.TETHYS:
+            return uniswapV2Like
         case TradeProvider.TRADERJOE:
             return uniswapV2Like
         case TradeProvider.PANGOLIN:

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

@@ -13,6 +13,10 @@ import {
     SUSHISWAP_CUSTOM_BASES,
     UNISWAP_BASE_AGAINST_TOKENS,
     UNISWAP_CUSTOM_BASES,
+    NETSWAP_BASE_AGAINST_TOKENS,
+    NETSWAP_CUSTOM_BASES,
+    TETHYS_CUSTOM_BASES,
+    TETHYS_BASE_AGAINST_TOKENS,
     TRADERJOE_BASE_AGAINST_TOKENS,
     TRADERJOE_CUSTOM_BASES,
     PANGOLIN_BASE_AGAINST_TOKENS,
@@ -104,6 +108,30 @@ export function useTradeContext(tradeProvider: TradeProvider) {
                     ADDITIONAL_TOKENS: {},
                     CUSTOM_TOKENS: PANCAKESWAP_CUSTOM_BASES,
                 }
+            case TradeProvider.NETSWAP:
+                return {
+                    TYPE: tradeProvider,
+                    IS_UNISWAP_V2_LIKE: true,
+                    GRAPH_API: DEX_TRADE.NETSWAP_THEGRAPH,
+                    INIT_CODE_HASH: DEX_TRADE.NETSWAP_INIT_CODE_HASH,
+                    ROUTER_CONTRACT_ADDRESS: DEX_TRADE.NETSWAP_ROUTER_ADDRESS,
+                    FACTORY_CONTRACT_ADDRESS: DEX_TRADE.NETSWAP_FACTORY_ADDRESS,
+                    AGAINST_TOKENS: NETSWAP_BASE_AGAINST_TOKENS,
+                    ADDITIONAL_TOKENS: {},
+                    CUSTOM_TOKENS: NETSWAP_CUSTOM_BASES,
+                }
+            case TradeProvider.TETHYS:
+                return {
+                    TYPE: tradeProvider,
+                    IS_UNISWAP_V2_LIKE: true,
+                    GRAPH_API: DEX_TRADE.TETHYS_THEGRAPH,
+                    INIT_CODE_HASH: DEX_TRADE.TETHYS_INIT_CODE_HASH,
+                    ROUTER_CONTRACT_ADDRESS: DEX_TRADE.TETHYS_ROUTER_ADDRESS,
+                    FACTORY_CONTRACT_ADDRESS: DEX_TRADE.TETHYS_FACTORY_ADDRESS,
+                    AGAINST_TOKENS: TETHYS_BASE_AGAINST_TOKENS,
+                    ADDITIONAL_TOKENS: {},
+                    CUSTOM_TOKENS: TETHYS_CUSTOM_BASES,
+                }
             case TradeProvider.WANNASWAP:
                 return {
                     TYPE: tradeProvider,

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

@@ -71,6 +71,8 @@ export enum ZrxTradePool {
     UniswapV3 = 'Uniswap_V3',
     WaultSwap = 'WaultSwap',
     xSigma = 'xSigma',
+    NetSwap = 'NetSwap',
+    Tethys = 'Tethys',
     TraderJoe = 'TraderJoe',
     PangolinDex = 'PangolinDex',
     Trisolaris = 'Trisolaris',

packages/mask/src/plugins/Wallet/services/account.ts

@@ -125,6 +125,7 @@ export async function getSupportedNetworks() {
         Flags.arbitrum_enabled ? NetworkType.Arbitrum : undefined,
         Flags.xdai_enabled ? NetworkType.xDai : undefined,
         Flags.celo_enabled ? NetworkType.Celo : undefined,
+        Flags.metis_enabled ? NetworkType.Metis : undefined,
         Flags.fantom_enabled ? NetworkType.Fantom : undefined,
         Flags.avalanche_enabled ? NetworkType.Avalanche : undefined,
         Flags.aurora_enabled ? NetworkType.Aurora : undefined,

packages/mask/src/resources/NETSWAPIcon.tsx

@@ -0,0 +1,36 @@
+import { SvgIconProps, SvgIcon } from '@mui/material'
+
+const svg = (
+    <svg width="111" height="91" xmlns="http://www.w3.org/2000/svg">
+        <g fillRule="nonzero" fill="none">
+            <g fill="#FFF">
+                <path d="M109.174.74 81.382 46.642l-21-16.064L104.66.658l.136-.086a4.002 4.002 0 0 1 4.378.167ZM25.2 4.6l10.182 39.03L2.504 89.134a4 4 0 0 1-1.375-4.163L22.776 7.23l.05-.16A3.995 3.995 0 0 1 25.2 4.6Z" />
+                <path d="M27.692 4.487a4 4 0 0 1 1.412.719l52.278 41.437-46-3.012L25.2 4.6a3.982 3.982 0 0 1 2.493-.114Z" />
+                <path d="m35.382 43.63 21 15.06L7.11 89.397a4.002 4.002 0 0 1-4.607-.264l32.88-45.501ZM109.172.742a4.029 4.029 0 0 1 1.624 3.955L98.008 79.322l-.528 3.08a3.996 3.996 0 0 1-2.317 2.98l-13.78-38.74 27.789-45.9Z" />
+                <path d="m35.382 43.63 46 3.013L95.163 85.38a4 4 0 0 1-3.993-.432L35.382 43.632Z" />
+            </g>
+            <path
+                d="M109.174.74 81.382 46.642l-21-16.064L104.66.658l.136-.086a4.002 4.002 0 0 1 4.378.167Z"
+                fill="#3D9EFF"
+            />
+            <path
+                d="m25.2 4.6 10.182 39.03L2.504 89.134a4 4 0 0 1-1.375-4.163L22.776 7.23l.05-.16A3.995 3.995 0 0 1 25.2 4.6Z"
+                fill="#0647D5"
+            />
+            <path
+                d="M27.692 4.487a4 4 0 0 1 1.412.719l52.278 41.437-46-3.012L25.2 4.6a3.982 3.982 0 0 1 2.493-.114Z"
+                fill="#1667F6"
+            />
+            <path d="m35.382 43.63 21 15.06L7.11 89.397a4.002 4.002 0 0 1-4.607-.264l32.88-45.501Z" fill="#002392" />
+            <path
+                d="M109.172.742a4.029 4.029 0 0 1 1.624 3.955L98.008 79.322l-.528 3.08a3.996 3.996 0 0 1-2.317 2.98l-13.78-38.74 27.789-45.9Z"
+                fill="#2E8EFF"
+            />
+            <path d="m35.382 43.63 46 3.013L95.163 85.38a4 4 0 0 1-3.993-.432L35.382 43.632Z" fill="#2179FF" />
+        </g>
+    </svg>
+)
+
+export function NETSWAPIcon(props: SvgIconProps) {
+    return <SvgIcon {...props}>{svg}</SvgIcon>
+}