「Criar na Darwinia 2–4」Implementando UNISWAP V2 na Rede Crab/Pangolin — II

Published in

Darwinia Network Brasil

5 min readJan 27, 2022

Este é o segundo artigo do tutorial sobre a implantação da rede UNISWAP V2 para Crab/Pangolin. No artigo anterior, introduzimos o processo de implantação dos principais contratos inteligentes na Pangolin TestNet. Neste artigo, continuaremos a explicar a modificação correspondente aos componentes da Interface e do SDK.

Adaptando a Interface Uniswap V2 para a Rede Pangolin

A interface Uniswap V2 é utilizada como um intermediário entre os contratos inteligentes e o usuário. A interface conta com fornecedores externos (como MetaMask) e a biblioteca ethers.js para se conectar e interagir com a blockchain, respectivamente.

Implementar os contratos inteligentes em Pangolin foi uma tarefa bastante simples, pois esta rede proporciona um ambiente semelhante ao Ethereum. Adaptar a interface para que ela funcione com nossa implantação foi um pouco mais complicado. Isto porque a interface tem dois fatores principais que limitam sua implementação em uma nova blockchain: a identificação da cadeia de rede e os endereços dos contratos implantados. Além disso, o UNISWAP SDK (um pacote do qual a interface depende) também precisa ser modificado pelas mesmas razões (próxima seção).

A interface modificada está incluída neste repo do Github, dentro da pasta “uniswap/uniswap-interface”. O início é bastante simples: clonar o repo, instalar as dependências e executar a instância da interface.

git clone <https://github.com/darwinia-network/dvm-workshop>
cd uniswap/uniswap-interface
npm install
yarn start

Observe que a interface (e SDK) tem alguns endereços contratuais codificados. Uma vez que implantamos os contratos na Pangolin TestNet, precisaríamos modificar os endereços tanto na interface quanto no SDK.

As seções a seguir apresentam uma descrição mais detalhada das mudanças ocorridas.

Incluindo a Chain ID

A chain ID foi apresentada em EIP-155. Ela se originou para evitar ataques-replay entre cadeias ETH e ETC que compartilhavam a mesma ID de rede. O argumento de identificação da cadeia é incluído na assinatura da transação, de modo que duas transações idênticas terão valores de assinatura v-r-s diferentes. Alguns valores de identificação da cadeia incluem:

A interface Uniswap V2 tem algumas IDs de cadeia predefinidas para que, uma vez que a interface esteja conectada a uma blockchain através de um provedor, verifique se o protocolo suporta a rede à qual você está se conectando.

Você pode adicionar as IDs de cadeia relacionadas aos seguintes arquivos (dentro da pasta “uniswap-interface”) :

./src/connectors/index.ts: adicionar os IDs de corrente correspondentes dentro da matriz “SupportChainIds”:

export const injected = new InjectedConnector({
  supportedChainIds: [43],
  //supportedChainIds: [1, 3, 4, 5, 42, 44]
})

./src/components/Header/index.tsx: adicionar as identificações da cadeia e as etiquetas da rede seguindo o formato correspondente dentro de “NETWORK_LABELS”:

const NETWORK_LABELS: { [chainId in ChainId]: string | null } = {
  [ChainId.MAINNET]: null,
  [ChainId.PANGOLIN]: 'Pangolin Network',
  [ChainId.CRAB]: 'Crab Network',
}

./src/constants/index.ts: adicionar os IDs da cadeia seguindo o formato correspondente dentro de “WDEV_ONLY”: ChainTokenList”:

const WDEV_ONLY: ChainTokenList = {
  [ChainId.MAINNET]: [WDEV[ChainId.MAINNET]],
  [ChainId.PANGOLIN]: [WDEV[ChainId.PANGOLIN]],
  [ChainId.CRAB]: [WDEV[ChainId.CRAB]],
}

./src/state/lists/hooks.ts: adicionar os IDs da cadeia seguindo o formato correspondente dentro da “EMPTY_LIST”: TokenAddressMap”:

const EMPTY_LIST: TokenAddressMap = {
  [ChainId.MAINNET]: {},
  [ChainId.PANGOLIN]: {},
  [ChainId.CRAB]: {},
}

Nos trechos de código anteriores, o objeto ChainId.* é importado do SDK.

Adicionando novos endereços de contratos

Como seria de se esperar, a interface Uniswap está configurada para trabalhar com os endereços dos contratos implantados no Ethereum. Portanto, os novos endereços precisam ser especificados.

O objetivo era que a interface funcionasse com a Pangolin TestNet. Portanto, foram feitas algumas modificações para que o endereço dependesse da identificação da cadeia de rede à qual o provedor está conectado. Os arquivos que foram modificados (dentro da pasta uniswap-interface) estão listados abaixo. Note que cada arquivo importa um arquivo crab_address.json que está localizado na pasta ./src, que contém os endereços do desdobramento em Pangolin.

./src/constants/index.ts: adicionar o endereço do roteador correspondente. A variável routerv2 é importada

