Connecting to Truffle local network through Metamask

Question

After launching Truffle in the "(develop)" view, I've tried to connect to it through Metamask (via the "Custom RPC" option in the "Networks" menu, I've set the URI to "http://127.0.0.1:9545").

Then, I've tried to import into Metamask the mnemonic phrase that Truffle gave me upon launching, but this gave me access to only 2 of the 10 accounts that Truffle created. Also, those 2 accounts don't have a balance of 100 ETH (as they should): the first account has a balance which changes costantly, but never goes below 200k ETH or above 260k ETH, while the other account has always a balance of 0 ETH.

Furthermore, interactions through a simple web-app that I've created for testing purposes don't seem to change the state of the corresponding smart contract or the amount of ether assigned to the first account, which makes me think that my web browser isn't correctly communicating with the local instance provided by Truffle. What piece of the puzzle am I missing?

EDIT: Here's the significant snippets of code of the web-app (I'm using web3 API in React).

function App() {

  const [web3] = useState(new Web3(Web3.givenProvider || "http://localhost:9545"));
  const [contract] = useState(new web3.eth.Contract(TODO_ABI, TODO_ADDRESS));
  const [tasks, setTasks] = useState([]);

  useEffect(() => {

    contract.methods.getTasks().call()
      .then(tasks => {

        setTasks(tasks);
      });

  }, [contract.methods]);

  return (
    <div className="container">
      <TaskForm contract={contract}></TaskForm>
      <TasksList tasks={tasks} contract={contract}></TasksList>
    </div>
  );
}

function TaskForm(props) {

  const [content, setContent] = useState("");

  return(
    <form onSubmit={ () => setContent(event.target.value) }>
      <input type="text" onChange={ () => props.contract.methods.addTask(content).call() }></input>
      <button type="submit">Submit</button>
    </form>
  );
}

function ChangeTaskStateButton(props) {

  return (
    <button onClick={ () => props.contract.methods.changeTaskState(props.id).call() }>{ props.state }</button>
  );
}

And here's the errors that gets displayed when trying to close a task:

inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error. 
{code: -32603, message: "Internal JSON-RPC error.", data: {…}}
code: -32603
data: {message: "VM Exception while processing transaction: revert", code: -32000, data: {…}}
message: "Internal JSON-RPC error."
__proto__: Object



index.js:50 Uncaught (in promise) Error: Internal JSON-RPC error.
{
  "message": "VM Exception while processing transaction: revert",
  "code": -32000,
  "data": {
    "0x359c33ac64b2b3eb0096b40b2d225679d4212f40fc86ef938af49fcc47159f2c": {
      "error": "revert",
      "program_counter": 994,
      "return": "0x4e487b710000000000000000000000000000000000000000000000000000000000000032"
    },
    "stack": "RuntimeError: VM Exception while processing transaction: revert\n    at Function.RuntimeError.fromResults (C:\\Users\\gianm\\AppData\\Roaming\\npm\\node_modules\\truffle\\build\\webpack:\\node_modules\\ganache-core\\lib\\utils\\runtimeerror.js:94:1)\n    at C:\\Users\\gianm\\AppData\\Roaming\\npm\\node_modules\\truffle\\build\\webpack:\\node_modules\\ganache-core\\lib\\blockchain_double.js:568:1",
    "name": "RuntimeError"
  }
}
    at Object._fireError (index.js:50)
    at sendTxCallback (index.js:540)
    at cb (util.js:689)
    at callbackifyOnRejected (util.js:666)
    at Item.push../node_modules/process/browser.js.Item.run (browser.js:153)
    at drainQueue (browser.js:123)

Answer 1

1. You can import 10 accounts by Private Key.
2. Check your port, shouldn't the default be 8545?
3. ETH balance display error: need to 'Settings - Network - Symbol' to fill in the ETH, although it is optional, but need to fill in the ETH

Answer 2

I just did all the Metamask set up with truffle develop, and everything works fine. Just to be sure:

1. Network ID must be 1337. You can obtain it by running web3.eth.getChainId() in the terminal.
2. Port is 9545.
3. You can add further addresses by clicking Create account. Up to the 10th they will have funds (100 ETH by default).
4. You are using .call() when invoking methods that modify the state. That will perform a simulation of the logic and return the result, if any, but won't modify the state. Make sure you only use .call() when invoking read-only methods.