Build a frontend app on MultiBaas

const verySimpleTx = {
  "to": "0x0000000000000000000000000000000000000000",
  "value": "10000000000000000", // 0.0001 ETH
  "type": 2
};

const MultiBaas = require("@curvegrid/multibaas-sdk");
const { isAxiosError } = require("axios");

const config = new MultiBaas.Configuration({
  basePath: "http://<YOUR MULTIBAAS DEPLOYMENT ID>.multibaas.com/api/v0",
  accessToken: "<YOUR API KEY HERE>",
});

const contractsApi = new MultiBaas.ContractsApi(config);
const chain = "ethereum";
const deployedAddressOrAlias = "<your-deployed-or-linked-contract-alias>";
const contractLabel = "<your-contract-label>";
const contractMethod = "<your-contract-menthod>";

const payload = {
  args: [],
  from: "0x0000000000000000000000000000000000000000",
};

(async function() {
  try {
    const resp = await contractsApi.callContractFunction(chain, deployedAddressOrAlias, contractLabel, contractMethod, payload);
    console.log("Function call result:\n", resp.data.result);
  } catch (e) {
    if (isAxiosError(e)) {
      console.log(`MultiBaas error with status '${e.response.data.status}' and message: ${e.response.data.message}`);
    } else {
      console.log("An unexpected error occurred:", e);
    }
  }
})();

// on page where ethers.js is installed (e.g. https://playground.ethers.org/)

// Function to format an unsigned transaction returned by the MultiBaas API
// to a format that is suitable for ethers.js and a web3 browser-based wallet,
// by removing nonce and gas fields so that the wallet can recompute them
function formatTransaction(txData) {
  const formattedTx = JSON.parse(JSON.stringify(txData));

  // convert fields that need to be converted
  formattedTx.value = BigInt(formattedTx.value);

  formattedTx.gasLimit = formattedTx.gas;
  delete formattedTx.gas;

  // let the wallet decide on the following parameters:
  delete formattedTx.nonce;
  delete formattedTx.gasPrice;
  delete formattedTx.gasFeeCap;
  delete formattedTx.gasTipCap;
  delete formattedTx.from;
  delete formattedTx.hash;
  return formattedTx;
}

// Function to sign your transaction using MetaMask's eth_sendTransaction
async function signAndSendTransaction(txData) {
  try {
    if (typeof ethers === 'undefined') {
      throw new Error('ethers.js is not loaded.');
    }
    
    if (!window.ethereum) {
      throw new Error('No Web3 provider detected.');
    }
    
    // Connect to the provider
    const provider = new ethers.BrowserProvider(window.ethereum);
    console.log('Connected to provider');
    
    // Request account access
    const accounts = await provider.send('eth_requestAccounts', []);
    const address = accounts[0];
    console.log('Connected account:', address);
    
    // Reformat transaction for ethers.js and web3 browser-based wallet
    const formattedTx = formatTransaction(txData)
    console.log('Transaction to sign:', formattedTx);

    const signer = await provider.getSigner();
    const tx = await signer.sendTransaction(formattedTx);
    console.log('Transaction sent!');
    console.log('Transaction hash:', tx.hash);
    console.log('Full response:', tx);
    return tx;
    
    return { 
      signedData: { hash: dataHash, signature: signature },
      formattedTx: formattedTx
    };
  } catch (error) {
    console.error('Error during transaction signing:', error);
    throw error;
  }
}

const { 
  createWalletClient,
  custom, 
  http,
} = await import('https://esm.sh/viem');
console.log('viem imported successfully!');

async function getChainId() {
  const chainIdHex = await window.ethereum.request({ method: 'eth_chainId' });
  return parseInt(chainIdHex, 16);
}

// Get chain ID
const chainId = await getChainId();
console.log(`Connected to chain ID: ${chainId}`);

// Create a chain config based on chainId
const chain = {
  id: chainId,
  name: chainId === 1337 ? 'Local Development Chain' : `Chain ${chainId}`,
};

// Create a client with public and wallet actions
// This approach is recommended by the viem docs for test environments
const client = createWalletClient({
  chain,
  transport: custom(window.ethereum)
});


// Function to format an unsigned transaction returned by the MultiBaas API
// to a format that is suitable for wagmi/viem and a web3 browser-based wallet,
// by removing nonce and gas fields so that the wallet can recompute them
function formatTransaction(txData, address) {
  const formattedTx = JSON.parse(JSON.stringify(txData));

  // convert fields that need to be converted
  formattedTx.value = BigInt(formattedTx.value);

  formattedTx.gasLimit = formattedTx.gas;
  delete formattedTx.gas;

  // let the wallet decide on the following parameters:
  delete formattedTx.nonce;
  delete formattedTx.gasPrice;
  delete formattedTx.gasFeeCap;
  delete formattedTx.gasTipCap;
  delete formattedTx.from;
  delete formattedTx.hash;
  formattedTx.account = address;
  return formattedTx;
}

async function signAndSendTransaction(txData) {
  try {
    // Check if ethereum provider is available
    if (!window.ethereum) {
      throw new Error('No Web3 provider detected. Please install MetaMask or another Web3 wallet extension.');
    }
    
    // Request account access
    const accounts = await client.requestAddresses();
    const address = accounts[0];
    console.log('Connected to wallet:', address);
    
    // Reformat transaction for wagmi/viem and web3 browser-based wallet
    const formattedTx = formatTransaction(txData, address);
    console.log('Sending transaction:', formattedTx);
    
    // Send the transaction
    const hash = await client.sendTransaction(formattedTx);
    
    console.log('Transaction sent successfully!');
    console.log('Transaction hash:', hash);
    return hash;
  } catch (error) {
    console.error('Transaction failed:', error);
    throw error;
  }
}