Skip to content
A Remix Plugin to create a persistent interface for your smart contract(s)
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
resources
src
.gitignore
LICENSE
README.md
package-lock.json
package.json
tsconfig.json
tslint.json
webpack.dev.js
webpack.prod.js

README.md

🔁 1️⃣ 💥 Remix One Click Plugin

Generate a persistent interface for your smart contract directly from Remix.

Install

Within the Remix Alpha IDE, click on the 🔌 symbol to open the plugin manager. (Not sure when or how to move to the production version of Remix)

Search for "One Click Dapp" and hit "Activate".

Usage

  1. Compile a contract using the Solidity Compiler plugin.
  2. Open the One Click Dapp plugin 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 🎉

:shipit: Happy coding, you rock! 😎

Contributing

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

Getting Started

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

If you prefer to use the vanilla javascript/html method and use the CDN to import the plugin-client, then you can ignore this section

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 @remixproject/plugin.

  • utils were 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.json with the "common" tsconfig.json in root of the remix-plugin repo. Same for webpack.config.js with webpack.common.js

Developing

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.

  1. 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.
  2. Host the remix IDE locally so you can code on the ✈️

Hosting

  • 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?

Publishing

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 😕

Extras

Add a link to plugin documentation with a 📖 icon next to the title, just add a "documentation" property to your profile.js. (note: This is not documented in the Profile section)

Notes

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.

I added 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'
);

Go forth and conquer

@pi0neerpat

You can’t perform that action at this time.