Deploying Solidity Smart Contract via Angular Frontend - blockchain

Question

We have created an Admin to access all the Contract Methods, but now we also need one-click deployment from the Admin for different business scenarios. We need a remix Ide kind of interface in our Admin where an admin user can paste their smart contract and can deploy via the frontend itself using Metamask. Is there any way to achieve this?
I understand the backend would also be needed for Compilation and Bytecode generation that's not an issue but it should work without asking for the private key. From deployer.
It should work like this:
Login to Admin portal.
Go to Add Contract and paste the Contract.
Some validations/compilation from backend.
After clicking Deploy it should ask Metamask to deploy rather than deploying from backend with private key.

Answer 1

You can compile a contract on frontend as well, using the solc NPM package.
Note that the GitHub repo is called solc-js but the NPM package is just solc. There's another NPM package called solc-js which seems to be abandoned.
Contract deployment is nothing else than sending a transaction with specific params. Specifically, the to field is omitted, and the data field is the compiled bytecode.
You can request MetaMask to sign a transaction:
const params: [{
from: '0x<userAddress>',
data: '0x<contractBytecode>',
}];
const txHash = await ethereum.request({
method: 'eth_sendTransaction',
params,
})
To get their address, you need them first to connect MetaMask to your app.