SmartContract.Codes

A Search Engine for Verified Solidity Source Code

During our 2+ years in Remix, we interviewed many expert users (e.g. many 1-on-1 meetings with Project Teams, MythX, Sooho, Chainsafe Team and others; doing focus interviews with tool users during Conferences (e.g. EDCON, EthCC, EthGlobal Events, Devcon, etc…), and interviewed people during EthMagicians gatherings).
We also organized workshops and meetups on a regular basis to try to teach ourselves using the tools and getting feedback from users.
We also lobbied for and then integrated the gitter support chat into remix and grew it to a few thousand users and executed surveys and analyzed the chat generally for which issues are brought up most often

The things we've heard most often was that:

1. People love Remix, but they want a better UX for dealing with common features (e.g. compile/deploy) + they would love to see a much better debugger.
2. They also said Remix is sometimes too much, when they want to showcase their work to the clients who are not so tech savy.

We noticed there is a gap between beginners (programmers but not blockchain) and profesisonals in the ecosystem and Remix was simply not suitable for beginners.

This is exactly why we started the play project - first as a lightweight embeddable solidity editor in the browser which generates a live interactive frontend for the source code for users to deploy with one click and interact with the contract. And later we extended it to a search engine for solidity source code with integrated editor where users can browse code and open it in the editor in just a few clicks. The interactive frontend can then be published to github or downloaded as an HTML file to explore and learn about web3.js calls and be able to copy/paste them already customized to the use solidity template it was generated from.

Since the release of the first MVP, we introduced the tool to many professors and their assistants who teach solidity in universities. Their feedback was positive and the tool is now their go-to-tool when starting to teach solidity, so I guess that’s a pretty good feedback. Some also opened issues and added feature requests some of which we implemented already.

We’re currently in the process of adding Open Zeppelin contracts and also professionally audited contracts from our partners from ChainSecurity to the database to present more relevant contracts to first time users

Our hypothesis is that the first real boom Ethereum had was due to ERC20 standard which gave users an out of the box business solution in the form of a contract, which they could slightly adapt for their needs and they were ready to go.
We think there is a need for more standards/templates/out of the box solutions for contracts as a business
Moloch DAO and Token bonding curve came close, but they are maybe not such a mainstream usecase as an ERC20 Token which can be used for any loyalty program, game, ICO etc.

---

• SmartContract.Codes
  • • A Search Engine for Verified Solidity Source Code
  • 0. Summary Information
  • 1. Project Team
    • Alexander Praetorius (serapath)
    • Nina Breznik
    • Fiona Ye
    • dweb developer
    • Ailin Liou
  • 2. Project Summary
    • 1. What is the problem?
    • 2. Why is it important?
    • 3. How do you solve it?
  • 3. Specific Objectives
    • 1. Smart contract search
    • 2. Solidity editor (Play-ed)
    • 3. Smart contract UI
    • 4. Solidity compiler
    • 5. User Account
    • 6. Open database
    • 7. Marketing & Operations
  • 4. Relation to other work (What is new and Why is this needed?)
    • 1. How does it differentiate from other projects?
    • 2. What in the project is state-of-the-art?
    • 3. Does it depend on other projects?
    • 4. Does it complement/contribute to other projects?
  • 5. Current status
    • 1. What do we have so far?
  • 6. Project Plan
    • 1. Milestones in 0-3 months?
    • 2. Milestones in 3-6 months?
    • 3. Milestones in 6-12 months?
  • 7. Budget and Support Plan
  • 8. Sustainability
    • 1. What happens after the grant?
    • 2. What happens if no grant?
  • 9. Other information
    • List of people from the ecosystem we've collaborated with or people who are interested in our work

0. Summary Information

Duration (Months)	12	Indicative Budget	£ 265,180
Project Name	Play project
Website(s)	playproject.io	github.com/ethereum-play
	Name	Email	Timezone/Countries
Contacts	Alexander Praetorius	[e-mail]	UK/UTC-0
	Nina Breznik	[e-mail]	UK/UTC-0
