上篇修改SDK）https://web03.cn/blog/289

对于文案关键字本篇不做解释

一.修改package.json

修改为上篇发布是SDK

"@web03/sdk": "^1.0.6",
"@web03/token-list": "^1.0.0",
"@web03/default-token-list": "^1.0.1",

二. 修改constants配置

路径src/constants/index.ts

1.修改ROUTER_ADDRESS

ROUTER_ADDRESS改为你的路由合约地址

2.修改奖励地址

此处是用来作奖励的组合地址，看src/state/stake/hooks.ts的STAKING_REWARDS_INFO，用于组合LP的质押奖励（在src/pages/Earn/index.tsx中有注释说，‘如果奖励无效，则切换副本’，副本指的是STAKING_REWARDS_INFO配置）

此处不修改一般不影响swap，且只是ChainId.MAINNET在主网有配置，在自己的网络需要则加

3.修改swap代币地址

如果你的swap有发行代币，则此处需要修改为你的swap代币地址，如我的swap为WEB03代币，则可修改为:

UNI对象中的每一个表示对应链你的swap对应token地址

如果swap没有发行代币，可不修改并删除配置，因为src/state/stake/hooks.ts中有作判断，没有token的情况下不会请求

其它

BASES_TO_CHECK_TRADES_AGAINST，ADDITIONAL_BASES：交易对组合的基础

CUSTOM_BASES：用于覆盖的交易对，权重高

SUGGESTED_BASES：添加流动性时的默认选项，直接影响以下👇

BASES_TO_TRACK_LIQUIDITY_FOR：用于构造我们在前端默认考虑的所有对的列表（智能路由）

PINNED_PAIRS：一些固定的交易对，稳定币交易对

XXX_TOKEN_INFO： 你swap发行的token一些信息

export const WEB03_TOKEN_INFO = {
  icon: WEB03Icon,
  address: WEB03_ADDRESS,
  symbol: 'WEB03',
  decimals: 18,
  abi: WEB03Abi
}

三.修改permit签名参数

在移除流动性的时候，使用了permit签名(什么是permit签名)，如果不修改则不能移除流动性，修改路径src/pages/RemoveLiquidity.tsx找到domain对象

此处要修改name，找到name，先在区块链浏览器打开ROUTER_ADDRESS地址，找到此处

这样签名就完成了

ENS问题

没报错请忽略
如果当前链不支持ENS会导致报错，将src/hooks/useENS.ts代码修改,将其直接返回null不发请求

import { isAddress } from '../utils'
// import useENSAddress from './useENSAddress'
// import useENSName from './useENSName'

/**
 * Given a name or address, does a lookup to resolve to an address and name
 * @param nameOrAddress ENS name or address
 */
export default function useENS(
  nameOrAddress?: string | null
): { loading: boolean; address: string | null; name: string | null } {
  const validated = isAddress(nameOrAddress)
  // const reverseLookup = useENSName(validated ? validated : undefined)
  // const lookup = useENSAddress(nameOrAddress)

  return {
    // loading: reverseLookup.loading || lookup.loading,
    loading: false,
    // address: validated ? validated : lookup.address,
    address: validated && nameOrAddress ? nameOrAddress : null,
    // name: reverseLookup.ENSName ? reverseLookup.ENSName : !validated && lookup.address ? nameOrAddress || null : null
    name: null
  }
}

再修改src/hooks/useFetchListCallback.tx

export function useFetchListCallback(): (listUrl: string, sendDispatch?: boolean) => Promise<TokenList> {
  const { chainId, library } = useActiveWeb3React()
  const dispatch = useDispatch<AppDispatch>()

  const ensResolver = useCallback(
    (ensName: string) => {
      // if (!library || chainId !== ChainId.MAINNET) {
      //   if (NETWORK_CHAIN_ID === ChainId.MAINNET) {
      //     const networkLibrary = getNetworkLibrary()
      //     if (networkLibrary) {
      //       return resolveENSContentHash(ensName, networkLibrary)
      //     }
      //   }
      //   throw new Error('Could not construct mainnet ENS resolver')
      // }
      // return resolveENSContentHash(ensName, library)
      return Promise.resolve('')
    },
    [chainId, library]
  )
  ...
  }

multicall问题

出现了以下报错

初步排查，定位至src/state/multicall/updater.tsx

原因是因为调用aggregate发送请求的时候，因为没有"stateMutability": "view"修饰，导致查询的方法用send去发送了（错误内容中的operation="sendTransaction"可以看出）

aggregate的abi👇

  {
    "inputs": [
      {
        "components": [
          {
            "internalType": "address",
            "name": "target",
            "type": "address"
          },
          {
            "internalType": "bytes",
            "name": "callData",
            "type": "bytes"
          }
        ],
        "internalType": "struct Multicall2.Call[]",
        "name": "calls",
        "type": "tuple[]"
      }
    ],
    "name": "aggregate",
    "outputs": [
      {
        "internalType": "uint256",
        "name": "blockNumber",
        "type": "uint256"
      },
      {
        "internalType": "bytes[]",
        "name": "returnData",
        "type": "bytes[]"
      }
    ],
    "stateMutability": "nonpayable",
    "type": "function"
  },

解决方式1： 在aggregate的abi中加上"stateMutability": "view"修饰，不推荐这样，因为multicall的aggregate也是支持发送send的，如果这样修改可能会导致后面aggregate只能发call请求

解决方式2： 修改fetchChunk方法中的代码multicallContract.callStatic.aggregate，使其只在此处标识发送call

async function fetchChunk(
  multicallContract: Contract,
  chunk: Call[],
  minBlockNumber: number
): Promise<{ results: string[]; blockNumber: number }> {
  let resultsBlockNumber, returnData
  try {
    ;[resultsBlockNumber, returnData] = await multicallContract.callStatic.aggregate(
      chunk.map(obj => [obj.address, obj.callData])
    )
  } catch (error) {
    console.debug('Failed to fetch chunk inside retry', error)
    throw error
  }
  console.debug('Fetching  chunk res', returnData)
  if (resultsBlockNumber.toNumber() < minBlockNumber) {
    console.debug(`Fetched results for old block number: ${resultsBlockNumber.toString()} vs. ${minBlockNumber}`)
    throw new RetryableError('Fetched for old block number')
  }
  return { results: returnData, blockNumber: resultsBlockNumber.toNumber() }
}

如果你的token列表没数据

检查src/hooks/tokens.ts中的useFetchListCallback修改

如果此处有修改导致没返回是不会展示的，如return {}

///

以上内容为个人发开时总结的经验，如有问题可联系指出