Smart Account Session Snap: Aprovações Automáticas para Dapps de Jogos

MetaMask Snaps é o roteiro para tornar a MetaMask a carteira mais extensível do mundo. Como desenvolvedor, você pode trazer seus recursos e APIs para a MetaMask de maneiras totalmente novas. Os desenvolvedores Web3 são o núcleo desse crescimento, e esta série tem como objetivo apresentar os novos MetaMask Snaps sendo criados hoje.

Smart Account Sessions

Repositório do Snap: https://github.com/livingrockrises/snap-auto-approvals

Por que você o criou?

Para criar uma experiência de usuário fluida para dapps de jogos, oferecendo a eles uma forma de aprovações automáticas de maneira segura.

Você pode nos explicar a implementação técnica?

O App

Nosso Snap é composto por duas partes. A primeira é um site com o qual os usuários interagem. A segunda é o Snap em si. Esses dois elementos funcionam de forma semelhante à arquitetura cliente-servidor, onde o Snap é o servidor e o site é o cliente.

O site possui o seguinte fluxo de usuário:

1. Conecte sua EOA e instale o Snap de sessão de Smart Account.

2. Ative a Smart Account sobre o endereço da MetaMask. A EOA da MetaMask será a controladora desta Smart Account.

3. Ative o Módulo de Sessão na sua Smart Account. Os módulos habilitam lógica adicional de controle de acesso para sua conta Smart Safe. Essencialmente, cada Smart Account é controlada por dois meios: pelo proprietário da conta MetaMask usando suas chaves de assinatura e por módulos opcionais que possuem sua própria lógica de acesso personalizada.

4. Crie uma sessão.

5. Isso criará chaves de sessão temporárias na sua smart account, autorizadas a realizar transações na sua carteira via módulo. A sessão pode ter parâmetros como startTime, endTime e permissões para ações personalizadas em contratos de Dapp.

6. Envie transações aprovadas automaticamente usando a chave de sessão acima, sem pop-up da MetaMask para gas ou assinaturas.

A API da MetaMask

A MetaMask fornece chamadas de API, que podem ser usadas pelos MetaMask Snaps se permitido pelo usuário.

Neste caso, utilizamos as seguintes:

snap_manageState - que nos permite armazenar dados criptografados dentro da MetaMask. Por exemplo, usamos para armazenar o par de chaves de sessão criado.

export type SessionKeyStorage = {
  owner: string;
  sessionKey: string;
  pk: string;
};

export const storeSessionInfo = async (data: SessionKeyStorage) => {
  await wallet.request({
    method: 'snap_manageState',
    params: ['update', data],
  });
};

export const clearSessionInfo = async () => {
  const result = await wallet.request({
    method: 'snap_manageState',
    params: ['clear'],
  });
  return result;
};

export const getSessionInfo = async () => {
  const result = await wallet.request({
    method: 'snap_manageState',
    params: ['get'],
  });
  return result;
};
Copiar

snap_confirm - que nos permite armazenar dados criptografados dentro da MetaMask. Por exemplo, usamos para armazenar as contas criadas.

export const promptUser = async (
  prompt: string,
  description: string,
  content: string,
): Promise<boolean> => {
  const response: any = await wallet.request({
    method: 'snap_confirm',
    params: [
      {
        prompt,
        description,
        textAreaContent: content,
      },
    ],
  });
  console.log('Prompt user response', response);
  if (response) {
    return response;
  }
  return false;
};

promptUser(getMessage(origin),
            'Do you want to use Smart Account',
            `Your Smart Account Address is ${_smartAccount.address}`,
          ).then((approval) => {
            if (approval) {
              console.log('Sending smart acccount response ', _smartAccount);
              resolve({
                address: _smartAccount.address,
                owner: _smartAccount.owner,
              });
            } else {
              reject(new Error('EOA user'));
            }
          });
Copiar

O Snap processará as requisições JSON-RPC recebidas, enviadas via wallet_invokeSnap pelo site.