Applied for EF grant before?	No	Previous Project title	/

1. Project Team

Alexander Praetorius (serapath)

project manager & full stack javascript engineer

• Linkedin
• Twitter
• Github

skills / experience	duration (years)
javascript	10+
visual analytics, data science, interaction design	6+
node.js	4+
distributed file systems (ipfs,dat)	2+
solidity and web3	2+
teaching programming	3+
working in the Ethereum ecosystem with the EF	2.5
solidity and web3	2+
building Solidity editor - Remix	2+
relevant additional achievements:

1. Visual Analytics Research Paper (at the Fraunhofer Society) (author)
2. Frankfurt Founders Club (co-founder)
3. Wizard Amigos (co-founder & organizer)
   • international meetup for programmers with over 1800 members
4. Conference speaking, workshops

---

Nina Breznik

ui/ux and frontend developer

• Linkedin
• Twitter
• Github

skills / experience	duration (years)
marketing planning and communication	10+
business (co-founder, coo of an angel funded start-up)	7+
product development and ux/ui design	5+
javascript	3+
teaching programming	3+
working in the Ethereum ecosystem with the EF	2.5
Remix	2+
solidity and web3	2+
building Solidity editor -	2+
ruby on rails	2+
distributed file systems (ipfs,dat)	1+
relevant additional achievements:

1. Wizard Amigos (co-founder & organizer)
   • international meetup for programmers with over 1800 members
2. Conference speaking, workshops

---

Fiona Ye

ui/ux adesigner

• Linkedin
• Github

skills / experience	duration (years)
design	8+
ux/ui	8+
javascript	2+

dweb developer

dweb developer & dat engineer

• Twitter
• Github

relevant additional achievements:

1. dat-sdk developer

---

Ailin Liou

frontend and backend developer

• Linkedin
• Twitter
• Github

skills / experience	duration (years)
java and groovy programming	10+
javascript	7+
devops & server administration	5+
node.js programming	5+
solidity and web3	5+

relevant additional achievements:

1. Remote Work Taiwan (founder)
   • community and events
2. Conference speaking

---

2. Project Summary

1. What is the problem?

1. 50,000+ new developers per day are joining the ecosystem, but there is no place for them to explore or browse smart contract source code.
2. No easy one click deploy solution where user can open any contract and quickly deploy it and interact with it.
3. No embeddable solidity editor which could be integrated in other educational tools.

2. Why is it important?

1. Having a place to browse and explore smart contract source code is important because:

50,000+ new developers per day need to be able to explore smart contract source code to get familiar with how the Solidity language works and later to be able to find specific code examples to implement or learn about particular smart contract features.

2. No easy one click deploy solution where user can open any contract and quickly deploy it and interact with it. because:

Users need to be able to quickly learn the basics of smart contract deployment and to be able to easily prototype their learnings and their ideas.

3. Having an integratable solidity editor which could be embedded in other educational tools/webpages/blog posts is important because:

It's important we give professors and other educators easy ways to showcase how to build smart contracts and to enable them to do this inside of their webpages/resources.

3. How do you solve it?

• more collaboration with professors
  • visiting professors as guest speakers - showcasing the tool onboarding, connecting with professors&students, maybe also improving a workshop module (depending on feedback & needs)
  • organizing on boarding sessions & gathering feedback & improving the tooling + materials (new contracts, standards)
• constant improvements of UX, making core work like a charm
• adding web3/ethers snippets to autogenerated preview
• adding publish frontend
• working with Solidity compiler team to improve compilers in the browser
• more contracts to the smartcontract.codes
• categorization of code:
  • solidity examples made by professors (beginners),
  • solidity standards (erc20, safeMath, etc. in collab with OpenZeppelin), - audited code (collab with Chainsecurity, Sooho and Mythx)
  • verified code
• improve advanced search: categories, keywords, code snippets, patterns… + add filters
• adding app connect to enable integration with/in other tools
• adding user profiles
• enable sharing (direct links to contracts, to showcase their work)
• wizard amigos (support local meetup groups, help users self organize, organizing code camps, also online)

