MaticVSEthereum/scripts.js at master · san-lab/MaticVSEthereum · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
const ABI = [
    {
        "inputs": [
            {
                "internalType": "uint256",
                "name": "number",
                "type": "uint256"
            }
        ],
        "name": "setNumber",
        "outputs": [],
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "inputs": [
            {
                "internalType": "uint256",
                "name": "number",
                "type": "uint256"
            }
        ],
        "stateMutability": "nonpayable",
        "type": "constructor"
    },
    {
        "inputs": [],
        "name": "getNumber",
        "outputs": [
            {
                "internalType": "uint256",
                "name": "",
                "type": "uint256"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    }
];

const contractAddressRinkeby = "0x896DA95e07B42002094E0C52c2051b84EF725Fc7";
const contractAddressMumbai = "0x127f01D3Fc55d0c920af783ad1cb2e1016572e8D";

let coolNumber;

let accounts = [];
let chainId;
const ethereumButton = document.querySelector('.enableEthereumButton');
const showAccount = document.querySelector('.showAccount');
const showChainInfo = document.querySelector('.showChainInfo');
const showMetamaskInstalled = document.querySelector('.showMetamaskInstalled');
const showNumber = document.querySelector('.showNumber');

let snackbarContainer = document.querySelector('#demo-toast-example');

if (typeof window.ethereum !== 'undefined') {
    showMetamaskInstalled.innerHTML = 'MetaMask is installed!';
}
else {
    showMetamaskInstalled.innerHTML = "Metamask is not installed";
}

ethereumButton.addEventListener('click', () => {
    getAccount();
});

async function getAccount() {
    accounts = await ethereum.request({ method: 'eth_requestAccounts' });
    const account = accounts[0];
    showAccount.innerHTML = account;
}

async function loadWeb3() {
    if (window.ethereum) {
        window.web3 = new Web3(window.ethereum);
    }
}

async function loadContract(contractAddress) {
    return await new window.web3.eth.Contract(ABI, contractAddress);
}

async function loadChainInfo() {
    chainId = await ethereum.request({
        method: 'eth_chainId'
    })

    let chainInfo = "";
    switch (chainId) {
        case "0x4":
            chainInfo = `${chainId} (Ethereum Rinkeby)`;
            break;
        case "0x13881":
            chainInfo = `${chainId} (Matic Mumbai)`;
            break;
        default:
            chainInfo = `${chainId} (This chainId is not intended for this demo)`;
    }

    showChainInfo.innerHTML = chainInfo;
}

async function load() {
    await loadWeb3();
    await loadChainInfo();
    if (chainId === '0x13881') {
        window.contract = await loadContract(contractAddressMumbai);
    }
    else {
        window.contract = await loadContract(contractAddressRinkeby);
    }
}

load();

async function printCoolNumber() {
    const coolNumber = await window.contract.methods.getNumber().call();
    showNumber.innerHTML = coolNumber;
}
async function changeCoolNumber() {
    const value = Math.floor(Math.random() * 100);
    const data = {
        message: 'Updating number with # ' + value,
        timeout: 10000,
    };
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
    accounts = await ethereum.request({ method: 'eth_requestAccounts' });
    const account = accounts[0];
    await window.contract.methods.setNumber(value).send({ from: account });

}

ethereum.on('chainChanged', () => {
    window.location.reload();
});