Para o fluxo do app acima, criamos métodos de requisição personalizados como connect, enable_session_module, create_session e interact. Um exemplo está abaixo e o código está aqui.

export const useSmartAccount = async () => {
  console.log('invoke Snap...');
  const smartAccountResponse: any = await window.ethereum.request({
    method: 'wallet_invokeSnap',
    params: [
      defaultSnapOrigin,
      {
        method: 'connect',
        params: [],
      },
    ],
  });
  return smartAccountResponse;
};
Copiar

Módulo de Chave de Sessão

Desenvolvemos um módulo no estilo Gnosis Safe para estender a funcionalidade da carteira de contrato inteligente usando controle de acesso com chaves de sessão.

O código pode ser encontrado aqui para os contratos do módulo e da carteira.

struct Session {
        address smartAccount;
        address sessionKey;
        uint256 startTimestamp;
        uint256 nonce;
        uint256 endTimestamp;
        bool enable;
        PermissionStorage permission;
    }

struct PermissionStorage {
        address[] whitelistDestinations;
        mapping(address => bool) whitelistDestinationMap;
        mapping(address => bytes4[]) whitelistMethods;
        mapping(address => mapping(bytes4 => bool)) whitelistMethodsMap;
        mapping(address => TokenApproval) tokenApprovals;
    }
Copiar

Quando uma sessão é criada ao invocar o snap e, consequentemente, invocar a smart account, o método abaixo é chamado no módulo de chave de sessão a partir da Smart Account via relayer.