3. Specific Objectives

1. Smart contract search

• goal:
  • create user friendly way to explore verified source code
• tangibles:
  • UX and UI for explorer page (layout, interaction, theme, design, copywriting)
  • autocomplete search/filter
  • create new button
  • UX and UI for section: featured, new
  • UX and UI for section: recently viewed
  • pagination list
  • embedded lightweight editor with smart contract UI
• impact:
  • users can explore contract source codes

2. Solidity editor (Play-ed)

• goal:
  • users can manage their smart contracts and source code
  • users can use editor to write/edit/fork smart contracts
• tangibles:
  • feature to load source code from a url param
  • file explorer (caches recent)
  • refined responsiveness
    • e.g. font size is adapted to the length of the contract
  • solidity syntax highlighting theme
  • autocompile based on all imported pragmas
  • compiler error messages
• impact:
  • users have lightweight in-browser environment to edit solidity code
  • users can showcase their work

3. Smart contract UI

• goal:
  • users can deploy and verify their smart contracts
  • users can interact with contracts
  • users can see smart contract metadata, NatSpec comments and web3 code snippets
• tangibles:
  • load contract from address
  • refined responsiveness
  • form validation (arrays and bytes)
  • switch between form and json (copy/paste)
  • new form theme
  • executable web3 code snippets
  • NatSpec comments
  • verify source code with publish
• impact:
  • enabling a 'one-click' deploy and auto-verification
  • enabling verification for already deployed contracts
  • interaction with any smart contract
  • developers can easily access additional info about the contracts (metadata, natSpec, web3 calls)

4. Solidity compiler

• goal:
  • optimize speed and size of solidity compiler for the browser
  • allow importing solidity code from dat and local file paths
• tangibles:
  • compiler that runs in webworker
  • resolver for local imports and dat links
• impact:
  • shorter compilation time results and faster development time
  • other projects can re-use the only browser-optimized compiler

5. User Account

• goal:
  • create user owned account system
• tangibles:
  • user account widget with basic UX/UI
  • wallet section with basic UX/UI
    • wallet - switcher between JSvm & Metamask (e.g. mainnet, testnet, …)
    • wallet - confirming/rejecting transactions
    • wallet - javascript_vm implementation
    • wallet - spec for iframe wallet interaction (.postMessage, .onMessage)
    • wallet - iframe web3 provider implementation
  • credentials section spec
    • credentials - with basic UX/UI for credentials usage
    • credentials - isolated secure storage space for credentials
  • storage section spec for iframe storage interaction (.postMessage, .onMessage)
    • storage - permissions (for each dapp)
    • storage - iframe storage interaction implementation
    • storage - permissions administration (e.g. recent files)
    • storage - file explorer implementation/integration
• impact:
  • users can test source code in a simulator
  • users can store and backup all their source code files
  • users can manage their account
  • users own and have full control over their data

6. Open database

• goal:

  • create an open database of contract source codes
  • enable constant flow of new contracts to the database
  • allow everyone to use the database for analysis/visualisations

• tangibles:

  • improve and refine etherscan source code scraper
  • module to enable other parties to store source code in open database
  • module to fetch new published contracts through Komputing
  • module to import verified contracts from other p2p databases
  • documentation

• impact:

  • anyone can retrieve & contribute to the open database
  • wallets can use this system to display source-verified contract badge
  • guarantees long-term availability of the growing dataset

7. Marketing & Operations

• goal:
  • promote the project
  • onboard users
  • secure future funding
• tangibles:
  • deepening relationships with professors teaching blockchain
  • organizing guest workshops at the Universities
  • engaging professors and other users in the process
  • improving workshop module - to empower professors & other educators with out of the box tooling (big impact 1 professor => average 30 students)
  • presenting at Web3 Summit
  • presenting remote at EthIndia
  • presenting at Devcon5
  • workshop at Devcon5 with scholars
  • presenting at Crosslink
  • organizing coding events
  • support local meetup groups,
  • help users self organize,
  • organizing code camps, also online,
  • creating workshops/code examples,
  • social media activity
