Smart Account Session Snap : approbations automatiques pour les Dapps de jeux

MetaMask Snaps est la feuille de route pour faire de MetaMask le wallet le plus extensible au monde. En tant que développeur, vous pouvez intégrer vos fonctionnalités et vos API à MetaMask de manières totalement inédites. Les développeurs Web3 sont au cœur de cette croissance, et cette série vise à mettre en lumière les MetaMask Snaps innovants en cours de développement.

Smart Account Sessions

Dépôt du Snap : https://github.com/livingrockrises/snap-auto-approvals

Pourquoi l'avez-vous développé ?

Pour créer une expérience utilisateur fluide pour les dapps de jeux, en leur offrant un moyen d'automatiser les approbations de manière sécurisée.

Pouvez-vous nous expliquer l'implémentation technique ?

L'application

Notre Snap est composé de deux parties. La première est un site web avec lequel les utilisateurs interagissent. La seconde est le Snap lui-même. Ces deux éléments fonctionnent de manière similaire à une architecture client-serveur, où le Snap joue le rôle de serveur et le site web celui de client.

Le site web suit le parcours utilisateur suivant :

1. Connectez votre EOA et installez le Snap Smart Account Session.

2. Activez le Smart Account par-dessus l'adresse MetaMask. L'EOA MetaMask sera le contrôleur de ce Smart Account.

3. Activez le module de session sur votre Smart Account. Les modules permettent d'ajouter une logique de contrôle d'accès supplémentaire à votre compte Smart Safe. En pratique, chaque Smart Account est contrôlé de deux façons : par le propriétaire du compte MetaMask via ses clés de signature, et par des modules optionnels disposant de leur propre logique d'accès personnalisée.

4. Créez une session.

5. Cela génère des clés de session temporaires sur votre smart account, autorisées à effectuer des transactions sur votre wallet via le module. Une session peut avoir des paramètres tels que startTime, endTime et des permissions pour des actions personnalisées sur les contrats de la Dapp.

6. Envoyez des transactions auto-approuvées à l'aide de la clé de session ci-dessus, sans fenêtre contextuelle MetaMask pour le gas ou les signatures.

L'API MetaMask

MetaMask fournit des appels API qui peuvent être utilisés par les MetaMask Snaps si l'utilisateur les autorise.

Dans ce cas, nous avons utilisé les éléments suivants :

snap_manageState - qui nous permet de stocker des données chiffrées dans MetaMask. Par exemple, nous l'utilisons pour stocker la paire de clés de session créée.

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;
};
Copier

snap_confirm - qui nous permet de stocker des données chiffrées dans MetaMask. Par exemple, nous l'utilisons pour stocker les comptes créés.

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'));
            }
          });
Copier

Le Snap traitera les requêtes JSON-RPC entrantes, envoyées via wallet_invokeSnap depuis le site.

Pour le parcours applicatif décrit ci-dessus, nous avons créé des méthodes de requête personnalisées telles que connect, enable_session_module, create_session et interact. Un exemple est présenté ci-dessous et le code est disponible ici.

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;
};
Copier

Module de clé de session

Nous avons développé un module de style Gnosis Safe pour étendre les fonctionnalités du wallet de contrat intelligent grâce au contrôle d'accès par clés de session.

Le code est disponible ici pour les contrats de module et de wallet.

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;
    }
Copier

Lorsqu'une session est créée en invoquant le Snap, puis en invoquant le smart account, la méthode ci-dessous est appelée sur le module de clé de session depuis le Smart Account via un 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];
        ...
Copier

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

Une fois la session créée, un relayer peut invoquer une transaction sur le module de clé de session avec une clé de session et une signature valides.

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");
        ...
Copier

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

Le SDK

Le SDK Biconomy est la suite Web3 ultime permettant aux développeurs d'exploiter les smart accounts et de simplifier les parcours utilisateurs, en transformant des expériences multi-étapes complexes en une expérience en un seul clic.

Chaque utilisateur dispose d'un wallet de contrat intelligent, plutôt que d'une simple paire de clés cryptographiques, et les dApps peuvent personnaliser toutes sortes d'interactions fluides grâce aux bundles de transactions via ce wallet SC pour l'utilisateur.

Nous avons associé la fonction ci-dessous à l'appel RPC « connect » en invoquant le 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;
}
Copier

Quelles sont les prochaines étapes si vous deviez implémenter cela ?

Nous attendons avec impatience la fonctionnalité keyrings et la possibilité d'afficher les informations du smart account à la place des EOAs dans l'interface MetaMask.