function createSession(
        address sessionKey,
        PermissionParam[] calldata permissions,
        SessionParam calldata sessionParam
    ) external {
        require(
            !sessionMap[sessionKey].enable,
            "Session for key is already enabled"
        );
        Session storage _session = sessionMap[sessionKey];
        ...
Copiar

txHash: https://goerli.etherscan.io/tx/0x8b45f4cb0a7527bb7c44f6923eb9bb391faa656e212829ce0fd9c733ca71352b

Após a criação da sessão, um relayer pode invocar uma transação no módulo de chave de sessão com uma chave de sessão e assinatura válidas.

function executeTransaction(
        address _sessionKey,
        address payable _to,
        uint256 _value,
        bytes calldata _data,
        bytes calldata signature
    ) external returns (bool success) {
        Session storage session = sessionMap[_sessionKey];
        require(session.enable, "Session is not active");
        require(
            session.startTimestamp <= block.timestamp,
            "Session has not yet started"
        );
        require(session.endTimestamp >= block.timestamp, "Session has expired");
        ...
Copiar

txHash: https://goerli.etherscan.io/tx/0xf6d40bf9c74cff266f8bc26dabcf7a44ca1c0e85387f297f43fa5cb89bbea1a0

O SDK

O Biconomy SDK é o conjunto Web3 definitivo para desenvolvedores aproveitarem smart accounts e simplificarem as jornadas dos usuários, transformando experiências complexas de múltiplas etapas em uma experiência simples de um único clique.

Cada usuário recebe uma carteira de contrato inteligente, em vez de um simples par de chaves criptográficas, e os dApps podem personalizar todo tipo de interação fluida usando pacotes de transações via essa carteira SC para o usuário.

Vinculamos a função abaixo à chamada RPC 'connect' ao invocar o snap.

import SmartAccount from '@biconomy-sdk/smart-account';

async function getsmartAccount(): Promise<SmartAccount> {
  smartAccount = new SmartAccount(wallet, {
    activeNetworkId: Number(wallet.chainId),
    // supportedNetworksIds: supportedChains,
  });

  smartAccount = await smartAccount.init();
  console.log('initialized');
  console.log(smartAccount);
  return smartAccount;
}
Copiar

Quais são os próximos passos se você implementar isso?

Estamos ansiosos pelo recurso de keyrings e pela capacidade de exibir informações de smart account no lugar das EOAs na interface da MetaMask.

1. Publicaremos o Biconomy SDK compatível com MetaMask Snaps para uso pelos desenvolvedores.

2. Adição de módulo de recuperação social e transações em lote cross-chain com um clique usando Smart Accounts, além de notificações assim que a transação na chain de destino for executada.

Pode nos contar um pouco sobre você e sua equipe?

Sachin é CTO e cofundador da Biconomy. Com formação em ciência da computação, ele tem 6 anos de experiência em web2 e 5 anos em web3. Ele gosta de adotar uma abordagem estruturada para a resolução de problemas e prefere colocar a mão na massa para implementar e testar suas ideias rapidamente.

Chirag é engenheiro blockchain na Biconomy. Ele adora programar e aprender tudo sobre web3 por meio de pesquisa e desenvolvimento.

Quando você conheceu o MetaMask Snaps pela primeira vez e como foi essa experiência?

Ficamos sabendo do MetaMask Snaps pouco antes do hackathon ETHBogota. Ficamos muito impressionados com a documentação e com as capacidades oferecidas pelos métodos do snap.

O que diferencia o MetaMask Snaps de outras carteiras?

A capacidade de estender os recursos da carteira MetaMask sem depender da equipe principal da MetaMask e possibilitar um crescimento mais rápido. Os desenvolvedores podem acessar recursos existentes da MetaMask, como a interface de chamadas JSON RPC e armazenamento.

Como é para você e sua equipe desenvolver MetaMask Snaps com a MetaMask?

O desenvolvimento básico foi muito intuitivo, mas passamos bastante tempo descobrindo alguns dos requisitos de permissão para métodos específicos. A capacidade de criar elementos de UI personalizados — por exemplo, para exibir o saldo de carteiras de contrato inteligente assim como as EOAs — é um pouco complicada no momento.

O que o MetaMask Snaps significa para você?

É uma arma secreta que nos permite oferecer suporte a carteiras de contrato inteligente ERC4337 dentro da MetaMask, sem precisar criar ou fazer com que os dapps integrem um widget personalizado em seu front-end.

Que oportunidades você enxerga no MetaMask Snaps e nas possibilidades que ele abre para o espaço Web3?

MetaMask Snaps personalizados para dapps específicos podem proporcionar uma melhor experiência ao usuário e habilitar interações multichain. Introduzindo abstração de taxas, abstração de contas e capacidades de segurança de carteira sobre a base de usuários Web3 existente.

Algum conselho que você gostaria de compartilhar com desenvolvedores interessados em experimentar o MetaMask Snaps?

Confira as discussões no GitHub e o Discord, que podem ajudar a superar muitos obstáculos no seu desenvolvimento. Qualquer pessoa familiarizada com JavaScript e chamadas JSON RPC pode desenvolver. Os snap-monorepos e os exemplos de MetaMask Snaps são um ótimo ponto de partida para acelerar seu desenvolvimento.

Se você precisar armazenar algo, apenas um único objeto pode ser armazenado, então você pode aninhar múltiplos pares de chave-valor dentro de um único objeto. Quando precisar retornar respostas de métodos de snap invocados de forma personalizada, certifique-se de que o retorno seja um objeto JSON simples.

Desenvolvendo com MetaMask Snaps

Para começar com o MetaMask Snaps:

1. Confira a documentação para desenvolvedores

2. Instale o MetaMask Flask

3. Confira um guia do MetaMask Snaps

4. Fique conectado conosco no Twitter, nas discussões do GitHub e no Discord

Fique de olho na nossa equipe no próximo hackathon perto de você! Bom BUIDL ⚒️

Aviso legal: Os MetaMask Snaps são geralmente desenvolvidos por terceiros que não a Consensys Software. O uso de MetaMask Snaps desenvolvidos por terceiros é feito a seu próprio critério e risco, com o entendimento de que você será o único responsável por qualquer perda ou dano resultante de tais atividades. A Consensys não oferece nenhuma garantia expressa ou implícita, seja verbal ou escrita, em relação a MetaMask Snaps desenvolvidos por terceiros, e se isenta de toda responsabilidade por MetaMask Snaps desenvolvidos por terceiros. O uso de softwares relacionados a blockchain envolve riscos, e você os assume integralmente ao utilizar o MetaMask Snaps.