export const ROUTER_ADDRESS: { [key: string]: string } = {
  [ChainId.PANGOLIN]: pangolinRouterv2,
  [ChainId.CRAB]: crabRouterv2,
}

./src/constants/multicall/index.tsx: adicionar o endereço multicall correspondente

const MULTICALL_NETWORKS: { [chainId in ChainId]: string } = {
  [ChainId.MAINNET]: '',
  [ChainId.PANGOLIN]: pangolinMulticall,
  [ChainId.CRAB]: crabMulticall,
}

./src/state/swap/hooks.ts: adicionar os endereços de fábrica e roteador correspondentes dentro de “BAD_RECIPIENT_ADDRESS”. Para fins de teste, este parâmetro não é necessário

const BAD_RECIPIENT_ADDRESSES: string[] = [
factory, // v2 factory
routerv2 // v2 router 02
]

Outras alterações

Tudo relacionado ao Uniswap V1 foi removido dos arquivos, já que nenhuma implantação V1 foi utilizada neste exemplo.

Outras mudanças também incluem:

Logo: file in ./src/assets/images/mainlogo.png
Links: file in ./src/components/Menu/index.tsx

<MenuItem id="link" href="<https://crab.network/>">
            <Home size={14} />
            {t('Website')}
</MenuItem>
<MenuItem id="link" href="<https://github.com/darwinia-network/dvm-workshop>">
            <Code size={14} />
            {t('code')}
</MenuItem>

Adaptando Uniswap SDK para suportar Pangolin

O SDK contém informações adicionais que são utilizadas pela interface como um pacote NPM. O SDK modificado está incluído neste repo do Github, dentro da pasta uniswap/uniswap-sdk.

O SDK contém os endereços dos contratos implantados na Pangolin TestNet. Tudo isso é embalado e publicado como um pacote NPM com o nome “crabswap”.

Antes de construir o pacote NPM, os arquivos listados abaixo precisam ser modificados (dentro da pasta “uniswap-sdk”). Note que cada arquivo importa um arquivo crab_address.json que está localizado na pasta ./src e contém os endereços do desdobramento na Pangolin TestNet:

./src/constants.ts: adicionar os IDs de corrente correspondentes dentro do numero “ChainId”, alterar o endereço de fábrica e modificar o hash do init_code

export enum ChainId {
  MAINNET = 1,
  PANGOLIN = 43,
  CRAB = 44,
}
...
export const FACTORY_ADDRESS: { [key: string]: string } = {
  [ChainId.PANGOLIN]: pangolinFactory,
  [ChainId.CRAB]: crabFactory,
}
...
export const INIT_CODE_HASH = '0x01429e880a7972ebfbba904a5bbe32a816e78273e4b38ffa6bdeaebce8adba7c'

./src/entities/token.ts: adicionar o endereço do contrato do token WETH (WDEV, neste caso):

export const WDEV = {
  [ChainId.MAINNET]: new Token(
    ChainId.MAINNET,
    '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
    18,
    'WETH',
    'Wrapped Ether'
  ),
  [ChainId.CRAB]: new Token(ChainId.CRAB, CRAB_WETH, 18, 'WCRAB', 'Wrapped CRAB'),
  [ChainId.PANGOLIN]: new Token(ChainId.PANGOLIN, PANGOLIN_WETH, 18, 'WDEV', 'Wrapped Dev')
}

Uma vez que todos os arquivos tenham sido modificados, mudar o nome do pacote, versão e descrição dentro do arquivo package.json. Quando estiver pronto, entre em sua conta npm e execute o comando de publicação:

npm login #enter credentials
npm publish

Se você for executar seu pacote personalizado na interface, certifique-se de adicioná-lo como uma dependência no arquivo package.json da pasta da interface.

Series de Artigos:

「Criar na Darwinia 2–1」Formatos de Endereço na Darwinia

「Criar na Darwinia 2–2」 Crab Smart Chain Compatível com EVM

「Criar na Darwinia 2–3」Implementando UNISWAP V2 na Rede Crab/Pangolin — I

Recursos:

Documentação dos desenvolvedores: https://docs.crab.network/builders/get-started/darwinia-dev (em inglês)

Grupo de Telegram dos Desenvolvedores: https://t.me/DarwiniaDev (em inglês)

Sobre a Rede Crab

Crab é a rede canária da Darwinia. Ela apresenta valor econômico real, e se posiciona de modo análogo à Rede Kusama em relação a Polkadot. Você pode checar o status da Crab através Polkadot{.js}, Subscan, ou Subview.

A Crab provê soluções de contratos inteligentes baseadas em DVM (Darwinia Virtual Machine), compatível com o paradigma EVM (Ethereum Virtual Machine) a um nível básico. Portanto, ela permite que projetos migrem do ecossistema Ethereum para a Rede Crab e para o ecossistema Polkadot.( DVM é construído em Frontier com configurações totalmente compatíveis com EVM e uma interface externa similar a RPC).