1. Nous publierons le SDK Biconomy compatible avec MetaMask Snaps à destination des développeurs.

2. Ajout d'un module de récupération sociale et de transactions groupées cross-chain en un seul clic via les Smart Accounts, avec affichage de notifications dès que la transaction sur la chaîne de destination est exécutée.

Pouvez-vous nous parler un peu de vous et de votre équipe ?

Sachin est CTO et co-fondateur de Biconomy. Avec une formation en informatique, il possède 6 ans d'expérience en web2 et 5 ans en web3. Il aime adopter une approche structurée pour résoudre les problèmes et préfère être opérationnel pour mettre rapidement en œuvre ses idées et les tester.

Chirag est ingénieur blockchain chez Biconomy. Il est passionné de programmation et aime apprendre tout ce qui touche au web3 à travers la recherche et le développement.

Quand avez-vous découvert MetaMask Snaps pour la première fois et quelle a été votre expérience ?

Nous avons découvert MetaMask Snaps peu avant le hackathon ETHBogota. Nous avons été très impressionnés par la documentation et les capacités offertes par les méthodes du Snap.

En quoi MetaMask Snaps se distingue-t-il des autres wallets ?

La possibilité d'étendre les fonctionnalités du wallet MetaMask sans dépendre de l'équipe principale de MetaMask, et de favoriser une croissance plus rapide. Les développeurs peuvent accéder aux fonctionnalités existantes de MetaMask, comme l'interface des appels JSON RPC et le stockage.

Parlez-nous de votre expérience et de celle de votre équipe dans le développement de MetaMask Snaps avec MetaMask.

Le développement de base était très intuitif, mais nous avons passé beaucoup de temps à comprendre certaines exigences en matière de permissions pour des méthodes spécifiques. La possibilité de créer des éléments d'interface personnalisés, par exemple pour afficher le solde des wallets de contrats intelligents comme pour les EOAs, est pour l'instant assez complexe.

Que représente MetaMask Snaps pour vous ?

C'est une arme secrète qui nous permet de prendre en charge les wallets de contrats intelligents ERC4337 au sein de MetaMask, sans avoir à développer ni à demander aux dapps d'intégrer un widget personnalisé sur leur front-end.

Quelles opportunités voyez-vous dans MetaMask Snaps et les possibilités qu'il ouvre pour l'écosystème Web3 ?

Les MetaMask Snaps personnalisés par dapp peuvent offrir une meilleure expérience utilisateur et permettre des interactions multi-chaînes. Ils introduisent l'abstraction des frais, l'abstraction de compte et des capacités de sécurité du wallet pour la base d'utilisateurs Web3 existante.

Avez-vous des conseils à partager avec les développeurs souhaitant essayer MetaMask Snaps ?

Consultez les discussions GitHub et le Discord, qui peuvent aider à lever de nombreux blocages dans votre développement. Toute personne familière avec JavaScript et les appels JSON RPC peut développer. Les snap-monorepos et les exemples de MetaMask Snaps sont un bon point de départ pour accélérer votre développement.

Si vous souhaitez stocker quelque chose, sachez qu'un seul objet peut être stocké ; vous pouvez donc imbriquer plusieurs paires clé-valeur dans un seul et même objet. Lorsque vous devez retourner des réponses depuis des méthodes de Snap invoquées de manière personnalisée, assurez-vous qu'elles retournent un objet JSON simple.

Développer avec MetaMask Snaps

Pour démarrer avec MetaMask Snaps :

1. Consultez la documentation développeur

2. Installez MetaMask Flask

3. Consultez un guide MetaMask Snaps

4. Restez connecté avec nous sur Twitter, les discussions GitHub et Discord

Gardez un œil sur notre équipe lors du prochain hackathon près de chez vous ! Bon BUIDL ⚒️

Avertissement : Les MetaMask Snaps sont généralement développés par des tiers autres que Consensys Software. L'utilisation de MetaMask Snaps développés par des tiers se fait à votre propre discrétion et à vos risques, et implique votre accord selon lequel vous serez seul responsable de toute perte ou tout dommage résultant de ces activités. Consensys ne donne aucune garantie expresse ou implicite, qu'elle soit orale ou écrite, concernant les MetaMask Snaps développés par des tiers, et décline toute responsabilité à leur égard. L'utilisation de logiciels liés à la blockchain comporte des risques que vous assumez pleinement lors de l'utilisation de MetaMask Snaps.