• impact:
  • onboarding new users
  • positioning as a go to place for discovering smart contract source codes in an interactive way
  • introduce developers to the tool (demo)
  • having resources to continue with our work

4. Relation to other work (What is new and Why is this needed?)

1. How does it differentiate from other projects?

• oneclickdapp.com
  • users can not see the source code
  • users can not verify the source code
  • does not include the editor so users can not edit/reuse the code
  • enables only interaction with depoyed contracts
  • the database is completely centralized/not trustless
• etherscan.io
  • enables API to store to and query verified contracts
  • problem of trust - you have to trust their verification process
  • to query there are certain limitations https://etherscan.io/source-code-usage-terms
  • the database is completely centralized/not trustless
• remix.ethereum.org
  • focuses on writing new contracts, not on exploring existing ones
  • not beginner friendly
  • not easy to integrate into other tools/websites
• studio.superblocks.com
  • focuses on writing full stack, not on smart contarcts
  • not useful for non-web developers
  • offers little code templates to get started
• ethfiddle.com
  • not open source
  • has centralized server with traditional signup
  • focuses only on writing new contracts, not on exploring existing ones
• blockscout.com
  • enables API to store to and query verified contracts
  • not open database of verified smart contracts (BUT we are joining forces and are already working together on creating shared and decentralized database with an open API)
• azure.microsoft.com - blockchain workbench
  • lists only 11 publicly available contract samples
  • is developing a tool for verifying contracts
    • will be available only inside of their workbench
    • no API (closed database)
• openzeppelin.org
  • focuses only on audited contracts
  • it's a hand selected small amount of contracts/standards developers can import into their code (SafeMath, ERC20, Ownable etc.)
  • has no tool to preview and interact with the contracts
  • uses local imports (difficult to copy-paste and try out)
• github.com
  • Using the github code search to search for solidity code will return some results, but it is not possible to filter specifically for solidity source code which matches certain code snippets or patterns. In short - github code search is not specialized for solidity.

2. What in the project is state-of-the-art?

• open archive of verified smart contract source code for others to easily clone and keep synchronized
• detailed search engine that enables search through solidity source code and metadata
• minimal embeddable solidity editor to immediately interact with the contract code
• built-in publishing and verification system for contracts deployed from the smartcontract ui

3. Does it depend on other projects?

• solidity (raw emscripten transpiled compilers)
• ethers.js & web3.js
• etherscan (for initially scraping verified contracts)
• blockscout (collaboration on the scraper)
• metamask
• trueblocks a.k.a quickblocks (receive contract transactions)
• decentralized storage systems (e.g. dat protocol)
• ethereumjs (javascript_vm)
• contract verification libraries
  • source-verify by Christian Reitwiessner
  • bytecode-verifier by Consensys

4. Does it complement/contribute to other projects?

• blockscout (providing embedded editor and database of verified contracts database)
• trueblocks a.k.a quickblocks (providing database of verified contracts)
• solidity (providing embedded editor for showcasing solidity source code examples in solidity docs)
• wallets (providing database of verified contracts with an open API to help wallets show users which Dapps are based on verified contracts)
• deployment tools (providing tools for integrating verification process in the development flow)
• other decentralized data communities (providing a tool for running their own version of the database with verified contracts)

5. Current status

1. What do we have so far?

• fully working editor with smart contract UI and browser optimized solidity compiler
  • https://playproject.io/editor-solidity/
  • https://github.com/ninabreznik/smartcontract-UI
  • https://github.com/ethereum-play/solc-js
• basic functionality of the smart contract listing page
  • https://alincode.github.io/contracts-view/?page=2
• basic etherscan scraper to fill database with verified contract source codes
  • https://github.com/ethereum-play/etherscan-scraper
• spec for integration with dat to open the database with verified contract source codes
  • https://github.com/ethereum-play/aybabtu
• spec for wallets to integrate contract verification
  • https://github.com/ethereum-play/wallet/issues

