Metamask + NextJS: Confused about the aspects of a token transaction using Metamask Wallet

Question

I'm a bit confused about creating a token transaction (from account of User1 -> account of User2) as part of a blockchain-based crowdfunding platform. I have most of the other aspects figured out regarding application components and stuff, but the overall integration of MetaMask, accounts and transactions continues to stump me.

My initial goal is to have the NextJS Backend (/api routes) handle contract and transaction calls. From my observations, most tutorials online manage such calls from the react frontend itself.

From my past interactions with similar projects, the MetaMask extension manages a lot of the web3 setup, including configuring providers (!) and account addresses. Is this same metamask provider also responsible for user approval and signing prompts?

Considering that a MetaMask-less backend (NextJS API) will be handling contract and transaction calls. How would one proceed with integrating a MetaMask wallet to the backend? My inital thought train goes as follows:

Current configuration plan:

• Network: Goerli Testnet
• Frontend Provider: (?) (Is this the MetaMask window.ethereum provider?)
• Backend Provider: Infura WS/HTTP Provider

Logical flow:

1. User logs in with MetaMask on frontend
2. Frontend makes API Call to backend containing selected wallet address (AddrA)
3. Backend recieves wallet address (AddrA)
4. Some form of transaction is initiated, which sends ETH to a different user wallet, with address (AddrB)

This, is where I have hit a roadblock. My current observation is -

1. The frontend and backend providers differ, despite having the same network (or am I wrong?)
2. If the transaction were to execute, would the MetaMask wallet trigger the approval prompt from the user?
3. If the transaction does not execute due to incorrect config, what can I do to have MetaMask acknowledge transaction requests from my backend? Is there any documentation regarding the same

Thanking all in advance, arnitdo

I've searched a lot for documentation regarding metamask and pure backend-based transactions, however I have not encountered any sufficient documentation. Perhaps my direction is wrong, or I'm trying something which isn't quite feasible

Answer 1

Metamask is a chrome extension, you cannot use it in the backend. chrome extensions inject a property into the window global object, in this case metamask add ethereum property. so we reach the window.ethereum to set up a provider. Provider is a wrapper object, it wraps the window.ethereum and you create provider via a third party library. depending on the third party api, you will have slighly different provider objects.

Metamask is just an easy way to use a wallet to sign the transaction. Behind the scene it uses infura node to connect the blockchain.

If you are on the back end, you can create your provider with signing up for infura. for example

const { ethers } = require("ethers");

const provider = new ethers.providers.JsonRpcProvider(INFURA_URL_MAINNET);

If you are in the backend since you do not have metamask, you have to create your own walled using secret key. you can go to metamask, choose an account and extract its secret key and create a wallet on the backend

const wallet = new ethers.Wallet(WALLET_SECRET);
const signer = wallet.connect(provider);

then you construct a transaction, and execute it via the signer

const txArgs = {
    to: toAddress,
    from: YOUR_WALLET_ADDRESS,
    data: yourEncodedData,
    gasLimit: ethers.utils.hexlify(3000000),
  };
  const tx = await signer.sendTransaction(txArgs);