Skip to main content

2 posts tagged with "code playground"

View All Tags
Go back

· 3 min read
Josh Crites

header

Let's see how we can interact with Metamask from the code playground. We can connect to Metamask, switch networks, add tokens to the Metamask asset list and send them to other accounts.

This post uses a live code editor. Check out this post to learn more about how it works.

tip

Make sure that you have have Metamask installed in your browser.

Connect to Metamask​

The following example shows how to connect Metamask to this browser page.

note

This function will only trigger an action if Metamask is not yet connect to the site. If you've already connected, nothing will happen.

function connect() {
  function connectMetamask() {
    ethereum.request({ method: "eth_requestAccounts" });
  }

  return <button onClick={connectMetamask}>Connect Metamask</button>;
}
Go back

· 2 min read
Josh Crites

header

This post provides an introduction to the live code editor that is included as a feature in this blog. It allows you to see working examples of things like connecting to the Celo network with Metamask and initiating user transactions with the SDK.

If you have any suggestions for examples that you'd like to see, or if you'd like to create one yourself and have it included in the blog, please reach out to me at josh@clabs.co or on Discord at joshc#0001.

Live coding​

This is a live, editable code block. You can update the code right on this page and it will be compiled and executed as you updated it. This is a powerful feature for learning and testing code in real time--you get immediate feedback about what works and what doesn't.

note

The code is rendered using React Live. This means that the code is rendered as a React component, which gives you access to React features like hooks, but also limits what is possible.