Example front end using meta-transactions with Defender Relay and signing using EIP712

elranu · February 25, 2021, 5:54pm

Hi,
I´m looking for a full code example of a Meta-transaction using the Relayer and the web browser. The meta-transaction example should be signed on the front-end with Metamask with eip712. I have checked https://github.com/spalladino/workshop-defender-meta-txs And this example does not have the front-end code.

Can you recommend me an example or a library? so I can join both parts web/backend. As GSN examples.

Thanks!
Mariano

spalladino · February 25, 2021, 6:39pm

Hey @elranu! The frontend code is in the app folder, the function you want in particular is:

github.com

spalladino/workshop-defender-meta-txs/blob/7530c6e86fc7d69df039e4fa0425c6f254ceea4d/app/src/eth/register.js#L10-L28


async function sendMetaTx(registry, provider, signer, name) {
  console.log(`Sending register meta-tx to set name=${name}`);
  const url = process.env.REACT_APP_WEBHOOK_URL;
  if (!url) throw new Error(`Missing relayer url`);

  const forwarder = createInstance(provider);
  const from = await signer.getAddress();
  const data = registry.interface.encodeFunctionData('register', [name]);
  const to = registry.address;
  
  const request = await signMetaTxRequest(signer.provider, forwarder, { to, from, data });

  return fetch(url, {
    method: 'POST',
    body: JSON.stringify(request),
    headers: { 'Content-Type': 'application/json' },
    mode: 'no-cors',
  });
}

Also, note that we have migrated the workshops code to a single repo under the OpenZeppelin org on github at https://github.com/OpenZeppelin/workshops

elranu · February 25, 2021, 7:02pm

Sorry, I read directly the scripts I didn´t see the app.

Thanks!
Mariano

spalladino · February 25, 2021, 7:16pm

No worries! Let me know if you have any questions about how it works!

abcoathup · February 25, 2021, 11:40pm

Hi @elranu,

Welcome to the community

There is also a video recording of the workshop, I found this helpful when setting up my relayer along with the code from the workshop.

Topic		Replies	Views
What exactly is the function of Defender's Relay when using metatransactions? Defender	8	1564	September 12, 2022
Workshop Recap: Gasless MetaTransactions with OpenZeppelin Defender Guides and Tutorials	1	1233	November 3, 2021
Can't send meta transactions after following guide Support etherscan-verify	0	68	March 18, 2024
Defender Works Fine, But Not Getting Metamask Popup To Sign The Request Defender defender , autotasks	4	248	August 2, 2023
Trying to catch exceptions with metatransactions and defender relay Defender	0	324	July 16, 2021

Example front end using meta-transactions with Defender Relay and signing using EIP712

Related Topics