How to connect solidity code with metamask to frontend?

Moralis
#1

I have my solidity code seperate when I deploy then metamask gets open on it’s own.
But I want that when someone clicks on PAY button in frontend then my metamask should open on it’s own. What can I do ?

#2

This might be helpful https://youtu.be/7TKqLJd_aYI

1 Like
#3

I am getting error at const Moralis = require(“moralis/node”); , while connecting. I have written .js and .html files.

/* import moralis */

const Moralis = require(“moralis/node”);

/* Moralis init code */

const serverUrl = “…”;

const appId = “…”;

const masterKey = “…”;

Moralis.start({ serverUrl, appId, masterKey });

async function login() {

let user = Moralis.User.current();

if(!user) {

    try {

        user = await Moralis.authenticate({ signingMessage : "Authenticate"});

        console.log(user.get('ethAddress'));

    }

    catch (error){

        console.log(error);

    }

}

};

document.getElementById(“btn-login”).onclick = login();

#4

You should use the cdn in script tag rather

<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
#5

in html file I have used the same.

<head>

    <title>payment</title>

    <script src="https://cdn.jsdelivr.net/npm/@walletconnect/[email protected]/dist/esm/index.min.js"></script>

    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

</head>

<body>

    <button id="btn-login">LOGIN</button>

    <button id="btn-pay">PAY</button>

    <script type="text/javascript" src="./main.js"></script>

</body>
#6

Then remove the import in the Js then

#7

I am able to open metamask, but it gets open on it’s own.
After clicl on login it should open this is what i want.

#8

Maybe you have Moralis.enableWeb3() somewhere in your code

#9

I have shared both my codes upside please check

#10

You invoked the function here and it caused that , you should rather make it .onclick = login;

1 Like
#11

my transactions are taking place properly but my amount to be paid is not visible on metamask.
I am getting errors in that of .js file which is attached to smart contract address.

#12

async function pay() {

console.log("HIIIIIIIIIIIIIIII");

let options = {

    contractAddress: "0xFe7D310a4bE852e8795976c1a85b49FA175f12c4",

    functionName: "get" ,

    abi:[{"inputs":[],"name":"get","outputs":[],"stateMutability":"payable","type":"function"}],

    msgValue: Moralis.Units.ETH(0.00000000231)  

}

await Moralis.executeFunction(options);

}

msgValue: Moralis.Units.ETH(0.00000000231)
On this line I am getting error

#13

Looks like metamask doesn’t display up to that in decimal place, nonetheless you can verify that amount by checking the transaction on the explorer.

What error did you got here ?

1 Like
#14

the error is solves when I used 0.1 ETH