6. Project Plan

---

1. Milestones in 0-3 months?

---

1. Crowdsourced database of verified smart contracts

• sep - improve and refine etherscan source code scraper
• nov - module to store source code in p2p database
• sep- module to conveniently query the p2p database client side
• oct- maintained server running the scraper code
• oct- maintained server running the p2p database

2. Smart contracts explorer

• sep- UX and UI for explorer page (layout, interaction, theme, design, copywriting)
• sep- pagination list
• oct- embedded lightweight editor with smart contract UI
• oct- UX and UI for section: featured, new

3. User Account

• oct- storage - section spec for iframe storage interaction (.postMessage, .onMessage)
• oct- storage - iframe storage interaction implementation

4. Solidity compiler

• sep- compiler that runs in webworker
• oct- resolver for local imports and dat links

5. Smart contract UI

• nov- load contract from address
• nov- form validation (arrays and bytes)

6. Solidity editor

• nov- feature to load source code from a url param
• nov- refined responsiveness (e.g. adapt font size to contract length)
• oct- solidity syntax highlighting theme
• sep- autocompile based on all imported pragmas
• nov- compiler error messages

7. Marketing & Operations

• sep- stickers (+maybe business cards)
• sep- printed t-shirts for the project team
• aug - presenting at Web3 Summit
• aug- presenting remote at EthIndia

---

2. Milestones in 3-6 months?

---

1. Crowdsourced database of verified smart contracts

• module to publish verified source codes to p2p database from client
• module to (re)verify source code
• p2p database registry to publish verified contract p2p databases to

2. User Account

• user account widget with basic UX/UI
• wallet section with basic UX/UI
• wallet - switcher between JSvm & Metamask (e.g. mainnet, testnet, …)
• wallet - confirming/rejecting transactions
• wallet - javascript_vm implementation
• wallet - spec for iframe wallet interaction (.postMessage, .onMessage)
• wallet - iframe web3 provider implementation

3. Smart contract UI

• verify source code with publish
• refined responsiveness

4. Smart contracts explorer

• create new button
• UX and UI for section: recently viewed

5. Marketing & Operations

• presenting at Devcon5
• workshop at Devcon5 with scholars

---

3. Milestones in 6-12 months?

---

1. Crowdsourced database of verified smart contracts

• module to import verified contracts from other p2p databases
• a document to describe how to create and maintain a p2p database

2. User Account

• credentials section spec
• credentials - with basic UX/UI for credentials usage
• credentials - isolated secure storage space for credentials
• storage - permissions (for each dapp)
• storage - permissions administration (e.g. recent files)
• storage - file explorer implementation/integration

3. Smart contract UI

• executable web3 code snippets
• NatSpec comments
• switch between form and json (copy/paste)
• new form theme

4. Solidity editor

• file explorer (caches recent)

5. Smart contracts explorer

• autocomplete search/filter

6. Marketing & Operations

• presenting at 3 more events
• management & operations

7. Budget and Support Plan

Total Budget	£
TOTAL (dev work)	256,000
Server hosting	180
Speaking - travel & accomodation	8,000
Merchandising materials	1,000
TOTAL	265,180

---

DEV WORK - detailed overview

GOAL	TANGIBLES	ESTIMATED DURATION (days)
Smart contracts explorer		91
	UX and UI for explorer page (layout, interaction, theme, design, copywriting) js, dom, css, ux, design, copywriting	30
	autocomplete search/filter js, dom, css, json	30
	create new buttonjs, dom	2
	UX and UI for sections: featured, new css, dat, ux, js	6
	UX and UI for section: recently viewed css, iframe, js	6
	pagination list js, dat, css, dom	6
	embedded lightweight editor with smart contract UI codemirror, iframe, js, dom	11
