feat: integrate uniswap v3

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

@@ -17,7 +17,7 @@ export interface SettingDialogProps {
 }
 export default function SwapSettingDialog({ open, onClose }: SettingDialogProps) {
     const ethOptions = [
-        { label: 'UniSwap V2', value: TradeProvider.UNISWAP },
+        { label: 'UniSwap V2', value: TradeProvider.UNISWAP_V2 },
         { label: 'SushiSwap', value: TradeProvider.SUSHISWAP },
         { label: 'SashimiSwap', value: TradeProvider.SASHIMISWAP },
         { label: 'Ox', value: TradeProvider.ZRX },

packages/maskbook/package.json

@@ -53,8 +53,11 @@
     "@types/tiny-secp256k1": "^1.0.0",
     "@types/use-subscription": "^1.0.0",
     "@types/uuid": "^8.3.1",
-    "@uniswap/sdk-core": "^3.0.0",
-    "@uniswap/v2-sdk": "^3.0.0",
+    "@uniswap/sdk-core": "^3.0.1",
+    "@uniswap/v2-core": "1.0.0",
+    "@uniswap/v2-sdk": "3.0.0-alpha.2",
+    "@uniswap/v3-core": "1.0.0",
+    "@uniswap/v3-sdk": "^3.3.2",
     "@walletconnect/client": "^1.2.2",
     "anchorme": "^2.1.2",
     "arweave": "^1.10.13",
@@ -76,7 +79,7 @@
     "https-browserify": "^1.0.0",
     "immer": "^9.0.5",
     "isomorphic-dompurify": "^0.13.0",
-    "jsbi": "^3.1.5",
+    "jsbi": "3.1.4",
     "json-stable-stringify": "^1.0.1",
     "json2csv": "^5.0.6",
     "jsonwebtoken": "^8.5.1",

packages/maskbook/src/_locales/en/messages.json

@@ -487,6 +487,7 @@
     "plugin_trader_settings_trade_provider_primary": "Choose Exchange Network",
     "plugin_trader_settings_trade_provider_secondary": "Swap cryptocurrencies on different exchange networks.",
     "plugin_trader_slipage_tolerance": "Slippage Tolerance:",
+    "plugin_trader_single_hop_only": "Single Hop Only:",
     "plugin_trader_swap_settings": "Swap Settings",
     "plugin_poll_display_name": "Plugin: Poll",
     "plugin_poll_question_hint": "Ask a question…",

packages/maskbook/src/_locales/ja/messages.json

@@ -487,6 +487,7 @@
     "plugin_trader_settings_trade_provider_primary": "交換するネットワークを選択",
     "plugin_trader_settings_trade_provider_secondary": "その他の取引所で暗号通貨をスワップする",
     "plugin_trader_slipage_tolerance": "スリッページの許容範囲：",
+    "plugin_trader_single_hop_only": "",
     "plugin_trader_swap_settings": "スワップの設定",
     "plugin_poll_display_name": "プラグイン: 投票",
     "plugin_poll_question_hint": "質問を入力してください...",

packages/maskbook/src/_locales/ko/messages.json

@@ -487,6 +487,7 @@
     "plugin_trader_settings_trade_provider_primary": "교환 네트워크 선택",
     "plugin_trader_settings_trade_provider_secondary": "서로 다른 교환 네트워크에서 암호화폐 교환하기",
     "plugin_trader_slipage_tolerance": "슬리피지 톨러런스:",
+    "plugin_trader_single_hop_only": "",
     "plugin_trader_swap_settings": "스왑 설정",
     "plugin_poll_display_name": "플러그인: 투표",
     "plugin_poll_question_hint": "질문하기",

packages/maskbook/src/_locales/zh/messages.json

@@ -487,6 +487,7 @@
     "plugin_trader_settings_trade_provider_primary": "選擇交易所網絡",
     "plugin_trader_settings_trade_provider_secondary": "在不同的交換網絡上交換加密貨幣。",
     "plugin_trader_slipage_tolerance": "滑動容許值：",
+    "plugin_trader_single_hop_only": "",
     "plugin_trader_swap_settings": "交換設定",
     "plugin_poll_display_name": "插件：投票",
     "plugin_poll_question_hint": "提出一個問題…",

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

@@ -70,6 +70,16 @@ export async function getTransactionCount(address: string, overrides?: SendOverr
     return Number.parseInt(count, 16)
 }
 
+export async function call(config: TransactionConfig, overrides?: SendOverrides) {
+    return request<string>(
+        {
+            method: EthereumMethodType.ETH_CALL,
+            params: [config, 'latest'],
+        },
+        overrides,
+    )
+}
+
 export async function estimateGas(config: TransactionConfig, overrides?: SendOverrides) {
     const gas = await request<string>(
         {
@@ -139,6 +149,16 @@ export async function signTransaction(config: TransactionConfig, overrides?: Sen
     )
 }
 
+export async function sendTransaction(config: TransactionConfig, overrides?: SendOverrides) {
+    return request<string>(
+        {
+            method: EthereumMethodType.ETH_SEND_TRANSACTION,
+            params: [config],
+        },
+        overrides,
+    )
+}
+
 export async function getPastLogs(config: PastLogsOptions, overrides?: SendOverrides) {
     return new Promise<Log[]>((resolve, reject) =>
         request<Log[]>(

packages/maskbook/src/plugins/Trader/SNSAdaptor/trader/SettingsDialog.tsx

@@ -19,11 +19,11 @@ import { TradeProvider, ZrxTradePool } from '../../types'
 import { SelectPoolPanel } from './SelectPoolPanel'
 import { SlippageSlider } from './SlippageSlider'
 import {
-    currentSlippageTolerance,
+    currentSlippageSettings,
     currentTradeProviderSettings,
     getCurrentTradeProviderGeneralSettings,
 } from '../../settings'
-import { SLIPPAGE_TOLERANCE_DEFAULT } from '../../constants'
+import { SLIPPAGE_DEFAULT } from '../../constants'
 import { InjectedDialog } from '../../../../components/shared/InjectedDialog'
 import { PluginTraderMessages } from '../../messages'
 import stringify from 'json-stable-stringify'
@@ -57,16 +57,16 @@ export function SettingsDialog(props: SettingsDialogProps) {
     const classes = useStylesExtends(useStyles(), props)
 
     const provider = useValueRef(currentTradeProviderSettings)
-    const slippage = useValueRef(currentSlippageTolerance)
+    const slippage = useValueRef(currentSlippageSettings)
     const { pools } = useTradeProviderSettings(provider)
 
     //#region remote controlled dialog
     const { open, closeDialog } = useRemoteControlledDialog(PluginTraderMessages.swapSettingsUpdated)
     //#endregion
 
     const onReset = useCallback(() => {
-        currentTradeProviderSettings.value = TradeProvider.UNISWAP
-        currentSlippageTolerance.value = SLIPPAGE_TOLERANCE_DEFAULT
+        currentTradeProviderSettings.value = TradeProvider.UNISWAP_V2
+        currentSlippageSettings.value = SLIPPAGE_DEFAULT
         if (provider === TradeProvider.ZRX)
             getCurrentTradeProviderGeneralSettings(provider).value = stringify({
                 pools: getEnumAsArray(ZrxTradePool).map((x) => x.value),
@@ -90,7 +90,23 @@ export function SettingsDialog(props: SettingsDialogProps) {
                                     <SlippageSlider
                                         value={slippage}
                                         onChange={(tolerance) => {
-                                            currentSlippageTolerance.value = tolerance
+                                            currentSlippageSettings.value = tolerance
+                                        }}
+                                    />
+                                </AccordionDetails>
+                            </Accordion>
+                            <Accordion className={classes.accordion} elevation={0}>
+                                <AccordionSummary>
+                                    <Typography className={classes.heading}>
+                                        {t('plugin_trader_single_hop_only')}
+                                    </Typography>
+                                    <Typography className={classes.subheading}>{slippage / 100}%</Typography>
+                                </AccordionSummary>
+                                <AccordionDetails className={classes.details}>
+                                    <SlippageSlider
+                                        value={slippage}
+                                        onChange={(tolerance) => {
+                                            currentSlippageSettings.value = tolerance
                                         }}
                                     />
                                 </AccordionDetails>

packages/maskbook/src/plugins/Trader/SNSAdaptor/trader/SlippageSlider.tsx

@@ -1,6 +1,6 @@
 import { Slider } from '@material-ui/core'
 import { formatPercentage } from '@masknet/web3-shared'
-import { SLIPPAGE_TOLERANCE_DEFAULT, SLIPPAGE_TOLERANCE_MAX, SLIPPAGE_TOLERANCE_MIN } from '../../constants'
+import { SLIPPAGE_DEFAULT, SLIPPAGE_MAX, SLIPPAGE_MIN } from '../../constants'
 import { toBips } from '../../helpers'
 
 export interface SlippageSliderProps {
@@ -9,14 +9,14 @@ export interface SlippageSliderProps {
 }
 
 export function SlippageSlider(props: SlippageSliderProps) {
-    const { value = SLIPPAGE_TOLERANCE_DEFAULT, onChange } = props
+    const { value = SLIPPAGE_DEFAULT, onChange } = props
     return (
         <Slider
             value={value}
             getAriaValueText={(v) => formatPercentage(toBips(v))}
             step={10}
-            min={SLIPPAGE_TOLERANCE_MIN}
-            max={SLIPPAGE_TOLERANCE_MAX}
+            min={SLIPPAGE_MIN}
+            max={SLIPPAGE_MAX}
             onChange={(_, value: number | number[]) => onChange(value as number)}
         />
     )

packages/maskbook/src/plugins/Trader/SNSAdaptor/trader/TradeForm.tsx

@@ -12,7 +12,7 @@ import { TokenAmountPanel } from '../../../../web3/UI/TokenAmountPanel'
 import { useI18N } from '../../../../utils'
 import { useRemoteControlledDialog, useStylesExtends } from '@masknet/shared'
 import { EthereumTokenType, formatPercentage, FungibleTokenDetailed, isLessThan, pow10 } from '@masknet/web3-shared'
-import { currentSlippageTolerance } from '../../settings'
+import { currentSlippageSettings } from '../../settings'
 import { PluginTraderMessages } from '../../messages'
 import { isNativeTokenWrapper, toBips } from '../../helpers'
 import { resolveUniswapWarningLevel } from '../../pipes'
@@ -219,8 +219,7 @@ export function TradeForm(props: TradeFormProps) {
             <div className={classes.section}>
                 <div className={classes.status}>
                     <Typography className={classes.label} color="textSecondary" variant="body2">
-                        {t('plugin_trader_slipage_tolerance')}{' '}
-                        {formatPercentage(toBips(currentSlippageTolerance.value))}
+                        {t('plugin_trader_slipage_tolerance')} {formatPercentage(toBips(currentSlippageSettings.value))}
                     </Typography>
                     <IconButton className={classes.icon} size="small" onClick={onRefreshClick}>
                         <RefreshOutlined fontSize="small" />

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

@@ -26,7 +26,9 @@ export interface TradeProviderIconProps {
 export function TradeProviderIcon(props: TradeProviderIconProps) {
     const classes = useStyles()
     switch (props.provider) {
-        case TradeProvider.UNISWAP:
+        case TradeProvider.UNISWAP_V2:
+            return <UniswapIcon classes={{ root: classes.icon }} />
+        case TradeProvider.UNISWAP_V3:
             return <UniswapIcon classes={{ root: classes.icon }} />
         case TradeProvider.ZRX:
             return <ZRXIcon classes={{ root: classes.icon }} />

packages/maskbook/src/plugins/Trader/SNSAdaptor/trader/TradeSummary.tsx

@@ -222,7 +222,7 @@ export function TradeSummary(props: TradeSummaryProps) {
             <List className={classes.list} component="ul">
                 {[
                     ...records,
-                    ...(context?.IS_UNISWAP_LIKE ? uniswapRecords : []),
+                    ...(context?.IS_UNISWAP_V2_LIKE || context?.IS_UNISWAP_V3_LIKE ? uniswapRecords : []),
                     ...(provider === TradeProvider.BALANCER ? balancerRecords : []),
                     ...(provider === TradeProvider.ZRX ? zrxRecords : []),
                 ].map((record) =>

packages/maskbook/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx

@@ -3,7 +3,6 @@ import { useAsyncRetry, useTimeoutFn } from 'react-use'
 import { makeStyles } from '@material-ui/core'
 import type { Trade } from '@uniswap/v2-sdk'
 import type { Currency, TradeType } from '@uniswap/sdk-core'
-
 import {
     ChainId,
     createERC20Token,
@@ -71,7 +70,7 @@ export function Trader(props: TraderProps) {
     const classes = useStylesExtends(useStyles(), props)
 
     const context = useContext(TradeContext)
-    const provider = context?.TYPE ?? TradeProvider.UNISWAP
+    const provider = context?.TYPE ?? TradeProvider.UNISWAP_V2
 
     //#region trade state
     const {
@@ -313,7 +312,7 @@ export function Trader(props: TraderProps) {
                         inputToken={inputToken}
                         outputToken={outputToken}
                     />
-                    {context?.IS_UNISWAP_LIKE ? (
+                    {context?.IS_UNISWAP_V2_LIKE ? (
                         <UniswapTradeRoute classes={{ root: classes.router }} trade={tradeComputed} />
                     ) : null}
                     {[TradeProvider.BALANCER].includes(provider) ? (
@@ -322,7 +321,7 @@ export function Trader(props: TraderProps) {
                             trade={tradeComputed as TradeComputed<SwapResponse>}
                         />
                     ) : null}
-                    {context?.IS_UNISWAP_LIKE ? (
+                    {context?.IS_UNISWAP_V2_LIKE ? (
                         <UniswapPairViewer
                             trade={tradeComputed as TradeComputed<Trade<Currency, Currency, TradeType>>}
                             provider={provider}

packages/maskbook/src/plugins/Trader/SNSAdaptor/trending/CoinMarketTable.tsx

@@ -81,11 +81,11 @@ export function CoinMarketTable(props: CoinMarketTableProps) {
                     <TableRow>
                         {dataProvider !== DataProvider.UNISWAP_INFO ? (
                             <TableCell className={classes.cell} align="center">
-                                <FormattedCurrency sign="$" symbol="USD" value={trending.market?.market_cap ?? 0} />
+                                <FormattedCurrency symbol="USD" value={trending.market?.market_cap ?? 0} />
                             </TableCell>
                         ) : null}
                         <TableCell className={classes.cell} align="center">
-                            <FormattedCurrency sign="$" symbol="USD" value={trending.market?.total_volume ?? 0} />
+                            <FormattedCurrency symbol="USD" value={trending.market?.total_volume ?? 0} />
                         </TableCell>
                         {dataProvider !== DataProvider.UNISWAP_INFO ? (
                             <>

packages/maskbook/src/plugins/Trader/apis/balancer/index.ts

@@ -66,7 +66,7 @@ export async function getSwaps(tokenIn: string, tokenOut: string, swapType: BALA
 
     // compose routes
     // learn more: https://github.com/balancer-labs/balancer-frontend/blob/develop/src/components/swap/Routing.vue
-    const totalSwapAmount = swaps.reduce((total, rawHops) => total.plus(rawHops[0].swapAmount || '0'), ZERO)
+    const totalSwapAmount = swaps.reduce((total, rawHops) => total.plus(first(rawHops)?.swapAmount || '0'), ZERO)
 
     const pools = sor.onChainCache.pools
     const routes = swaps.map((rawHops) => {

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

@@ -9,7 +9,8 @@ export async function getAvailableTraderProviders(type?: TagType, keyword?: stri
     switch (networkType) {
         case NetworkType.Ethereum:
             return [
-                TradeProvider.UNISWAP,
+                TradeProvider.UNISWAP_V2,
+                TradeProvider.UNISWAP_V3,
                 TradeProvider.SUSHISWAP,
                 TradeProvider.SASHIMISWAP,
                 TradeProvider.ZRX,

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

@@ -64,11 +64,12 @@ export const WETH_ONLY: ERC20AgainstToken = {
 export const BIPS_BASE = new BigNumber(10000)
 export const ONE_BIPS = ONE.dividedBy(BIPS_BASE)
 
-export const SLIPPAGE_TOLERANCE_MIN = 10 // bips
-export const SLIPPAGE_TOLERANCE_DEFAULT = 50 // bips
-export const SLIPPAGE_TOLERANCE_MAX = 500 // bips
+export const SLIPPAGE_MIN = 10 // bips
+export const SLIPPAGE_DEFAULT = 50 // bips
+export const SLIPPAGE_MAX = 500 // bips
 
-export const DEFAULT_TRANSACTION_DEADLINE = 20 /* minutes */ * 60 /* seconds */
+export const DEFAULT_TRANSACTION_DEADLINE = 30 /* minutes */ * 60 /* seconds */
+export const L2_TRANSACTION_DEADLINE = 60 /* minutes */ * 5 /* seconds */
 
 export const PRICE_IMPACT_LOW = 100 // 1%
 export const PRICE_IMPACT_MEDIUM = 300 // 3%

packages/maskbook/src/plugins/Trader/constants/uniswap.ts

@@ -1,6 +1,5 @@
 import { ChainId } from '@masknet/web3-shared'
 import { Percent } from '@uniswap/sdk-core'
-import { INIT_CODE_HASH } from '@uniswap/v2-sdk'
 import JSBI from 'jsbi'
 import { AMPL, DAI, MSKA, MSKB, MSKC, USDC, USDT, WBTC, WETH, WETH_ONLY } from './trader'
 import type { ERC20AgainstToken, ERC20TokenCustomizedBase } from './types'
@@ -21,10 +20,6 @@ export const UNISWAP_BASE_AGAINST_TOKENS: ERC20AgainstToken = {
     [ChainId.Rinkeby]: [WETH, MSKA, MSKB, MSKC].map((x) => x[ChainId.Rinkeby]),
 }
 
-export const THEGRAPH_UNISWAP_V2 = 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v2'
-
-export const UNISWAP_INIT_CODE_HASH = INIT_CODE_HASH
-
 export const MAX_HOP = 3
 
 // used to ensure the user doesn't send so much ETH so they end up with <.01

packages/maskbook/src/plugins/Trader/contracts/uniswap/usePoolContract.ts

@@ -0,0 +1,12 @@
+import PoolStateV3ABI from '@masknet/web3-contracts/abis/PoolStateV3.json'
+import type { PoolStateV3 } from '@masknet/web3-contracts/types/PoolStateV3'
+import { useContract, useContracts } from '@masknet/web3-shared'
+import type { AbiItem } from 'web3-utils'
+
+export function usePoolContract(address: string) {
+    return useContract<PoolStateV3>(address, PoolStateV3ABI as AbiItem[])
+}
+
+export function usePoolContracts(listOfAddress: string[]) {
+    return useContracts<PoolStateV3>(listOfAddress, PoolStateV3ABI as AbiItem[])
+}

packages/maskbook/src/plugins/Trader/contracts/uniswap/useQuoterContract.ts

@@ -0,0 +1,9 @@
+import QuoterABI from '@masknet/web3-contracts/abis/Quoter.json'
+import type { Quoter } from '@masknet/web3-contracts/types/Quoter'
+import { useContract, useTraderConstants } from '@masknet/web3-shared'
+import type { AbiItem } from 'web3-utils'
+
+export function useQuoterContract() {
+    const { UNISWAP_V3_QUOTER_ADDRESS } = useTraderConstants()
+    return useContract<Quoter>(UNISWAP_V3_QUOTER_ADDRESS, QuoterABI as AbiItem[])
+}