🔁 1️⃣ 💥 Remix One Click Plugin
Generate a persistent interface for your smart contract directly from Remix.
Within the Remix Alpha IDE, click on the
Search for "One Click Dapp" and hit "Activate".
- Compile a contract using the
- Open the
One Click Dappplugin and select "Generate"
A unique URL will be created for your smart contract. Bookmark it for later, or send to a friend to show off your amazing contract
Happy coding, you rock!
npm install then
npm run serve
In the plugin manager in Remix (alpha), select "Connect a local plugin"
Create your own Remix plugin
These are my personal notes for creating this Remix Plugin, in case you need some help creating your own
Fork whichever plugin is most similar to your needs. You can use this one, or play with all of them at remix-alpha. For this project I cloned the
ethdocs plugin, since it was most similar to my vision.
Skim through the remix-plugin Readme of course.
Webpack / Typescript configuration
I'm new to Typescript, so I followed this guide on using typescript and this guide on setting up a new typescript project. https://www.codingforentrepreneurs.com/blog/typescript-setup-guide/
Converting ethdocsPlugin => myPlugin
I already did these steps here, but just leaving notes so you know what happened.
The plugin needs two things to run properly 1) the
client, and 2)
utils which provides the typescript types. Initially I imported the
client from a local folder (how ethdocs plugin does it), but I was kindly instructed to change this to importing via npm dependency
utilswere just copied directly from remix-plugin/projects/utils/ . You only need the ones you will use, but I find it helpful to view them all.
- I merged
tsconfig.jsonwith the "common"
tsconfig.jsonin root of the remix-plugin repo. Same for
Now that you're ready to develop, there are two methods, but no real advantage for either. One issue I had was not being able to connect to my plugin, even though it was running. Switching between methods helped as a sanity check.
- Remix-alpha.ethereum.org allows you to add a local plugin. This is also where your plugin will appear once it has been completed and approved.
- Host the remix IDE locally so you can code on the
- The most common and totally free / easy method is to use www.surge.sh (e.g. https://remix-ethdoc-plugin.surge.sh). If you want to get fancy, see this doc on how to deploy to Surge continuously from a github repo.
- Use Github pages. This guide might help if you're using typecript.
- Host it on your own server... but really, why bother?
Create a profile for your plugin using the correct keys in the profile doc. Then make a PR on
src/remixAppManager.js in the remix-ide repo. Remember it will appear on remix-alpha first, before going to production. I have no idea what the process is for this
Add a link to plugin documentation with a
profile.js. (note: This is not documented in the Profile section)
Need something to make your plugin work? Make a PR!
I wanted to to use external links, however the only option was
target="\_parent" which forces the current window to change. Using
target="_blank" did nothing.
allow-popups in Line 106 of
remix-plugin/projects/engine/src/plugin/iframe.ts and made a Pull request on the repo. In a few days my change was added to the official Remix-IDE!
this.iframe.setAttribute( 'sandbox', 'allow-scripts allow-same-origin allow-forms allow-top-navigation' );