Crowdsourced database of verified Smart Contracts		156
	improve and refine etherscan source code scraper cheerio, nodejs, devops	10
	module to store source codes in p2p database nodejs, dat	20
	module to conveniently query the p2p database client side nodejs, devops, js, dat	10
	module to publish verified source codes to p2p database from client nodejs, js, dat	20
	module to (re)verify source codes js, bytecode, web3, solc	20
	p2p database registry to publish verified contract p2p databases to js, nodejs, dat, dht	8
	module to import verified contracts from other p2p databases nodejs, dat, dht	8
	maintained server running the scraper code devops, nodejs	20
	maintained server running the p2p database devops, nodejs, dat	20
	a tutorial to describe how to create and maintain a p2p database devops, nodejs, dat, web3, dht	20
Solidity editor		82
	feature to load source code from a url param url, js	6
	file explorer (caches recent) dom, js, css	40
	refined responsiveness (e.g. adapt font size to contract length) codemirror, css, js	10
	solidity syntax highlighting theme css, js, codemirror	10
	autocompile based on all imported pragmas js, regex, solc	6
	compiler error messages solc, js, codemirror, solidity, css	10
Smart contract UI		81
	load contract from address web3, js, dom, solidity_ABI	14
	refined responsiveness js, css, dom	10
	form validation (arrays and bytes) js,solidity, web3	4
	switch between form and json (copy/paste) json,js,dom,css,codemirror	14
	new form theme js, css, dom, ux	20
	executable web3 code snippets web3, js,codemirror, css, solidity_AST, dom	8
	NatSpec comments solidity, solc, js, dom, css	6
	verify source code with publish js, iframe, dat, bytecode, web3	5
Solidity compiler		14
	compiler that runs in webworker js, webworker, solc	10
	resolver for local imports and dat links solc, url, regex, js	4
Developer Account		130
	user account widget with basic UX/UI ux, css, js, dom	8
	wallet section with basic UX/UI ux, js, dom, web3, javascript_vm	10
	wallet - switcher between JSvm & Metamask (e.g. mainnet, testnet, …) js, dom, css	3
	wallet - confirming/rejecting transactions js, dom, css	3
	wallet - javascript_vm implementation js, web3, javascript_vm	14
	wallet - spec for iframe wallet interaction (.postMessage, .onMessage) json, web3, javascript_vm, iframe	14
	wallet - iframe web3 provider implementation js, web3, javascript_vm, iframe	14
	credentials section spec iframe, js, browser_security	6
	credentials - with basic UX/UI for credentials usage ux, js, dom, css	4
	credentials - isolated secure storage space for credentials browser_security, js, iframe	4
	storage spec for iframe storage interaction (.postMessage, .onMessage) iframe, js	10
	storage - permissions (for each dapp) browser_security, js, iframe	6
	storage - iframe storage interaction implementation iframe, js, dat	20
	storage - permissions administration ux/ui js, ux, dom, css, browser_security	10
	storage - file explorer implementation/integration js, css, dom	4
Marketing & Operations		86
	presenting at Web3 Summit slides, presentation, playproject	10
	presenting remote at EthIndia slides, presentation, playproject	3
	presenting at Devcon5 slides, presentation, playproject	10
	workshop at Devcon5 with scholars slides, presentation, playproject	5
	presenting at 3 more events slides, presentation, playproject	18
	printed t-shirts for the project team design	5
	stickers (+maybe business cards) design	5
	management & operations social_media, marketing, project_management	30
TOTAL DAYS		640

8. Sustainability

1. What happens after the grant?

• We search for partners to share costs for building features we all need
• We offer smart contract and Dapp development as an agency through Hire us section
• We apply for new grants

2. What happens if no grant?

We will work for traditional client projects like we did in the past (before Ethereum) and we will try to work on this project in our free time while searching for alternative sources of funding.

9. Other information

List of people from the ecosystem we've collaborated with or people who are interested in our work

• Igor Barinov (POA/Blockscout)
• Christian Reitwiessner (Solidity)
• Thomas Jay Rush (Quick/Trueblocks)
• Griff Green (Giveth)
• Tomasz Kolinko (Eveem)
• Ligi (Go, Walleth)
• Lane Rettig (Ewasm)
• Scott Gralnick, Itay Radotzki (Portis)