diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index a23f4c962287274736256d300d8e593bcb2f74e2..1db0cc49e244acbb43e1c9bccfc22af8399ea898 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -308,3 +308,46 @@ test-linux:
     - rust-test
   dependencies:
     - linux-stable
+js-release:
+  stage: build
+  image: ethcore/javascript:latest
+  only:
+    - js
+    - master
+    - beta
+    - tags
+    - stable
+  before_script:
+    - ./js/scripts/install-deps.sh
+  script:
+    - ./js/scripts/build.sh
+    - ./js/scripts/release.sh
+  tags:
+    - javascript
+js-lint:
+  stage: test
+  image: ethcore/javascript:latest
+  before_script:
+    - ./js/scripts/install-deps.sh
+  script:
+    - ./js/scripts/lint.sh
+  tags:
+    - javascript-test
+js-test:
+  stage: test
+  image: ethcore/javascript:latest
+  before_script:
+    - ./js/scripts/install-deps.sh
+  script:
+    - ./js/scripts/test.sh
+  tags:
+    - javascript-test
+js-pack:
+  stage: test
+  image: ethcore/javascript:latest
+  before_script:
+    - ./js/scripts/install-deps.sh
+  script:
+    - ./js/scripts/build.sh
+  tags:
+    - javascript-test
diff --git a/js/.babelrc b/js/.babelrc
new file mode 100644
index 0000000000000000000000000000000000000000..27c697885555c69529c885a9655e845b573d5ab4
--- /dev/null
+++ b/js/.babelrc
@@ -0,0 +1,15 @@
+{
+  "presets": ["es2017", "es2016", "es2015", "stage-0", "react"],
+  "plugins": [
+    "transform-runtime",
+    "transform-decorators-legacy",
+    "transform-class-properties",
+    "lodash"
+  ],
+  "retainLines": true,
+  "env": {
+    "production": {
+      "plugins": ["transform-react-remove-prop-types"]
+    }
+  }
+}
diff --git a/js/.codeclimate.yml b/js/.codeclimate.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ca6414f5883de71b270a7f6de829837da85a2e4d
--- /dev/null
+++ b/js/.codeclimate.yml
@@ -0,0 +1,8 @@
+engines:
+  eslint:
+    enabled: true
+    channel: "eslint-2"
+
+ratings:
+   paths:
+   - "**.js"
diff --git a/js/.editorconfig b/js/.editorconfig
new file mode 100644
index 0000000000000000000000000000000000000000..3c229b5dc188afe95adfd59e57d14cc599ead1eb
--- /dev/null
+++ b/js/.editorconfig
@@ -0,0 +1,10 @@
+root = true
+[*]
+indent_style=space
+indent_size=2
+tab_width=2
+end_of_line=lf
+charset=utf-8
+trim_trailing_whitespace=true
+max_line_length=120
+insert_final_newline=true
diff --git a/js/.eslintrc.json b/js/.eslintrc.json
new file mode 100644
index 0000000000000000000000000000000000000000..b649a1beaf83d30bc12236bb0ef74ef230c3eca0
--- /dev/null
+++ b/js/.eslintrc.json
@@ -0,0 +1,20 @@
+{
+  "extends": ["semistandard", "standard-react"],
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "mocha": true,
+    "node": true
+  },
+  "globals": {
+    "expect": true,
+    "FileReader": true
+  },
+  "rules": {
+    "object-curly-spacing": ["error", "always"],
+    "no-debugger": "error",
+    "no-alert": "error",
+    "jsx-quotes": ["error", "prefer-single"],
+    "react/jsx-curly-spacing": ["error", "always"]
+  }
+}
diff --git a/js/.gitignore b/js/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..c846423fc2787d2833c91b6aad93dc858999a3e0
--- /dev/null
+++ b/js/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+npm-debug.log
+.build
+.coverage
+.happypack
diff --git a/js/.istanbul.yml b/js/.istanbul.yml
new file mode 100644
index 0000000000000000000000000000000000000000..4535167dbff60cc20d1452fde48a0e4aac5c841b
--- /dev/null
+++ b/js/.istanbul.yml
@@ -0,0 +1,6 @@
+instrumentation:
+  root: src
+  extensions:
+    - .js
+reporting:
+  dir: ./.coverage
diff --git a/js/.npmignore b/js/.npmignore
new file mode 100644
index 0000000000000000000000000000000000000000..5093a29b859a5e7a79413a37ad397761ec16415a
--- /dev/null
+++ b/js/.npmignore
@@ -0,0 +1 @@
+scripts/
diff --git a/js/LICENSE b/js/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..9cecc1d4669ee8af2ca727a5d8cde10cd8b2d7cc
--- /dev/null
+++ b/js/LICENSE
@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    {one line to give the program's name and a brief idea of what it does.}
+    Copyright (C) {year}  {name of author}
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    {project}  Copyright (C) {year}  {fullname}
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<http://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<http://www.gnu.org/philosophy/why-not-lgpl.html>.
diff --git a/js/README.md b/js/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..41252bc916f88127723f035ce6f4154fcdacc9a4
--- /dev/null
+++ b/js/README.md
@@ -0,0 +1,12 @@
+# parity.js
+
+JavaScript APIs and UIs for Parity.
+
+## development
+
+0. Install [Node](https://nodejs.org/) if not already available
+0. Change to the `js` directory inside `parity/`
+0. Install the npm modules via `npm install`
+0. Parity should be run with `parity --signer-no-validation [...options]` (where `options` can be `--chain testnet`)
+0. Start the development environment via `npm start`
+0. Connect to the [UI](http://localhost:3000)
diff --git a/js/assets/fonts/Roboto/LICENSE.txt b/js/assets/fonts/Roboto/LICENSE.txt
new file mode 100755
index 0000000000000000000000000000000000000000..75b52484ea471f882c29e02693b4f02dba175b5e
--- /dev/null
+++ b/js/assets/fonts/Roboto/LICENSE.txt
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/js/assets/fonts/Roboto/font.css b/js/assets/fonts/Roboto/font.css
new file mode 100644
index 0000000000000000000000000000000000000000..5eea2bfd1fe980b8e55c9ca9483a13da24995f8e
--- /dev/null
+++ b/js/assets/fonts/Roboto/font.css
@@ -0,0 +1,56 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(v15/0eC6fl06luXEYWpBSJvXCIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(v15/Fl4y0QdOxyyTHEGMXX8kcYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(v15/-L14Jk06m6pUHB-5mXQQnYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(v15/I3S1wsgSg9YCurV6PUkTOYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(v15/NYDWBdD4gIq26G5XYbHsFIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(v15/Pru33qjShpZSmG3z6VYwnYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
diff --git a/js/assets/fonts/Roboto/ttf/Roboto-Black.ttf b/js/assets/fonts/Roboto/ttf/Roboto-Black.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..fbde625d403cc1fe3be06e15ae90c448c013eee5
Binary files /dev/null and b/js/assets/fonts/Roboto/ttf/Roboto-Black.ttf differ
diff --git a/js/assets/fonts/Roboto/ttf/Roboto-BlackItalic.ttf b/js/assets/fonts/Roboto/ttf/Roboto-BlackItalic.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..60f7782a2e4aba9bbc96d7634799eaa05512c927
Binary files /dev/null and b/js/assets/fonts/Roboto/ttf/Roboto-BlackItalic.ttf differ
diff --git a/js/assets/fonts/Roboto/ttf/Roboto-Bold.ttf b/js/assets/fonts/Roboto/ttf/Roboto-Bold.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..a355c27cde02b13da43c30ae060c5fb164b36b76
Binary files /dev/null and b/js/assets/fonts/Roboto/ttf/Roboto-Bold.ttf differ
diff --git a/js/assets/fonts/Roboto/ttf/Roboto-BoldItalic.ttf b/js/assets/fonts/Roboto/ttf/Roboto-BoldItalic.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..3c9a7a37361b6ae0571b33f09b6b55367e188cfe
Binary files /dev/null and b/js/assets/fonts/Roboto/ttf/Roboto-BoldItalic.ttf differ
diff --git a/js/assets/fonts/Roboto/ttf/Roboto-Italic.ttf b/js/assets/fonts/Roboto/ttf/Roboto-Italic.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..ff6046d5bfa7cd4498ad4a549d2d9028f6c73372
Binary files /dev/null and b/js/assets/fonts/Roboto/ttf/Roboto-Italic.ttf differ
diff --git a/js/assets/fonts/Roboto/ttf/Roboto-Light.ttf b/js/assets/fonts/Roboto/ttf/Roboto-Light.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..94c6bcc67e09602f6d90ac10f449b5c05c2f7021
Binary files /dev/null and b/js/assets/fonts/Roboto/ttf/Roboto-Light.ttf differ
diff --git a/js/assets/fonts/Roboto/ttf/Roboto-LightItalic.ttf b/js/assets/fonts/Roboto/ttf/Roboto-LightItalic.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..04cc002302024c4e032d32319f0d40a32b54aada
Binary files /dev/null and b/js/assets/fonts/Roboto/ttf/Roboto-LightItalic.ttf differ
diff --git a/js/assets/fonts/Roboto/ttf/Roboto-Medium.ttf b/js/assets/fonts/Roboto/ttf/Roboto-Medium.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..39c63d7461796094c0b8889ee8fe2706d344a99a
Binary files /dev/null and b/js/assets/fonts/Roboto/ttf/Roboto-Medium.ttf differ
diff --git a/js/assets/fonts/Roboto/ttf/Roboto-MediumItalic.ttf b/js/assets/fonts/Roboto/ttf/Roboto-MediumItalic.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..dc743f0a66cf3741e90f712aba22a91197b7e59c
Binary files /dev/null and b/js/assets/fonts/Roboto/ttf/Roboto-MediumItalic.ttf differ
diff --git a/js/assets/fonts/Roboto/ttf/Roboto-Regular.ttf b/js/assets/fonts/Roboto/ttf/Roboto-Regular.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..8c082c8de090865264d37594e396c4d6c0099fe4
Binary files /dev/null and b/js/assets/fonts/Roboto/ttf/Roboto-Regular.ttf differ
diff --git a/js/assets/fonts/Roboto/ttf/Roboto-Thin.ttf b/js/assets/fonts/Roboto/ttf/Roboto-Thin.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..d69555029c3e184189c6cf9961c9cb21205bda96
Binary files /dev/null and b/js/assets/fonts/Roboto/ttf/Roboto-Thin.ttf differ
diff --git a/js/assets/fonts/Roboto/ttf/Roboto-ThinItalic.ttf b/js/assets/fonts/Roboto/ttf/Roboto-ThinItalic.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..07172ff666ad2d590e29324165b6c7b8e2be72ee
Binary files /dev/null and b/js/assets/fonts/Roboto/ttf/Roboto-ThinItalic.ttf differ
diff --git a/js/assets/fonts/Roboto/v15/-L14Jk06m6pUHB-5mXQQnYX0hVgzZQUfRDuZrPvH3D8.woff2 b/js/assets/fonts/Roboto/v15/-L14Jk06m6pUHB-5mXQQnYX0hVgzZQUfRDuZrPvH3D8.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..58fd4bcd24711c74b7c0ecf045cef580471f02f1
Binary files /dev/null and b/js/assets/fonts/Roboto/v15/-L14Jk06m6pUHB-5mXQQnYX0hVgzZQUfRDuZrPvH3D8.woff2 differ
diff --git a/js/assets/fonts/Roboto/v15/0eC6fl06luXEYWpBSJvXCIX0hVgzZQUfRDuZrPvH3D8.woff2 b/js/assets/fonts/Roboto/v15/0eC6fl06luXEYWpBSJvXCIX0hVgzZQUfRDuZrPvH3D8.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..eacda321c795555dcaf46c05373bff8ddd7b11a8
Binary files /dev/null and b/js/assets/fonts/Roboto/v15/0eC6fl06luXEYWpBSJvXCIX0hVgzZQUfRDuZrPvH3D8.woff2 differ
diff --git a/js/assets/fonts/Roboto/v15/Fl4y0QdOxyyTHEGMXX8kcYX0hVgzZQUfRDuZrPvH3D8.woff2 b/js/assets/fonts/Roboto/v15/Fl4y0QdOxyyTHEGMXX8kcYX0hVgzZQUfRDuZrPvH3D8.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..cc16b36c5848dbd0175f6fa5b4d57966f9b61a39
Binary files /dev/null and b/js/assets/fonts/Roboto/v15/Fl4y0QdOxyyTHEGMXX8kcYX0hVgzZQUfRDuZrPvH3D8.woff2 differ
diff --git a/js/assets/fonts/Roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2 b/js/assets/fonts/Roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..4411cbc8754cf7ec78501ba711efabe15b936675
Binary files /dev/null and b/js/assets/fonts/Roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2 differ
diff --git a/js/assets/fonts/Roboto/v15/I3S1wsgSg9YCurV6PUkTOYX0hVgzZQUfRDuZrPvH3D8.woff2 b/js/assets/fonts/Roboto/v15/I3S1wsgSg9YCurV6PUkTOYX0hVgzZQUfRDuZrPvH3D8.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..0028bd81e9db90411095790d72c9568f1778bd66
Binary files /dev/null and b/js/assets/fonts/Roboto/v15/I3S1wsgSg9YCurV6PUkTOYX0hVgzZQUfRDuZrPvH3D8.woff2 differ
diff --git a/js/assets/fonts/Roboto/v15/NYDWBdD4gIq26G5XYbHsFIX0hVgzZQUfRDuZrPvH3D8.woff2 b/js/assets/fonts/Roboto/v15/NYDWBdD4gIq26G5XYbHsFIX0hVgzZQUfRDuZrPvH3D8.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..a5cefc9c67e2f5e20dccc3408988f16cbd6336ea
Binary files /dev/null and b/js/assets/fonts/Roboto/v15/NYDWBdD4gIq26G5XYbHsFIX0hVgzZQUfRDuZrPvH3D8.woff2 differ
diff --git a/js/assets/fonts/Roboto/v15/Pru33qjShpZSmG3z6VYwnYX0hVgzZQUfRDuZrPvH3D8.woff2 b/js/assets/fonts/Roboto/v15/Pru33qjShpZSmG3z6VYwnYX0hVgzZQUfRDuZrPvH3D8.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..feec9f1e6a187f63cbb826958bbc01c050b5b9c8
Binary files /dev/null and b/js/assets/fonts/Roboto/v15/Pru33qjShpZSmG3z6VYwnYX0hVgzZQUfRDuZrPvH3D8.woff2 differ
diff --git a/js/assets/fonts/RobotoMono/LICENSE.txt b/js/assets/fonts/RobotoMono/LICENSE.txt
new file mode 100755
index 0000000000000000000000000000000000000000..75b52484ea471f882c29e02693b4f02dba175b5e
--- /dev/null
+++ b/js/assets/fonts/RobotoMono/LICENSE.txt
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/js/assets/fonts/RobotoMono/font.css b/js/assets/fonts/RobotoMono/font.css
new file mode 100644
index 0000000000000000000000000000000000000000..5e9ab5721c1c8ef8630df6cae54949872434a253
--- /dev/null
+++ b/js/assets/fonts/RobotoMono/font.css
@@ -0,0 +1,56 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Mono Light'), local('RobotoMono-Light'), url(v4/N4duVc9C58uwPiY8_59Fz0ExlR2MysFCBK8OirNw2kM.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Mono Light'), local('RobotoMono-Light'), url(v4/N4duVc9C58uwPiY8_59Fz2dsm03krrxlabhmVQFB99s.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Mono Light'), local('RobotoMono-Light'), url(v4/N4duVc9C58uwPiY8_59FzyJ0caWjaSBdV-xZbEgst_k.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Mono Light'), local('RobotoMono-Light'), url(v4/N4duVc9C58uwPiY8_59Fz2MSHb9EAJwuSzGfuRChQzQ.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Mono Light'), local('RobotoMono-Light'), url(v4/N4duVc9C58uwPiY8_59Fz-pRBTtN4E2_qSPBnw6AgMc.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Mono Light'), local('RobotoMono-Light'), url(v4/N4duVc9C58uwPiY8_59Fz9Dnm4qiMZlH5rhYv_7LI2Y.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Mono Light'), local('RobotoMono-Light'), url(v4/N4duVc9C58uwPiY8_59Fz9TIkQYohD4BpHvJ3NvbHoA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
diff --git a/js/assets/fonts/RobotoMono/ttf/RobotoMono-Bold.ttf b/js/assets/fonts/RobotoMono/ttf/RobotoMono-Bold.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..07ef607d50c2e0b48d251910fc75c7eb83a41b34
Binary files /dev/null and b/js/assets/fonts/RobotoMono/ttf/RobotoMono-Bold.ttf differ
diff --git a/js/assets/fonts/RobotoMono/ttf/RobotoMono-BoldItalic.ttf b/js/assets/fonts/RobotoMono/ttf/RobotoMono-BoldItalic.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..1cca0bf456a3b6b42b3c92e81b4f4ebfa7d41f95
Binary files /dev/null and b/js/assets/fonts/RobotoMono/ttf/RobotoMono-BoldItalic.ttf differ
diff --git a/js/assets/fonts/RobotoMono/ttf/RobotoMono-Italic.ttf b/js/assets/fonts/RobotoMono/ttf/RobotoMono-Italic.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..ef92c372cf47ec6ac92644bdc52ef131867037b3
Binary files /dev/null and b/js/assets/fonts/RobotoMono/ttf/RobotoMono-Italic.ttf differ
diff --git a/js/assets/fonts/RobotoMono/ttf/RobotoMono-Light.ttf b/js/assets/fonts/RobotoMono/ttf/RobotoMono-Light.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..63229b2805b102f626c06e29752fe28e1ce9471f
Binary files /dev/null and b/js/assets/fonts/RobotoMono/ttf/RobotoMono-Light.ttf differ
diff --git a/js/assets/fonts/RobotoMono/ttf/RobotoMono-LightItalic.ttf b/js/assets/fonts/RobotoMono/ttf/RobotoMono-LightItalic.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..f25bed56adba942784c953710324ef0bba7577fa
Binary files /dev/null and b/js/assets/fonts/RobotoMono/ttf/RobotoMono-LightItalic.ttf differ
diff --git a/js/assets/fonts/RobotoMono/ttf/RobotoMono-Medium.ttf b/js/assets/fonts/RobotoMono/ttf/RobotoMono-Medium.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..88ff0c15a56bd3275b7938d7e7bedc56f71ccb8f
Binary files /dev/null and b/js/assets/fonts/RobotoMono/ttf/RobotoMono-Medium.ttf differ
diff --git a/js/assets/fonts/RobotoMono/ttf/RobotoMono-MediumItalic.ttf b/js/assets/fonts/RobotoMono/ttf/RobotoMono-MediumItalic.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..307efad8fcaa533cdc695b8f1aae696ba662431e
Binary files /dev/null and b/js/assets/fonts/RobotoMono/ttf/RobotoMono-MediumItalic.ttf differ
diff --git a/js/assets/fonts/RobotoMono/ttf/RobotoMono-Regular.ttf b/js/assets/fonts/RobotoMono/ttf/RobotoMono-Regular.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..b158a334eb372a9ab2ecd4f2566e60d561e71a9f
Binary files /dev/null and b/js/assets/fonts/RobotoMono/ttf/RobotoMono-Regular.ttf differ
diff --git a/js/assets/fonts/RobotoMono/ttf/RobotoMono-Thin.ttf b/js/assets/fonts/RobotoMono/ttf/RobotoMono-Thin.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..309484d3239a307904ad64f95d87c38fb6d24b7b
Binary files /dev/null and b/js/assets/fonts/RobotoMono/ttf/RobotoMono-Thin.ttf differ
diff --git a/js/assets/fonts/RobotoMono/ttf/RobotoMono-ThinItalic.ttf b/js/assets/fonts/RobotoMono/ttf/RobotoMono-ThinItalic.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..e1bb9121ec6568d6b8772d121eafeaa5da0db928
Binary files /dev/null and b/js/assets/fonts/RobotoMono/ttf/RobotoMono-ThinItalic.ttf differ
diff --git a/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz-pRBTtN4E2_qSPBnw6AgMc.woff2 b/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz-pRBTtN4E2_qSPBnw6AgMc.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..f1fdb93524e7a84934cc4f6d4b731006059705f1
Binary files /dev/null and b/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz-pRBTtN4E2_qSPBnw6AgMc.woff2 differ
diff --git a/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz0ExlR2MysFCBK8OirNw2kM.woff2 b/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz0ExlR2MysFCBK8OirNw2kM.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..501a4d77720aec360723de2ad0292c49eb10caf9
Binary files /dev/null and b/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz0ExlR2MysFCBK8OirNw2kM.woff2 differ
diff --git a/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz2MSHb9EAJwuSzGfuRChQzQ.woff2 b/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz2MSHb9EAJwuSzGfuRChQzQ.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..54484b1e3edcbac1fc80f13cfa4a03cb29c84bf1
Binary files /dev/null and b/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz2MSHb9EAJwuSzGfuRChQzQ.woff2 differ
diff --git a/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz2dsm03krrxlabhmVQFB99s.woff2 b/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz2dsm03krrxlabhmVQFB99s.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..c3f35ca2911c1db7e8afb85f28e23f7db0ae986c
Binary files /dev/null and b/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz2dsm03krrxlabhmVQFB99s.woff2 differ
diff --git a/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz9Dnm4qiMZlH5rhYv_7LI2Y.woff2 b/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz9Dnm4qiMZlH5rhYv_7LI2Y.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..72a43ab3c0332b0539f230c402090fdbab079956
Binary files /dev/null and b/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz9Dnm4qiMZlH5rhYv_7LI2Y.woff2 differ
diff --git a/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz9TIkQYohD4BpHvJ3NvbHoA.woff2 b/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz9TIkQYohD4BpHvJ3NvbHoA.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..62b3a15f698a5e966f5f6b4a5b6d5081e340c654
Binary files /dev/null and b/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59Fz9TIkQYohD4BpHvJ3NvbHoA.woff2 differ
diff --git a/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59FzyJ0caWjaSBdV-xZbEgst_k.woff2 b/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59FzyJ0caWjaSBdV-xZbEgst_k.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..2d4fda538a22e1046718d4d158e7512eae086f69
Binary files /dev/null and b/js/assets/fonts/RobotoMono/v4/N4duVc9C58uwPiY8_59FzyJ0caWjaSBdV-xZbEgst_k.woff2 differ
diff --git a/js/assets/images/contracts/augur-68x68.png b/js/assets/images/contracts/augur-68x68.png
new file mode 100644
index 0000000000000000000000000000000000000000..962c3acf2cf6ccd1af5315e28c73fa62e6bf7560
Binary files /dev/null and b/js/assets/images/contracts/augur-68x68.png differ
diff --git a/js/assets/images/contracts/beer-64x64.png b/js/assets/images/contracts/beer-64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..04e91e459f469821f1997a6f2bebdeddd64286b4
Binary files /dev/null and b/js/assets/images/contracts/beer-64x64.png differ
diff --git a/js/assets/images/contracts/beer.png b/js/assets/images/contracts/beer.png
new file mode 100644
index 0000000000000000000000000000000000000000..dd0125fc8bd131a3240f891b900f8c234840f7eb
Binary files /dev/null and b/js/assets/images/contracts/beer.png differ
diff --git a/js/assets/images/contracts/dgd-64x64.png b/js/assets/images/contracts/dgd-64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa1bd308f7d4c78e034e522a5399663ac6d55cd6
Binary files /dev/null and b/js/assets/images/contracts/dgd-64x64.png differ
diff --git a/js/assets/images/contracts/dgd.png b/js/assets/images/contracts/dgd.png
new file mode 100644
index 0000000000000000000000000000000000000000..09b2831aff5c3e5b7adca0c5cfa14ab4394a6c8b
Binary files /dev/null and b/js/assets/images/contracts/dgd.png differ
diff --git a/js/assets/images/contracts/dgx-64x64.png b/js/assets/images/contracts/dgx-64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..c81c3387cc50c57a62eafdcc7b37fbbbe9e9c4f0
Binary files /dev/null and b/js/assets/images/contracts/dgx-64x64.png differ
diff --git a/js/assets/images/contracts/dgx.png b/js/assets/images/contracts/dgx.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ac5dff1b2cd4b6343bb7bc973a2601f1c608f03
Binary files /dev/null and b/js/assets/images/contracts/dgx.png differ
diff --git a/js/assets/images/contracts/ethereum-black-64x64.png b/js/assets/images/contracts/ethereum-black-64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e80e4ff134759b9cfbbc6f535791b93aac64a49
Binary files /dev/null and b/js/assets/images/contracts/ethereum-black-64x64.png differ
diff --git a/js/assets/images/contracts/ethereum-black.png b/js/assets/images/contracts/ethereum-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..d7bdc4c904012b2224306216f1d36c78eb29122a
Binary files /dev/null and b/js/assets/images/contracts/ethereum-black.png differ
diff --git a/js/assets/images/contracts/ethereum-white.png b/js/assets/images/contracts/ethereum-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..0691d09aeaffaa78db1a267f3527a79072d71b73
Binary files /dev/null and b/js/assets/images/contracts/ethereum-white.png differ
diff --git a/js/assets/images/contracts/firstblood-64x64.png b/js/assets/images/contracts/firstblood-64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..338ce6b28cd59491e352b1bd20a92d422a1abd5b
Binary files /dev/null and b/js/assets/images/contracts/firstblood-64x64.png differ
diff --git a/js/assets/images/contracts/firstblood.png b/js/assets/images/contracts/firstblood.png
new file mode 100644
index 0000000000000000000000000000000000000000..8694cb6eb399bf9b93c82890e25b3491a92cf325
Binary files /dev/null and b/js/assets/images/contracts/firstblood.png differ
diff --git a/js/assets/images/contracts/gavcoin-64x64.png b/js/assets/images/contracts/gavcoin-64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..13b25a3411f50a19957367864aa6b1bcf542f376
Binary files /dev/null and b/js/assets/images/contracts/gavcoin-64x64.png differ
diff --git a/js/assets/images/contracts/gavcoin.png b/js/assets/images/contracts/gavcoin.png
new file mode 100644
index 0000000000000000000000000000000000000000..20e686f209e88e4fbd138393b8bcee7f6a6359ad
Binary files /dev/null and b/js/assets/images/contracts/gavcoin.png differ
diff --git a/js/assets/images/contracts/maker.svg b/js/assets/images/contracts/maker.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3c2c6e6345ef853389730ecb11b06936ee318334
--- /dev/null
+++ b/js/assets/images/contracts/maker.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="108px" height="109px" viewBox="0 0 108 109" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
+    <title>logo-maker</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="MKRcoin" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Artboard-17" sketch:type="MSArtboardGroup" transform="translate(-23.000000, -27.000000)">
+            <g id="logo-maker" sketch:type="MSLayerGroup" transform="translate(29.000000, 30.000000)">
+                <g id="Path-3-Copy-4-+-Path-3-Copy-5-Copy" transform="translate(2.571480, 0.000000)" stroke-width="4.50000018" sketch:type="MSShapeGroup" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M39.2735118,62.9999993 L39.273512,29.364949 L4.26325641e-13,0 L4.26325641e-13,63" id="Path-3-Copy-4" stroke="#1ABC9C"></path>
+                    <path d="M90.6311812,62.9999993 L90.6311814,29.364949 L51.3576695,0 L51.3576695,63" id="Path-3-Copy-5" stroke="#546979" transform="translate(70.994425, 31.500000) scale(-1, 1) translate(-70.994425, -31.500000) "></path>
+                </g>
+                <path d="M1.79556847,80.746582 L8.92480838,92.4404297 C8.92480838,92.4404297 8.92923368,92.4448242 8.93808443,92.4536133 L8.93808443,92.4667969 C8.95578592,92.4843751 8.97348714,92.5063475 8.99118864,92.5327148 C9.00889013,92.5502931 9.02659135,92.567871 9.04429284,92.5854492 C9.06199433,92.6030274 9.07969556,92.6206054 9.09739705,92.6381836 C9.12394929,92.6557618 9.14607582,92.6733398 9.16377731,92.690918 C9.20803104,92.7172853 9.21688165,92.7216798 9.19032941,92.7041016 C9.19918016,92.7041016 9.20360547,92.708496 9.20360547,92.7172852 L9.23015757,92.7172852 C9.25670981,92.7348634 9.28326165,92.7480468 9.30981388,92.7568359 C9.32751537,92.765625 9.34964191,92.774414 9.37619414,92.7832031 C9.40274638,92.7919922 9.42929822,92.7963867 9.45585045,92.7963867 C9.47355195,92.8051758 9.49567848,92.8095703 9.52223071,92.8095703 C9.54878295,92.8183594 9.57533479,92.8227539 9.60188703,92.8227539 C9.62843926,92.8227539 9.6549911,92.8183594 9.68154334,92.8095703 C9.70809557,92.8095703 9.73022211,92.8051758 9.7479236,92.7963867 C9.77447583,92.7963867 9.80102767,92.7919922 9.82757991,92.7832031 C9.85413215,92.774414 9.87625868,92.765625 9.89396017,92.7568359 C9.92051241,92.7480468 9.94706424,92.7348634 9.97361648,92.7172852 C10.0090195,92.6997069 10.0222954,92.6953125 10.0134446,92.7041016 C9.9868924,92.7216798 9.99574301,92.7172853 10.0399967,92.690918 C10.0576982,92.6733398 10.0798248,92.6557618 10.106377,92.6381836 C10.1240785,92.6206054 10.1417797,92.6030274 10.1594812,92.5854492 C10.168332,92.5766601 10.1860332,92.5590822 10.2125854,92.5327148 C10.2302869,92.5063475 10.2479881,92.4843751 10.2656896,92.4667969 L10.2656896,92.4536133 C10.2745404,92.4448242 10.2789657,92.4404297 10.2789657,92.4404297 L17.4082056,80.746582 L17.4082056,95.2089844 C17.4082056,95.428712 17.4834358,95.617675 17.6338985,95.7758789 C17.7932119,95.9252937 17.9790748,96 18.1914926,96 C18.4127613,96 18.5986242,95.9252937 18.7490868,95.7758789 C18.9084003,95.617675 18.9880558,95.428712 18.9880558,95.2089844 L18.9880558,77.925293 C18.9880558,77.5297832 18.7933423,77.2792974 18.4039095,77.1738281 C18.0233274,77.0683588 17.7268319,77.18701 17.514414,77.5297852 L9.60188703,90.515625 L1.68936005,77.5297852 C1.47694216,77.18701 1.18044663,77.0683588 0.79986457,77.1738281 C0.410431765,77.2792974 0.215718284,77.5297832 0.215718284,77.925293 L0.215718284,95.2089844 C0.215718284,95.428712 0.290948492,95.617675 0.441411167,95.7758789 C0.600724587,95.9252937 0.791012763,96 1.0122814,96 C1.2246993,96 1.41056216,95.9252937 1.56987558,95.7758789 C1.72033826,95.617675 1.79556847,95.428712 1.79556847,95.2089844 L1.79556847,80.746582 Z M29.1846538,90.0014648 L33.3798862,79.9555664 L37.5751186,90.0014648 L29.1846538,90.0014648 Z M26.1577139,96 C26.5117437,96 26.7551356,95.837404 26.8878968,95.512207 L28.5341272,91.5834961 L38.2256452,91.5834961 L39.8718756,95.512207 C40.0046368,95.837404 40.2480286,96 40.6020585,96 C40.7082674,96 40.8100495,95.9780276 40.9074077,95.934082 C41.1109748,95.8549801 41.2525846,95.7143565 41.3322413,95.512207 C41.4207488,95.3100576 41.4207488,95.1079112 41.3322413,94.9057617 L39.4868701,90.4892578 L39.4868701,90.4760742 L34.110069,77.5957031 C34.0923676,77.5517576 34.070241,77.5034182 34.0436888,77.4506836 C34.0436888,77.4594727 34.0259876,77.4418948 33.9905846,77.3979492 C33.9640323,77.3627928 33.9463311,77.3408204 33.9374804,77.3320312 C33.9286296,77.3320312 33.9065031,77.3144533 33.8711001,77.2792969 C33.8356971,77.2529296 33.8179959,77.2397461 33.8179959,77.2397461 C33.7294884,77.1782223 33.6321317,77.138672 33.5259228,77.1210937 C33.5347735,77.1210937 33.512647,77.1210937 33.4595425,77.1210937 C33.4152888,77.1123046 33.3887369,77.1079102 33.3798862,77.1079102 C33.3710354,77.1079102 33.3400583,77.1123046 33.2869538,77.1210937 L33.2205736,77.1210937 C33.1232154,77.138672 33.0302839,77.1782223 32.9417765,77.2397461 C32.9506272,77.230957 32.932926,77.2441404 32.8886723,77.2792969 C32.8532693,77.3056642 32.8311427,77.3232421 32.822292,77.3320312 C32.8134413,77.3408204 32.79574,77.3627928 32.7691878,77.3979492 C32.7337848,77.4331056 32.7160836,77.4506836 32.7160836,77.4506836 C32.6895313,77.5034182 32.6674048,77.5517576 32.6497033,77.5957031 L27.2729023,90.4760742 L27.2729023,90.4892578 L25.4275311,94.9057617 C25.3390236,95.1079112 25.3390236,95.3100576 25.4275311,95.512207 C25.5071878,95.7143565 25.6487976,95.8549801 25.8523647,95.934082 C25.9497229,95.9780276 26.051505,96 26.1577139,96 L26.1577139,96 Z M48.5815558,95.6308594 C48.7408692,95.4814446 48.8205247,95.2968761 48.8205247,95.0771484 L48.8205247,90.0410156 L51.183662,87.5625 L59.0298087,95.7626953 C59.1891221,95.9208992 59.3794103,96 59.6006789,96 C59.8130968,96 59.9945344,95.9296882 60.144997,95.7890625 C60.3043105,95.6396477 60.3883913,95.4550792 60.397242,95.2353516 C60.397242,95.0156239 60.3220118,94.8310554 60.1715491,94.6816406 L52.2722982,86.4287109 L59.9060281,78.4658203 C60.0564908,78.3076164 60.1272957,78.1186534 60.1184449,77.8989258 C60.1184449,77.6879872 60.0387894,77.5078132 59.879476,77.3583984 C59.7201626,77.2089836 59.5298744,77.1342773 59.3086058,77.1342773 C59.0961879,77.1430665 58.9147503,77.2265617 58.7642876,77.3847656 L48.8205247,87.7734375 L48.8205247,77.8461914 C48.8205247,77.6352529 48.7408692,77.4506844 48.5815558,77.2924805 C48.4310931,77.1430657 48.2452302,77.0683594 48.0239616,77.0683594 C47.8115437,77.0683594 47.6256808,77.1430657 47.4663674,77.2924805 C47.3159047,77.4506844 47.2406745,77.6352529 47.2406745,77.8461914 L47.2406745,95.0771484 C47.2406745,95.2968761 47.3159047,95.4814446 47.4663674,95.6308594 C47.6256808,95.7890633 47.8115437,95.8681641 48.0239616,95.8681641 C48.2452302,95.8681641 48.4310931,95.7890633 48.5815558,95.6308594 L48.5815558,95.6308594 Z M77.8292883,96 C78.050557,96 78.2364199,95.9208992 78.3868825,95.7626953 C78.5461959,95.6132805 78.6258515,95.428712 78.6258515,95.2089844 C78.6258515,94.9892567 78.5461959,94.8046882 78.3868825,94.6552734 C78.2364199,94.4970695 78.050557,94.4179687 77.8292883,94.4179687 L68.0846662,94.4179687 L68.0846662,87.3251953 L75.3732187,87.3251953 C75.5944874,87.3251953 75.7803502,87.2460945 75.9308129,87.0878906 C76.0901263,86.9384758 76.1697818,86.7539073 76.1697818,86.5341797 C76.1697818,86.314452 76.0901263,86.1298836 75.9308129,85.9804687 C75.7803502,85.8222648 75.5944874,85.7431641 75.3732187,85.7431641 L68.0846662,85.7431641 L68.0846662,78.6503906 L77.8292883,78.6767578 C78.050557,78.6767578 78.2364199,78.6020515 78.3868825,78.4526367 C78.5461959,78.2944328 78.6258515,78.1054698 78.6258515,77.8857422 C78.6258515,77.6748036 78.5461959,77.4902352 78.3868825,77.3320312 C78.2364199,77.1738273 78.050557,77.0947266 77.8292883,77.0947266 L67.2881031,77.0683594 C67.0756852,77.0595703 66.8898223,77.138671 66.7305089,77.3056641 C66.5711955,77.4550789 66.49154,77.6396473 66.49154,77.859375 L66.49154,95.2089844 C66.49154,95.428712 66.5711955,95.6132805 66.7305089,95.7626953 C66.8809716,95.9208992 67.0668344,96 67.2881031,96 L77.8292883,96 Z M94.6240842,84.675293 C93.8717708,85.3608433 92.9557324,85.7124023 91.8759414,85.7299805 L86.5655206,85.7299805 L86.5655206,78.6767578 L91.783009,78.6767578 C92.8805015,78.6767578 93.8186665,79.0239223 94.5975321,79.7182617 C95.3763977,80.403812 95.7658246,81.2343701 95.7658246,82.2099609 C95.7658246,83.1679735 95.3852483,83.9897427 94.6240842,84.675293 L94.6240842,84.675293 Z M85.7689575,77.1210937 C85.5565396,77.1210937 85.3706767,77.1958 85.2113633,77.3452148 C85.0609006,77.4946297 84.9856704,77.6791981 84.9856704,77.8989258 L84.9856704,95.090332 C84.9856704,95.3012706 85.0609006,95.4858391 85.2113633,95.644043 C85.3706767,95.7934578 85.5565396,95.8681641 85.7689575,95.8681641 C85.9902261,95.8681641 86.176089,95.7934578 86.3265517,95.644043 C86.4858651,95.4858391 86.5655206,95.3012706 86.5655206,95.090332 L86.5655206,87.2988281 L90.999722,87.2988281 L95.102022,95.5649414 C95.243634,95.8549819 95.4781752,96 95.8056528,96 C95.9295632,96 96.0446212,95.9736331 96.1508301,95.9208984 C96.3455465,95.8242183 96.4783057,95.6748057 96.5491117,95.4726562 C96.6199177,95.2705068 96.6066417,95.0727549 96.5092835,94.8793945 L92.7256087,87.2197266 C94.0443698,87.0175771 95.1374205,86.4462938 96.0047936,85.5058594 C96.8898681,84.5566359 97.3323988,83.4580141 97.3323988,82.2099609 C97.3323988,80.8037039 96.7925114,79.6040089 95.7127204,78.6108398 C94.6240787,77.6176708 93.314188,77.1210937 91.783009,77.1210937 L85.7689575,77.1210937 Z" id="Maker" fill="#546979" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/js/assets/images/contracts/pluton.svg b/js/assets/images/contracts/pluton.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ecbcee82efa085ea2a65a15a5b0f5320ca4874c0
--- /dev/null
+++ b/js/assets/images/contracts/pluton.svg
@@ -0,0 +1,157 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 83.609 73.184" enable-background="new 0 0 83.609 73.184" xml:space="preserve">
+<g id="XMLID_2_">
+	<path id="XMLID_3_" fill="#213654" d="M44.782,73.184c-3.33,0-6.614-0.446-9.764-1.325l0.443-1.586
+		c3.004,0.84,6.141,1.265,9.32,1.265c2.181,0,4.902-0.338,7.314-0.791c-1.933-1.169-3.504-3.376-4.303-6.29
+		c-0.674-2.458-0.595-4.833,0.202-6.665c-2.754,0.904-5.73,1.375-8.768,1.375l-0.524-0.005l0.029-1.646l0.495,0.005
+		c3.953,0,7.791-0.843,11.107-2.439c0.515-0.302,1.085-0.521,1.702-0.653c0.459-0.099,0.942-0.142,1.381-0.143l-0.016,1.646
+		c-0.336,0.008-0.679,0.032-1.021,0.105c-0.449,0.096-0.857,0.252-1.224,0.468l0.002,0.005c-0.019,0.01-0.037,0.019-0.056,0.027
+		c-0.521,0.319-0.956,0.763-1.298,1.325c-0.927,1.523-1.082,3.769-0.426,6.159c0.997,3.64,3.34,5.964,5.905,6.012
+		c0.085-0.022,0.169-0.046,0.251-0.068l0.018,0.065c0.244-0.011,0.489-0.042,0.735-0.095c1.212-0.258,2.106-0.996,2.66-2.194
+		l1.494,0.689c-0.772,1.672-2.09,2.748-3.812,3.114c-0.383,0.082-0.764,0.127-1.141,0.136
+		C52.543,72.447,48.078,73.184,44.782,73.184z M23.554,66.171c-7.101-5.453-11.173-13.35-11.173-21.668
+		c0-2.19,0.281-4.376,0.835-6.497l1.592,0.416c-0.518,1.985-0.78,4.031-0.78,6.081c0,7.802,3.837,15.224,10.528,20.363
+		L23.554,66.171z M30.185,65.251c-0.496-3.824,1.038-4.895,2.392-5.841c0.542-0.378,1.054-0.735,1.486-1.276
+		c0.905-1.134,0.361-1.996-1.427-4.17c-0.342-0.416-0.699-0.852-1.054-1.314c-0.63-0.824-0.858-1.736-0.661-2.639
+		c0.43-1.96,2.681-3.202,2.936-3.338l0.772,1.454c-0.508,0.271-1.876,1.204-2.101,2.239c-0.092,0.425,0.026,0.845,0.362,1.283
+		c0.341,0.447,0.688,0.867,1.017,1.269c1.604,1.95,3.261,3.966,1.441,6.243c-0.581,0.728-1.244,1.19-1.829,1.599
+		c-1.246,0.87-2.069,1.445-1.701,4.28L30.185,65.251z M24.476,60.15c-0.498-3.825,1.037-4.896,2.391-5.842
+		c0.542-0.378,1.054-0.734,1.485-1.276c0.907-1.135,0.363-1.996-1.424-4.17c-0.342-0.416-0.7-0.852-1.055-1.314
+		c-0.63-0.824-0.859-1.737-0.661-2.64c0.199-0.909,0.79-1.664,1.393-2.226c-2.809-1.872-2.855-4.946-2.855-4.991h1.646h-0.823
+		l0.823-0.005c0.001,0.142,0.071,2.605,2.665,3.933c0.039-0.021,0.153,0.075,0.153,0.075c0.897,0.428,2.079,0.721,3.639,0.752
+		c6.379-0.128,6.453-4.563,6.453-4.755h1.646c0,0.016-0.006,0.413-0.14,1.004c0.722-0.037,1.959-0.263,2.47-0.519
+		c-0.36-1.032-2.216-4.104-3.907-6.63l0.244-1.153l0.581-0.368c-0.252-1.127-0.806-3.661-1.078-5.328
+		c-5.859-0.881-10.078-0.201-12.548,2.033c-2.386,2.157-2.244,5.016-2.237,5.136l-1.642,0.121c-0.031-0.38-0.297-0.778-0.617-0.928
+		c-0.284-0.133-0.617-0.067-0.991,0.195c-0.584,0.413-0.792,0.936-0.655,1.646c0.243,1.262,1.494,2.646,2.471,3.25
+		c0.137-0.083,0.236-0.137,0.279-0.16l0.215,0.406c0.048,0.017,0.102,0.191,0.102,0.191l0.454,0.856
+		c-0.182,0.097-0.473,0.278-0.782,0.519c0,0-0.058,0.066-0.077,0.062c-0.535,0.428-1.102,1.023-1.24,1.658
+		c-0.092,0.426,0.026,0.846,0.361,1.285c0.341,0.446,0.688,0.867,1.018,1.269c1.603,1.949,3.259,3.964,1.441,6.241
+		c-0.582,0.728-1.245,1.19-1.83,1.6c-1.246,0.87-2.069,1.444-1.7,4.279l-1.633,0.213c-0.498-3.826,1.037-4.896,2.391-5.842
+		c0.541-0.378,1.053-0.735,1.486-1.277c0.904-1.134,0.36-1.995-1.427-4.168c-0.342-0.416-0.7-0.853-1.055-1.316
+		c-0.629-0.825-0.857-1.737-0.66-2.64c0.188-0.854,0.722-1.573,1.285-2.123c-1.237-0.933-2.423-2.471-2.716-3.992
+		c-0.26-1.344,0.21-2.516,1.322-3.301c0.864-0.611,1.802-0.732,2.636-0.344c0.066,0.03,0.129,0.063,0.191,0.1
+		c0.322-1.246,1.014-2.798,2.479-4.134c2.843-2.591,7.506-3.422,13.866-2.472c2.637-3.356,0.348-5.941-0.428-6.66
+		c-2.225-2.067-6.116-2.676-8.784-0.119l-1.374-0.424c-0.45-2.123-2.957-3.178-5.154-3.457c-3.329-0.417-7.678,0.653-9.351,4.017
+		c-2.24,4.505,0.714,6.775,0.744,6.798l-0.536,1.481c-3.291-0.177-5.506,0.357-6.576,1.599c-1.38,1.599-0.814,4.36-0.36,6.58
+		c0.385,1.881,0.689,3.367-0.074,4.262c-1.182,1.387-2.969,1.769-4.556,0.97c-1.34-0.675-2.081-1.984-1.804-3.185l1.604,0.371
+		c-0.102,0.444,0.302,1.021,0.941,1.344c0.342,0.171,1.534,0.638,2.563-0.568c0.241-0.283-0.089-1.898-0.287-2.863
+		c-0.526-2.572-1.181-5.773,0.728-7.985c1.201-1.394,3.201-2.117,6.084-2.196c-0.891-1.452-1.64-3.93,0.056-7.339
+		c2.031-4.084,7.142-5.418,11.033-4.917c2.924,0.371,5.152,1.69,6.124,3.55c3.286-2.304,7.567-1.477,10.101,0.877
+		c2.02,1.876,3.364,5.275,0.674,8.79c0.277,1.952,1.246,6.197,1.257,6.242l-0.363,0.879l-0.359,0.228
+		c4.242,6.423,3.866,7.153,3.661,7.552c-0.375,0.73-1.675,1.153-2.877,1.336c1.418,0.983,2.757,2.646,2.659,5.126
+		c-0.078,2.006-1.592,3.617-3.057,5.175c-1.937,2.061-3.07,3.405-2.016,5.004l-1.375,0.906c-1.823-2.766,0.31-5.035,2.191-7.037
+		c1.257-1.338,2.557-2.721,2.611-4.112c0.108-2.769-2.197-3.966-3.157-4.343c-1.015,1.511-2.966,3.008-6.718,3.145v0.011
+		c-0.096,0-0.189-0.001-0.283-0.003c-0.094,0.002-0.188,0.003-0.283,0.003v-0.011c-1.332-0.048-2.438-0.269-3.354-0.6
+		c-0.576,0.434-1.244,1.082-1.395,1.778c-0.093,0.425,0.025,0.845,0.361,1.284c0.342,0.447,0.688,0.868,1.018,1.27
+		c1.603,1.949,3.259,3.965,1.439,6.242c-0.58,0.728-1.244,1.19-1.829,1.599c-1.246,0.87-2.069,1.445-1.7,4.279L24.476,60.15z
+		 M5.457,42.863c-0.305,0-0.621-0.013-0.951-0.037l0.121-1.641c1.847,0.134,3.15-0.171,3.892-0.91
+		c1.213-1.21,1.039-3.611,0.871-5.934c-0.079-1.104-0.155-2.148-0.09-3.101c0.146-2.149,1.784-4.662,8.723-4.395L17.96,28.49
+		c-3.1-0.114-6.842,0.284-7.018,2.862c-0.058,0.838,0.014,1.825,0.089,2.871c0.186,2.566,0.396,5.475-1.35,7.217
+		C8.726,42.395,7.338,42.863,5.457,42.863z M29.865,32.328l-0.621-1.524l5.17-2.109l0.614-0.003l3.086,1.225l-0.607,1.529
+		l-2.778-1.102L29.865,32.328z M19.314,25.852c-0.91,0-1.826-0.459-2.441-1.283c-0.887-1.187-0.828-2.714,0.149-3.891l1.266,1.051
+		c-0.704,0.849-0.303,1.579-0.097,1.854c0.336,0.448,0.966,0.778,1.512,0.544c0.96-0.414,1.107-0.628,1.918-1.819
+		c0.443-0.65,1.051-1.541,2.038-2.816c1.016-1.312,2.184-2.004,3.472-2.055c2.058-0.094,3.574,1.559,3.639,1.63l-1.219,1.107
+		l0.609-0.554l-0.607,0.556c-0.012-0.011-1.09-1.126-2.367-1.095c-0.775,0.034-1.524,0.512-2.226,1.418
+		c-0.956,1.235-1.547,2.102-1.979,2.735c-0.868,1.274-1.228,1.802-2.628,2.404C20.019,25.782,19.667,25.852,19.314,25.852z"/>
+</g>
+<g id="XMLID_11_">
+	<path id="XMLID_12_" fill="#213654" d="M34.195,32.441c0-0.503,0.463-0.911,1.033-0.911s1.033,0.408,1.033,0.911
+		c0,0.503-0.463,0.911-1.033,0.911S34.195,32.944,34.195,32.441"/>
+</g>
+<g id="XMLID_13_">
+	<path id="XMLID_14_" fill="#213654" d="M69.862,50.537c-0.047,0-0.094,0-0.142-0.002l-1.418-0.026L44.59,50.51v-1.426l25.162,0.027
+		c0.772-0.012,1.068-0.171,1.119-0.285c0.074-0.167-0.056-0.563-0.394-0.913l-4.377-4.139c-1.043-1.025-2.743-1.046-3.803-0.055
+		l-3.212,3.01c-1.606,1.506-4.201,1.488-5.788-0.036l-3.071-2.951c-1.033-0.992-2.698-1.08-3.641-0.197l-0.975-1.039
+		c1.505-1.409,4.017-1.315,5.602,0.209l3.072,2.951c1.05,1.007,2.767,1.019,3.826,0.024l3.212-3.01c0.71-0.666,1.61-1.031,2.53-1.1
+		l-7.112-7.095l-3.018,2.734c-0.615,0.532-0.96,1.282-0.96,2.07c0,1.504,1.237,2.728,2.759,2.728c1.398,0,2.375-0.81,2.375-1.97
+		c0.007-0.102,0.052-0.603-0.312-1.005c-0.355-0.393-1.03-0.6-1.949-0.6v-1.426c1.37,0,2.391,0.369,3.031,1.098
+		c0.771,0.877,0.665,1.908,0.65,2.023c0.006,1.845-1.628,3.305-3.795,3.305c-2.308,0-4.185-1.863-4.185-4.153
+		c0-1.202,0.525-2.346,1.441-3.138l3.508-3.178l0.981,0.023l9.296,9.272l-0.023,0.024c0.193,0.133,0.377,0.284,0.55,0.453
+		l4.39,4.151c0.759,0.783,1.023,1.756,0.697,2.499C71.946,49.924,71.358,50.537,69.862,50.537z"/>
+</g>
+<g id="XMLID_15_">
+	<path id="XMLID_16_" fill="#213654" d="M58.721,60.635c-0.793-2.043-1.708-3.035-1.717-3.045c-0.073-0.081-1.451-1.592-3.732-1.491
+		l-0.08-1.645c3.064-0.155,4.947,1.936,5.026,2.024c0.025,0.026,1.116,1.186,2.038,3.561L58.721,60.635z"/>
+</g>
+<g id="XMLID_17_">
+	<path id="XMLID_18_" fill="#213654" d="M43.486,21.351c-0.696,0-1.263-0.585-1.263-1.304c0-0.72,0.566-1.305,1.263-1.305
+		c0.695,0,1.261,0.585,1.261,1.305C44.747,20.766,44.182,21.351,43.486,21.351z"/>
+</g>
+<g id="XMLID_20_">
+	<path id="XMLID_21_" fill="#213654" d="M61.776,17.014c-0.33,0-0.596-0.285-0.596-0.636c0-0.353,0.266-0.639,0.596-0.639
+		c0.327,0,0.594,0.286,0.594,0.639C62.369,16.729,62.103,17.014,61.776,17.014"/>
+</g>
+<g id="XMLID_22_">
+	<path id="XMLID_23_" fill="#213654" d="M70.143,25.702c-0.751,0-1.361-0.628-1.361-1.399s0.61-1.399,1.361-1.399
+		c0.749,0,1.357,0.627,1.357,1.399S70.892,25.702,70.143,25.702z M70.143,24.147c-0.105,0-0.197,0.072-0.197,0.155
+		c0.001,0.169,0.391,0.173,0.391,0C70.336,24.219,70.247,24.147,70.143,24.147z M61.871,17.871c-0.75,0-1.359-0.627-1.359-1.398
+		c0-0.773,0.609-1.4,1.359-1.4c0.749,0,1.358,0.628,1.358,1.4C63.23,17.244,62.62,17.871,61.871,17.871z M61.871,16.316
+		c-0.107,0-0.196,0.071-0.196,0.156c0,0.165,0.392,0.167,0.392,0C62.067,16.388,61.977,16.316,61.871,16.316z"/>
+</g>
+<g id="XMLID_28_">
+	<path id="XMLID_29_" fill="#213654" d="M63.998,31.065c-0.328,0-0.596-0.284-0.596-0.638c0-0.351,0.268-0.636,0.596-0.636
+		c0.328,0,0.594,0.285,0.594,0.636C64.592,30.781,64.326,31.065,63.998,31.065"/>
+</g>
+<g id="XMLID_30_">
+	<path id="XMLID_31_" fill="#213654" d="M63.998,31.732c-0.696,0-1.263-0.585-1.263-1.304c0-0.72,0.566-1.305,1.263-1.305
+		c0.696,0,1.262,0.585,1.262,1.305C65.26,31.147,64.694,31.732,63.998,31.732z M63.998,30.178c-0.159,0-0.293,0.115-0.293,0.251
+		c0,0.271,0.585,0.272,0.585,0C64.29,30.293,64.156,30.178,63.998,30.178z"/>
+</g>
+<g id="XMLID_34_">
+	<path id="XMLID_35_" fill="#213654" d="M59.842,22.463c-0.329,0-0.596-0.284-0.596-0.637c0-0.351,0.267-0.637,0.596-0.637
+		c0.328,0,0.595,0.285,0.595,0.637C60.437,22.179,60.17,22.463,59.842,22.463"/>
+</g>
+<g id="XMLID_36_">
+	<path id="XMLID_37_" fill="#213654" d="M59.842,23.13c-0.696,0-1.263-0.585-1.263-1.304c0-0.719,0.566-1.303,1.263-1.303
+		s1.262,0.584,1.262,1.303C61.104,22.545,60.538,23.13,59.842,23.13z M59.842,21.575c-0.159,0-0.293,0.115-0.293,0.251
+		c0,0.273,0.585,0.274,0.585,0C60.134,21.69,60,21.575,59.842,21.575z"/>
+</g>
+<g id="XMLID_40_">
+	<path id="XMLID_41_" fill="#213654" d="M49.209,32.226c-0.328,0-0.595-0.286-0.595-0.638c0-0.352,0.267-0.637,0.595-0.637
+		c0.328,0,0.596,0.285,0.596,0.637C49.805,31.939,49.537,32.226,49.209,32.226"/>
+</g>
+<g id="XMLID_42_">
+	<path id="XMLID_43_" fill="#213654" d="M49.209,32.893c-0.696,0-1.262-0.585-1.262-1.305c0-0.72,0.565-1.305,1.262-1.305
+		s1.263,0.585,1.263,1.305C50.472,32.308,49.905,32.893,49.209,32.893z M49.209,31.338c-0.158,0-0.292,0.114-0.292,0.25
+		c0,0.271,0.585,0.271,0.585,0C49.502,31.452,49.368,31.338,49.209,31.338z"/>
+</g>
+<g id="XMLID_46_">
+	<path id="XMLID_47_" fill="#213654" d="M53.801,27.296c-0.33,0-0.596-0.285-0.596-0.637c0-0.351,0.266-0.636,0.596-0.636
+		c0.328,0,0.595,0.284,0.595,0.636C54.396,27.011,54.129,27.296,53.801,27.296"/>
+</g>
+<g id="XMLID_48_">
+	<path id="XMLID_49_" fill="#213654" d="M53.801,27.963c-0.696,0-1.263-0.585-1.263-1.304c0-0.719,0.566-1.304,1.263-1.304
+		s1.262,0.585,1.262,1.304C55.063,27.378,54.497,27.963,53.801,27.963z M53.801,26.408c-0.159,0-0.293,0.115-0.293,0.251
+		c0,0.271,0.585,0.274,0.585,0C54.093,26.523,53.959,26.408,53.801,26.408z"/>
+</g>
+<g id="XMLID_52_">
+	<path id="XMLID_53_" fill="#213654" d="M43.29,19.365l10.143-4.444l0.385-0.054l7.977,1.116l-0.094,0.674l0.579-0.619l8.377,7.845
+		L70,25.095l-8.679-2.136l3.292,7.111l-0.882,0.973l-9.77-3.426l-4.181,4.392l-1.154-0.175l-5.636-11.392l0.489-0.242l0.106-0.159
+		 M45.373,22.042l4.079,8.246l3.212-3.373L45.373,22.042z M55.202,26.542l7.41,2.599l-2.899-6.264L55.202,26.542z M45.083,20.135
+		l8.64,5.773l5.663-4.602l0.619-0.139l0.486,0.119l0.046-0.021l0.017,0.037l7.14,1.757l-6.091-5.703l-0.005,0.039l-7.777-1.089
+		L45.083,20.135z"/>
+</g>
+<g id="XMLID_58_">
+	<path id="XMLID_59_" fill="#213654" d="M65.19,67.118l-0.801-1.438c3.859-2.15,7.216-4.971,9.976-8.38
+		c4.899-6.054,7.598-13.684,7.598-21.486c0-18.841-15.324-34.168-34.161-34.168c-5.173,0-10.14,1.125-14.763,3.346l-0.713-1.484
+		C37.173,1.181,42.379,0,47.801,0c19.744,0,35.808,16.066,35.808,35.815c0,8.178-2.829,16.177-7.965,22.521
+		C72.751,61.91,69.235,64.865,65.19,67.118z M54.461,66.359L54.1,64.754c13.359-3.012,23.056-15.153,23.056-28.872
+		c0-16.319-13.274-29.596-29.59-29.596c-5.931,0-11.651,1.747-16.544,5.054L30.1,9.977C35.266,6.485,41.305,4.64,47.566,4.64
+		c17.224,0,31.236,14.016,31.236,31.242C78.802,50.363,68.566,63.181,54.461,66.359z"/>
+</g>
+<g id="XMLID_62_">
+	<polygon id="XMLID_63_" fill="#213654" points="59.634,22.086 53.083,16.162 45.122,11.763 45.812,10.515 53.978,15.05 
+		60.589,21.029 	"/>
+</g>
+<g id="XMLID_64_">
+	<path id="XMLID_65_" fill="#213654" d="M53.59,16.806c-0.696,0-1.263-0.584-1.263-1.303c0-0.72,0.567-1.305,1.263-1.305
+		c0.696,0,1.262,0.585,1.262,1.305C54.852,16.222,54.286,16.806,53.59,16.806z M53.59,15.251c-0.159,0-0.293,0.115-0.293,0.252
+		c0.001,0.271,0.586,0.272,0.585,0C53.882,15.366,53.748,15.251,53.59,15.251z"/>
+</g>
+<g id="XMLID_68_">
+	<path id="XMLID_69_" fill="#213654" d="M45.555,12.443c-0.695,0-1.262-0.584-1.262-1.303c0-0.72,0.566-1.305,1.262-1.305
+		c0.695,0,1.262,0.585,1.262,1.305C46.817,11.859,46.25,12.443,45.555,12.443z"/>
+</g>
+</svg>
diff --git a/js/assets/images/contracts/singular.svg b/js/assets/images/contracts/singular.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a735ca7e126b3002709f1c876cb04bfe8f638a4d
--- /dev/null
+++ b/js/assets/images/contracts/singular.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 233 133.3" xml:space="preserve"><style type="text/css">
+	.st0{fill:#AA0E20;}
+</style><polygon class="st0" points="137.3 74.6 116.5 114.9 89.6 63.9 89.7 63.7 84.2 53.8 78.2 63.9 116.5 133.3 154.8 63.9 148.8 53.8 "/><polygon class="st0" points="116.5 0 111.8 7.5 90.1 43.9 95.6 54.3 116.5 21 137 54.3 142.6 43.4 124.4 12.9 "/><path class="st0" d="M116.5 19.8C52.2 19.8 0 67.7 0 67.8c0 0 52.2 48 116.5 48s116.5-48 116.5-48C233 67.9 180.8 19.8 116.5 19.8zM116.5 105.2C66.4 105.2 9.8 67.8 9.8 67.8c0 0 56.6-37.4 106.7-37.4s106.7 36.5 106.7 37.4C223.2 68.7 166.6 105.2 116.5 105.2z"/></svg>
diff --git a/js/assets/images/contracts/unicorn-64x64.png b/js/assets/images/contracts/unicorn-64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..be9dacf33f6cfa6d5b61f487d81cada26862c9e8
Binary files /dev/null and b/js/assets/images/contracts/unicorn-64x64.png differ
diff --git a/js/assets/images/contracts/unicorn.png b/js/assets/images/contracts/unicorn.png
new file mode 100644
index 0000000000000000000000000000000000000000..b94d476cbbc67a0da2bbbf0f9457f26f7a447559
Binary files /dev/null and b/js/assets/images/contracts/unicorn.png differ
diff --git a/js/assets/images/contracts/unknown-64x64.png b/js/assets/images/contracts/unknown-64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..c2b39a80a372151cb98f216568917953a2b76727
Binary files /dev/null and b/js/assets/images/contracts/unknown-64x64.png differ
diff --git a/js/assets/images/contracts/unknown.png b/js/assets/images/contracts/unknown.png
new file mode 100644
index 0000000000000000000000000000000000000000..204ffa486372bfed2b04aca09f3f5eaa63115845
Binary files /dev/null and b/js/assets/images/contracts/unknown.png differ
diff --git a/js/assets/images/dapps/blocks-350.jpg b/js/assets/images/dapps/blocks-350.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..524f9267c50777c162f3f2081933716329926907
Binary files /dev/null and b/js/assets/images/dapps/blocks-350.jpg differ
diff --git a/js/assets/images/dapps/coins-64x64.jpg b/js/assets/images/dapps/coins-64x64.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..987d7400efbc19054a194526625f07bfa1e6f458
Binary files /dev/null and b/js/assets/images/dapps/coins-64x64.jpg differ
diff --git a/js/assets/images/dapps/coins.jpg b/js/assets/images/dapps/coins.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8fba5e65c1c04fa072b53351a02c2e306e830075
Binary files /dev/null and b/js/assets/images/dapps/coins.jpg differ
diff --git a/js/assets/images/dapps/hex-64x64.jpg b/js/assets/images/dapps/hex-64x64.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8c6a1d5cc103e2e561e1ba5c999f36ab9e773266
Binary files /dev/null and b/js/assets/images/dapps/hex-64x64.jpg differ
diff --git a/js/assets/images/dapps/hex.jpg b/js/assets/images/dapps/hex.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8e09f49aa27a47f13a2dfa0b14eba4af1d9e0109
Binary files /dev/null and b/js/assets/images/dapps/hex.jpg differ
diff --git a/js/assets/images/dapps/interlock-64x64.png b/js/assets/images/dapps/interlock-64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4b342489a3a573421069402e57ffdc8aefb5f11
Binary files /dev/null and b/js/assets/images/dapps/interlock-64x64.png differ
diff --git a/js/assets/images/dapps/interlock.png b/js/assets/images/dapps/interlock.png
new file mode 100644
index 0000000000000000000000000000000000000000..e8aeb275d11d1e946d17cefaf881c7c9b6d97953
Binary files /dev/null and b/js/assets/images/dapps/interlock.png differ
diff --git a/js/assets/images/dapps/link-64x64.jpg b/js/assets/images/dapps/link-64x64.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..14f9c11906e50ce3439bbd40bef30e79f1146ccf
Binary files /dev/null and b/js/assets/images/dapps/link-64x64.jpg differ
diff --git a/js/assets/images/dapps/link.jpg b/js/assets/images/dapps/link.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..546c67e205a721e2588be2054899d499cd75ca09
Binary files /dev/null and b/js/assets/images/dapps/link.jpg differ
diff --git a/js/assets/images/dapps/register-64x64.jpg b/js/assets/images/dapps/register-64x64.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ff8fc6c2feaf59c83ce896718b5dd6f23179c63d
Binary files /dev/null and b/js/assets/images/dapps/register-64x64.jpg differ
diff --git a/js/assets/images/dapps/register.jpg b/js/assets/images/dapps/register.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cd47bd81ef6308794d8c9e3c23acd39fd1c25440
Binary files /dev/null and b/js/assets/images/dapps/register.jpg differ
diff --git a/js/assets/images/dapps/signature.png b/js/assets/images/dapps/signature.png
new file mode 100644
index 0000000000000000000000000000000000000000..36b341a036642764e48a0a958077b2440f370cbe
Binary files /dev/null and b/js/assets/images/dapps/signature.png differ
diff --git a/js/assets/images/ethcore-block-blue.png b/js/assets/images/ethcore-block-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd93635ecfec29e98f290b82dcea7d3176ca6ff3
Binary files /dev/null and b/js/assets/images/ethcore-block-blue.png differ
diff --git a/js/assets/images/ethcore-block.png b/js/assets/images/ethcore-block.png
new file mode 100644
index 0000000000000000000000000000000000000000..bac46e5c957818ec16eef0d841366a4f8b599a24
Binary files /dev/null and b/js/assets/images/ethcore-block.png differ
diff --git a/js/assets/images/ethcore-logo-white-square.png b/js/assets/images/ethcore-logo-white-square.png
new file mode 100644
index 0000000000000000000000000000000000000000..a300b5a0a891c31fbf7ff3c43a5afdf3f00fa4ba
Binary files /dev/null and b/js/assets/images/ethcore-logo-white-square.png differ
diff --git a/js/assets/images/parity-x56.png b/js/assets/images/parity-x56.png
new file mode 100644
index 0000000000000000000000000000000000000000..e303427a4e69f0c626cc05b77b3fdacd3b80f86a
Binary files /dev/null and b/js/assets/images/parity-x56.png differ
diff --git a/js/assets/images/parity.xcf b/js/assets/images/parity.xcf
new file mode 100644
index 0000000000000000000000000000000000000000..37fa206c0f14228e678afdf88291be984594b044
Binary files /dev/null and b/js/assets/images/parity.xcf differ
diff --git a/js/assets/images/paritybar.png b/js/assets/images/paritybar.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0b0e1457409c386690e52ab1091393de19aedc4
Binary files /dev/null and b/js/assets/images/paritybar.png differ
diff --git a/js/assets/images/shapeshift-btn.png b/js/assets/images/shapeshift-btn.png
new file mode 100644
index 0000000000000000000000000000000000000000..1650ecf375660f706f59ae7bf2f4455dedeb8aae
Binary files /dev/null and b/js/assets/images/shapeshift-btn.png differ
diff --git a/js/assets/images/shapeshift-logo.png b/js/assets/images/shapeshift-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..586a01ef13a7ce480d46b88fe6dc457d3083c966
Binary files /dev/null and b/js/assets/images/shapeshift-logo.png differ
diff --git a/js/build-server.js b/js/build-server.js
new file mode 100644
index 0000000000000000000000000000000000000000..797e89183ce55b40c53198849ead720561147120
--- /dev/null
+++ b/js/build-server.js
@@ -0,0 +1,40 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Run `PARITY_URL="127.0.0.1:8180" NODE_ENV="production" npm run build`
+ * to build the project ; use this server to test that the minifed
+ * version is working (this is a simple proxy server)
+ */
+
+var express = require('express');
+var proxy = require('http-proxy-middleware');
+
+var app = express();
+
+app.use(express.static('build'));
+
+app.use('/api/*', proxy({
+  target: 'http://127.0.0.1:8080',
+  changeOrigin: true
+}));
+
+app.use('/rpc/*', proxy({
+  target: 'http://127.0.0.1:8080',
+  changeOrigin: true
+}));
+
+app.listen(3000);
diff --git a/js/package.json b/js/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..04c29ac7a93cc420f713a69d42d9c010f2d93832
--- /dev/null
+++ b/js/package.json
@@ -0,0 +1,140 @@
+{
+  "name": "parity.js",
+  "version": "0.0.1",
+  "main": "release/index.js",
+  "jsnext:main": "src/index.js",
+  "author": "Ethcore Team <admin@ethcore.io>",
+  "maintainers": [
+    "Jaco Greeff"
+  ],
+  "contributors": [],
+  "license": "GPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ethcore/parity.js.git"
+  },
+  "keywords": [
+    "Ethereum",
+    "ABI",
+    "API",
+    "Web3",
+    "RPC",
+    "Parity",
+    "Promise"
+  ],
+  "scripts": {
+    "build": "npm run build:dll && npm run build:app",
+    "build:app": "webpack --progress",
+    "build:dll": "webpack --config webpack.vendor.js --progress",
+    "ci:build": "npm run ci:build:dll && npm run ci:build:app",
+    "ci:build:app": "NODE_ENV=production webpack",
+    "ci:build:dll": "NODE_ENV=production webpack --config webpack.vendor.js",
+    "clean": "rm -rf ./build ./coverage",
+    "coveralls": "npm run testCoverage && coveralls < coverage/lcov.info",
+    "lint": "eslint --ignore-path .gitignore ./src/",
+    "start": "npm install && npm run build:dll && npm run start:app",
+    "start:app": "webpack-dev-server -d --history-api-fallback --open --hot --inline --progress --colors --port 3000",
+    "test": "mocha 'src/**/*.spec.js'",
+    "test:coverage": "istanbul cover _mocha -- 'src/**/*.spec.js'",
+    "test:e2e": "mocha 'src/**/*.e2e.js'"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.10.1",
+    "babel-core": "^6.10.4",
+    "babel-eslint": "^6.1.2",
+    "babel-loader": "^6.2.3",
+    "babel-plugin-lodash": "^3.2.2",
+    "babel-plugin-transform-class-properties": "^6.11.5",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-react-remove-prop-types": "^0.2.9",
+    "babel-plugin-transform-runtime": "^6.9.0",
+    "babel-polyfill": "^6.13.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-es2015-rollup": "^1.1.1",
+    "babel-preset-es2016": "^6.11.3",
+    "babel-preset-es2017": "^6.14.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "babel-register": "6.9.0",
+    "babel-runtime": "^6.9.2",
+    "chai": "^3.5.0",
+    "chai-enzyme": "0.4.2",
+    "cheerio": "0.20.0",
+    "copy-webpack-plugin": "^3.0.1",
+    "core-js": "^2.4.1",
+    "coveralls": "^2.11.11",
+    "css-loader": "^0.23.1",
+    "enzyme": "2.3.0",
+    "eslint": "^3.1.0",
+    "eslint-config-semistandard": "^6.0.2",
+    "eslint-config-standard": "^5.3.5",
+    "eslint-config-standard-react": "^3.0.0",
+    "eslint-plugin-promise": "^2.0.0",
+    "eslint-plugin-react": "^5.1.1",
+    "eslint-plugin-standard": "^2.0.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.8.5",
+    "happypack": "^2.2.1",
+    "history": "^2.0.0",
+    "html-loader": "^0.4.3",
+    "ignore-styles": "2.0.0",
+    "image-webpack-loader": "^1.8.0",
+    "istanbul": "^1.0.0-alpha.2",
+    "jsdom": "9.2.1",
+    "json-loader": "^0.5.4",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "mocha": "^3.0.0-1",
+    "mock-local-storage": "1.0.2",
+    "mock-socket": "^3.0.1",
+    "nock": "^8.0.0",
+    "postcss-import": "^8.1.2",
+    "postcss-loader": "^0.8.1",
+    "postcss-simple-vars": "^3.0.0",
+    "react-addons-test-utils": "^15.3.0",
+    "react-copy-to-clipboard": "^4.2.3",
+    "react-hot-loader": "^1.3.0",
+    "rucksack-css": "^0.8.6",
+    "sinon": "^1.17.4",
+    "sinon-as-promised": "^4.0.2",
+    "sinon-chai": "^2.8.0",
+    "style-loader": "^0.13.0",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.15.2",
+    "webpack-error-notification": "0.1.6",
+    "webpack-hot-middleware": "^2.7.1",
+    "websocket": "^1.0.23"
+  },
+  "dependencies": {
+    "bignumber.js": "^2.3.0",
+    "blockies": "0.0.2",
+    "bytes": "^2.4.0",
+    "es6-promise": "^3.2.1",
+    "format-json": "^1.0.3",
+    "format-number": "^2.0.1",
+    "geopattern": "^1.2.3",
+    "isomorphic-fetch": "^2.2.1",
+    "js-sha3": "^0.5.2",
+    "lodash": "^4.11.1",
+    "marked": "^0.3.6",
+    "material-ui": "^0.15.4",
+    "moment": "^2.14.1",
+    "react": "^15.2.1",
+    "react-addons-css-transition-group": "^15.2.1",
+    "react-dom": "^15.2.1",
+    "react-redux": "^4.4.5",
+    "react-router": "^2.6.1",
+    "react-router-redux": "^4.0.5",
+    "react-tap-event-plugin": "^1.0.0",
+    "react-tooltip": "^2.0.3",
+    "redux": "^3.5.2",
+    "redux-actions": "^0.10.1",
+    "redux-thunk": "^2.1.0",
+    "rlp": "^2.0.0",
+    "store": "^1.3.20",
+    "utf8": "^2.1.1",
+    "validator": "^5.7.0",
+    "whatwg-fetch": "^1.0.0"
+  }
+}
diff --git a/js/scripts/build.sh b/js/scripts/build.sh
new file mode 100755
index 0000000000000000000000000000000000000000..07487ffd55f0c015b3f704d4a55593e033bfabe8
--- /dev/null
+++ b/js/scripts/build.sh
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# change into the js directory (one down from scripts)
+pushd `dirname $0`
+cd ..
+
+# run build (production) and store the exit code
+EXITCODE=0
+npm run ci:build || EXITCODE=1
+
+# back to root
+popd
+
+# exit with exit code
+exit $EXITCODE
diff --git a/js/scripts/install-deps.sh b/js/scripts/install-deps.sh
new file mode 100755
index 0000000000000000000000000000000000000000..67113f27ea9f98193d33e43061f070037f3a1400
--- /dev/null
+++ b/js/scripts/install-deps.sh
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# change into the js directory (one down from scripts)
+pushd `dirname $0`
+cd ..
+
+# install deps and store the exit code
+EXITCODE=0
+npm install --progress=false || EXITCODE=1
+
+# back to root
+popd
+
+# exit with exit code
+exit $EXITCODE
diff --git a/js/scripts/lint.sh b/js/scripts/lint.sh
new file mode 100755
index 0000000000000000000000000000000000000000..147bb0a2d01fd36bc94cabba51e3eba947e42824
--- /dev/null
+++ b/js/scripts/lint.sh
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# change into the js directory (one down from scripts)
+pushd `dirname $0`
+cd ..
+
+# run lint & tests and store the exit code
+EXITCODE=0
+npm run lint || EXITCODE=1
+
+# back to root
+popd
+
+# exit with exit code
+exit $EXITCODE
diff --git a/js/scripts/release.sh b/js/scripts/release.sh
new file mode 100755
index 0000000000000000000000000000000000000000..05dc1d7840ba84978b49c1c7a56970d4953def46
--- /dev/null
+++ b/js/scripts/release.sh
@@ -0,0 +1,33 @@
+#!/bin/bash
+
+# change into the build directory
+pushd `dirname $0`
+cd ../.build
+
+# variables
+UTCDATE=`date -u "+%Y%m%d-%H%M%S"`
+
+# init git
+rm -rf ./.git
+git init
+
+# our user details
+git config push.default simple
+git config merge.ours.driver true
+git config user.email "jaco+gitlab@ethcore.io"
+git config user.name "GitLab Build Bot"
+
+# add local files and send it up
+git remote add origin https://${GITHUB_JS_PRECOMPILED}:@github.com/ethcore/js-precompiled.git
+git fetch origin
+git checkout -b $CI_BUILD_REF_NAME
+git add .
+git commit -m "$UTCDATE [compiled]"
+git merge origin/$CI_BUILD_REF_NAME -X ours --commit -m "$UTCDATE [release]"
+git push origin $CI_BUILD_REF_NAME
+
+# back to root
+popd
+
+# exit with exit code
+exit 0
diff --git a/js/scripts/test.sh b/js/scripts/test.sh
new file mode 100755
index 0000000000000000000000000000000000000000..6827b243ca64bdacd03691100dafc65a68bc5e65
--- /dev/null
+++ b/js/scripts/test.sh
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# change into the js directory (one down from scripts)
+pushd `dirname $0`
+cd ..
+
+# run lint & tests and store the exit code
+EXITCODE=0
+npm run test || EXITCODE=1
+
+# back to root
+popd
+
+# exit with exit code
+exit $EXITCODE
diff --git a/js/scripts/update-precompiled.sh b/js/scripts/update-precompiled.sh
new file mode 100755
index 0000000000000000000000000000000000000000..2d1fa9396419c4d27f0d369d76d7437479a5fc8b
--- /dev/null
+++ b/js/scripts/update-precompiled.sh
@@ -0,0 +1,18 @@
+#!/bin/bash
+
+
+# change into the submodule build directory
+pushd `dirname $0`
+cd ../build
+
+if [ -z "$1" ]; then
+  popd
+  echo "Usage: $0 <sha-commit>"
+  exit 1
+fi
+
+git fetch origin $1
+git merge $1 -X theirs
+
+popd
+exit 0
diff --git a/js/src/3rdparty/etherscan/account.js b/js/src/3rdparty/etherscan/account.js
new file mode 100644
index 0000000000000000000000000000000000000000..596e6d9cbfcd3e01e3a2a13684332a2fb42de1e3
--- /dev/null
+++ b/js/src/3rdparty/etherscan/account.js
@@ -0,0 +1,73 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const PAGE_SIZE = 25;
+
+import util from '../../api/util';
+import { call } from './call';
+
+function _call (method, params, test) {
+  return call('account', method, params, test);
+}
+
+function balance (address, test = false) {
+  return _call('balance', {
+    address: address,
+    tag: 'latest'
+  }, test).then((balance) => {
+    // same format as balancemulti below
+    return {
+      account: address,
+      balance: balance
+    };
+  });
+}
+
+function balances (addresses, test = false) {
+  return _call('balancemulti', {
+    address: addresses.join(','),
+    tag: 'latest'
+  }, test);
+}
+
+function transactions (address, page, test = false) {
+  // page offset from 0
+  return _call('txlist', {
+    address: address,
+    page: (page || 0) + 1,
+    offset: PAGE_SIZE,
+    sort: 'desc'
+  }, test).then((transactions) => {
+    return transactions.map((tx) => {
+      return {
+        from: util.toChecksumAddress(tx.from),
+        to: util.toChecksumAddress(tx.to),
+        hash: tx.hash,
+        blockNumber: tx.blockNumber,
+        timeStamp: tx.timeStamp,
+        value: tx.value
+      };
+    });
+  });
+}
+
+const account = {
+  balance: balance,
+  balances: balances,
+  transactions: transactions
+};
+
+export { account };
diff --git a/js/src/3rdparty/etherscan/account.spec.js b/js/src/3rdparty/etherscan/account.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..283fab3d2925ef2aa60c0fe20b247f4532ec8350
--- /dev/null
+++ b/js/src/3rdparty/etherscan/account.spec.js
@@ -0,0 +1,69 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import etherscan from './';
+
+const TESTADDR = '0xbf885e2b55c6bcc84556a3c5f07d3040833c8d00';
+
+describe.skip('etherscan/account', () => {
+  const checkBalance = function (balance, addr) {
+    expect(balance).to.be.ok;
+    expect(balance.account).to.equal(addr);
+    expect(balance.balance).to.be.ok;
+  };
+
+  it('retrieves an account balance', () => {
+    return etherscan.account
+      .balance(TESTADDR)
+      .then((balance) => {
+        checkBalance(balance, TESTADDR);
+      });
+  });
+
+  it('retrieves multi account balances', () => {
+    const addresses = ['0xde0b295669a9fd93d5f28d9ec85e40f4cb697bae', TESTADDR];
+
+    return etherscan.account
+      .balances(addresses)
+      .then((balances) => {
+        expect(balances).to.be.ok;
+        expect(balances.length).to.equal(2);
+        balances.forEach((balance, idx) => {
+          checkBalance(balance, addresses[idx]);
+        });
+      });
+  });
+
+  describe('transactions', () => {
+    it('retrieves a list of transactions (default)', () => {
+      return etherscan.account
+        .transactions(TESTADDR)
+        .then((transactions) => {
+          expect(transactions).to.be.ok;
+          expect(transactions.length).to.equal(25);
+        });
+    });
+
+    it('retrieves a list of transactions (page 1)', () => {
+      return etherscan.account
+        .transactions(TESTADDR, 1)
+        .then((transactions) => {
+          expect(transactions).to.be.ok;
+          expect(transactions.length).to.equal(25);
+        });
+    });
+  });
+});
diff --git a/js/src/3rdparty/etherscan/call.js b/js/src/3rdparty/etherscan/call.js
new file mode 100644
index 0000000000000000000000000000000000000000..1324bcc9d4cd11824c6063a38050eabe0e9be5e8
--- /dev/null
+++ b/js/src/3rdparty/etherscan/call.js
@@ -0,0 +1,51 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const options = {
+  method: 'GET',
+  headers: {
+    'Accept': 'application/json'
+  }
+};
+
+export function call (module, action, _params, test) {
+  const host = test ? 'testnet.etherscan.io' : 'api.etherscan.io';
+  let params = '';
+
+  if (_params) {
+    Object.keys(_params).map((param) => {
+      const value = _params[param];
+
+      params = `${params}&${param}=${value}`;
+    });
+  }
+
+  return fetch(`http://${host}/api?module=${module}&action=${action}${params}`, options)
+    .then((response) => {
+      if (response.status !== 200) {
+        throw { code: response.status, message: response.statusText }; // eslint-disable-line
+      }
+
+      return response.json();
+    })
+    .then((result) => {
+      if (result.message === 'NOTOK') {
+        throw { code: -1, message: result.result }; // eslint-disable-line
+      }
+
+      return result.result;
+    });
+}
diff --git a/js/src/3rdparty/etherscan/index.js b/js/src/3rdparty/etherscan/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..55aeba47332e2935464e67829d2ef102b4cb45e2
--- /dev/null
+++ b/js/src/3rdparty/etherscan/index.js
@@ -0,0 +1,25 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { account } from './account';
+import { stats } from './stats';
+
+const etherscan = {
+  account: account,
+  stats: stats
+};
+
+export default etherscan;
diff --git a/js/src/3rdparty/etherscan/stats.js b/js/src/3rdparty/etherscan/stats.js
new file mode 100644
index 0000000000000000000000000000000000000000..ecefefe7d862af2d4b1871ab4f703e6689e7c450
--- /dev/null
+++ b/js/src/3rdparty/etherscan/stats.js
@@ -0,0 +1,36 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { call } from './call';
+
+function _call (action, test) {
+  return call('stats', action, null, test);
+}
+
+function price (test = false) {
+  return _call('ethprice', test);
+}
+
+function supply (test = false) {
+  return _call('ethsupply', test);
+}
+
+const stats = {
+  price: price,
+  supply: supply
+};
+
+export { stats };
diff --git a/js/src/3rdparty/etherscan/stats.spec.js b/js/src/3rdparty/etherscan/stats.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..fde2b035c2e6a3bae2e9e7b5218df44432198f66
--- /dev/null
+++ b/js/src/3rdparty/etherscan/stats.spec.js
@@ -0,0 +1,35 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import etherscan from './';
+
+describe.skip('etherscan/stats', () => {
+  it('retrieves the latest price', () => {
+    return etherscan.stats
+      .price()
+      .then((price) => {
+        expect(price).to.be.ok;
+      });
+  });
+
+  it('retrieves the ether total', () => {
+    return etherscan.stats
+      .supply()
+      .then((supply) => {
+        expect(supply).to.be.ok;
+      });
+  });
+});
diff --git a/js/src/3rdparty/shapeshift/helpers.spec.js b/js/src/3rdparty/shapeshift/helpers.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..a82b2f6c39fdc37f30af8570c735dbdb9d48b06f
--- /dev/null
+++ b/js/src/3rdparty/shapeshift/helpers.spec.js
@@ -0,0 +1,71 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import chai from 'chai';
+import nock from 'nock';
+
+global.expect = chai.expect; // eslint-disable-line no-undef
+
+import 'isomorphic-fetch';
+import es6Promise from 'es6-promise';
+es6Promise.polyfill();
+
+import initShapeshift from './';
+import initRpc from './rpc';
+
+const APIKEY = '0x123454321';
+
+const shapeshift = initShapeshift(APIKEY);
+const rpc = initRpc(APIKEY);
+
+function mockget (requests) {
+  let scope = nock(rpc.ENDPOINT);
+
+  requests.forEach((request) => {
+    scope = scope
+      .get(`/${request.path}`)
+      .reply(request.code || 200, () => {
+        return request.reply;
+      });
+  });
+
+  return scope;
+}
+
+function mockpost (requests) {
+  let scope = nock(rpc.ENDPOINT);
+
+  requests.forEach((request) => {
+    scope = scope
+      .post(`/${request.path}`)
+      .reply(request.code || 200, (uri, body) => {
+        scope.body = scope.body || {};
+        scope.body[request.path] = body;
+
+        return request.reply;
+      });
+  });
+
+  return scope;
+}
+
+export {
+  APIKEY,
+  mockget,
+  mockpost,
+  shapeshift,
+  rpc
+};
diff --git a/js/src/3rdparty/shapeshift/index.js b/js/src/3rdparty/shapeshift/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5dd91e4f42ecd7bb03aa8a281a1d3e8d691c8e93
--- /dev/null
+++ b/js/src/3rdparty/shapeshift/index.js
@@ -0,0 +1,22 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import initRpc from './rpc';
+import initShapeshift from './shapeshift';
+
+export default function (apikey) {
+  return initShapeshift(initRpc(apikey));
+}
diff --git a/js/src/3rdparty/shapeshift/rpc.js b/js/src/3rdparty/shapeshift/rpc.js
new file mode 100644
index 0000000000000000000000000000000000000000..919f0b07f695d692a94b72872364577935558eda
--- /dev/null
+++ b/js/src/3rdparty/shapeshift/rpc.js
@@ -0,0 +1,67 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const ENDPOINT = 'https://cors.shapeshift.io';
+
+function call (method, options) {
+  return fetch(`${ENDPOINT}/${method}`, options)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(response.statusText);
+      }
+
+      return response.json();
+    })
+    .then((result) => {
+      if (result.error) {
+        throw new Error(result.error);
+      }
+
+      return result;
+    });
+}
+
+export default function (apiKey) {
+  function get (method) {
+    return call(method, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json'
+      }
+    });
+  }
+
+  function post (method, data) {
+    const params = Object.assign({}, { apiKey }, data);
+    const body = JSON.stringify(params);
+
+    return call(method, {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        'Content-Length': body.length
+      },
+      body
+    });
+  }
+
+  return {
+    ENDPOINT,
+    get,
+    post
+  };
+}
diff --git a/js/src/3rdparty/shapeshift/rpc.spec.js b/js/src/3rdparty/shapeshift/rpc.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..8de9e86413fa92b7dfd1d98c32491665fe54775c
--- /dev/null
+++ b/js/src/3rdparty/shapeshift/rpc.spec.js
@@ -0,0 +1,77 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { APIKEY, mockget, mockpost, rpc } from './helpers.spec.js';
+
+describe('shapeshift/rpc', () => {
+  describe('GET', () => {
+    const REPLY = { test: 'this is some result' };
+
+    let scope;
+    let result;
+
+    beforeEach(() => {
+      scope = mockget([{ path: 'test', reply: REPLY }]);
+
+      return rpc
+        .get('test')
+        .then((_result) => {
+          result = _result;
+        });
+    });
+
+    it('does GET', () => {
+      expect(scope.isDone()).to.be.true;
+    });
+
+    it('retrieves the info', () => {
+      expect(result).to.deep.equal(REPLY);
+    });
+  });
+
+  describe('POST', () => {
+    const REPLY = { test: 'this is some result' };
+
+    let scope;
+    let result;
+
+    beforeEach(() => {
+      scope = mockpost([{ path: 'test', reply: REPLY }]);
+
+      return rpc
+        .post('test', { input: 'stuff' })
+        .then((_result) => {
+          result = _result;
+        });
+    });
+
+    it('does POST', () => {
+      expect(scope.isDone()).to.be.true;
+    });
+
+    it('retrieves the info', () => {
+      expect(result).to.deep.equal(REPLY);
+    });
+
+    it('passes the input object', () => {
+      expect(scope.body.test.input).to.equal('stuff');
+    });
+
+    it('passes the apikey specified', () => {
+      expect(scope.body.test.apiKey).to.equal(APIKEY);
+    });
+  });
+});
diff --git a/js/src/3rdparty/shapeshift/shapeshift.js b/js/src/3rdparty/shapeshift/shapeshift.js
new file mode 100644
index 0000000000000000000000000000000000000000..344a448022a75aff985c5ea2bd0283217a0cb5b4
--- /dev/null
+++ b/js/src/3rdparty/shapeshift/shapeshift.js
@@ -0,0 +1,93 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default function (rpc) {
+  const subscriptions = [];
+
+  function getCoins () {
+    return rpc.get('getcoins');
+  }
+
+  function getMarketInfo (pair) {
+    return rpc.get(`marketinfo/${pair}`);
+  }
+
+  function getStatus (depositAddress) {
+    return rpc.get(`txStat/${depositAddress}`);
+  }
+
+  function shift (toAddress, returnAddress, pair) {
+    return rpc.post('shift', {
+      withdrawal: toAddress,
+      pair: pair,
+      returnAddress: returnAddress
+    });
+  }
+
+  function subscribe (depositAddress, callback) {
+    const idx = subscriptions.length;
+
+    subscriptions.push({
+      depositAddress,
+      callback,
+      idx
+    });
+  }
+
+  function _getSubscriptionStatus (subscription) {
+    if (!subscription) {
+      return;
+    }
+
+    getStatus(subscription.depositAddress)
+      .then((result) => {
+        switch (result.status) {
+          case 'no_deposits':
+          case 'received':
+            subscription.callback(null, result);
+            return;
+
+          case 'complete':
+            subscription.callback(null, result);
+            subscriptions[subscription.idx] = null;
+            return;
+
+          case 'failed':
+            subscription.callback({
+              message: status.error,
+              fatal: true
+            });
+            subscriptions[subscription.idx] = null;
+            return;
+        }
+      })
+      .catch(subscription.callback);
+  }
+
+  function _pollStatus () {
+    subscriptions.forEach(_getSubscriptionStatus);
+  }
+
+  setInterval(_pollStatus, 2000);
+
+  return {
+    getCoins,
+    getMarketInfo,
+    getStatus,
+    shift,
+    subscribe
+  };
+}
diff --git a/js/src/3rdparty/shapeshift/shapeshift.spec.js b/js/src/3rdparty/shapeshift/shapeshift.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..36b1506a271b3141af0f8349885697367c77614f
--- /dev/null
+++ b/js/src/3rdparty/shapeshift/shapeshift.spec.js
@@ -0,0 +1,124 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { mockget, mockpost, shapeshift } from './helpers.spec.js';
+
+describe('shapeshift/calls', () => {
+  describe('getCoins', () => {
+    const REPLY = {
+      BTC: {
+        name: 'Bitcoin',
+        symbol: 'BTC',
+        image: 'https://shapeshift.io/images/coins/bitcoin.png',
+        status: 'available'
+      },
+      ETH: {
+        name: 'Ether',
+        symbol: 'ETH',
+        image: 'https://shapeshift.io/images/coins/ether.png',
+        status: 'available'
+      }
+    };
+
+    let scope;
+
+    before(() => {
+      scope = mockget([{ path: 'getcoins', reply: REPLY }]);
+
+      return shapeshift.getCoins();
+    });
+
+    it('makes the call', () => {
+      expect(scope.isDone()).to.be.ok;
+    });
+  });
+
+  describe('getMarketInfo', () => {
+    const REPLY = {
+      pair: 'btc_ltc',
+      rate: 128.17959917,
+      minerFee: 0.003,
+      limit: 0,
+      minimum: 0.00004632
+    };
+
+    let scope;
+
+    before(() => {
+      scope = mockget([{ path: 'marketinfo/btc_ltc', reply: REPLY }]);
+
+      return shapeshift.getMarketInfo('btc_ltc');
+    });
+
+    it('makes the call', () => {
+      expect(scope.isDone()).to.be.ok;
+    });
+  });
+
+  describe('getStatus', () => {
+    const REPLY = {
+      status: '0x123',
+      address: '0x123'
+    };
+
+    let scope;
+
+    before(() => {
+      scope = mockget([{ path: 'txStat/0x123', reply: REPLY }]);
+
+      return shapeshift.getStatus('0x123');
+    });
+
+    it('makes the call', () => {
+      expect(scope.isDone()).to.be.ok;
+    });
+  });
+
+  describe('shift', () => {
+    const REPLY = {
+      deposit: '1BTC',
+      depositType: 'btc',
+      withdrawal: '0x456',
+      withdrawalType: 'eth'
+    };
+
+    let scope;
+
+    before(() => {
+      scope = mockpost([{ path: 'shift', reply: REPLY }]);
+
+      return shapeshift.shift('0x456', '1BTC', 'btc_eth');
+    });
+
+    it('makes the call', () => {
+      expect(scope.isDone()).to.be.ok;
+    });
+
+    describe('body', () => {
+      it('has withdrawal set', () => {
+        expect(scope.body.shift.withdrawal).to.equal('0x456');
+      });
+
+      it('has returnAddress set', () => {
+        expect(scope.body.shift.returnAddress).to.equal('1BTC');
+      });
+
+      it('has pair set', () => {
+        expect(scope.body.shift.pair).to.equal('btc_eth');
+      });
+    });
+  });
+});
diff --git a/js/src/abi/README.md b/js/src/abi/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..6ad6098593b2edf503f8b275caf56e37c4d3cc8b
--- /dev/null
+++ b/js/src/abi/README.md
@@ -0,0 +1,32 @@
+# ethabi-js
+
+A very early, very POC-type port of [https://github.com/ethcore/ethabi](https://github.com/ethcore/ethabi) to JavaScript
+
+[![Build Status](https://travis-ci.org/jacogr/ethabi-js.svg?branch=master)](https://travis-ci.org/jacogr/ethabi-js)
+[![Coverage Status](https://coveralls.io/repos/github/jacogr/ethabi-js/badge.svg?branch=master)](https://coveralls.io/github/jacogr/ethabi-js?branch=master)
+[![Dependency Status](https://david-dm.org/jacogr/ethabi-js.svg)](https://david-dm.org/jacogr/ethabi-js)
+[![devDependency Status](https://david-dm.org/jacogr/ethabi-js/dev-status.svg)](https://david-dm.org/jacogr/ethabi-js#info=devDependencies)
+
+## contributing
+
+Clone the repo and install dependencies via `npm install`. Tests can be executed via
+
+- `npm run testOnce` (100% covered unit tests)
+
+## installation
+
+Install the package with `npm install --save ethabi-js` from the [npm registry ethabi-js](https://www.npmjs.com/package/ethabi-js)
+
+
+## implementation
+### approach
+
+- this version tries to stay as close to the original Rust version in intent, function names & purpose
+- it is a basic port of the Rust version, relying on effectively the same test-suite (expanded where deemed appropriate)
+- it is meant as a library to be used in other projects, i.e. [ethapi-js](https://www.npmjs.com/package/ethapi-js)
+
+### differences to original Rust version
+
+- internally the library operates on string binary representations as opposed to Vector bytes, lengths are therefore 64 bytes as opposed to 32 bytes
+- function names are adapted from the Rust standard snake_case to the JavaScript standard camelCase
+- due to the initial library focus, the cli component (as implemented by the original) is not supported nor mplemented
diff --git a/js/src/abi/abi.js b/js/src/abi/abi.js
new file mode 100644
index 0000000000000000000000000000000000000000..cdf3b1f63958eddbdbb56baff38266f24e983dfa
--- /dev/null
+++ b/js/src/abi/abi.js
@@ -0,0 +1,20 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Interface from './spec/interface';
+
+export default class Abi extends Interface {
+}
diff --git a/js/src/abi/decoder/bytesTaken.js b/js/src/abi/decoder/bytesTaken.js
new file mode 100644
index 0000000000000000000000000000000000000000..49b443d2137927c8e642e889573b82f768d82a0a
--- /dev/null
+++ b/js/src/abi/decoder/bytesTaken.js
@@ -0,0 +1,30 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default class BytesTaken {
+  constructor (bytes, newOffset) {
+    this._bytes = bytes;
+    this._newOffset = newOffset;
+  }
+
+  get bytes () {
+    return this._bytes;
+  }
+
+  get newOffset () {
+    return this._newOffset;
+  }
+}
diff --git a/js/src/abi/decoder/bytesTaken.spec.js b/js/src/abi/decoder/bytesTaken.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..65bb9e1b6f17db950033ac3d7006630d62ab26e4
--- /dev/null
+++ b/js/src/abi/decoder/bytesTaken.spec.js
@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BytesTaken from './bytesTaken';
+
+describe('abi/decoder/BytesTaken', () => {
+  describe('constructor', () => {
+    it('sets the bytes of the object', () => {
+      expect((new BytesTaken(1, 2)).bytes).to.equal(1);
+    });
+
+    it('sets the newOffset of the object', () => {
+      expect((new BytesTaken(3, 4)).newOffset).to.equal(4);
+    });
+  });
+});
diff --git a/js/src/abi/decoder/decodeResult.js b/js/src/abi/decoder/decodeResult.js
new file mode 100644
index 0000000000000000000000000000000000000000..8595642dfb995899dfac131bb4826228bea93d98
--- /dev/null
+++ b/js/src/abi/decoder/decodeResult.js
@@ -0,0 +1,30 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default class DecodeResult {
+  constructor (token, newOffset) {
+    this._token = token;
+    this._newOffset = newOffset;
+  }
+
+  get token () {
+    return this._token;
+  }
+
+  get newOffset () {
+    return this._newOffset;
+  }
+}
diff --git a/js/src/abi/decoder/decodeResult.spec.js b/js/src/abi/decoder/decodeResult.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..892836d07aadab78f6630537d7327f7050211920
--- /dev/null
+++ b/js/src/abi/decoder/decodeResult.spec.js
@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import DecodeResult from './decodeResult';
+
+describe('abi/decoder/DecodeResult', () => {
+  describe('constructor', () => {
+    it('sets the token of the object', () => {
+      expect((new DecodeResult('token', 2)).token).to.equal('token');
+    });
+
+    it('sets the newOffset of the object', () => {
+      expect((new DecodeResult('baz', 4)).newOffset).to.equal(4);
+    });
+  });
+});
diff --git a/js/src/abi/decoder/decoder.js b/js/src/abi/decoder/decoder.js
new file mode 100644
index 0000000000000000000000000000000000000000..0d218312220249222895a59f79841a542b63d0a8
--- /dev/null
+++ b/js/src/abi/decoder/decoder.js
@@ -0,0 +1,145 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import utf8 from 'utf8';
+
+import Token from '../token/token';
+import BytesTaken from './bytesTaken';
+import DecodeResult from './decodeResult';
+import ParamType from '../spec/paramType/paramType';
+import { sliceData } from '../util/slice';
+import { asAddress, asBool, asI32, asU32 } from '../util/sliceAs';
+import { isArray, isInstanceOf } from '../util/types';
+
+const NULL = '0000000000000000000000000000000000000000000000000000000000000000';
+
+export default class Decoder {
+  static decode (params, data) {
+    if (!isArray(params)) {
+      throw new Error('Parameters should be array of ParamType');
+    }
+
+    const slices = sliceData(data);
+    let offset = 0;
+
+    return params.map((param) => {
+      const result = Decoder.decodeParam(param, slices, offset);
+      offset = result.newOffset;
+      return result.token;
+    });
+  }
+
+  static peek (slices, position) {
+    if (!slices || !slices[position]) {
+      return NULL;
+    }
+
+    return slices[position];
+  }
+
+  static takeBytes (slices, position, length) {
+    const slicesLength = Math.floor((length + 31) / 32);
+    let bytesStr = '';
+
+    for (let idx = 0; idx < slicesLength; idx++) {
+      bytesStr = `${bytesStr}${Decoder.peek(slices, position + idx)}`;
+    }
+
+    const bytes = (bytesStr.substr(0, length * 2).match(/.{1,2}/g) || []).map((code) => parseInt(code, 16));
+
+    return new BytesTaken(bytes, position + slicesLength);
+  }
+
+  static decodeParam (param, slices, offset) {
+    if (!isInstanceOf(param, ParamType)) {
+      throw new Error('param should be instanceof ParamType');
+    }
+
+    const tokens = [];
+    let taken;
+    let lengthOffset;
+    let length;
+    let newOffset;
+
+    switch (param.type) {
+      case 'address':
+        return new DecodeResult(new Token(param.type, asAddress(Decoder.peek(slices, offset))), offset + 1);
+
+      case 'bool':
+        return new DecodeResult(new Token(param.type, asBool(Decoder.peek(slices, offset))), offset + 1);
+
+      case 'int':
+        return new DecodeResult(new Token(param.type, asI32(Decoder.peek(slices, offset))), offset + 1);
+
+      case 'uint':
+        return new DecodeResult(new Token(param.type, asU32(Decoder.peek(slices, offset))), offset + 1);
+
+      case 'fixedBytes':
+        taken = Decoder.takeBytes(slices, offset, param.length);
+
+        return new DecodeResult(new Token(param.type, taken.bytes), taken.newOffset);
+
+      case 'bytes':
+        lengthOffset = asU32(Decoder.peek(slices, offset)).div(32).toNumber();
+        length = asU32(Decoder.peek(slices, lengthOffset)).toNumber();
+        taken = Decoder.takeBytes(slices, lengthOffset + 1, length);
+
+        return new DecodeResult(new Token(param.type, taken.bytes), offset + 1);
+
+      case 'string':
+        if (param.indexed) {
+          taken = Decoder.takeBytes(slices, offset, 32);
+
+          return new DecodeResult(new Token('fixedBytes', taken.bytes), offset + 1);
+        }
+
+        lengthOffset = asU32(Decoder.peek(slices, offset)).div(32).toNumber();
+        length = asU32(Decoder.peek(slices, lengthOffset)).toNumber();
+        taken = Decoder.takeBytes(slices, lengthOffset + 1, length);
+
+        const str = taken.bytes.map((code) => String.fromCharCode(code)).join('');
+
+        return new DecodeResult(new Token(param.type, utf8.decode(str)), offset + 1);
+
+      case 'array':
+        lengthOffset = asU32(Decoder.peek(slices, offset)).div(32).toNumber();
+        length = asU32(Decoder.peek(slices, lengthOffset)).toNumber();
+        newOffset = lengthOffset + 1;
+
+        for (let idx = 0; idx < length; idx++) {
+          const result = Decoder.decodeParam(param.subtype, slices, newOffset);
+          newOffset = result.newOffset;
+          tokens.push(result.token);
+        }
+
+        return new DecodeResult(new Token(param.type, tokens), offset + 1);
+
+      case 'fixedArray':
+        newOffset = offset;
+
+        for (let idx = 0; idx < param.length; idx++) {
+          const result = Decoder.decodeParam(param.subtype, slices, newOffset);
+          newOffset = result.newOffset;
+          tokens.push(result.token);
+        }
+
+        return new DecodeResult(new Token(param.type, tokens), newOffset);
+
+      default:
+        throw new Error(`Invalid param type ${param.type} in decodeParam`);
+    }
+  }
+}
diff --git a/js/src/abi/decoder/decoder.spec.js b/js/src/abi/decoder/decoder.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..eeaf716c8949d6332abd6383bd928b209b35f31c
--- /dev/null
+++ b/js/src/abi/decoder/decoder.spec.js
@@ -0,0 +1,310 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+
+import Decoder from './decoder';
+import ParamType from '../spec/paramType';
+import Token from '../token';
+import { padU32 } from '../util/pad';
+
+describe('abi/decoder/Decoder', () => {
+  const stringToBytes = function (str) {
+    return str.match(/.{1,2}/g).map((code) => parseInt(code, 16));
+  };
+
+  const address1 = '0000000000000000000000001111111111111111111111111111111111111111';
+  const address2 = '0000000000000000000000002222222222222222222222222222222222222222';
+  const address3 = '0000000000000000000000003333333333333333333333333333333333333333';
+  const address4 = '0000000000000000000000004444444444444444444444444444444444444444';
+  const bool1 = '0000000000000000000000000000000000000000000000000000000000000001';
+  const bytes1 = '1234000000000000000000000000000000000000000000000000000000000000';
+  const bytes2 = '1000000000000000000000000000000000000000000000000000000000000000';
+  const bytes3 = '10000000000000000000000000000000000000000000000000000000000002';
+  const bytes4 = '0010000000000000000000000000000000000000000000000000000000000002';
+  const int1 = '0111111111111111111111111111111111111111111111111111111111111111';
+  const intn = 'ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff85';
+  const string1 = '6761766f66796f726b0000000000000000000000000000000000000000000000';
+  const tokenAddress1 = new Token('address', `0x${address1.slice(-40)}`);
+  const tokenAddress2 = new Token('address', `0x${address2.slice(-40)}`);
+  const tokenAddress3 = new Token('address', `0x${address3.slice(-40)}`);
+  const tokenAddress4 = new Token('address', `0x${address4.slice(-40)}`);
+  const tokenBool1 = new Token('bool', true);
+  const tokenFixedBytes1 = new Token('fixedBytes', [0x12, 0x34]);
+  const tokenBytes1 = new Token('bytes', [0x12, 0x34]);
+  const tokenBytes2 = new Token('bytes', stringToBytes(bytes2).concat(stringToBytes(bytes2)));
+  const tokenBytes3 = new Token('bytes', stringToBytes(bytes3));
+  const tokenBytes4 = new Token('bytes', stringToBytes(bytes4));
+  const tokenInt1 = new Token('int', new BigNumber(int1, 16));
+  const tokenIntn = new Token('int', new BigNumber(-123));
+  const tokenUint1 = new Token('uint', new BigNumber(int1, 16));
+  const tokenUintn = new Token('uint', new BigNumber(intn, 16));
+  const tokenString1 = new Token('string', 'gavofyork');
+  const slices = [ address1, address2, address3, address4 ];
+
+  describe('peek', () => {
+    it('returns the slice at the correct position', () => {
+      expect(Decoder.peek(slices, 1)).to.equal(slices[1]);
+    });
+
+    it('returns empty on invalid slices', () => {
+      expect(Decoder.peek(null, 4)).to.equal('0000000000000000000000000000000000000000000000000000000000000000');
+    });
+  });
+
+  describe('takeBytes', () => {
+    it('returns a single slice', () => {
+      expect(Decoder.takeBytes(slices, 0, 32).bytes).to.deep.equal(stringToBytes(slices[0]));
+    });
+
+    it('returns a single partial slice', () => {
+      expect(Decoder.takeBytes(slices, 0, 20).bytes).to.deep.equal(stringToBytes(slices[0].substr(0, 40)));
+    });
+
+    it('returns multiple slices', () => {
+      expect(Decoder.takeBytes(slices, 0, 64).bytes).to.deep.equal(stringToBytes(`${slices[0]}${slices[1]}`));
+    });
+
+    it('returns a single offset slice', () => {
+      expect(Decoder.takeBytes(slices, 1, 32).bytes).to.deep.equal(stringToBytes(slices[1]));
+    });
+
+    it('returns multiple offset slices', () => {
+      expect(Decoder.takeBytes(slices, 1, 64).bytes).to.deep.equal(stringToBytes(`${slices[1]}${slices[2]}`));
+    });
+
+    it('returns the requires length from slices', () => {
+      expect(
+        Decoder.takeBytes(slices, 1, 75).bytes
+      ).to.deep.equal(stringToBytes(`${slices[1]}${slices[2]}${slices[3]}`.substr(0, 150)));
+    });
+  });
+
+  describe('decodeParam', () => {
+    it('throws an error on non ParamType param', () => {
+      expect(() => Decoder.decodeParam({})).to.throw(/ParamType/);
+    });
+
+    it('throws an error on invalid param type', () => {
+      const pt = new ParamType('address');
+      pt._type = 'noMatch';
+
+      expect(() => Decoder.decodeParam(pt)).to.throw(/noMatch/);
+    });
+
+    it('decodes an address', () => {
+      expect(
+        Decoder.decodeParam(new ParamType('address'), [address1], 0).token
+      ).to.deep.equal(tokenAddress1);
+    });
+
+    it('decodes a bool', () => {
+      expect(
+        Decoder.decodeParam(new ParamType('bool'), [bool1], 0).token
+      ).to.deep.equal(tokenBool1);
+    });
+
+    it('decodes an int', () => {
+      expect(
+        Decoder.decodeParam(new ParamType('int'), [int1], 0).token
+      ).to.deep.equal(tokenInt1);
+    });
+
+    it('decodes a negative int', () => {
+      expect(
+        Decoder.decodeParam(new ParamType('int'), [intn], 0).token
+      ).to.deep.equal(tokenIntn);
+    });
+
+    it('decodes an uint', () => {
+      expect(
+        Decoder.decodeParam(new ParamType('uint'), [int1], 0).token
+      ).to.deep.equal(tokenUint1);
+    });
+
+    it('decodes an uint (negative as int)', () => {
+      expect(
+        Decoder.decodeParam(new ParamType('uint'), [intn], 0).token
+      ).to.deep.equal(tokenUintn);
+    });
+
+    it('decodes fixedBytes', () => {
+      expect(
+        Decoder.decodeParam(new ParamType('fixedBytes', null, 2), [bytes1], 0).token
+      ).to.deep.equal(tokenFixedBytes1);
+    });
+
+    it('decodes bytes', () => {
+      expect(
+        Decoder.decodeParam(new ParamType('bytes'), [padU32(0x20), padU32(2), bytes1], 0).token
+      ).to.deep.equal(tokenBytes1);
+    });
+
+    it('decodes string', () => {
+      expect(
+        Decoder.decodeParam(new ParamType('string'), [padU32(0x20), padU32(9), string1], 0).token
+      ).to.deep.equal(tokenString1);
+    });
+
+    it('decodes string (indexed)', () => {
+      expect(
+        Decoder.decodeParam(new ParamType('string', null, 0, true), [bytes1], 0)
+      ).to.deep.equal(Decoder.decodeParam(new ParamType('fixedBytes', null, 32, true), [bytes1], 0));
+    });
+  });
+
+  describe('decode', () => {
+    it('throws an error on invalid params', () => {
+      expect(() => Decoder.decode(null, '123')).to.throw(/array/);
+    });
+
+    describe('address', () => {
+      it('decodes an address', () => {
+        expect(
+          Decoder.decode(
+            [new ParamType('address')],
+            `${address1}`
+          )
+        ).to.deep.equal([tokenAddress1]);
+      });
+
+      it('decodes 2 addresses', () => {
+        expect(
+          Decoder.decode(
+            [new ParamType('address'), new ParamType('address')],
+            `${address1}${address2}`
+          )
+        ).to.deep.equal([tokenAddress1, tokenAddress2]);
+      });
+
+      it('decodes a fixedArray of addresses', () => {
+        expect(
+          Decoder.decode(
+            [new ParamType('fixedArray', new ParamType('address'), 2)],
+            `${address1}${address2}`
+          )
+        ).to.deep.equal([new Token('fixedArray', [tokenAddress1, tokenAddress2])]);
+      });
+
+      it('decodes a dynamic array of addresses', () => {
+        expect(
+          Decoder.decode(
+            [new ParamType('array', new ParamType('address'))],
+            `${padU32(0x20)}${padU32(2)}${address1}${address2}`
+          )
+        ).to.deep.equal([new Token('array', [tokenAddress1, tokenAddress2])]);
+      });
+
+      it('decodes a dynamic array of fixed arrays', () => {
+        expect(
+          Decoder.decode(
+            [new ParamType('array', new ParamType('fixedArray', new ParamType('address'), 2))],
+            `${padU32(0x20)}${padU32(2)}${address1}${address2}${address3}${address4}`
+          )
+        ).to.deep.equal([
+          new Token('array', [
+            new Token('fixedArray', [tokenAddress1, tokenAddress2]),
+            new Token('fixedArray', [tokenAddress3, tokenAddress4])
+          ])
+        ]);
+      });
+    });
+
+    describe('int', () => {
+      it('decodes an int', () => {
+        expect(
+          Decoder.decode(
+            [new ParamType('int')],
+            `${int1}`
+          )
+        ).to.deep.equal([tokenInt1]);
+      });
+    });
+
+    describe('uint', () => {
+      it('decodes an uint', () => {
+        expect(
+          Decoder.decode(
+            [new ParamType('uint')],
+            `${int1}`
+          )
+        ).to.deep.equal([tokenUint1]);
+      });
+    });
+
+    describe('fixedBytes', () => {
+      it('decodes fixedBytes', () => {
+        expect(
+          Decoder.decode(
+            [new ParamType('fixedBytes', null, 2)],
+            `${bytes1}`
+          )
+        ).to.deep.equal([tokenFixedBytes1]);
+      });
+    });
+
+    describe('bytes', () => {
+      it('decodes bytes', () => {
+        expect(
+          Decoder.decode(
+            [new ParamType('bytes')],
+            `${padU32(0x20)}${padU32(2)}${bytes1}`
+          )
+        ).to.deep.equal([tokenBytes1]);
+      });
+
+      it('decodes bytes sequence', () => {
+        expect(
+          Decoder.decode(
+            [new ParamType('bytes')],
+            `${padU32(0x20)}${padU32(0x40)}${bytes2}${bytes2}`
+          )
+        ).to.deep.equal([tokenBytes2]);
+      });
+
+      it('decodes bytes seuence (2)', () => {
+        expect(
+          Decoder.decode(
+            [new ParamType('bytes'), new ParamType('bytes')],
+            `${padU32(0x40)}${padU32(0x80)}${padU32(0x1f)}${bytes3}00${padU32(0x20)}${bytes4}`
+          )
+        ).to.deep.equal([tokenBytes3, tokenBytes4]);
+      });
+    });
+
+    describe('bool', () => {
+      it('decodes a single bool', () => {
+        expect(
+          Decoder.decode(
+            [new ParamType('bool')],
+            bool1
+          )
+        ).to.deep.equal([tokenBool1]);
+      });
+    });
+
+    describe('string', () => {
+      it('decodes a string', () => {
+        expect(
+          Decoder.decode(
+            [new ParamType('string')],
+            `${padU32(0x20)}${padU32(9)}${string1}`
+          )
+        ).to.deep.equal([tokenString1]);
+      });
+    });
+  });
+});
diff --git a/js/src/abi/decoder/index.js b/js/src/abi/decoder/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f9839c10d8af76e13bb5913f500c2deeafa2ce81
--- /dev/null
+++ b/js/src/abi/decoder/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './decoder';
diff --git a/js/src/abi/encoder/encoder.js b/js/src/abi/encoder/encoder.js
new file mode 100644
index 0000000000000000000000000000000000000000..bb3a17d264ee7e863762d3b4152e52a4ba511512
--- /dev/null
+++ b/js/src/abi/encoder/encoder.js
@@ -0,0 +1,72 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { padAddress, padBool, padBytes, padFixedBytes, padU32, padString } from '../util/pad';
+import Mediate from './mediate';
+import Token from '../token/token';
+import { isArray, isInstanceOf } from '../util/types';
+
+export default class Encoder {
+  static encode (tokens) {
+    if (!isArray(tokens)) {
+      throw new Error('tokens should be array of Token');
+    }
+
+    const mediates = tokens.map((token) => Encoder.encodeToken(token));
+    const inits = mediates
+      .map((mediate, idx) => mediate.init(Mediate.offsetFor(mediates, idx)))
+      .join('');
+    const closings = mediates
+      .map((mediate, idx) => mediate.closing(Mediate.offsetFor(mediates, idx)))
+      .join('');
+
+    return `${inits}${closings}`;
+  }
+
+  static encodeToken (token) {
+    if (!isInstanceOf(token, Token)) {
+      throw new Error('token should be instanceof Token');
+    }
+
+    switch (token.type) {
+      case 'address':
+        return new Mediate('raw', padAddress(token.value));
+
+      case 'int':
+      case 'uint':
+        return new Mediate('raw', padU32(token.value));
+
+      case 'bool':
+        return new Mediate('raw', padBool(token.value));
+
+      case 'fixedBytes':
+        return new Mediate('raw', padFixedBytes(token.value));
+
+      case 'bytes':
+        return new Mediate('prefixed', padBytes(token.value));
+
+      case 'string':
+        return new Mediate('prefixed', padString(token.value));
+
+      case 'fixedArray':
+      case 'array':
+        return new Mediate(token.type, token.value.map((token) => Encoder.encodeToken(token)));
+
+      default:
+        throw new Error(`Invalid token type ${token.type} in encodeToken`);
+    }
+  }
+}
diff --git a/js/src/abi/encoder/encoder.spec.js b/js/src/abi/encoder/encoder.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..008861602d1b244e86e246946b50be38af16f1ab
--- /dev/null
+++ b/js/src/abi/encoder/encoder.spec.js
@@ -0,0 +1,290 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Encoder from './encoder';
+import Token from '../token';
+import { padAddress, padFixedBytes, padU32 } from '../util/pad';
+
+describe('abi/encoder/Encoder', () => {
+  describe('encodeToken', () => {
+    it('requires token as Token', () => {
+      expect(() => Encoder.encodeToken()).to.throw(/Token/);
+    });
+
+    it('encodes address tokens in Mediate(raw)', () => {
+      const mediate = Encoder.encodeToken(new Token('address', '123'));
+
+      expect(mediate.type).to.equal('raw');
+      expect(mediate.value).to.be.ok;
+    });
+
+    it('encodes bool tokens in Mediate(raw)', () => {
+      const mediatet = Encoder.encodeToken(new Token('bool', true));
+      const mediatef = Encoder.encodeToken(new Token('bool', false));
+
+      expect(mediatet.type).to.equal('raw');
+      expect(mediatet.value).to.be.ok;
+
+      expect(mediatef.type).to.equal('raw');
+      expect(mediatef.value).to.be.ok;
+    });
+
+    it('encodes int tokens in Mediate(raw)', () => {
+      const mediate = Encoder.encodeToken(new Token('int', '123'));
+
+      expect(mediate.type).to.equal('raw');
+      expect(mediate.value).to.be.ok;
+    });
+
+    it('encodes uint tokens in Mediate(raw)', () => {
+      const mediate = Encoder.encodeToken(new Token('uint', '123'));
+
+      expect(mediate.type).to.equal('raw');
+      expect(mediate.value).to.be.ok;
+    });
+
+    it('encodes fixedBytes tokens in Mediate(raw)', () => {
+      const mediate = Encoder.encodeToken(new Token('fixedBytes', '123'));
+
+      expect(mediate.type).to.equal('raw');
+      expect(mediate.value).to.be.ok;
+    });
+
+    it('encodes bytes tokens in Mediate(prefixed)', () => {
+      const mediate = Encoder.encodeToken(new Token('bytes', '123'));
+
+      expect(mediate.type).to.equal('prefixed');
+      expect(mediate.value).to.be.ok;
+    });
+
+    it('encodes string tokens in Mediate(prefixed)', () => {
+      const mediate = Encoder.encodeToken(new Token('string', '123'));
+
+      expect(mediate.type).to.equal('prefixed');
+      expect(mediate.value).to.be.ok;
+    });
+
+    it('encodes fixedArray tokens in Mediate(fixedArray)', () => {
+      const mediate = Encoder.encodeToken(new Token('fixedArray', [new Token('uint', '123')]));
+
+      expect(mediate.type).to.equal('fixedArray');
+      expect(mediate.value).to.be.ok;
+    });
+
+    it('encodes array tokens in Mediate(array)', () => {
+      const mediate = Encoder.encodeToken(new Token('array', [new Token('uint', '123')]));
+
+      expect(mediate.type).to.equal('array');
+      expect(mediate.value).to.be.ok;
+    });
+
+    it('throws an Error on invalid tokens', () => {
+      const token = new Token('address');
+      token._type = 'noMatch';
+
+      expect(() => Encoder.encodeToken(token)).to.throw(/noMatch/);
+    });
+  });
+
+  describe('encode', () => {
+    it('requires tokens array', () => {
+      expect(() => Encoder.encode()).to.throw(/array/);
+    });
+
+    describe('addresses', () => {
+      const address1 = '1111111111111111111111111111111111111111';
+      const address2 = '2222222222222222222222222222222222222222';
+      const address3 = '3333333333333333333333333333333333333333';
+      const address4 = '4444444444444444444444444444444444444444';
+      const encAddress1 = padAddress(address1);
+      const encAddress2 = padAddress(address2);
+      const encAddress3 = padAddress(address3);
+      const encAddress4 = padAddress(address4);
+      const tokenAddress1 = new Token('address', address1);
+      const tokenAddress2 = new Token('address', address2);
+      const tokenAddress3 = new Token('address', address3);
+      const tokenAddress4 = new Token('address', address4);
+
+      it('encodes an address', () => {
+        const token = tokenAddress1;
+
+        expect(Encoder.encode([token])).to.equal(encAddress1);
+      });
+
+      it('encodes an array of addresses', () => {
+        const expected = `${padU32(0x20)}${padU32(2)}${encAddress1}${encAddress2}`;
+        const token = new Token('array', [tokenAddress1, tokenAddress2]);
+
+        expect(Encoder.encode([token])).to.equal(expected);
+      });
+
+      it('encodes an fixedArray of addresses', () => {
+        const expected = `${encAddress1}${encAddress2}`;
+        const token = new Token('fixedArray', [tokenAddress1, tokenAddress2]);
+
+        expect(Encoder.encode([token])).to.equal(expected);
+      });
+
+      it('encodes two addresses', () => {
+        const expected = `${encAddress1}${encAddress2}`;
+        const tokens = [tokenAddress1, tokenAddress2];
+
+        expect(Encoder.encode(tokens)).to.equal(expected);
+      });
+
+      it('encodes fixed array of dynamic array addresses', () => {
+        const tokens1 = new Token('array', [tokenAddress1, tokenAddress2]);
+        const tokens2 = new Token('array', [tokenAddress3, tokenAddress4]);
+        const fixed = new Token('fixedArray', [tokens1, tokens2]);
+        const expected = `${padU32(0x40)}${padU32(0xa0)}${padU32(2)}${encAddress1}${encAddress2}${padU32(2)}${encAddress3}${encAddress4}`;
+
+        expect(Encoder.encode([fixed])).to.equal(expected);
+      });
+
+      it('encodes dynamic array of fixed array addresses', () => {
+        const tokens1 = new Token('fixedArray', [tokenAddress1, tokenAddress2]);
+        const tokens2 = new Token('fixedArray', [tokenAddress3, tokenAddress4]);
+        const dynamic = new Token('array', [tokens1, tokens2]);
+        const expected = `${padU32(0x20)}${padU32(2)}${encAddress1}${encAddress2}${encAddress3}${encAddress4}`;
+
+        expect(Encoder.encode([dynamic])).to.equal(expected);
+      });
+
+      it('encodes dynamic array of dynamic array addresses', () => {
+        const tokens1 = new Token('array', [tokenAddress1]);
+        const tokens2 = new Token('array', [tokenAddress2]);
+        const dynamic = new Token('array', [tokens1, tokens2]);
+        const expected = `${padU32(0x20)}${padU32(2)}${padU32(0x80)}${padU32(0xc0)}${padU32(1)}${encAddress1}${padU32(1)}${encAddress2}`;
+
+        expect(Encoder.encode([dynamic])).to.equal(expected);
+      });
+
+      it('encodes dynamic array of dynamic array addresses (2)', () => {
+        const tokens1 = new Token('array', [tokenAddress1, tokenAddress2]);
+        const tokens2 = new Token('array', [tokenAddress3, tokenAddress4]);
+        const dynamic = new Token('array', [tokens1, tokens2]);
+        const expected = `${padU32(0x20)}${padU32(2)}${padU32(0x80)}${padU32(0xe0)}${padU32(2)}${encAddress1}${encAddress2}${padU32(2)}${encAddress3}${encAddress4}`;
+
+        expect(Encoder.encode([dynamic])).to.equal(expected);
+      });
+
+      it('encodes fixed array of fixed array addresses', () => {
+        const tokens1 = new Token('fixedArray', [tokenAddress1, tokenAddress2]);
+        const tokens2 = new Token('fixedArray', [tokenAddress3, tokenAddress4]);
+        const dynamic = new Token('fixedArray', [tokens1, tokens2]);
+        const expected = `${encAddress1}${encAddress2}${encAddress3}${encAddress4}`;
+
+        expect(Encoder.encode([dynamic])).to.equal(expected);
+      });
+    });
+
+    describe('bytes', () => {
+      const bytes1 = '0x1234';
+      const bytes2 = '0x10000000000000000000000000000000000000000000000000000000000002';
+      const bytes3 = '0x1000000000000000000000000000000000000000000000000000000000000000';
+
+      it('encodes fixed bytes', () => {
+        const token = new Token('fixedBytes', bytes1);
+
+        expect(Encoder.encode([token])).to.equal(padFixedBytes(bytes1));
+      });
+
+      it('encodes bytes', () => {
+        const token = new Token('bytes', bytes1);
+
+        expect(Encoder.encode([token])).to.equal(`${padU32(0x20)}${padU32(2)}${padFixedBytes(bytes1)}`);
+      });
+
+      it('encodes bytes (short of boundary)', () => {
+        const token = new Token('bytes', bytes2);
+
+        expect(Encoder.encode([token])).to.equal(`${padU32(0x20)}${padU32(0x1f)}${padFixedBytes(bytes2)}`);
+      });
+
+      it('encodes bytes (two blocks)', () => {
+        const input = `${bytes3}${bytes3.slice(-64)}`;
+        const token = new Token('bytes', input);
+
+        expect(Encoder.encode([token])).to.equal(`${padU32(0x20)}${padU32(0x40)}${padFixedBytes(input)}`);
+      });
+
+      it('encodes two consecutive bytes', () => {
+        const in1 = '0x10000000000000000000000000000000000000000000000000000000000002';
+        const in2 = '0x0010000000000000000000000000000000000000000000000000000000000002';
+        const tokens = [new Token('bytes', in1), new Token('bytes', in2)];
+
+        expect(Encoder.encode(tokens)).to.equal(`${padU32(0x40)}${padU32(0x80)}${padU32(0x1f)}${padFixedBytes(in1)}${padU32(0x20)}${padFixedBytes(in2)}`);
+      });
+    });
+
+    describe('string', () => {
+      it('encodes a string', () => {
+        const string = 'gavofyork';
+        const stringEnc = padFixedBytes('0x6761766f66796f726b');
+        const token = new Token('string', string);
+
+        expect(Encoder.encode([token])).to.equal(`${padU32(0x20)}${padU32(string.length.toString(16))}${stringEnc}`);
+      });
+    });
+
+    describe('uint', () => {
+      it('encodes a uint', () => {
+        const token = new Token('uint', 4);
+
+        expect(Encoder.encode([token])).to.equal(padU32(4));
+      });
+    });
+
+    describe('int', () => {
+      it('encodes a int', () => {
+        const token = new Token('int', 4);
+
+        expect(Encoder.encode([token])).to.equal(padU32(4));
+      });
+    });
+
+    describe('bool', () => {
+      it('encodes a bool (true)', () => {
+        const token = new Token('bool', true);
+
+        expect(Encoder.encode([token])).to.equal(padU32(1));
+      });
+
+      it('encodes a bool (false)', () => {
+        const token = new Token('bool', false);
+
+        expect(Encoder.encode([token])).to.equal(padU32(0));
+      });
+    });
+
+    describe('comprehensive test', () => {
+      it('encodes a complex sequence', () => {
+        const bytes = '0x131a3afc00d1b1e3461b955e53fc866dcf303b3eb9f4c16f89e388930f48134b131a3afc00d1b1e3461b955e53fc866dcf303b3eb9f4c16f89e388930f48134b';
+        const tokens = [new Token('int', 5), new Token('bytes', bytes), new Token('int', 3), new Token('bytes', bytes)];
+
+        expect(Encoder.encode(tokens)).to.equal(`${padU32(5)}${padU32(0x80)}${padU32(3)}${padU32(0xe0)}${padU32(0x40)}${bytes.substr(2)}${padU32(0x40)}${bytes.substr(2)}`);
+      });
+
+      it('encodes a complex sequence (nested)', () => {
+        const array = [new Token('int', 5), new Token('int', 6), new Token('int', 7)];
+        const tokens = [new Token('int', 1), new Token('string', 'gavofyork'), new Token('int', 2), new Token('int', 3), new Token('int', 4), new Token('array', array)];
+        const stringEnc = padFixedBytes('0x6761766f66796f726b');
+
+        expect(Encoder.encode(tokens)).to.equal(`${padU32(1)}${padU32(0xc0)}${padU32(2)}${padU32(3)}${padU32(4)}${padU32(0x100)}${padU32(9)}${stringEnc}${padU32(3)}${padU32(5)}${padU32(6)}${padU32(7)}`);
+      });
+    });
+  });
+});
diff --git a/js/src/abi/encoder/index.js b/js/src/abi/encoder/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e19ff81e6745f016db28decc6d71fbcd69706554
--- /dev/null
+++ b/js/src/abi/encoder/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './encoder';
diff --git a/js/src/abi/encoder/mediate.js b/js/src/abi/encoder/mediate.js
new file mode 100644
index 0000000000000000000000000000000000000000..cb7fce6a75380844392a79d948c8c2777e78354f
--- /dev/null
+++ b/js/src/abi/encoder/mediate.js
@@ -0,0 +1,142 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const TYPES = ['raw', 'prefixed', 'fixedArray', 'array'];
+
+import { padU32 } from '../util/pad';
+
+export default class Mediate {
+  constructor (type, value) {
+    Mediate.validateType(type);
+
+    this._type = type;
+    this._value = value;
+  }
+
+  initLength () {
+    switch (this._type) {
+      case 'raw':
+        return this._value.length / 2;
+
+      case 'array':
+      case 'prefixed':
+        return 32;
+
+      case 'fixedArray':
+        return this._value
+          .reduce((total, mediate) => {
+            return total + mediate.initLength();
+          }, 0);
+    }
+  }
+
+  closingLength () {
+    switch (this._type) {
+      case 'raw':
+        return 0;
+
+      case 'prefixed':
+        return this._value.length / 2;
+
+      case 'array':
+        return this._value
+          .reduce((total, mediate) => {
+            return total + mediate.initLength();
+          }, 32);
+
+      case 'fixedArray':
+        return this._value
+          .reduce((total, mediate) => {
+            return total + mediate.initLength() + mediate.closingLength();
+          }, 0);
+    }
+  }
+
+  init (suffixOffset) {
+    switch (this._type) {
+      case 'raw':
+        return this._value;
+
+      case 'fixedArray':
+        return this._value
+          .map((mediate, idx) => mediate.init(Mediate.offsetFor(this._value, idx)).toString(16))
+          .join('');
+
+      case 'prefixed':
+      case 'array':
+        return padU32(suffixOffset);
+    }
+  }
+
+  closing (offset) {
+    switch (this._type) {
+      case 'raw':
+        return '';
+
+      case 'prefixed':
+        return this._value;
+
+      case 'fixedArray':
+        return this._value
+          .map((mediate, idx) => mediate.closing(Mediate.offsetFor(this._value, idx)).toString(16))
+          .join('');
+
+      case 'array':
+        const prefix = padU32(this._value.length);
+        const inits = this._value
+          .map((mediate, idx) => mediate.init(offset + Mediate.offsetFor(this._value, idx) + 32).toString(16))
+          .join('');
+        const closings = this._value
+          .map((mediate, idx) => mediate.closing(offset + Mediate.offsetFor(this._value, idx)).toString(16))
+          .join('');
+
+        return `${prefix}${inits}${closings}`;
+    }
+  }
+
+  get type () {
+    return this._type;
+  }
+
+  get value () {
+    return this._value;
+  }
+
+  static offsetFor (mediates, position) {
+    if (position < 0 || position >= mediates.length) {
+      throw new Error(`Invalid position ${position} specified for Mediate.offsetFor`);
+    }
+
+    const initLength = mediates
+      .reduce((total, mediate) => {
+        return total + mediate.initLength();
+      }, 0);
+
+    return mediates
+      .slice(0, position)
+      .reduce((total, mediate) => {
+        return total + mediate.closingLength();
+      }, initLength);
+  }
+
+  static validateType (type) {
+    if (TYPES.filter((_type) => type === _type).length) {
+      return true;
+    }
+
+    throw new Error(`Invalid type ${type} received for Mediate.validateType`);
+  }
+}
diff --git a/js/src/abi/encoder/mediate.spec.js b/js/src/abi/encoder/mediate.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..cfd0211f2f933fd9b4e5cac5deb4f25aaafe7bdf
--- /dev/null
+++ b/js/src/abi/encoder/mediate.spec.js
@@ -0,0 +1,105 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Mediate from './mediate';
+
+describe('abi/encoder/Mediate', () => {
+  const LONG15 = '1234567890abcdef000000000000000000000000000000000000000000000000';
+  const DOUBLE15 = `${LONG15}${LONG15}`;
+  const ARRAY = [new Mediate('raw', DOUBLE15), new Mediate('raw', LONG15)];
+
+  describe('validateType', () => {
+    it('validates raw', () => {
+      expect(Mediate.validateType('raw')).to.be.true;
+    });
+
+    it('validates prefixed', () => {
+      expect(Mediate.validateType('prefixed')).to.be.true;
+    });
+
+    it('validates fixedArray', () => {
+      expect(Mediate.validateType('fixedArray')).to.be.true;
+    });
+
+    it('validates array', () => {
+      expect(Mediate.validateType('array')).to.be.true;
+    });
+
+    it('throws an error on invalid types', () => {
+      expect(() => Mediate.validateType('noMatch')).to.throw(/noMatch/);
+    });
+  });
+
+  describe('offsetFor', () => {
+    it('thows an error when offset < 0', () => {
+      expect(() => Mediate.offsetFor([1], -1)).to.throw(/Invalid position/);
+    });
+
+    it('throws an error when offset >= length', () => {
+      expect(() => Mediate.offsetFor([1], 1)).to.throw(/Invalid position/);
+    });
+  });
+
+  describe('constructor', () => {
+    it('throws an error on invalid types', () => {
+      expect(() => new Mediate('noMatch', '1')).to.throw(/noMatch/);
+    });
+
+    it('sets the type of the object', () => {
+      expect((new Mediate('raw', '1')).type).to.equal('raw');
+    });
+
+    it('sets the value of the object', () => {
+      expect((new Mediate('raw', '1')).value).to.equal('1');
+    });
+  });
+
+  describe('initLength', () => {
+    it('returns correct variable byte length for raw', () => {
+      expect(new Mediate('raw', DOUBLE15).initLength()).to.equal(64);
+    });
+
+    it('returns correct fixed byte length for array', () => {
+      expect(new Mediate('array', [1, 2, 3, 4]).initLength()).to.equal(32);
+    });
+
+    it('returns correct fixed byte length for prefixed', () => {
+      expect(new Mediate('prefixed', 0).initLength()).to.equal(32);
+    });
+
+    it('returns correct variable byte length for fixedArray', () => {
+      expect(new Mediate('fixedArray', ARRAY).initLength()).to.equal(96);
+    });
+  });
+
+  describe('closingLength', () => {
+    it('returns 0 byte length for raw', () => {
+      expect(new Mediate('raw', DOUBLE15).closingLength()).to.equal(0);
+    });
+
+    it('returns prefix + size for prefixed', () => {
+      expect(new Mediate('prefixed', DOUBLE15).closingLength()).to.equal(64);
+    });
+
+    it('returns prefix + size for array', () => {
+      expect(new Mediate('array', ARRAY).closingLength()).to.equal(128);
+    });
+
+    it('returns total length for fixedArray', () => {
+      expect(new Mediate('fixedArray', ARRAY).closingLength()).to.equal(96);
+    });
+  });
+});
diff --git a/js/src/abi/index.js b/js/src/abi/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f055a69133e282b5754600adcb8c580c659670d5
--- /dev/null
+++ b/js/src/abi/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './abi';
diff --git a/js/src/abi/spec/constructor.js b/js/src/abi/spec/constructor.js
new file mode 100644
index 0000000000000000000000000000000000000000..89ea99610efb5a8f083954027ffb8b73770895a3
--- /dev/null
+++ b/js/src/abi/spec/constructor.js
@@ -0,0 +1,36 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Encoder from '../encoder/encoder';
+import Param from './param';
+
+export default class Constructor {
+  constructor (abi) {
+    this._inputs = Param.toParams(abi.inputs || []);
+  }
+
+  get inputs () {
+    return this._inputs;
+  }
+
+  inputParamTypes () {
+    return this._inputs.map((input) => input.kind);
+  }
+
+  encodeCall (tokens) {
+    return Encoder.encode(tokens);
+  }
+}
diff --git a/js/src/abi/spec/constructor.spec.js b/js/src/abi/spec/constructor.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..e02f6cf71f150f8f2c4da1e8e0a3e208289c1c99
--- /dev/null
+++ b/js/src/abi/spec/constructor.spec.js
@@ -0,0 +1,52 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Constructor from './constructor';
+import Param from './param';
+import Token from '../token';
+
+describe('abi/spec/Constructor', () => {
+  const inputsArr = [{ name: 'boolin', type: 'bool' }, { name: 'stringin', type: 'string' }];
+  const bool = new Param('boolin', 'bool');
+  const string = new Param('stringin', 'string');
+
+  const inputs = [bool, string];
+  const cr = new Constructor({ inputs: inputsArr });
+
+  describe('constructor', () => {
+    it('stores the inputs as received', () => {
+      expect(cr.inputs).to.deep.equal(inputs);
+    });
+
+    it('matches empty inputs with []', () => {
+      expect(new Constructor({}).inputs).to.deep.equal([]);
+    });
+  });
+
+  describe('inputParamTypes', () => {
+    it('retrieves the input types as received', () => {
+      expect(cr.inputParamTypes()).to.deep.equal([bool.kind, string.kind]);
+    });
+  });
+
+  describe('encodeCall', () => {
+    it('encodes correctly', () => {
+      const result = cr.encodeCall([new Token('bool', true), new Token('string', 'jacogr')]);
+
+      expect(result).to.equal('0000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000066a61636f67720000000000000000000000000000000000000000000000000000');
+    });
+  });
+});
diff --git a/js/src/abi/spec/event/decodedLog.js b/js/src/abi/spec/event/decodedLog.js
new file mode 100644
index 0000000000000000000000000000000000000000..3993b527b57ec876839af58f7a65f3216916128e
--- /dev/null
+++ b/js/src/abi/spec/event/decodedLog.js
@@ -0,0 +1,30 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default class DecodedLog {
+  constructor (params, address) {
+    this._params = params;
+    this._address = address;
+  }
+
+  get address () {
+    return this._address;
+  }
+
+  get params () {
+    return this._params;
+  }
+}
diff --git a/js/src/abi/spec/event/decodedLog.spec.js b/js/src/abi/spec/event/decodedLog.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..e6ed1a022940552ff238982b2e533417dd2e82a8
--- /dev/null
+++ b/js/src/abi/spec/event/decodedLog.spec.js
@@ -0,0 +1,28 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import DecodedLog from './decodedLog';
+
+const log = new DecodedLog('someParams', 'someAddress');
+
+describe('abi/spec/event/DecodedLog', () => {
+  describe('constructor', () => {
+    it('sets internal state', () => {
+      expect(log.params).to.equal('someParams');
+      expect(log.address).to.equal('someAddress');
+    });
+  });
+});
diff --git a/js/src/abi/spec/event/decodedLogParam.js b/js/src/abi/spec/event/decodedLogParam.js
new file mode 100644
index 0000000000000000000000000000000000000000..ed456fcce8b5471414714392f8e92e40fc03fdfe
--- /dev/null
+++ b/js/src/abi/spec/event/decodedLogParam.js
@@ -0,0 +1,45 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import ParamType from '../paramType/paramType';
+import Token from '../../token/token';
+import { isInstanceOf } from '../../util/types';
+
+export default class DecodedLogParam {
+  constructor (name, kind, token) {
+    if (!isInstanceOf(kind, ParamType)) {
+      throw new Error('kind not instanceof ParamType');
+    } else if (!isInstanceOf(token, Token)) {
+      throw new Error('token not instanceof Token');
+    }
+
+    this._name = name;
+    this._kind = kind;
+    this._token = token;
+  }
+
+  get name () {
+    return this._name;
+  }
+
+  get kind () {
+    return this._kind;
+  }
+
+  get token () {
+    return this._token;
+  }
+}
diff --git a/js/src/abi/spec/event/decodedLogParam.spec.js b/js/src/abi/spec/event/decodedLogParam.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..a031282ad87ab00bbe9fe2a08d172b90a1c5e36e
--- /dev/null
+++ b/js/src/abi/spec/event/decodedLogParam.spec.js
@@ -0,0 +1,42 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import DecodedLogParam from './decodedLogParam';
+import ParamType from '../paramType';
+import Token from '../../token';
+
+describe('abi/spec/event/DecodedLogParam', () => {
+  describe('constructor', () => {
+    const pt = new ParamType('bool');
+    const tk = new Token('bool');
+
+    it('disallows kind not instanceof ParamType', () => {
+      expect(() => new DecodedLogParam('test', 'param')).to.throw(/ParamType/);
+    });
+
+    it('disallows token not instanceof Token', () => {
+      expect(() => new DecodedLogParam('test', pt, 'token')).to.throw(/Token/);
+    });
+
+    it('stores all parameters received', () => {
+      const log = new DecodedLogParam('test', pt, tk);
+
+      expect(log.name).to.equal('test');
+      expect(log.kind).to.equal(pt);
+      expect(log.token).to.equal(tk);
+    });
+  });
+});
diff --git a/js/src/abi/spec/event/event.js b/js/src/abi/spec/event/event.js
new file mode 100644
index 0000000000000000000000000000000000000000..f64fe0498b44b1298f56f620708d131c6c910c8e
--- /dev/null
+++ b/js/src/abi/spec/event/event.js
@@ -0,0 +1,113 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Decoder from '../../decoder/decoder';
+import DecodedLog from './decodedLog';
+import DecodedLogParam from './decodedLogParam';
+import EventParam from './eventParam';
+import { asAddress } from '../../util/sliceAs';
+import { eventSignature } from '../../util/signature';
+
+export default class Event {
+  constructor (abi) {
+    this._name = abi.name;
+    this._inputs = EventParam.toEventParams(abi.inputs || []);
+    this._anonymous = !!abi.anonymous;
+
+    const { id, signature } = eventSignature(this._name, this.inputParamTypes());
+    this._id = id;
+    this._signature = signature;
+  }
+
+  get name () {
+    return this._name;
+  }
+
+  get id () {
+    return this._id;
+  }
+
+  get inputs () {
+    return this._inputs;
+  }
+
+  get anonymous () {
+    return this._anonymous;
+  }
+
+  get signature () {
+    return this._signature;
+  }
+
+  inputParamTypes () {
+    return this._inputs.map((input) => input.kind);
+  }
+
+  inputParamNames () {
+    return this._inputs.map((input) => input.name);
+  }
+
+  indexedParams (indexed) {
+    return this._inputs.filter((input) => input.indexed === indexed);
+  }
+
+  decodeLog (topics, data) {
+    const topicParams = this.indexedParams(true);
+    const dataParams = this.indexedParams(false);
+
+    let address;
+    let toSkip;
+
+    if (!this.anonymous) {
+      address = asAddress(topics[0]);
+      toSkip = 1;
+    } else {
+      toSkip = 0;
+    }
+
+    const topicTypes = topicParams.map((param) => param.kind);
+    const flatTopics = topics
+      .filter((topic, idx) => idx >= toSkip)
+      .map((topic) => {
+        return (topic.substr(0, 2) === '0x')
+          ? topic.substr(2)
+          : topic;
+      }).join('');
+    const topicTokens = Decoder.decode(topicTypes, flatTopics);
+
+    if (topicTokens.length !== (topics.length - toSkip)) {
+      throw new Error('Invalid topic data');
+    }
+
+    const dataTypes = dataParams.map((param) => param.kind);
+    const dataTokens = Decoder.decode(dataTypes, data);
+
+    const namedTokens = {};
+
+    topicParams.forEach((param, idx) => {
+      namedTokens[param.name] = topicTokens[idx];
+    });
+    dataParams.forEach((param, idx) => {
+      namedTokens[param.name] = dataTokens[idx];
+    });
+
+    const inputParamTypes = this.inputParamTypes();
+    const decodedParams = this.inputParamNames()
+      .map((name, idx) => new DecodedLogParam(name, inputParamTypes[idx], namedTokens[name]));
+
+    return new DecodedLog(decodedParams, address);
+  }
+}
diff --git a/js/src/abi/spec/event/event.spec.js b/js/src/abi/spec/event/event.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..f7252a9d2d798ae78a0491ab3fc60a4da70726cd
--- /dev/null
+++ b/js/src/abi/spec/event/event.spec.js
@@ -0,0 +1,111 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+
+import Event from './event';
+import EventParam from './eventParam';
+import DecodedLogParam from './decodedLogParam';
+import ParamType from '../paramType';
+import Token from '../../token';
+
+describe('abi/spec/event/Event', () => {
+  const inputArr = [{ name: 'a', type: 'bool' }, { name: 'b', type: 'uint', indexed: true }];
+  const inputs = [new EventParam('a', 'bool', false), new EventParam('b', 'uint', true)];
+  const event = new Event({ name: 'test', inputs: inputArr, anonymous: true });
+
+  describe('constructor', () => {
+    it('stores the parameters as received', () => {
+      expect(event.name).to.equal('test');
+      expect(event.inputs).to.deep.equal(inputs);
+      expect(event.anonymous).to.be.true;
+    });
+
+    it('matches empty inputs with []', () => {
+      expect(new Event({ name: 'test' }).inputs).to.deep.equal([]);
+    });
+
+    it('sets the event signature', () => {
+      expect(new Event({ name: 'baz' }).signature)
+        .to.equal('a7916fac4f538170f7cd12c148552e2cba9fcd72329a2dd5b07a6fa906488ddf');
+    });
+  });
+
+  describe('inputParamTypes', () => {
+    it('returns all the types', () => {
+      expect(event.inputParamTypes()).to.deep.equal([new ParamType('bool'), new ParamType('uint', null, 256, true)]);
+    });
+  });
+
+  describe('inputParamNames', () => {
+    it('returns all the names', () => {
+      expect(event.inputParamNames()).to.deep.equal(['a', 'b']);
+    });
+  });
+
+  describe('indexedParams', () => {
+    it('returns all indexed parameters (indexed)', () => {
+      expect(event.indexedParams(true)).to.deep.equal([inputs[1]]);
+    });
+
+    it('returns all indexed parameters (non-indexed)', () => {
+      expect(event.indexedParams(false)).to.deep.equal([inputs[0]]);
+    });
+  });
+
+  describe('decodeLog', () => {
+    it('decodes an event', () => {
+      const event = new Event({
+        name: 'foo',
+        inputs: [
+          { name: 'a', type: 'int' },
+          { name: 'b', type: 'int', indexed: true },
+          { name: 'c', type: 'address' },
+          { name: 'd', type: 'address', indexed: true }
+        ]
+      });
+      const decoded = event.decodeLog([
+        '0000000000000000000000004444444444444444444444444444444444444444',
+        '0000000000000000000000000000000000000000000000000000000000000002',
+        '0000000000000000000000001111111111111111111111111111111111111111' ],
+        '00000000000000000000000000000000000000000000000000000000000000030000000000000000000000002222222222222222222222222222222222222222');
+
+      expect(decoded.address).to.equal('0x4444444444444444444444444444444444444444');
+      expect(decoded.params).to.deep.equal([
+        new DecodedLogParam('a', new ParamType('int', null, 256), new Token('int', new BigNumber(3))),
+        new DecodedLogParam('b', new ParamType('int', null, 256, true), new Token('int', new BigNumber(2))),
+        new DecodedLogParam('c', new ParamType('address'), new Token('address', '0x2222222222222222222222222222222222222222')),
+        new DecodedLogParam('d', new ParamType('address', null, 0, true), new Token('address', '0x1111111111111111111111111111111111111111'))
+      ]);
+    });
+
+    it('decodes an anonymous event', () => {
+      const event = new Event({ name: 'foo', inputs: [{ name: 'a', type: 'int' }], anonymous: true });
+      const decoded = event.decodeLog([], '0000000000000000000000000000000000000000000000000000000000000003');
+
+      expect(decoded.address).to.not.be.ok;
+      expect(decoded.params).to.deep.equal([
+        new DecodedLogParam('a', new ParamType('int', null, 256), new Token('int', new BigNumber(3)))
+      ]);
+    });
+
+    it('throws on invalid topics', () => {
+      const event = new Event({ name: 'foo', inputs: [{ name: 'a', type: 'int' }], anonymous: true });
+
+      expect(() => event.decodeLog(['0000000000000000000000004444444444444444444444444444444444444444'], '0000000000000000000000000000000000000000000000000000000000000003')).to.throw(/Invalid/);
+    });
+  });
+});
diff --git a/js/src/abi/spec/event/eventParam.js b/js/src/abi/spec/event/eventParam.js
new file mode 100644
index 0000000000000000000000000000000000000000..d8a3b585d8704e3356ac26642bdb740305f76e83
--- /dev/null
+++ b/js/src/abi/spec/event/eventParam.js
@@ -0,0 +1,41 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { toParamType } from '../paramType/format';
+
+export default class EventParam {
+  constructor (name, type, indexed = false) {
+    this._name = name;
+    this._indexed = indexed;
+    this._kind = toParamType(type, indexed);
+  }
+
+  get name () {
+    return this._name;
+  }
+
+  get kind () {
+    return this._kind;
+  }
+
+  get indexed () {
+    return this._indexed;
+  }
+
+  static toEventParams (params) {
+    return params.map((param) => new EventParam(param.name, param.type, param.indexed));
+  }
+}
diff --git a/js/src/abi/spec/event/eventParam.spec.js b/js/src/abi/spec/event/eventParam.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..6858e980017f282f88a4d0b3a672e526e5c5fabc
--- /dev/null
+++ b/js/src/abi/spec/event/eventParam.spec.js
@@ -0,0 +1,43 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import EventParam from './eventParam';
+
+describe('abi/spec/event/EventParam', () => {
+  describe('constructor', () => {
+    it('sets the properties', () => {
+      const param = new EventParam('foo', 'uint', true);
+      expect(param.name).to.equal('foo');
+      expect(param.kind.type).to.equal('uint');
+      expect(param.indexed).to.be.true;
+    });
+
+    it('uses defaults for indexed', () => {
+      expect(new EventParam('foo', 'uint').indexed).to.be.false;
+    });
+  });
+
+  describe('toEventParams', () => {
+    it('maps an array of params', () => {
+      const params = EventParam.toEventParams([{ name: 'foo', type: 'uint' }]);
+
+      expect(params.length).to.equal(1);
+      expect(params[0].indexed).to.be.false;
+      expect(params[0].name).to.equal('foo');
+      expect(params[0].kind.type).to.equal('uint');
+    });
+  });
+});
diff --git a/js/src/abi/spec/event/index.js b/js/src/abi/spec/event/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0925882d3e3ed35d3e6e0decfd8ab3e18d451052
--- /dev/null
+++ b/js/src/abi/spec/event/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './event';
diff --git a/js/src/abi/spec/function.js b/js/src/abi/spec/function.js
new file mode 100644
index 0000000000000000000000000000000000000000..0c91a9b6f9843b0e287fe96fc0990d6a00c194df
--- /dev/null
+++ b/js/src/abi/spec/function.js
@@ -0,0 +1,87 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Decoder from '../decoder/decoder';
+import Encoder from '../encoder/encoder';
+import Param from './param';
+import { methodSignature } from '../util/signature';
+
+export default class Func {
+  constructor (abi) {
+    this._abi = abi;
+    this._name = abi.name;
+    this._constant = !!abi.constant;
+    this._payable = abi.payable;
+    this._inputs = Param.toParams(abi.inputs || []);
+    this._outputs = Param.toParams(abi.outputs || []);
+
+    const { id, signature } = methodSignature(this._name, this.inputParamTypes());
+    this._id = id;
+    this._signature = signature;
+  }
+
+  get abi () {
+    return this._abi;
+  }
+
+  get constant () {
+    return this._constant;
+  }
+
+  get name () {
+    return this._name;
+  }
+
+  get id () {
+    return this._id;
+  }
+
+  get payable () {
+    return this._payable;
+  }
+
+  get inputs () {
+    return this._inputs;
+  }
+
+  get outputs () {
+    return this._outputs;
+  }
+
+  get signature () {
+    return this._signature;
+  }
+
+  inputParamTypes () {
+    return this._inputs.map((input) => input.kind);
+  }
+
+  outputParamTypes () {
+    return this._outputs.map((output) => output.kind);
+  }
+
+  encodeCall (tokens) {
+    return `${this._signature}${Encoder.encode(tokens)}`;
+  }
+
+  decodeInput (data) {
+    return Decoder.decode(this.inputParamTypes(), data);
+  }
+
+  decodeOutput (data) {
+    return Decoder.decode(this.outputParamTypes(), data);
+  }
+}
diff --git a/js/src/abi/spec/function.spec.js b/js/src/abi/spec/function.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..1650bd3146463b2a8530c36b116bb3df7eabbb7a
--- /dev/null
+++ b/js/src/abi/spec/function.spec.js
@@ -0,0 +1,89 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Func from './function';
+import Param from './param';
+import Token from '../token';
+
+describe('abi/spec/Function', () => {
+  const inputsArr = [{ name: 'boolin', type: 'bool' }, { name: 'stringin', type: 'string' }];
+  const outputsArr = [{ name: 'output', type: 'uint' }];
+
+  const uint = new Param('output', 'uint');
+  const bool = new Param('boolin', 'bool');
+  const string = new Param('stringin', 'string');
+  const inputs = [bool, string];
+  const outputs = [uint];
+
+  const func = new Func({
+    name: 'test',
+    inputs: inputsArr,
+    outputs: outputsArr
+  });
+
+  describe('constructor', () => {
+    it('stores the parameters as received', () => {
+      expect(func.name).to.equal('test');
+      expect(func.constant).to.be.false;
+      expect(func.inputs).to.deep.equal(inputs);
+      expect(func.outputs).to.deep.equal(outputs);
+    });
+
+    it('matches empty inputs with []', () => {
+      expect(new Func({ name: 'test', outputs: outputsArr }).inputs).to.deep.equal([]);
+    });
+
+    it('matches empty outputs with []', () => {
+      expect(new Func({ name: 'test', inputs: inputsArr }).outputs).to.deep.equal([]);
+    });
+
+    it('sets the method signature', () => {
+      expect(new Func({ name: 'baz' }).signature).to.equal('a7916fac');
+    });
+
+    it('allows constant functions', () => {
+      expect(new Func({ name: 'baz', constant: true }).constant).to.be.true;
+    });
+  });
+
+  describe('inputParamTypes', () => {
+    it('retrieves the input types as received', () => {
+      expect(func.inputParamTypes()).to.deep.equal([bool.kind, string.kind]);
+    });
+  });
+
+  describe('outputParamTypes', () => {
+    it('retrieves the output types as received', () => {
+      expect(func.outputParamTypes()).to.deep.equal([uint.kind]);
+    });
+  });
+
+  describe('encodeCall', () => {
+    it('encodes the call correctly', () => {
+      const result = func.encodeCall([new Token('bool', true), new Token('string', 'jacogr')]);
+
+      expect(result).to.equal('023562050000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000066a61636f67720000000000000000000000000000000000000000000000000000');
+    });
+  });
+
+  describe('decodeOutput', () => {
+    it('decodes the result correctly', () => {
+      const result = func.decodeOutput('1111111111111111111111111111111111111111111111111111111111111111');
+
+      expect(result[0].value.toString(16)).to.equal('1111111111111111111111111111111111111111111111111111111111111111');
+    });
+  });
+});
diff --git a/js/src/abi/spec/index.js b/js/src/abi/spec/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..89354d49b5b08cd5c4ca5583199ad383ba7bab77
--- /dev/null
+++ b/js/src/abi/spec/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './interface';
diff --git a/js/src/abi/spec/interface.js b/js/src/abi/spec/interface.js
new file mode 100644
index 0000000000000000000000000000000000000000..1ea32e9a9c4e7c3c78ae752ebc7022489fc3d9e1
--- /dev/null
+++ b/js/src/abi/spec/interface.js
@@ -0,0 +1,73 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Constructor from './constructor';
+import Event from './event/event';
+import Func from './function';
+import Token from '../token';
+
+export default class Interface {
+  constructor (abi) {
+    this._interface = Interface.parseABI(abi);
+  }
+
+  get interface () {
+    return this._interface;
+  }
+
+  get constructors () {
+    return this._interface.filter((item) => item instanceof Constructor);
+  }
+
+  get events () {
+    return this._interface.filter((item) => item instanceof Event);
+  }
+
+  get functions () {
+    return this._interface.filter((item) => item instanceof Func);
+  }
+
+  encodeTokens (paramTypes, values) {
+    const createToken = function (paramType, value) {
+      if (paramType.subtype) {
+        return new Token(paramType.type, value.map((entry) => createToken(paramType.subtype, entry)));
+      }
+
+      return new Token(paramType.type, value);
+    };
+
+    return paramTypes.map((paramType, idx) => createToken(paramType, values[idx]));
+  }
+
+  static parseABI (abi) {
+    return abi.map((item) => {
+      switch (item.type) {
+        case 'constructor':
+          return new Constructor(item);
+
+        case 'event':
+          return new Event(item);
+
+        case 'function':
+        case 'fallback':
+          return new Func(item);
+
+        default:
+          throw new Error(`Unknown ABI type ${item.type}`);
+      }
+    });
+  }
+}
diff --git a/js/src/abi/spec/interface.spec.js b/js/src/abi/spec/interface.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..ba5c38a28a073d70acd0171d9b50e152954d0fd1
--- /dev/null
+++ b/js/src/abi/spec/interface.spec.js
@@ -0,0 +1,126 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Interface from './interface';
+import ParamType from './paramType';
+import Token from '../token';
+
+describe('abi/spec/Interface', () => {
+  const construct = {
+    type: 'constructor',
+    inputs: []
+  };
+  const event = {
+    type: 'event',
+    name: 'Event2',
+    anonymous: false,
+    inputs: [{ name: 'a', type: 'uint256', indexed: true }, { name: 'b', type: 'bytes32', indexed: false }]
+  };
+  const func = {
+    type: 'function',
+    name: 'foo',
+    inputs: [{ name: 'a', type: 'uint256' }],
+    outputs: []
+  };
+
+  describe('parseABI', () => {
+    it('throws on invalid types', () => {
+      expect(() => Interface.parseABI([{ type: 'noMatch' }])).to.throw(/noMatch/);
+    });
+
+    it('creates constructors', () => {
+      expect(Interface.parseABI([ construct ])).to.deep.equal([{ _inputs: [] }]);
+    });
+
+    it('creates events', () => {
+      expect(Interface.parseABI([ event ])[0].name).to.equal('Event2');
+    });
+
+    it('creates functions', () => {
+      expect(Interface.parseABI([ func ])[0].name).to.equal('foo');
+    });
+
+    it('parse complex interfaces', () => {
+      expect(Interface.parseABI([ construct, event, func ]).length).to.equal(3);
+    });
+  });
+
+  describe('constructor', () => {
+    const int = new Interface([ construct, event, func ]);
+
+    it('contains the full interface', () => {
+      expect(int.interface.length).to.equal(3);
+    });
+
+    it('contains the constructors', () => {
+      expect(int.constructors.length).to.equal(1);
+    });
+
+    it('contains the events', () => {
+      expect(int.events.length).to.equal(1);
+    });
+
+    it('contains the functions', () => {
+      expect(int.functions.length).to.equal(1);
+    });
+  });
+
+  describe('encodeTokens', () => {
+    const int = new Interface([ construct, event, func ]);
+
+    it('encodes simple types', () => {
+      expect(
+        int.encodeTokens(
+          [new ParamType('bool'), new ParamType('string'), new ParamType('int'), new ParamType('uint')],
+          [true, 'gavofyork', -123, 123]
+        )
+      ).to.deep.equal([
+        new Token('bool', true), new Token('string', 'gavofyork'), new Token('int', -123), new Token('uint', 123)
+      ]);
+    });
+
+    it('encodes array', () => {
+      expect(
+        int.encodeTokens(
+          [new ParamType('array', new ParamType('bool'))],
+          [[true, false, true]]
+        )
+      ).to.deep.equal([
+        new Token('array', [
+          new Token('bool', true), new Token('bool', false), new Token('bool', true)
+        ])
+      ]);
+    });
+
+    it('encodes simple with array of array', () => {
+      expect(
+        int.encodeTokens(
+          [
+            new ParamType('bool'),
+            new ParamType('fixedArray', new ParamType('array', new ParamType('uint')), 2)
+          ],
+          [true, [[0, 1], [2, 3]]]
+        )
+      ).to.deep.equal([
+        new Token('bool', true),
+        new Token('fixedArray', [
+          new Token('array', [new Token('uint', 0), new Token('uint', 1)]),
+          new Token('array', [new Token('uint', 2), new Token('uint', 3)])
+        ])
+      ]);
+    });
+  });
+});
diff --git a/js/src/abi/spec/param.js b/js/src/abi/spec/param.js
new file mode 100644
index 0000000000000000000000000000000000000000..95c3b9d18f53c48aa11460fb458001c31eb888cd
--- /dev/null
+++ b/js/src/abi/spec/param.js
@@ -0,0 +1,36 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { toParamType } from './paramType/format';
+
+export default class Param {
+  constructor (name, type) {
+    this._name = name;
+    this._kind = toParamType(type);
+  }
+
+  get name () {
+    return this._name;
+  }
+
+  get kind () {
+    return this._kind;
+  }
+
+  static toParams (params) {
+    return params.map((param) => new Param(param.name, param.type));
+  }
+}
diff --git a/js/src/abi/spec/param.spec.js b/js/src/abi/spec/param.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..bd172e4a6cbf2fe2c3d7742d7e40bc4f4a7834f2
--- /dev/null
+++ b/js/src/abi/spec/param.spec.js
@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Param from './param';
+
+describe('abi/spec/Param', () => {
+  describe('constructor', () => {
+    const param = new Param('foo', 'uint');
+
+    it('sets the properties', () => {
+      expect(param.name).to.equal('foo');
+      expect(param.kind.type).to.equal('uint');
+    });
+  });
+
+  describe('toParams', () => {
+    it('maps an array of params', () => {
+      const params = Param.toParams([{ name: 'foo', type: 'uint' }]);
+
+      expect(params.length).to.equal(1);
+      expect(params[0].name).to.equal('foo');
+      expect(params[0].kind.type).to.equal('uint');
+    });
+  });
+});
diff --git a/js/src/abi/spec/paramType/format.js b/js/src/abi/spec/paramType/format.js
new file mode 100644
index 0000000000000000000000000000000000000000..459eb15f43f1344920b9118aeabc6affe2298090
--- /dev/null
+++ b/js/src/abi/spec/paramType/format.js
@@ -0,0 +1,80 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import ParamType from './paramType';
+
+export function toParamType (type, indexed) {
+  if (type[type.length - 1] === ']') {
+    const last = type.lastIndexOf('[');
+    const length = type.substr(last + 1, type.length - last - 2);
+    const subtype = toParamType(type.substr(0, last));
+
+    if (length.length === 0) {
+      return new ParamType('array', subtype, 0, indexed);
+    }
+
+    return new ParamType('fixedArray', subtype, parseInt(length, 10), indexed);
+  }
+
+  switch (type) {
+    case 'address':
+    case 'bool':
+    case 'bytes':
+    case 'string':
+      return new ParamType(type, null, 0, indexed);
+
+    case 'int':
+    case 'uint':
+      return new ParamType(type, null, 256, indexed);
+
+    default:
+      if (type.indexOf('uint') === 0) {
+        return new ParamType('uint', null, parseInt(type.substr(4), 10), indexed);
+      } else if (type.indexOf('int') === 0) {
+        return new ParamType('int', null, parseInt(type.substr(3), 10), indexed);
+      } else if (type.indexOf('bytes') === 0) {
+        return new ParamType('fixedBytes', null, parseInt(type.substr(5), 10), indexed);
+      }
+
+      throw new Error(`Cannot convert ${type} to valid ParamType`);
+  }
+}
+
+export function fromParamType (paramType) {
+  switch (paramType.type) {
+    case 'address':
+    case 'bool':
+    case 'bytes':
+    case 'string':
+      return paramType.type;
+
+    case 'int':
+    case 'uint':
+      return `${paramType.type}${paramType.length}`;
+
+    case 'fixedBytes':
+      return `bytes${paramType.length}`;
+
+    case 'fixedArray':
+      return `${fromParamType(paramType.subtype)}[${paramType.length}]`;
+
+    case 'array':
+      return `${fromParamType(paramType.subtype)}[]`;
+
+    default:
+      throw new Error(`Cannot convert from ParamType ${paramType.type}`);
+  }
+}
diff --git a/js/src/abi/spec/paramType/format.spec.js b/js/src/abi/spec/paramType/format.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..90e5229d5bb20743629746449372458c8509677d
--- /dev/null
+++ b/js/src/abi/spec/paramType/format.spec.js
@@ -0,0 +1,228 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import ParamType from './paramType';
+import { fromParamType, toParamType } from './format';
+
+describe('abi/spec/paramType/format', () => {
+  describe('fromParamType', () => {
+    it('errors on invalid types', () => {
+      expect(() => fromParamType({ type: 'noMatch' })).to.throw(/noMatch/);
+    });
+
+    describe('simple types', () => {
+      it('converts address to address', () => {
+        const pt = new ParamType('address');
+
+        expect(fromParamType(pt)).to.equal('address');
+      });
+
+      it('converts bool to bool', () => {
+        const pt = new ParamType('bool');
+
+        expect(fromParamType(pt)).to.equal('bool');
+      });
+
+      it('converts bytes to bytes', () => {
+        const pt = new ParamType('bytes');
+
+        expect(fromParamType(pt)).to.equal('bytes');
+      });
+
+      it('converts string to string', () => {
+        const pt = new ParamType('string');
+
+        expect(fromParamType(pt)).to.equal('string');
+      });
+    });
+
+    describe('length types', () => {
+      it('converts int32 to int32', () => {
+        const pt = new ParamType('int', null, 32);
+
+        expect(fromParamType(pt)).to.equal('int32');
+      });
+
+      it('converts uint64 to int64', () => {
+        const pt = new ParamType('uint', null, 64);
+
+        expect(fromParamType(pt)).to.equal('uint64');
+      });
+
+      it('converts fixedBytes8 to bytes8', () => {
+        const pt = new ParamType('fixedBytes', null, 8);
+
+        expect(fromParamType(pt)).to.equal('bytes8');
+      });
+    });
+
+    describe('arrays', () => {
+      it('converts string[2] to string[2]', () => {
+        const pt = new ParamType('fixedArray', new ParamType('string'), 2);
+
+        expect(fromParamType(pt)).to.equal('string[2]');
+      });
+
+      it('converts bool[] to bool[]', () => {
+        const pt = new ParamType('array', new ParamType('bool'));
+
+        expect(fromParamType(pt)).to.equal('bool[]');
+      });
+
+      it('converts bool[][2] to bool[][2]', () => {
+        const pt = new ParamType('fixedArray', new ParamType('array', new ParamType('bool')), 2);
+
+        expect(fromParamType(pt)).to.equal('bool[][2]');
+      });
+
+      it('converts bool[2][] to bool[2][]', () => {
+        const pt = new ParamType('array', new ParamType('fixedArray', new ParamType('bool'), 2));
+
+        expect(fromParamType(pt)).to.equal('bool[2][]');
+      });
+    });
+  });
+
+  describe('toParamType', () => {
+    it('errors on invalid types', () => {
+      expect(() => toParamType('noMatch')).to.throw(/noMatch/);
+    });
+
+    describe('simple mapping', () => {
+      it('converts address to address', () => {
+        const pt = toParamType('address');
+
+        expect(pt.type).to.equal('address');
+      });
+
+      it('converts bool to bool', () => {
+        const pt = toParamType('bool');
+
+        expect(pt.type).to.equal('bool');
+      });
+
+      it('converts bytes to bytes', () => {
+        const pt = toParamType('bytes');
+
+        expect(pt.type).to.equal('bytes');
+      });
+
+      it('converts string to string', () => {
+        const pt = toParamType('string');
+
+        expect(pt.type).to.equal('string');
+      });
+    });
+
+    describe('number', () => {
+      it('converts int to int256', () => {
+        const pt = toParamType('int');
+
+        expect(pt.type).to.equal('int');
+        expect(pt.length).to.equal(256);
+      });
+
+      it('converts uint to uint256', () => {
+        const pt = toParamType('uint');
+
+        expect(pt.type).to.equal('uint');
+        expect(pt.length).to.equal(256);
+      });
+    });
+
+    describe('sized types', () => {
+      it('converts int32 to int32', () => {
+        const pt = toParamType('int32');
+
+        expect(pt.type).to.equal('int');
+        expect(pt.length).to.equal(32);
+      });
+
+      it('converts uint16 to uint16', () => {
+        const pt = toParamType('uint32');
+
+        expect(pt.type).to.equal('uint');
+        expect(pt.length).to.equal(32);
+      });
+
+      it('converts bytes8 to fixedBytes8', () => {
+        const pt = toParamType('bytes8');
+
+        expect(pt.type).to.equal('fixedBytes');
+        expect(pt.length).to.equal(8);
+      });
+    });
+
+    describe('arrays', () => {
+      describe('fixed arrays', () => {
+        it('creates fixed array', () => {
+          const pt = toParamType('bytes[8]');
+
+          expect(pt.type).to.equal('fixedArray');
+          expect(pt.subtype.type).to.equal('bytes');
+          expect(pt.length).to.equal(8);
+        });
+
+        it('creates fixed arrays of fixed arrays', () => {
+          const pt = toParamType('bytes[45][3]');
+
+          expect(pt.type).to.equal('fixedArray');
+          expect(pt.length).to.equal(3);
+          expect(pt.subtype.type).to.equal('fixedArray');
+          expect(pt.subtype.length).to.equal(45);
+          expect(pt.subtype.subtype.type).to.equal('bytes');
+        });
+      });
+
+      describe('dynamic arrays', () => {
+        it('creates a dynamic array', () => {
+          const pt = toParamType('bytes[]');
+
+          expect(pt.type).to.equal('array');
+          expect(pt.subtype.type).to.equal('bytes');
+        });
+
+        it('creates a dynamic array of dynamic arrays', () => {
+          const pt = toParamType('bool[][]');
+
+          expect(pt.type).to.equal('array');
+          expect(pt.subtype.type).to.equal('array');
+          expect(pt.subtype.subtype.type).to.equal('bool');
+        });
+      });
+
+      describe('mixed arrays', () => {
+        it('creates a fixed dynamic array', () => {
+          const pt = toParamType('bool[][3]');
+
+          expect(pt.type).to.equal('fixedArray');
+          expect(pt.length).to.equal(3);
+          expect(pt.subtype.type).to.equal('array');
+          expect(pt.subtype.subtype.type).to.equal('bool');
+        });
+
+        it('creates a dynamic fixed array', () => {
+          const pt = toParamType('bool[3][]');
+
+          expect(pt.type).to.equal('array');
+          expect(pt.subtype.type).to.equal('fixedArray');
+          expect(pt.subtype.length).to.equal(3);
+          expect(pt.subtype.subtype.type).to.equal('bool');
+        });
+      });
+    });
+  });
+});
diff --git a/js/src/abi/spec/paramType/index.js b/js/src/abi/spec/paramType/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..23bb83f067c6dcaa47e136136ccb8682f65a115a
--- /dev/null
+++ b/js/src/abi/spec/paramType/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './paramType';
diff --git a/js/src/abi/spec/paramType/paramType.js b/js/src/abi/spec/paramType/paramType.js
new file mode 100644
index 0000000000000000000000000000000000000000..99a2915d65c6e0af304b319df1821aba10b0160a
--- /dev/null
+++ b/js/src/abi/spec/paramType/paramType.js
@@ -0,0 +1,52 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import TYPES from './types';
+
+export default class ParamType {
+  constructor (type, subtype = null, length = 0, indexed = false) {
+    ParamType.validateType(type);
+
+    this._type = type;
+    this._subtype = subtype;
+    this._length = length;
+    this._indexed = indexed;
+  }
+
+  get type () {
+    return this._type;
+  }
+
+  get subtype () {
+    return this._subtype;
+  }
+
+  get length () {
+    return this._length;
+  }
+
+  get indexed () {
+    return this._indexed;
+  }
+
+  static validateType (type) {
+    if (TYPES.filter((_type) => type === _type).length) {
+      return true;
+    }
+
+    throw new Error(`Invalid type ${type} received for ParamType`);
+  }
+}
diff --git a/js/src/abi/spec/paramType/paramType.spec.js b/js/src/abi/spec/paramType/paramType.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..e8d8c32540c29a0ae62a9161907fd7293de6647c
--- /dev/null
+++ b/js/src/abi/spec/paramType/paramType.spec.js
@@ -0,0 +1,87 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import ParamType from './paramType';
+
+describe('abi/spec/paramType/ParamType', () => {
+  describe('validateType', () => {
+    it('validates address', () => {
+      expect(ParamType.validateType('address')).to.be.true;
+    });
+
+    it('validates fixedArray', () => {
+      expect(ParamType.validateType('fixedArray')).to.be.true;
+    });
+
+    it('validates array', () => {
+      expect(ParamType.validateType('array')).to.be.true;
+    });
+
+    it('validates fixedBytes', () => {
+      expect(ParamType.validateType('fixedBytes')).to.be.true;
+    });
+
+    it('validates bytes', () => {
+      expect(ParamType.validateType('bytes')).to.be.true;
+    });
+
+    it('validates bool', () => {
+      expect(ParamType.validateType('bool')).to.be.true;
+    });
+
+    it('validates int', () => {
+      expect(ParamType.validateType('int')).to.be.true;
+    });
+
+    it('validates uint', () => {
+      expect(ParamType.validateType('uint')).to.be.true;
+    });
+
+    it('validates string', () => {
+      expect(ParamType.validateType('string')).to.be.true;
+    });
+
+    it('throws an error on invalid types', () => {
+      expect(() => ParamType.validateType('noMatch')).to.throw(/noMatch/);
+    });
+  });
+
+  describe('constructor', () => {
+    it('throws an error on invalid types', () => {
+      expect(() => new ParamType('noMatch')).to.throw(/noMatch/);
+    });
+
+    it('sets the type of the object', () => {
+      expect((new ParamType('bool', null, 1)).type).to.equal('bool');
+    });
+
+    it('sets the subtype of the object', () => {
+      expect((new ParamType('array', 'bool', 1)).subtype).to.equal('bool');
+    });
+
+    it('sets the length of the object', () => {
+      expect((new ParamType('array', 'bool', 1)).length).to.equal(1);
+    });
+
+    it('sets the index of the object', () => {
+      expect((new ParamType('array', 'bool', 1, true)).indexed).to.be.true;
+    });
+
+    it('sets default values where none supplied', () => {
+      expect(Object.values(new ParamType('string'))).to.deep.equal(['string', null, 0, false]);
+    });
+  });
+});
diff --git a/js/src/abi/spec/paramType/types.js b/js/src/abi/spec/paramType/types.js
new file mode 100644
index 0000000000000000000000000000000000000000..d789a6ed80333872549856e499412472e8881dd8
--- /dev/null
+++ b/js/src/abi/spec/paramType/types.js
@@ -0,0 +1,19 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const TYPES = ['address', 'bytes', 'int', 'uint', 'bool', 'string', 'array', 'fixedBytes', 'fixedArray'];
+
+export default TYPES;
diff --git a/js/src/abi/token/index.js b/js/src/abi/token/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4b822b4bdf7c1d731ef6e68055be06e6cc85d0ec
--- /dev/null
+++ b/js/src/abi/token/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './token';
diff --git a/js/src/abi/token/token.js b/js/src/abi/token/token.js
new file mode 100644
index 0000000000000000000000000000000000000000..84c675ee63ee3fd44177b1ce54d2a1b3bba91e0e
--- /dev/null
+++ b/js/src/abi/token/token.js
@@ -0,0 +1,42 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import TYPES from '../spec/paramType/types';
+
+export default class Token {
+  constructor (type, value) {
+    Token.validateType(type);
+
+    this._type = type;
+    this._value = value;
+  }
+
+  get type () {
+    return this._type;
+  }
+
+  get value () {
+    return this._value;
+  }
+
+  static validateType (type) {
+    if (TYPES.filter((_type) => type === _type).length) {
+      return true;
+    }
+
+    throw new Error(`Invalid type ${type} received for Token`);
+  }
+}
diff --git a/js/src/abi/token/token.spec.js b/js/src/abi/token/token.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..2abaad6ac9016350123c5a29359ef6d770e6b983
--- /dev/null
+++ b/js/src/abi/token/token.spec.js
@@ -0,0 +1,75 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Token from './token';
+
+describe('abi/token/token', () => {
+  describe('validateType', () => {
+    it('validates address', () => {
+      expect(Token.validateType('address')).to.be.true;
+    });
+
+    it('validates fixedArray', () => {
+      expect(Token.validateType('fixedArray')).to.be.true;
+    });
+
+    it('validates array', () => {
+      expect(Token.validateType('array')).to.be.true;
+    });
+
+    it('validates fixedBytes', () => {
+      expect(Token.validateType('fixedBytes')).to.be.true;
+    });
+
+    it('validates bytes', () => {
+      expect(Token.validateType('bytes')).to.be.true;
+    });
+
+    it('validates bool', () => {
+      expect(Token.validateType('bool')).to.be.true;
+    });
+
+    it('validates int', () => {
+      expect(Token.validateType('int')).to.be.true;
+    });
+
+    it('validates uint', () => {
+      expect(Token.validateType('uint')).to.be.true;
+    });
+
+    it('validates string', () => {
+      expect(Token.validateType('string')).to.be.true;
+    });
+
+    it('throws an error on invalid types', () => {
+      expect(() => Token.validateType('noMatch')).to.throw(/noMatch/);
+    });
+  });
+
+  describe('constructor', () => {
+    it('throws an error on invalid types', () => {
+      expect(() => new Token('noMatch', '1')).to.throw(/noMatch/);
+    });
+
+    it('sets the type of the object', () => {
+      expect((new Token('bool', '1')).type).to.equal('bool');
+    });
+
+    it('sets the value of the object', () => {
+      expect((new Token('bool', '1')).value).to.equal('1');
+    });
+  });
+});
diff --git a/js/src/abi/util/address.js b/js/src/abi/util/address.js
new file mode 100644
index 0000000000000000000000000000000000000000..f0e188f2c374766d02a4a7ee7d3c6e4e8a4e3a5e
--- /dev/null
+++ b/js/src/abi/util/address.js
@@ -0,0 +1,65 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { keccak_256 } from 'js-sha3'; // eslint-disable-line camelcase
+
+export function isChecksumValid (_address) {
+  const address = _address.replace('0x', '');
+  const hash = keccak_256(address.toLowerCase(address));
+
+  for (let n = 0; n < 40; n++) {
+    const hashval = parseInt(hash[n], 16);
+    const isLower = address[n].toUpperCase() !== address[n];
+    const isUpper = address[n].toLowerCase() !== address[n];
+
+    if ((hashval > 7 && isLower) || (hashval <= 7 && isUpper)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function isAddress (address) {
+  if (address && address.length === 42) {
+    if (!/^(0x)?[0-9a-f]{40}$/i.test(address)) {
+      return false;
+    } else if (/^(0x)?[0-9a-f]{40}$/.test(address) || /^(0x)?[0-9A-F]{40}$/.test(address)) {
+      return true;
+    }
+
+    return isChecksumValid(address);
+  }
+
+  return false;
+}
+
+export function toChecksumAddress (_address) {
+  const address = (_address || '').toLowerCase();
+
+  if (!isAddress(address)) {
+    return '';
+  }
+
+  const hash = keccak_256(address.slice(-40));
+  let result = '0x';
+
+  for (let n = 0; n < 40; n++) {
+    result = `${result}${parseInt(hash[n], 16) > 7 ? address[n + 2].toUpperCase() : address[n + 2]}`;
+  }
+
+  return result;
+}
diff --git a/js/src/abi/util/address.spec.js b/js/src/abi/util/address.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..9b0ec38cbbb9cc8053ea1698eef1cf7cc503f165
--- /dev/null
+++ b/js/src/abi/util/address.spec.js
@@ -0,0 +1,100 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { isChecksumValid, isAddress, toChecksumAddress } from './address';
+
+describe('abi/util/address', () => {
+  const value = '63Cf90D3f0410092FC0fca41846f596223979195';
+  const address = `0x${value}`;
+  const lowercase = `0x${value.toLowerCase()}`;
+  const uppercase = `0x${value.toUpperCase()}`;
+  const invalid = '0x' + value.split('').map((char) => {
+    if (char >= 'a' && char <= 'f') {
+      return char.toUpperCase();
+    } else if (char >= 'A' && char <= 'F') {
+      return char.toLowerCase();
+    }
+
+    return char;
+  }).join('');
+  const invalidhex = '0x01234567890123456789012345678901234567gh';
+
+  describe('isChecksumValid', () => {
+    it('returns false when fully lowercase', () => {
+      expect(isChecksumValid(lowercase)).to.be.false;
+    });
+
+    it('returns false when fully uppercase', () => {
+      expect(isChecksumValid(uppercase)).to.be.false;
+    });
+
+    it('returns false on a mixed-case address', () => {
+      expect(isChecksumValid(invalid)).to.be.false;
+    });
+
+    it('returns true on a checksummed address', () => {
+      expect(isChecksumValid(address)).to.be.true;
+    });
+  });
+
+  describe('isAddress', () => {
+    it('returns true when fully lowercase', () => {
+      expect(isAddress(lowercase)).to.be.true;
+    });
+
+    it('returns true when fully uppercase', () => {
+      expect(isAddress(uppercase)).to.be.true;
+    });
+
+    it('returns true when checksummed', () => {
+      expect(isAddress(address)).to.be.true;
+    });
+
+    it('returns false when invalid checksum', () => {
+      expect(isAddress(invalid)).to.be.false;
+    });
+
+    it('returns false on valid length, non-hex', () => {
+      expect(isAddress(invalidhex)).to.be.false;
+    });
+  });
+
+  describe('toChecksumAddress', () => {
+    it('returns empty when no address specified', () => {
+      expect(toChecksumAddress()).to.equal('');
+    });
+
+    it('returns empty on invalid address structure', () => {
+      expect(toChecksumAddress('0xnotaddress')).to.equal('');
+    });
+
+    it('returns formatted address on checksum input', () => {
+      expect(toChecksumAddress(address)).to.equal(address);
+    });
+
+    it('returns formatted address on lowercase input', () => {
+      expect(toChecksumAddress(lowercase)).to.equal(address);
+    });
+
+    it('returns formatted address on uppercase input', () => {
+      expect(toChecksumAddress(uppercase)).to.equal(address);
+    });
+
+    it('returns formatted address on mixed input', () => {
+      expect(toChecksumAddress(invalid)).to.equal(address);
+    });
+  });
+});
diff --git a/js/src/abi/util/pad.js b/js/src/abi/util/pad.js
new file mode 100644
index 0000000000000000000000000000000000000000..a7d94043169ae83ca61d50a0fe38a3c2f087640b
--- /dev/null
+++ b/js/src/abi/util/pad.js
@@ -0,0 +1,75 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import utf8 from 'utf8';
+
+import { isArray } from './types';
+
+const ZERO_64 = '0000000000000000000000000000000000000000000000000000000000000000';
+
+export function padAddress (_input) {
+  const input = _input.substr(0, 2) === '0x' ? _input.substr(2) : _input;
+
+  return `${ZERO_64}${input}`.slice(-64);
+}
+
+export function padBool (input) {
+  return `${ZERO_64}${input ? '1' : '0'}`.slice(-64);
+}
+
+export function padU32 (input) {
+  let bn = new BigNumber(input);
+
+  if (bn.lessThan(0)) {
+    bn = new BigNumber('ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff', 16)
+      .plus(bn).plus(1);
+  }
+
+  return `${ZERO_64}${bn.toString(16)}`.slice(-64);
+}
+
+function stringToBytes (input) {
+  if (isArray(input)) {
+    return input;
+  } else if (input.substr(0, 2) === '0x') {
+    return input.substr(2).toLowerCase().match(/.{1,2}/g).map((value) => parseInt(value, 16));
+  } else {
+    return input.split('').map((char) => char.charCodeAt(0));
+  }
+}
+
+export function padBytes (_input) {
+  const input = stringToBytes(_input);
+
+  return `${padU32(input.length)}${padFixedBytes(input)}`;
+}
+
+export function padFixedBytes (_input) {
+  const input = stringToBytes(_input);
+  const sinput = input.map((code) => `0${code.toString(16)}`.slice(-2)).join('');
+  const max = Math.floor((sinput.length + 63) / 64) * 64;
+
+  return `${sinput}${ZERO_64}`.substr(0, max);
+}
+
+export function padString (input) {
+  const array = utf8.encode(input)
+    .split('')
+    .map((char) => char.charCodeAt(0));
+
+  return padBytes(array);
+}
diff --git a/js/src/abi/util/pad.spec.js b/js/src/abi/util/pad.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..96c733682487db63d1adf3616baf3a6b5977e123
--- /dev/null
+++ b/js/src/abi/util/pad.spec.js
@@ -0,0 +1,124 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import { padAddress, padBool, padBytes, padFixedBytes, padString, padU32 } from './pad';
+
+describe('abi/util/pad', () => {
+  const SHORT15 = '1234567890abcdef';
+  const BYTES15 = [0x12, 0x34, 0x56, 0x78, 0x90, 0xab, 0xcd, 0xef];
+  const LONG15 = `${SHORT15}000000000000000000000000000000000000000000000000`;
+  const PAD123 = '0000000000000000000000000000000000000000000000000000000000000123';
+
+  describe('padAddress', () => {
+    it('pads to 64 characters', () => {
+      expect(padAddress('123')).to.equal(PAD123);
+    });
+
+    it('strips leading 0x when passed in', () => {
+      expect(padFixedBytes(`0x${PAD123}`)).to.equal(PAD123);
+    });
+  });
+
+  describe('padBool', () => {
+    const TRUE = '0000000000000000000000000000000000000000000000000000000000000001';
+    const FALSE = '0000000000000000000000000000000000000000000000000000000000000000';
+
+    it('pads true to 64 characters', () => {
+      expect(padBool(true)).to.equal(TRUE);
+    });
+
+    it('pads false to 64 characters', () => {
+      expect(padBool(false)).to.equal(FALSE);
+    });
+  });
+
+  describe('padU32', () => {
+    it('left pads length < 64 bytes to 64 bytes', () => {
+      expect(padU32(1)).to.equal('0000000000000000000000000000000000000000000000000000000000000001');
+    });
+
+    it('pads hex representation', () => {
+      expect(padU32(0x123)).to.equal(PAD123);
+    });
+
+    it('pads decimal representation', () => {
+      expect(padU32(291)).to.equal(PAD123);
+    });
+
+    it('pads string representation', () => {
+      expect(padU32('0x123')).to.equal(PAD123);
+    });
+
+    it('pads BigNumber representation', () => {
+      expect(padU32(new BigNumber(0x123))).to.equal(PAD123);
+    });
+
+    it('converts negative numbers to 2s complement', () => {
+      expect(padU32(-123)).to.equal('ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff85');
+    });
+  });
+
+  describe('padFixedBytes', () => {
+    it('right pads length < 64 bytes to 64 bytes (string)', () => {
+      expect(padFixedBytes(`0x${SHORT15}`)).to.equal(LONG15);
+    });
+
+    it('right pads length < 64 bytes to 64 bytes (array)', () => {
+      expect(padFixedBytes(BYTES15)).to.equal(LONG15);
+    });
+
+    it('right pads length > 64 bytes (64 byte multiples)', () => {
+      expect(padFixedBytes(`0x${LONG15}${SHORT15}`)).to.equal(`${LONG15}${LONG15}`);
+    });
+
+    it('strips leading 0x when passed in', () => {
+      expect(padFixedBytes(`0x${SHORT15}`)).to.equal(LONG15);
+    });
+  });
+
+  describe('padBytes', () => {
+    it('right pads length < 64, adding the length (string)', () => {
+      const result = padBytes(`0x${SHORT15}`);
+
+      expect(result.length).to.equal(128);
+      expect(result).to.equal(`${padU32(8)}${LONG15}`);
+    });
+
+    it('right pads length < 64, adding the length (array)', () => {
+      const result = padBytes(BYTES15);
+
+      expect(result.length).to.equal(128);
+      expect(result).to.equal(`${padU32(8)}${LONG15}`);
+    });
+
+    it('right pads length > 64, adding the length', () => {
+      const result = padBytes(`0x${LONG15}${SHORT15}`);
+
+      expect(result.length).to.equal(192);
+      expect(result).to.equal(`${padU32(0x28)}${LONG15}${LONG15}`);
+    });
+  });
+
+  describe('padString', () => {
+    it('correctly converts & pads strings', () => {
+      const result = padString('gavofyork');
+
+      expect(result.length).to.equal(128);
+      expect(result).to.equal(padBytes('0x6761766f66796f726b'));
+    });
+  });
+});
diff --git a/js/src/abi/util/signature.js b/js/src/abi/util/signature.js
new file mode 100644
index 0000000000000000000000000000000000000000..10aedf13f98d1ef402e31116efaa9d2f3e5fd67b
--- /dev/null
+++ b/js/src/abi/util/signature.js
@@ -0,0 +1,31 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { keccak_256 } from 'js-sha3'; // eslint-disable-line camelcase
+import { fromParamType } from '../spec/paramType/format';
+
+export function eventSignature (name, params) {
+  const types = (params || []).map(fromParamType).join(',');
+  const id = `${name || ''}(${types})`;
+
+  return { id, signature: keccak_256(id) };
+}
+
+export function methodSignature (name, params) {
+  const { id, signature } = eventSignature(name, params);
+
+  return { id, signature: signature.substr(0, 8) };
+}
diff --git a/js/src/abi/util/signature.spec.js b/js/src/abi/util/signature.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..61664b8fcad8b4ac0ab546f7851b99d1b1ac922a
--- /dev/null
+++ b/js/src/abi/util/signature.spec.js
@@ -0,0 +1,68 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { eventSignature, methodSignature } from './signature';
+
+describe('abi/util/signature', () => {
+  describe('eventSignature', () => {
+    it('encodes signature baz() correctly', () => {
+      expect(eventSignature('baz', []))
+        .to.deep.equal({ id: 'baz()', signature: 'a7916fac4f538170f7cd12c148552e2cba9fcd72329a2dd5b07a6fa906488ddf' });
+    });
+
+    it('encodes signature baz(uint32) correctly', () => {
+      expect(eventSignature('baz', [{ type: 'uint', length: 32 }]))
+        .to.deep.equal({ id: 'baz(uint32)', signature: '7d68785e8fc871be024b75964bd86d093511d4bc2dc7cf7bea32c48a0efaecb1' });
+    });
+
+    it('encodes signature baz(uint32, bool) correctly', () => {
+      expect(eventSignature('baz', [{ type: 'uint', length: 32 }, { type: 'bool' }]))
+        .to.deep.equal({ id: 'baz(uint32,bool)', signature: 'cdcd77c0992ec5bbfc459984220f8c45084cc24d9b6efed1fae540db8de801d2' });
+    });
+
+    it('encodes no-name signature correctly as ()', () => {
+      expect(eventSignature(undefined, []))
+        .to.deep.equal({ id: '()', signature: '861731d50c3880a2ca1994d5ec287b94b2f4bd832a67d3e41c08177bdd5674fe' });
+    });
+
+    it('encodes no-params signature correctly as ()', () => {
+      expect(eventSignature(undefined, undefined))
+        .to.deep.equal({ id: '()', signature: '861731d50c3880a2ca1994d5ec287b94b2f4bd832a67d3e41c08177bdd5674fe' });
+    });
+  });
+
+  describe('methodSignature', () => {
+    it('encodes signature baz() correctly', () => {
+      expect(methodSignature('baz', [])).to.deep.equal({ id: 'baz()', signature: 'a7916fac' });
+    });
+
+    it('encodes signature baz(uint32) correctly', () => {
+      expect(methodSignature('baz', [{ type: 'uint', length: 32 }])).to.deep.equal({ id: 'baz(uint32)', signature: '7d68785e' });
+    });
+
+    it('encodes signature baz(uint32, bool) correctly', () => {
+      expect(methodSignature('baz', [{ type: 'uint', length: 32 }, { type: 'bool' }])).to.deep.equal({ id: 'baz(uint32,bool)', signature: 'cdcd77c0' });
+    });
+
+    it('encodes no-name signature correctly as ()', () => {
+      expect(methodSignature(undefined, [])).to.deep.equal({ id: '()', signature: '861731d5' });
+    });
+
+    it('encodes no-params signature correctly as ()', () => {
+      expect(methodSignature(undefined, undefined)).to.deep.equal({ id: '()', signature: '861731d5' });
+    });
+  });
+});
diff --git a/js/src/abi/util/slice.js b/js/src/abi/util/slice.js
new file mode 100644
index 0000000000000000000000000000000000000000..417efea54d15d27c8e2b6cb38ff26db71ec0c1fa
--- /dev/null
+++ b/js/src/abi/util/slice.js
@@ -0,0 +1,35 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { padAddress } from './pad';
+
+export function sliceData (_data) {
+  if (!_data || !_data.length) {
+    return [];
+  }
+
+  let data = (_data.substr(0, 2) === '0x') ? _data.substr(2) : _data;
+
+  if (!data.length) {
+    data = padAddress('');
+  }
+
+  if (data.length % 64) {
+    throw new Error(`Invalid data length (not mod 64) passed to sliceData, ${data}, % 64 == ${data.length % 64}`);
+  }
+
+  return data.match(/.{1,64}/g);
+}
diff --git a/js/src/abi/util/slice.spec.js b/js/src/abi/util/slice.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..92608c5906c430da1d4a647c36c2b00de4f4078b
--- /dev/null
+++ b/js/src/abi/util/slice.spec.js
@@ -0,0 +1,48 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { sliceData } from './slice';
+
+describe('abi/util/slice', () => {
+  describe('sliceData', () => {
+    const slice1 = '131a3afc00d1b1e3461b955e53fc866dcf303b3eb9f4c16f89e388930f48134b';
+    const slice2 = '2124768576358735263578356373526387638357635873563586353756358763';
+
+    it('throws an error on mod 64 != 0', () => {
+      expect(() => sliceData('123')).to.throw(/sliceData/);
+    });
+
+    it('returns an empty array when length === 0', () => {
+      expect(sliceData('')).to.deep.equal([]);
+    });
+
+    it('returns an array with the slices otherwise', () => {
+      const sliced = sliceData(`${slice1}${slice2}`);
+
+      expect(sliced.length).to.equal(2);
+      expect(sliced[0]).to.equal(slice1);
+      expect(sliced[1]).to.equal(slice2);
+    });
+
+    it('removes leading 0x when passed in', () => {
+      const sliced = sliceData(`0x${slice1}${slice2}`);
+
+      expect(sliced.length).to.equal(2);
+      expect(sliced[0]).to.equal(slice1);
+      expect(sliced[1]).to.equal(slice2);
+    });
+  });
+});
diff --git a/js/src/abi/util/sliceAs.js b/js/src/abi/util/sliceAs.js
new file mode 100644
index 0000000000000000000000000000000000000000..47c3e9758def9e1e16da25a7f91a436e1d2f44b9
--- /dev/null
+++ b/js/src/abi/util/sliceAs.js
@@ -0,0 +1,47 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+
+import { toChecksumAddress } from './address';
+
+export function asU32 (slice) {
+  // TODO: validation
+
+  return new BigNumber(slice, 16);
+}
+
+export function asI32 (slice) {
+  if (new BigNumber(slice.substr(0, 1), 16).toString(2)[0] === '1') {
+    return new BigNumber(slice, 16)
+      .minus(new BigNumber('ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff', 16))
+      .minus(1);
+  }
+
+  return new BigNumber(slice, 16);
+}
+
+export function asAddress (slice) {
+  // TODO: address validation?
+
+  return toChecksumAddress(`0x${slice.slice(-40)}`);
+}
+
+export function asBool (slice) {
+  // TODO: everything else should be 0
+
+  return new BigNumber(slice[63]).eq(1);
+}
diff --git a/js/src/abi/util/sliceAs.spec.js b/js/src/abi/util/sliceAs.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..af68860089f5f7b7a5d6b7cb0c61d00d21b7cbc4
--- /dev/null
+++ b/js/src/abi/util/sliceAs.spec.js
@@ -0,0 +1,54 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { asAddress, asBool, asI32, asU32 } from './sliceAs';
+
+describe('abi/util/sliceAs', () => {
+  const MAX_INT = 'ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff';
+
+  describe('asAddress', () => {
+    it('correctly returns the last 0x40 characters', () => {
+      const address = '1111111111222222222233333333334444444444';
+      expect(asAddress(`000000000000000000000000${address}`)).to.equal(`0x${address}`);
+    });
+  });
+
+  describe('asBool', () => {
+    it('correctly returns true', () => {
+      expect(asBool('0000000000000000000000000000000000000000000000000000000000000001')).to.be.true;
+    });
+
+    it('correctly returns false', () => {
+      expect(asBool('0000000000000000000000000000000000000000000000000000000000000000')).to.be.false;
+    });
+  });
+
+  describe('asI32', () => {
+    it('correctly decodes positive numbers', () => {
+      expect(asI32('000000000000000000000000000000000000000000000000000000000000007b').toString()).to.equal('123');
+    });
+
+    it('correctly decodes negative numbers', () => {
+      expect(asI32('ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff85').toString()).to.equal('-123');
+    });
+  });
+
+  describe('asU32', () => {
+    it('returns a maxium U32', () => {
+      expect(asU32(MAX_INT).toString(16)).to.equal(MAX_INT);
+    });
+  });
+});
diff --git a/js/src/abi/util/types.js b/js/src/abi/util/types.js
new file mode 100644
index 0000000000000000000000000000000000000000..649f26db6cd5e88da1539616d04feae935f7fc31
--- /dev/null
+++ b/js/src/abi/util/types.js
@@ -0,0 +1,27 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function isArray (test) {
+  return Object.prototype.toString.call(test) === '[object Array]';
+}
+
+export function isString (test) {
+  return Object.prototype.toString.call(test) === '[object String]';
+}
+
+export function isInstanceOf (test, clazz) {
+  return test instanceof clazz;
+}
diff --git a/js/src/abi/util/types.spec.js b/js/src/abi/util/types.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..2e1a538a6a6081c213af3bfc244dfedf4347ce7b
--- /dev/null
+++ b/js/src/abi/util/types.spec.js
@@ -0,0 +1,62 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { isArray, isString, isInstanceOf } from './types';
+import Token from '../token';
+
+describe('abi/util/types', () => {
+  describe('isArray', () => {
+    it('correctly identifies empty arrays as Array', () => {
+      expect(isArray([])).to.be.true;
+    });
+
+    it('correctly identifies non-empty arrays as Array', () => {
+      expect(isArray([1, 2, 3])).to.be.true;
+    });
+
+    it('correctly identifies strings as non-Array', () => {
+      expect(isArray('not an array')).to.be.false;
+    });
+
+    it('correctly identifies objects as non-Array', () => {
+      expect(isArray({})).to.be.false;
+    });
+  });
+
+  describe('isString', () => {
+    it('correctly identifies empty string as string', () => {
+      expect(isString('')).to.be.true;
+    });
+
+    it('correctly identifies string as string', () => {
+      expect(isString('123')).to.be.true;
+    });
+  });
+
+  describe('isInstanceOf', () => {
+    it('correctly identifies build-in instanceof', () => {
+      expect(isInstanceOf(new String('123'), String)).to.be.true; // eslint-disable-line no-new-wrappers
+    });
+
+    it('correctly identifies own instanceof', () => {
+      expect(isInstanceOf(new Token('int', 123), Token)).to.be.true;
+    });
+
+    it('correctly reports false for own', () => {
+      expect(isInstanceOf({ type: 'int' }, Token)).to.be.false;
+    });
+  });
+});
diff --git a/js/src/api/README.md b/js/src/api/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..691a24cca981ffd8537eec5c863dd999960a0461
--- /dev/null
+++ b/js/src/api/README.md
@@ -0,0 +1,145 @@
+# ethapi-js
+
+A thin, fast, low-level Promise-based wrapper around the Ethereum APIs.
+
+[![Build Status](https://travis-ci.org/jacogr/ethapi-js.svg?branch=master)](https://travis-ci.org/jacogr/ethapi-js)
+[![Coverage Status](https://coveralls.io/repos/github/jacogr/ethapi-js/badge.svg?branch=master)](https://coveralls.io/github/jacogr/ethapi-js?branch=master)
+[![Dependency Status](https://david-dm.org/jacogr/ethapi-js.svg)](https://david-dm.org/jacogr/ethapi-js)
+[![devDependency Status](https://david-dm.org/jacogr/ethapi-js/dev-status.svg)](https://david-dm.org/jacogr/ethapi-js#info=devDependencies)
+
+## contributing
+
+Clone the repo and install dependencies via `npm install`. Tests can be executed via
+
+- `npm run testOnce` (100% covered unit tests)
+- `npm run testE2E` (E2E against a running RPC-enabled testnet Parity/Geth instance, `parity --testnet` and for WebScokets, `geth --testnet --ws --wsorigins '*' --rpc`)
+- setting the environment `DEBUG=true` will display the RPC POST bodies and responses on E2E tests
+
+## installation
+
+Install the package with `npm install --save ethapi-js` from the [npm registry ethapi-js](https://www.npmjs.com/package/ethapi-js)
+
+## usage
+
+### initialisation
+
+```javascript
+// import the actual EthApi class
+import EthApi from 'ethapi-js';
+
+// do the setup
+const transport = new EthApi.Transport.Http('http://localhost:8545');  // or .Ws('ws://localhost:8546')
+const ethapi = new EthApi(transport);
+```
+
+You will require native Promises and fetch support (latest browsers only), they can be utilised by
+
+```javascript
+import 'isomorphic-fetch';
+
+import es6Promise from 'es6-promise';
+es6Promise.polyfill();
+```
+
+### making calls
+
+perform a call
+
+```javascript
+ethapi.eth
+  .coinbase()
+  .then((coinbase) => {
+    console.log(`The coinbase is ${coinbase}`);
+  });
+```
+
+multiple promises
+
+```javascript
+Promise
+  .all([
+    ethapi.eth.coinbase(),
+    ethapi.net.listening()
+  ])
+  .then(([coinbase, listening]) => {
+    // do stuff here
+  });
+```
+
+chaining promises
+
+```javascript
+ethapi.eth
+  .newFilter({...})
+  .then((filterId) => ethapi.eth.getFilterChanges(filterId))
+  .then((changes) => {
+    console.log(changes);
+  });
+```
+
+### contracts
+
+attach contract
+
+```javascript
+const abi = [{ name: 'callMe', inputs: [{ type: 'bool', ...}, { type: 'string', ...}]}, ...abi...];
+const contract = new ethapi.newContract(abi);
+```
+
+deploy
+
+```javascript
+contract
+  .deploy('0xc0de', [params], 'superPassword')
+  .then((address) => {
+    console.log(`the contract was deployed at ${address}`);
+  });
+```
+
+attach a contract at address
+
+```javascript
+// via the constructor & .at function
+const contract = api.newContract(abi).at('0xa9280...7347b');
+// or on an already initialised contract
+contract.at('0xa9280...7347b');
+// perform calls here
+```
+
+find & call a function
+
+```javascript
+contract.named
+  .callMe
+  .call({ gas: 21000 }, [true, 'someString']) // or estimateGas or sendTransaction
+  .then((result) => {
+    console.log(`the result was ${result}`);
+  });
+```
+
+parse events from transaction receipt
+
+```javascript
+contract
+  .parseTransactionEvents(txReceipt)
+  .then((receipt) => {
+    receipt.logs.forEach((log) => {
+      console.log('log parameters', log.params);
+    });
+  });
+```
+
+## apis
+
+APIs implement the calls as exposed in the [Ethcore JSON Ethereum RPC](https://github.com/ethcore/ethereum-rpc-json/) definitions. Mapping follows the naming conventions of the originals, i.e. `eth_call` becomes `eth.call`, `personal_accounts` becomes `personal.accounts`, etc.
+
+- [ethapi.db](https://github.com/ethcore/ethereum-rpc-json/blob/master/interfaces.md#db)
+- [ethapi.eth](https://github.com/ethcore/ethereum-rpc-json/blob/master/interfaces.md#eth)
+- [ethapi.ethcore](https://github.com/ethcore/ethereum-rpc-json/blob/master/interfaces.md#ethcore)
+- [ethapi.net](https://github.com/ethcore/ethereum-rpc-json/blob/master/interfaces.md#net)
+- [ethapi.personal](https://github.com/ethcore/ethereum-rpc-json/blob/master/interfaces.md#personal)
+- [ethapi.shh](https://github.com/ethcore/ethereum-rpc-json/blob/master/interfaces.md#shh)
+- [ethapi.trace](https://github.com/ethcore/ethereum-rpc-json/blob/master/interfaces.md#trace)
+- [ethapi.web3](https://github.com/ethcore/ethereum-rpc-json/blob/master/interfaces.md#web3)
+
+As a verification step, all exposed interfaces are tested for existing and pointing to the correct endpoints by using the generated interfaces from the above repo.
diff --git a/js/src/api/api.js b/js/src/api/api.js
new file mode 100644
index 0000000000000000000000000000000000000000..c821297727fbd4229f7deaa8097a16478e57af0a
--- /dev/null
+++ b/js/src/api/api.js
@@ -0,0 +1,125 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { Http, Ws } from './transport';
+import Contract from './contract';
+
+import { Db, Eth, Ethcore, Net, Personal, Shh, Trace, Web3 } from './rpc';
+import Subscriptions from './subscriptions';
+import util from './util';
+import { isFunction } from './util/types';
+
+export default class Api {
+  constructor (transport) {
+    if (!transport || !isFunction(transport.execute)) {
+      throw new Error('EthApi needs transport with execute() function defined');
+    }
+
+    this._transport = transport;
+
+    this._db = new Db(transport);
+    this._eth = new Eth(transport);
+    this._ethcore = new Ethcore(transport);
+    this._net = new Net(transport);
+    this._personal = new Personal(transport);
+    this._shh = new Shh(transport);
+    this._trace = new Trace(transport);
+    this._web3 = new Web3(transport);
+
+    this._subscriptions = new Subscriptions(this);
+  }
+
+  get db () {
+    return this._db;
+  }
+
+  get eth () {
+    return this._eth;
+  }
+
+  get ethcore () {
+    return this._ethcore;
+  }
+
+  get net () {
+    return this._net;
+  }
+
+  get personal () {
+    return this._personal;
+  }
+
+  get shh () {
+    return this._shh;
+  }
+
+  get trace () {
+    return this._trace;
+  }
+
+  get transport () {
+    return this._transport;
+  }
+
+  get web3 () {
+    return this._web3;
+  }
+
+  get util () {
+    return util;
+  }
+
+  newContract (abi, address) {
+    return new Contract(this, abi).at(address);
+  }
+
+  subscribe (subscriptionName, callback) {
+    return this._subscriptions.subscribe(subscriptionName, callback);
+  }
+
+  unsubscribe (subscriptionName, subscriptionId) {
+    return this._subscriptions.unsubscribe(subscriptionName, subscriptionId);
+  }
+
+  pollMethod (method, input, validate) {
+    const [_group, endpoint] = method.split('_');
+    const group = `_${_group}`;
+
+    return new Promise((resolve, reject) => {
+      const timeout = () => {
+        this[group][endpoint](input)
+          .then((result) => {
+            if (validate ? validate(result) : result) {
+              resolve(result);
+            } else {
+              setTimeout(timeout, 500);
+            }
+          })
+          .catch((error) => {
+            console.error('pollMethod', error);
+            reject(error);
+          });
+      };
+
+      timeout();
+    });
+  }
+
+  static Transport = {
+    Http: Http,
+    Ws: Ws
+  }
+}
diff --git a/js/src/api/api.spec.js b/js/src/api/api.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..bbd140d4d73d0be1df85e8d9ec7b7562737547fa
--- /dev/null
+++ b/js/src/api/api.spec.js
@@ -0,0 +1,47 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { TEST_HTTP_URL, endpointTest } from '../../test/mockRpc';
+
+import Api from './api';
+
+import ethereumRpc from '../jsonrpc/';
+
+describe('api/Api', () => {
+  describe('constructor', () => {
+    it('requires defined/non-null transport object', () => {
+      expect(() => new Api()).to.throw(/Api needs transport/);
+      expect(() => new Api(null)).to.throw(/Api needs transport/);
+    });
+
+    it('requires an execute function on the transport object', () => {
+      expect(() => new Api({})).to.throw(/Api needs transport/);
+      expect(() => new Api({ execute: true })).to.throw(/Api needs transport/);
+    });
+  });
+
+  describe('interface', () => {
+    const api = new Api(new Api.Transport.Http(TEST_HTTP_URL));
+
+    Object.keys(ethereumRpc).sort().forEach((endpoint) => {
+      describe(endpoint, () => {
+        Object.keys(ethereumRpc[endpoint]).sort().forEach((method) => {
+          endpointTest(api, endpoint, method);
+        });
+      });
+    });
+  });
+});
diff --git a/js/src/api/contract/contract.js b/js/src/api/contract/contract.js
new file mode 100644
index 0000000000000000000000000000000000000000..40caa7643341a1422e551b1040fd5dd874323e6c
--- /dev/null
+++ b/js/src/api/contract/contract.js
@@ -0,0 +1,319 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Abi from '../../abi';
+import Api from '../api';
+import { isInstanceOf } from '../util/types';
+
+let nextSubscriptionId = 0;
+
+export default class Contract {
+  constructor (api, abi) {
+    if (!isInstanceOf(api, Api)) {
+      throw new Error('API instance needs to be provided to Contract');
+    } else if (!abi) {
+      throw new Error('ABI needs to be provided to Contract instance');
+    }
+
+    this._api = api;
+    this._abi = new Abi(abi);
+
+    this._subscriptions = {};
+    this._constructors = this._abi.constructors.map(this._bindFunction);
+    this._functions = this._abi.functions.map(this._bindFunction);
+    this._events = this._abi.events.map(this._bindEvent);
+
+    this._instance = {};
+
+    this._events.forEach((evt) => {
+      this._instance[evt.name] = evt;
+    });
+    this._functions.forEach((fn) => {
+      this._instance[fn.name] = fn;
+    });
+
+    this._sendSubscriptionChanges();
+  }
+
+  get address () {
+    return this._address;
+  }
+
+  get constructors () {
+    return this._constructors;
+  }
+
+  get events () {
+    return this._events;
+  }
+
+  get functions () {
+    return this._functions;
+  }
+
+  get instance () {
+    this._instance.address = this._address;
+    return this._instance;
+  }
+
+  get api () {
+    return this._api;
+  }
+
+  get abi () {
+    return this._abi;
+  }
+
+  at (address) {
+    this._address = address;
+    return this;
+  }
+
+  deploy (options, values, statecb) {
+    let gas;
+
+    const setState = (state) => {
+      if (!statecb) {
+        return;
+      }
+
+      return statecb(null, state);
+    };
+
+    setState({ state: 'estimateGas' });
+
+    return this._api.eth
+      .estimateGas(this._encodeOptions(this.constructors[0], options, values))
+      .then((_gas) => {
+        gas = _gas.mul(1.2);
+        options.gas = gas.toFixed(0);
+
+        setState({ state: 'postTransaction', gas });
+        return this._api.eth.postTransaction(this._encodeOptions(this.constructors[0], options, values));
+      })
+      .then((requestId) => {
+        setState({ state: 'checkRequest', requestId });
+        return this._pollCheckRequest(requestId);
+      })
+      .then((txhash) => {
+        setState({ state: 'getTransactionReceipt', txhash });
+        return this._pollTransactionReceipt(txhash, gas);
+      })
+      .then((receipt) => {
+        if (receipt.gasUsed.eq(gas)) {
+          throw new Error(`Contract not deployed, gasUsed == ${gas.toFixed(0)}`);
+        }
+
+        setState({ state: 'hasReceipt', receipt });
+        this._address = receipt.contractAddress;
+        return this._address;
+      })
+      .then((address) => {
+        setState({ state: 'getCode' });
+        return this._api.eth.getCode(this._address);
+      })
+      .then((code) => {
+        if (code === '0x') {
+          throw new Error('Contract not deployed, getCode returned 0x');
+        }
+
+        setState({ state: 'completed' });
+        return this._address;
+      });
+  }
+
+  parseEventLogs (logs) {
+    return logs.map((log) => {
+      const signature = log.topics[0].substr(2);
+      const event = this.events.find((evt) => evt.signature === signature);
+
+      if (!event) {
+        throw new Error(`Unable to find event matching signature ${signature}`);
+      }
+
+      const decoded = event.decodeLog(log.topics, log.data);
+
+      log.params = {};
+      log.event = event.name;
+
+      decoded.params.forEach((param) => {
+        log.params[param.name] = param.token.value;
+      });
+
+      return log;
+    });
+  }
+
+  parseTransactionEvents (receipt) {
+    receipt.logs = this.parseEventLogs(receipt.logs);
+
+    return receipt;
+  }
+
+  _pollCheckRequest = (requestId) => {
+    return this._api.pollMethod('eth_checkRequest', requestId);
+  }
+
+  _pollTransactionReceipt = (txhash, gas) => {
+    return this.api.pollMethod('eth_getTransactionReceipt', txhash, (receipt) => {
+      if (!receipt || !receipt.blockNumber || receipt.blockNumber.eq(0)) {
+        return false;
+      }
+
+      return true;
+    });
+  }
+
+  _encodeOptions (func, options, values) {
+    const tokens = func ? this._abi.encodeTokens(func.inputParamTypes(), values) : null;
+    const call = tokens ? func.encodeCall(tokens) : null;
+
+    if (options.data && options.data.substr(0, 2) === '0x') {
+      options.data = options.data.substr(2);
+    }
+    options.data = `0x${options.data || ''}${call || ''}`;
+
+    return options;
+  }
+
+  _addOptionsTo (options = {}) {
+    return Object.assign({
+      to: this._address
+    }, options);
+  }
+
+  _bindFunction = (func) => {
+    func.call = (options, values = []) => {
+      return this._api.eth
+        .call(this._encodeOptions(func, this._addOptionsTo(options), values))
+        .then((encoded) => func.decodeOutput(encoded))
+        .then((tokens) => tokens.map((token) => token.value))
+        .then((returns) => returns.length === 1 ? returns[0] : returns);
+    };
+
+    if (!func.constant) {
+      func.postTransaction = (options, values = []) => {
+        return this._api.eth
+          .postTransaction(this._encodeOptions(func, this._addOptionsTo(options), values));
+      };
+
+      func.estimateGas = (options, values = []) => {
+        return this._api.eth
+          .estimateGas(this._encodeOptions(func, this._addOptionsTo(options), values));
+      };
+    }
+
+    return func;
+  }
+
+  _bindEvent = (event) => {
+    event.subscribe = (options = {}, callback) => {
+      return this._subscribe(event, options, callback);
+    };
+
+    event.unsubscribe = (subscriptionId) => {
+      return this.unsubscribe(subscriptionId);
+    };
+
+    return event;
+  }
+
+  subscribe (eventName = null, options = {}, callback) {
+    return new Promise((resolve, reject) => {
+      let event = null;
+
+      if (eventName) {
+        event = this._events.find((evt) => evt.name === eventName);
+
+        if (!event) {
+          const events = this._events.map((evt) => evt.name).join(', ');
+          reject(new Error(`${eventName} is not a valid eventName, subscribe using one of ${events} (or null to include all)`));
+          return;
+        }
+      }
+
+      return this._subscribe(event, options, callback).then(resolve).catch(reject);
+    });
+  }
+
+  _subscribe (event = null, _options, callback) {
+    const subscriptionId = nextSubscriptionId++;
+    const options = Object.assign({}, _options, {
+      address: this._address,
+      topics: [event ? event.signature : null]
+    });
+
+    return this._api.eth
+      .newFilter(options)
+      .then((filterId) => {
+        return this._api.eth
+          .getFilterLogs(filterId)
+          .then((logs) => {
+            callback(null, this.parseEventLogs(logs));
+            this._subscriptions[subscriptionId] = {
+              options,
+              callback,
+              filterId
+            };
+
+            return subscriptionId;
+          });
+      });
+  }
+
+  unsubscribe (subscriptionId) {
+    return this._api.eth
+      .uninstallFilter(this._subscriptions[subscriptionId].filterId)
+      .then(() => {
+        delete this._subscriptions[subscriptionId];
+      })
+      .catch((error) => {
+        console.error('unsubscribe', error);
+      });
+  }
+
+  _sendSubscriptionChanges = () => {
+    const subscriptions = Object.values(this._subscriptions);
+    const timeout = () => setTimeout(this._sendSubscriptionChanges, 1000);
+
+    Promise
+      .all(
+        subscriptions.map((subscription) => {
+          return this._api.eth.getFilterChanges(subscription.filterId);
+        })
+      )
+      .then((logsArray) => {
+        logsArray.forEach((logs, idx) => {
+          if (!logs || !logs.length) {
+            return;
+          }
+
+          try {
+            subscriptions[idx].callback(null, this.parseEventLogs(logs));
+          } catch (error) {
+            this.unsubscribe(idx);
+            console.error('_sendSubscriptionChanges', error);
+          }
+        });
+
+        timeout();
+      })
+      .catch((error) => {
+        console.error('_sendSubscriptionChanges', error);
+        timeout();
+      });
+  }
+}
diff --git a/js/src/api/contract/contract.spec.js b/js/src/api/contract/contract.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..7ac3e099c9da64ff8c883daa6ed6932e5582906a
--- /dev/null
+++ b/js/src/api/contract/contract.spec.js
@@ -0,0 +1,539 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import sinon from 'sinon';
+
+import { TEST_HTTP_URL, mockHttp } from '../../../test/mockRpc';
+
+import Abi from '../../abi';
+
+import Api from '../api';
+import Contract from './contract';
+import { isInstanceOf, isFunction } from '../util/types';
+
+const transport = new Api.Transport.Http(TEST_HTTP_URL);
+const eth = new Api(transport);
+
+describe('api/contract/Contract', () => {
+  const ADDR = '0x0123456789';
+  const ABI = [
+    {
+      type: 'function', name: 'test',
+      inputs: [{ name: 'boolin', type: 'bool' }, { name: 'stringin', type: 'string' }],
+      outputs: [{ type: 'uint' }]
+    },
+    {
+      type: 'function', name: 'test2',
+      outputs: [{ type: 'uint' }, { type: 'uint' }]
+    },
+    { type: 'constructor' },
+    { type: 'event', name: 'baz' },
+    { type: 'event', name: 'foo' }
+  ];
+  const VALUES = [true, 'jacogr'];
+  const ENCODED = '0x023562050000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000066a61636f67720000000000000000000000000000000000000000000000000000';
+  const RETURN1 = '0000000000000000000000000000000000000000000000000000000000123456';
+  const RETURN2 = '0000000000000000000000000000000000000000000000000000000000456789';
+  let scope;
+
+  describe('constructor', () => {
+    it('needs an EthAbi instance', () => {
+      expect(() => new Contract()).to.throw(/API instance needs to be provided to Contract/);
+    });
+
+    it('needs an ABI', () => {
+      expect(() => new Contract(eth)).to.throw(/ABI needs to be provided to Contract instance/);
+    });
+
+    describe('internal setup', () => {
+      const contract = new Contract(eth, ABI);
+
+      it('sets EthApi & parsed interface', () => {
+        expect(contract.address).to.not.be.ok;
+        expect(contract.api).to.deep.equal(eth);
+        expect(isInstanceOf(contract.abi, Abi)).to.be.ok;
+      });
+
+      it('attaches functions', () => {
+        expect(contract.functions.length).to.equal(2);
+        expect(contract.functions[0].name).to.equal('test');
+      });
+
+      it('attaches constructors', () => {
+        expect(contract.constructors.length).to.equal(1);
+      });
+
+      it('attaches events', () => {
+        expect(contract.events.length).to.equal(2);
+        expect(contract.events[0].name).to.equal('baz');
+      });
+    });
+  });
+
+  describe('at', () => {
+    it('sets returns the functions, events & sets the address', () => {
+      const contract = new Contract(eth, [
+        {
+          constant: true,
+          inputs: [{
+            name: '_who',
+            type: 'address'
+          }],
+          name: 'balanceOf',
+          outputs: [{
+            name: '',
+            type: 'uint256'
+          }],
+          type: 'function'
+        },
+        {
+          anonymous: false,
+          inputs: [{
+            indexed: false,
+            name: 'amount',
+            type: 'uint256'
+          }],
+          name: 'Drained',
+          type: 'event'
+        }
+      ]);
+      contract.at('6789');
+
+      expect(Object.keys(contract.instance)).to.deep.equal(['Drained', 'balanceOf', 'address']);
+      expect(contract.address).to.equal('6789');
+    });
+  });
+
+  describe('parseTransactionEvents', () => {
+    it('checks for unmatched signatures', () => {
+      const contract = new Contract(eth, [{ anonymous: false, name: 'Message', type: 'event' }]);
+      expect(() => contract.parseTransactionEvents({
+        logs: [{
+          data: '0x000000000000000000000000000000000000000000000000000000000000000000000000000000000000000063cf90d3f0410092fc0fca41846f5962239791950000000000000000000000000000000000000000000000000000000056e6c85f0000000000000000000000000000000000000000000000000001000000004fcd00000000000000000000000000000000000000000000000000000000000000a0000000000000000000000000000000000000000000000000000000000000000d706f7374286d6573736167652900000000000000000000000000000000000000',
+          topics: [
+            '0x954ba6c157daf8a26539574ffa64203c044691aa57251af95f4b48d85ec00dd5',
+            '0x0000000000000000000000000000000000000000000000000001000000004fe0'
+          ]
+        }]
+      })).to.throw(/event matching signature/);
+    });
+
+    it('parses a transaction log into the data', () => {
+      const contract = new Contract(eth, [
+        {
+          anonymous: false, name: 'Message', type: 'event',
+          inputs: [
+            { indexed: true, name: 'postId', type: 'uint256' },
+            { indexed: false, name: 'parentId', type: 'uint256' },
+            { indexed: false, name: 'sender', type: 'address' },
+            { indexed: false, name: 'at', type: 'uint256' },
+            { indexed: false, name: 'messageId', type: 'uint256' },
+            { indexed: false, name: 'message', type: 'string' }
+          ]
+        }
+      ]);
+      const decoded = contract.parseTransactionEvents({
+        blockHash: '0xa9280530a3b47bee2fc80f2862fd56502ae075350571d724d6442ea4c597347b',
+        blockNumber: '0x4fcd',
+        cumulativeGasUsed: '0xb57f',
+        gasUsed: '0xb57f',
+        logs: [{
+          address: '0x22bff18ec62281850546a664bb63a5c06ac5f76c',
+          blockHash: '0xa9280530a3b47bee2fc80f2862fd56502ae075350571d724d6442ea4c597347b',
+          blockNumber: '0x4fcd',
+          data: '0x000000000000000000000000000000000000000000000000000000000000000000000000000000000000000063cf90d3f0410092fc0fca41846f5962239791950000000000000000000000000000000000000000000000000000000056e6c85f0000000000000000000000000000000000000000000000000001000000004fcd00000000000000000000000000000000000000000000000000000000000000a0000000000000000000000000000000000000000000000000000000000000000d706f7374286d6573736167652900000000000000000000000000000000000000',
+          logIndex: '0x0',
+          topics: [
+            '0x954ba6c157daf8a26539574ffa64203c044691aa57251af95f4b48d85ec00dd5',
+            '0x0000000000000000000000000000000000000000000000000001000000004fe0'
+          ],
+          transactionHash: '0xca16f537d761d13e4e80953b754e2b15541f267d6cad9381f750af1bae1e4917',
+          transactionIndex: '0x0'
+        }],
+        to: '0x22bff18ec62281850546a664bb63a5c06ac5f76c',
+        transactionHash: '0xca16f537d761d13e4e80953b754e2b15541f267d6cad9381f750af1bae1e4917',
+        transactionIndex: '0x0'
+      });
+      const log = decoded.logs[0];
+
+      expect(log.event).to.equal('Message');
+      expect(log.address).to.equal('0x22bff18ec62281850546a664bb63a5c06ac5f76c');
+      expect(log.params).to.deep.equal({
+        at: new BigNumber('1457965151'),
+        message: 'post(message)',
+        messageId: new BigNumber('281474976731085'),
+        parentId: new BigNumber(0),
+        postId: new BigNumber('281474976731104'),
+        sender: '0x63Cf90D3f0410092FC0fca41846f596223979195'
+      });
+    });
+  });
+
+  describe('_pollTransactionReceipt', () => {
+    const contract = new Contract(eth, ABI);
+    const ADDRESS = '0xD337e80eEdBdf86eDBba021797d7e4e00Bb78351';
+    const BLOCKNUMBER = '555000';
+    const RECEIPT = { contractAddress: ADDRESS.toLowerCase(), blockNumber: BLOCKNUMBER };
+    const EXPECT = { contractAddress: ADDRESS, blockNumber: new BigNumber(BLOCKNUMBER) };
+
+    let scope;
+    let receipt;
+
+    describe('success', () => {
+      before(() => {
+        scope = mockHttp([
+          { method: 'eth_getTransactionReceipt', reply: { result: null } },
+          { method: 'eth_getTransactionReceipt', reply: { result: null } },
+          { method: 'eth_getTransactionReceipt', reply: { result: RECEIPT } }
+        ]);
+
+        return contract
+          ._pollTransactionReceipt('0x123')
+          .then((_receipt) => {
+            receipt = _receipt;
+          });
+      });
+
+      it('sends multiple getTransactionReceipt calls', () => {
+        expect(scope.isDone()).to.be.true;
+      });
+
+      it('passes the txhash through', () => {
+        expect(scope.body.eth_getTransactionReceipt.params[0]).to.equal('0x123');
+      });
+
+      it('receives the final receipt', () => {
+        expect(receipt).to.deep.equal(EXPECT);
+      });
+    });
+
+    describe('error', () => {
+      before(() => {
+        scope = mockHttp([{ method: 'eth_getTransactionReceipt', reply: { error: { code: -1, message: 'failure' } } }]);
+      });
+
+      it('returns the errors', () => {
+        return contract
+          ._pollTransactionReceipt('0x123')
+          .catch((error) => {
+            expect(error.message).to.match(/failure/);
+          });
+      });
+    });
+  });
+
+  describe('deploy', () => {
+    const contract = new Contract(eth, ABI);
+    const ADDRESS = '0xD337e80eEdBdf86eDBba021797d7e4e00Bb78351';
+    const RECEIPT_PEND = { contractAddress: ADDRESS.toLowerCase(), gasUsed: 50, blockNumber: 0 };
+    const RECEIPT_DONE = { contractAddress: ADDRESS.toLowerCase(), gasUsed: 50, blockNumber: 2500 };
+    const RECEIPT_EXCP = { contractAddress: ADDRESS.toLowerCase(), gasUsed: 1200, blockNumber: 2500 };
+
+    let scope;
+
+    describe('success', () => {
+      before(() => {
+        scope = mockHttp([
+          { method: 'eth_estimateGas', reply: { result: 1000 } },
+          { method: 'eth_postTransaction', reply: { result: '0x678' } },
+          { method: 'eth_checkRequest', reply: { result: null } },
+          { method: 'eth_checkRequest', reply: { result: '0x890' } },
+          { method: 'eth_getTransactionReceipt', reply: { result: null } },
+          { method: 'eth_getTransactionReceipt', reply: { result: RECEIPT_PEND } },
+          { method: 'eth_getTransactionReceipt', reply: { result: RECEIPT_DONE } },
+          { method: 'eth_getCode', reply: { result: '0x456' } }
+        ]);
+
+        return contract.deploy({ data: '0x123' }, []);
+      });
+
+      it('calls estimateGas, postTransaction, checkRequest, getTransactionReceipt & getCode in order', () => {
+        expect(scope.isDone()).to.be.true;
+      });
+
+      it('passes the options through to postTransaction (incl. gas calculation)', () => {
+        expect(scope.body.eth_postTransaction.params).to.deep.equal([
+          { data: '0x123', gas: '0x4b0' }
+        ]);
+      });
+
+      it('sets the address of the contract', () => {
+        expect(contract.address).to.equal(ADDRESS);
+      });
+    });
+
+    describe('error', () => {
+      it('fails when gasUsed == gas', () => {
+        mockHttp([
+          { method: 'eth_estimateGas', reply: { result: 1000 } },
+          { method: 'eth_postTransaction', reply: { result: '0x678' } },
+          { method: 'eth_checkRequest', reply: { result: '0x789' } },
+          { method: 'eth_getTransactionReceipt', reply: { result: RECEIPT_EXCP } }
+        ]);
+
+        return contract
+          .deploy({ data: '0x123' }, [])
+          .catch((error) => {
+            expect(error.message).to.match(/not deployed, gasUsed/);
+          });
+      });
+
+      it('fails when no code was deployed', () => {
+        mockHttp([
+          { method: 'eth_estimateGas', reply: { result: 1000 } },
+          { method: 'eth_postTransaction', reply: { result: '0x678' } },
+          { method: 'eth_checkRequest', reply: { result: '0x789' } },
+          { method: 'eth_getTransactionReceipt', reply: { result: RECEIPT_DONE } },
+          { method: 'eth_getCode', reply: { result: '0x' } }
+        ]);
+
+        return contract
+          .deploy({ data: '0x123' }, [])
+          .catch((error) => {
+            expect(error.message).to.match(/not deployed, getCode/);
+          });
+      });
+    });
+  });
+
+  describe('bindings', () => {
+    let contract;
+    let cons;
+    let func;
+
+    beforeEach(() => {
+      contract = new Contract(eth, ABI);
+      contract.at(ADDR);
+      cons = contract.constructors[0];
+      func = contract.functions.find((fn) => fn.name === 'test');
+    });
+
+    describe('_addOptionsTo', () => {
+      it('works on no object specified', () => {
+        expect(contract._addOptionsTo()).to.deep.equal({ to: ADDR });
+      });
+
+      it('uses the contract address when none specified', () => {
+        expect(contract._addOptionsTo({ from: 'me' })).to.deep.equal({ to: ADDR, from: 'me' });
+      });
+
+      it('overrides the contract address when specified', () => {
+        expect(contract._addOptionsTo({ to: 'you', from: 'me' })).to.deep.equal({ to: 'you', from: 'me' });
+      });
+    });
+
+    describe('attachments', () => {
+      it('attaches .call, .postTransaction & .estimateGas to constructors', () => {
+        expect(isFunction(cons.call)).to.be.true;
+        expect(isFunction(cons.postTransaction)).to.be.true;
+        expect(isFunction(cons.estimateGas)).to.be.true;
+      });
+
+      it('attaches .call, .postTransaction & .estimateGas to functions', () => {
+        expect(isFunction(func.call)).to.be.true;
+        expect(isFunction(func.postTransaction)).to.be.true;
+        expect(isFunction(func.estimateGas)).to.be.true;
+      });
+
+      it('attaches .call only to constant functions', () => {
+        func = (new Contract(eth, [{ type: 'function', name: 'test', constant: true }])).functions[0];
+
+        expect(isFunction(func.call)).to.be.true;
+        expect(isFunction(func.postTransaction)).to.be.false;
+        expect(isFunction(func.estimateGas)).to.be.false;
+      });
+    });
+
+    describe('postTransaction', () => {
+      beforeEach(() => {
+        scope = mockHttp([{ method: 'eth_postTransaction', reply: { result: ['hashId'] } }]);
+      });
+
+      it('encodes options and mades an eth_postTransaction call', () => {
+        return func
+          .postTransaction({ someExtras: 'foo' }, VALUES)
+          .then(() => {
+            expect(scope.isDone()).to.be.true;
+            expect(scope.body.eth_postTransaction.params[0]).to.deep.equal({
+              someExtras: 'foo',
+              to: ADDR,
+              data: ENCODED
+            });
+          });
+      });
+    });
+
+    describe('estimateGas', () => {
+      beforeEach(() => {
+        scope = mockHttp([{ method: 'eth_estimateGas', reply: { result: ['0x123'] } }]);
+      });
+
+      it('encodes options and mades an eth_estimateGas call', () => {
+        return func
+          .estimateGas({ someExtras: 'foo' }, VALUES)
+          .then((amount) => {
+            expect(scope.isDone()).to.be.true;
+            expect(amount.toString(16)).to.equal('123');
+            expect(scope.body.eth_estimateGas.params).to.deep.equal([{
+              someExtras: 'foo',
+              to: ADDR,
+              data: ENCODED
+            }]);
+          });
+      });
+    });
+
+    describe('call', () => {
+      it('encodes options and mades an eth_call call', () => {
+        scope = mockHttp([{ method: 'eth_call', reply: { result: RETURN1 } }]);
+
+        return func
+          .call({ someExtras: 'foo' }, VALUES)
+          .then((result) => {
+            expect(scope.isDone()).to.be.true;
+            expect(scope.body.eth_call.params).to.deep.equal([{
+              someExtras: 'foo',
+              to: ADDR,
+              data: ENCODED
+            }, 'latest']);
+            expect(result.toString(16)).to.equal('123456');
+          });
+      });
+
+      it('encodes options and mades an eth_call call (multiple returns)', () => {
+        scope = mockHttp([{ method: 'eth_call', reply: { result: `${RETURN1}${RETURN2}` } }]);
+
+        return contract.functions[1]
+          .call({}, [])
+          .then((result) => {
+            expect(scope.isDone()).to.be.true;
+            expect(result.length).to.equal(2);
+            expect(result[0].toString(16)).to.equal('123456');
+            expect(result[1].toString(16)).to.equal('456789');
+          });
+      });
+    });
+  });
+
+  describe('subscribe', () => {
+    const abi = [
+      {
+        anonymous: false, name: 'Message', type: 'event',
+        inputs: [
+          { indexed: true, name: 'postId', type: 'uint256' },
+          { indexed: false, name: 'parentId', type: 'uint256' },
+          { indexed: false, name: 'sender', type: 'address' },
+          { indexed: false, name: 'at', type: 'uint256' },
+          { indexed: false, name: 'messageId', type: 'uint256' },
+          { indexed: false, name: 'message', type: 'string' }
+        ]
+      }
+    ];
+    const logs = [{
+      address: '0x22bff18ec62281850546a664bb63a5c06ac5f76c',
+      blockHash: '0xa9280530a3b47bee2fc80f2862fd56502ae075350571d724d6442ea4c597347b',
+      blockNumber: '0x4fcd',
+      data: '0x000000000000000000000000000000000000000000000000000000000000000000000000000000000000000063cf90d3f0410092fc0fca41846f5962239791950000000000000000000000000000000000000000000000000000000056e6c85f0000000000000000000000000000000000000000000000000001000000004fcd00000000000000000000000000000000000000000000000000000000000000a0000000000000000000000000000000000000000000000000000000000000000d706f7374286d6573736167652900000000000000000000000000000000000000',
+      logIndex: '0x0',
+      topics: [
+        '0x954ba6c157daf8a26539574ffa64203c044691aa57251af95f4b48d85ec00dd5',
+        '0x0000000000000000000000000000000000000000000000000001000000004fe0'
+      ],
+      transactionHash: '0xca16f537d761d13e4e80953b754e2b15541f267d6cad9381f750af1bae1e4917',
+      transactionIndex: '0x0'
+    }];
+    const parsed = [{
+      address: '0x22bfF18ec62281850546a664bb63a5C06AC5F76C',
+      blockHash: '0xa9280530a3b47bee2fc80f2862fd56502ae075350571d724d6442ea4c597347b',
+      blockNumber: new BigNumber(20429),
+      data: '0x000000000000000000000000000000000000000000000000000000000000000000000000000000000000000063cf90d3f0410092fc0fca41846f5962239791950000000000000000000000000000000000000000000000000000000056e6c85f0000000000000000000000000000000000000000000000000001000000004fcd00000000000000000000000000000000000000000000000000000000000000a0000000000000000000000000000000000000000000000000000000000000000d706f7374286d6573736167652900000000000000000000000000000000000000',
+      event: 'Message',
+      logIndex: new BigNumber(0),
+      params: {
+        at: new BigNumber(1457965151),
+        message: 'post(message)',
+        messageId: new BigNumber(281474976731085),
+        parentId: new BigNumber(0),
+        postId: new BigNumber(281474976731104),
+        sender: '0x63Cf90D3f0410092FC0fca41846f596223979195'
+      },
+      topics: [
+        '0x954ba6c157daf8a26539574ffa64203c044691aa57251af95f4b48d85ec00dd5', '0x0000000000000000000000000000000000000000000000000001000000004fe0'
+      ],
+      transactionHash: '0xca16f537d761d13e4e80953b754e2b15541f267d6cad9381f750af1bae1e4917',
+      transactionIndex: new BigNumber(0)
+    }];
+    let contract;
+
+    beforeEach(() => {
+      contract = new Contract(eth, abi);
+      contract.at(ADDR);
+    });
+
+    describe('invalid events', () => {
+      it('fails to subscribe to an invalid names', () => {
+        return contract
+          .subscribe('invalid')
+          .catch((error) => {
+            expect(error.message).to.match(/invalid is not a valid eventName/);
+          });
+      });
+    });
+
+    describe('valid events', () => {
+      let cbb;
+      let cbe;
+
+      beforeEach(() => {
+        scope = mockHttp([
+          { method: 'eth_newFilter', reply: { result: '0x123' } },
+          { method: 'eth_getFilterLogs', reply: { result: logs } },
+          { method: 'eth_newFilter', reply: { result: '0x123' } },
+          { method: 'eth_getFilterLogs', reply: { result: logs } }
+        ]);
+        cbb = sinon.stub();
+        cbe = sinon.stub();
+
+        return contract.subscribe('Message', {}, cbb);
+      });
+
+      it('sets the subscriptionId returned', () => {
+        return contract
+          .subscribe('Message', {}, cbe)
+          .then((subscriptionId) => {
+            expect(subscriptionId).to.equal(1);
+          });
+      });
+
+      it('creates a new filter and retrieves the logs on it', () => {
+        return contract
+          .subscribe('Message', {}, cbe)
+          .then((subscriptionId) => {
+            expect(scope.isDone()).to.be.true;
+          });
+      });
+
+      it('returns the logs to the callback', () => {
+        return contract
+          .subscribe('Message', {}, cbe)
+          .then((subscriptionId) => {
+            expect(cbe).to.have.been.calledWith(null, parsed);
+          });
+      });
+    });
+  });
+});
diff --git a/js/src/api/contract/index.js b/js/src/api/contract/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..18051a69f910ea8d9baa3a541e8ed553f3fb0966
--- /dev/null
+++ b/js/src/api/contract/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './contract';
diff --git a/js/src/api/format/input.js b/js/src/api/format/input.js
new file mode 100644
index 0000000000000000000000000000000000000000..16ca2b7f29979ebf3e214eb7b28fef55941daa9b
--- /dev/null
+++ b/js/src/api/format/input.js
@@ -0,0 +1,139 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+
+import { isArray, isHex, isInstanceOf, isString } from '../util/types';
+
+export function inAddress (address) {
+  // TODO: address validation if we have upper-lower addresses
+  return inHex(address);
+}
+
+export function inBlockNumber (blockNumber) {
+  if (isString(blockNumber)) {
+    switch (blockNumber) {
+      case 'earliest':
+      case 'latest':
+      case 'pending':
+        return blockNumber;
+    }
+  }
+
+  return inNumber16(blockNumber);
+}
+
+export function inData (data) {
+  if (data && data.length && !isHex(data)) {
+    data = data.split('').map((chr) => {
+      return `0${chr.charCodeAt(0).toString(16)}`.slice(-2);
+    }).join('');
+  }
+
+  return inHex(data);
+}
+
+export function inTopics (_topics) {
+  let topics = (_topics || [])
+    .filter((topic) => topic)
+    .map(inHex);
+
+  while (topics.length < 4) {
+    topics.push(null);
+  }
+
+  return topics;
+}
+
+export function inFilter (options) {
+  if (options) {
+    Object.keys(options).forEach((key) => {
+      switch (key) {
+        case 'address':
+          if (isArray(options[key])) {
+            options[key] = options[key].map(inAddress);
+          } else {
+            options[key] = inAddress(options[key]);
+          }
+          break;
+
+        case 'fromBlock':
+        case 'toBlock':
+          options[key] = inBlockNumber(options[key]);
+          break;
+
+        case 'limit':
+          options[key] = inNumber10(options[key]);
+          break;
+
+        case 'topics':
+          options[key] = inTopics(options[key]);
+      }
+    });
+  }
+
+  return options;
+}
+
+export function inHex (str) {
+  if (str && str.substr(0, 2) === '0x') {
+    return str.toLowerCase();
+  }
+
+  return `0x${(str || '').toLowerCase()}`;
+}
+
+export function inNumber10 (number) {
+  if (isInstanceOf(number, BigNumber)) {
+    return number.toNumber();
+  }
+
+  return (new BigNumber(number || 0)).toNumber();
+}
+
+export function inNumber16 (number) {
+  if (isInstanceOf(number, BigNumber)) {
+    return inHex(number.toString(16));
+  }
+
+  return inHex((new BigNumber(number || 0)).toString(16));
+}
+
+export function inOptions (options) {
+  if (options) {
+    Object.keys(options).forEach((key) => {
+      switch (key) {
+        case 'from':
+        case 'to':
+          options[key] = inAddress(options[key]);
+          break;
+
+        case 'gas':
+        case 'gasPrice':
+        case 'value':
+        case 'nonce':
+          options[key] = inNumber16(options[key]);
+          break;
+
+        case 'data':
+          options[key] = inData(options[key]);
+          break;
+      }
+    });
+  }
+
+  return options;
+}
diff --git a/js/src/api/format/input.spec.js b/js/src/api/format/input.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..219886d05f0c945015ce999c28cca44b24e40a7c
--- /dev/null
+++ b/js/src/api/format/input.spec.js
@@ -0,0 +1,245 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+
+import { inAddress, inBlockNumber, inData, inFilter, inHex, inNumber10, inNumber16, inOptions } from './input';
+import { isAddress } from '../../../test/types';
+
+describe('api/format/input', () => {
+  const address = '0x63cf90d3f0410092fc0fca41846f596223979195';
+
+  describe('inAddress', () => {
+    const address = '63cf90d3f0410092fc0fca41846f596223979195';
+
+    it('adds the leading 0x as required', () => {
+      expect(inAddress(address)).to.equal(`0x${address}`);
+    });
+
+    it('returns verified addresses as-is', () => {
+      expect(inAddress(`0x${address}`)).to.equal(`0x${address}`);
+    });
+
+    it('returns lowercase equivalents', () => {
+      expect(inAddress(address.toUpperCase())).to.equal(`0x${address}`);
+    });
+
+    it('returns 0x on null addresses', () => {
+      expect(inAddress()).to.equal('0x');
+    });
+  });
+
+  describe('inBlockNumber()', () => {
+    it('returns earliest as-is', () => {
+      expect(inBlockNumber('earliest')).to.equal('earliest');
+    });
+
+    it('returns latest as-is', () => {
+      expect(inBlockNumber('latest')).to.equal('latest');
+    });
+
+    it('returns pending as-is', () => {
+      expect(inBlockNumber('pending')).to.equal('pending');
+    });
+
+    it('formats existing BigNumber into hex', () => {
+      expect(inBlockNumber(new BigNumber(0x123456))).to.equal('0x123456');
+    });
+
+    it('formats hex strings into hex', () => {
+      expect(inBlockNumber('0x123456')).to.equal('0x123456');
+    });
+
+    it('formats numbers into hex', () => {
+      expect(inBlockNumber(0x123456)).to.equal('0x123456');
+    });
+  });
+
+  describe('inData', () => {
+    it('formats to hex', () => {
+      expect(inData('123456')).to.equal('0x123456');
+    });
+
+    it('converts a string to a hex representation', () => {
+      expect(inData('jaco')).to.equal('0x6a61636f');
+    });
+  });
+
+  describe('inHex', () => {
+    it('leaves leading 0x as-is', () => {
+      expect(inHex('0x123456')).to.equal('0x123456');
+    });
+
+    it('adds a leading 0x', () => {
+      expect(inHex('123456')).to.equal('0x123456');
+    });
+
+    it('returns uppercase as lowercase (leading 0x)', () => {
+      expect(inHex('0xABCDEF')).to.equal('0xabcdef');
+    });
+
+    it('returns uppercase as lowercase (no leading 0x)', () => {
+      expect(inHex('ABCDEF')).to.equal('0xabcdef');
+    });
+
+    it('handles empty & null', () => {
+      expect(inHex()).to.equal('0x');
+      expect(inHex('')).to.equal('0x');
+    });
+  });
+
+  describe('inFilter', () => {
+    ['address'].forEach((input) => {
+      it(`formats ${input} address as address`, () => {
+        const block = {};
+        block[input] = address;
+        const formatted = inFilter(block)[input];
+
+        expect(isAddress(formatted)).to.be.true;
+        expect(formatted).to.equal(address);
+      });
+    });
+
+    ['fromBlock', 'toBlock'].forEach((input) => {
+      it(`formats ${input} number as blockNumber`, () => {
+        const block = {};
+        block[input] = 0x123;
+        const formatted = inFilter(block)[input];
+
+        expect(formatted).to.equal('0x123');
+      });
+    });
+
+    it('ignores and passes through unknown keys', () => {
+      expect(inFilter({ someRandom: 'someRandom' })).to.deep.equal({ someRandom: 'someRandom' });
+    });
+
+    it('formats an filter options object with relevant entries converted', () => {
+      expect(
+        inFilter({
+          address: address,
+          fromBlock: 'latest',
+          toBlock: 0x101,
+          extraData: 'someExtraStuffInHere',
+          limit: 0x32
+        })
+      ).to.deep.equal({
+        address: address,
+        fromBlock: 'latest',
+        toBlock: '0x101',
+        extraData: 'someExtraStuffInHere',
+        limit: 50
+      });
+    });
+  });
+
+  describe('inNumber10()', () => {
+    it('formats existing BigNumber into number', () => {
+      expect(inNumber10(new BigNumber(123))).to.equal(123);
+    });
+
+    it('formats hex strings into decimal', () => {
+      expect(inNumber10('0x0a')).to.equal(10);
+    });
+
+    it('formats numbers into number', () => {
+      expect(inNumber10(123)).to.equal(123);
+    });
+
+    it('formats undefined into 0', () => {
+      expect(inNumber10()).to.equal(0);
+    });
+  });
+
+  describe('inNumber16()', () => {
+    it('formats existing BigNumber into hex', () => {
+      expect(inNumber16(new BigNumber(0x123456))).to.equal('0x123456');
+    });
+
+    it('formats hex strings into hex', () => {
+      expect(inNumber16('0x123456')).to.equal('0x123456');
+    });
+
+    it('formats numbers into hex', () => {
+      expect(inNumber16(0x123456)).to.equal('0x123456');
+    });
+
+    it('formats undefined into 0', () => {
+      expect(inNumber16()).to.equal('0x0');
+    });
+  });
+
+  describe('inOptions', () => {
+    ['data'].forEach((input) => {
+      it(`converts ${input} to hex data`, () => {
+        const block = {};
+        block[input] = '1234';
+        const formatted = inData(block[input]);
+
+        expect(formatted).to.equal('0x1234');
+      });
+    });
+
+    ['from', 'to'].forEach((input) => {
+      it(`formats ${input} address as address`, () => {
+        const block = {};
+        block[input] = address;
+        const formatted = inOptions(block)[input];
+
+        expect(isAddress(formatted)).to.be.true;
+        expect(formatted).to.equal(address);
+      });
+    });
+
+    ['gas', 'gasPrice', 'value', 'nonce'].forEach((input) => {
+      it(`formats ${input} number as hexnumber`, () => {
+        const block = {};
+        block[input] = 0x123;
+        const formatted = inOptions(block)[input];
+
+        expect(formatted).to.equal('0x123');
+      });
+    });
+
+    it('ignores and passes through unknown keys', () => {
+      expect(inOptions({ someRandom: 'someRandom' })).to.deep.equal({ someRandom: 'someRandom' });
+    });
+
+    it('formats an options object with relevant entries converted', () => {
+      expect(
+        inOptions({
+          from: address,
+          to: address,
+          gas: new BigNumber('0x100'),
+          gasPrice: 0x101,
+          value: 258,
+          nonce: '0x104',
+          data: '0123456789',
+          extraData: 'someExtraStuffInHere'
+        })
+      ).to.deep.equal({
+        from: address,
+        to: address,
+        gas: '0x100',
+        gasPrice: '0x101',
+        value: '0x102',
+        nonce: '0x104',
+        data: '0x0123456789',
+        extraData: 'someExtraStuffInHere'
+      });
+    });
+  });
+});
diff --git a/js/src/api/format/output.js b/js/src/api/format/output.js
new file mode 100644
index 0000000000000000000000000000000000000000..611c2e74e79dc59cc1427f6864a6ea49f383a79a
--- /dev/null
+++ b/js/src/api/format/output.js
@@ -0,0 +1,165 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+
+import { toChecksumAddress } from '../../abi/util/address';
+
+export function outAccountInfo (infos) {
+  const ret = {};
+
+  Object.keys(infos).forEach((address) => {
+    const info = infos[address];
+
+    ret[outAddress(address)] = {
+      name: info.name,
+      uuid: info.uuid,
+      meta: JSON.parse(info.meta)
+    };
+  });
+
+  return ret;
+}
+
+export function outAddress (address) {
+  return toChecksumAddress(address);
+}
+
+export function outBlock (block) {
+  if (block) {
+    Object.keys(block).forEach((key) => {
+      switch (key) {
+        case 'author':
+        case 'miner':
+          block[key] = outAddress(block[key]);
+          break;
+
+        case 'difficulty':
+        case 'gasLimit':
+        case 'gasUsed':
+        case 'nonce':
+        case 'number':
+        case 'totalDifficulty':
+          block[key] = outNumber(block[key]);
+          break;
+
+        case 'timestamp':
+          block[key] = outDate(block[key]);
+          break;
+      }
+    });
+  }
+
+  return block;
+}
+
+export function outDate (date) {
+  return new Date(outNumber(date).toNumber() * 1000);
+}
+
+export function outLog (log) {
+  Object.keys(log).forEach((key) => {
+    switch (key) {
+      case 'blockNumber':
+      case 'logIndex':
+      case 'transactionIndex':
+        log[key] = outNumber(log[key]);
+        break;
+
+      case 'address':
+        log[key] = outAddress(log[key]);
+        break;
+    }
+  });
+
+  return log;
+}
+
+export function outNumber (number) {
+  return new BigNumber(number || 0);
+}
+
+export function outPeers (peers) {
+  return {
+    active: outNumber(peers.active),
+    connected: outNumber(peers.connected),
+    max: outNumber(peers.max)
+  };
+}
+
+export function outReceipt (receipt) {
+  if (receipt) {
+    Object.keys(receipt).forEach((key) => {
+      switch (key) {
+        case 'blockNumber':
+        case 'cumulativeGasUsed':
+        case 'gasUsed':
+        case 'transactionIndex':
+          receipt[key] = outNumber(receipt[key]);
+          break;
+
+        case 'contractAddress':
+          receipt[key] = outAddress(receipt[key]);
+          break;
+      }
+    });
+  }
+
+  return receipt;
+}
+
+export function outSignerRequest (request) {
+  if (request) {
+    Object.keys(request).forEach((key) => {
+      switch (key) {
+        case 'id':
+          request[key] = outNumber(request[key]);
+          break;
+
+        case 'payload':
+          request[key].transaction = outTransaction(request[key].transaction);
+          break;
+      }
+    });
+  }
+
+  return request;
+}
+
+export function outTransaction (tx) {
+  if (tx) {
+    Object.keys(tx).forEach((key) => {
+      switch (key) {
+        case 'blockNumber':
+        case 'gasPrice':
+        case 'gas':
+        case 'nonce':
+        case 'transactionIndex':
+        case 'value':
+          tx[key] = outNumber(tx[key]);
+          break;
+
+        case 'creates':
+        case 'from':
+        case 'to':
+          tx[key] = outAddress(tx[key]);
+          break;
+      }
+    });
+  }
+
+  return tx;
+}
diff --git a/js/src/api/format/output.spec.js b/js/src/api/format/output.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..af1280f3bf7ade834eba31f8058ed0a3b345671d
--- /dev/null
+++ b/js/src/api/format/output.spec.js
@@ -0,0 +1,247 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+
+import { outBlock, outAccountInfo, outAddress, outDate, outNumber, outPeers, outReceipt, outTransaction } from './output';
+import { isAddress, isBigNumber, isInstanceOf } from '../../../test/types';
+
+describe('api/format/output', () => {
+  const address = '0x63cf90d3f0410092fc0fca41846f596223979195';
+  const checksum = '0x63Cf90D3f0410092FC0fca41846f596223979195';
+
+  describe('outAccountInfo', () => {
+    it('returns meta objects parsed', () => {
+      expect(outAccountInfo(
+        { '0x63cf90d3f0410092fc0fca41846f596223979195': {
+          name: 'name', uuid: 'uuid', meta: '{"name":"456"}' }
+        }
+      )).to.deep.equal({
+        '0x63Cf90D3f0410092FC0fca41846f596223979195': {
+          name: 'name', uuid: 'uuid', meta: { name: '456' }
+        }
+      });
+    });
+  });
+
+  describe('outAddress', () => {
+    it('retuns the address as checksummed', () => {
+      expect(outAddress(address)).to.equal(checksum);
+    });
+
+    it('retuns the checksum as checksummed', () => {
+      expect(outAddress(checksum)).to.equal(checksum);
+    });
+  });
+
+  describe('outBlock', () => {
+    ['author', 'miner'].forEach((input) => {
+      it(`formats ${input} address as address`, () => {
+        const block = {};
+        block[input] = address;
+        const formatted = outBlock(block)[input];
+
+        expect(isAddress(formatted)).to.be.true;
+        expect(formatted).to.equal(checksum);
+      });
+    });
+
+    ['difficulty', 'gasLimit', 'gasUsed', 'number', 'nonce', 'totalDifficulty'].forEach((input) => {
+      it(`formats ${input} number as hexnumber`, () => {
+        const block = {};
+        block[input] = 0x123;
+        const formatted = outBlock(block)[input];
+
+        expect(isInstanceOf(formatted, BigNumber)).to.be.true;
+        expect(formatted.toString(16)).to.equal('123');
+      });
+    });
+
+    ['timestamp'].forEach((input) => {
+      it(`formats ${input} number as Date`, () => {
+        const block = {};
+        block[input] = 0x57513668;
+        const formatted = outBlock(block)[input];
+
+        expect(isInstanceOf(formatted, Date)).to.be.true;
+        expect(formatted.getTime()).to.equal(1464940136000);
+      });
+    });
+
+    it('ignores and passes through unknown keys', () => {
+      expect(outBlock({ someRandom: 'someRandom' })).to.deep.equal({ someRandom: 'someRandom' });
+    });
+
+    it('formats a block with all the info converted', () => {
+      expect(
+        outBlock({
+          author: address,
+          miner: address,
+          difficulty: '0x100',
+          gasLimit: '0x101',
+          gasUsed: '0x102',
+          number: '0x103',
+          nonce: '0x104',
+          totalDifficulty: '0x105',
+          timestamp: '0x57513668',
+          extraData: 'someExtraStuffInHere'
+        })
+      ).to.deep.equal({
+        author: checksum,
+        miner: checksum,
+        difficulty: new BigNumber('0x100'),
+        gasLimit: new BigNumber('0x101'),
+        gasUsed: new BigNumber('0x102'),
+        number: new BigNumber('0x103'),
+        nonce: new BigNumber('0x104'),
+        totalDifficulty: new BigNumber('0x105'),
+        timestamp: new Date('2016-06-03T07:48:56.000Z'),
+        extraData: 'someExtraStuffInHere'
+      });
+    });
+  });
+
+  describe('outDate', () => {
+    it('converts a second date in unix timestamp', () => {
+      expect(outDate(0x57513668)).to.deep.equal(new Date('2016-06-03T07:48:56.000Z'));
+    });
+  });
+
+  describe('outNumber', () => {
+    it('returns a BigNumber equalling the value', () => {
+      const bn = outNumber('0x123456');
+
+      expect(isBigNumber(bn)).to.be.true;
+      expect(bn.eq(0x123456)).to.be.true;
+    });
+
+    it('assumes 0 when ivalid input', () => {
+      expect(outNumber().eq(0)).to.be.true;
+    });
+  });
+
+  describe('outPeers', () => {
+    it('converts all internal numbers to BigNumbers', () => {
+      expect(outPeers({ active: 789, connected: '456', max: 0x7b })).to.deep.equal({
+        active: new BigNumber(789),
+        connected: new BigNumber(456),
+        max: new BigNumber(123)
+      });
+    });
+  });
+
+  describe('outReceipt', () => {
+    ['contractAddress'].forEach((input) => {
+      it(`formats ${input} address as address`, () => {
+        const block = {};
+        block[input] = address;
+        const formatted = outReceipt(block)[input];
+
+        expect(isAddress(formatted)).to.be.true;
+        expect(formatted).to.equal(checksum);
+      });
+    });
+
+    ['blockNumber', 'cumulativeGasUsed', 'cumulativeGasUsed', 'gasUsed', 'transactionIndex'].forEach((input) => {
+      it(`formats ${input} number as hexnumber`, () => {
+        const block = {};
+        block[input] = 0x123;
+        const formatted = outReceipt(block)[input];
+
+        expect(isInstanceOf(formatted, BigNumber)).to.be.true;
+        expect(formatted.toString(16)).to.equal('123');
+      });
+    });
+
+    it('ignores and passes through unknown keys', () => {
+      expect(outReceipt({ someRandom: 'someRandom' })).to.deep.equal({ someRandom: 'someRandom' });
+    });
+
+    it('formats a receipt with all the info converted', () => {
+      expect(
+        outReceipt({
+          contractAddress: address,
+          blockNumber: '0x100',
+          cumulativeGasUsed: '0x101',
+          gasUsed: '0x102',
+          transactionIndex: '0x103',
+          extraData: 'someExtraStuffInHere'
+        })
+      ).to.deep.equal({
+        contractAddress: checksum,
+        blockNumber: new BigNumber('0x100'),
+        cumulativeGasUsed: new BigNumber('0x101'),
+        gasUsed: new BigNumber('0x102'),
+        transactionIndex: new BigNumber('0x103'),
+        extraData: 'someExtraStuffInHere'
+      });
+    });
+  });
+
+  describe('outTransaction', () => {
+    ['from', 'to'].forEach((input) => {
+      it(`formats ${input} address as address`, () => {
+        const block = {};
+        block[input] = address;
+        const formatted = outTransaction(block)[input];
+
+        expect(isAddress(formatted)).to.be.true;
+        expect(formatted).to.equal(checksum);
+      });
+    });
+
+    ['blockNumber', 'gasPrice', 'gas', 'nonce', 'transactionIndex', 'value'].forEach((input) => {
+      it(`formats ${input} number as hexnumber`, () => {
+        const block = {};
+        block[input] = 0x123;
+        const formatted = outTransaction(block)[input];
+
+        expect(isInstanceOf(formatted, BigNumber)).to.be.true;
+        expect(formatted.toString(16)).to.equal('123');
+      });
+    });
+
+    it('ignores and passes through unknown keys', () => {
+      expect(outTransaction({ someRandom: 'someRandom' })).to.deep.equal({ someRandom: 'someRandom' });
+    });
+
+    it('formats a transaction with all the info converted', () => {
+      expect(
+        outTransaction({
+          from: address,
+          to: address,
+          blockNumber: '0x100',
+          gasPrice: '0x101',
+          gas: '0x102',
+          nonce: '0x103',
+          transactionIndex: '0x104',
+          value: '0x105',
+          extraData: 'someExtraStuffInHere'
+        })
+      ).to.deep.equal({
+        from: checksum,
+        to: checksum,
+        blockNumber: new BigNumber('0x100'),
+        gasPrice: new BigNumber('0x101'),
+        gas: new BigNumber('0x102'),
+        nonce: new BigNumber('0x103'),
+        transactionIndex: new BigNumber('0x104'),
+        value: new BigNumber('0x105'),
+        extraData: 'someExtraStuffInHere'
+      });
+    });
+  });
+});
diff --git a/js/src/api/index.js b/js/src/api/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..b03419eacc6613dfae1c4f3cc7776cb520de7e9c
--- /dev/null
+++ b/js/src/api/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './api';
diff --git a/js/src/api/rpc/db/db.js b/js/src/api/rpc/db/db.js
new file mode 100644
index 0000000000000000000000000000000000000000..9b20316006edecd2a2e16019f54fd3a9abec1aad
--- /dev/null
+++ b/js/src/api/rpc/db/db.js
@@ -0,0 +1,43 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { inHex } from '../../format/input';
+
+export default class Db {
+  constructor (transport) {
+    this._transport = transport;
+  }
+
+  getHex (dbName, keyName) {
+    return this._transport
+      .execute('db_getHex', dbName, keyName);
+  }
+
+  getString (dbName, keyName) {
+    return this._transport
+      .execute('db_getString', dbName, keyName);
+  }
+
+  putHex (dbName, keyName, hexData) {
+    return this._transport
+      .execute('db_putHex', dbName, keyName, inHex(hexData));
+  }
+
+  putString (dbName, keyName, stringData) {
+    return this._transport
+      .execute('db_putString', dbName, keyName, stringData);
+  }
+}
diff --git a/js/src/api/rpc/db/db.spec.js b/js/src/api/rpc/db/db.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..4379b51c4161ee347f992b2b951b5fc71b18d46e
--- /dev/null
+++ b/js/src/api/rpc/db/db.spec.js
@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { TEST_HTTP_URL, mockHttp } from '../../../../test/mockRpc';
+
+import Http from '../../transport/http';
+import Db from './db';
+
+const instance = new Db(new Http(TEST_HTTP_URL));
+
+describe('api/rpc/Db', () => {
+  let scope;
+
+  describe('putHex', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'db_putHex', reply: { result: [] } }]);
+    });
+
+    it('formats the inputs correctly', () => {
+      return instance.putHex('db', 'key', '1234').then(() => {
+        expect(scope.body.db_putHex.params).to.deep.equal(['db', 'key', '0x1234']);
+      });
+    });
+  });
+});
diff --git a/js/src/api/rpc/db/index.js b/js/src/api/rpc/db/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..cd7c2b0b84a234a5cc2ae816c55fd0e946036401
--- /dev/null
+++ b/js/src/api/rpc/db/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './db';
diff --git a/js/src/api/rpc/eth/eth.e2e.js b/js/src/api/rpc/eth/eth.e2e.js
new file mode 100644
index 0000000000000000000000000000000000000000..973ea1c517a92357fcc69a1cf86a670c77cef880
--- /dev/null
+++ b/js/src/api/rpc/eth/eth.e2e.js
@@ -0,0 +1,170 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createHttpApi } from '../../../../test/e2e/ethapi';
+import { isAddress } from '../../../../test/types';
+
+describe('ethapi.eth', () => {
+  const ethapi = createHttpApi();
+  const address = '0x63cf90d3f0410092fc0fca41846f596223979195';
+
+  let latestBlockNumber;
+  let latestBlockHash;
+
+  describe('accounts', () => {
+    it('returns the available accounts', () => {
+      return ethapi.eth.accounts().then((accounts) => {
+        accounts.forEach((account) => {
+          expect(isAddress(account)).to.be.true;
+        });
+      });
+    });
+  });
+
+  describe('blockNumber', () => {
+    it('returns the current blockNumber', () => {
+      return ethapi.eth.blockNumber().then((blockNumber) => {
+        latestBlockNumber = blockNumber;
+        expect(blockNumber.gt(0xabcde)).to.be.true;
+      });
+    });
+  });
+
+  describe('coinbase', () => {
+    it('returns the coinbase', () => {
+      return ethapi.eth.coinbase().then((coinbase) => {
+        expect(isAddress(coinbase)).to.be.true;
+      });
+    });
+  });
+
+  describe('gasPrice', () => {
+    it('returns the current gasPrice', () => {
+      return ethapi.eth.gasPrice().then((gasPrice) => {
+        expect(gasPrice.gt(0)).to.be.true;
+      });
+    });
+  });
+
+  describe('getBalance', () => {
+    it('returns the balance for latest block', () => {
+      return ethapi.eth.getBalance(address).then((balance) => {
+        expect(balance.gt(0)).to.be.true;
+      });
+    });
+
+    it('returns the balance for a very early block', () => {
+      const atBlock = '0x65432';
+      const atValue = '18e07120a6e164fee1b';
+
+      return ethapi.eth
+        .getBalance(address, atBlock)
+        .then((balance) => {
+          expect(balance.toString(16)).to.equal(atValue);
+        })
+        .catch((error) => {
+          // Parity doesn't support pruned-before-block balance lookups
+          expect(error.message).to.match(/not supported/);
+        });
+    });
+
+    it('returns the balance for a recent/out-of-pruning-range block', () => {
+      return ethapi.eth
+        .getBalance(address, latestBlockNumber.minus(1000))
+        .then((balance) => {
+          expect(balance.gt(0)).to.be.true;
+        });
+    });
+  });
+
+  describe('getBlockByNumber', () => {
+    it('returns the latest block', () => {
+      return ethapi.eth.getBlockByNumber().then((block) => {
+        expect(block).to.be.ok;
+      });
+    });
+
+    it('returns a block by blockNumber', () => {
+      return ethapi.eth.getBlockByNumber(latestBlockNumber).then((block) => {
+        latestBlockHash = block.hash;
+        expect(block).to.be.ok;
+      });
+    });
+
+    it('returns a block by blockNumber (full)', () => {
+      return ethapi.eth.getBlockByNumber(latestBlockNumber, true).then((block) => {
+        expect(block).to.be.ok;
+      });
+    });
+  });
+
+  describe('getBlockByHash', () => {
+    it('returns the specified block', () => {
+      return ethapi.eth.getBlockByHash(latestBlockHash).then((block) => {
+        expect(block).to.be.ok;
+        expect(block.hash).to.equal(latestBlockHash);
+      });
+    });
+
+    it('returns the specified block (full)', () => {
+      return ethapi.eth.getBlockByHash(latestBlockHash, true).then((block) => {
+        expect(block).to.be.ok;
+        expect(block.hash).to.equal(latestBlockHash);
+      });
+    });
+  });
+
+  describe('getBlockTransactionCountByHash', () => {
+    it('returns the transactions of the specified hash', () => {
+      return ethapi.eth.getBlockTransactionCountByHash(latestBlockHash).then((count) => {
+        expect(count).to.be.ok;
+        expect(count.gte(0)).to.be.true;
+      });
+    });
+  });
+
+  describe('getBlockTransactionCountByNumber', () => {
+    it('returns the transactions of latest', () => {
+      return ethapi.eth.getBlockTransactionCountByNumber().then((count) => {
+        expect(count).to.be.ok;
+        expect(count.gte(0)).to.be.true;
+      });
+    });
+
+    it('returns the transactions of a specified number', () => {
+      return ethapi.eth.getBlockTransactionCountByNumber(latestBlockNumber).then((count) => {
+        expect(count).to.be.ok;
+        expect(count.gte(0)).to.be.true;
+      });
+    });
+  });
+
+  describe('getTransactionCount', () => {
+    it('returns the count for an address', () => {
+      return ethapi.eth.getTransactionCount(address).then((count) => {
+        expect(count).to.be.ok;
+        expect(count.gte(0x1000c2)).to.be.ok;
+      });
+    });
+
+    it('returns the count for an address at specified blockNumber', () => {
+      return ethapi.eth.getTransactionCount(address, latestBlockNumber).then((count) => {
+        expect(count).to.be.ok;
+        expect(count.gte(0x1000c2)).to.be.ok;
+      });
+    });
+  });
+});
diff --git a/js/src/api/rpc/eth/eth.js b/js/src/api/rpc/eth/eth.js
new file mode 100644
index 0000000000000000000000000000000000000000..60eb172a3392482c63c06927d903286c7d795888
--- /dev/null
+++ b/js/src/api/rpc/eth/eth.js
@@ -0,0 +1,329 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { inAddress, inBlockNumber, inData, inFilter, inHex, inNumber16, inOptions } from '../../format/input';
+import { outAddress, outBlock, outLog, outNumber, outReceipt, outTransaction } from '../../format/output';
+
+export default class Eth {
+  constructor (transport) {
+    this._transport = transport;
+  }
+
+  accounts () {
+    return this._transport
+      .execute('eth_accounts')
+      .then((accounts) => (accounts || []).map(outAddress));
+  }
+
+  blockNumber () {
+    return this._transport
+      .execute('eth_blockNumber')
+      .then(outNumber);
+  }
+
+  call (options, blockNumber = 'latest') {
+    return this._transport
+      .execute('eth_call', inOptions(options), inBlockNumber(blockNumber));
+  }
+
+  checkRequest (requestId) {
+    return this._transport
+      .execute('eth_checkRequest', inNumber16(requestId));
+  }
+
+  coinbase () {
+    return this._transport
+      .execute('eth_coinbase')
+      .then(outAddress);
+  }
+
+  compileLLL (code) {
+    return this._transport
+      .execute('eth_compileLLL', inData(code));
+  }
+
+  compileSerpent (code) {
+    return this._transport
+      .execute('eth_compileSerpent', inData(code));
+  }
+
+  compileSolidity (code) {
+    return this._transport
+      .execute('eth_compileSolidity', inData(code));
+  }
+
+  estimateGas (options) {
+    return this._transport
+      .execute('eth_estimateGas', inOptions(options))
+      .then(outNumber);
+  }
+
+  fetchQueuedTransactions () {
+    return this._transport
+      .execute('eth_fetchQueuedTransactions');
+  }
+
+  flush () {
+    return this._transport
+      .execute('eth_flush');
+  }
+
+  gasPrice () {
+    return this._transport
+      .execute('eth_gasPrice')
+      .then(outNumber);
+  }
+
+  getBalance (address, blockNumber = 'latest') {
+    return this._transport
+      .execute('eth_getBalance', inAddress(address), inBlockNumber(blockNumber))
+      .then(outNumber);
+  }
+
+  getBlockByHash (hash, full = false) {
+    return this._transport
+      .execute('eth_getBlockByHash', inHex(hash), full)
+      .then(outBlock);
+  }
+
+  getBlockByNumber (blockNumber = 'latest', full = false) {
+    return this._transport
+      .execute('eth_getBlockByNumber', inBlockNumber(blockNumber), full)
+      .then(outBlock);
+  }
+
+  getBlockTransactionCountByHash (hash) {
+    return this._transport
+      .execute('eth_getBlockTransactionCountByHash', inHex(hash))
+      .then(outNumber);
+  }
+
+  getBlockTransactionCountByNumber (blockNumber = 'latest') {
+    return this._transport
+      .execute('eth_getBlockTransactionCountByNumber', inBlockNumber(blockNumber))
+      .then(outNumber);
+  }
+
+  getCode (address, blockNumber = 'latest') {
+    return this._transport
+      .execute('eth_getCode', inAddress(address), inBlockNumber(blockNumber));
+  }
+
+  getCompilers () {
+    return this._transport
+      .execute('eth_getCompilers');
+  }
+
+  getFilterChanges (filterId) {
+    return this._transport
+      .execute('eth_getFilterChanges', inNumber16(filterId))
+      .then((logs) => logs.map(outLog));
+  }
+
+  getFilterChangesEx (filterId) {
+    return this._transport
+      .execute('eth_getFilterChangesEx', inNumber16(filterId));
+  }
+
+  getFilterLogs (filterId) {
+    return this._transport
+      .execute('eth_getFilterLogs', inNumber16(filterId))
+      .then((logs) => logs.map(outLog));
+  }
+
+  getFilterLogsEx (filterId) {
+    return this._transport
+      .execute('eth_getFilterLogsEx', inNumber16(filterId));
+  }
+
+  getLogs (options) {
+    return this._transport
+      .execute('eth_getLogs', inFilter(options));
+  }
+
+  getLogsEx (options) {
+    return this._transport
+      .execute('eth_getLogsEx', inFilter(options));
+  }
+
+  getStorageAt (address, index = 0, blockNumber = 'latest') {
+    return this._transport
+      .execute('eth_getStorageAt', inAddress(address), inNumber16(index), inBlockNumber(blockNumber));
+  }
+
+  getTransactionByBlockHashAndIndex (hash, index = 0) {
+    return this._transport
+      .execute('eth_getTransactionByBlockHashAndIndex', inHex(hash), inNumber16(index))
+      .then(outTransaction);
+  }
+
+  getTransactionByBlockNumberAndIndex (blockNumber = 'latest', index = 0) {
+    return this._transport
+      .execute('eth_getTransactionByBlockNumberAndIndex', inBlockNumber(blockNumber), inNumber16(index))
+      .then(outTransaction);
+  }
+
+  getTransactionByHash (hash) {
+    return this._transport
+      .execute('eth_getTransactionByHash', inHex(hash))
+      .then(outTransaction);
+  }
+
+  getTransactionCount (address, blockNumber = 'latest') {
+    return this._transport
+      .execute('eth_getTransactionCount', inAddress(address), inBlockNumber(blockNumber))
+      .then(outNumber);
+  }
+
+  getTransactionReceipt (txhash) {
+    return this._transport
+      .execute('eth_getTransactionReceipt', inHex(txhash))
+      .then(outReceipt);
+  }
+
+  getUncleByBlockHashAndIndex (hash, index = 0) {
+    return this._transport
+      .execute('eth_getUncleByBlockHashAndIndex', inHex(hash), inNumber16(index));
+  }
+
+  getUncleByBlockNumberAndIndex (blockNumber = 'latest', index = 0) {
+    return this._transport
+      .execute('eth_getUncleByBlockNumberAndIndex', inBlockNumber(blockNumber), inNumber16(index));
+  }
+
+  getUncleCountByBlockHash (hash) {
+    return this._transport
+      .execute('eth_getUncleCountByBlockHash', inHex(hash))
+      .then(outNumber);
+  }
+
+  getUncleCountByBlockNumber (blockNumber = 'latest') {
+    return this._transport
+      .execute('eth_getUncleCountByBlockNumber', inBlockNumber(blockNumber))
+      .then(outNumber);
+  }
+
+  getWork () {
+    return this._transport
+      .execute('eth_getWork');
+  }
+
+  hashrate () {
+    return this._transport
+      .execute('eth_hashrate')
+      .then(outNumber);
+  }
+
+  inspectTransaction () {
+    return this._transport
+      .execute('eth_inspectTransaction');
+  }
+
+  mining () {
+    return this._transport
+      .execute('eth_mining');
+  }
+
+  newBlockFilter () {
+    return this._transport
+      .execute('eth_newBlockFilter');
+  }
+
+  newFilter (options) {
+    return this._transport
+      .execute('eth_newFilter', inFilter(options));
+  }
+
+  newFilterEx (options) {
+    return this._transport
+      .execute('eth_newFilterEx', inFilter(options));
+  }
+
+  newPendingTransactionFilter () {
+    return this._transport
+      .execute('eth_newPendingTransactionFilter');
+  }
+
+  notePassword () {
+    return this._transport
+      .execute('eth_notePassword');
+  }
+
+  pendingTransactions () {
+    return this._transport
+      .execute('eth_pendingTransactions');
+  }
+
+  postTransaction (options) {
+    return this._transport
+      .execute('eth_postTransaction', inOptions(options));
+  }
+
+  protocolVersion () {
+    return this._transport
+      .execute('eth_protocolVersion');
+  }
+
+  register () {
+    return this._transport
+      .execute('eth_register');
+  }
+
+  sendRawTransaction (data) {
+    return this._transport
+      .execute('eth_sendRawTransaction', inData(data));
+  }
+
+  sendTransaction (options) {
+    return this._transport
+      .execute('eth_sendTransaction', inOptions(options));
+  }
+
+  sign () {
+    return this._transport
+      .execute('eth_sign');
+  }
+
+  signTransaction () {
+    return this._transport
+      .execute('eth_signTransaction');
+  }
+
+  submitHashrate (hashrate, clientId) {
+    return this._transport
+      .execute('eth_submitHashrate', inNumber16(hashrate), clientId);
+  }
+
+  submitWork (nonce, powHash, mixDigest) {
+    return this._transport
+      .execute('eth_submitWork', inNumber16(nonce), powHash, mixDigest);
+  }
+
+  syncing () {
+    return this._transport
+      .execute('eth_syncing');
+  }
+
+  uninstallFilter (filterId) {
+    return this._transport
+      .execute('eth_uninstallFilter', inHex(filterId));
+  }
+
+  unregister () {
+    return this._transport
+      .execute('eth_unregister');
+  }
+}
diff --git a/js/src/api/rpc/eth/eth.spec.js b/js/src/api/rpc/eth/eth.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..65377db509bb2aa4b110789f628ad45a72ee60c9
--- /dev/null
+++ b/js/src/api/rpc/eth/eth.spec.js
@@ -0,0 +1,474 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { TEST_HTTP_URL, mockHttp } from '../../../../test/mockRpc';
+import { isBigNumber } from '../../../../test/types';
+
+import Http from '../../transport/http';
+import Eth from './eth';
+
+const instance = new Eth(new Http(TEST_HTTP_URL));
+
+describe('rpc/Eth', () => {
+  const address = '0x63Cf90D3f0410092FC0fca41846f596223979195';
+  let scope;
+
+  describe('accounts', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_accounts', reply: { result: [address.toLowerCase()] } }]);
+    });
+
+    it('returns a list of accounts, formatted', () => {
+      return instance.accounts().then((accounts) => {
+        expect(accounts).to.deep.equal([address]);
+      });
+    });
+  });
+
+  describe('blockNumber', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_blockNumber', reply: { result: '0x123456' } }]);
+    });
+
+    it('returns the current blockNumber, formatted', () => {
+      return instance.blockNumber().then((blockNumber) => {
+        expect(isBigNumber(blockNumber)).to.be.true;
+        expect(blockNumber.toString(16)).to.equal('123456');
+      });
+    });
+  });
+
+  describe('call', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_call', reply: { result: [] } }]);
+    });
+
+    it('formats the input options & blockNumber', () => {
+      return instance.call({ data: '12345678' }, 'earliest').then(() => {
+        expect(scope.body.eth_call.params).to.deep.equal([{ data: '0x12345678' }, 'earliest']);
+      });
+    });
+
+    it('provides a latest blockNumber when not specified', () => {
+      return instance.call({ data: '12345678' }).then(() => {
+        expect(scope.body.eth_call.params).to.deep.equal([{ data: '0x12345678' }, 'latest']);
+      });
+    });
+  });
+
+  describe('coinbase', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_coinbase', reply: { result: address.toLowerCase() } }]);
+    });
+
+    it('returns the coinbase, formatted', () => {
+      return instance.coinbase().then((account) => {
+        expect(account).to.deep.equal(address);
+      });
+    });
+  });
+
+  ['LLL', 'Serpent', 'Solidity'].forEach((type) => {
+    const method = `compile${type}`;
+
+    describe(method, () => {
+      beforeEach(() => {
+        scope = mockHttp([{ method: `eth_${method}`, reply: { result: '0x123' } }]);
+      });
+
+      it('formats the input as data, returns the output', () => {
+        return instance[method]('0xabcdef').then((result) => {
+          expect(scope.body[`eth_${method}`].params).to.deep.equal(['0xabcdef']);
+          expect(result).to.equal('0x123');
+        });
+      });
+    });
+  });
+
+  describe('estimateGas', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_estimateGas', reply: { result: '0x123' } }]);
+    });
+
+    it('converts the options correctly', () => {
+      return instance.estimateGas({ gas: 21000 }).then(() => {
+        expect(scope.body.eth_estimateGas.params).to.deep.equal([{ gas: '0x5208' }]);
+      });
+    });
+
+    it('returns the gas used', () => {
+      return instance.estimateGas({}).then((gas) => {
+        expect(isBigNumber(gas)).to.be.true;
+        expect(gas.toString(16)).to.deep.equal('123');
+      });
+    });
+  });
+
+  describe('gasPrice', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_gasPrice', reply: { result: '0x123' } }]);
+    });
+
+    it('returns the fomratted price', () => {
+      return instance.gasPrice().then((price) => {
+        expect(isBigNumber(price)).to.be.true;
+        expect(price.toString(16)).to.deep.equal('123');
+      });
+    });
+  });
+
+  describe('getBalance', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getBalance', reply: { result: '0x123' } }]);
+    });
+
+    it('passes in the address (default blockNumber)', () => {
+      return instance.getBalance(address).then(() => {
+        expect(scope.body.eth_getBalance.params).to.deep.equal([address.toLowerCase(), 'latest']);
+      });
+    });
+
+    it('passes in the address & blockNumber', () => {
+      return instance.getBalance(address, 0x456).then(() => {
+        expect(scope.body.eth_getBalance.params).to.deep.equal([address.toLowerCase(), '0x456']);
+      });
+    });
+
+    it('returns the balance', () => {
+      return instance.getBalance(address, 0x123).then((balance) => {
+        expect(isBigNumber(balance)).to.be.true;
+        expect(balance.toString(16)).to.deep.equal('123');
+      });
+    });
+  });
+
+  describe('getBlockByHash', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getBlockByHash', reply: { result: { miner: address.toLowerCase() } } }]);
+    });
+
+    it('formats the input hash as a hash, default full', () => {
+      return instance.getBlockByHash('1234').then(() => {
+        expect(scope.body.eth_getBlockByHash.params).to.deep.equal(['0x1234', false]);
+      });
+    });
+
+    it('formats the input hash as a hash, full true', () => {
+      return instance.getBlockByHash('1234', true).then(() => {
+        expect(scope.body.eth_getBlockByHash.params).to.deep.equal(['0x1234', true]);
+      });
+    });
+
+    it('formats the output into block', () => {
+      return instance.getBlockByHash('1234').then((block) => {
+        expect(block.miner).to.equal(address);
+      });
+    });
+  });
+
+  describe('getBlockByNumber', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getBlockByNumber', reply: { result: { miner: address.toLowerCase() } } }]);
+    });
+
+    it('assumes blockNumber latest & full false', () => {
+      return instance.getBlockByNumber().then(() => {
+        expect(scope.body.eth_getBlockByNumber.params).to.deep.equal(['latest', false]);
+      });
+    });
+
+    it('uses input blockNumber & full false', () => {
+      return instance.getBlockByNumber('0x1234').then(() => {
+        expect(scope.body.eth_getBlockByNumber.params).to.deep.equal(['0x1234', false]);
+      });
+    });
+
+    it('formats the input blockNumber, full true', () => {
+      return instance.getBlockByNumber(0x1234, true).then(() => {
+        expect(scope.body.eth_getBlockByNumber.params).to.deep.equal(['0x1234', true]);
+      });
+    });
+
+    it('formats the output into block', () => {
+      return instance.getBlockByNumber(0x1234).then((block) => {
+        expect(block.miner).to.equal(address);
+      });
+    });
+  });
+
+  describe('getBlockTransactionCountByHash', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getBlockTransactionCountByHash', reply: { result: '0x123' } }]);
+    });
+
+    it('formats input hash properly', () => {
+      return instance.getBlockTransactionCountByHash('abcdef').then(() => {
+        expect(scope.body.eth_getBlockTransactionCountByHash.params).to.deep.equal(['0xabcdef']);
+      });
+    });
+
+    it('formats the output number', () => {
+      return instance.getBlockTransactionCountByHash('0x1234').then((count) => {
+        expect(isBigNumber(count)).to.be.true;
+        expect(count.toString(16)).to.equal('123');
+      });
+    });
+  });
+
+  describe('getBlockTransactionCountByNumber', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getBlockTransactionCountByNumber', reply: { result: '0x123' } }]);
+    });
+
+    it('specified blockNumber latest when none specified', () => {
+      return instance.getBlockTransactionCountByNumber().then(() => {
+        expect(scope.body.eth_getBlockTransactionCountByNumber.params).to.deep.equal(['latest']);
+      });
+    });
+
+    it('formats input blockNumber properly', () => {
+      return instance.getBlockTransactionCountByNumber(0xabcdef).then(() => {
+        expect(scope.body.eth_getBlockTransactionCountByNumber.params).to.deep.equal(['0xabcdef']);
+      });
+    });
+
+    it('formats the output number', () => {
+      return instance.getBlockTransactionCountByNumber('0x1234').then((count) => {
+        expect(isBigNumber(count)).to.be.true;
+        expect(count.toString(16)).to.equal('123');
+      });
+    });
+  });
+
+  describe('getCode', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getCode', reply: { result: '0x1234567890' } }]);
+    });
+
+    it('passes in the address (default blockNumber)', () => {
+      return instance.getCode(address).then(() => {
+        expect(scope.body.eth_getCode.params).to.deep.equal([address.toLowerCase(), 'latest']);
+      });
+    });
+
+    it('passes in the address & blockNumber', () => {
+      return instance.getCode(address, 0x456).then(() => {
+        expect(scope.body.eth_getCode.params).to.deep.equal([address.toLowerCase(), '0x456']);
+      });
+    });
+
+    it('returns the code', () => {
+      return instance.getCode(address, 0x123).then((code) => {
+        expect(code).to.equal('0x1234567890');
+      });
+    });
+  });
+
+  describe('getStorageAt', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getStorageAt', reply: { result: '0x1234567890' } }]);
+    });
+
+    it('passes in the address (default index& blockNumber)', () => {
+      return instance.getStorageAt(address).then(() => {
+        expect(scope.body.eth_getStorageAt.params).to.deep.equal([address.toLowerCase(), '0x0', 'latest']);
+      });
+    });
+
+    it('passes in the address, index & blockNumber', () => {
+      return instance.getStorageAt(address, 15, 0x456).then(() => {
+        expect(scope.body.eth_getStorageAt.params).to.deep.equal([address.toLowerCase(), '0xf', '0x456']);
+      });
+    });
+
+    it('returns the storage', () => {
+      return instance.getStorageAt(address, 0x123).then((storage) => {
+        expect(storage).to.equal('0x1234567890');
+      });
+    });
+  });
+
+  describe('getTransactionByBlockHashAndIndex', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getTransactionByBlockHashAndIndex', reply: { result: { to: address.toLowerCase() } } }]);
+    });
+
+    it('passes in the hash (default index)', () => {
+      return instance.getTransactionByBlockHashAndIndex('12345').then(() => {
+        expect(scope.body.eth_getTransactionByBlockHashAndIndex.params).to.deep.equal(['0x12345', '0x0']);
+      });
+    });
+
+    it('passes in the hash & specified index', () => {
+      return instance.getTransactionByBlockHashAndIndex('6789', 0x456).then(() => {
+        expect(scope.body.eth_getTransactionByBlockHashAndIndex.params).to.deep.equal(['0x6789', '0x456']);
+      });
+    });
+
+    it('returns the formatted transaction', () => {
+      return instance.getTransactionByBlockHashAndIndex('6789', 0x123).then((tx) => {
+        expect(tx).to.deep.equal({ to: address });
+      });
+    });
+  });
+
+  describe('getTransactionByBlockNumberAndIndex', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getTransactionByBlockNumberAndIndex', reply: { result: { to: address.toLowerCase() } } }]);
+    });
+
+    it('passes in the default parameters', () => {
+      return instance.getTransactionByBlockNumberAndIndex().then(() => {
+        expect(scope.body.eth_getTransactionByBlockNumberAndIndex.params).to.deep.equal(['latest', '0x0']);
+      });
+    });
+
+    it('passes in the blockNumber & specified index', () => {
+      return instance.getTransactionByBlockNumberAndIndex('0x6789', 0x456).then(() => {
+        expect(scope.body.eth_getTransactionByBlockNumberAndIndex.params).to.deep.equal(['0x6789', '0x456']);
+      });
+    });
+
+    it('returns the formatted transaction', () => {
+      return instance.getTransactionByBlockNumberAndIndex('0x6789', 0x123).then((tx) => {
+        expect(tx).to.deep.equal({ to: address });
+      });
+    });
+  });
+
+  describe('getTransactionByHash', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getTransactionByHash', reply: { result: { to: address.toLowerCase() } } }]);
+    });
+
+    it('passes in the hash', () => {
+      return instance.getTransactionByHash('12345').then(() => {
+        expect(scope.body.eth_getTransactionByHash.params).to.deep.equal(['0x12345']);
+      });
+    });
+
+    it('returns the formatted transaction', () => {
+      return instance.getTransactionByHash('6789').then((tx) => {
+        expect(tx).to.deep.equal({ to: address });
+      });
+    });
+  });
+
+  describe('getTransactionCount', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getTransactionCount', reply: { result: '0x123' } }]);
+    });
+
+    it('passes in the address (default blockNumber)', () => {
+      return instance.getTransactionCount(address).then(() => {
+        expect(scope.body.eth_getTransactionCount.params).to.deep.equal([address.toLowerCase(), 'latest']);
+      });
+    });
+
+    it('passes in the address & blockNumber', () => {
+      return instance.getTransactionCount(address, 0x456).then(() => {
+        expect(scope.body.eth_getTransactionCount.params).to.deep.equal([address.toLowerCase(), '0x456']);
+      });
+    });
+
+    it('returns the count, formatted', () => {
+      return instance.getTransactionCount(address, 0x123).then((count) => {
+        expect(isBigNumber(count)).to.be.true;
+        expect(count.toString(16)).to.equal('123');
+      });
+    });
+  });
+
+  describe('getUncleByBlockHashAndIndex', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getUncleByBlockHashAndIndex', reply: { result: [] } }]);
+    });
+
+    it('passes in the hash (default index)', () => {
+      return instance.getUncleByBlockHashAndIndex('12345').then(() => {
+        expect(scope.body.eth_getUncleByBlockHashAndIndex.params).to.deep.equal(['0x12345', '0x0']);
+      });
+    });
+
+    it('passes in the hash & specified index', () => {
+      return instance.getUncleByBlockHashAndIndex('6789', 0x456).then(() => {
+        expect(scope.body.eth_getUncleByBlockHashAndIndex.params).to.deep.equal(['0x6789', '0x456']);
+      });
+    });
+  });
+
+  describe('getUncleByBlockNumberAndIndex', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getUncleByBlockNumberAndIndex', reply: { result: [] } }]);
+    });
+
+    it('passes in the default parameters', () => {
+      return instance.getUncleByBlockNumberAndIndex().then(() => {
+        expect(scope.body.eth_getUncleByBlockNumberAndIndex.params).to.deep.equal(['latest', '0x0']);
+      });
+    });
+
+    it('passes in the blockNumber & specified index', () => {
+      return instance.getUncleByBlockNumberAndIndex('0x6789', 0x456).then(() => {
+        expect(scope.body.eth_getUncleByBlockNumberAndIndex.params).to.deep.equal(['0x6789', '0x456']);
+      });
+    });
+  });
+
+  describe('getUncleCountByBlockHash', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getUncleCountByBlockHash', reply: { result: '0x123' } }]);
+    });
+
+    it('passes in the hash', () => {
+      return instance.getUncleCountByBlockHash('12345').then(() => {
+        expect(scope.body.eth_getUncleCountByBlockHash.params).to.deep.equal(['0x12345']);
+      });
+    });
+
+    it('formats the output number', () => {
+      return instance.getUncleCountByBlockHash('0x1234').then((count) => {
+        expect(isBigNumber(count)).to.be.true;
+        expect(count.toString(16)).to.equal('123');
+      });
+    });
+  });
+
+  describe('getUncleCountByBlockNumber', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_getUncleCountByBlockNumber', reply: { result: '0x123' } }]);
+    });
+
+    it('passes in the default parameters', () => {
+      return instance.getUncleCountByBlockNumber().then(() => {
+        expect(scope.body.eth_getUncleCountByBlockNumber.params).to.deep.equal(['latest']);
+      });
+    });
+
+    it('passes in the blockNumber', () => {
+      return instance.getUncleCountByBlockNumber('0x6789').then(() => {
+        expect(scope.body.eth_getUncleCountByBlockNumber.params).to.deep.equal(['0x6789']);
+      });
+    });
+
+    it('formats the output number', () => {
+      return instance.getUncleCountByBlockNumber('0x1234').then((count) => {
+        expect(isBigNumber(count)).to.be.true;
+        expect(count.toString(16)).to.equal('123');
+      });
+    });
+  });
+});
diff --git a/js/src/api/rpc/eth/index.js b/js/src/api/rpc/eth/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0d0e8c5570c4b47dbce72d33d55d0df349f59012
--- /dev/null
+++ b/js/src/api/rpc/eth/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './eth';
diff --git a/js/src/api/rpc/ethcore/ethcore.e2e.js b/js/src/api/rpc/ethcore/ethcore.e2e.js
new file mode 100644
index 0000000000000000000000000000000000000000..ee4056b50f233990a6d39eb6ac6ad315df986c8a
--- /dev/null
+++ b/js/src/api/rpc/ethcore/ethcore.e2e.js
@@ -0,0 +1,61 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createHttpApi } from '../../../../test/e2e/ethapi';
+
+describe('ethapi.ethcore', () => {
+  const ethapi = createHttpApi();
+
+  describe('gasFloorTarget', () => {
+    it('returns and translates the target', () => {
+      return ethapi.ethcore.gasFloorTarget().then((value) => {
+        expect(value.gt(0)).to.be.true;
+      });
+    });
+  });
+
+  describe('netChain', () => {
+    it('returns and the chain', () => {
+      return ethapi.ethcore.netChain().then((value) => {
+        expect(value).to.equal('morden');
+      });
+    });
+  });
+
+  describe('netPort', () => {
+    it('returns and translates the port', () => {
+      return ethapi.ethcore.netPort().then((value) => {
+        expect(value.gt(0)).to.be.true;
+      });
+    });
+  });
+
+  describe('transactionsLimit', () => {
+    it('returns and translates the limit', () => {
+      return ethapi.ethcore.transactionsLimit().then((value) => {
+        expect(value.gt(0)).to.be.true;
+      });
+    });
+  });
+
+  describe('rpcSettings', () => {
+    it('returns and translates the settings', () => {
+      return ethapi.ethcore.rpcSettings().then((value) => {
+        expect(value).to.be.ok;
+      });
+    });
+  });
+});
diff --git a/js/src/api/rpc/ethcore/ethcore.js b/js/src/api/rpc/ethcore/ethcore.js
new file mode 100644
index 0000000000000000000000000000000000000000..1ccc95bbadcffe5d05c9555c16a289975a3935d3
--- /dev/null
+++ b/js/src/api/rpc/ethcore/ethcore.js
@@ -0,0 +1,168 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { inAddress, inData, inNumber16 } from '../../format/input';
+import { outAddress, outNumber, outPeers } from '../../format/output';
+
+export default class Ethcore {
+  constructor (transport) {
+    this._transport = transport;
+  }
+
+  acceptNonReservedPeers () {
+    return this._transport
+      .execute('ethcore_acceptNonReservedPeers');
+  }
+
+  addReservedPeer (encode) {
+    return this._transport
+      .execute('ethcore_addReservedPeer', encode);
+  }
+
+  defaultExtraData () {
+    return this._transport
+      .execute('ethcore_defaultExtraData');
+  }
+
+  devLogs () {
+    return this._transport
+      .execute('ethcore_devLogs');
+  }
+
+  devLogsLevels () {
+    return this._transport
+      .execute('ethcore_devLogsLevels');
+  }
+
+  dropNonReservedPeers () {
+    return this._transport
+      .execute('ethcore_dropNonReservedPeers');
+  }
+
+  extraData () {
+    return this._transport
+      .execute('ethcore_extraData');
+  }
+
+  gasFloorTarget () {
+    return this._transport
+      .execute('ethcore_gasFloorTarget')
+      .then(outNumber);
+  }
+
+  generateSecretPhrase () {
+    return this._transport
+      .execute('ethcore_generateSecretPhrase');
+  }
+
+  hashContent (url) {
+    return this._transport
+      .execute('ethcore_hashContent', url);
+  }
+
+  minGasPrice () {
+    return this._transport
+      .execute('ethcore_minGasPrice')
+      .then(outNumber);
+  }
+
+  netChain () {
+    return this._transport
+      .execute('ethcore_netChain');
+  }
+
+  netPeers () {
+    return this._transport
+      .execute('ethcore_netPeers')
+      .then(outPeers);
+  }
+
+  netMaxPeers () {
+    return this._transport
+      .execute('ethcore_netMaxPeers')
+      .then(outNumber);
+  }
+
+  netPort () {
+    return this._transport
+      .execute('ethcore_netPort')
+      .then(outNumber);
+  }
+
+  nodeName () {
+    return this._transport
+      .execute('ethcore_nodeName');
+  }
+
+  phraseToAddress (phrase) {
+    return this._transport
+      .execute('ethcore_phraseToAddress', phrase)
+      .then(outAddress);
+  }
+
+  registryAddress () {
+    return this._transport
+      .execute('ethcore_registryAddress')
+      .then(outAddress);
+  }
+
+  removeReservedPeer (encode) {
+    return this._transport
+      .execute('ethcore_removeReservedPeer', encode);
+  }
+
+  rpcSettings () {
+    return this._transport
+      .execute('ethcore_rpcSettings');
+  }
+
+  setAuthor (address) {
+    return this._transport
+      .execute('ethcore_setAuthor', inAddress(address));
+  }
+
+  setExtraData (data) {
+    return this._transport
+      .execute('ethcore_setExtraData', inData(data));
+  }
+
+  setGasFloorTarget (quantity) {
+    return this._transport
+      .execute('ethcore_setGasFloorTarget', inNumber16(quantity));
+  }
+
+  setMinGasPrice (quantity) {
+    return this._transport
+      .execute('ethcore_setMinGasPrice', inNumber16(quantity));
+  }
+
+  setTransactionsLimit (quantity) {
+    return this._transport
+      .execute('ethcore_setTransactionsLimit', inNumber16(quantity));
+  }
+
+  transactionsLimit () {
+    return this._transport
+      .execute('ethcore_transactionsLimit')
+      .then(outNumber);
+  }
+
+  unsignedTransactionsCount () {
+    return this._transport
+      .execute('ethcore_unsignedTransactionsCount')
+      .then(outNumber);
+  }
+}
diff --git a/js/src/api/rpc/ethcore/ethcore.spec.js b/js/src/api/rpc/ethcore/ethcore.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..fd34550a71ec454b95ef58bc9080954afcb8bb7b
--- /dev/null
+++ b/js/src/api/rpc/ethcore/ethcore.spec.js
@@ -0,0 +1,92 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { TEST_HTTP_URL, mockHttp } from '../../../../test/mockRpc';
+import { isBigNumber } from '../../../../test/types';
+
+import Http from '../../transport/http';
+import Ethcore from './ethcore';
+
+const instance = new Ethcore(new Http(TEST_HTTP_URL));
+
+describe('api/rpc/Ethcore', () => {
+  describe('gasFloorTarget', () => {
+    it('returns the gasfloor, formatted', () => {
+      mockHttp([{ method: 'ethcore_gasFloorTarget', reply: { result: '0x123456' } }]);
+
+      return instance.gasFloorTarget().then((count) => {
+        expect(isBigNumber(count)).to.be.true;
+        expect(count.eq(0x123456)).to.be.true;
+      });
+    });
+  });
+
+  describe('minGasPrice', () => {
+    it('returns the min gasprice, formatted', () => {
+      mockHttp([{ method: 'ethcore_minGasPrice', reply: { result: '0x123456' } }]);
+
+      return instance.minGasPrice().then((count) => {
+        expect(isBigNumber(count)).to.be.true;
+        expect(count.eq(0x123456)).to.be.true;
+      });
+    });
+  });
+
+  describe('netMaxPeers', () => {
+    it('returns the max peers, formatted', () => {
+      mockHttp([{ method: 'ethcore_netMaxPeers', reply: { result: 25 } }]);
+
+      return instance.netMaxPeers().then((count) => {
+        expect(isBigNumber(count)).to.be.true;
+        expect(count.eq(25)).to.be.true;
+      });
+    });
+  });
+
+  describe('newPeers', () => {
+    it('returns the peer structure, formatted', () => {
+      mockHttp([{ method: 'ethcore_netPeers', reply: { result: { active: 123, connected: 456, max: 789 } } }]);
+
+      return instance.netPeers().then((peers) => {
+        expect(peers.active.eq(123)).to.be.true;
+        expect(peers.connected.eq(456)).to.be.true;
+        expect(peers.max.eq(789)).to.be.true;
+      });
+    });
+  });
+
+  describe('netPort', () => {
+    it('returns the connected port, formatted', () => {
+      mockHttp([{ method: 'ethcore_netPort', reply: { result: 33030 } }]);
+
+      return instance.netPort().then((count) => {
+        expect(isBigNumber(count)).to.be.true;
+        expect(count.eq(33030)).to.be.true;
+      });
+    });
+  });
+
+  describe('transactionsLimit', () => {
+    it('returns the tx limit, formatted', () => {
+      mockHttp([{ method: 'ethcore_transactionsLimit', reply: { result: 1024 } }]);
+
+      return instance.transactionsLimit().then((count) => {
+        expect(isBigNumber(count)).to.be.true;
+        expect(count.eq(1024)).to.be.true;
+      });
+    });
+  });
+});
diff --git a/js/src/api/rpc/ethcore/index.js b/js/src/api/rpc/ethcore/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..2372a21715bb7f6fdf3603aa5230000399ce520d
--- /dev/null
+++ b/js/src/api/rpc/ethcore/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './ethcore';
diff --git a/js/src/api/rpc/index.js b/js/src/api/rpc/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e7e94b9edba0712f808a21fcd5e51f1f5a1ba139
--- /dev/null
+++ b/js/src/api/rpc/index.js
@@ -0,0 +1,24 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export Db from './db';
+export Eth from './eth';
+export Ethcore from './ethcore';
+export Net from './net';
+export Personal from './personal';
+export Shh from './shh';
+export Trace from './trace';
+export Web3 from './web3';
diff --git a/js/src/api/rpc/net/index.js b/js/src/api/rpc/net/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0739111e6af6df00b8dbd7b89f9c48f588e244ee
--- /dev/null
+++ b/js/src/api/rpc/net/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './net';
diff --git a/js/src/api/rpc/net/net.e2e.js b/js/src/api/rpc/net/net.e2e.js
new file mode 100644
index 0000000000000000000000000000000000000000..51d84f7a107a89df8c11795564b5575aa482acee
--- /dev/null
+++ b/js/src/api/rpc/net/net.e2e.js
@@ -0,0 +1,46 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createHttpApi } from '../../../../test/e2e/ethapi';
+import { isBoolean } from '../../../../test/types';
+
+describe('ethapi.net', () => {
+  const ethapi = createHttpApi();
+
+  describe('listening', () => {
+    it('returns the listening status', () => {
+      return ethapi.net.listening().then((status) => {
+        expect(isBoolean(status)).to.be.true;
+      });
+    });
+  });
+
+  describe('peerCount', () => {
+    it('returns the peer count', () => {
+      return ethapi.net.peerCount().then((count) => {
+        expect(count.gte(0)).to.be.true;
+      });
+    });
+  });
+
+  describe('version', () => {
+    it('returns the version', () => {
+      return ethapi.net.version().then((version) => {
+        expect(version).to.be.ok;
+      });
+    });
+  });
+});
diff --git a/js/src/api/rpc/net/net.js b/js/src/api/rpc/net/net.js
new file mode 100644
index 0000000000000000000000000000000000000000..96e99dc51f2bde7db4eeff3f1fbda7136a069372
--- /dev/null
+++ b/js/src/api/rpc/net/net.js
@@ -0,0 +1,39 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { outNumber } from '../../format/output';
+
+export default class Net {
+  constructor (transport) {
+    this._transport = transport;
+  }
+
+  listening () {
+    return this._transport
+      .execute('net_listening');
+  }
+
+  peerCount () {
+    return this._transport
+      .execute('net_peerCount')
+      .then(outNumber);
+  }
+
+  version () {
+    return this._transport
+      .execute('net_version');
+  }
+}
diff --git a/js/src/api/rpc/net/net.spec.js b/js/src/api/rpc/net/net.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..55029a29ef7cfe4baa8ba98cb5636d891071917d
--- /dev/null
+++ b/js/src/api/rpc/net/net.spec.js
@@ -0,0 +1,36 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { TEST_HTTP_URL, mockHttp } from '../../../../test/mockRpc';
+import { isBigNumber } from '../../../../test/types';
+
+import Http from '../../transport/http';
+import Net from './net';
+
+const instance = new Net(new Http(TEST_HTTP_URL));
+
+describe('api/rpc/Net', () => {
+  describe('peerCount', () => {
+    it('returns the connected peers, formatted', () => {
+      mockHttp([{ method: 'net_peerCount', reply: { result: '0x123456' } }]);
+
+      return instance.peerCount().then((count) => {
+        expect(isBigNumber(count)).to.be.true;
+        expect(count.eq(0x123456)).to.be.true;
+      });
+    });
+  });
+});
diff --git a/js/src/api/rpc/personal/index.js b/js/src/api/rpc/personal/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..a9ed260f25591d31b3ddc26e993774f7c068fc85
--- /dev/null
+++ b/js/src/api/rpc/personal/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './personal';
diff --git a/js/src/api/rpc/personal/personal.e2e.js b/js/src/api/rpc/personal/personal.e2e.js
new file mode 100644
index 0000000000000000000000000000000000000000..f7fe42c54b967ffb89cd1092313fd26c3f3723fb
--- /dev/null
+++ b/js/src/api/rpc/personal/personal.e2e.js
@@ -0,0 +1,53 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createHttpApi } from '../../../../test/e2e/ethapi';
+import { isAddress, isBoolean } from '../../../../test/types';
+
+describe.skip('ethapi.personal', () => {
+  const ethapi = createHttpApi();
+  const password = 'P@55word';
+  let address;
+
+  describe('newAccount', () => {
+    it('creates a new account', () => {
+      return ethapi.personal.newAccount(password).then((_address) => {
+        address = _address;
+        expect(isAddress(address)).to.be.ok;
+      });
+    });
+  });
+
+  describe('listAccounts', () => {
+    it('has the newly-created account', () => {
+      return ethapi.personal.listAccounts(password).then((accounts) => {
+        expect(accounts.filter((_address) => _address === address)).to.deep.equal([address]);
+        accounts.forEach((account) => {
+          expect(isAddress(account)).to.be.true;
+        });
+      });
+    });
+  });
+
+  describe('unlockAccount', () => {
+    it('unlocks the newly-created account', () => {
+      return ethapi.personal.unlockAccount(address, password).then((result) => {
+        expect(isBoolean(result)).to.be.true;
+        expect(result).to.be.true;
+      });
+    });
+  });
+});
diff --git a/js/src/api/rpc/personal/personal.js b/js/src/api/rpc/personal/personal.js
new file mode 100644
index 0000000000000000000000000000000000000000..2609bc50957d94c173da4e5a093de0e0722e5cf0
--- /dev/null
+++ b/js/src/api/rpc/personal/personal.js
@@ -0,0 +1,112 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { inAddress, inNumber10, inNumber16, inOptions } from '../../format/input';
+import { outAccountInfo, outAddress, outSignerRequest } from '../../format/output';
+
+export default class Personal {
+  constructor (transport) {
+    this._transport = transport;
+  }
+
+  accountsInfo () {
+    return this._transport
+      .execute('personal_accountsInfo')
+      .then(outAccountInfo);
+  }
+
+  confirmRequest (requestId, options, password) {
+    return this._transport
+      .execute('personal_confirmRequest', inNumber16(requestId), options, password);
+  }
+
+  generateAuthorizationToken () {
+    return this._transport
+      .execute('personal_generateAuthorizationToken');
+  }
+
+  listAccounts () {
+    return this._transport
+      .execute('personal_listAccounts')
+      .then((accounts) => (accounts || []).map(outAddress));
+  }
+
+  listGethAccounts () {
+    return this._transport
+      .execute('personal_listGethAccounts')
+      .then((accounts) => (accounts || []).map(outAddress));
+  }
+
+  importGethAccounts (accounts) {
+    return this._transport
+      .execute('personal_importGethAccounts', (accounts || []).map(inAddress))
+      .then((accounts) => (accounts || []).map(outAddress));
+  }
+
+  newAccount (password) {
+    return this._transport
+      .execute('personal_newAccount', password)
+      .then(outAddress);
+  }
+
+  newAccountFromPhrase (phrase, password) {
+    return this._transport
+      .execute('personal_newAccountFromPhrase', phrase, password)
+      .then(outAddress);
+  }
+
+  newAccountFromWallet (json, password) {
+    return this._transport
+      .execute('personal_newAccountFromWallet', json, password)
+      .then(outAddress);
+  }
+
+  rejectRequest (requestId) {
+    return this._transport
+      .execute('personal_rejectRequest', inNumber16(requestId));
+  }
+
+  requestsToConfirm () {
+    return this._transport
+      .execute('personal_requestsToConfirm')
+      .then((requests) => (requests || []).map(outSignerRequest));
+  }
+
+  setAccountName (address, name) {
+    return this._transport
+      .execute('personal_setAccountName', inAddress(address), name);
+  }
+
+  setAccountMeta (address, meta) {
+    return this._transport
+      .execute('personal_setAccountMeta', inAddress(address), JSON.stringify(meta));
+  }
+
+  signAndSendTransaction (options, password) {
+    return this._transport
+      .execute('personal_signAndSendTransaction', inOptions(options), password);
+  }
+
+  signerEnabled () {
+    return this._transport
+      .execute('personal_signerEnabled');
+  }
+
+  unlockAccount (account, password, duration = 1) {
+    return this._transport
+      .execute('personal_unlockAccount', inAddress(account), password, inNumber10(duration));
+  }
+}
diff --git a/js/src/api/rpc/personal/personal.spec.js b/js/src/api/rpc/personal/personal.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..70734c7ee3ec154eacc23a3703c12bcc71e50d27
--- /dev/null
+++ b/js/src/api/rpc/personal/personal.spec.js
@@ -0,0 +1,97 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { TEST_HTTP_URL, mockHttp } from '../../../../test/mockRpc';
+
+import Http from '../../transport/http';
+import Personal from './personal';
+
+const instance = new Personal(new Http(TEST_HTTP_URL));
+
+describe('rpc/Personal', () => {
+  const account = '0x63cf90d3f0410092fc0fca41846f596223979195';
+  const checksum = '0x63Cf90D3f0410092FC0fca41846f596223979195';
+  let scope;
+
+  describe('accountsInfo', () => {
+    it('retrieves the available account info', () => {
+      scope = mockHttp([{ method: 'personal_accountsInfo', reply: {
+        result: {
+          '0x63cf90d3f0410092fc0fca41846f596223979195': {
+            name: 'name', uuid: 'uuid', meta: '{"data":"data"}'
+          }
+        }
+      } }]);
+
+      return instance.accountsInfo().then((result) => {
+        expect(result).to.deep.equal({
+          '0x63Cf90D3f0410092FC0fca41846f596223979195': {
+            name: 'name', uuid: 'uuid', meta: {
+              data: 'data'
+            }
+          }
+        });
+      });
+    });
+  });
+
+  describe('listAccounts', () => {
+    it('retrieves a list of available accounts', () => {
+      scope = mockHttp([{ method: 'personal_listAccounts', reply: { result: [account] } }]);
+
+      return instance.listAccounts().then((result) => {
+        expect(result).to.deep.equal([checksum]);
+      });
+    });
+
+    it('returns an empty list when none available', () => {
+      scope = mockHttp([{ method: 'personal_listAccounts', reply: { result: null } }]);
+
+      return instance.listAccounts().then((result) => {
+        expect(result).to.deep.equal([]);
+      });
+    });
+  });
+
+  describe('newAccount', () => {
+    it('passes the password, returning the address', () => {
+      scope = mockHttp([{ method: 'personal_newAccount', reply: { result: account } }]);
+
+      return instance.newAccount('password').then((result) => {
+        expect(scope.body.personal_newAccount.params).to.deep.equal(['password']);
+        expect(result).to.equal(checksum);
+      });
+    });
+  });
+
+  describe('unlockAccount', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'personal_unlockAccount', reply: { result: [] } }]);
+    });
+
+    it('passes account, password & duration', () => {
+      return instance.unlockAccount(account, 'password', 0xf).then(() => {
+        expect(scope.body.personal_unlockAccount.params).to.deep.equal([account, 'password', 15]);
+      });
+    });
+
+    it('provides a default duration when not specified', () => {
+      return instance.unlockAccount(account, 'password').then(() => {
+        expect(scope.body.personal_unlockAccount.params).to.deep.equal([account, 'password', 1]);
+      });
+    });
+  });
+});
diff --git a/js/src/api/rpc/shh/index.js b/js/src/api/rpc/shh/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..7b323aeed692dfa6fbf9b8889a7c815067616e29
--- /dev/null
+++ b/js/src/api/rpc/shh/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './shh';
diff --git a/js/src/api/rpc/shh/shh.js b/js/src/api/rpc/shh/shh.js
new file mode 100644
index 0000000000000000000000000000000000000000..ad545cac5989d8143ce2befa755749b95a9cea44
--- /dev/null
+++ b/js/src/api/rpc/shh/shh.js
@@ -0,0 +1,71 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default class Personal {
+  constructor (transport) {
+    this._transport = transport;
+  }
+
+  addToGroup (identity) {
+    return this._transport
+      .execute('shh_addToGroup', identity);
+  }
+
+  getFilterChanges (filterId) {
+    return this._transport
+      .execute('shh_getFilterChanges', filterId);
+  }
+
+  getMessages (filterId) {
+    return this._transport
+      .execute('shh_getMessages', filterId);
+  }
+
+  hasIdentity (identity) {
+    return this._transport
+      .execute('shh_hasIdentity', identity);
+  }
+
+  newFilter (options) {
+    return this._transport
+      .execute('shh_newFilter', options);
+  }
+
+  newGroup () {
+    return this._transport
+      .execute('shh_newGroup');
+  }
+
+  newIdentity () {
+    return this._transport
+      .execute('shh_newIdentity');
+  }
+
+  post (options) {
+    return this._transport
+      .execute('shh_post', options);
+  }
+
+  uninstallFilter (filterId) {
+    return this._transport
+      .execute('shh_uninstallFilter', filterId);
+  }
+
+  version () {
+    return this._transport
+      .execute('shh_version');
+  }
+}
diff --git a/js/src/api/rpc/trace/index.js b/js/src/api/rpc/trace/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..a1408770931575966faf6426033be647b910d40d
--- /dev/null
+++ b/js/src/api/rpc/trace/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './trace';
diff --git a/js/src/api/rpc/trace/trace.e2e.js b/js/src/api/rpc/trace/trace.e2e.js
new file mode 100644
index 0000000000000000000000000000000000000000..1a0720927ad2725227cf469fb87f384209a05754
--- /dev/null
+++ b/js/src/api/rpc/trace/trace.e2e.js
@@ -0,0 +1,35 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createHttpApi } from '../../../../test/e2e/ethapi';
+
+describe('ethapi.trace', () => {
+  const ethapi = createHttpApi();
+
+  describe('block', () => {
+    it('returns the latest block', () => {
+      return ethapi.trace.block().then((block) => {
+        expect(block).to.be.ok;
+      });
+    });
+
+    it('returns a specified block', () => {
+      return ethapi.trace.block('0x65432').then((block) => {
+        expect(block).to.be.ok;
+      });
+    });
+  });
+});
diff --git a/js/src/api/rpc/trace/trace.js b/js/src/api/rpc/trace/trace.js
new file mode 100644
index 0000000000000000000000000000000000000000..4cf8fc8e5eed9aee73a2287656292c1b5e498588
--- /dev/null
+++ b/js/src/api/rpc/trace/trace.js
@@ -0,0 +1,43 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { inBlockNumber, inHex, inNumber16 } from '../../format/input';
+
+export default class Trace {
+  constructor (transport) {
+    this._transport = transport;
+  }
+
+  filter (filterObj) {
+    return this._transport
+      .execute('trace_filter', filterObj);
+  }
+
+  get (txHash, position) {
+    return this._transport
+      .execute('trace_get', inHex(txHash), inNumber16(position));
+  }
+
+  transaction (txHash) {
+    return this._transport
+      .execute('trace_transaction', inHex(txHash));
+  }
+
+  block (blockNumber = 'latest') {
+    return this._transport
+      .execute('trace_block', inBlockNumber(blockNumber));
+  }
+}
diff --git a/js/src/api/rpc/trace/trace.spec.js b/js/src/api/rpc/trace/trace.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..4a38f7a3f718000af1b01d6ce918e86c34081e40
--- /dev/null
+++ b/js/src/api/rpc/trace/trace.spec.js
@@ -0,0 +1,44 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { TEST_HTTP_URL, mockHttp } from '../../../../test/mockRpc';
+
+import Http from '../../transport/http';
+import Trace from './trace';
+
+const instance = new Trace(new Http(TEST_HTTP_URL));
+
+describe('api/rpc/Trace', () => {
+  let scope;
+
+  describe('block', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'trace_block', reply: { result: [] } }]);
+    });
+
+    it('assumes latest blockNumber when not specified', () => {
+      return instance.block().then(() => {
+        expect(scope.body.trace_block.params).to.deep.equal(['latest']);
+      });
+    });
+
+    it('passed specified blockNumber', () => {
+      return instance.block(0x123).then(() => {
+        expect(scope.body.trace_block.params).to.deep.equal(['0x123']);
+      });
+    });
+  });
+});
diff --git a/js/src/api/rpc/web3/index.js b/js/src/api/rpc/web3/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d0bb22941d56524483d0cb4f27af18179ddaaa87
--- /dev/null
+++ b/js/src/api/rpc/web3/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './web3';
diff --git a/js/src/api/rpc/web3/web3.e2e.js b/js/src/api/rpc/web3/web3.e2e.js
new file mode 100644
index 0000000000000000000000000000000000000000..15cc1934fbfb19905b8b5764097c843a79e41666
--- /dev/null
+++ b/js/src/api/rpc/web3/web3.e2e.js
@@ -0,0 +1,44 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createHttpApi } from '../../../../test/e2e/ethapi';
+import { isHexNumber } from '../../../../test/types';
+
+describe('ethapi.web3', () => {
+  const ethapi = createHttpApi();
+
+  describe('clientVersion', () => {
+    it('returns the client version', () => {
+      return ethapi.web3.clientVersion().then((version) => {
+        const [client] = version.split('/');
+
+        expect(client === 'Parity' || client === 'Geth').to.be.ok;
+      });
+    });
+  });
+
+  describe('sha3', () => {
+    it('returns a keccak256 sha', () => {
+      const sha = '0xa7916fac4f538170f7cd12c148552e2cba9fcd72329a2dd5b07a6fa906488ddf';
+      const hexStr = 'baz()'.split('').map((char) => char.charCodeAt(0).toString(16)).join('');
+
+      return ethapi.web3.sha3(`0x${hexStr}`).then((hash) => {
+        expect(isHexNumber(hash)).to.be.true;
+        expect(hash).to.equal(sha);
+      });
+    });
+  });
+});
diff --git a/js/src/api/rpc/web3/web3.js b/js/src/api/rpc/web3/web3.js
new file mode 100644
index 0000000000000000000000000000000000000000..eb52a8bb72a61f030f0b5d7bfd76f5e33e0bfc3f
--- /dev/null
+++ b/js/src/api/rpc/web3/web3.js
@@ -0,0 +1,33 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { inHex } from '../../format/input';
+
+export default class Web3 {
+  constructor (transport) {
+    this._transport = transport;
+  }
+
+  clientVersion () {
+    return this._transport
+      .execute('web3_clientVersion');
+  }
+
+  sha3 (hexStr) {
+    return this._transport
+      .execute('web3_sha3', inHex(hexStr));
+  }
+}
diff --git a/js/src/api/rpc/web3/web3.spec.js b/js/src/api/rpc/web3/web3.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..eb4a59cd1636ee7a8059cb5d2a9f0ad328b5cab6
--- /dev/null
+++ b/js/src/api/rpc/web3/web3.spec.js
@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { TEST_HTTP_URL, mockHttp } from '../../../../test/mockRpc';
+
+import Http from '../../transport/http';
+import Web3 from './web3';
+
+const instance = new Web3(new Http(TEST_HTTP_URL));
+
+describe('api/rpc/Web3', () => {
+  let scope;
+
+  describe('sha3', () => {
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'web3_sha3', reply: { result: [] } }]);
+    });
+
+    it('formats the inputs correctly', () => {
+      return instance.sha3('1234').then(() => {
+        expect(scope.body.web3_sha3.params).to.deep.equal(['0x1234']);
+      });
+    });
+  });
+});
diff --git a/js/src/api/subscriptions/eth.js b/js/src/api/subscriptions/eth.js
new file mode 100644
index 0000000000000000000000000000000000000000..28d9cc6ff995af0c5491fc939a2ad42e020ad9b8
--- /dev/null
+++ b/js/src/api/subscriptions/eth.js
@@ -0,0 +1,62 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+
+export default class Eth {
+  constructor (updateSubscriptions, api) {
+    this._api = api;
+    this._updateSubscriptions = updateSubscriptions;
+    this._started = false;
+
+    this._lastBlock = new BigNumber(-1);
+  }
+
+  get isStarted () {
+    return this._started;
+  }
+
+  start () {
+    this._started = true;
+
+    return this._blockNumber();
+  }
+
+  _blockNumber = () => {
+    const nextTimeout = (timeout = 1000) => {
+      setTimeout(() => {
+        this._blockNumber();
+      }, timeout);
+    };
+
+    if (!this._api.transport.isConnected) {
+      nextTimeout(500);
+      return;
+    }
+
+    return this._api.eth
+      .blockNumber()
+      .then((blockNumber) => {
+        if (!blockNumber.eq(this._lastBlock)) {
+          this._lastBlock = blockNumber;
+          this._updateSubscriptions('eth_blockNumber', null, blockNumber);
+        }
+
+        nextTimeout();
+      })
+      .catch(nextTimeout);
+  }
+}
diff --git a/js/src/api/subscriptions/eth.spec.js b/js/src/api/subscriptions/eth.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..24398483e46013d3cec7c420dee536fd3f8f9ebb
--- /dev/null
+++ b/js/src/api/subscriptions/eth.spec.js
@@ -0,0 +1,101 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import sinon from 'sinon';
+import 'sinon-as-promised';
+
+import Eth from './eth';
+
+const START_BLOCK = 5000;
+
+function stubApi (blockNumber) {
+  const _calls = {
+    blockNumber: []
+  };
+
+  return {
+    _calls,
+    transport: {
+      isConnected: true
+    },
+    eth: {
+      blockNumber: () => {
+        const stub = sinon.stub().resolves(new BigNumber(blockNumber || START_BLOCK))();
+        _calls.blockNumber.push(stub);
+        return stub;
+      }
+    }
+  };
+}
+
+describe('api/subscriptions/eth', () => {
+  let api;
+  let eth;
+  let cb;
+
+  beforeEach(() => {
+    api = stubApi();
+    cb = sinon.stub();
+    eth = new Eth(cb, api);
+  });
+
+  describe('constructor', () => {
+    it('starts the instance in a stopped state', () => {
+      expect(eth.isStarted).to.be.false;
+    });
+  });
+
+  describe('start', () => {
+    describe('blockNumber available', () => {
+      beforeEach(() => {
+        return eth.start();
+      });
+
+      it('sets the started status', () => {
+        expect(eth.isStarted).to.be.true;
+      });
+
+      it('calls eth_blockNumber', () => {
+        expect(api._calls.blockNumber.length).to.be.ok;
+      });
+
+      it('updates subscribers', () => {
+        expect(cb).to.have.been.calledWith('eth_blockNumber', null, new BigNumber(START_BLOCK));
+      });
+    });
+
+    describe('blockNumber not available', () => {
+      beforeEach(() => {
+        api = stubApi(-1);
+        eth = new Eth(cb, api);
+        return eth.start();
+      });
+
+      it('sets the started status', () => {
+        expect(eth.isStarted).to.be.true;
+      });
+
+      it('calls eth_blockNumber', () => {
+        expect(api._calls.blockNumber.length).to.be.ok;
+      });
+
+      it('does not update subscribers', () => {
+        expect(cb).not.to.been.called;
+      });
+    });
+  });
+});
diff --git a/js/src/api/subscriptions/index.js b/js/src/api/subscriptions/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3e627e62a1efff2ea2d38aa24e131a234cc28ec5
--- /dev/null
+++ b/js/src/api/subscriptions/index.js
@@ -0,0 +1,19 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export Logging from './logging';
+
+export default from './manager';
diff --git a/js/src/api/subscriptions/logging.js b/js/src/api/subscriptions/logging.js
new file mode 100644
index 0000000000000000000000000000000000000000..b03558207f3f17f845cd4c6247fa2bb36d725055
--- /dev/null
+++ b/js/src/api/subscriptions/logging.js
@@ -0,0 +1,44 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+let instance = null;
+
+export default class Logging {
+  constructor (updateSubscriptions) {
+    this._updateSubscriptions = updateSubscriptions;
+
+    instance = this;
+  }
+
+  get isStarted () {
+    return true;
+  }
+
+  start () {
+  }
+
+  static send (method, params, json) {
+    if (!instance) {
+      return;
+    }
+
+    return instance._updateSubscriptions('logging', null, {
+      method,
+      params,
+      json
+    });
+  }
+}
diff --git a/js/src/api/subscriptions/logging.spec.js b/js/src/api/subscriptions/logging.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..2a1cabb46c9862603b3ae3065e9ac6ef1e35a887
--- /dev/null
+++ b/js/src/api/subscriptions/logging.spec.js
@@ -0,0 +1,49 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import sinon from 'sinon';
+
+import Logging from './logging';
+
+describe('api/subscriptions/logging', () => {
+  let cb;
+  let logging;
+
+  beforeEach(() => {
+    cb = sinon.stub();
+    logging = new Logging(cb);
+  });
+
+  describe('constructor', () => {
+    it('starts the instance in a started state', () => {
+      expect(logging.isStarted).to.be.true;
+    });
+  });
+
+  describe('send', () => {
+    const method = 'method';
+    const params = 'params';
+    const json = 'json';
+
+    beforeEach(() => {
+      Logging.send(method, params, json);
+    });
+
+    it('calls the subscription update', () => {
+      expect(cb).to.have.been.calledWith('logging', null, { method, params, json });
+    });
+  });
+});
diff --git a/js/src/api/subscriptions/manager.js b/js/src/api/subscriptions/manager.js
new file mode 100644
index 0000000000000000000000000000000000000000..6f9b7cf7e2632823d70fcbe04350ef9f7d467c78
--- /dev/null
+++ b/js/src/api/subscriptions/manager.js
@@ -0,0 +1,134 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { isError } from '../util/types';
+
+import Eth from './eth';
+import Logging from './logging';
+import Personal from './personal';
+import Signer from './signer';
+
+const events = {
+  'logging': { module: 'logging' },
+  'eth_blockNumber': { module: 'eth' },
+  'personal_accountsInfo': { module: 'personal' },
+  'personal_listAccounts': { module: 'personal' },
+  'personal_requestsToConfirm': { module: 'signer' }
+};
+
+let nextSubscriptionId = 0;
+
+export default class Manager {
+  constructor (api) {
+    this._api = api;
+
+    this.subscriptions = {};
+    this.values = {};
+
+    Object.keys(events).forEach((subscriptionName) => {
+      this.subscriptions[subscriptionName] = {};
+      this.values[subscriptionName] = {
+        error: null,
+        data: null
+      };
+    });
+
+    this._logging = new Logging(this._updateSubscriptions);
+    this._eth = new Eth(this._updateSubscriptions, api);
+    this._personal = new Personal(this._updateSubscriptions, api, this);
+    this._signer = new Signer(this._updateSubscriptions, api, this);
+  }
+
+  _validateType (subscriptionName) {
+    const subscription = events[subscriptionName];
+
+    if (!subscription) {
+      return new Error(`${subscriptionName} is not a valid interface, subscribe using one of ${Object.keys(events).join(', ')}`);
+    }
+
+    return subscription;
+  }
+
+  subscribe (subscriptionName, callback) {
+    return new Promise((resolve, reject) => {
+      const subscription = this._validateType(subscriptionName);
+
+      if (isError(subscription)) {
+        reject(subscription);
+        return;
+      }
+
+      const subscriptionId = nextSubscriptionId++;
+      const { error, data } = this.values[subscriptionName];
+      const engine = this[`_${subscription.module}`];
+
+      this.subscriptions[subscriptionName][subscriptionId] = callback;
+
+      if (!engine.isStarted) {
+        engine.start();
+      } else {
+        this._sendData(subscriptionName, subscriptionId, callback, error, data);
+      }
+
+      resolve(subscriptionId);
+    });
+  }
+
+  unsubscribe (subscriptionName, subscriptionId) {
+    return new Promise((resolve, reject) => {
+      const subscription = this._validateType(subscriptionName);
+
+      if (isError(subscription)) {
+        reject(subscription);
+        return;
+      }
+
+      if (!this.subscriptions[subscriptionName][subscriptionId]) {
+        reject(new Error(`Cannot find subscription ${subscriptionId} for type ${subscriptionName}`));
+        return;
+      }
+
+      delete this.subscriptions[subscriptionName][subscriptionId];
+      resolve();
+    });
+  }
+
+  _sendData (subscriptionName, subscriptionId, callback, error, data) {
+    try {
+      callback(error, data);
+    } catch (error) {
+      console.error(`Unable to update callback for ${subscriptionName}, subscriptionId ${subscriptionId}`, error);
+      this.unsubscribe(subscriptionName, subscriptionId);
+    }
+  }
+
+  _updateSubscriptions = (subscriptionName, error, data) => {
+    if (!this.subscriptions[subscriptionName]) {
+      throw new Error(`Cannot find entry point for subscriptions of type ${subscriptionName}`);
+    }
+
+    this.values[subscriptionName] = { error, data };
+    Object.keys(this.subscriptions[subscriptionName]).forEach((subscriptionId) => {
+      const callback = this.subscriptions[subscriptionName][subscriptionId];
+
+      this._sendData(subscriptionName, subscriptionId, callback, error, data);
+    });
+  }
+}
+
+export {
+  events
+};
diff --git a/js/src/api/subscriptions/manager.spec.js b/js/src/api/subscriptions/manager.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..4b6b84b84a695e866c01f708eb192d1bf933fd83
--- /dev/null
+++ b/js/src/api/subscriptions/manager.spec.js
@@ -0,0 +1,98 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import sinon from 'sinon';
+
+import Manager, { events } from './manager';
+
+function newStub () {
+  const start = () => manager._updateSubscriptions(manager.__test, null, 'test');
+  const manager = new Manager({
+    transport: {
+      isConnected: true
+    }
+  });
+
+  manager._eth = {
+    isStarted: false,
+    start
+  };
+
+  manager._personal = {
+    isStarted: false,
+    start
+  };
+
+  manager._signer = {
+    isStarted: false,
+    start
+  };
+
+  return manager;
+}
+
+describe('api/subscriptions/manager', () => {
+  let manager;
+
+  beforeEach(() => {
+    manager = newStub();
+  });
+
+  describe('constructor', () => {
+    it('sets up the subscription types & defaults', () => {
+      expect(Object.keys(manager.subscriptions)).to.deep.equal(Object.keys(events));
+      expect(Object.keys(manager.values)).to.deep.equal(Object.keys(events));
+    });
+  });
+
+  describe('subscriptions', () => {
+    Object
+      .keys(events)
+      .filter((eventName) => eventName.indexOf('_') !== -1)
+      .forEach((eventName) => {
+        const { module } = events[eventName];
+        let engine;
+        let cb;
+        let subscriptionId;
+
+        describe(eventName, () => {
+          beforeEach(() => {
+            engine = manager[`_${module}`];
+            manager.__test = eventName;
+            cb = sinon.stub();
+            sinon.spy(engine, 'start');
+            return manager
+              .subscribe(eventName, cb)
+              .then((_subscriptionId) => {
+                subscriptionId = _subscriptionId;
+              });
+          });
+
+          it(`puts the ${module} engine in a started state`, () => {
+            expect(engine.start).to.have.been.called;
+          });
+
+          it('returns a subscriptionId', () => {
+            expect(subscriptionId).to.be.ok;
+          });
+
+          it('calls the subscription callback with updated values', () => {
+            expect(cb).to.have.been.calledWith(null, 'test');
+          });
+        });
+      });
+  });
+});
diff --git a/js/src/api/subscriptions/personal.js b/js/src/api/subscriptions/personal.js
new file mode 100644
index 0000000000000000000000000000000000000000..d654199629af6bca1404edd3fa25489ea951333e
--- /dev/null
+++ b/js/src/api/subscriptions/personal.js
@@ -0,0 +1,77 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default class Personal {
+  constructor (updateSubscriptions, api, subscriber) {
+    this._subscriber = subscriber;
+    this._api = api;
+    this._updateSubscriptions = updateSubscriptions;
+    this._started = false;
+  }
+
+  get isStarted () {
+    return this._started;
+  }
+
+  start () {
+    this._started = true;
+
+    return Promise.all([
+      this._listAccounts(),
+      this._accountsInfo(),
+      this._loggingSubscribe()
+    ]);
+  }
+
+  _listAccounts = () => {
+    return this._api.personal
+      .listAccounts()
+      .then((accounts) => {
+        this._updateSubscriptions('personal_listAccounts', null, accounts);
+      });
+  }
+
+  _accountsInfo = () => {
+    return this._api.personal
+      .accountsInfo()
+      .then((info) => {
+        this._updateSubscriptions('personal_accountsInfo', null, info);
+      });
+  }
+
+  _loggingSubscribe () {
+    return this._subscriber.subscribe('logging', (error, data) => {
+      if (error || !data) {
+        return;
+      }
+
+      switch (data.method) {
+        case 'personal_importGethAccounts':
+        case 'personal_newAccount':
+        case 'personal_newAccountFromPhrase':
+        case 'personal_newAccountFromWallet':
+          this._listAccounts();
+          this._accountsInfo();
+          return;
+
+        case 'personal_setAccountName':
+        case 'personal_setAccountMeta':
+          this._accountsInfo();
+          return;
+      }
+    });
+  }
+}
diff --git a/js/src/api/subscriptions/personal.spec.js b/js/src/api/subscriptions/personal.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..1a77b5f61603d946861f18fc9ef7521073055851
--- /dev/null
+++ b/js/src/api/subscriptions/personal.spec.js
@@ -0,0 +1,122 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import sinon from 'sinon';
+import 'sinon-as-promised';
+
+import Personal from './personal';
+
+const TEST_INFO = {
+  '0xfa64203C044691aA57251aF95f4b48d85eC00Dd5': {
+    name: 'test'
+  }
+};
+const TEST_LIST = ['0xfa64203C044691aA57251aF95f4b48d85eC00Dd5'];
+
+function stubApi (accounts, info) {
+  const _calls = {
+    accountsInfo: [],
+    listAccounts: []
+  };
+
+  return {
+    _calls,
+    personal: {
+      accountsInfo: () => {
+        const stub = sinon.stub().resolves(info || TEST_INFO)();
+        _calls.accountsInfo.push(stub);
+        return stub;
+      },
+
+      listAccounts: () => {
+        const stub = sinon.stub().resolves(accounts || TEST_LIST)();
+        _calls.listAccounts.push(stub);
+        return stub;
+      }
+    }
+  };
+}
+
+function stubLogging () {
+  return {
+    subscribe: sinon.stub()
+  };
+}
+
+describe('api/subscriptions/personal', () => {
+  let api;
+  let cb;
+  let logging;
+  let personal;
+
+  beforeEach(() => {
+    api = stubApi();
+    cb = sinon.stub();
+    logging = stubLogging();
+    personal = new Personal(cb, api, logging);
+  });
+
+  describe('constructor', () => {
+    it('starts the instance in a stopped state', () => {
+      expect(personal.isStarted).to.be.false;
+    });
+  });
+
+  describe('start', () => {
+    describe('info available', () => {
+      beforeEach(() => {
+        return personal.start();
+      });
+
+      it('sets the started status', () => {
+        expect(personal.isStarted).to.be.true;
+      });
+
+      it('calls personal_accountsInfo', () => {
+        expect(api._calls.accountsInfo.length).to.be.ok;
+      });
+
+      it('calls personal_listAccounts', () => {
+        expect(api._calls.listAccounts.length).to.be.ok;
+      });
+
+      it('updates subscribers', () => {
+        expect(cb.firstCall).to.have.been.calledWith('personal_listAccounts', null, TEST_LIST);
+        expect(cb.secondCall).to.have.been.calledWith('personal_accountsInfo', null, TEST_INFO);
+      });
+    });
+
+    describe('info not available', () => {
+      beforeEach(() => {
+        api = stubApi([], {});
+        personal = new Personal(cb, api, logging);
+        return personal.start();
+      });
+
+      it('sets the started status', () => {
+        expect(personal.isStarted).to.be.true;
+      });
+
+      it('calls personal_accountsInfo', () => {
+        expect(api._calls.accountsInfo.length).to.be.ok;
+      });
+
+      it('calls personal_listAccounts', () => {
+        expect(api._calls.listAccounts.length).to.be.ok;
+      });
+    });
+  });
+});
diff --git a/js/src/api/subscriptions/signer.js b/js/src/api/subscriptions/signer.js
new file mode 100644
index 0000000000000000000000000000000000000000..af745261b45b67e410d12fcb4647a76b0ebecc10
--- /dev/null
+++ b/js/src/api/subscriptions/signer.js
@@ -0,0 +1,76 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default class Signer {
+  constructor (updateSubscriptions, api, subscriber) {
+    this._subscriber = subscriber;
+    this._api = api;
+    this._updateSubscriptions = updateSubscriptions;
+    this._started = false;
+  }
+
+  get isStarted () {
+    return this._started;
+  }
+
+  start () {
+    this._started = true;
+
+    return Promise.all([
+      this._listRequests(true),
+      this._loggingSubscribe()
+    ]);
+  }
+
+  _listRequests = (doTimeout) => {
+    const nextTimeout = (timeout = 1000) => {
+      if (doTimeout) {
+        setTimeout(() => {
+          this._listRequests(true);
+        }, timeout);
+      }
+    };
+
+    if (!this._api.transport.isConnected) {
+      nextTimeout(500);
+      return;
+    }
+
+    return this._api.personal
+      .requestsToConfirm()
+      .then((requests) => {
+        this._updateSubscriptions('personal_requestsToConfirm', null, requests);
+        nextTimeout();
+      })
+      .catch(nextTimeout);
+  }
+
+  _loggingSubscribe () {
+    return this._subscriber.subscribe('logging', (error, data) => {
+      if (error || !data) {
+        return;
+      }
+
+      switch (data.method) {
+        case 'eth_postTransaction':
+        case 'eth_sendTranasction':
+        case 'eth_sendRawTransaction':
+          this._listRequests(false);
+          return;
+      }
+    });
+  }
+}
diff --git a/js/src/api/transport/http/http.e2e.js b/js/src/api/transport/http/http.e2e.js
new file mode 100644
index 0000000000000000000000000000000000000000..8f0aa48adc5fe53178a6d450671c93eb9141a74c
--- /dev/null
+++ b/js/src/api/transport/http/http.e2e.js
@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Http from './http';
+
+const http = new Http('http://localhost:8545');
+
+describe('transport/Http', () => {
+  it('connects and makes a call to web3_clientVersion', () => {
+    return http.execute('web3_clientVersion').then((version) => {
+      const [client] = version.split('/');
+
+      expect(client === 'Geth' || client === 'Parity').to.be.ok;
+    });
+  });
+});
diff --git a/js/src/api/transport/http/http.js b/js/src/api/transport/http/http.js
new file mode 100644
index 0000000000000000000000000000000000000000..65ba089cc459c127806baba4fc53beb4ec8b6488
--- /dev/null
+++ b/js/src/api/transport/http/http.js
@@ -0,0 +1,76 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { Logging } from '../../subscriptions';
+import JsonRpcBase from '../jsonRpcBase';
+
+/* global fetch */
+export default class Http extends JsonRpcBase {
+  constructor (url) {
+    super();
+
+    this._connected = true;
+    this._url = url;
+  }
+
+  _encodeOptions (method, params) {
+    const json = this.encode(method, params);
+
+    this.log(json);
+
+    return {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        'Content-Length': json.length
+      },
+      body: json
+    };
+  }
+
+  execute (method, ...params) {
+    const request = this._encodeOptions(method, params);
+
+    return fetch(this._url, request)
+      .catch((error) => {
+        this._connected = false;
+        throw error;
+      })
+      .then((response) => {
+        this._connected = true;
+
+        if (response.status !== 200) {
+          this._connected = false;
+          this.error(JSON.stringify({ status: response.status, statusText: response.statusText }));
+          throw new Error(`${response.status}: ${response.statusText}`);
+        }
+
+        return response.json();
+      })
+      .then((response) => {
+        Logging.send(method, params, { request, response });
+
+        if (response.error) {
+          this.error(JSON.stringify(response));
+          throw new Error(`${response.error.code}: ${response.error.message}`);
+        }
+
+        this.log(JSON.stringify(response));
+        return response.result;
+      });
+  }
+}
diff --git a/js/src/api/transport/http/http.spec.js b/js/src/api/transport/http/http.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..94441bc5190442bb0faaac91b01c0995285cd9ca
--- /dev/null
+++ b/js/src/api/transport/http/http.spec.js
@@ -0,0 +1,122 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { TEST_HTTP_URL, mockHttp } from '../../../../test/mockRpc';
+import Http from './http';
+
+const transport = new Http(TEST_HTTP_URL);
+
+describe('api/transport/Http', () => {
+  describe('instance', () => {
+    it('encodes the options correctly', () => {
+      const opt = transport._encodeOptions('someMethod', ['param']);
+      const enc = {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+          'Content-Length': 65
+        },
+        body: `{"jsonrpc":"2.0","method":"someMethod","params":["param"],"id":${transport._id - 1}}`
+      };
+
+      expect(opt).to.deep.equal(enc);
+    });
+  });
+
+  describe('transport', () => {
+    const RESULT = ['this is some result'];
+
+    let scope;
+    let result;
+
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_call', reply: { result: RESULT } }]);
+
+      return transport
+        .execute('eth_call', 1, 2, 3, 'test')
+        .then((_result) => {
+          result = _result;
+        });
+    });
+
+    it('makes POST', () => {
+      expect(scope.isDone()).to.be.true;
+    });
+
+    it('sets jsonrpc', () => {
+      expect(scope.body.eth_call.jsonrpc).to.equal('2.0');
+    });
+
+    it('sets the method', () => {
+      expect(scope.body.eth_call.method).to.equal('eth_call');
+    });
+
+    it('passes the params', () => {
+      expect(scope.body.eth_call.params).to.deep.equal([1, 2, 3, 'test']);
+    });
+
+    it('increments the id', () => {
+      expect(scope.body.eth_call.id).not.to.equal(0);
+    });
+
+    it('passes the actual result back', () => {
+      expect(result).to.deep.equal(RESULT);
+    });
+  });
+
+  describe('HTTP errors', () => {
+    let scope;
+    let error;
+
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_call', reply: {}, code: 500 }]);
+
+      return transport
+        .execute('eth_call')
+        .catch((_error) => {
+          error = _error;
+        });
+    });
+
+    it('returns HTTP errors as throws', () => {
+      expect(scope.isDone()).to.be.true;
+      expect(error.message).to.match(/Internal Server Error/);
+    });
+  });
+
+  describe('RPC errors', () => {
+    const ERROR = { code: -1, message: 'ERROR: RPC failure' };
+
+    let scope;
+    let error;
+
+    beforeEach(() => {
+      scope = mockHttp([{ method: 'eth_call', reply: { error: ERROR } }]);
+
+      return transport
+        .execute('eth_call')
+        .catch((_error) => {
+          error = _error;
+        });
+    });
+
+    it('returns RPC errors as throws', () => {
+      expect(scope.isDone()).to.be.true;
+      expect(error.message).to.match(/RPC failure/);
+    });
+  });
+});
diff --git a/js/src/api/transport/http/index.js b/js/src/api/transport/http/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5ce7a652ea5c7b5ca93a4408c39f98c1d4cbf58b
--- /dev/null
+++ b/js/src/api/transport/http/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './http';
diff --git a/js/src/api/transport/index.js b/js/src/api/transport/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..8f67fba4d5381c4efdffe8b6eacea7009129f8e8
--- /dev/null
+++ b/js/src/api/transport/index.js
@@ -0,0 +1,18 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export Http from './http';
+export Ws from './ws';
diff --git a/js/src/api/transport/jsonRpcBase.js b/js/src/api/transport/jsonRpcBase.js
new file mode 100644
index 0000000000000000000000000000000000000000..dc2f9bc8e9bc564df4c63b5e2f540a11d442ba90
--- /dev/null
+++ b/js/src/api/transport/jsonRpcBase.js
@@ -0,0 +1,62 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default class JsonRpcBase {
+  constructor () {
+    this._id = 1;
+    this._debug = false;
+    this._connected = false;
+  }
+
+  encode (method, params) {
+    const json = JSON.stringify({
+      jsonrpc: '2.0',
+      method: method,
+      params: params,
+      id: this._id++
+    });
+
+    return json;
+  }
+
+  get id () {
+    return this._id;
+  }
+
+  get isDebug () {
+    return this._debug;
+  }
+
+  get isConnected () {
+    return this._connected;
+  }
+
+  setDebug (flag) {
+    this._debug = flag;
+  }
+
+  error (error) {
+    if (this.isDebug) {
+      console.error(error);
+    }
+  }
+
+  log (log) {
+    if (this.isDebug) {
+      console.log(log);
+    }
+  }
+}
diff --git a/js/src/api/transport/jsonRpcBase.spec.js b/js/src/api/transport/jsonRpcBase.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..78fc6549c2f5dd7bae51ebacbb912f349d78a65e
--- /dev/null
+++ b/js/src/api/transport/jsonRpcBase.spec.js
@@ -0,0 +1,88 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import sinon from 'sinon';
+
+import JsonRpcBase from './jsonRpcBase';
+
+const base = new JsonRpcBase();
+
+describe('api/transport/JsonRpcBase', () => {
+  describe('encode', () => {
+    it('encodes the body correctly, incrementing id', () => {
+      const id = base.id;
+      const bdy = base.encode('someMethod', ['param1', 'param2']);
+      const enc = `{"jsonrpc":"2.0","method":"someMethod","params":["param1","param2"],"id":${id}}`;
+
+      expect(bdy).to.equal(enc);
+      expect(base.id - id).to.equal(1);
+    });
+  });
+
+  describe('setDebug', () => {
+    it('starts with disabled flag', () => {
+      expect(base.isDebug).to.be.false;
+    });
+
+    it('true flag switches on', () => {
+      base.setDebug(true);
+      expect(base.isDebug).to.be.true;
+    });
+
+    it('false flag switches off', () => {
+      base.setDebug(true);
+      expect(base.isDebug).to.be.true;
+      base.setDebug(false);
+      expect(base.isDebug).to.be.false;
+    });
+
+    describe('logging', () => {
+      beforeEach(() => {
+        sinon.spy(console, 'log');
+        sinon.spy(console, 'error');
+      });
+
+      afterEach(() => {
+        console.log.restore();
+        console.error.restore();
+      });
+
+      it('does not log errors with flag off', () => {
+        base.setDebug(false);
+        base.log('error');
+        expect(console.log).to.not.be.called;
+      });
+
+      it('does not log errors with flag off', () => {
+        base.setDebug(false);
+        base.error('error');
+        expect(console.error).to.not.be.called;
+      });
+
+      it('does log errors with flag on', () => {
+        base.setDebug(true);
+        base.log('error');
+        expect(console.log).to.be.called;
+      });
+
+      it('does log errors with flag on', () => {
+        base.setDebug(true);
+        base.error('error');
+        expect(console.error).to.be.called;
+      });
+    });
+  });
+});
diff --git a/js/src/api/transport/ws/index.js b/js/src/api/transport/ws/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..7b6e35934678394c9bd0b82b1b7aacf366a109ab
--- /dev/null
+++ b/js/src/api/transport/ws/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './ws';
diff --git a/js/src/api/transport/ws/ws.e2e.js b/js/src/api/transport/ws/ws.e2e.js
new file mode 100644
index 0000000000000000000000000000000000000000..19e4ab8eb4aa6a04442b74e4a37bcfdab746a05f
--- /dev/null
+++ b/js/src/api/transport/ws/ws.e2e.js
@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Ws from './ws';
+
+const ws = new Ws('ws://localhost:8546/');
+
+describe('transport/Ws', () => {
+  it('connects and makes a call to web3_clientVersion', () => {
+    return ws.execute('web3_clientVersion').then((version) => {
+      const [client] = version.split('/');
+
+      expect(client === 'Geth' || client === 'Parity').to.be.ok;
+    });
+  });
+});
diff --git a/js/src/api/transport/ws/ws.js b/js/src/api/transport/ws/ws.js
new file mode 100644
index 0000000000000000000000000000000000000000..ecab2a5a27d5c1ad38467a59d357de730390b2ec
--- /dev/null
+++ b/js/src/api/transport/ws/ws.js
@@ -0,0 +1,148 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { keccak_256 } from 'js-sha3'; // eslint-disable-line camelcase
+
+import { Logging } from '../../subscriptions';
+import JsonRpcBase from '../jsonRpcBase';
+
+/* global WebSocket */
+export default class Ws extends JsonRpcBase {
+  constructor (url, token) {
+    super();
+
+    this._url = url;
+    this._token = token;
+    this._messages = {};
+
+    this._connecting = true;
+    this._lastError = null;
+    this._autoConnect = false;
+
+    this._connect();
+  }
+
+  updateToken (token) {
+    this._token = token;
+    this._autoConnect = false;
+
+    this._connect();
+  }
+
+  _connect () {
+    const time = parseInt(new Date().getTime() / 1000, 10);
+    const sha3 = keccak_256(`${this._token}:${time}`);
+    const hash = `${sha3}_${time}`;
+
+    if (this._ws) {
+      this._ws.onerror = null;
+      this._ws.onopen = null;
+      this._ws.onclose = null;
+      this._ws.onmessage = null;
+      this._ws = null;
+    }
+
+    this._connecting = true;
+    this._connected = false;
+    this._lastError = null;
+
+    this._ws = new WebSocket(this._url, hash);
+    this._ws.onerror = this._onError;
+    this._ws.onopen = this._onOpen;
+    this._ws.onclose = this._onClose;
+    this._ws.onmessage = this._onMessage;
+  }
+
+  _onOpen = (event) => {
+    console.log('ws:onOpen', event);
+    this._connected = true;
+    this._connecting = false;
+    this._autoConnect = true;
+
+    Object.keys(this._messages)
+      .filter((id) => this._messages[id].queued)
+      .forEach(this._send);
+  }
+
+  _onClose = (event) => {
+    console.log('ws:onClose', event);
+    this._connected = false;
+    this._connecting = false;
+
+    if (this._autoConnect) {
+      this._connect();
+    }
+  }
+
+  _onError = (event) => {
+    console.error('ws:onError', event);
+    this._lastError = event;
+  }
+
+  _onMessage = (event) => {
+    const result = JSON.parse(event.data);
+    const { method, params, json, resolve, reject } = this._messages[result.id];
+
+    Logging.send(method, params, { json, result });
+
+    if (result.error) {
+      this.error(event.data);
+
+      reject(new Error(`${result.error.code}: ${result.error.message}`));
+      delete this._messages[result.id];
+      return;
+    }
+
+    resolve(result.result);
+    delete this._messages[result.id];
+  }
+
+  _send = (id) => {
+    const message = this._messages[id];
+
+    message.queued = !this._connected;
+
+    if (this._connected) {
+      this._ws.send(message.json);
+    }
+  }
+
+  execute (method, ...params) {
+    return new Promise((resolve, reject) => {
+      const id = this.id;
+      const json = this.encode(method, params);
+
+      this._messages[id] = { id, method, params, json, resolve, reject };
+      this._send(id);
+    });
+  }
+
+  get token () {
+    return this._token;
+  }
+
+  get isAutoConnect () {
+    return this._autoConnect;
+  }
+
+  get isConnecting () {
+    return this._connecting;
+  }
+
+  get lastError () {
+    return this._lastError;
+  }
+}
diff --git a/js/src/api/transport/ws/ws.spec.js b/js/src/api/transport/ws/ws.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..c417e89110c34c60637be253d19096bf3fd312c8
--- /dev/null
+++ b/js/src/api/transport/ws/ws.spec.js
@@ -0,0 +1,85 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { TEST_WS_URL, mockWs } from '../../../../test/mockRpc';
+import Ws from './ws';
+
+describe('api/transport/Ws', () => {
+  let transport;
+  let scope;
+
+  describe('transport', () => {
+    let result;
+
+    beforeEach(() => {
+      scope = mockWs([{ method: 'test_anyCall', reply: 'TestResult' }]);
+      transport = new Ws(TEST_WS_URL);
+
+      return transport
+        .execute('test_anyCall', 1, 2, 3)
+        .then((_result) => {
+          result = _result;
+        });
+    });
+
+    afterEach(() => {
+      scope.stop();
+    });
+
+    it('makes call', () => {
+      expect(scope.isDone()).to.be.true;
+    });
+
+    it('sets jsonrpc', () => {
+      expect(scope.body.test_anyCall.jsonrpc).to.equal('2.0');
+    });
+
+    it('sets the method', () => {
+      expect(scope.body.test_anyCall.method).to.equal('test_anyCall');
+    });
+
+    it('passes the params', () => {
+      expect(scope.body.test_anyCall.params).to.deep.equal([1, 2, 3]);
+    });
+
+    it('increments the id', () => {
+      expect(scope.body.test_anyCall.id).not.to.equal(0);
+    });
+
+    it('passes the actual result back', () => {
+      expect(result).to.equal('TestResult');
+    });
+  });
+
+  describe('errors', () => {
+    beforeEach(() => {
+      scope = mockWs([{ method: 'test_anyCall', reply: { error: { code: 1, message: 'TestError' } } }]);
+      transport = new Ws(TEST_WS_URL);
+    });
+
+    afterEach(() => {
+      scope.stop();
+    });
+
+    it('returns RPC errors when encountered', () => {
+      return transport
+        .execute('test_anyCall')
+        .catch((error) => {
+          expect(error).to.match(/TestError/);
+        });
+    });
+  });
+});
diff --git a/js/src/api/util/decode.js b/js/src/api/util/decode.js
new file mode 100644
index 0000000000000000000000000000000000000000..065d516e9e85ebab95326b313f8460e5908a9667
--- /dev/null
+++ b/js/src/api/util/decode.js
@@ -0,0 +1,83 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { isHex } from './types';
+
+import Func from '../../abi/spec/function';
+import { fromParamType, toParamType } from '../../abi/spec/paramType/format';
+
+export function decodeCallData (data) {
+  if (!isHex(data)) {
+    throw new Error('Input to decodeCallData should be a hex value');
+  }
+
+  if (data.substr(0, 2) === '0x') {
+    return decodeCallData(data.slice(2));
+  } else if (data.length < 8) {
+    throw new Error('Input to decodeCallData should be method signature + data');
+  }
+
+  const signature = data.substr(0, 8);
+  const paramdata = data.substr(8);
+
+  return {
+    signature: `0x${signature}`,
+    paramdata: `0x${paramdata}`
+  };
+}
+
+export function decodeMethodInput (methodAbi, paramdata) {
+  if (!methodAbi) {
+    throw new Error('decodeMethodInput should receive valid method-specific ABI');
+  } else if (!paramdata) {
+    throw new Error('decodeMethodInput should receive valid parameter input data');
+  } else if (!isHex(paramdata)) {
+    throw new Error('Input to decodeMethodInput should be a hex value');
+  } else if (paramdata.substr(0, 2) === '0x') {
+    return decodeMethodInput(methodAbi, paramdata.slice(2));
+  } else if (paramdata.length % 64 !== 0) {
+    throw new Error('Parameter length in decodeMethodInput not a multiple of 64 characters');
+  }
+
+  return new Func(methodAbi).decodeInput(paramdata).map((decoded) => decoded.value);
+}
+
+// takes a method in form name(...,types) and returns the inferred abi definition
+export function methodToAbi (method) {
+  const length = method.length;
+  const typesStart = method.indexOf('(');
+  const typesEnd = method.indexOf(')');
+
+  if (typesStart === -1) {
+    throw new Error(`Missing start ( in call to decodeMethod with ${method}`);
+  } else if (typesEnd === -1) {
+    throw new Error(`Missing end ) in call to decodeMethod with ${method}`);
+  } else if (typesEnd < typesStart) {
+    throw new Error(`End ) is before start ( in call to decodeMethod with ${method}`);
+  } else if (typesEnd !== length - 1) {
+    throw new Error(`Extra characters after end ) in call to decodeMethod with ${method}`);
+  }
+
+  const name = method.substr(0, typesStart);
+  const types = method.substr(typesStart + 1, length - (typesStart + 1) - 1).split(',');
+  const inputs = types.map((_type) => {
+    const type = fromParamType(toParamType(_type));
+
+    return { type };
+  });
+
+  return { type: 'function', name, inputs };
+}
diff --git a/js/src/api/util/decode.spec.js b/js/src/api/util/decode.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..665af6d0369c3a88c9af39ff3e4436f2fdb0f24a
--- /dev/null
+++ b/js/src/api/util/decode.spec.js
@@ -0,0 +1,101 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import { decodeCallData, decodeMethodInput, methodToAbi } from './decode';
+
+describe('api/util/decode', () => {
+  const METH = '0x70a08231';
+  const ENCO = '0x70a082310000000000000000000000005A5eFF38DA95b0D58b6C616f2699168B480953C9';
+  const DATA = '0x0000000000000000000000005A5eFF38DA95b0D58b6C616f2699168B480953C9';
+
+  describe('decodeCallData', () => {
+    it('throws on non-hex inputs', () => {
+      expect(() => decodeCallData('invalid')).to.throw(/should be a hex value/);
+    });
+
+    it('throws when invalid signature length', () => {
+      expect(() => decodeCallData(METH.slice(-6))).to.throw(/should be method signature/);
+    });
+
+    it('splits valid inputs properly', () => {
+      expect(decodeCallData(ENCO)).to.deep.equal({
+        signature: METH,
+        paramdata: DATA
+      });
+    });
+  });
+
+  describe('decodeMethodInput', () => {
+    it('expects a valid ABI', () => {
+      expect(() => decodeMethodInput(null, null)).to.throw(/should receive valid method/);
+    });
+
+    it('expects valid parameter data', () => {
+      expect(() => decodeMethodInput({}, null)).to.throw(/should receive valid parameter/);
+    });
+
+    it('expect valid hex parameter data', () => {
+      expect(() => decodeMethodInput({}, 'invalid')).to.throw(/should be a hex value/);
+    });
+
+    it('throws on invalid lengths', () => {
+      expect(() => decodeMethodInput({}, DATA.slice(-32))).to.throw(/not a multiple of/);
+    });
+
+    it('correctly decodes valid inputs', () => {
+      expect(decodeMethodInput({
+        type: 'function',
+        inputs: [
+          { type: 'uint' }
+        ]
+      }, DATA)).to.deep.equal([ new BigNumber('0x5a5eff38da95b0d58b6c616f2699168b480953c9') ]);
+    });
+  });
+
+  describe('methodToAbi', () => {
+    it('throws when no start ( specified', () => {
+      expect(() => methodToAbi('invalid,uint,bool)')).to.throw(/Missing start \(/);
+    });
+
+    it('throws when no end ) specified', () => {
+      expect(() => methodToAbi('invalid(uint,bool')).to.throw(/Missing end \)/);
+    });
+
+    it('throws when end ) is not in the last position', () => {
+      expect(() => methodToAbi('invalid(uint,bool)2')).to.throw(/Extra characters after end \)/);
+    });
+
+    it('throws when start ( is after end )', () => {
+      expect(() => methodToAbi('invalid)uint,bool(')).to.throw(/End \) is before start \(/);
+    });
+
+    it('throws when invalid types are present', () => {
+      expect(() => methodToAbi('method(invalidType,bool,uint)')).to.throw(/Cannot convert invalidType/);
+    });
+
+    it('returns a valid methodabi for a valid method', () => {
+      expect(methodToAbi('valid(uint,bool)')).to.deep.equals({
+        type: 'function',
+        name: 'valid',
+        inputs: [
+          { type: 'uint256' },
+          { type: 'bool' }
+        ]
+      });
+    });
+  });
+});
diff --git a/js/src/api/util/format.js b/js/src/api/util/format.js
new file mode 100644
index 0000000000000000000000000000000000000000..1b68e11388cc3ce336edbced5a6f6f32b7e189d1
--- /dev/null
+++ b/js/src/api/util/format.js
@@ -0,0 +1,19 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function bytesToHex (bytes) {
+  return '0x' + bytes.map((b) => ('0' + b.toString(16)).slice(-2)).join('');
+}
diff --git a/js/src/api/util/format.spec.js b/js/src/api/util/format.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..c779d71efd30df34ddf93edafb9b07c51892d998
--- /dev/null
+++ b/js/src/api/util/format.spec.js
@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { bytesToHex } from './format';
+
+describe('api/util/format', () => {
+  describe('bytesToHex', () => {
+    it('correctly converts an empty array', () => {
+      expect(bytesToHex([])).to.equal('0x');
+    });
+
+    it('correctly converts a non-empty array', () => {
+      expect(bytesToHex([0, 15, 16])).to.equal('0x000f10');
+    });
+  });
+});
diff --git a/js/src/api/util/identity.js b/js/src/api/util/identity.js
new file mode 100644
index 0000000000000000000000000000000000000000..6a25590e3dbe9962acd421a80fe21e2a3ae24df9
--- /dev/null
+++ b/js/src/api/util/identity.js
@@ -0,0 +1,9 @@
+import blockies from 'blockies';
+
+export function createIdentityImg (address, scale = 8) {
+  return blockies({
+    seed: (address || '').toLowerCase(),
+    size: 8,
+    scale
+  }).toDataURL();
+}
diff --git a/js/src/api/util/index.js b/js/src/api/util/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..fb0f79076b74269f4cf7e81380538fb1f0edb631
--- /dev/null
+++ b/js/src/api/util/index.js
@@ -0,0 +1,41 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { isAddress as isAddressValid, toChecksumAddress } from '../../abi/util/address';
+import { decodeCallData, decodeMethodInput, methodToAbi } from './decode';
+import { bytesToHex } from './format';
+import { fromWei, toWei } from './wei';
+import { sha3 } from './sha3';
+import { isArray, isFunction, isHex, isInstanceOf, isString } from './types';
+import { createIdentityImg } from './identity';
+
+export default {
+  isAddressValid,
+  isArray,
+  isFunction,
+  isHex,
+  isInstanceOf,
+  isString,
+  bytesToHex,
+  createIdentityImg,
+  decodeCallData,
+  decodeMethodInput,
+  methodToAbi,
+  fromWei,
+  toChecksumAddress,
+  toWei,
+  sha3
+};
diff --git a/js/src/api/util/sha3.js b/js/src/api/util/sha3.js
new file mode 100644
index 0000000000000000000000000000000000000000..fcbda091a23269cb851d15a8eae6e9c93e7b74a9
--- /dev/null
+++ b/js/src/api/util/sha3.js
@@ -0,0 +1,21 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { keccak_256 } from 'js-sha3'; // eslint-disable-line camelcase
+
+export function sha3 (value) {
+  return `0x${keccak_256(value)}`;
+}
diff --git a/js/src/api/util/sha3.spec.js b/js/src/api/util/sha3.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..bede8bd600d8f8fcbb95917c0b4ed50c86b7edf1
--- /dev/null
+++ b/js/src/api/util/sha3.spec.js
@@ -0,0 +1,25 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { sha3 } from './sha3';
+
+describe('api/util/sha3', () => {
+  describe('sha3', () => {
+    it('constructs a correct sha3 value', () => {
+      expect(sha3('jacogr')).to.equal('0x2f4ff4b5a87abbd2edfed699db48a97744e028c7f7ce36444d40d29d792aa4dc');
+    });
+  });
+});
diff --git a/js/src/api/util/types.js b/js/src/api/util/types.js
new file mode 100644
index 0000000000000000000000000000000000000000..a34f30649f6f649b463bb953fa30eeae638a6ff1
--- /dev/null
+++ b/js/src/api/util/types.js
@@ -0,0 +1,56 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const HEXDIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
+
+export function isArray (test) {
+  return Object.prototype.toString.call(test) === '[object Array]';
+}
+
+export function isError (test) {
+  return Object.prototype.toString.call(test) === '[object Error]';
+}
+
+export function isFunction (test) {
+  return Object.prototype.toString.call(test) === '[object Function]';
+}
+
+export function isHex (_test) {
+  if (_test.substr(0, 2) === '0x') {
+    return isHex(_test.slice(2));
+  }
+
+  const test = _test.toLowerCase();
+  let hex = true;
+
+  for (let idx = 0; hex && idx < test.length; idx++) {
+    hex = HEXDIGITS.includes(test[idx]);
+  }
+
+  return hex;
+}
+
+export function isObject (test) {
+  return Object.prototype.toString.call(test) === '[object Object]';
+}
+
+export function isString (test) {
+  return Object.prototype.toString.call(test) === '[object String]';
+}
+
+export function isInstanceOf (test, clazz) {
+  return test instanceof clazz;
+}
diff --git a/js/src/api/util/types.spec.js b/js/src/api/util/types.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..252876be39e006cdac6d603f369820c295b6680d
--- /dev/null
+++ b/js/src/api/util/types.spec.js
@@ -0,0 +1,112 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import sinon from 'sinon';
+
+import { isArray, isError, isFunction, isHex, isInstanceOf, isObject, isString } from './types';
+import Eth from '../rpc/eth';
+
+describe('api/util/types', () => {
+  describe('isArray', () => {
+    it('correctly identifies null as false', () => {
+      expect(isArray(null)).to.be.false;
+    });
+
+    it('correctly identifies empty array as true', () => {
+      expect(isArray([])).to.be.true;
+    });
+
+    it('correctly identifies array as true', () => {
+      expect(isArray([1, 2, 3])).to.be.true;
+    });
+  });
+
+  describe('isError', () => {
+    it('correctly identifies null as false', () => {
+      expect(isError(null)).to.be.false;
+    });
+
+    it('correctly identifies Error as true', () => {
+      expect(isError(new Error('an error'))).to.be.true;
+    });
+  });
+
+  describe('isFunction', () => {
+    it('correctly identifies null as false', () => {
+      expect(isFunction(null)).to.be.false;
+    });
+
+    it('correctly identifies function as true', () => {
+      expect(isFunction(sinon.stub())).to.be.true;
+    });
+  });
+
+  describe('isHex', () => {
+    it('correctly identifies hex by leading 0x', () => {
+      expect(isHex('0x123')).to.be.true;
+    });
+
+    it('correctly identifies hex without leading 0x', () => {
+      expect(isHex('123')).to.be.true;
+    });
+
+    it('correctly identifies non-hex values', () => {
+      expect(isHex('123j')).to.be.false;
+    });
+  });
+
+  describe('isInstanceOf', () => {
+    it('correctly identifies build-in instanceof', () => {
+      expect(isInstanceOf(new String('123'), String)).to.be.true; // eslint-disable-line no-new-wrappers
+    });
+
+    it('correctly identifies own instanceof', () => {
+      expect(isInstanceOf(new Eth({}), Eth)).to.be.true;
+    });
+
+    it('correctly reports false for own', () => {
+      expect(isInstanceOf({}, Eth)).to.be.false;
+    });
+  });
+
+  describe('isObject', () => {
+    it('correctly identifies empty object as object', () => {
+      expect(isObject({})).to.be.true;
+    });
+
+    it('correctly identifies non-empty object as object', () => {
+      expect(isObject({ data: '123' })).to.be.true;
+    });
+
+    it('correctly identifies Arrays as non-objects', () => {
+      expect(isObject([1, 2, 3])).to.be.false;
+    });
+
+    it('correctly identifies Strings as non-objects', () => {
+      expect(isObject('123')).to.be.false;
+    });
+  });
+
+  describe('isString', () => {
+    it('correctly identifies empty string as string', () => {
+      expect(isString('')).to.be.true;
+    });
+
+    it('correctly identifies string as string', () => {
+      expect(isString('123')).to.be.true;
+    });
+  });
+});
diff --git a/js/src/api/util/wei.js b/js/src/api/util/wei.js
new file mode 100644
index 0000000000000000000000000000000000000000..d04e73921f94fc7cbde264702eeccc85ebd60274
--- /dev/null
+++ b/js/src/api/util/wei.js
@@ -0,0 +1,37 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+
+const UNITS = ['wei', 'ada', 'babbage', 'shannon', 'szabo', 'finney', 'ether', 'kether', 'mether', 'gether', 'tether'];
+
+export function _getUnitMultiplier (unit) {
+  const position = UNITS.indexOf(unit.toLowerCase());
+
+  if (position === -1) {
+    throw new Error(`Unknown unit ${unit} passed to wei formatter`);
+  }
+
+  return 10 ** (position * 3);
+}
+
+export function fromWei (value, unit = 'ether') {
+  return new BigNumber(value).div(_getUnitMultiplier(unit));
+}
+
+export function toWei (value, unit = 'ether') {
+  return new BigNumber(value).mul(_getUnitMultiplier(unit));
+}
diff --git a/js/src/api/util/wei.spec.js b/js/src/api/util/wei.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..8d0b1f09c7d6026b0b147d0ac00f37a5827500f0
--- /dev/null
+++ b/js/src/api/util/wei.spec.js
@@ -0,0 +1,57 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { _getUnitMultiplier, fromWei, toWei } from './wei';
+
+describe('api/util/wei', () => {
+  describe('_getUnitMultiplier', () => {
+    it('returns 10^0 for wei', () => {
+      expect(_getUnitMultiplier('wei')).to.equal(10 ** 0);
+    });
+
+    it('returns 10^15 for finney', () => {
+      expect(_getUnitMultiplier('finney')).to.equal(10 ** 15);
+    });
+
+    it('returns 10^18 for ether', () => {
+      expect(_getUnitMultiplier('ether')).to.equal(10 ** 18);
+    });
+
+    it('throws an error on invalid units', () => {
+      expect(() => _getUnitMultiplier('invalid')).to.throw(/passed to wei formatter/);
+    });
+  });
+
+  describe('fromWei', () => {
+    it('formats into ether when nothing specified', () => {
+      expect(fromWei('1230000000000000000').toString()).to.equal('1.23');
+    });
+
+    it('formats into finney when specified', () => {
+      expect(fromWei('1230000000000000000', 'finney').toString()).to.equal('1230');
+    });
+  });
+
+  describe('toWei', () => {
+    it('formats from ether when nothing specified', () => {
+      expect(toWei(1.23).toString()).to.equal('1230000000000000000');
+    });
+
+    it('formats from finney when specified', () => {
+      expect(toWei(1230, 'finney').toString()).to.equal('1230000000000000000');
+    });
+  });
+});
diff --git a/js/src/contracts/abi/basiccoin.json b/js/src/contracts/abi/basiccoin.json
new file mode 100644
index 0000000000000000000000000000000000000000..0bdc66666fcb4e4f15ca48dbe128c62474367415
--- /dev/null
+++ b/js/src/contracts/abi/basiccoin.json
@@ -0,0 +1 @@
+[{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_new","type":"address"}],"name":"setOwner","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_from","type":"address"},{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transferFrom","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"base","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_who","type":"address"}],"name":"balanceOf","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transfer","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"},{"name":"_spender","type":"address"}],"name":"allowance","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"inputs":[{"name":"_totalSupply","type":"uint256"},{"name":"_owner","type":"address"}],"type":"constructor"},{"payable":false,"type":"fallback"},{"anonymous":false,"inputs":[{"indexed":true,"name":"from","type":"address"},{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Transfer","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"},{"indexed":true,"name":"spender","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"old","type":"address"},{"indexed":true,"name":"current","type":"address"}],"name":"NewOwner","type":"event"}]
diff --git a/js/src/contracts/abi/basiccoinmanager.json b/js/src/contracts/abi/basiccoinmanager.json
new file mode 100644
index 0000000000000000000000000000000000000000..cafe09735c6d4f425e302f60001402d668fad002
--- /dev/null
+++ b/js/src/contracts/abi/basiccoinmanager.json
@@ -0,0 +1 @@
+[{"constant":true,"inputs":[{"name":"_owner","type":"address"}],"name":"countByOwner","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"count","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_new","type":"address"}],"name":"setOwner","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"base","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_index","type":"uint256"}],"name":"get","outputs":[{"name":"coin","type":"address"},{"name":"owner","type":"address"},{"name":"tokenreg","type":"address"}],"payable":false,"type":"function"},{"constant":false,"inputs":[],"name":"drain","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_totalSupply","type":"uint256"},{"name":"_tla","type":"string"},{"name":"_name","type":"string"},{"name":"_tokenreg","type":"address"}],"name":"deploy","outputs":[{"name":"","type":"bool"}],"payable":true,"type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"},{"name":"_index","type":"uint256"}],"name":"getByOwner","outputs":[{"name":"coin","type":"address"},{"name":"owner","type":"address"},{"name":"tokenreg","type":"address"}],"payable":false,"type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"},{"indexed":true,"name":"tokenreg","type":"address"},{"indexed":true,"name":"coin","type":"address"}],"name":"Created","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"old","type":"address"},{"indexed":true,"name":"current","type":"address"}],"name":"NewOwner","type":"event"}]
diff --git a/js/src/contracts/abi/dappreg.json b/js/src/contracts/abi/dappreg.json
new file mode 100644
index 0000000000000000000000000000000000000000..f6bec35af13d798dd239543bc1b0673ef12a4fdd
--- /dev/null
+++ b/js/src/contracts/abi/dappreg.json
@@ -0,0 +1 @@
+[{"constant":true,"inputs":[{"name":"_id","type":"bytes32"},{"name":"_key","type":"bytes32"}],"name":"meta","outputs":[{"name":"","type":"bytes32"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"count","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_new","type":"address"}],"name":"setOwner","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_id","type":"bytes32"}],"name":"unregister","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_fee","type":"uint256"}],"name":"setFee","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_id","type":"bytes32"}],"name":"get","outputs":[{"name":"id","type":"bytes32"},{"name":"owner","type":"address"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_id","type":"bytes32"},{"name":"_key","type":"bytes32"},{"name":"_value","type":"bytes32"}],"name":"setMeta","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[],"name":"drain","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_id","type":"bytes32"},{"name":"_owner","type":"address"}],"name":"setDappOwner","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"fee","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_index","type":"uint256"}],"name":"at","outputs":[{"name":"id","type":"bytes32"},{"name":"owner","type":"address"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_id","type":"bytes32"}],"name":"register","outputs":[],"payable":true,"type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"id","type":"bytes32"},{"indexed":true,"name":"key","type":"bytes32"},{"indexed":false,"name":"value","type":"bytes32"}],"name":"MetaChanged","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"id","type":"bytes32"},{"indexed":true,"name":"owner","type":"address"}],"name":"OwnerChanged","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"id","type":"bytes32"},{"indexed":true,"name":"owner","type":"address"}],"name":"Registered","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"id","type":"bytes32"}],"name":"Unregistered","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"old","type":"address"},{"indexed":true,"name":"current","type":"address"}],"name":"NewOwner","type":"event"}]
diff --git a/js/src/contracts/abi/eip20.json b/js/src/contracts/abi/eip20.json
new file mode 100644
index 0000000000000000000000000000000000000000..6937e28c85b0e428e092fe89ae54c950b6899baa
--- /dev/null
+++ b/js/src/contracts/abi/eip20.json
@@ -0,0 +1,163 @@
+[
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_spender",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "approve",
+    "outputs": [
+      {
+        "name": "success",
+        "type": "bool"
+      }
+    ],
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "name": "total",
+        "type": "uint256"
+      }
+    ],
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_from",
+        "type": "address"
+      },
+      {
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transferFrom",
+    "outputs": [
+      {
+        "name": "success",
+        "type": "bool"
+      }
+    ],
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      }
+    ],
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "name": "balance",
+        "type": "uint256"
+      }
+    ],
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_to",
+        "type": "address"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "transfer",
+    "outputs": [
+      {
+        "name": "success",
+        "type": "bool"
+      }
+    ],
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      },
+      {
+        "name": "_spender",
+        "type": "address"
+      }
+    ],
+    "name": "allowance",
+    "outputs": [
+      {
+        "name": "remaining",
+        "type": "uint256"
+      }
+    ],
+    "type": "function"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "from",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Transfer",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "spender",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Approval",
+    "type": "event"
+  }
+]
diff --git a/js/src/contracts/abi/gavcoin.json b/js/src/contracts/abi/gavcoin.json
new file mode 100644
index 0000000000000000000000000000000000000000..5170326f5a4b58fe3b64ff40b306ae2e297e062a
--- /dev/null
+++ b/js/src/contracts/abi/gavcoin.json
@@ -0,0 +1 @@
+[{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[{"name":"success","type":"bool"}],"type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"type":"function"},{"constant":false,"inputs":[{"name":"_from","type":"address"},{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transferFrom","outputs":[{"name":"success","type":"bool"}],"type":"function"},{"constant":false,"inputs":[{"name":"_who","type":"address"},{"name":"_maxPrice","type":"uint256"}],"name":"buyin","outputs":[],"type":"function"},{"constant":true,"inputs":[],"name":"remaining","outputs":[{"name":"","type":"uint256"}],"type":"function"},{"constant":false,"inputs":[{"name":"_price","type":"uint256"},{"name":"_units","type":"uint256"}],"name":"refund","outputs":[{"name":"","type":"bool"}],"type":"function"},{"constant":true,"inputs":[{"name":"_who","type":"address"}],"name":"balanceOf","outputs":[{"name":"","type":"uint256"}],"type":"function"},{"constant":true,"inputs":[],"name":"price","outputs":[{"name":"","type":"uint256"}],"type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transfer","outputs":[{"name":"success","type":"bool"}],"type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"},{"name":"_spender","type":"address"}],"name":"allowance","outputs":[{"name":"remaining","type":"uint256"}],"type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"from","type":"address"},{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Transfer","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"},{"indexed":true,"name":"spender","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"buyer","type":"address"},{"indexed":true,"name":"price","type":"uint256"},{"indexed":true,"name":"amount","type":"uint256"}],"name":"Buyin","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"buyer","type":"address"},{"indexed":true,"name":"price","type":"uint256"},{"indexed":true,"name":"amount","type":"uint256"}],"name":"Refund","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"price","type":"uint256"}],"name":"NewTranch","type":"event"}]
diff --git a/js/src/contracts/abi/githubhint.json b/js/src/contracts/abi/githubhint.json
new file mode 100644
index 0000000000000000000000000000000000000000..bdbc162e4e516fa8732371a846465d199b1504cd
--- /dev/null
+++ b/js/src/contracts/abi/githubhint.json
@@ -0,0 +1,81 @@
+[
+   {
+      "constant":false,
+      "inputs":[
+         {
+            "name":"_content",
+            "type":"bytes32"
+         },
+         {
+            "name":"_url",
+            "type":"string"
+         }
+      ],
+      "name":"hintURL",
+      "outputs":[
+
+      ],
+      "type":"function"
+   },
+   {
+      "constant":false,
+      "inputs":[
+         {
+            "name":"_content",
+            "type":"bytes32"
+         },
+         {
+            "name":"_accountSlashRepo",
+            "type":"string"
+         },
+         {
+            "name":"_commit",
+            "type":"bytes20"
+         }
+      ],
+      "name":"hint",
+      "outputs":[
+
+      ],
+      "type":"function"
+   },
+   {
+      "constant":true,
+      "inputs":[
+         {
+            "name":"",
+            "type":"bytes32"
+         }
+      ],
+      "name":"entries",
+      "outputs":[
+         {
+            "name":"accountSlashRepo",
+            "type":"string"
+         },
+         {
+            "name":"commit",
+            "type":"bytes20"
+         },
+         {
+            "name":"owner",
+            "type":"address"
+         }
+      ],
+      "type":"function"
+   },
+   {
+      "constant":false,
+      "inputs":[
+         {
+            "name":"_content",
+            "type":"bytes32"
+         }
+      ],
+      "name":"unhint",
+      "outputs":[
+
+      ],
+      "type":"function"
+   }
+]
diff --git a/js/src/contracts/abi/index.js b/js/src/contracts/abi/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..599f8a13b4a1075183190f4debe5846f11e6a6ae
--- /dev/null
+++ b/js/src/contracts/abi/index.js
@@ -0,0 +1,39 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import basiccoin from './basiccoin.json';
+import basiccoinmanager from './basiccoinmanager.json';
+import dappreg from './dappreg.json';
+import eip20 from './eip20.json';
+import gavcoin from './gavcoin.json';
+import githubhint from './githubhint.json';
+import owned from './owned.json';
+import registry from './registry.json';
+import signaturereg from './signaturereg.json';
+import tokenreg from './tokenreg.json';
+
+export {
+  basiccoin,
+  basiccoinmanager,
+  dappreg,
+  eip20,
+  gavcoin,
+  githubhint,
+  owned,
+  registry,
+  signaturereg,
+  tokenreg
+};
diff --git a/js/src/contracts/abi/owned.json b/js/src/contracts/abi/owned.json
new file mode 100644
index 0000000000000000000000000000000000000000..ccfeed85d06bc7e2bc78498968eaab93d88fde24
--- /dev/null
+++ b/js/src/contracts/abi/owned.json
@@ -0,0 +1 @@
+[{"constant":false,"inputs":[{"name":"_new","type":"address"}],"name":"setOwner","outputs":[],"type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"old","type":"address"},{"indexed":true,"name":"current","type":"address"}],"name":"NewOwner","type":"event"}]
diff --git a/js/src/contracts/abi/registry.json b/js/src/contracts/abi/registry.json
new file mode 100644
index 0000000000000000000000000000000000000000..f97dc20c72abad7ffb31de847af50f1a26b4e0af
--- /dev/null
+++ b/js/src/contracts/abi/registry.json
@@ -0,0 +1 @@
+[{"constant":false,"inputs":[{"name":"_new","type":"address"}],"name":"setOwner","outputs":[],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"}],"name":"confirmReverse","outputs":[{"name":"success","type":"bool"}],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"bytes32"}],"name":"reserve","outputs":[{"name":"success","type":"bool"}],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"bytes32"},{"name":"_key","type":"string"},{"name":"_value","type":"bytes32"}],"name":"set","outputs":[{"name":"success","type":"bool"}],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"bytes32"}],"name":"drop","outputs":[{"name":"success","type":"bool"}],"type":"function"},{"constant":true,"inputs":[{"name":"_name","type":"bytes32"},{"name":"_key","type":"string"}],"name":"getAddress","outputs":[{"name":"","type":"address"}],"type":"function"},{"constant":false,"inputs":[{"name":"_amount","type":"uint256"}],"name":"setFee","outputs":[],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"bytes32"},{"name":"_to","type":"address"}],"name":"transfer","outputs":[{"name":"success","type":"bool"}],"type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"type":"function"},{"constant":true,"inputs":[{"name":"_name","type":"bytes32"}],"name":"reserved","outputs":[{"name":"reserved","type":"bool"}],"type":"function"},{"constant":false,"inputs":[],"name":"drain","outputs":[],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"},{"name":"_who","type":"address"}],"name":"proposeReverse","outputs":[{"name":"success","type":"bool"}],"type":"function"},{"constant":true,"inputs":[{"name":"_name","type":"bytes32"},{"name":"_key","type":"string"}],"name":"getUint","outputs":[{"name":"","type":"uint256"}],"type":"function"},{"constant":true,"inputs":[{"name":"_name","type":"bytes32"},{"name":"_key","type":"string"}],"name":"get","outputs":[{"name":"","type":"bytes32"}],"type":"function"},{"constant":true,"inputs":[],"name":"fee","outputs":[{"name":"","type":"uint256"}],"type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"reverse","outputs":[{"name":"","type":"string"}],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"bytes32"},{"name":"_key","type":"string"},{"name":"_value","type":"uint256"}],"name":"setUint","outputs":[{"name":"success","type":"bool"}],"type":"function"},{"constant":false,"inputs":[],"name":"removeReverse","outputs":[],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"bytes32"},{"name":"_key","type":"string"},{"name":"_value","type":"address"}],"name":"setAddress","outputs":[{"name":"success","type":"bool"}],"type":"function"},{"anonymous":false,"inputs":[{"indexed":false,"name":"amount","type":"uint256"}],"name":"Drained","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"amount","type":"uint256"}],"name":"FeeChanged","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"name","type":"bytes32"},{"indexed":true,"name":"owner","type":"address"}],"name":"Reserved","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"name","type":"bytes32"},{"indexed":true,"name":"oldOwner","type":"address"},{"indexed":true,"name":"newOwner","type":"address"}],"name":"Transferred","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"name","type":"bytes32"},{"indexed":true,"name":"owner","type":"address"}],"name":"Dropped","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"name","type":"bytes32"},{"indexed":true,"name":"owner","type":"address"},{"indexed":true,"name":"key","type":"string"},{"indexed":false,"name":"plainKey","type":"string"}],"name":"DataChanged","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"name","type":"string"},{"indexed":true,"name":"reverse","type":"address"}],"name":"ReverseProposed","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"name","type":"string"},{"indexed":true,"name":"reverse","type":"address"}],"name":"ReverseConfirmed","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"name","type":"string"},{"indexed":true,"name":"reverse","type":"address"}],"name":"ReverseRemoved","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"old","type":"address"},{"indexed":true,"name":"current","type":"address"}],"name":"NewOwner","type":"event"}]
diff --git a/js/src/contracts/abi/signaturereg.json b/js/src/contracts/abi/signaturereg.json
new file mode 100644
index 0000000000000000000000000000000000000000..a9b109ecd463a4873c3597eec690e20819132ef7
--- /dev/null
+++ b/js/src/contracts/abi/signaturereg.json
@@ -0,0 +1,128 @@
+[
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_new",
+        "type": "address"
+      }
+    ],
+    "name": "setOwner",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "totalSignatures",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "owner",
+    "outputs": [
+      {
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [],
+    "name": "drain",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "",
+        "type": "bytes4"
+      }
+    ],
+    "name": "entries",
+    "outputs": [
+      {
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_method",
+        "type": "string"
+      }
+    ],
+    "name": "register",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "creator",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "signature",
+        "type": "bytes4"
+      },
+      {
+        "indexed": false,
+        "name": "method",
+        "type": "string"
+      }
+    ],
+    "name": "Registered",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "old",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "name": "current",
+        "type": "address"
+      }
+    ],
+    "name": "NewOwner",
+    "type": "event"
+  }
+]
diff --git a/js/src/contracts/abi/tokenreg.json b/js/src/contracts/abi/tokenreg.json
new file mode 100644
index 0000000000000000000000000000000000000000..e56a13eec48aa4dc1ae9f558b3a080c24174c065
--- /dev/null
+++ b/js/src/contracts/abi/tokenreg.json
@@ -0,0 +1 @@
+[{"constant":true,"inputs":[{"name":"_id","type":"uint256"}],"name":"token","outputs":[{"name":"addr","type":"address"},{"name":"tla","type":"string"},{"name":"base","type":"uint256"},{"name":"name","type":"string"},{"name":"owner","type":"address"}],"type":"function"},{"constant":false,"inputs":[{"name":"_new","type":"address"}],"name":"setOwner","outputs":[],"type":"function"},{"constant":false,"inputs":[{"name":"_addr","type":"address"},{"name":"_tla","type":"string"},{"name":"_base","type":"uint256"},{"name":"_name","type":"string"}],"name":"register","outputs":[{"name":"","type":"bool"}],"type":"function"},{"constant":false,"inputs":[{"name":"_fee","type":"uint256"}],"name":"setFee","outputs":[],"type":"function"},{"constant":true,"inputs":[{"name":"_id","type":"uint256"},{"name":"_key","type":"bytes32"}],"name":"meta","outputs":[{"name":"","type":"bytes32"}],"type":"function"},{"constant":false,"inputs":[{"name":"_addr","type":"address"},{"name":"_tla","type":"string"},{"name":"_base","type":"uint256"},{"name":"_name","type":"string"},{"name":"_owner","type":"address"}],"name":"registerAs","outputs":[{"name":"","type":"bool"}],"type":"function"},{"constant":true,"inputs":[{"name":"_tla","type":"string"}],"name":"fromTLA","outputs":[{"name":"id","type":"uint256"},{"name":"addr","type":"address"},{"name":"base","type":"uint256"},{"name":"name","type":"string"},{"name":"owner","type":"address"}],"type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"type":"function"},{"constant":false,"inputs":[],"name":"drain","outputs":[],"type":"function"},{"constant":true,"inputs":[],"name":"tokenCount","outputs":[{"name":"","type":"uint256"}],"type":"function"},{"constant":false,"inputs":[{"name":"_id","type":"uint256"}],"name":"unregister","outputs":[],"type":"function"},{"constant":true,"inputs":[{"name":"_addr","type":"address"}],"name":"fromAddress","outputs":[{"name":"id","type":"uint256"},{"name":"tla","type":"string"},{"name":"base","type":"uint256"},{"name":"name","type":"string"},{"name":"owner","type":"address"}],"type":"function"},{"constant":false,"inputs":[{"name":"_id","type":"uint256"},{"name":"_key","type":"bytes32"},{"name":"_value","type":"bytes32"}],"name":"setMeta","outputs":[],"type":"function"},{"constant":true,"inputs":[],"name":"fee","outputs":[{"name":"","type":"uint256"}],"type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"tla","type":"string"},{"indexed":true,"name":"id","type":"uint256"},{"indexed":false,"name":"addr","type":"address"},{"indexed":false,"name":"name","type":"string"}],"name":"Registered","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"tla","type":"string"},{"indexed":true,"name":"id","type":"uint256"}],"name":"Unregistered","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"id","type":"uint256"},{"indexed":true,"name":"key","type":"bytes32"},{"indexed":false,"name":"value","type":"bytes32"}],"name":"MetaChanged","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"old","type":"address"},{"indexed":true,"name":"current","type":"address"}],"name":"NewOwner","type":"event"}]
diff --git a/js/src/contracts/contracts.js b/js/src/contracts/contracts.js
new file mode 100644
index 0000000000000000000000000000000000000000..c9d1c2390a0bbf9292e2ee838ef7e584802d47a9
--- /dev/null
+++ b/js/src/contracts/contracts.js
@@ -0,0 +1,58 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import DappReg from './dappreg';
+import Registry from './registry';
+import SignatureReg from './signaturereg';
+import TokenReg from './tokenreg';
+
+let instance = null;
+
+export default class Contracts {
+  constructor (api) {
+    instance = this;
+
+    this._api = api;
+    this._registry = new Registry(api);
+    this._dappreg = new DappReg(api, this._registry);
+    this._signaturereg = new SignatureReg(api, this._registry);
+    this._tokenreg = new TokenReg(api, this._registry);
+  }
+
+  get registry () {
+    return this._registry;
+  }
+
+  get dappReg () {
+    return this._dappreg;
+  }
+
+  get signatureReg () {
+    return this._signaturereg;
+  }
+
+  get tokenReg () {
+    return this._tokenreg;
+  }
+
+  static create (api) {
+    return new Contracts(api);
+  }
+
+  static get () {
+    return instance;
+  }
+}
diff --git a/js/src/contracts/dappreg.js b/js/src/contracts/dappreg.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef07e95c58e1bc472642f256e6ec95b7ae91ab38
--- /dev/null
+++ b/js/src/contracts/dappreg.js
@@ -0,0 +1,72 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default class DappReg {
+  constructor (api, registry) {
+    this._api = api;
+    this._registry = registry;
+
+    this.getInstance();
+  }
+
+  getInstance () {
+    return this._registry.getContractInstance('dappreg');
+  }
+
+  count () {
+    return this.getInstance().then((instance) => {
+      return instance.count.call();
+    });
+  }
+
+  at (index) {
+    return this.getInstance().then((instance) => {
+      return instance.at.call({}, [index]);
+    });
+  }
+
+  get (id) {
+    return this.getInstance().then((instance) => {
+      return instance.get.call({}, [id]);
+    });
+  }
+
+  meta (id, key) {
+    return this.getInstance().then((instance) => {
+      return instance.meta.call({}, [id, key]);
+    });
+  }
+
+  getImage (id) {
+    return this.meta(id, 'IMG');
+  }
+}
diff --git a/js/src/contracts/index.js b/js/src/contracts/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..075837ce6518cda55b6cb1b885a46d0b6b77eefa
--- /dev/null
+++ b/js/src/contracts/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './contracts';
diff --git a/js/src/contracts/registry.js b/js/src/contracts/registry.js
new file mode 100644
index 0000000000000000000000000000000000000000..85b9d6bb51c99ff81f5cf1f65c3cbdd47f595116
--- /dev/null
+++ b/js/src/contracts/registry.js
@@ -0,0 +1,76 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import * as abis from './abi';
+
+export default class Registry {
+  constructor (api) {
+    this._api = api;
+    this._contracts = [];
+    this._instance = null;
+
+    this.getInstance();
+  }
+
+  getInstance () {
+    return new Promise((resolve, reject) => {
+      if (this._instance) {
+        resolve(this._instance);
+        return;
+      }
+
+      this._api.ethcore
+        .registryAddress()
+        .then((address) => {
+          this._instance = this._api.newContract(abis.registry, address).instance;
+          resolve(this._instance);
+        })
+        .catch(reject);
+    });
+  }
+
+  getContractInstance (_name) {
+    const name = _name.toLowerCase();
+
+    return new Promise((resolve, reject) => {
+      if (this._contracts[name]) {
+        resolve(this._contracts[name]);
+        return;
+      }
+
+      this
+        .lookupAddress(name)
+        .then((address) => {
+          this._contracts[name] = this._api.newContract(abis[name], address).instance;
+          resolve(this._contracts[name]);
+        })
+        .catch(reject);
+    });
+  }
+
+  lookupAddress (_name) {
+    const name = _name.toLowerCase();
+    const sha3 = this._api.util.sha3(name);
+
+    return this.getInstance().then((instance) => {
+      return instance.getAddress.call({}, [sha3, 'A']);
+    })
+    .then((address) => {
+      console.log('lookupAddress', name, sha3, address);
+      return address;
+    });
+  }
+}
diff --git a/js/src/contracts/signaturereg.js b/js/src/contracts/signaturereg.js
new file mode 100644
index 0000000000000000000000000000000000000000..459f165b1d219e6ae2156b8462bc4e5b719f79f7
--- /dev/null
+++ b/js/src/contracts/signaturereg.js
@@ -0,0 +1,34 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default class SignatureReg {
+  constructor (api, registry) {
+    this._api = api;
+    this._registry = registry;
+
+    this.getInstance();
+  }
+
+  getInstance () {
+    return this._registry.getContractInstance('signaturereg');
+  }
+
+  lookup (signature) {
+    return this.getInstance().then((instance) => {
+      return instance.entries.call({}, [signature]);
+    });
+  }
+}
diff --git a/js/src/contracts/tokenreg.js b/js/src/contracts/tokenreg.js
new file mode 100644
index 0000000000000000000000000000000000000000..78bd5e4d9135dd33b1e6b441966df02ed7a720c7
--- /dev/null
+++ b/js/src/contracts/tokenreg.js
@@ -0,0 +1,40 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default class TokenReg {
+  constructor (api, registry) {
+    this._api = api;
+    this._registry = registry;
+
+    this.getInstance();
+  }
+
+  getInstance () {
+    return this._registry.getContractInstance('tokenreg');
+  }
+
+  tokenCount () {
+    return this.getInstance().then((instance) => {
+      return instance.tokenCount.call();
+    });
+  }
+
+  token (index) {
+    return this.getInstance().then((instance) => {
+      return instance.token.call({}, [index]);
+    });
+  }
+}
diff --git a/js/src/dapps/basiccoin.html b/js/src/dapps/basiccoin.html
new file mode 100644
index 0000000000000000000000000000000000000000..9bcc368f38887876a3b256b29d329639ff0f9240
--- /dev/null
+++ b/js/src/dapps/basiccoin.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Basic Token Deployment</title>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="vendor.js"></script>
+    <script src="commons.js"></script>
+    <script src="parity.js"></script>
+    <script src="basiccoin.js"></script>
+  </body>
+</html>
diff --git a/js/src/dapps/basiccoin.js b/js/src/dapps/basiccoin.js
new file mode 100644
index 0000000000000000000000000000000000000000..e02990d14ebe0bf2a48bfaf4a00011260404878a
--- /dev/null
+++ b/js/src/dapps/basiccoin.js
@@ -0,0 +1,47 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { createHashHistory } from 'history';
+import { Redirect, Router, Route, useRouterHistory } from 'react-router';
+
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
+import Deploy from './basiccoin/Deploy';
+import Application from './basiccoin/Application';
+import Overview from './basiccoin/Overview';
+import Transfer from './basiccoin/Transfer';
+
+const routerHistory = useRouterHistory(createHashHistory)({});
+
+import '../../assets/fonts/Roboto/font.css';
+import '../../assets/fonts/RobotoMono/font.css';
+import './style.css';
+import './basiccoin.html';
+
+ReactDOM.render(
+  <Router history={ routerHistory }>
+    <Redirect from='/' to='/overview' />
+    <Route path='/' component={ Application }>
+      <Route path='deploy' component={ Deploy } />
+      <Route path='overview' component={ Overview } />
+      <Route path='transfer' component={ Transfer } />
+    </Route>
+  </Router>,
+  document.querySelector('#container')
+);
diff --git a/js/src/dapps/basiccoin/AddressSelect/addressSelect.css b/js/src/dapps/basiccoin/AddressSelect/addressSelect.css
new file mode 100644
index 0000000000000000000000000000000000000000..ddfd334e8bdcb570cb2448349d04cea141d39603
--- /dev/null
+++ b/js/src/dapps/basiccoin/AddressSelect/addressSelect.css
@@ -0,0 +1,23 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.iconMenu {
+}
+
+.iconMenu option {
+  padding-left: 30px;
+}
diff --git a/js/src/dapps/basiccoin/AddressSelect/addressSelect.js b/js/src/dapps/basiccoin/AddressSelect/addressSelect.js
new file mode 100644
index 0000000000000000000000000000000000000000..529e7753d980b3f36797cc1b0108eaec55cd40e8
--- /dev/null
+++ b/js/src/dapps/basiccoin/AddressSelect/addressSelect.js
@@ -0,0 +1,93 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../parity';
+import styles from './addressSelect.css';
+
+export default class AddressSelect extends Component {
+  static contextTypes = {
+    accounts: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    addresses: PropTypes.array.isRequired,
+    onChange: PropTypes.func.isRequired
+  }
+
+  state = {
+    selected: null
+  }
+
+  componentDidMount () {
+    const { addresses } = this.props;
+
+    this.onChange({
+      target: {
+        value: addresses[0]
+      }
+    });
+  }
+
+  componentWillReceiveProps (newProps) {
+    const { addresses } = this.props;
+    let changed = addresses.length !== newProps.addresses.length;
+
+    if (!changed) {
+      changed = addresses.filter((address, index) => newProps.addresses[index] !== address).length;
+    }
+
+    if (changed) {
+      this.onChange({ target: { value: newProps.addresses[0] } });
+    }
+  }
+
+  render () {
+    const { addresses } = this.props;
+    const { selectedAddress } = this.state;
+    const style = {
+      background: `rgba(255, 255, 255, 0.75) url(${api.util.createIdentityImg(selectedAddress, 3)}) no-repeat 98% center`
+    };
+
+    return (
+      <select
+        className={ styles.iconMenu }
+        style={ style }
+        onChange={ this.onChange }>
+        { addresses.map(this.renderOption) }
+      </select>
+    );
+  }
+
+  renderOption = (address) => {
+    const { accounts } = this.context;
+    const account = accounts[address];
+
+    return (
+      <option
+        key={ account.address }
+        value={ account.address }>
+        { account.name }
+      </option>
+    );
+  }
+
+  onChange = (event) => {
+    this.setState({ selectedAddress: event.target.value });
+    this.props.onChange(event);
+  }
+}
diff --git a/js/src/dapps/basiccoin/AddressSelect/index.js b/js/src/dapps/basiccoin/AddressSelect/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..58059cd2e1ed7ab7091ed5e46191bdca69a0cf1e
--- /dev/null
+++ b/js/src/dapps/basiccoin/AddressSelect/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './addressSelect';
diff --git a/js/src/dapps/basiccoin/Application/Header/header.css b/js/src/dapps/basiccoin/Application/Header/header.css
new file mode 100644
index 0000000000000000000000000000000000000000..5416d7c05c8ea8af321eb7272efc4f117332966b
--- /dev/null
+++ b/js/src/dapps/basiccoin/Application/Header/header.css
@@ -0,0 +1,71 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.header {
+}
+
+.titlebar {
+  padding: 0.5em 1em;
+  margin: 0;
+  color: white;
+}
+
+.navigation {
+  table-layout: fixed;
+  width: 100%;
+  border-spacing: 0.25em;
+  border-collapse: separate;
+  border-color: white;
+  background: white;
+}
+
+.navigation tr {
+  height: 10em;
+}
+
+.title {
+  font-size: 1.25em;
+  margin-bottom: 0.25em;
+}
+
+.byline {
+  font-size: 1em;
+  opacity: 0.75;
+  margin-bottom: 0.25em;
+}
+
+.description {
+  font-size: 0.5em;
+  opacity: 0.5;
+  line-height: 1.5em;
+}
+
+.navNext,
+.navCurrent {
+  color: white;
+  padding: 1em 2em;
+  vertical-align: middle;
+}
+
+.navNext:hover {
+  cursor: pointer;
+  opacity: 0.8;
+}
+
+.navCurrent {
+  font-size: 2em;
+}
diff --git a/js/src/dapps/basiccoin/Application/Header/header.js b/js/src/dapps/basiccoin/Application/Header/header.js
new file mode 100644
index 0000000000000000000000000000000000000000..90fa909ef06df8a87352ce5898f3a97f4749890f
--- /dev/null
+++ b/js/src/dapps/basiccoin/Application/Header/header.js
@@ -0,0 +1,80 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import PAGES from '../pages';
+import styles from './header.css';
+
+export default class Header extends Component {
+  static contextTypes = {
+    router: PropTypes.object.isRequired
+  }
+
+  render () {
+    const path = (window.location.hash || '').split('?')[0].split('/')[1];
+    const offset = PAGES.findIndex((header) => header.path === path);
+
+    return (
+      <div className={ styles.header }>
+        <table className={ styles.navigation }>
+          <tbody>
+            <tr>
+              { this.renderHeader(0, offset) }
+              { this.renderHeader(1, offset) }
+            </tr>
+            <tr>
+              { this.renderHeader(2, offset) }
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  renderHeader (position, offset) {
+    const index = (position + offset) % PAGES.length;
+    const page = PAGES[index];
+    const background = `rgba(102, 34, 34, ${1 - (0.1 * position)})`;
+
+    return (
+      <td
+        className={ position ? styles.navNext : styles.navCurrent }
+        style={ { background } }
+        colSpan={ position ? 1 : 2 }
+        rowSpan={ position ? 1 : 2 }
+        onClick={ this.onNavigate(page.path) }>
+        <div className={ styles.title }>
+          { page.title }
+        </div>
+        <div className={ styles.byline }>
+          { page.byline }
+        </div>
+        <div className={ styles.description }>
+          { position ? null : page.description }
+        </div>
+      </td>
+    );
+  }
+
+  onNavigate = (route) => {
+    const { router } = this.context;
+
+    return (event) => {
+      router.push(`/${route}`);
+    };
+  }
+}
diff --git a/js/src/dapps/basiccoin/Application/Header/index.js b/js/src/dapps/basiccoin/Application/Header/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4a51219067e9b777d9e8180f84449d146f85df3d
--- /dev/null
+++ b/js/src/dapps/basiccoin/Application/Header/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './header';
diff --git a/js/src/dapps/basiccoin/Application/Loading/index.js b/js/src/dapps/basiccoin/Application/Loading/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0468cab37dfd505cb0b1ef415376ca121ab9ca89
--- /dev/null
+++ b/js/src/dapps/basiccoin/Application/Loading/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './loading';
diff --git a/js/src/dapps/basiccoin/Application/Loading/loading.css b/js/src/dapps/basiccoin/Application/Loading/loading.css
new file mode 100644
index 0000000000000000000000000000000000000000..915cc77dc2142a569c8dce941a8f7d5cfa144e1f
--- /dev/null
+++ b/js/src/dapps/basiccoin/Application/Loading/loading.css
@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.body {
+  width: 100%;
+  text-align: center;
+  padding-top: 5em;
+  font-size: 2em;
+  color: #999;
+}
diff --git a/js/src/dapps/basiccoin/Application/Loading/loading.js b/js/src/dapps/basiccoin/Application/Loading/loading.js
new file mode 100644
index 0000000000000000000000000000000000000000..e698a0e80b395ead4e0b606c9abd9315fc78e5e7
--- /dev/null
+++ b/js/src/dapps/basiccoin/Application/Loading/loading.js
@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import styles from './loading.css';
+
+export default class Loading extends Component {
+  render () {
+    return (
+      <div className={ styles.body }>
+        Attaching to contract ...
+      </div>
+    );
+  }
+}
diff --git a/js/src/dapps/basiccoin/Application/application.css b/js/src/dapps/basiccoin/Application/application.css
new file mode 100644
index 0000000000000000000000000000000000000000..97b66be8759fcb1748ea8bab2a91ca5c08a461ee
--- /dev/null
+++ b/js/src/dapps/basiccoin/Application/application.css
@@ -0,0 +1,28 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  color: #444;
+  font-family: 'Roboto';
+  vertical-align: middle;
+  min-height: 100vh;
+  position:relative;
+}
+
+.body {
+  padding: 0 0.25em;
+}
diff --git a/js/src/dapps/basiccoin/Application/application.js b/js/src/dapps/basiccoin/Application/application.js
new file mode 100644
index 0000000000000000000000000000000000000000..1e268e7203f50e7628c2e665353612d14cef920d
--- /dev/null
+++ b/js/src/dapps/basiccoin/Application/application.js
@@ -0,0 +1,107 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../parity';
+import { attachInstances } from '../services';
+
+import Header from './Header';
+import Loading from './Loading';
+
+import styles from './application.css';
+
+export default class Application extends Component {
+  static childContextTypes = {
+    accounts: PropTypes.object,
+    managerInstance: PropTypes.object,
+    registryInstance: PropTypes.object,
+    tokenregInstance: PropTypes.object
+  }
+
+  static propTypes = {
+    children: PropTypes.node.isRequired
+  }
+
+  state = {
+    accounts: null,
+    loading: true,
+    managerInstance: null,
+    registryInstance: null,
+    tokenregInstance: null
+  }
+
+  componentDidMount () {
+    this.attachInstance();
+  }
+
+  render () {
+    const { children } = this.props;
+    const { loading } = this.state;
+
+    if (loading) {
+      return (
+        <Loading />
+      );
+    }
+
+    return (
+      <div className={ styles.container }>
+        <Header />
+        <div className={ styles.body }>
+          { children }
+        </div>
+      </div>
+    );
+  }
+
+  getChildContext () {
+    const { accounts, managerInstance, registryInstance, tokenregInstance } = this.state;
+
+    return {
+      accounts,
+      managerInstance,
+      registryInstance,
+      tokenregInstance
+    };
+  }
+
+  attachInstance () {
+    Promise
+      .all([
+        attachInstances(),
+        api.personal.accountsInfo()
+      ])
+      .then(([{ managerInstance, registryInstance, tokenregInstance }, accountsInfo]) => {
+        this.setState({
+          loading: false,
+          managerInstance,
+          registryInstance,
+          tokenregInstance,
+          accounts: Object
+            .keys(accountsInfo)
+            .filter((address) => !accountsInfo[address].meta.deleted)
+            .sort((a, b) => {
+              return (accountsInfo[b].uuid || '').localeCompare(accountsInfo[a].uuid || '');
+            })
+            .reduce((accounts, address) => {
+              accounts[address] = Object.assign(accountsInfo[address], { address });
+              return accounts;
+            }, {})
+        });
+      });
+  }
+}
diff --git a/js/src/dapps/basiccoin/Application/index.js b/js/src/dapps/basiccoin/Application/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..236578226a80e822593c37acd1daad1c649950e1
--- /dev/null
+++ b/js/src/dapps/basiccoin/Application/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './application';
diff --git a/js/src/dapps/basiccoin/Application/pages.js b/js/src/dapps/basiccoin/Application/pages.js
new file mode 100644
index 0000000000000000000000000000000000000000..5ab422ee4aaf1425f26a2c4069af101c1acb7eed
--- /dev/null
+++ b/js/src/dapps/basiccoin/Application/pages.js
@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const PAGES = [
+  {
+    path: 'overview',
+    title: 'Overview',
+    byline: 'Display all the current information relating to your own deployed tokens',
+    description: 'View the total number of tokens in circulation, the number of different tokens associated with your accounts as well as the types of tokens created by you. In addition view the balances associated with your accounts in reltion to the total in circulation.'
+  },
+  {
+    path: 'transfer',
+    title: 'Transfer',
+    byline: 'Send tokens associated with your accounts to other addresses',
+    description: 'Send any tokens created byt you or received from others. In addition have a bird\'s eye view of all events relating to token transfers, be it yours, created byt others, either local or globally available on the network.'
+  },
+  {
+    path: 'deploy',
+    title: 'Deploy',
+    byline: 'Deploy a new token to the network',
+    description: 'Token registration has never been this easy. Select the name for your token, the TLA and the number of tokens in circulation. Start sending the tokens to contacts right from this interface. Optionally you can register the token with the Token Registry which would allow you to transaction in tokens from anywhere these transactions are allowed.'
+  }
+];
+
+export default PAGES;
diff --git a/js/src/dapps/basiccoin/Container/container.css b/js/src/dapps/basiccoin/Container/container.css
new file mode 100644
index 0000000000000000000000000000000000000000..7cc00e11e2100f4043429728a74e284da137001c
--- /dev/null
+++ b/js/src/dapps/basiccoin/Container/container.css
@@ -0,0 +1,26 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.content {
+  padding: 4em;
+  margin-bottom: 0.25em;
+  text-align: center;
+}
+
+.content:nth-child(odd) {
+  background: rgba(102, 34, 34, 0.075);
+}
diff --git a/js/src/dapps/basiccoin/Container/container.js b/js/src/dapps/basiccoin/Container/container.js
new file mode 100644
index 0000000000000000000000000000000000000000..82805e71b57f2a5ce7bcedc5b89fd1d8ce5d9ec3
--- /dev/null
+++ b/js/src/dapps/basiccoin/Container/container.js
@@ -0,0 +1,37 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './container.css';
+
+export default class Container extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node.isRequired
+  }
+
+  render () {
+    const { className, children } = this.props;
+    const classes = `${styles.content} ${className}`;
+
+    return (
+      <div className={ classes }>
+        { children }
+      </div>
+    );
+  }
+}
diff --git a/js/src/dapps/basiccoin/Container/index.js b/js/src/dapps/basiccoin/Container/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..87fbc567ef2f3db31a65d206720db12454dfcd7e
--- /dev/null
+++ b/js/src/dapps/basiccoin/Container/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './container';
diff --git a/js/src/dapps/basiccoin/Deploy/Deployment/deployment.css b/js/src/dapps/basiccoin/Deploy/Deployment/deployment.css
new file mode 100644
index 0000000000000000000000000000000000000000..f24729cf78f137745c89c403460898956bbdf44e
--- /dev/null
+++ b/js/src/dapps/basiccoin/Deploy/Deployment/deployment.css
@@ -0,0 +1,19 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+@import '../../_form.css';
+@import '../../_status.css';
diff --git a/js/src/dapps/basiccoin/Deploy/Deployment/deployment.js b/js/src/dapps/basiccoin/Deploy/Deployment/deployment.js
new file mode 100644
index 0000000000000000000000000000000000000000..f9232789b11ce1079caecc46aadeaf8c6fa66c0c
--- /dev/null
+++ b/js/src/dapps/basiccoin/Deploy/Deployment/deployment.js
@@ -0,0 +1,320 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../../parity';
+import AddressSelect from '../../AddressSelect';
+import Container from '../../Container';
+import styles from './deployment.css';
+
+const ERRORS = {
+  name: 'specify a valid name >2 & <32 characters',
+  tla: 'specify a valid TLA, 3 characters in length',
+  usedtla: 'the TLA used is not available for registration',
+  supply: 'supply needs to be valid >999 & <1 trillion'
+};
+
+export default class Deployment extends Component {
+  static contextTypes = {
+    accounts: PropTypes.object.isRequired,
+    router: PropTypes.object.isRequired,
+    managerInstance: PropTypes.object.isRequired,
+    registryInstance: PropTypes.object.isRequired,
+    tokenregInstance: PropTypes.object.isRequired
+  }
+
+  state = {
+    base: null,
+    deployBusy: false,
+    deployDone: false,
+    deployError: null,
+    deployState: null,
+    globalReg: false,
+    globalFee: 0,
+    globalFeeText: '1.000',
+    fromAddress: null,
+    name: '',
+    nameError: ERRORS.name,
+    tla: '',
+    tlaError: ERRORS.tla,
+    totalSupply: '5000000',
+    totalSupplyError: null,
+    signerRequestId: null,
+    txHash: null
+  }
+
+  componentDidMount () {
+    const { managerInstance, tokenregInstance } = this.context;
+
+    Promise
+      .all([
+        managerInstance.base.call(),
+        tokenregInstance.fee.call()
+      ])
+      .then(([base, globalFee]) => {
+        this.setState({
+          base,
+          baseText: base.toFormat(0),
+          globalFee,
+          globalFeeText: api.util.fromWei(globalFee).toFormat(3)
+        });
+      });
+  }
+
+  render () {
+    const { deployBusy } = this.state;
+
+    return deployBusy
+      ? this.renderDeploying()
+      : this.renderForm();
+  }
+
+  renderDeploying () {
+    const { deployDone, deployError, deployState } = this.state;
+
+    if (deployDone) {
+      return (
+        <Container>
+          <div className={ styles.statusHeader }>
+            Your token has been deployed
+          </div>
+        </Container>
+      );
+    }
+
+    if (deployError) {
+      return (
+        <Container>
+          <div className={ styles.statusHeader }>
+            Your deployment has encountered an error
+          </div>
+          <div className={ styles.statusError }>
+            { deployError }
+          </div>
+        </Container>
+      );
+    }
+
+    return (
+      <Container>
+        <div className={ styles.statusHeader }>
+          Your token is currently being deployed to the network
+        </div>
+        <div className={ styles.statusState }>
+          { deployState }
+        </div>
+      </Container>
+    );
+  }
+
+  renderForm () {
+    const { accounts } = this.context;
+    const { baseText, name, nameError, tla, tlaError, totalSupply, totalSupplyError } = this.state;
+    const hasError = !!(nameError || tlaError || totalSupplyError);
+    const error = `${styles.input} ${styles.error}`;
+    const addresses = Object.keys(accounts).filter((address) => accounts[address].uuid);
+
+    // <div className={ styles.input }>
+    //   <label>global registration</label>
+    //   <select onChange={ this.onChangeRegistrar }>
+    //     <option value='no'>No, only for me</option>
+    //     <option value='yes'>Yes, for everybody</option>
+    //   </select>
+    //   <div className={ styles.hint }>
+    //     register on network (fee: { globalFeeText }ETH)
+    //   </div>
+    // </div>
+
+    return (
+      <Container>
+        <div className={ styles.form }>
+          <div className={ styles.input }>
+            <label>deployment account</label>
+            <AddressSelect
+              addresses={ addresses }
+              onChange={ this.onChangeFrom } />
+            <div className={ styles.hint }>
+              the owner account to eploy from
+            </div>
+          </div>
+          <div className={ nameError ? error : styles.input }>
+            <label>token name</label>
+            <input
+              value={ name }
+              name='name'
+              onChange={ this.onChangeName } />
+            <div className={ styles.hint }>
+              { nameError || 'an identifying name for the token' }
+            </div>
+          </div>
+          <div className={ tlaError ? error : styles.input }>
+            <label>token TLA</label>
+            <input
+              className={ styles.small }
+              name='tla'
+              value={ tla }
+              onChange={ this.onChangeTla } />
+            <div className={ styles.hint }>
+              { tlaError || 'unique network acronym for this token' }
+            </div>
+          </div>
+          <div className={ totalSupplyError ? error : styles.input }>
+            <label>token supply</label>
+            <input
+              type='number'
+              min='1000'
+              max='999999999999'
+              name='totalSupply'
+              value={ totalSupply }
+              onChange={ this.onChangeSupply } />
+            <div className={ styles.hint }>
+              { totalSupplyError || `number of tokens (base: ${baseText})` }
+            </div>
+          </div>
+          <div className={ styles.input }>
+            <label />
+            <div className={ styles.buttonRow }>
+              <div
+                className={ styles.button }
+                disabled={ hasError }
+                onClick={ this.onDeploy }>
+                Deploy Token
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    );
+  }
+
+  onChangeFrom = (event) => {
+    const fromAddress = event.target.value;
+
+    this.setState({ fromAddress });
+  }
+
+  onChangeName = (event) => {
+    const name = event.target.value;
+    const nameError = name && (name.length > 2) && (name.length < 32)
+      ? null
+      : ERRORS.name;
+
+    this.setState({ name, nameError });
+  }
+
+  onChangeRegistrar = (event) => {
+    this.setState({ globalReg: event.target.value === 'yes' }, this.testTlaAvailability);
+  }
+
+  onChangeSupply = (event) => {
+    const totalSupply = parseInt(event.target.value, 10);
+    const totalSupplyError = isFinite(totalSupply) && totalSupply > 999
+      ? null
+      : ERRORS.supply;
+
+    this.setState({ totalSupply, totalSupplyError });
+  }
+
+  onChangeTla = (event) => {
+    const _tla = event.target.value;
+    const tla = _tla && (_tla.length > 3)
+      ? _tla.substr(0, 3)
+      : _tla;
+    const tlaError = tla && (tla.length === 3)
+      ? null
+      : ERRORS.tla;
+
+    this.setState({ tla, tlaError }, this.testTlaAvailability);
+  }
+
+  testTlaAvailability = () => {
+    const { registryInstance, tokenregInstance } = this.context;
+    const { globalReg, tla, tlaError } = this.state;
+    const tokenreg = globalReg ? tokenregInstance : registryInstance;
+
+    if (tlaError && tlaError !== ERRORS.usedtla) {
+      return;
+    }
+
+    tokenreg
+      .fromTLA.call({}, [tla])
+      .then(([id, addr, base, name, owner]) => {
+        if (owner !== '0x0000000000000000000000000000000000000000') {
+          this.setState({ tlaError: ERRORS.usedtla });
+        } else if (tlaError === ERRORS.usedtla) {
+          this.setState({ tlaError: null });
+        }
+      })
+      .catch((error) => {
+        console.log('testTlaAvailability', error);
+      });
+  }
+
+  onDeploy = () => {
+    const { managerInstance, registryInstance, tokenregInstance } = this.context;
+    const { base, deployBusy, fromAddress, globalReg, globalFee, name, nameError, tla, tlaError, totalSupply, totalSupplyError } = this.state;
+    const hasError = !!(nameError || tlaError || totalSupplyError);
+
+    if (hasError || deployBusy) {
+      return;
+    }
+
+    const tokenreg = (globalReg ? tokenregInstance : registryInstance).address;
+    const values = [base.mul(totalSupply), tla, name, tokenreg];
+    const options = {
+      from: fromAddress,
+      value: globalReg ? globalFee : 0
+    };
+
+    this.setState({ deployBusy: true, deployState: 'Estimating gas for the transaction' });
+
+    managerInstance
+      .deploy.estimateGas(options, values)
+      .then((gas) => {
+        this.setState({ deployState: 'Gas estimated, Posting transaction to the network' });
+
+        const gasPassed = gas.mul(1.2);
+        options.gas = gasPassed.toFixed(0);
+        console.log(`gas estimated at ${gas.toFormat(0)}, passing ${gasPassed.toFormat(0)}`);
+
+        return managerInstance.deploy.postTransaction(options, values);
+      })
+      .then((signerRequestId) => {
+        this.setState({ signerRequestId, deployState: 'Transaction posted, Waiting for transaction authorization' });
+
+        return api.pollMethod('eth_checkRequest', signerRequestId);
+      })
+      .then((txHash) => {
+        this.setState({ txHash, deployState: 'Transaction authorized, Waiting for network confirmations' });
+
+        return api.pollMethod('eth_getTransactionReceipt', txHash, (receipt) => {
+          if (!receipt || !receipt.blockNumber || receipt.blockNumber.eq(0)) {
+            return false;
+          }
+
+          return true;
+        });
+      })
+      .then((txReceipt) => {
+        this.setState({ txReceipt, deployDone: true, deployState: 'Network confirmed, Received transaction receipt' });
+      })
+      .catch((error) => {
+        console.error('onDeploy', error);
+        this.setState({ deployError: error.message });
+      });
+  }
+}
diff --git a/js/src/dapps/basiccoin/Deploy/Deployment/index.js b/js/src/dapps/basiccoin/Deploy/Deployment/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..927cff5691faf3477f0c4aceabd9018220a7c65d
--- /dev/null
+++ b/js/src/dapps/basiccoin/Deploy/Deployment/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './deployment';
diff --git a/js/src/dapps/basiccoin/Deploy/Event/event.css b/js/src/dapps/basiccoin/Deploy/Event/event.css
new file mode 100644
index 0000000000000000000000000000000000000000..52eada915cb0faeb50c8a45dd13669ab4914ef04
--- /dev/null
+++ b/js/src/dapps/basiccoin/Deploy/Event/event.css
@@ -0,0 +1,58 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+a.link, a.link:visited {
+  text-decoration: none;
+}
+
+a.link:hover {
+  text-decoration: underline;
+}
+
+a.link, a.link:hover, a.link:visited {
+  color: #822;
+  cursor: pointer;
+}
+
+.mined {
+}
+
+.pending {
+  opacity: 0.5;
+}
+
+.mined td,
+.pending td {
+  padding: 0.5em 1em;
+  line-height: 24px;
+}
+
+.blocknumber {
+  text-align: right;
+}
+
+.address {
+  text-align: left;
+}
+
+.description {
+  text-align: left;
+}
+
+.center {
+  text-align: right;
+}
diff --git a/js/src/dapps/basiccoin/Deploy/Event/event.js b/js/src/dapps/basiccoin/Deploy/Event/event.js
new file mode 100644
index 0000000000000000000000000000000000000000..889822208dce385df6c08e62b3cd98ce2b487e8e
--- /dev/null
+++ b/js/src/dapps/basiccoin/Deploy/Event/event.js
@@ -0,0 +1,103 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import moment from 'moment';
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../../parity';
+import { getCoin, txLink } from '../../services';
+import IdentityIcon from '../../IdentityIcon';
+
+import styles from './event.css';
+
+export default class Event extends Component {
+  static contextTypes = {
+    accounts: PropTypes.object.isRequired,
+    registryInstance: PropTypes.object.isRequired,
+    tokenregInstance: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    event: PropTypes.object.isRequired
+  }
+
+  state = {
+    block: null,
+    coin: {}
+  }
+
+  componentDidMount () {
+    this.lookup();
+  }
+
+  render () {
+    const { event } = this.props;
+    const { block, coin } = this.state;
+    const isPending = event.type === 'pending';
+
+    return (
+      <tr className={ isPending ? styles.pending : styles.mined }>
+        <td className={ styles.blocknumber }>
+          <div>{ (isPending || !block) ? '' : moment(block.timestamp).fromNow() }</div>
+          <div>{ isPending ? 'Pending' : event.blockNumber.toFormat() }</div>
+        </td>
+        <td>{ event.event }</td>
+        <td className={ styles.description }>
+          <div>{ isPending ? '' : coin.tla }</div>
+          <div>{ isPending ? '' : coin.name }</div>
+        </td>
+        <td className={ styles.address }>
+          { this.renderAddress(event.params.owner) }
+          <div><a href={ txLink(event.transactionHash) } target='_blank' className={ styles.link }>{ this.renderHash(event.transactionHash) }</a></div>
+        </td>
+        <td>{ isPending || !coin.isGlobal ? '' : 'global' }</td>
+      </tr>
+    );
+  }
+
+  renderAddress (address) {
+    const { accounts } = this.context;
+    const account = accounts[address];
+
+    return (
+      <div>
+        <IdentityIcon address={ address } />
+        <span>{ account ? account.name : address }</span>
+      </div>
+    );
+  }
+
+  renderHash (hash) {
+    return `${hash.substr(0, 10)}...${hash.slice(-10)}`;
+  }
+
+  lookup () {
+    const { event } = this.props;
+
+    if (event.type === 'pending') {
+      return;
+    }
+
+    Promise
+      .all([
+        api.eth.getBlockByNumber(event.blockNumber),
+        getCoin(event.params.tokenreg, event.params.coin)
+      ])
+      .then(([block, coin]) => {
+        this.setState({ block, coin });
+      });
+  }
+}
diff --git a/js/src/dapps/basiccoin/Deploy/Event/index.js b/js/src/dapps/basiccoin/Deploy/Event/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0925882d3e3ed35d3e6e0decfd8ab3e18d451052
--- /dev/null
+++ b/js/src/dapps/basiccoin/Deploy/Event/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './event';
diff --git a/js/src/dapps/basiccoin/Deploy/Events/events.css b/js/src/dapps/basiccoin/Deploy/Events/events.css
new file mode 100644
index 0000000000000000000000000000000000000000..3cefaacb0b7efdea5738b394da90023ab9b06fb4
--- /dev/null
+++ b/js/src/dapps/basiccoin/Deploy/Events/events.css
@@ -0,0 +1,33 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.statusHeader {
+  font-size: 1.25em;
+}
+
+.eventList {
+  border: none;
+  margin: 0 auto;
+  border-collapse: collapse;
+}
+
+.eventList tr:nth-child(even) {
+  background: rgba(102, 34, 34, 0.075);
+}
+
+.eventList tr:nth-child(odd) {
+}
diff --git a/js/src/dapps/basiccoin/Deploy/Events/events.js b/js/src/dapps/basiccoin/Deploy/Events/events.js
new file mode 100644
index 0000000000000000000000000000000000000000..a21672a8efcf117004d435f37862c33238f76155
--- /dev/null
+++ b/js/src/dapps/basiccoin/Deploy/Events/events.js
@@ -0,0 +1,141 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../../parity';
+import Container from '../../Container';
+import Event from '../Event';
+
+import styles from './events.css';
+
+export default class Events extends Component {
+  static contextTypes = {
+    managerInstance: PropTypes.object.isRequired
+  }
+
+  state = {
+    blocks: {},
+    loading: true,
+    events: [],
+    minedEvents: [],
+    pendingEvents: []
+  }
+
+  componentDidMount () {
+    const { managerInstance } = this.context;
+    const options = {
+      fromBlock: 0,
+      toBlock: 'pending',
+      limit: 50
+    };
+
+    managerInstance.Created
+      .subscribe(options, this.receiveCreatedEvents)
+      .then((subscriptionIdCreated) => {
+        this.setState({ subscriptionIdCreated });
+      });
+  }
+
+  componentWillUnmount () {
+    const { managerInstance } = this.context;
+    const { subscriptionIdCreated } = this.state;
+
+    managerInstance.Created.unsubscribe(subscriptionIdCreated);
+  }
+
+  render () {
+    const { loading } = this.state;
+
+    return (
+      <Container>
+        { loading ? this.renderLoading() : this.renderEvents() }
+      </Container>
+    );
+  }
+
+  renderEvents () {
+    const { events } = this.state;
+
+    return events.length
+      ? this.renderEventsList()
+      : this.renderEventsNone();
+  }
+
+  renderEventsNone () {
+    return (
+      <div className={ styles.statusHeader }>
+        There are currently no events available
+      </div>
+    );
+  }
+
+  renderEventsList () {
+    const { events } = this.state;
+    const rows = events.map((event) => {
+      return (
+        <Event key={ event.key } event={ event } />
+      );
+    });
+
+    return (
+      <table className={ styles.eventList }>
+        <tbody>
+          { rows }
+        </tbody>
+      </table>
+    );
+  }
+
+  renderLoading () {
+    return (
+      <div className={ styles.statusHeader }>
+        Loading events
+      </div>
+    );
+  }
+
+  logToEvent = (log) => {
+    log.key = api.util.sha3(JSON.stringify(log));
+
+    return log;
+  }
+
+  receiveCreatedEvents = (error, logs) => {
+    if (error) {
+      console.error('receiveLogs', error);
+      return;
+    }
+
+    const { minedEvents, pendingEvents } = this.state;
+    const minedNew = logs
+      .filter((log) => log.type === 'mined')
+      .map(this.logToEvent)
+      .filter((log) => !minedEvents.find((event) => event.transactionHash === log.transactionHash))
+      .reverse()
+      .concat(minedEvents);
+    const pendingNew = logs
+      .filter((log) => log.type === 'pending')
+      .map(this.logToEvent)
+      .filter((log) => !pendingEvents.find((event) => event.transactionHash === log.transactionHash))
+      .reverse()
+      .concat(pendingEvents)
+      .filter((log) => !minedNew.find((event) => event.transactionHash === log.transactionHash));
+    const events = [].concat(pendingNew).concat(minedNew);
+
+    this.setState({ loading: false, events, minedEvents: minedNew, pendingEvents: pendingNew });
+  }
+}
diff --git a/js/src/dapps/basiccoin/Deploy/Events/index.js b/js/src/dapps/basiccoin/Deploy/Events/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..88ad6d407c91e416ead5fef1cf8c93201cac529b
--- /dev/null
+++ b/js/src/dapps/basiccoin/Deploy/Events/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './events';
diff --git a/js/src/dapps/basiccoin/Deploy/deploy.js b/js/src/dapps/basiccoin/Deploy/deploy.js
new file mode 100644
index 0000000000000000000000000000000000000000..34c7eed8a32bfe6a998d042365aad629b9daac45
--- /dev/null
+++ b/js/src/dapps/basiccoin/Deploy/deploy.js
@@ -0,0 +1,31 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import Deployment from './Deployment';
+import Events from './Events';
+
+export default class Deploy extends Component {
+  render () {
+    return (
+      <div>
+        <Deployment />
+        <Events />
+      </div>
+    );
+  }
+}
diff --git a/js/src/dapps/basiccoin/Deploy/index.js b/js/src/dapps/basiccoin/Deploy/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..53b4dbcfe5502b3abff063551aeab808e1591b3a
--- /dev/null
+++ b/js/src/dapps/basiccoin/Deploy/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './deploy';
diff --git a/js/src/dapps/basiccoin/IdentityIcon/identityIcon.css b/js/src/dapps/basiccoin/IdentityIcon/identityIcon.css
new file mode 100644
index 0000000000000000000000000000000000000000..6abbcf808b7519bf1886a7b345f8f069ce87d4d6
--- /dev/null
+++ b/js/src/dapps/basiccoin/IdentityIcon/identityIcon.css
@@ -0,0 +1,22 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.icon {
+  width: 24px;
+  height: 24px;
+  margin: 0 0.5em -4px 0;
+}
diff --git a/js/src/dapps/basiccoin/IdentityIcon/identityIcon.js b/js/src/dapps/basiccoin/IdentityIcon/identityIcon.js
new file mode 100644
index 0000000000000000000000000000000000000000..ee1374f7ec9ccea166612662ec012f826473684b
--- /dev/null
+++ b/js/src/dapps/basiccoin/IdentityIcon/identityIcon.js
@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../parity';
+import styles from './identityIcon.css';
+
+export default class IdentityIcon extends Component {
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    className: PropTypes.string
+  }
+
+  render () {
+    const { address, className } = this.props;
+    const classes = `${styles.icon} ${className}`;
+
+    return (
+      <img
+        className={ classes }
+        src={ api.util.createIdentityImg(address, 3) } />
+    );
+  }
+}
diff --git a/js/src/dapps/basiccoin/IdentityIcon/index.js b/js/src/dapps/basiccoin/IdentityIcon/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..76c107bfb7540f707a9b2665aac9b52f9d7590fa
--- /dev/null
+++ b/js/src/dapps/basiccoin/IdentityIcon/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './identityIcon';
diff --git a/js/src/dapps/basiccoin/Overview/Owner/index.js b/js/src/dapps/basiccoin/Overview/Owner/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4f38b38b9cce3c5fbb9318288f15177881490015
--- /dev/null
+++ b/js/src/dapps/basiccoin/Overview/Owner/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './owner';
diff --git a/js/src/dapps/basiccoin/Overview/Owner/owner.css b/js/src/dapps/basiccoin/Overview/Owner/owner.css
new file mode 100644
index 0000000000000000000000000000000000000000..13e89d06123deeb3e97f4e8fa17e5a5cced2ca75
--- /dev/null
+++ b/js/src/dapps/basiccoin/Overview/Owner/owner.css
@@ -0,0 +1,48 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.info {
+}
+
+.owner {
+  vertical-align: top;
+  text-align: right;
+}
+
+.owner>div {
+  border-radius: 1px;
+  padding: 1em 2em;
+  white-space: nowrap;
+}
+
+.tokens {
+  text-align: left;
+}
+
+.tokens>div {
+  border-radius: 1px;
+  background: #988;
+  padding: 1em;
+  margin: 0 0 0.25em 0.25em;
+  display: inline-block;
+  white-space: nowrap;
+  color: white;
+}
+
+.icon {
+  margin: 0 0 -4px 1em;
+}
diff --git a/js/src/dapps/basiccoin/Overview/Owner/owner.js b/js/src/dapps/basiccoin/Overview/Owner/owner.js
new file mode 100644
index 0000000000000000000000000000000000000000..cc30036937c2f4718e9c20da6a1d4f5e272f233a
--- /dev/null
+++ b/js/src/dapps/basiccoin/Overview/Owner/owner.js
@@ -0,0 +1,74 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import IdentityIcon from '../../IdentityIcon';
+import Token from '../Token';
+import styles from './owner.css';
+
+export default class Owner extends Component {
+  static contextTypes = {
+    accounts: PropTypes.object.isRequired,
+    managerInstance: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    tokens: PropTypes.array.isRequired
+  }
+
+  state = {
+    tokens: []
+  }
+
+  render () {
+    const { accounts } = this.context;
+    const { address, tokens } = this.props;
+
+    if (!tokens.length) {
+      return null;
+    }
+
+    return (
+      <tr className={ styles.info }>
+        <td className={ styles.owner }>
+          <div>
+            <span>{ accounts[address].name }</span>
+            <IdentityIcon
+              className={ styles.icon }
+              address={ address } />
+          </div>
+        </td>
+        <td className={ styles.tokens }>
+          { this.renderTokens() }
+        </td>
+      </tr>
+    );
+  }
+
+  renderTokens () {
+    const { tokens } = this.props;
+
+    return tokens.map((token) => (
+      <div key={ token.address }>
+        <Token
+          address={ token.address }
+          tokenreg={ token.tokenreg } />
+      </div>
+    ));
+  }
+}
diff --git a/js/src/dapps/basiccoin/Overview/Token/index.js b/js/src/dapps/basiccoin/Overview/Token/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4b822b4bdf7c1d731ef6e68055be06e6cc85d0ec
--- /dev/null
+++ b/js/src/dapps/basiccoin/Overview/Token/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './token';
diff --git a/js/src/dapps/basiccoin/Overview/Token/token.css b/js/src/dapps/basiccoin/Overview/Token/token.css
new file mode 100644
index 0000000000000000000000000000000000000000..5324aa7c5a13bec460a86be3e19aa2bfc5e4e584
--- /dev/null
+++ b/js/src/dapps/basiccoin/Overview/Token/token.css
@@ -0,0 +1,53 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.info {
+}
+
+.info>div {
+  display: inline-block;
+  padding: 0.25em 0.5em;
+  vertical-align: middle;
+}
+
+.address {
+}
+
+.tla {
+  background: #766;
+  border-radius: 1px;
+}
+
+.name {
+}
+
+.supply {
+}
+
+.supply div {
+  display: block;
+  text-align: center;
+}
+
+.supply .info {
+  font-size: 0.75em;
+  opacity: 0.75;
+}
+
+.global {
+  font-size: 0.75em;
+}
diff --git a/js/src/dapps/basiccoin/Overview/Token/token.js b/js/src/dapps/basiccoin/Overview/Token/token.js
new file mode 100644
index 0000000000000000000000000000000000000000..b0d4a965a677e09d0d99b73f4a59d2c2650a2fce
--- /dev/null
+++ b/js/src/dapps/basiccoin/Overview/Token/token.js
@@ -0,0 +1,68 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { totalSupply, getCoin } from '../../services';
+import styles from './token.css';
+
+export default class Token extends Component {
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    tokenreg: PropTypes.string.isRequired
+  }
+
+  state = {
+    coin: null,
+    totalSupply: null
+  }
+
+  componentDidMount () {
+    this.lookupToken();
+  }
+
+  render () {
+    const { coin, totalSupply } = this.state;
+
+    if (!coin) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.info }>
+        <div className={ styles.tla }>{ coin.tla }</div>
+        <div className={ styles.name }>{ coin.name }</div>
+        <div className={ styles.supply }>
+          <div>{ totalSupply.div(1000000).toFormat(0) }</div>
+          <div className={ styles.info }>total supply</div>
+        </div>
+      </div>
+    );
+  }
+
+  lookupToken () {
+    const { address, tokenreg } = this.props;
+
+    Promise
+      .all([
+        getCoin(tokenreg, address),
+        totalSupply(address)
+      ])
+      .then(([coin, totalSupply]) => {
+        this.setState({ coin, totalSupply });
+      });
+  }
+}
diff --git a/js/src/dapps/basiccoin/Overview/index.js b/js/src/dapps/basiccoin/Overview/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d61fb3fb440eef130a4db9ad4f464cf94c533c27
--- /dev/null
+++ b/js/src/dapps/basiccoin/Overview/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './overview';
diff --git a/js/src/dapps/basiccoin/Overview/overview.css b/js/src/dapps/basiccoin/Overview/overview.css
new file mode 100644
index 0000000000000000000000000000000000000000..9757a81458c022e0b4f3f12c0e958be523b5ed38
--- /dev/null
+++ b/js/src/dapps/basiccoin/Overview/overview.css
@@ -0,0 +1,26 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+@import '../_status.css';
+
+.body {
+}
+
+.ownerTable {
+  margin: 0 auto;
+  border-collapse: collapse;
+}
diff --git a/js/src/dapps/basiccoin/Overview/overview.js b/js/src/dapps/basiccoin/Overview/overview.js
new file mode 100644
index 0000000000000000000000000000000000000000..46831d782ff6b2b3af60b2366816c9e3dcbbf1ea
--- /dev/null
+++ b/js/src/dapps/basiccoin/Overview/overview.js
@@ -0,0 +1,107 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+
+import { loadOwnedTokens } from '../services';
+import Container from '../Container';
+import Owner from './Owner';
+
+import styles from './overview.css';
+
+export default class Overview extends Component {
+  static contextTypes = {
+    accounts: PropTypes.object.isRequired,
+    managerInstance: PropTypes.object.isRequired
+  }
+
+  state = {
+    loading: true,
+    total: new BigNumber(0),
+    tokenOwners: []
+  }
+
+  componentDidMount () {
+    this.loadOwners();
+  }
+
+  render () {
+    const { loading } = this.state;
+
+    return (
+      <Container>
+        { loading ? this.renderLoading() : this.renderBody() }
+      </Container>
+    );
+  }
+
+  renderLoading () {
+    return (
+      <div className={ styles.statusHeader }>
+        Loading tokens
+      </div>
+    );
+  }
+
+  renderBody () {
+    const { total } = this.state;
+    let owners = null;
+
+    if (total.gt(0)) {
+      owners = (
+        <table className={ styles.ownerTable }>
+          <tbody>
+            { this.renderOwners() }
+          </tbody>
+        </table>
+      );
+    }
+
+    return (
+      <div className={ styles.body }>
+        <div className={ styles.statusHeader }>
+          You have { total.toFormat(0) } tokens created by your accounts
+        </div>
+        { owners }
+      </div>
+    );
+  }
+
+  renderOwners () {
+    const { tokens } = this.state;
+
+    return Object.keys(tokens).map((address) => (
+      <Owner
+        key={ address }
+        tokens={ tokens[address] }
+        address={ address } />
+    ));
+  }
+
+  loadOwners () {
+    const { accounts } = this.context;
+    const addresses = Object
+      .values(accounts)
+      .filter((account) => account.uuid)
+      .map((account) => account.address);
+
+    loadOwnedTokens(addresses)
+      .then(({ tokens, total }) => {
+        this.setState({ tokens, total, loading: false });
+      });
+  }
+}
diff --git a/js/src/dapps/basiccoin/Transfer/Event/event.js b/js/src/dapps/basiccoin/Transfer/Event/event.js
new file mode 100644
index 0000000000000000000000000000000000000000..190035b1d43579b0d286eff145cd140520a69dbb
--- /dev/null
+++ b/js/src/dapps/basiccoin/Transfer/Event/event.js
@@ -0,0 +1,106 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+// TODO: This is a copy & paste for Deploy/Event -> render() different. Not very DRY
+import moment from 'moment';
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../../parity';
+import { txLink } from '../../services';
+import IdentityIcon from '../../IdentityIcon';
+import styles from '../../Deploy/Event/event.css';
+
+export default class Event extends Component {
+  static contextTypes = {
+    accounts: PropTypes.object.isRequired,
+    registryInstance: PropTypes.object.isRequired,
+    tokenregInstance: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    event: PropTypes.object.isRequired,
+    token: PropTypes.object.isRequired
+  }
+
+  state = {
+    block: null
+  }
+
+  componentDidMount () {
+    this.lookup();
+  }
+
+  render () {
+    const { event, token } = this.props;
+    const { block } = this.state;
+    const isPending = event.type === 'pending';
+
+    return (
+      <tr className={ isPending ? styles.pending : styles.mined }>
+        <td className={ styles.blocknumber }>
+          <div>{ (isPending || !block) ? '' : moment(block.timestamp).fromNow() }</div>
+          <div>{ isPending ? 'Pending' : event.blockNumber.toFormat() }</div>
+        </td>
+        <td>{ event.event }</td>
+        <td className={ styles.description }>
+          <div>{ isPending ? '' : token.coin.tla }</div>
+          <div>{ isPending ? '' : token.coin.name }</div>
+        </td>
+        <td className={ styles.address }>
+          { this.renderAddress(event.params.from) }
+        </td>
+        <td className={ styles.value }>
+          <div>{ event.params.value.div(1000000).toFormat(6) }</div>
+          <div>⇒</div>
+          <div><a href={ txLink(event.transactionHash) } target='_blank' className={ styles.link }>{ this.renderHash(event.transactionHash) }</a></div>
+        </td>
+        <td className={ styles.address }>
+          { this.renderAddress(event.params.to) }
+        </td>
+      </tr>
+    );
+  }
+
+  renderAddress (address) {
+    const { accounts } = this.context;
+    const account = accounts[address];
+
+    return (
+      <div>
+        <IdentityIcon address={ address } />
+        <span>{ account ? account.name : address }</span>
+      </div>
+    );
+  }
+
+  renderHash (hash) {
+    return `${hash.substr(0, 10)}...${hash.slice(-10)}`;
+  }
+
+  lookup () {
+    const { event } = this.props;
+
+    if (event.type === 'pending') {
+      return;
+    }
+
+    api.eth
+      .getBlockByNumber(event.blockNumber)
+      .then((block) => {
+        this.setState({ block });
+      });
+  }
+}
diff --git a/js/src/dapps/basiccoin/Transfer/Event/index.js b/js/src/dapps/basiccoin/Transfer/Event/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0925882d3e3ed35d3e6e0decfd8ab3e18d451052
--- /dev/null
+++ b/js/src/dapps/basiccoin/Transfer/Event/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './event';
diff --git a/js/src/dapps/basiccoin/Transfer/Events/events.js b/js/src/dapps/basiccoin/Transfer/Events/events.js
new file mode 100644
index 0000000000000000000000000000000000000000..dcead03bb786b3e37fc44a2812cb07e5d1ffb63c
--- /dev/null
+++ b/js/src/dapps/basiccoin/Transfer/Events/events.js
@@ -0,0 +1,145 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import { api } from '../../parity';
+import { loadAllTokens, subscribeEvents, unsubscribeEvents } from '../../services';
+import Container from '../../Container';
+import Event from '../Event';
+
+import styles from '../../Deploy/Events/events.css';
+
+export default class Events extends Component {
+  state = {
+    subscriptionId: 0,
+    loading: true,
+    events: [],
+    pendingEvents: [],
+    minedEvents: [],
+    tokens: []
+  }
+
+  componentDidMount () {
+    loadAllTokens()
+      .then((tokens) => {
+        const addresses = tokens.map((token) => token.address);
+        this.setState({ tokens });
+        return subscribeEvents(addresses, this.eventCallback);
+      })
+      .then((subscriptionId) => {
+        this.setState({ subscriptionId, loading: false });
+      })
+      .catch((error) => {
+        console.error('componentDidMount', error);
+      });
+  }
+
+  componentWillUnmount () {
+    const { subscriptionId } = this.state;
+
+    if (subscriptionId) {
+      unsubscribeEvents(subscriptionId);
+    }
+  }
+
+  render () {
+    const { loading } = this.state;
+
+    return (
+      <Container>
+        { loading ? this.renderLoading() : this.renderEvents() }
+      </Container>
+    );
+  }
+
+  renderLoading () {
+    return (
+      <div className={ styles.statusHeader }>
+        Attaching events
+      </div>
+    );
+  }
+
+  renderEvents () {
+    const { events } = this.state;
+
+    return events.length
+      ? this.renderEventsList()
+      : this.renderEventsNone();
+  }
+
+  renderEventsNone () {
+    return (
+      <div className={ styles.statusHeader }>
+        There are currently no events available
+      </div>
+    );
+  }
+
+  renderEventsList () {
+    const { events, tokens } = this.state;
+    const rows = events.map((event) => {
+      const token = tokens.find((token) => token.address === event.address);
+
+      return (
+        <Event
+          key={ event.key }
+          token={ token }
+          event={ event } />
+      );
+    });
+
+    return (
+      <table className={ styles.eventList }>
+        <tbody>
+          { rows }
+        </tbody>
+      </table>
+    );
+  }
+
+  logToEvent = (log) => {
+    log.key = api.util.sha3(JSON.stringify(log));
+
+    return log;
+  }
+
+  eventCallback = (error, logs) => {
+    if (error) {
+      console.error('eventCallback', error);
+      return;
+    }
+
+    const { minedEvents, pendingEvents } = this.state;
+    const minedNew = logs
+      .filter((log) => log.type === 'mined')
+      .map(this.logToEvent)
+      .filter((log) => !minedEvents.find((event) => event.transactionHash === log.transactionHash))
+      .reverse()
+      .concat(minedEvents);
+    const pendingNew = logs
+      .filter((log) => log.type === 'pending')
+      .map(this.logToEvent)
+      .filter((log) => !pendingEvents.find((event) => event.transactionHash === log.transactionHash))
+      .reverse()
+      .concat(pendingEvents)
+      .filter((log) => !minedNew.find((event) => event.transactionHash === log.transactionHash));
+    const events = [].concat(pendingNew).concat(minedNew);
+    console.log('*** events', events.map((event) => event.address));
+    this.setState({ loading: false, events, minedEvents: minedNew, pendingEvents: pendingNew });
+  }
+}
diff --git a/js/src/dapps/basiccoin/Transfer/Events/index.js b/js/src/dapps/basiccoin/Transfer/Events/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..88ad6d407c91e416ead5fef1cf8c93201cac529b
--- /dev/null
+++ b/js/src/dapps/basiccoin/Transfer/Events/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './events';
diff --git a/js/src/dapps/basiccoin/Transfer/Send/index.js b/js/src/dapps/basiccoin/Transfer/Send/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ad3107789e7043f9f7acbdfa3d3070c897f09cf8
--- /dev/null
+++ b/js/src/dapps/basiccoin/Transfer/Send/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './send';
diff --git a/js/src/dapps/basiccoin/Transfer/Send/send.css b/js/src/dapps/basiccoin/Transfer/Send/send.css
new file mode 100644
index 0000000000000000000000000000000000000000..f24729cf78f137745c89c403460898956bbdf44e
--- /dev/null
+++ b/js/src/dapps/basiccoin/Transfer/Send/send.css
@@ -0,0 +1,19 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+@import '../../_form.css';
+@import '../../_status.css';
diff --git a/js/src/dapps/basiccoin/Transfer/Send/send.js b/js/src/dapps/basiccoin/Transfer/Send/send.js
new file mode 100644
index 0000000000000000000000000000000000000000..aee860fe25be69859511e4745367f945a6342865
--- /dev/null
+++ b/js/src/dapps/basiccoin/Transfer/Send/send.js
@@ -0,0 +1,327 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+
+import { eip20 } from '../../../../contracts/abi';
+
+import { api } from '../../parity';
+import { loadBalances } from '../../services';
+import AddressSelect from '../../AddressSelect';
+import Container from '../../Container';
+
+import styles from './send.css';
+
+export default class Send extends Component {
+  static contextTypes = {
+    accounts: PropTypes.object.isRequired
+  }
+
+  state = {
+    loading: true,
+    tokens: null,
+    selectedToken: null,
+    availableBalances: [],
+    fromAddress: null,
+    fromBalance: null,
+    toAddress: null,
+    toKnown: true,
+    amount: 0,
+    amountError: null,
+    sendBusy: false,
+    sendError: null,
+    sendState: null,
+    sendDone: false,
+    signerRequestId: null,
+    txHash: null,
+    txReceipt: null
+  }
+
+  componentDidMount () {
+    this.loadBalances();
+    this.onAmountChange({ target: { value: '0' } });
+  }
+
+  render () {
+    const { loading } = this.state;
+
+    return loading
+      ? this.renderLoading()
+      : this.renderBody();
+  }
+
+  renderBody () {
+    const { sendBusy } = this.state;
+
+    return sendBusy
+      ? this.renderSending()
+      : this.renderForm();
+  }
+
+  renderSending () {
+    const { sendDone, sendError, sendState } = this.state;
+
+    if (sendDone) {
+      return (
+        <Container>
+          <div className={ styles.statusHeader }>
+            Your token value transfer has been completed
+          </div>
+        </Container>
+      );
+    }
+
+    if (sendError) {
+      return (
+        <Container>
+          <div className={ styles.statusHeader }>
+            Your deployment has encountered an error
+          </div>
+          <div className={ styles.statusError }>
+            { sendError }
+          </div>
+        </Container>
+      );
+    }
+
+    return (
+      <Container>
+        <div className={ styles.statusHeader }>
+          Your token value is being transferred
+        </div>
+        <div className={ styles.statusState }>
+          { sendState }
+        </div>
+      </Container>
+    );
+  }
+
+  renderLoading () {
+    return (
+      <Container>
+        <div className={ styles.statusHeader }>
+          Loading available tokens
+        </div>
+      </Container>
+    );
+  }
+
+  renderForm () {
+    const { accounts } = this.context;
+    const { availableBalances, fromAddress, amount, amountError, toKnown, toAddress } = this.state;
+    const fromBalance = availableBalances.find((balance) => balance.address === fromAddress);
+    const fromAddresses = availableBalances.map((balance) => balance.address);
+    const toAddresses = Object.keys(accounts);
+    const toInput = toKnown
+      ? <AddressSelect addresses={ toAddresses } onChange={ this.onChangeTo } />
+      : <input value={ toAddress } onChange={ this.onChangeTo } />;
+    const hasError = amountError;
+    const error = `${styles.input} ${styles.error}`;
+    const maxAmountHint = `Value to transfer (max: ${fromBalance ? fromBalance.balance.div(1000000).toFormat(6) : '1'})`;
+
+    return (
+      <Container>
+        <div className={ styles.form }>
+          <div className={ styles.input }>
+            <label>token type</label>
+            <select onChange={ this.onSelectToken }>
+              { this.renderTokens() }
+            </select>
+            <div className={ styles.hint }>
+              type of token to transfer
+            </div>
+          </div>
+          <div className={ styles.input }>
+            <label>transfer from</label>
+            <AddressSelect
+              addresses={ fromAddresses }
+              onChange={ this.onSelectFrom } />
+            <div className={ styles.hint }>
+              account to transfer from
+            </div>
+          </div>
+          <div className={ styles.input }>
+            <label>transfer to</label>
+            <select onChange={ this.onChangeToType }>
+              <option value='known'>Known, Select from list</option>
+              <option value='unknown'>Unknown, Keyboard input</option>
+            </select>
+            <div className={ styles.hint }>
+              the type of address input
+            </div>
+          </div>
+          <div className={ styles.input }>
+            <label />
+            { toInput }
+            <div className={ styles.hint }>
+              account to transfer to
+            </div>
+          </div>
+          <div className={ amountError ? error : styles.input }>
+            <label>amount</label>
+            <input
+              type='number'
+              min='0'
+              step='0.1'
+              value={ amount }
+              max={ fromBalance ? fromBalance.balance.div(1000000).toFixed(6) : 1 }
+              onChange={ this.onAmountChange } />
+            <div className={ styles.hint }>
+              { amountError || maxAmountHint }
+            </div>
+          </div>
+          <div className={ styles.input }>
+            <label />
+            <div className={ styles.buttonRow }>
+              <div
+                className={ styles.button }
+                disabled={ hasError }
+                onClick={ this.onSend }>
+                Transfer Tokens
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    );
+  }
+
+  renderTokens () {
+    const { tokens } = this.state;
+
+    return tokens.map((token) => (
+      <option
+        key={ token.address }
+        value={ token.address }>
+        { token.coin.tla } / { token.coin.name }
+      </option>
+    ));
+  }
+
+  onSelectFrom = (event) => {
+    const fromAddress = event.target.value;
+
+    this.setState({ fromAddress });
+  }
+
+  onChangeTo = (event) => {
+    const toAddress = event.target.value;
+
+    this.setState({ toAddress });
+  }
+
+  onChangeToType = (event) => {
+    const toKnown = event.target.value === 'known';
+
+    this.setState({ toKnown });
+  }
+
+  onSelectToken = (event) => {
+    const { tokens } = this.state;
+    const address = event.target.value;
+    const selectedToken = tokens.find((_token) => _token.address === address);
+    const availableBalances = selectedToken.balances.filter((balance) => balance.balance.gt(0));
+
+    this.setState({ selectedToken, availableBalances });
+    this.onSelectFrom({ target: { value: availableBalances[0].address } });
+  }
+
+  onAmountChange = (event) => {
+    const amount = parseFloat(event.target.value);
+    const amountError = !isFinite(amount) || amount <= 0
+      ? 'amount needs to be > 0'
+      : null;
+
+    this.setState({ amount, amountError });
+  }
+
+  onSend = () => {
+    const { amount, fromAddress, toAddress, amountError, selectedToken, sendBusy } = this.state;
+    const hasError = amountError;
+
+    if (hasError || sendBusy) {
+      return;
+    }
+
+    const values = [toAddress, new BigNumber(amount).mul(1000000).toFixed(0)];
+    const options = {
+      from: fromAddress
+    };
+    const instance = api.newContract(eip20, selectedToken.address).instance;
+
+    this.setState({ sendBusy: true, sendState: 'Estimating gas for the transaction' });
+
+    instance
+      .transfer.estimateGas(options, values)
+      .then((gas) => {
+        this.setState({ sendState: 'Gas estimated, Posting transaction to the network' });
+
+        const gasPassed = gas.mul(1.2);
+        options.gas = gasPassed.toFixed(0);
+        console.log(`gas estimated at ${gas.toFormat(0)}, passing ${gasPassed.toFormat(0)}`);
+
+        return instance.transfer.postTransaction(options, values);
+      })
+      .then((signerRequestId) => {
+        this.setState({ signerRequestId, sendState: 'Transaction posted, Waiting for transaction authorization' });
+
+        return api.pollMethod('eth_checkRequest', signerRequestId);
+      })
+      .then((txHash) => {
+        this.setState({ txHash, sendState: 'Transaction authorized, Waiting for network confirmations' });
+
+        return api.pollMethod('eth_getTransactionReceipt', txHash, (receipt) => {
+          if (!receipt || !receipt.blockNumber || receipt.blockNumber.eq(0)) {
+            return false;
+          }
+
+          return true;
+        });
+      })
+      .then((txReceipt) => {
+        this.setState({ txReceipt, sendDone: true, sendState: 'Network confirmed, Received transaction receipt' });
+      })
+      .catch((error) => {
+        console.error('onSend', error);
+        this.setState({ sendError: error.message });
+      });
+  }
+
+  loadBalances () {
+    const { accounts } = this.context;
+    const myAccounts = Object
+      .values(accounts)
+      .filter((account) => account.uuid)
+      .map((account) => account.address);
+
+    loadBalances(myAccounts)
+      .then((_tokens) => {
+        const tokens = _tokens.filter((token) => {
+          for (let index = 0; index < token.balances.length; index++) {
+            if (token.balances[index].balance.gt(0)) {
+              return true;
+            }
+          }
+
+          return false;
+        });
+
+        this.setState({ tokens, loading: false });
+        this.onSelectToken({ target: { value: tokens[0].address } });
+      });
+  }
+}
diff --git a/js/src/dapps/basiccoin/Transfer/index.js b/js/src/dapps/basiccoin/Transfer/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..24d36d79637acc5ad834c1240dcde31298a766d1
--- /dev/null
+++ b/js/src/dapps/basiccoin/Transfer/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './transfer';
diff --git a/js/src/dapps/basiccoin/Transfer/transfer.js b/js/src/dapps/basiccoin/Transfer/transfer.js
new file mode 100644
index 0000000000000000000000000000000000000000..842d4b7bcfbe5542608bbac43543e070da01b8e0
--- /dev/null
+++ b/js/src/dapps/basiccoin/Transfer/transfer.js
@@ -0,0 +1,31 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import Events from './Events';
+import Send from './Send';
+
+export default class Transfer extends Component {
+  render () {
+    return (
+      <div>
+        <Send />
+        <Events />
+      </div>
+    );
+  }
+}
diff --git a/js/src/dapps/basiccoin/_form.css b/js/src/dapps/basiccoin/_form.css
new file mode 100644
index 0000000000000000000000000000000000000000..ffafdbeafaea90ebd98fdba8bec718d73c92de02
--- /dev/null
+++ b/js/src/dapps/basiccoin/_form.css
@@ -0,0 +1,105 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.button {
+  background: #622;
+}
+
+.form {
+  text-align: left;
+  margin: 0 auto;
+  display: inline-block;
+}
+
+.form .input {
+  margin-bottom: 1.5em;
+}
+
+.form .input * {
+  display: inline-block;
+  margin: 0 0.5em;
+  padding: 0.5em;
+  font-size: 1em;
+}
+
+.form label {
+  width: 25em;
+  opacity: 0.8;
+  text-align: right;
+}
+
+.form .hint {
+  width: 25em;
+  opacity: 0.5;
+}
+
+.form input,
+.form select {
+  width: 18em;
+  color: #444;
+  background: rgba(255, 255, 255, 0.75);
+  border-radius: 1px;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  box-sizing: border-box;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.form select {
+  height: 36px;
+}
+
+.form input.small {
+  width: 9em;
+  margin-right: 9.5em;
+}
+
+.form .error input {
+  border: 1px solid rgba(255, 0, 0, 0.5);
+  color: red;
+  background: rgba(255, 0, 0, 0.1);
+}
+
+.form .error label {
+  color: red;
+}
+
+.form .error .hint {
+  color: red;
+}
+
+.buttonRow {
+  text-align: right;
+  width: 18em;
+}
+
+.button {
+  color: white;
+  border: none;
+  border-radius: 1px;
+  padding: 1em 2em !important;
+  display: inline-block;
+  margin-left: 1em !important;
+  cursor: pointer;
+  position: relative;
+}
+
+.button[disabled] {
+  opacity: 0.5;
+  cursor: default;
+}
diff --git a/js/src/dapps/basiccoin/_status.css b/js/src/dapps/basiccoin/_status.css
new file mode 100644
index 0000000000000000000000000000000000000000..8fd93cfe4026992c5195aed354f1cac2431ac52c
--- /dev/null
+++ b/js/src/dapps/basiccoin/_status.css
@@ -0,0 +1,36 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.statusHeader {
+  font-size: 1.25em;
+  margin-bottom: 1.25em;
+  opacity: 0.75;
+}
+
+.statusInfo {
+  margin-bottom: 0.25em;
+}
+
+.statusState {
+  opacity: 0.75;
+  margin-top: 1em;
+}
+
+.statusError {
+  color: red;
+  margin-top: 1em;
+}
diff --git a/js/src/dapps/basiccoin/background.jpg b/js/src/dapps/basiccoin/background.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c873064f581cff2718a31fd1dad77e11651a679c
Binary files /dev/null and b/js/src/dapps/basiccoin/background.jpg differ
diff --git a/js/src/dapps/basiccoin/parity.js b/js/src/dapps/basiccoin/parity.js
new file mode 100644
index 0000000000000000000000000000000000000000..f6d59f44d5771db93be36fa0ed8af8889d14af51
--- /dev/null
+++ b/js/src/dapps/basiccoin/parity.js
@@ -0,0 +1,21 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const { api } = window.parity;
+
+export {
+  api
+};
diff --git a/js/src/dapps/basiccoin/services.js b/js/src/dapps/basiccoin/services.js
new file mode 100644
index 0000000000000000000000000000000000000000..ca586ea917d8b7ae2831d215c5d7851572a55bd7
--- /dev/null
+++ b/js/src/dapps/basiccoin/services.js
@@ -0,0 +1,270 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+
+import * as abis from '../../contracts/abi';
+import { api } from './parity';
+
+let managerInstance;
+let tokenregInstance;
+let registryInstance;
+
+const registries = {};
+const subscriptions = {};
+let nextSubscriptionId = 1000;
+let isTest = false;
+
+export function subscribeEvents (addresses, callback) {
+  const subscriptionId = nextSubscriptionId++;
+  const contract = api.newContract(abis.eip20);
+  const event = contract.events.filter((evt) => evt.name === 'Transfer');
+  const options = {
+    address: addresses,
+    fromBlock: 0,
+    toBlock: 'pending',
+    limit: 50,
+    topics: [event.signature]
+  };
+
+  return api.eth
+    .newFilter(options)
+    .then((filterId) => {
+      subscriptions[subscriptionId] = { subscriptionId, filterId, addresses, callback, contract };
+
+      return api.eth.getFilterLogs(filterId);
+    })
+    .then((logs) => callback(null, contract.parseEventLogs(logs)))
+    .then(() => subscriptionId)
+    .catch((error) => {
+      console.error('subscribeEvents', error);
+      throw error;
+    });
+}
+
+export function unsubscribeEvents (subscriptionId) {
+  api.eth
+    .uninstallFilter(subscriptions[subscriptionId].filterId)
+    .catch((error) => {
+      console.error('unsubscribeEvents', error);
+    });
+
+  delete subscriptions[subscriptionId];
+}
+
+function pollEvents () {
+  const loop = Object.values(subscriptions);
+  const timeout = () => setTimeout(pollEvents, 1000);
+
+  Promise
+    .all(loop.map((subscription) => api.eth.getFilterChanges(subscription.filterId)))
+    .then((logsArray) => {
+      logsArray.forEach((logs, index) => {
+        const subscription = loop[index];
+
+        if (!logs || !logs.length) {
+          return;
+        }
+
+        try {
+          subscription.callback(null, subscription.contract.parseEventLogs(logs));
+        } catch (error) {
+          unsubscribeEvents(loop.subscriptionId);
+          console.error('pollEvents', error);
+        }
+      });
+
+      timeout();
+    })
+    .catch((error) => {
+      console.error('pollEvents', error);
+      timeout();
+    });
+}
+
+export function attachInstances () {
+  pollEvents();
+
+  return Promise
+    .all([
+      api.ethcore.registryAddress(),
+      api.ethcore.netChain()
+    ])
+    .then(([registryAddress, netChain]) => {
+      const registry = api.newContract(abis.registry, registryAddress).instance;
+      isTest = netChain === 'morden' || netChain === 'testnet';
+
+      console.log(`contract was found at registry=${registryAddress}`);
+      console.log(`running on ${netChain}, isTest=${isTest}`);
+
+      return Promise
+        .all([
+          registry.getAddress.call({}, [api.util.sha3('playbasiccoinmgr'), 'A']),
+          registry.getAddress.call({}, [api.util.sha3('basiccoinreg'), 'A']),
+          registry.getAddress.call({}, [api.util.sha3('tokenreg'), 'A'])
+        ]);
+    })
+    .then(([managerAddress, registryAddress, tokenregAddress]) => {
+      console.log(`contracts were found at basiccoinmgr=${managerAddress}, basiccoinreg=${registryAddress}, tokenreg=${registryAddress}`);
+
+      managerInstance = api.newContract(abis.basiccoinmanager, managerAddress).instance;
+      registryInstance = api.newContract(abis.tokenreg, registryAddress).instance;
+      tokenregInstance = api.newContract(abis.tokenreg, tokenregAddress).instance;
+
+      registries[registryInstance.address] = registryInstance;
+      registries[tokenregInstance.address] = tokenregInstance;
+
+      return {
+        managerInstance,
+        registryInstance,
+        tokenregInstance
+      };
+    })
+    .catch((error) => {
+      console.error('attachInstances', error);
+      throw error;
+    });
+}
+
+export function totalSupply (address) {
+  return api.newContract(abis.eip20, address)
+    .instance.totalSupply.call();
+}
+
+export function getCoin (tokenreg, address) {
+  return registries[tokenreg].fromAddress
+    .call({}, [address])
+    .then(([id, tla, base, name, owner]) => {
+      return {
+        id, tla, base, name, owner,
+        isGlobal: tokenregInstance.address === tokenreg
+      };
+    })
+    .catch((error) => {
+      console.error('getCoin', error);
+      throw error;
+    });
+}
+
+export function loadOwnedTokens (addresses) {
+  let total = new BigNumber(0);
+
+  return Promise
+    .all(
+      addresses.map((address) => managerInstance.countByOwner.call({}, [address]))
+    )
+    .then((counts) => {
+      return Promise.all(
+        addresses.reduce((promises, address, index) => {
+          total = counts[index].add(total);
+          for (let i = 0; counts[index].gt(i); i++) {
+            promises.push(managerInstance.getByOwner.call({}, [address, i]));
+          }
+          return promises;
+        }, [])
+      );
+    })
+    .then((_tokens) => {
+      const tokens = _tokens.reduce((tokens, token) => {
+        const [address, owner, tokenreg] = token;
+        tokens[owner] = tokens[owner] || [];
+        tokens[owner].push({ address, owner, tokenreg });
+        return tokens;
+      }, {});
+
+      return { tokens, total };
+    })
+    .catch((error) => {
+      console.error('loadTokens', error);
+      throw error;
+    });
+}
+
+export function loadAllTokens () {
+  return managerInstance
+    .count.call()
+    .then((count) => {
+      const promises = [];
+
+      for (let index = 0; count.gt(index); index++) {
+        promises.push(managerInstance.get.call({}, [index]));
+      }
+
+      return Promise.all(promises);
+    })
+    .then((_tokens) => {
+      const tokens = [];
+
+      return Promise
+        .all(
+          _tokens.map(([address, owner, tokenreg]) => {
+            const isGlobal = tokenreg === tokenregInstance.address;
+            tokens.push({ address, owner, tokenreg, isGlobal });
+            return registries[tokenreg].fromAddress.call({}, [address]);
+          })
+        )
+        .then((coins) => {
+          return tokens.map((token, index) => {
+            const [id, tla, base, name, owner] = coins[index];
+            token.coin = { id, tla, base, name, owner };
+            return token;
+          });
+        });
+    })
+    .catch((error) => {
+      console.log('loadAllTokens', error);
+      throw error;
+    });
+}
+
+export function loadBalances (addresses) {
+  return loadAllTokens()
+    .then((tokens) => {
+      return Promise.all(
+        tokens.map((token) => {
+          return Promise.all(
+            addresses.map((address) => loadTokenBalance(token.address, address))
+          );
+        })
+      )
+      .then((_balances) => {
+        return tokens.map((token, tindex) => {
+          const balances = _balances[tindex];
+          token.balances = addresses.map((address, aindex) => {
+            return { address, balance: balances[aindex] };
+          });
+          return token;
+        });
+      });
+    })
+    .catch((error) => {
+      console.error('loadBalances', error);
+      throw error;
+    });
+}
+
+export function loadTokenBalance (tokenAddress, address) {
+  return api.newContract(abis.eip20, tokenAddress).instance
+    .balanceOf.call({}, [address])
+    .catch((error) => {
+      console.error('loadTokenBalance', error);
+      throw error;
+    });
+}
+
+export function txLink (txHash) {
+  return `https://${isTest ? 'testnet.' : ''}etherscan.io/tx/${txHash}`;
+}
diff --git a/js/src/dapps/gavcoin.html b/js/src/dapps/gavcoin.html
new file mode 100644
index 0000000000000000000000000000000000000000..928310a5262c1622e500a2c9fb4e3294e698d813
--- /dev/null
+++ b/js/src/dapps/gavcoin.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>GAVcoin</title>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="vendor.js"></script>
+    <script src="commons.js"></script>
+    <script src="parity.js"></script>
+    <script src="gavcoin.js"></script>
+  </body>
+</html>
diff --git a/js/src/dapps/gavcoin.js b/js/src/dapps/gavcoin.js
new file mode 100644
index 0000000000000000000000000000000000000000..fae095ef2573b7e31d398fe739cb63ed017a407e
--- /dev/null
+++ b/js/src/dapps/gavcoin.js
@@ -0,0 +1,33 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import ReactDOM from 'react-dom';
+import React from 'react';
+
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
+import Application from './gavcoin/Application';
+
+import '../../assets/fonts/Roboto/font.css';
+import '../../assets/fonts/RobotoMono/font.css';
+import './style.css';
+import './gavcoin.html';
+
+ReactDOM.render(
+  <Application />,
+  document.querySelector('#container')
+);
diff --git a/js/src/dapps/gavcoin/AccountSelector/AccountItem/accountItem.css b/js/src/dapps/gavcoin/AccountSelector/AccountItem/accountItem.css
new file mode 100644
index 0000000000000000000000000000000000000000..3b7457cb7078084a719c859b6e4ed9131dec91b0
--- /dev/null
+++ b/js/src/dapps/gavcoin/AccountSelector/AccountItem/accountItem.css
@@ -0,0 +1,45 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.account {
+  padding: 4px 0 !important;
+  display: inline-block;
+}
+
+.name {
+  display: inline-block;
+  margin-right: 1em;
+  text-transform: uppercase;
+}
+
+.balance {
+  display: inline-block;
+  text-align: right;
+  color: #aaa;
+  font-family: 'Roboto Mono', monospace;
+}
+
+.details {
+  display: inline-block;
+}
+
+.image {
+  display: inline-block;
+}
+
+.image img {
+  margin: 0 1em -11px 0;
+}
diff --git a/js/src/dapps/gavcoin/AccountSelector/AccountItem/accountItem.js b/js/src/dapps/gavcoin/AccountSelector/AccountItem/accountItem.js
new file mode 100644
index 0000000000000000000000000000000000000000..1a55e7f9307258209ad942a94a9ad19f6bc5bb46
--- /dev/null
+++ b/js/src/dapps/gavcoin/AccountSelector/AccountItem/accountItem.js
@@ -0,0 +1,63 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import IdentityIcon from '../../IdentityIcon';
+
+import styles from './accountItem.css';
+
+export default class AccountItem extends Component {
+  static propTypes = {
+    account: PropTypes.object,
+    gavBalance: PropTypes.bool
+  };
+
+  render () {
+    const { account, gavBalance } = this.props;
+
+    let balance;
+    let token;
+
+    if (gavBalance) {
+      if (account.gavBalance) {
+        balance = account.gavBalance;
+        token = 'GAV';
+      }
+    } else {
+      if (account.ethBalance) {
+        balance = account.ethBalance;
+        token = 'ETH';
+      }
+    }
+
+    return (
+      <div className={ styles.account }>
+        <div className={ styles.image }>
+          <IdentityIcon address={ account.address } />
+        </div>
+        <div className={ styles.details }>
+          <div className={ styles.name }>
+            { account.name || account.address }
+          </div>
+          <div className={ styles.balance }>
+            { balance }<small> { token }</small>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/js/src/dapps/gavcoin/AccountSelector/AccountItem/index.js b/js/src/dapps/gavcoin/AccountSelector/AccountItem/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..570b3415aaa316785227c739c792fc2720738875
--- /dev/null
+++ b/js/src/dapps/gavcoin/AccountSelector/AccountItem/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './accountItem';
diff --git a/js/src/dapps/gavcoin/AccountSelector/accountSelector.js b/js/src/dapps/gavcoin/AccountSelector/accountSelector.js
new file mode 100644
index 0000000000000000000000000000000000000000..e37d23598a9c81559e19b82359fe786c40a40a9b
--- /dev/null
+++ b/js/src/dapps/gavcoin/AccountSelector/accountSelector.js
@@ -0,0 +1,102 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+import { MenuItem, SelectField } from 'material-ui';
+
+import AccountItem from './AccountItem';
+
+const NAME_ID = ' ';
+let lastSelectedAccount = {};
+
+export default class AccountSelect extends Component {
+  static propTypes = {
+    accounts: PropTypes.array,
+    account: PropTypes.object,
+    anyAccount: PropTypes.bool,
+    gavBalance: PropTypes.bool,
+    onSelect: PropTypes.func,
+    errorText: PropTypes.string,
+    floatingLabelText: PropTypes.string,
+    hintText: PropTypes.string
+  }
+
+  componentDidMount () {
+    this.props.onSelect(lastSelectedAccount);
+  }
+
+  render () {
+    const { account, accounts, anyAccount, errorText, floatingLabelText, gavBalance, hintText } = this.props;
+
+    return (
+      <SelectField
+        autoComplete='off'
+        floatingLabelFixed
+        floatingLabelText={ floatingLabelText }
+        fullWidth
+        hintText={ hintText }
+        errorText={ errorText }
+        name={ NAME_ID }
+        id={ NAME_ID }
+        value={ account }
+        onChange={ this.onSelect }>
+        { renderAccounts(accounts, { anyAccount, gavBalance }) }
+      </SelectField>
+    );
+  }
+
+  onSelect = (event, idx, account) => {
+    lastSelectedAccount = account || {};
+    this.props.onSelect(lastSelectedAccount);
+  }
+}
+
+function isPositive (numberStr) {
+  return new BigNumber(numberStr.replace(',', '')).gt(0);
+}
+
+export function renderAccounts (accounts, options = {}) {
+  return accounts
+    .filter((account) => {
+      if (options.anyAccount) {
+        return true;
+      }
+
+      if (account.uuid) {
+        return isPositive(account[options.gavBalance ? 'gavBalance' : 'ethBalance']);
+      }
+
+      return false;
+    })
+    .map((account) => {
+      const item = (
+        <AccountItem
+          account={ account }
+          key={ account.address }
+          gavBalance={ options.gavBalance || false } />
+      );
+
+      return (
+        <MenuItem
+          key={ account.address }
+          value={ account }
+          label={ item }>
+          { item }
+        </MenuItem>
+      );
+    });
+}
diff --git a/js/src/dapps/gavcoin/AccountSelector/index.js b/js/src/dapps/gavcoin/AccountSelector/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..de529244a154a8bd3ff399133a5d533fb421585d
--- /dev/null
+++ b/js/src/dapps/gavcoin/AccountSelector/index.js
@@ -0,0 +1,22 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { renderAccounts } from './accountSelector';
+
+export default from './accountSelector';
+export {
+  renderAccounts
+};
diff --git a/js/src/dapps/gavcoin/AccountSelectorText/accountSelectorText.css b/js/src/dapps/gavcoin/AccountSelectorText/accountSelectorText.css
new file mode 100644
index 0000000000000000000000000000000000000000..0a969770d7edbf45addccb4014ecf196f9ed2b4e
--- /dev/null
+++ b/js/src/dapps/gavcoin/AccountSelectorText/accountSelectorText.css
@@ -0,0 +1,28 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.addrtext {
+  position: relative;
+}
+
+.input input {
+  padding-left: 48px !important;
+}
+
+.addricon {
+  position: absolute;
+  top: 37px;
+}
diff --git a/js/src/dapps/gavcoin/AccountSelectorText/accountSelectorText.js b/js/src/dapps/gavcoin/AccountSelectorText/accountSelectorText.js
new file mode 100644
index 0000000000000000000000000000000000000000..a83b0ec87ad148bd69f3b8eefd360bb2798e1604
--- /dev/null
+++ b/js/src/dapps/gavcoin/AccountSelectorText/accountSelectorText.js
@@ -0,0 +1,106 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { TextField } from 'material-ui';
+
+import IdentityIcon from '../IdentityIcon';
+import AccountSelector from '../AccountSelector';
+
+import styles from './accountSelectorText.css';
+
+const NAME_ID = ' ';
+
+export default class AccountSelectorText extends Component {
+  static propTypes = {
+    accounts: PropTypes.array,
+    account: PropTypes.object,
+    errorText: PropTypes.string,
+    gavBalance: PropTypes.bool,
+    anyAccount: PropTypes.bool,
+    floatingLabelText: PropTypes.string,
+    hintText: PropTypes.string,
+    selector: PropTypes.bool,
+    onChange: PropTypes.func
+  }
+
+  render () {
+    const { selector } = this.props;
+
+    return selector
+      ? this.renderDropDown()
+      : this.renderTextField();
+  }
+
+  renderDropDown () {
+    const { account, accounts, anyAccount, errorText, gavBalance, hintText, floatingLabelText, onChange } = this.props;
+
+    return (
+      <AccountSelector
+        anyAccount={ anyAccount }
+        gavBalance={ gavBalance }
+        accounts={ accounts }
+        account={ account }
+        errorText={ errorText }
+        floatingLabelText={ floatingLabelText }
+        hintText={ hintText }
+        onSelect={ onChange } />
+    );
+  }
+
+  renderTextField () {
+    const { account, errorText, hintText, floatingLabelText } = this.props;
+
+    return (
+      <div className={ styles.addrtext }>
+        <TextField
+          className={ styles.input }
+          autoComplete='off'
+          floatingLabelFixed
+          floatingLabelText={ floatingLabelText }
+          fullWidth
+          hintText={ hintText }
+          errorText={ errorText }
+          name={ NAME_ID }
+          id={ NAME_ID }
+          value={ account.address || '' }
+          onChange={ this.onChangeAddress } />
+        { this.renderAddressIcon() }
+      </div>
+    );
+  }
+
+  renderAddressIcon () {
+    const { account } = this.props;
+
+    if (!account.address) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.addricon }>
+        <IdentityIcon address={ account.address } />
+      </div>
+    );
+  }
+
+  onChangeAddress = (event, address) => {
+    const lower = address.toLowerCase();
+    const account = this.props.accounts.find((_account) => _account.address.toLowerCase() === lower);
+
+    this.props.onChange(account || { address });
+  }
+}
diff --git a/js/src/dapps/gavcoin/AccountSelectorText/index.js b/js/src/dapps/gavcoin/AccountSelectorText/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..c3aab3e52ac4db692d5d4bf7efbcce29fc807573
--- /dev/null
+++ b/js/src/dapps/gavcoin/AccountSelectorText/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './accountSelectorText';
diff --git a/js/src/dapps/gavcoin/Accounts/accounts.css b/js/src/dapps/gavcoin/Accounts/accounts.css
new file mode 100644
index 0000000000000000000000000000000000000000..7c45117106c79b8c1dc31a0625d91ccb62607c3d
--- /dev/null
+++ b/js/src/dapps/gavcoin/Accounts/accounts.css
@@ -0,0 +1,47 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.accounts {
+  padding: 4em 2em 0 2em;
+  text-align: center;
+  width: 100%;
+}
+
+.account {
+  margin: 0.5em !important;
+  background: rgb(50, 100, 150) !important;
+  display: inline-block !important;
+}
+
+.account img {
+  margin-bottom: -11px;
+  margin-left: -11px;
+}
+
+.balance {
+  font-family: 'Roboto Mono', monospace;
+  color: rgba(255, 255, 255, 1) !important;
+}
+
+.name {
+  color: rgba(255, 255, 255, 0.7) !important;
+  margin-right: 1em;
+  text-transform: uppercase;
+}
+
+.none {
+  color: rgba(255, 255, 255, 0.7);
+}
diff --git a/js/src/dapps/gavcoin/Accounts/accounts.js b/js/src/dapps/gavcoin/Accounts/accounts.js
new file mode 100644
index 0000000000000000000000000000000000000000..f510193ac280d47a55fe446987f19d9824765b30
--- /dev/null
+++ b/js/src/dapps/gavcoin/Accounts/accounts.js
@@ -0,0 +1,83 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { Chip } from 'material-ui';
+
+import IdentityIcon from '../IdentityIcon';
+
+import styles from './accounts.css';
+
+export default class Accounts extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    instance: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    accounts: PropTypes.array
+  }
+
+  render () {
+    const has = this._hasAccounts();
+
+    return (
+      <div className={ styles.accounts }>
+        { has ? this.renderAccounts() : this.renderEmpty() }
+      </div>
+    );
+  }
+
+  renderEmpty () {
+    return (
+      <div className={ styles.none }>
+        You currently do not have any GAVcoin in any of your addresses, buy some
+      </div>
+    );
+  }
+
+  renderAccounts () {
+    const { accounts } = this.props;
+
+    return accounts
+      .filter((account) => account.hasGav)
+      .map((account) => {
+        return (
+          <Chip
+            className={ styles.account }
+            key={ account.address }>
+            <IdentityIcon address={ account.address } />
+            <span className={ styles.name }>
+              { account.name }
+            </span>
+            <span className={ styles.balance }>
+              { account.gavBalance }
+            </span>
+          </Chip>
+        );
+      });
+  }
+
+  _hasAccounts () {
+    const { accounts } = this.props;
+
+    if (!accounts || !accounts.length) {
+      return false;
+    }
+
+    return accounts.filter((account) => account.hasGav).length !== 0;
+  }
+}
diff --git a/js/src/dapps/gavcoin/Accounts/index.js b/js/src/dapps/gavcoin/Accounts/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e9be1d557338144d69c09ec2d7adc0d2386d3999
--- /dev/null
+++ b/js/src/dapps/gavcoin/Accounts/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './accounts';
diff --git a/js/src/dapps/gavcoin/Actions/ActionBuyIn/actionBuyIn.js b/js/src/dapps/gavcoin/Actions/ActionBuyIn/actionBuyIn.js
new file mode 100644
index 0000000000000000000000000000000000000000..f97e20a6c65e6c44a4f618eac79db7dad179bfc5
--- /dev/null
+++ b/js/src/dapps/gavcoin/Actions/ActionBuyIn/actionBuyIn.js
@@ -0,0 +1,206 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+
+import { Dialog, FlatButton, TextField } from 'material-ui';
+
+import { api } from '../../parity';
+import AccountSelector from '../../AccountSelector';
+import { ERRORS, validateAccount, validatePositiveNumber } from '../validation';
+
+import styles from '../actions.css';
+
+const NAME_ID = ' ';
+
+export default class ActionBuyIn extends Component {
+  static contextTypes = {
+    instance: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    accounts: PropTypes.array,
+    price: PropTypes.object,
+    onClose: PropTypes.func
+  }
+
+  state = {
+    account: {},
+    accountError: ERRORS.invalidAccount,
+    amount: 0,
+    amountError: ERRORS.invalidAmount,
+    maxPrice: api.util.fromWei(this.props.price.mul(1.2)).toString(),
+    maxPriceError: null,
+    sending: false,
+    complete: false
+  }
+
+  render () {
+    const { complete } = this.state;
+
+    if (complete) {
+      return null;
+    }
+
+    return (
+      <Dialog
+        title='buy coins for a specific account'
+        modal open
+        className={ styles.dialog }
+        actions={ this.renderActions() }>
+        { this.renderFields() }
+      </Dialog>
+    );
+  }
+
+  renderActions () {
+    const { complete } = this.state;
+
+    if (complete) {
+      return (
+        <FlatButton
+          label='Done'
+          primary
+          onTouchTap={ this.props.onClose } />
+      );
+    }
+
+    const { accountError, amountError, maxPriceError, sending } = this.state;
+    const hasError = !!(amountError || accountError || maxPriceError);
+
+    return ([
+      <FlatButton
+        label='Cancel'
+        primary
+        onTouchTap={ this.props.onClose } />,
+      <FlatButton
+        label='Buy'
+        primary
+        disabled={ hasError || sending }
+        onTouchTap={ this.onSend } />
+    ]);
+  }
+
+  renderFields () {
+    const maxPriceLabel = `maximum price in ETH (current ${api.util.fromWei(this.props.price).toFormat(3)})`;
+
+    return (
+      <div>
+        <AccountSelector
+          accounts={ this.props.accounts }
+          account={ this.state.account }
+          errorText={ this.state.accountError }
+          floatingLabelText='from account'
+          hintText='the account the transaction will be made from'
+          onSelect={ this.onChangeAddress } />
+        <TextField
+          autoComplete='off'
+          floatingLabelFixed
+          floatingLabelText='amount in ETH'
+          fullWidth
+          hintText='the amount of ETH you wish to spend'
+          errorText={ this.state.amountError }
+          name={ NAME_ID }
+          id={ NAME_ID }
+          value={ this.state.amount }
+          onChange={ this.onChangeAmount } />
+        <TextField
+          autoComplete='off'
+          floatingLabelFixed
+          floatingLabelText={ maxPriceLabel }
+          fullWidth
+          hintText='the maxium price allowed for buying'
+          errorText={ this.state.maxPriceError }
+          name={ NAME_ID }
+          id={ NAME_ID }
+          value={ this.state.maxPrice }
+          onChange={ this.onChangeMaxPrice } />
+      </div>
+    );
+  }
+
+  onChangeAddress = (account) => {
+    this.setState({
+      account,
+      accountError: validateAccount(account)
+    }, this.validateTotal);
+  }
+
+  onChangeAmount = (event, amount) => {
+    this.setState({
+      amount,
+      amountError: validatePositiveNumber(amount)
+    }, this.validateTotal);
+  }
+
+  onChangeMaxPrice = (event, maxPrice) => {
+    this.setState({
+      maxPrice,
+      maxPriceError: validatePositiveNumber(maxPrice)
+    });
+  }
+
+  validateTotal = () => {
+    const { account, accountError, amount, amountError } = this.state;
+
+    if (accountError || amountError) {
+      return;
+    }
+
+    if (new BigNumber(amount).gt(account.ethBalance.replace(',', ''))) {
+      this.setState({
+        amountError: ERRORS.invalidTotal
+      });
+    }
+  }
+
+  onSend = () => {
+    const { instance } = this.context;
+    const maxPrice = api.util.toWei(this.state.maxPrice);
+    const values = [this.state.account.address, maxPrice.toString()];
+    const options = {
+      from: this.state.account.address,
+      value: api.util.toWei(this.state.amount).toString()
+    };
+
+    this.setState({
+      sending: true
+    });
+
+    instance.buyin
+      .estimateGas(options, values)
+      .then((gasEstimate) => {
+        options.gas = gasEstimate.mul(1.2).toFixed(0);
+        console.log(`buyin: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
+
+        return instance.buyin.postTransaction(options, values);
+      })
+      .then(() => {
+        this.props.onClose();
+        this.setState({
+          sending: false,
+          complete: true
+        });
+      })
+      .catch((error) => {
+        console.error('error', error);
+        this.setState({
+          sending: false
+        });
+      });
+  }
+}
diff --git a/js/src/dapps/gavcoin/Actions/ActionBuyIn/index.js b/js/src/dapps/gavcoin/Actions/ActionBuyIn/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..2c0c2374fe842a6dd6a8d90b9899c48044979650
--- /dev/null
+++ b/js/src/dapps/gavcoin/Actions/ActionBuyIn/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './actionBuyIn';
diff --git a/js/src/dapps/gavcoin/Actions/ActionRefund/actionRefund.js b/js/src/dapps/gavcoin/Actions/ActionRefund/actionRefund.js
new file mode 100644
index 0000000000000000000000000000000000000000..8ebbfb351295955aecad4fb7988317594cdac267
--- /dev/null
+++ b/js/src/dapps/gavcoin/Actions/ActionRefund/actionRefund.js
@@ -0,0 +1,191 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+
+import { Dialog, FlatButton, TextField } from 'material-ui';
+
+import { api } from '../../parity';
+import AccountSelector from '../../AccountSelector';
+import { ERRORS, validateAccount, validatePositiveNumber } from '../validation';
+
+import styles from '../actions.css';
+
+const DIVISOR = 10 ** 6;
+const NAME_ID = ' ';
+
+export default class ActionRefund extends Component {
+  static contextTypes = {
+    instance: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    accounts: PropTypes.array,
+    price: PropTypes.object,
+    onClose: PropTypes.func
+  }
+
+  state = {
+    account: {},
+    accountError: ERRORS.invalidAccount,
+    complete: false,
+    sending: false,
+    amount: 0,
+    amountError: ERRORS.invalidAmount,
+    price: api.util.fromWei(this.props.price).toString(),
+    priceError: null
+  }
+
+  render () {
+    const { complete } = this.state;
+
+    if (complete) {
+      return null;
+    }
+
+    return (
+      <Dialog
+        title='return coins for a refund'
+        modal open
+        className={ styles.dialog }
+        actions={ this.renderActions() }>
+        { this.renderFields() }
+      </Dialog>
+    );
+  }
+
+  renderActions () {
+    if (this.state.complete) {
+      return (
+        <FlatButton
+          label='Done'
+          primary
+          onTouchTap={ this.props.onClose } />
+      );
+    }
+
+    const hasError = !!(this.state.priceError || this.state.amountError || this.state.accountError);
+
+    return ([
+      <FlatButton
+        label='Cancel'
+        primary
+        onTouchTap={ this.props.onClose } />,
+      <FlatButton
+        label='Refund'
+        primary
+        disabled={ hasError || this.state.sending }
+        onTouchTap={ this.onSend } />
+    ]);
+  }
+
+  renderFields () {
+    const priceLabel = `price in ETH (current ${api.util.fromWei(this.props.price).toFormat(3)})`;
+
+    return (
+      <div>
+        <AccountSelector
+          gavBalance
+          accounts={ this.props.accounts }
+          account={ this.state.account }
+          errorText={ this.state.accountError }
+          floatingLabelText='from account'
+          hintText='the account the transaction will be made from'
+          onSelect={ this.onChangeAddress } />
+        <TextField
+          autoComplete='off'
+          floatingLabelFixed
+          floatingLabelText='number of coins'
+          fullWidth
+          hintText='the number of coins to exchange for an ETH refund'
+          errorText={ this.state.amountError }
+          name={ NAME_ID }
+          id={ NAME_ID }
+          value={ this.state.amount }
+          onChange={ this.onChangeAmount } />
+        <TextField
+          autoComplete='off'
+          floatingLabelFixed
+          floatingLabelText={ priceLabel }
+          fullWidth
+          hintText='the price the refund is requested at'
+          errorText={ this.state.priceError }
+          name={ NAME_ID }
+          id={ NAME_ID }
+          value={ this.state.price }
+          onChange={ this.onChangePrice } />
+      </div>
+    );
+  }
+
+  onChangeAddress = (account) => {
+    this.setState({
+      account,
+      accountError: validateAccount(account)
+    });
+  }
+
+  onChangeAmount = (event, amount) => {
+    this.setState({
+      amount,
+      amountError: validatePositiveNumber(amount)
+    });
+  }
+
+  onChangePrice = (event, price) => {
+    this.setState({
+      price,
+      priceError: validatePositiveNumber(price)
+    });
+  }
+
+  onSend = () => {
+    const { instance } = this.context;
+    const price = api.util.toWei(this.state.price);
+    const amount = new BigNumber(this.state.amount).mul(DIVISOR);
+    const values = [price.toString(), amount.toFixed(0)];
+    const options = {
+      from: this.state.account.address
+    };
+
+    this.setState({
+      sending: true
+    });
+
+    instance.refund
+      .estimateGas(options, values)
+      .then((gasEstimate) => {
+        options.gas = gasEstimate.mul(1.2).toFixed(0);
+        console.log(`refund: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
+
+        return instance.refund.postTransaction(options, values);
+      })
+      .then(() => {
+        this.props.onClose();
+        this.setState({
+          sending: false,
+          complete: true
+        });
+      })
+      .catch((error) => {
+        console.error('error', error);
+        this.setState({
+          sending: false
+        });
+      });
+  }
+}
diff --git a/js/src/dapps/gavcoin/Actions/ActionRefund/index.js b/js/src/dapps/gavcoin/Actions/ActionRefund/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d3b5b7e1bff5798325337fe763fe7f37f790802c
--- /dev/null
+++ b/js/src/dapps/gavcoin/Actions/ActionRefund/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './actionRefund';
diff --git a/js/src/dapps/gavcoin/Actions/ActionTransfer/actionTransfer.js b/js/src/dapps/gavcoin/Actions/ActionTransfer/actionTransfer.js
new file mode 100644
index 0000000000000000000000000000000000000000..13ecc55e8e8b8d510a5e6a7b0425ebf7ba2371e3
--- /dev/null
+++ b/js/src/dapps/gavcoin/Actions/ActionTransfer/actionTransfer.js
@@ -0,0 +1,220 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+
+import { Dialog, FlatButton, TextField, Toggle } from 'material-ui';
+
+import AccountSelector from '../../AccountSelector';
+import AccountSelectorText from '../../AccountSelectorText';
+import { ERRORS, validateAccount, validatePositiveNumber } from '../validation';
+
+import styles from '../actions.css';
+
+const DIVISOR = 10 ** 6;
+const NAME_ID = ' ';
+
+export default class ActionTransfer extends Component {
+  static contextTypes = {
+    instance: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    accounts: PropTypes.array,
+    price: PropTypes.object,
+    onClose: PropTypes.func
+  }
+
+  state = {
+    fromAccount: {},
+    fromAccountError: ERRORS.invalidAccount,
+    toAccount: {},
+    toAccountError: ERRORS.invalidRecipient,
+    inputAccount: false,
+    complete: false,
+    sending: false,
+    amount: 0,
+    amountError: ERRORS.invalidAmount
+  }
+
+  render () {
+    const { complete } = this.state;
+
+    if (complete) {
+      return null;
+    }
+
+    return (
+      <Dialog
+        title='send coins to another account'
+        modal open
+        className={ styles.dialog }
+        actions={ this.renderActions() }>
+        { this.renderFields() }
+      </Dialog>
+    );
+  }
+
+  renderActions () {
+    const { complete, sending, amountError, fromAccountError, toAccountError } = this.state;
+
+    if (complete) {
+      return (
+        <FlatButton
+          label='Done'
+          primary
+          onTouchTap={ this.props.onClose } />
+      );
+    }
+
+    const hasError = !!(amountError || fromAccountError || toAccountError);
+
+    return ([
+      <FlatButton
+        label='Cancel'
+        primary
+        onTouchTap={ this.props.onClose } />,
+      <FlatButton
+        label='Transfer'
+        primary
+        disabled={ hasError || sending }
+        onTouchTap={ this.onSend } />
+    ]);
+  }
+
+  renderFields () {
+    const { accounts } = this.props;
+    const { fromAccount, fromAccountError, toAccount, toAccountError, inputAccount, amount, amountError } = this.state;
+
+    return (
+      <div>
+        <AccountSelector
+          gavBalance
+          accounts={ accounts }
+          account={ fromAccount }
+          errorText={ fromAccountError }
+          floatingLabelText='from account'
+          hintText='the account the transaction will be made from'
+          onSelect={ this.onChangeFromAccount } />
+        <div className={ styles.overlay }>
+          <AccountSelectorText
+            gavBalance anyAccount
+            selector={ !inputAccount }
+            accounts={ accounts }
+            account={ toAccount }
+            errorText={ toAccountError }
+            floatingLabelText='to account'
+            hintText='the account the coins will be sent to'
+            onChange={ this.onChangeToAccount } />
+          <Toggle
+            className={ styles.overlaytoggle }
+            label='Edit'
+            labelPosition='right'
+            toggled={ inputAccount }
+            onToggle={ this.onChangeToInput } />
+        </div>
+        <TextField
+          autoComplete='off'
+          floatingLabelFixed
+          floatingLabelText='number of coins'
+          fullWidth
+          hintText='the number of coins to transfer'
+          errorText={ amountError }
+          name={ NAME_ID }
+          id={ NAME_ID }
+          value={ amount }
+          onChange={ this.onChangeAmount } />
+      </div>
+    );
+  }
+
+  onChangeFromAccount = (fromAccount) => {
+    this.setState({
+      fromAccount,
+      fromAccountError: validateAccount(fromAccount)
+    }, this.validateTotal);
+  }
+
+  onChangeToAccount = (toAccount) => {
+    this.setState({
+      toAccount,
+      toAccountError: validateAccount(toAccount)
+    });
+  }
+
+  onChangeToInput = () => {
+    this.setState({
+      inputAccount: !this.state.inputAccount
+    });
+  }
+
+  onChangeAmount = (event, amount) => {
+    this.setState({
+      amount,
+      amountError: validatePositiveNumber(amount)
+    }, this.validateTotal);
+  }
+
+  validateTotal = () => {
+    const { fromAccount, fromAccountError, amount, amountError } = this.state;
+
+    if (fromAccountError || amountError) {
+      return;
+    }
+
+    if (new BigNumber(amount).gt(fromAccount.gavBalance.replace(',', ''))) {
+      this.setState({
+        amountError: ERRORS.invalidTotal
+      });
+    }
+  }
+
+  onSend = () => {
+    const { instance } = this.context;
+    const amount = new BigNumber(this.state.amount).mul(DIVISOR);
+    const values = [this.state.toAccount.address, amount.toFixed(0)];
+    const options = {
+      from: this.state.fromAccount.address
+    };
+
+    this.setState({
+      sending: true
+    });
+
+    instance.transfer
+      .estimateGas(options, values)
+      .then((gasEstimate) => {
+        options.gas = gasEstimate.mul(1.2).toFixed(0);
+        console.log(`transfer: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
+
+        return instance.transfer.postTransaction(options, values);
+      })
+      .then(() => {
+        this.props.onClose();
+        this.setState({
+          sending: false,
+          complete: true
+        });
+      })
+      .catch((error) => {
+        console.error('error', error);
+        this.setState({
+          sending: false
+        });
+      });
+  }
+}
diff --git a/js/src/dapps/gavcoin/Actions/ActionTransfer/index.js b/js/src/dapps/gavcoin/Actions/ActionTransfer/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..848800e00fe863ba5c6076f42c448a989e12f878
--- /dev/null
+++ b/js/src/dapps/gavcoin/Actions/ActionTransfer/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './actionTransfer';
diff --git a/js/src/dapps/gavcoin/Actions/StepComplete/index.js b/js/src/dapps/gavcoin/Actions/StepComplete/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..7b95b1937a889282c9d97d1e47b50673cbf84d52
--- /dev/null
+++ b/js/src/dapps/gavcoin/Actions/StepComplete/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './stepComplete';
diff --git a/js/src/dapps/gavcoin/Actions/StepComplete/stepComplete.js b/js/src/dapps/gavcoin/Actions/StepComplete/stepComplete.js
new file mode 100644
index 0000000000000000000000000000000000000000..a066a7c30d88d1392e071dd910a61f5b7a1dd225
--- /dev/null
+++ b/js/src/dapps/gavcoin/Actions/StepComplete/stepComplete.js
@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import styles from '../actions.css';
+
+export default class StepComplete extends Component {
+  render () {
+    return (
+      <div className={ styles.dialogtext }>
+        Your transaction has been posted. Please visit the <a href='http://127.0.0.1:8080/#/signer' className={ styles.link } target='_blank'>Parity Signer</a> to authenticate the transfer.
+      </div>
+    );
+  }
+}
diff --git a/js/src/dapps/gavcoin/Actions/actions.css b/js/src/dapps/gavcoin/Actions/actions.css
new file mode 100644
index 0000000000000000000000000000000000000000..90ca3e18fea8c833cb93d33d168b5f9f1c98a6ca
--- /dev/null
+++ b/js/src/dapps/gavcoin/Actions/actions.css
@@ -0,0 +1,72 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.actions {
+  text-align: center;
+  padding: 2em 2em 0 2em;
+  width: 100%;
+}
+
+.button {
+  margin: 0 0.5em;
+}
+
+.button button {
+  background-color: rgba(50, 100, 150, 1) !important;
+  height: 56px !important;
+  padding: 0 10px !important;
+}
+
+.button button[disabled] {
+  background-color: rgba(50, 50, 50, 0.25) !important;
+}
+
+.dialog {
+}
+
+.dialog h3 {
+  color: rgba(50, 100, 150, 1) !important;
+  text-transform: uppercase;
+}
+
+.dialogtext {
+  padding-top: 1em;
+}
+
+.link, .link:hover, .link:visited {
+  color: rgb(0, 188, 212);
+  text-decoration: none;
+}
+
+.overlay {
+  position: relative;
+}
+
+.overlay svg {
+  opacity: 0;
+}
+
+.toggle {
+  text-align: right;
+}
+
+.overlaytoggle {
+  position: absolute !important;
+  top: 40px;
+  right: 0;
+  display: inline-block !important;
+  width: auto !important;
+}
diff --git a/js/src/dapps/gavcoin/Actions/actions.js b/js/src/dapps/gavcoin/Actions/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..e58d2223fa0662d55e178428b124ce200b01d1ae
--- /dev/null
+++ b/js/src/dapps/gavcoin/Actions/actions.js
@@ -0,0 +1,76 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { RaisedButton } from 'material-ui';
+import ActionAddShoppingCart from 'material-ui/svg-icons/action/add-shopping-cart';
+// import AvReplay from 'material-ui/svg-icons/av/replay';
+import ContentSend from 'material-ui/svg-icons/content/send';
+
+import styles from './actions.css';
+
+export default class Actions extends Component {
+  static propTypes = {
+    onAction: PropTypes.func.isRequired,
+    gavBalance: PropTypes.object.isRequired
+  }
+
+  render () {
+    const { gavBalance } = this.props;
+
+    return (
+      <div className={ styles.actions }>
+        <RaisedButton
+          className={ styles.button }
+          icon={ <ActionAddShoppingCart /> }
+          label='buy coins'
+          primary
+          onTouchTap={ this.onBuyIn } />
+        <RaisedButton
+          disabled={ !gavBalance || gavBalance.eq(0) }
+          className={ styles.button }
+          icon={ <ContentSend /> }
+          label='send coins'
+          primary
+          onTouchTap={ this.onTransfer } />
+      </div>
+    );
+
+    // <RaisedButton
+    //   className={ styles.button }
+    //   icon={ <AvReplay /> }
+    //   label='claim refund'
+    //   primary
+    //   onTouchTap={ this.onRefund } />
+  }
+
+  onBuyIn = () => {
+    this.props.onAction('BuyIn');
+  }
+
+  onTransfer = () => {
+    const { gavBalance } = this.props;
+
+    if (gavBalance && gavBalance.gt(0)) {
+      this.props.onAction('Transfer');
+    }
+  }
+
+  onRefund = () => {
+    this.props.onAction('Refund');
+  }
+}
diff --git a/js/src/dapps/gavcoin/Actions/index.js b/js/src/dapps/gavcoin/Actions/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..865bd65ce14d666e05d54ff48e40d38a9bc8ae60
--- /dev/null
+++ b/js/src/dapps/gavcoin/Actions/index.js
@@ -0,0 +1,27 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import ActionBuyIn from './ActionBuyIn';
+import ActionRefund from './ActionRefund';
+import ActionTransfer from './ActionTransfer';
+
+export default from './actions';
+
+export {
+  ActionBuyIn,
+  ActionRefund,
+  ActionTransfer
+};
diff --git a/js/src/dapps/gavcoin/Actions/validation.js b/js/src/dapps/gavcoin/Actions/validation.js
new file mode 100644
index 0000000000000000000000000000000000000000..d494c3392aa840b475b075379465f2b6aead4ca6
--- /dev/null
+++ b/js/src/dapps/gavcoin/Actions/validation.js
@@ -0,0 +1,56 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+
+import { api } from '../parity';
+
+export const ERRORS = {
+  invalidAccount: 'please select an account to transact with',
+  invalidRecipient: 'please select an account to send to',
+  invalidAddress: 'the address is not in the correct format',
+  invalidAmount: 'please enter a positive amount > 0',
+  invalidTotal: 'the amount is greater than the availale balance'
+};
+
+export function validatePositiveNumber (value) {
+  let bn = null;
+
+  try {
+    bn = new BigNumber(value);
+  } catch (e) {
+  }
+
+  if (!bn || !bn.gt(0)) {
+    return ERRORS.invalidAmount;
+  }
+
+  return null;
+}
+
+export function validateAccount (account) {
+  if (!account || !account.address) {
+    return ERRORS.invalidAccount;
+  }
+
+  if (!api.util.isAddressValid(account.address)) {
+    return ERRORS.invalidAddress;
+  }
+
+  account.address = api.util.toChecksumAddress(account.address);
+
+  return null;
+}
diff --git a/js/src/dapps/gavcoin/Application/application.js b/js/src/dapps/gavcoin/Application/application.js
new file mode 100644
index 0000000000000000000000000000000000000000..04c5abe0193a9dc9ccf8f7c1b671665012bdee0d
--- /dev/null
+++ b/js/src/dapps/gavcoin/Application/application.js
@@ -0,0 +1,239 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
+
+const muiTheme = getMuiTheme(lightBaseTheme);
+
+import { api } from '../parity';
+
+import * as abis from '../../../contracts/abi';
+
+import Accounts from '../Accounts';
+import Actions, { ActionBuyIn, ActionRefund, ActionTransfer } from '../Actions';
+import Events from '../Events';
+import Loading from '../Loading';
+import Status from '../Status';
+
+const DIVISOR = 10 ** 6;
+
+export default class Application extends Component {
+  static childContextTypes = {
+    api: PropTypes.object,
+    contract: PropTypes.object,
+    instance: PropTypes.object,
+    muiTheme: PropTypes.object
+  };
+
+  state = {
+    action: null,
+    address: null,
+    accounts: [],
+    blockNumber: new BigNumber(-1),
+    ethBalance: new BigNumber(0),
+    gavBalance: new BigNumber(0),
+    instance: null,
+    loading: true,
+    price: null,
+    remaining: null,
+    totalSupply: null
+  }
+
+  componentDidMount () {
+    this.attachInterface();
+  }
+
+  render () {
+    const { accounts, address, blockNumber, gavBalance, loading, price, remaining, totalSupply } = this.state;
+
+    if (loading) {
+      return (
+        <Loading />
+      );
+    }
+
+    return (
+      <div>
+        { this.renderModals() }
+        <Status
+          address={ address }
+          blockNumber={ blockNumber }
+          gavBalance={ gavBalance }
+          price={ price }
+          remaining={ remaining }
+          totalSupply={ totalSupply }>
+          <Accounts
+            accounts={ accounts } />
+        </Status>
+        <Actions
+          gavBalance={ gavBalance }
+          onAction={ this.onAction } />
+        <Events
+          accounts={ accounts } />
+      </div>
+    );
+  }
+
+  renderModals () {
+    const { action, accounts, price } = this.state;
+
+    switch (action) {
+      case 'BuyIn':
+        return (
+          <ActionBuyIn
+            accounts={ accounts }
+            price={ price }
+            onClose={ this.onActionClose } />
+        );
+      case 'Refund':
+        return (
+          <ActionRefund
+            accounts={ accounts }
+            price={ price }
+            onClose={ this.onActionClose } />
+        );
+      case 'Transfer':
+        return (
+          <ActionTransfer
+            accounts={ accounts }
+            onClose={ this.onActionClose } />
+        );
+      default:
+        return null;
+    }
+  }
+
+  getChildContext () {
+    const { contract, instance } = this.state;
+
+    return {
+      api,
+      contract,
+      instance,
+      muiTheme
+    };
+  }
+
+  onAction = (action) => {
+    this.setState({
+      action
+    });
+  }
+
+  onActionClose = () => {
+    this.setState({
+      action: null
+    });
+  }
+
+  onNewBlockNumber = (_error, blockNumber) => {
+    const { instance, accounts } = this.state;
+
+    if (_error) {
+      console.error('onNewBlockNumber', _error);
+      return;
+    }
+
+    Promise
+      .all([
+        instance.totalSupply.call(),
+        instance.remaining.call(),
+        instance.price.call()
+      ])
+      .then(([totalSupply, remaining, price]) => {
+        this.setState({
+          blockNumber,
+          totalSupply,
+          remaining,
+          price
+        });
+
+        const gavQueries = accounts.map((account) => instance.balanceOf.call({}, [account.address]));
+        const ethQueries = accounts.map((account) => api.eth.getBalance(account.address));
+
+        return Promise.all([
+          Promise.all(gavQueries),
+          Promise.all(ethQueries)
+        ]);
+      })
+      .then(([gavBalances, ethBalances]) => {
+        this.setState({
+          ethBalance: ethBalances.reduce((total, balance) => total.add(balance), new BigNumber(0)),
+          gavBalance: gavBalances.reduce((total, balance) => total.add(balance), new BigNumber(0)),
+          accounts: accounts.map((account, idx) => {
+            const ethBalance = ethBalances[idx];
+            const gavBalance = gavBalances[idx];
+
+            account.ethBalance = api.util.fromWei(ethBalance).toFormat(3);
+            account.gavBalance = gavBalance.div(DIVISOR).toFormat(6);
+            account.hasGav = gavBalance.gt(0);
+
+            return account;
+          })
+        });
+      })
+      .catch((error) => {
+        console.error('onNewBlockNumber', error);
+      });
+  }
+
+  attachInterface = () => {
+    api.ethcore
+      .registryAddress()
+      .then((registryAddress) => {
+        console.log(`the registry was found at ${registryAddress}`);
+
+        const registry = api.newContract(abis.registry, registryAddress).instance;
+
+        return Promise
+          .all([
+            registry.getAddress.call({}, [api.util.sha3('gavcoin'), 'A']),
+            api.personal.listAccounts(),
+            api.personal.accountsInfo()
+          ]);
+      })
+      .then(([address, addresses, infos]) => {
+        console.log(`gavcoin was found at ${address}`);
+
+        const contract = api.newContract(abis.gavcoin, address);
+
+        this.setState({
+          loading: false,
+          address,
+          contract,
+          instance: contract.instance,
+          accounts: addresses.map((address) => {
+            const info = infos[address];
+
+            return {
+              address,
+              name: info.name || 'Unnamed',
+              uuid: info.uuid
+            };
+          })
+        });
+
+        api.subscribe('eth_blockNumber', this.onNewBlockNumber);
+      })
+      .catch((error) => {
+        console.error('attachInterface', error);
+      });
+  }
+}
diff --git a/js/src/dapps/gavcoin/Application/index.js b/js/src/dapps/gavcoin/Application/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..236578226a80e822593c37acd1daad1c649950e1
--- /dev/null
+++ b/js/src/dapps/gavcoin/Application/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './application';
diff --git a/js/src/dapps/gavcoin/Events/Event/event.js b/js/src/dapps/gavcoin/Events/Event/event.js
new file mode 100644
index 0000000000000000000000000000000000000000..4fb29a382ac51ea1ae2d96ca480aa558a027c2c6
--- /dev/null
+++ b/js/src/dapps/gavcoin/Events/Event/event.js
@@ -0,0 +1,129 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import IdentityIcon from '../../IdentityIcon';
+import { formatBlockNumber, formatCoins, formatEth } from '../../format';
+
+import styles from '../events.css';
+
+const EMPTY_COLUMN = (
+  <td></td>
+);
+
+export default class Event extends Component {
+  static contextTypes = {
+    accounts: PropTypes.array.isRequired
+  }
+
+  static propTypes = {
+    event: PropTypes.object,
+    value: PropTypes.object,
+    price: PropTypes.object,
+    fromAddress: PropTypes.string,
+    toAddress: PropTypes.string
+  }
+
+  render () {
+    const { event, fromAddress, toAddress, price, value } = this.props;
+    const { blockNumber, state, type } = event;
+    const cls = `${styles.event} ${styles[state]} ${styles[type.toLowerCase()]}`;
+
+    return (
+      <tr className={ cls }>
+        { this.renderBlockNumber(blockNumber) }
+        { this.renderType(type) }
+        { this.renderValue(value) }
+        { this.renderPrice(price) }
+        { this.renderAddress(fromAddress) }
+        { this.renderAddress(toAddress) }
+      </tr>
+    );
+  }
+
+  renderBlockNumber (blockNumber) {
+    return (
+      <td className={ styles.blocknumber }>
+        { formatBlockNumber(blockNumber) }
+      </td>
+    );
+  }
+
+  renderAddress (address) {
+    if (!address) {
+      return EMPTY_COLUMN;
+    }
+
+    return (
+      <td className={ styles.account }>
+        <IdentityIcon address={ address } />
+        { this.renderAddressName(address) }
+      </td>
+    );
+  }
+
+  renderAddressName (address) {
+    const { accounts } = this.context;
+    const account = accounts.find((_account) => _account.address === address);
+
+    if (account) {
+      return (
+        <div className={ styles.name }>
+          { account.name }
+        </div>
+      );
+    }
+
+    return (
+      <div className={ styles.address }>
+        { address }
+      </div>
+    );
+  }
+
+  renderPrice (price) {
+    if (!price) {
+      return EMPTY_COLUMN;
+    }
+
+    return (
+      <td className={ styles.ethvalue }>
+        { formatEth(price) }<small> ETH</small>
+      </td>
+    );
+  }
+
+  renderValue (value) {
+    if (!value) {
+      return EMPTY_COLUMN;
+    }
+
+    return (
+      <td className={ styles.gavvalue }>
+        { formatCoins(value) }<small> GAV</small>
+      </td>
+    );
+  }
+
+  renderType (type) {
+    return (
+      <td className={ styles.type }>
+        { type }
+      </td>
+    );
+  }
+}
diff --git a/js/src/dapps/gavcoin/Events/Event/index.js b/js/src/dapps/gavcoin/Events/Event/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0925882d3e3ed35d3e6e0decfd8ab3e18d451052
--- /dev/null
+++ b/js/src/dapps/gavcoin/Events/Event/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './event';
diff --git a/js/src/dapps/gavcoin/Events/EventBuyin/eventBuyin.js b/js/src/dapps/gavcoin/Events/EventBuyin/eventBuyin.js
new file mode 100644
index 0000000000000000000000000000000000000000..571da1bef195bc12d5d7b80bb3aaff67ac053a73
--- /dev/null
+++ b/js/src/dapps/gavcoin/Events/EventBuyin/eventBuyin.js
@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import Event from '../Event';
+
+export default class EventBuyin extends Component {
+  static propTypes = {
+    event: PropTypes.object
+  }
+
+  render () {
+    const { event } = this.props;
+    const { buyer, price, amount } = event.params;
+
+    return (
+      <Event
+        event={ event }
+        fromAddress={ buyer }
+        value={ amount }
+        price={ price } />
+    );
+  }
+}
diff --git a/js/src/dapps/gavcoin/Events/EventBuyin/index.js b/js/src/dapps/gavcoin/Events/EventBuyin/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..77edc578af2d127d66d16322044654c9c5e1dd71
--- /dev/null
+++ b/js/src/dapps/gavcoin/Events/EventBuyin/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './eventBuyin';
diff --git a/js/src/dapps/gavcoin/Events/EventNewTranch/eventNewTranch.js b/js/src/dapps/gavcoin/Events/EventNewTranch/eventNewTranch.js
new file mode 100644
index 0000000000000000000000000000000000000000..16fa05351563c628529674dbed05de60c93184a7
--- /dev/null
+++ b/js/src/dapps/gavcoin/Events/EventNewTranch/eventNewTranch.js
@@ -0,0 +1,36 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import Event from '../Event';
+
+export default class EventNewTranch extends Component {
+  static propTypes = {
+    event: PropTypes.object
+  }
+
+  render () {
+    const { event } = this.props;
+    const { price } = event.params;
+
+    return (
+      <Event
+        event={ event }
+        price={ price } />
+    );
+  }
+}
diff --git a/js/src/dapps/gavcoin/Events/EventNewTranch/index.js b/js/src/dapps/gavcoin/Events/EventNewTranch/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..46d1d2df628980f4c890645aec0ff6f506aa42c8
--- /dev/null
+++ b/js/src/dapps/gavcoin/Events/EventNewTranch/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './eventNewTranch';
diff --git a/js/src/dapps/gavcoin/Events/EventRefund/eventRefund.js b/js/src/dapps/gavcoin/Events/EventRefund/eventRefund.js
new file mode 100644
index 0000000000000000000000000000000000000000..5c4ed656209db75738412d6c0786e9e980e3dabc
--- /dev/null
+++ b/js/src/dapps/gavcoin/Events/EventRefund/eventRefund.js
@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import Event from '../Event';
+
+export default class EventRefund extends Component {
+  static propTypes = {
+    event: PropTypes.object
+  }
+
+  render () {
+    const { event } = this.props;
+    const { buyer, price, amount } = event.params;
+
+    return (
+      <Event
+        event={ event }
+        fromAddress={ buyer }
+        value={ amount }
+        price={ price } />
+    );
+  }
+}
diff --git a/js/src/dapps/gavcoin/Events/EventRefund/index.js b/js/src/dapps/gavcoin/Events/EventRefund/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..bac0f20dccaa328101f8ab585f47ee2ce25ee610
--- /dev/null
+++ b/js/src/dapps/gavcoin/Events/EventRefund/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './eventRefund';
diff --git a/js/src/dapps/gavcoin/Events/EventTransfer/eventTransfer.js b/js/src/dapps/gavcoin/Events/EventTransfer/eventTransfer.js
new file mode 100644
index 0000000000000000000000000000000000000000..64e489cb0108ac0a0ca2dff580e19b76a82e36ab
--- /dev/null
+++ b/js/src/dapps/gavcoin/Events/EventTransfer/eventTransfer.js
@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import Event from '../Event';
+
+export default class EventTransfer extends Component {
+  static propTypes = {
+    event: PropTypes.object
+  }
+
+  render () {
+    const { event } = this.props;
+    const { from, to, value } = event.params;
+
+    return (
+      <Event
+        event={ event }
+        fromAddress={ from }
+        toAddress={ to }
+        value={ value } />
+    );
+  }
+}
diff --git a/js/src/dapps/gavcoin/Events/EventTransfer/index.js b/js/src/dapps/gavcoin/Events/EventTransfer/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..a75b45a0ac929ae1188e60a6da6e11cebcd916cc
--- /dev/null
+++ b/js/src/dapps/gavcoin/Events/EventTransfer/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './eventTransfer';
diff --git a/js/src/dapps/gavcoin/Events/events.css b/js/src/dapps/gavcoin/Events/events.css
new file mode 100644
index 0000000000000000000000000000000000000000..6fca623540a4205a4bd4960128b7c2ca73d2b4e6
--- /dev/null
+++ b/js/src/dapps/gavcoin/Events/events.css
@@ -0,0 +1,94 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.events {
+  padding: 4em 2em;
+}
+
+.list {
+  width: 100%;
+  border: none;
+  border-spacing: 0;
+}
+
+.list td {
+  vertical-align: top;
+  padding: 4px 0.5em;
+  max-height: 32px;
+}
+
+.event {
+  line-height: 32px;
+  vertical-align: top;
+}
+
+.blocknumber,
+.ethvalue,
+.gavvalue {
+  font-family: 'Roboto Mono', monospace;
+}
+
+.blocknumber,
+.gavvalue {
+  text-align: right;
+}
+
+.ethvalue {
+  text-align: center;
+}
+
+.type {
+}
+
+.account {
+}
+
+.account img {
+  margin-bottom: -11px;
+}
+
+.address {
+}
+
+.name {
+  text-transform: uppercase;
+}
+
+.event div {
+  display: inline;
+  margin-right: 1em;
+  vertical-align: top;
+}
+
+.mined {
+}
+
+.pending {
+  opacity: 0.5;
+}
+
+.buyin {
+}
+
+.refund {
+}
+
+.transfer {
+}
+
+.newtranch {
+  background: rgba(50, 250, 50, 0.1);
+}
diff --git a/js/src/dapps/gavcoin/Events/events.js b/js/src/dapps/gavcoin/Events/events.js
new file mode 100644
index 0000000000000000000000000000000000000000..cb287b3a7f3e85200ce401c2f635a0711d4a2be7
--- /dev/null
+++ b/js/src/dapps/gavcoin/Events/events.js
@@ -0,0 +1,158 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../parity';
+
+import EventBuyin from './EventBuyin';
+import EventNewTranch from './EventNewTranch';
+import EventRefund from './EventRefund';
+import EventTransfer from './EventTransfer';
+
+import styles from './events.css';
+
+export default class Events extends Component {
+  static childContextTypes = {
+    accounts: PropTypes.array
+  }
+
+  static contextTypes = {
+    contract: PropTypes.object.isRequired,
+    instance: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    accounts: PropTypes.array
+  }
+
+  state = {
+    allEvents: [],
+    minedEvents: [],
+    pendingEvents: []
+  }
+
+  componentDidMount () {
+    this.setupFilters();
+  }
+
+  render () {
+    return (
+      <div className={ styles.events }>
+        <table className={ styles.list }>
+          <tbody>
+            { this.renderEvents() }
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  renderEvents () {
+    const { allEvents } = this.state;
+
+    if (!allEvents.length) {
+      return null;
+    }
+
+    return allEvents
+      .map((event) => {
+        switch (event.type) {
+          case 'Buyin':
+            return <EventBuyin key={ event.key } event={ event } />;
+          case 'NewTranch':
+            return <EventNewTranch key={ event.key } event={ event } />;
+          case 'Refund':
+            return <EventRefund key={ event.key } event={ event } />;
+          case 'Transfer':
+            return <EventTransfer key={ event.key } event={ event } />;
+        }
+      });
+  }
+
+  getChildContext () {
+    const { accounts } = this.props;
+
+    return {
+      accounts
+    };
+  }
+
+  setupFilters () {
+    const { contract } = this.context;
+
+    const sortEvents = (a, b) => b.blockNumber.cmp(a.blockNumber) || b.logIndex.cmp(a.logIndex);
+    const logToEvent = (log) => {
+      const key = api.util.sha3(JSON.stringify(log));
+      const { blockNumber, logIndex, transactionHash, transactionIndex, params, type } = log;
+
+      return {
+        type: log.event,
+        state: type,
+        blockNumber,
+        logIndex,
+        transactionHash,
+        transactionIndex,
+        params,
+        key
+      };
+    };
+
+    const options = {
+      fromBlock: 0,
+      toBlock: 'pending',
+      limit: 50
+    };
+
+    contract.subscribe(null, options, (error, _logs) => {
+      if (error) {
+        console.error('setupFilters', error);
+        return;
+      }
+
+      if (!_logs.length) {
+        return;
+      }
+
+      const logs = _logs.map(logToEvent);
+
+      const minedEvents = logs
+        .filter((log) => log.state === 'mined')
+        .reverse()
+        .concat(this.state.minedEvents)
+        .sort(sortEvents);
+      const pendingEvents = logs
+        .filter((log) => log.state === 'pending')
+        .reverse()
+        .concat(this.state.pendingEvents.filter((event) => {
+          return !logs.find((log) => {
+            const isMined = (log.state === 'mined') && (log.transactionHash === event.transactionHash);
+            const isPending = (log.state === 'pending') && (log.key === event.key);
+
+            return isMined || isPending;
+          });
+        }))
+        .sort(sortEvents);
+      const allEvents = pendingEvents.concat(minedEvents);
+
+      this.setState({
+        allEvents,
+        minedEvents,
+        pendingEvents
+      });
+    });
+  }
+}
diff --git a/js/src/dapps/gavcoin/Events/index.js b/js/src/dapps/gavcoin/Events/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..88ad6d407c91e416ead5fef1cf8c93201cac529b
--- /dev/null
+++ b/js/src/dapps/gavcoin/Events/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './events';
diff --git a/js/src/dapps/gavcoin/IdentityIcon/identityIcon.css b/js/src/dapps/gavcoin/IdentityIcon/identityIcon.css
new file mode 100644
index 0000000000000000000000000000000000000000..2b645d8239b35335bcfb2bef2bd5f7eb64ab3bf4
--- /dev/null
+++ b/js/src/dapps/gavcoin/IdentityIcon/identityIcon.css
@@ -0,0 +1,23 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  margin-right: 0.5em;
+}
diff --git a/js/src/dapps/gavcoin/IdentityIcon/identityIcon.js b/js/src/dapps/gavcoin/IdentityIcon/identityIcon.js
new file mode 100644
index 0000000000000000000000000000000000000000..51f48d46ab3b54843b72899f8acea22afa947b9b
--- /dev/null
+++ b/js/src/dapps/gavcoin/IdentityIcon/identityIcon.js
@@ -0,0 +1,36 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../parity';
+import styles from './identityIcon.css';
+
+export default class IdentityIcon extends Component {
+  static propTypes = {
+    address: PropTypes.string.isRequired
+  }
+
+  render () {
+    const { address } = this.props;
+
+    return (
+      <img
+        className={ styles.icon }
+        src={ api.util.createIdentityImg(address, 4) } />
+    );
+  }
+}
diff --git a/js/src/dapps/gavcoin/IdentityIcon/index.js b/js/src/dapps/gavcoin/IdentityIcon/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..76c107bfb7540f707a9b2665aac9b52f9d7590fa
--- /dev/null
+++ b/js/src/dapps/gavcoin/IdentityIcon/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './identityIcon';
diff --git a/js/src/dapps/gavcoin/Loading/index.js b/js/src/dapps/gavcoin/Loading/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0468cab37dfd505cb0b1ef415376ca121ab9ca89
--- /dev/null
+++ b/js/src/dapps/gavcoin/Loading/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './loading';
diff --git a/js/src/dapps/gavcoin/Loading/loading.css b/js/src/dapps/gavcoin/Loading/loading.css
new file mode 100644
index 0000000000000000000000000000000000000000..3ec65400f0c7163a694534bf977420e74e05315c
--- /dev/null
+++ b/js/src/dapps/gavcoin/Loading/loading.css
@@ -0,0 +1,21 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.loading {
+  width: 100%;
+  text-align: center;
+  padding-top: 2em;
+}
diff --git a/js/src/dapps/gavcoin/Loading/loading.js b/js/src/dapps/gavcoin/Loading/loading.js
new file mode 100644
index 0000000000000000000000000000000000000000..9e00cc8f11aa4b123fe9e869fa93dbb013b22746
--- /dev/null
+++ b/js/src/dapps/gavcoin/Loading/loading.js
@@ -0,0 +1,31 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import { CircularProgress } from 'material-ui';
+
+import styles from './loading.css';
+
+export default class Loading extends Component {
+  render () {
+    return (
+      <div className={ styles.loading }>
+        <CircularProgress size={ 2 } />
+      </div>
+    );
+  }
+}
diff --git a/js/src/dapps/gavcoin/Status/index.js b/js/src/dapps/gavcoin/Status/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..44079b22485b96c83d7ed82e2491caf9e1c8c7b5
--- /dev/null
+++ b/js/src/dapps/gavcoin/Status/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './status';
diff --git a/js/src/dapps/gavcoin/Status/status.css b/js/src/dapps/gavcoin/Status/status.css
new file mode 100644
index 0000000000000000000000000000000000000000..bb541b178899fcee5a8cb93ab2e1b4602f45dfdc
--- /dev/null
+++ b/js/src/dapps/gavcoin/Status/status.css
@@ -0,0 +1,53 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.status {
+  background: rgba(25, 75, 125, 1);
+  color: rgba(255, 255, 255, 1);
+  padding: 4em 0 2em 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.title {
+  margin-top: 0;
+  font-weight: 300;
+  font-size: 2.5rem;
+  text-transform: uppercase;
+}
+
+.item {
+  flex: 0 1 30%;
+  width: 30%;
+  margin: 0 1.5%;
+  text-align: center;
+}
+
+.byline {
+  font-size: 1.25em;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.heading {
+  text-transform: uppercase;
+  letter-spacing: 0.25em;
+  font-size: 1.5em;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.hero {
+  font-size: 4em;
+}
diff --git a/js/src/dapps/gavcoin/Status/status.js b/js/src/dapps/gavcoin/Status/status.js
new file mode 100644
index 0000000000000000000000000000000000000000..81dd0cb1694ca42794f7269f9f165e9f1861bf82
--- /dev/null
+++ b/js/src/dapps/gavcoin/Status/status.js
@@ -0,0 +1,74 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { formatBlockNumber, formatCoins, formatEth } from '../format';
+
+import styles from './status.css';
+
+export default class Status extends Component {
+  static propTypes = {
+    address: PropTypes.string,
+    gavBalance: PropTypes.object,
+    blockNumber: PropTypes.object,
+    totalSupply: PropTypes.object,
+    remaining: PropTypes.object,
+    price: PropTypes.object,
+    children: PropTypes.node
+  }
+
+  render () {
+    const { blockNumber, gavBalance, totalSupply, remaining, price } = this.props;
+
+    if (!totalSupply) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.status }>
+        <div className={ styles.item }>
+          <div className={ styles.heading }>&nbsp;</div>
+          <div className={ styles.hero }>
+            { formatCoins(remaining, -1) }
+          </div>
+          <div className={ styles.byline }>
+            available for { formatEth(price) }ETH
+          </div>
+        </div>
+        <div className={ styles.item }>
+          <div className={ styles.heading }>GAVcoin</div>
+          <div className={ styles.hero }>
+            { formatCoins(totalSupply, -1) }
+          </div>
+          <div className={ styles.byline }>
+            total at { formatBlockNumber(blockNumber) }
+          </div>
+        </div>
+        <div className={ styles.item }>
+          <div className={ styles.heading }>&nbsp;</div>
+          <div className={ styles.hero }>
+            { formatCoins(gavBalance, -1) }
+          </div>
+          <div className={ styles.byline }>
+            coin balance
+          </div>
+        </div>
+        { this.props.children }
+      </div>
+    );
+  }
+}
diff --git a/js/src/dapps/gavcoin/format/index.js b/js/src/dapps/gavcoin/format/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5e32012d0afdddeb4daec1770c6071accac86a9a
--- /dev/null
+++ b/js/src/dapps/gavcoin/format/index.js
@@ -0,0 +1,52 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+
+import { api } from '../parity';
+
+const DIVISOR = 10 ** 6;
+const ZERO = new BigNumber(0);
+
+export function formatBlockNumber (blockNumber) {
+  return ZERO.eq(blockNumber || 0)
+    ? 'Pending'
+    : `#${blockNumber.toFormat()}`;
+}
+
+export function formatCoins (amount, decimals = 6) {
+  const adjusted = amount.div(DIVISOR);
+
+  if (decimals === -1) {
+    if (adjusted.gte(10000)) {
+      decimals = 0;
+    } else if (adjusted.gte(1000)) {
+      decimals = 1;
+    } else if (adjusted.gte(100)) {
+      decimals = 2;
+    } else if (adjusted.gte(10)) {
+      decimals = 3;
+    } else {
+      decimals = 4;
+    }
+  }
+
+  return adjusted.toFormat(decimals);
+}
+
+export function formatEth (eth, decimals = 3) {
+  return api.util.fromWei(eth).toFormat(decimals);
+}
diff --git a/js/src/dapps/gavcoin/parity.js b/js/src/dapps/gavcoin/parity.js
new file mode 100644
index 0000000000000000000000000000000000000000..f6d59f44d5771db93be36fa0ed8af8889d14af51
--- /dev/null
+++ b/js/src/dapps/gavcoin/parity.js
@@ -0,0 +1,21 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const { api } = window.parity;
+
+export {
+  api
+};
diff --git a/js/src/dapps/githubhint.html b/js/src/dapps/githubhint.html
new file mode 100644
index 0000000000000000000000000000000000000000..0084dd051c190bf63ec5432ae67e3a28251e9d87
--- /dev/null
+++ b/js/src/dapps/githubhint.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>GitHub Hint</title>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="vendor.js"></script>
+    <script src="commons.js"></script>
+    <script src="parity.js"></script>
+    <script src="githubhint.js"></script>
+  </body>
+</html>
diff --git a/js/src/dapps/githubhint.js b/js/src/dapps/githubhint.js
new file mode 100644
index 0000000000000000000000000000000000000000..b73702990620eb76b7e2445de939c8760b5ef614
--- /dev/null
+++ b/js/src/dapps/githubhint.js
@@ -0,0 +1,33 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import ReactDOM from 'react-dom';
+import React from 'react';
+
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
+import Application from './githubhint/Application';
+
+import '../../assets/fonts/Roboto/font.css';
+import '../../assets/fonts/RobotoMono/font.css';
+import './style.css';
+import './githubhint.html';
+
+ReactDOM.render(
+  <Application />,
+  document.querySelector('#container')
+);
diff --git a/js/src/dapps/githubhint/Application/application.css b/js/src/dapps/githubhint/Application/application.css
new file mode 100644
index 0000000000000000000000000000000000000000..aa4a68dc697bcf8c627783e72df38e8899ada11e
--- /dev/null
+++ b/js/src/dapps/githubhint/Application/application.css
@@ -0,0 +1,121 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  background: #333;
+  font-family: 'Roboto';
+  vertical-align: middle;
+  padding: 4em 0;
+  text-align: center;
+}
+
+.form {
+  text-align: right;
+  margin: 0 auto;
+  border-radius: 5px;
+  width: 44em;
+  color: #eee;
+}
+
+.box {
+  padding: 2em;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+  margin-bottom: 2em;
+}
+
+.buttons {
+  text-align: center;
+  margin: 0 auto 2em auto;
+}
+
+.box .buttons {
+  text-align: right;
+  margin: 2em 0 0 0;
+  position: relative;
+}
+
+.box .buttons .addressSelect {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.box .description {
+  margin: 0 0 2em 0;
+  text-align: center;
+  opacity: 0.75;
+}
+
+.progress {
+  margin: 2em 0 0 0;
+  opacity: 0.75;
+  text-align: center;
+}
+
+.statusHeader {
+  font-size: 1em;
+}
+
+.statusState, .statusError {
+  padding: 1em 0 0 0;
+}
+
+.statusError {
+  color: #f66;
+}
+
+.capture {
+}
+
+.capture * {
+  display: inline-block;
+  padding: 0.75em;
+  vertical-align: middle;
+  box-sizing: border-box;
+  width: 20em;
+}
+
+.capture input {
+  color: #333;
+  background: #eee;
+  border: none;
+  border-radius: 5px;
+  width: 100%;
+  font-size: 1em;
+  text-align: center;
+}
+
+.capture input[disabled] {
+  opacity: 0.5;
+}
+
+.capture input.error {
+  background: #fcc;
+}
+
+.hashError {
+  padding-top: 0.5em;
+  color: #f66;
+  text-align: center;
+}
+
+.hashOk {
+  padding-top: 0.5em;
+  opacity: 0.5;
+  text-align: center;
+}
diff --git a/js/src/dapps/githubhint/Application/application.js b/js/src/dapps/githubhint/Application/application.js
new file mode 100644
index 0000000000000000000000000000000000000000..ea7e760c588b314146dc3ebc6beb1ca4bc86e5ed
--- /dev/null
+++ b/js/src/dapps/githubhint/Application/application.js
@@ -0,0 +1,261 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import { api } from '../parity';
+import { attachInterface } from '../services';
+import Button from '../Button';
+import IdentityIcon from '../IdentityIcon';
+import Loading from '../Loading';
+
+import styles from './application.css';
+
+const INVALID_URL_HASH = '0xc5d2460186f7233c927e7db2dcc703c0e500b653ca82273b7bfad8045d85a470';
+const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
+
+export default class Application extends Component {
+  state = {
+    loading: true,
+    url: '',
+    urlError: null,
+    contentHash: '',
+    contentHashError: null,
+    registerBusy: false,
+    registerError: null,
+    registerState: ''
+  }
+
+  componentDidMount () {
+    attachInterface()
+      .then((state) => {
+        this.setState(state, () => {
+          this.setState({ loading: false });
+        });
+      });
+  }
+
+  render () {
+    const { loading } = this.state;
+
+    return loading
+      ? this.renderLoading()
+      : this.renderPage();
+  }
+
+  renderLoading () {
+    return (
+      <Loading />
+    );
+  }
+
+  renderPage () {
+    const { registerBusy, url, urlError, contentHash, contentHashError } = this.state;
+
+    return (
+      <div className={ styles.container }>
+        <div className={ styles.form }>
+          <div className={ styles.box }>
+            <div className={ styles.description }>
+              Provide a valid URL to register. The content information can be used in other contracts that allows for reverse lookups, e.g. image registries, dapp registries, etc.
+            </div>
+            <div className={ styles.capture }>
+              <input
+                type='text'
+                placeholder='http://domain/filename'
+                disabled={ registerBusy }
+                value={ url }
+                className={ urlError ? styles.error : null }
+                onChange={ this.onChangeUrl } />
+            </div>
+            <div className={ contentHashError ? styles.hashError : styles.hashOk }>
+              { contentHashError || contentHash }
+            </div>
+            { registerBusy ? this.renderProgress() : this.renderButtons() }
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderButtons () {
+    const { accounts, fromAddress, url, urlError, contentHashError } = this.state;
+    const account = accounts[fromAddress];
+
+    return (
+      <div className={ styles.buttons }>
+        <div className={ styles.addressSelect }>
+          <Button invert onClick={ this.onSelectFromAddress }>
+            <IdentityIcon address={ account.address } />
+            <div>{ account.name || account.address }</div>
+          </Button>
+        </div>
+        <Button
+          onClick={ this.onClickRegister }
+          disabled={ !!contentHashError || !!urlError || url.length === 0 }>register url</Button>
+      </div>
+    );
+  }
+
+  renderProgress () {
+    const { registerError, registerState } = this.state;
+
+    if (registerError) {
+      return (
+        <div className={ styles.progress }>
+          <div className={ styles.statusHeader }>
+            Your registration has encountered an error
+          </div>
+          <div className={ styles.statusError }>
+            { registerError }
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className={ styles.progress }>
+        <div className={ styles.statusHeader }>
+          Your URL is being registered
+        </div>
+        <div className={ styles.statusState }>
+          { registerState }
+        </div>
+      </div>
+    );
+  }
+
+  onClickContentHash = () => {
+    this.setState({ fileHash: false, commit: '' });
+  }
+
+  onClickFileHash = () => {
+    this.setState({ fileHash: true, commit: 0 });
+  }
+
+  onChangeUrl = (event) => {
+    const url = event.target.value;
+    let urlError = null;
+
+    if (url && url.length) {
+      var re = /^https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}/g;
+      urlError = re.test(url)
+        ? null
+        : 'not matching rexex';
+    }
+
+    this.setState({ url, urlError, contentHashError: 'hash lookup in progress' }, () => {
+      this.lookupHash();
+    });
+  }
+
+  onClickRegister = () => {
+    const { url, urlError, contentHash, contentHashError, fromAddress, instance } = this.state;
+
+    if (!!contentHashError || !!urlError || url.length === 0) {
+      return;
+    }
+
+    this.setState({ registerBusy: true, registerState: 'Estimating gas for the transaction' });
+
+    const values = [contentHash, url];
+    const options = { from: fromAddress };
+
+    instance
+      .hintURL.estimateGas(options, values)
+      .then((gas) => {
+        this.setState({ registerState: 'Gas estimated, Posting transaction to the network' });
+
+        const gasPassed = gas.mul(1.2);
+        options.gas = gasPassed.toFixed(0);
+        console.log(`gas estimated at ${gas.toFormat(0)}, passing ${gasPassed.toFormat(0)}`);
+
+        return instance.hintURL.postTransaction(options, values);
+      })
+      .then((signerRequestId) => {
+        this.setState({ signerRequestId, registerState: 'Transaction posted, Waiting for transaction authorization' });
+
+        return api.pollMethod('eth_checkRequest', signerRequestId);
+      })
+      .then((txHash) => {
+        this.setState({ txHash, registerState: 'Transaction authorized, Waiting for network confirmations' });
+
+        return api.pollMethod('eth_getTransactionReceipt', txHash, (receipt) => {
+          if (!receipt || !receipt.blockNumber || receipt.blockNumber.eq(0)) {
+            return false;
+          }
+
+          return true;
+        });
+      })
+      .then((txReceipt) => {
+        this.setState({ txReceipt, registerBusy: false, registerState: 'Network confirmed, Received transaction receipt', url: '', contentHash: '' });
+      })
+      .catch((error) => {
+        console.error('onSend', error);
+        this.setState({ registerError: error.message });
+      });
+  }
+
+  onSelectFromAddress = () => {
+    const { accounts, fromAddress } = this.state;
+    const addresses = Object.keys(accounts);
+    let index = 0;
+
+    addresses.forEach((address, _index) => {
+      if (address === fromAddress) {
+        index = _index;
+      }
+    });
+
+    index++;
+    if (index >= addresses.length) {
+      index = 0;
+    }
+
+    this.setState({ fromAddress: addresses[index] });
+  }
+
+  lookupHash () {
+    const { url, instance } = this.state;
+
+    api.ethcore
+      .hashContent(url)
+      .then((contentHash) => {
+        console.log('lookupHash', contentHash);
+        if (contentHash === INVALID_URL_HASH) {
+          this.setState({ contentHashError: 'invalid url endpoint', contentHash: null });
+          return;
+        }
+
+        instance.entries
+          .call({}, [contentHash])
+          .then(([accountSlashRepo, commit, owner]) => {
+            console.log('lookupHash', accountSlashRepo, api.util.bytesToHex(commit), owner);
+
+            if (owner !== ZERO_ADDRESS) {
+              this.setState({ contentHashError: contentHash, contentHash: null });
+            } else {
+              this.setState({ contentHashError: null, contentHash });
+            }
+          });
+      })
+      .catch((error) => {
+        console.error('lookupHash', error);
+        this.setState({ contentHashError: error.message, contentHash: null });
+      });
+  }
+}
diff --git a/js/src/dapps/githubhint/Application/index.js b/js/src/dapps/githubhint/Application/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..236578226a80e822593c37acd1daad1c649950e1
--- /dev/null
+++ b/js/src/dapps/githubhint/Application/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './application';
diff --git a/js/src/dapps/githubhint/Button/button.css b/js/src/dapps/githubhint/Button/button.css
new file mode 100644
index 0000000000000000000000000000000000000000..28519094b2e38c246489b6691585be107a67d462
--- /dev/null
+++ b/js/src/dapps/githubhint/Button/button.css
@@ -0,0 +1,56 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.button {
+  background: #08a;
+  color: white;
+  border-radius: 5px;
+  font-size: 1em;
+  line-height: 24px;
+  height: 24px;
+  padding: 0.75em 1.5em;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+}
+
+.button.first {
+  border-radius: 5px 0 0 5px;
+}
+
+.button.middle {
+  border-radius: 0;
+}
+
+.button.last {
+  border-radius: 0 5px 5px 0;
+}
+
+.button.disabled {
+  opacity: 0.25;
+  cursor: default;
+}
+
+.button.inverse {
+  color: #08a;
+  background: white;
+}
+
+.button * {
+  display: inline-block;
+  vertical-align: top;
+}
diff --git a/js/src/dapps/githubhint/Button/button.js b/js/src/dapps/githubhint/Button/button.js
new file mode 100644
index 0000000000000000000000000000000000000000..42fca1af7d432905a797bb468ed3622388adfc7f
--- /dev/null
+++ b/js/src/dapps/githubhint/Button/button.js
@@ -0,0 +1,53 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './button.css';
+
+export default class Button extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    invert: PropTypes.bool,
+    first: PropTypes.bool,
+    last: PropTypes.bool,
+    middle: PropTypes.bool,
+    onClick: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { children, className, disabled, invert, first, last, middle } = this.props;
+    const classes = `${styles.button} ${disabled ? styles.disabled : ''} ${invert ? styles.inverse : ''} ${first ? styles.first : ''} ${last ? styles.last : ''} ${middle ? styles.middle : ''} ${className}`;
+
+    return (
+      <div className={ classes } onTouchTap={ this.onClick }>
+        { children }
+      </div>
+    );
+  }
+
+  onClick = (event) => {
+    const { disabled, onClick } = this.props;
+
+    if (disabled) {
+      return;
+    }
+
+    onClick(event);
+  }
+}
diff --git a/js/src/dapps/githubhint/Button/index.js b/js/src/dapps/githubhint/Button/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f69a65e3d53fd0e216cb4aefcbcd551417281e09
--- /dev/null
+++ b/js/src/dapps/githubhint/Button/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './button';
diff --git a/js/src/dapps/githubhint/IdentityIcon/identityIcon.css b/js/src/dapps/githubhint/IdentityIcon/identityIcon.css
new file mode 100644
index 0000000000000000000000000000000000000000..3fa1df99e4d29224b7dd7cc02fdaac2e68e490c7
--- /dev/null
+++ b/js/src/dapps/githubhint/IdentityIcon/identityIcon.css
@@ -0,0 +1,23 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  margin-right: 0.5em;
+}
diff --git a/js/src/dapps/githubhint/IdentityIcon/identityIcon.js b/js/src/dapps/githubhint/IdentityIcon/identityIcon.js
new file mode 100644
index 0000000000000000000000000000000000000000..0bc86731d4544432cae2af30ee573670fff5f9f7
--- /dev/null
+++ b/js/src/dapps/githubhint/IdentityIcon/identityIcon.js
@@ -0,0 +1,36 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../parity';
+import styles from './identityIcon.css';
+
+export default class IdentityIcon extends Component {
+  static propTypes = {
+    address: PropTypes.string.isRequired
+  }
+
+  render () {
+    const { address } = this.props;
+
+    return (
+      <img
+        className={ styles.icon }
+        src={ api.util.createIdentityImg(address, 3) } />
+    );
+  }
+}
diff --git a/js/src/dapps/githubhint/IdentityIcon/index.js b/js/src/dapps/githubhint/IdentityIcon/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..76c107bfb7540f707a9b2665aac9b52f9d7590fa
--- /dev/null
+++ b/js/src/dapps/githubhint/IdentityIcon/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './identityIcon';
diff --git a/js/src/dapps/githubhint/Loading/index.js b/js/src/dapps/githubhint/Loading/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0468cab37dfd505cb0b1ef415376ca121ab9ca89
--- /dev/null
+++ b/js/src/dapps/githubhint/Loading/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './loading';
diff --git a/js/src/dapps/githubhint/Loading/loading.css b/js/src/dapps/githubhint/Loading/loading.css
new file mode 100644
index 0000000000000000000000000000000000000000..b77d1a23725749001e0ff1e0675844afefa37aa8
--- /dev/null
+++ b/js/src/dapps/githubhint/Loading/loading.css
@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.loading {
+  width: 100%;
+  text-align: center;
+  padding-top: 5em;
+  font-size: 2em;
+  color: #999;
+}
diff --git a/js/src/dapps/githubhint/Loading/loading.js b/js/src/dapps/githubhint/Loading/loading.js
new file mode 100644
index 0000000000000000000000000000000000000000..b884597d763299230e7f956d2778783141f41feb
--- /dev/null
+++ b/js/src/dapps/githubhint/Loading/loading.js
@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import styles from './loading.css';
+
+export default class Loading extends Component {
+  render () {
+    return (
+      <div className={ styles.loading }>
+        Attaching to contract ...
+      </div>
+    );
+  }
+}
diff --git a/js/src/dapps/githubhint/parity.js b/js/src/dapps/githubhint/parity.js
new file mode 100644
index 0000000000000000000000000000000000000000..f6d59f44d5771db93be36fa0ed8af8889d14af51
--- /dev/null
+++ b/js/src/dapps/githubhint/parity.js
@@ -0,0 +1,21 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const { api } = window.parity;
+
+export {
+  api
+};
diff --git a/js/src/dapps/githubhint/services.js b/js/src/dapps/githubhint/services.js
new file mode 100644
index 0000000000000000000000000000000000000000..ee198ff6dfa6f14be576381b22ccca8f27474048
--- /dev/null
+++ b/js/src/dapps/githubhint/services.js
@@ -0,0 +1,64 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import * as abis from '../../contracts/abi';
+import { api } from './parity';
+
+export function attachInterface () {
+  return api.ethcore
+    .registryAddress()
+    .then((registryAddress) => {
+      console.log(`the registry was found at ${registryAddress}`);
+
+      const registry = api.newContract(abis.registry, registryAddress).instance;
+
+      return Promise
+        .all([
+          registry.getAddress.call({}, [api.util.sha3('githubhint'), 'A']),
+          api.personal.listAccounts(),
+          api.personal.accountsInfo()
+        ]);
+    })
+    .then(([address, addresses, accountsInfo]) => {
+      console.log(`githubhint was found at ${address}`);
+
+      const contract = api.newContract(abis.githubhint, address);
+      const accounts = addresses.reduce((obj, address) => {
+        const info = accountsInfo[address];
+
+        return Object.assign(obj, {
+          [address]: {
+            address,
+            name: info.name || 'Unnamed',
+            uuid: info.uuid
+          }
+        });
+      }, {});
+      const fromAddress = Object.keys(accounts)[0];
+
+      return {
+        accounts,
+        address,
+        accountsInfo,
+        contract,
+        instance: contract.instance,
+        fromAddress
+      };
+    })
+    .catch((error) => {
+      console.error('attachInterface', error);
+    });
+}
diff --git a/js/src/dapps/registry.html b/js/src/dapps/registry.html
new file mode 100644
index 0000000000000000000000000000000000000000..21b09dc12f31ea96dbca3600e3bb634b04fdf8d4
--- /dev/null
+++ b/js/src/dapps/registry.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Token Registry</title>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="vendor.js"></script>
+    <script src="commons.js"></script>
+    <script src="parity.js"></script>
+    <script src="registry.js"></script>
+  </body>
+</html>
diff --git a/js/src/dapps/registry.js b/js/src/dapps/registry.js
new file mode 100644
index 0000000000000000000000000000000000000000..ebcff155a1ff79b68b6e33f939990d85131ef8ae
--- /dev/null
+++ b/js/src/dapps/registry.js
@@ -0,0 +1,37 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
+import store from './registry/store';
+import Container from './registry/Container';
+
+import '../../assets/fonts/Roboto/font.css';
+import '../../assets/fonts/RobotoMono/font.css';
+import './style.css';
+import './registry.html';
+
+ReactDOM.render(
+  <Provider store={ store }>
+    <Container />
+  </Provider>,
+  document.querySelector('#container')
+);
diff --git a/js/src/dapps/registry/Accounts/accounts.css b/js/src/dapps/registry/Accounts/accounts.css
new file mode 100644
index 0000000000000000000000000000000000000000..344a92867e27687ad450976dc9f038d6615efffc
--- /dev/null
+++ b/js/src/dapps/registry/Accounts/accounts.css
@@ -0,0 +1,38 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.button {
+  /* TODO remove !important once material design lite is used */
+  padding: 0 !important;
+}
+
+.icon {
+  /* TODO remove !important once material design lite is used */
+  margin: 0 !important;
+  width: 30px !important;
+  height: 30px !important;
+}
+
+.menuIcon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.menuText {
+  display: inline-block;
+  line-height: 24px;
+  vertical-align: top;
+}
diff --git a/js/src/dapps/registry/Accounts/accounts.js b/js/src/dapps/registry/Accounts/accounts.js
new file mode 100644
index 0000000000000000000000000000000000000000..fe262a84ffc51eac8d68ccd63a635bb072ffcdbc
--- /dev/null
+++ b/js/src/dapps/registry/Accounts/accounts.js
@@ -0,0 +1,76 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import IconMenu from 'material-ui/IconMenu';
+import IconButton from 'material-ui/IconButton/IconButton';
+import AccountIcon from 'material-ui/svg-icons/action/account-circle';
+import MenuItem from 'material-ui/MenuItem';
+
+import IdentityIcon from '../IdentityIcon';
+import renderAddress from '../ui/address';
+
+import styles from './accounts.css';
+
+export default class Accounts extends Component {
+
+  static propTypes = {
+    actions: PropTypes.object.isRequired,
+    all: PropTypes.object.isRequired,
+    selected: PropTypes.object
+  }
+
+  render () {
+    const { all, selected } = this.props;
+
+    const accountsButton = (
+      <IconButton className={ styles.button }>
+        { selected
+          ? (<IdentityIcon className={ styles.icon } address={ selected.address } />)
+          : (<AccountIcon className={ styles.icon } color='white' />)
+        }
+      </IconButton>);
+
+    return (
+      <IconMenu
+        value={ selected ? this.renderAccount(selected) : null }
+        onChange={ this.onAccountSelect }
+        iconButtonElement={ accountsButton }
+        animated={ false }
+      >
+        { Object.values(all).map(this.renderAccount) }
+      </IconMenu>
+    );
+  }
+
+  renderAccount = (account) => {
+    const { all, selected } = this.props;
+    const isSelected = selected && selected.address === account.address;
+
+    return (
+      <MenuItem
+        key={ account.address } value={ account.address }
+        checked={ isSelected } insetChildren={ !isSelected }
+      >
+        { renderAddress(account.address, all, {}) }
+      </MenuItem>
+    );
+  };
+
+  onAccountSelect = (e, address) => {
+    this.props.actions.select(address);
+  };
+}
diff --git a/js/src/dapps/registry/Accounts/actions.js b/js/src/dapps/registry/Accounts/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..4f2bd3c7078c6d2ba2d2f12fbe831b75add22cfb
--- /dev/null
+++ b/js/src/dapps/registry/Accounts/actions.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export const select = (address) => ({ type: 'accounts select', address });
diff --git a/js/src/dapps/registry/Accounts/index.js b/js/src/dapps/registry/Accounts/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e9be1d557338144d69c09ec2d7adc0d2386d3999
--- /dev/null
+++ b/js/src/dapps/registry/Accounts/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './accounts';
diff --git a/js/src/dapps/registry/Application/application.css b/js/src/dapps/registry/Application/application.css
new file mode 100644
index 0000000000000000000000000000000000000000..c5a54040e0e0fed3223279c4283f906f96ca9831
--- /dev/null
+++ b/js/src/dapps/registry/Application/application.css
@@ -0,0 +1,39 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin: 0; padding: .3em 1em;
+  color: #fff;
+  background-color: #333;
+}
+
+.header h1 {
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 50px;
+  font-size: 200%;
+  text-transform: uppercase;
+}
+
+.address {
+  margin-bottom: 0;
+  padding: 1rem;
+  font-size: 80%;
+  background-color: #f0f0f0;
+}
diff --git a/js/src/dapps/registry/Application/application.js b/js/src/dapps/registry/Application/application.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d3d8d582d853b2c1a04dfb7a84d49bbc42ab99d
--- /dev/null
+++ b/js/src/dapps/registry/Application/application.js
@@ -0,0 +1,88 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
+const muiTheme = getMuiTheme(lightBaseTheme);
+
+import CircularProgress from 'material-ui/CircularProgress';
+import styles from './application.css';
+import Accounts from '../Accounts';
+import Events from '../Events';
+import Lookup from '../Lookup';
+import Names from '../Names';
+import Records from '../Records';
+
+const nullable = (type) => React.PropTypes.oneOfType([ React.PropTypes.oneOf([ null ]), type ]);
+
+export default class Application extends Component {
+  static childContextTypes = {
+    muiTheme: PropTypes.object.isRequired,
+    api: PropTypes.object.isRequired
+  };
+  getChildContext () {
+    return { muiTheme, api: window.parity.api };
+  }
+
+  static propTypes = {
+    actions: PropTypes.object.isRequired,
+    accounts: PropTypes.object.isRequired,
+    contacts: PropTypes.object.isRequired,
+    contract: nullable(PropTypes.object.isRequired),
+    fee: nullable(PropTypes.object.isRequired),
+    lookup: PropTypes.object.isRequired,
+    events: PropTypes.object.isRequired,
+    names: PropTypes.object.isRequired,
+    records: PropTypes.object.isRequired
+  };
+
+  render () {
+    const {
+      actions,
+      accounts, contacts,
+      contract, fee,
+      lookup,
+      events,
+      names,
+      records
+    } = this.props;
+
+    return (
+      <div>
+        <div className={ styles.header }>
+          <h1>RΞgistry</h1>
+          <Accounts { ...accounts } actions={ actions.accounts } />
+        </div>
+        { contract && fee ? (
+          <div>
+            <Lookup { ...lookup } accounts={ accounts.all } contacts={ contacts } actions={ actions.lookup } />
+            <Names { ...names } fee={ fee } actions={ actions.names } />
+            <Records { ...records } actions={ actions.records } />
+            <Events { ...events } accounts={ accounts.all } contacts={ contacts } actions={ actions.events } />
+            <p className={ styles.address }>
+              The Registry is provided by the contract at <code>{ contract.address }.</code>
+            </p>
+          </div>
+        ) : (
+          <CircularProgress size={ 1 } />
+        ) }
+      </div>
+    );
+  }
+
+}
diff --git a/js/src/dapps/registry/Application/index.js b/js/src/dapps/registry/Application/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..236578226a80e822593c37acd1daad1c649950e1
--- /dev/null
+++ b/js/src/dapps/registry/Application/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './application';
diff --git a/js/src/dapps/registry/Container.js b/js/src/dapps/registry/Container.js
new file mode 100644
index 0000000000000000000000000000000000000000..1464320e63c04fa2da2ff67310d334d5ae239bf0
--- /dev/null
+++ b/js/src/dapps/registry/Container.js
@@ -0,0 +1,66 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import Application from './Application';
+import * as actions from './actions';
+
+const nullable = (type) => React.PropTypes.oneOfType([ React.PropTypes.oneOf([ null ]), type ]);
+
+class Container extends Component {
+  static propTypes = {
+    actions: PropTypes.object.isRequired,
+    accounts: PropTypes.object.isRequired,
+    contacts: PropTypes.object.isRequired,
+    contract: nullable(PropTypes.object.isRequired),
+    owner: nullable(PropTypes.string.isRequired),
+    fee: nullable(PropTypes.object.isRequired),
+    lookup: PropTypes.object.isRequired,
+    events: PropTypes.object.isRequired
+  };
+
+  componentDidMount () {
+    Promise.all([
+      this.props.actions.addresses.fetch(),
+      this.props.actions.fetchContract()
+    ]).then(() => {
+      this.props.actions.events.subscribe('Reserved');
+    });
+  }
+
+  render () {
+    return (<Application { ...this.props } />);
+  }
+}
+
+export default connect(
+  // redux -> react connection
+  (state) => state,
+  // react -> redux connection
+  (dispatch) => {
+    const bound = bindActionCreators(actions, dispatch);
+    bound.addresses = bindActionCreators(actions.addresses, dispatch);
+    bound.accounts = bindActionCreators(actions.accounts, dispatch);
+    bound.lookup = bindActionCreators(actions.lookup, dispatch);
+    bound.events = bindActionCreators(actions.events, dispatch);
+    bound.names = bindActionCreators(actions.names, dispatch);
+    bound.records = bindActionCreators(actions.records, dispatch);
+    return { actions: bound };
+  }
+)(Container);
diff --git a/js/src/dapps/registry/Events/actions.js b/js/src/dapps/registry/Events/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..e12c98c4f67b8d343c444a1b68817ca27fdcf3eb
--- /dev/null
+++ b/js/src/dapps/registry/Events/actions.js
@@ -0,0 +1,85 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { api } from '../parity.js';
+
+export const start = (name, from, to) => ({ type: 'events subscribe start', name, from, to });
+export const fail = (name) => ({ type: 'events subscribe fail', name });
+export const success = (name, subscription) => ({ type: 'events subscribe success', name, subscription });
+
+export const event = (name, event) => ({ type: 'events event', name, event });
+
+export const subscribe = (name, from = 0, to = 'pending') =>
+  (dispatch, getState) => {
+    const { contract } = getState();
+    if (!contract) return;
+    const opt = { fromBlock: from, toBlock: to, limit: 50 };
+
+    dispatch(start(name, from, to));
+
+    contract
+      .subscribe(name, opt, (error, events) => {
+        if (error) {
+          console.error(`error receiving events for ${name}`, error);
+          return;
+        }
+
+        events.forEach((e) => {
+          api.eth.getBlockByNumber(e.blockNumber)
+          .then((block) => {
+            const data = {
+              type: name,
+              key: '' + e.transactionHash + e.logIndex,
+              state: e.type,
+              block: e.blockNumber,
+              index: e.logIndex,
+              transaction: e.transactionHash,
+              parameters: e.params,
+              timestamp: block.timestamp
+            };
+            dispatch(event(name, data));
+          })
+          .catch((err) => {
+            console.error(`could not fetch block ${e.blockNumber}.`);
+            console.error(err);
+          });
+        });
+      })
+      .then((subscriptionId) => {
+        dispatch(success(name, subscriptionId));
+      })
+      .catch((error) => {
+        console.error('event subscription failed', error);
+        dispatch(fail(name));
+      });
+  };
+
+export const unsubscribe = (name) =>
+  (dispatch, getState) => {
+    const state = getState();
+    if (!state.contract) return;
+    const subscriptions = state.events.subscriptions;
+    if (!(name in subscriptions) || subscriptions[name] === null) return;
+
+    state.contract
+      .unsubscribe(subscriptions[name])
+      .then(() => {
+        dispatch({ type: 'events unsubscribe', name });
+      })
+      .catch((error) => {
+        console.error('event unsubscribe failed', error);
+      });
+  };
diff --git a/js/src/dapps/registry/Events/events.css b/js/src/dapps/registry/Events/events.css
new file mode 100644
index 0000000000000000000000000000000000000000..66277dae3d56fdd575af12aba9c445dd2e94a40b
--- /dev/null
+++ b/js/src/dapps/registry/Events/events.css
@@ -0,0 +1,51 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.events {
+  margin: 1em;
+}
+
+.options {
+  margin: 0 .5em;
+}
+
+.reserved, .dropped, .dataChanged {
+}
+
+.reserved abbr, .dropped abbr {
+  cursor: help;
+}
+
+.pending {
+  opacity: .6;
+}
+
+.owner code {
+  display: inline-block;
+  vertical-align: top;
+  line-height: 32px;
+  word-wrap: break-word;
+}
+
+.eventsList {
+  width: 100%;
+  boder: none;
+}
+
+.eventsList td {
+  padding: 0.25em 0.5em;
+}
diff --git a/js/src/dapps/registry/Events/events.js b/js/src/dapps/registry/Events/events.js
new file mode 100644
index 0000000000000000000000000000000000000000..ffb1fc9190a291884bf6f27a79e5cb6aced9729e
--- /dev/null
+++ b/js/src/dapps/registry/Events/events.js
@@ -0,0 +1,167 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { Card, CardHeader, CardActions, CardText } from 'material-ui/Card';
+import Toggle from 'material-ui/Toggle';
+import moment from 'moment';
+
+import { bytesToHex } from '../parity';
+import renderHash from '../ui/hash';
+import renderAddress from '../ui/address';
+import styles from './events.css';
+
+const inlineButton = {
+  display: 'inline-block',
+  width: 'auto',
+  marginRight: '1em'
+};
+
+const renderStatus = (timestamp, isPending) => {
+  timestamp = moment(timestamp);
+  if (isPending) {
+    return (<abbr title='This transaction has not been synced with the network yet.'>pending</abbr>);
+  }
+  return (
+    <time dateTime={ timestamp.toISOString() }>
+      <abbr title={ timestamp.format('MMMM Do YYYY, h:mm:ss a') }>{ timestamp.fromNow() }</abbr>
+    </time>
+  );
+};
+
+const renderEvent = (classNames, verb) => (e, accounts, contacts) => {
+  const classes = e.state === 'pending'
+    ? classNames + ' ' + styles.pending : classNames;
+
+  return (
+    <tr key={ e.key } className={ classes }>
+      <td>{ renderAddress(e.parameters.owner, accounts, contacts) }</td>
+      <td><abbr title={ e.transaction }>{ verb }</abbr></td>
+      <td><code>{ renderHash(bytesToHex(e.parameters.name)) }</code></td>
+      <td>{ renderStatus(e.timestamp, e.state === 'pending') }</td>
+    </tr>
+  );
+};
+
+const renderDataChanged = (e, accounts, contacts) => {
+  let classNames = styles.dataChanged;
+  if (e.state === 'pending') {
+    classNames += ' ' + styles.pending;
+  }
+
+  return (
+    <tr key={ e.key } className={ classNames }>
+      <td>{ renderAddress(e.parameters.owner, accounts, contacts) }</td>
+      <td><abbr title={ e.transaction }>updated</abbr></td>
+      <td>
+        key <code>{ new Buffer(e.parameters.plainKey).toString('utf8') }</code> of <code>{ renderHash(bytesToHex(e.parameters.name)) }</code>
+      </td>
+      <td>{ renderStatus(e.timestamp, e.state === 'pending') }</td>
+    </tr>
+  );
+};
+
+const eventTypes = {
+  Reserved: renderEvent(styles.reserved, 'reserved'),
+  Dropped: renderEvent(styles.dropped, 'dropped'),
+  DataChanged: renderDataChanged
+};
+
+export default class Events extends Component {
+
+  static propTypes = {
+    actions: PropTypes.object.isRequired,
+    subscriptions: PropTypes.object.isRequired,
+    pending: PropTypes.object.isRequired,
+    events: PropTypes.array.isRequired,
+    accounts: PropTypes.object.isRequired,
+    contacts: PropTypes.object.isRequired
+  }
+
+  render () {
+    const { subscriptions, pending, accounts, contacts } = this.props;
+    return (
+      <Card className={ styles.events }>
+        <CardHeader title='Event Log' />
+        <CardActions className={ styles.options }>
+          <Toggle
+            label='Reserved'
+            toggled={ subscriptions.Reserved !== null }
+            disabled={ pending.Reserved }
+            onToggle={ this.onReservedToggle }
+            style={ inlineButton }
+          />
+          <Toggle
+            label='Dropped'
+            toggled={ subscriptions.Dropped !== null }
+            disabled={ pending.Dropped }
+            onToggle={ this.onDroppedToggle }
+            style={ inlineButton }
+          />
+          <Toggle
+            label='DataChanged'
+            toggled={ subscriptions.DataChanged !== null }
+            disabled={ pending.DataChanged }
+            onToggle={ this.onDataChangedToggle }
+            style={ inlineButton }
+          />
+        </CardActions>
+        <CardText>
+          <table className={ styles.eventsList }>
+            <tbody>
+              {
+                this.props.events
+                  .filter((e) => eventTypes[e.type])
+                  .map((e) => eventTypes[e.type](e, accounts, contacts))
+              }
+            </tbody>
+          </table>
+        </CardText>
+      </Card>
+    );
+  }
+
+  onReservedToggle = (e, isToggled) => {
+    const { pending, subscriptions, actions } = this.props;
+    if (!pending.Reserved) {
+      if (isToggled && subscriptions.Reserved === null) {
+        actions.subscribe('Reserved');
+      } else if (!isToggled && subscriptions.Reserved !== null) {
+        actions.unsubscribe('Reserved');
+      }
+    }
+  };
+  onDroppedToggle = (e, isToggled) => {
+    const { pending, subscriptions, actions } = this.props;
+    if (!pending.Dropped) {
+      if (isToggled && subscriptions.Dropped === null) {
+        actions.subscribe('Dropped');
+      } else if (!isToggled && subscriptions.Dropped !== null) {
+        actions.unsubscribe('Dropped');
+      }
+    }
+  };
+  onDataChangedToggle = (e, isToggled) => {
+    const { pending, subscriptions, actions } = this.props;
+    if (!pending.DataChanged) {
+      if (isToggled && subscriptions.DataChanged === null) {
+        actions.subscribe('DataChanged');
+      } else if (!isToggled && subscriptions.DataChanged !== null) {
+        actions.unsubscribe('DataChanged');
+      }
+    }
+  };
+}
diff --git a/js/src/dapps/registry/Events/index.js b/js/src/dapps/registry/Events/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..15d43c375c19b9129180ccf0e1162a453353ec5c
--- /dev/null
+++ b/js/src/dapps/registry/Events/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './events.js';
diff --git a/js/src/dapps/registry/Events/reducers.js b/js/src/dapps/registry/Events/reducers.js
new file mode 100644
index 0000000000000000000000000000000000000000..6ff0011d34fe42c7ad16f0dbd00c4ab36e703cc0
--- /dev/null
+++ b/js/src/dapps/registry/Events/reducers.js
@@ -0,0 +1,76 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const initialState = {
+  subscriptions: {
+    Reserved: null,
+    Dropped: null,
+    DataChanged: null
+  },
+  pending: {
+    Reserved: false,
+    Dropped: false,
+    DataChanged: false
+  },
+  events: []
+};
+
+const sortEvents = (a, b) => {
+  if (a.state === 'pending' && b.state !== 'pending') return -1;
+  if (a.state !== 'pending' && b.state === 'pending') return 1;
+  const d = b.block.minus(a.block).toFixed(0);
+  if (d === 0) return b.index.minus(a.index).toFixed(0);
+  return d;
+};
+
+export default (state = initialState, action) => {
+  if (!(action.name in state.subscriptions)) { // invalid event name
+    return state;
+  }
+
+  if (action.type === 'events subscribe start') {
+    return { ...state, pending: { ...state.pending, [action.name]: true } };
+  }
+  if (action.type === 'events subscribe fail') {
+    return { ...state, pending: { ...state.pending, [action.name]: false } };
+  }
+  if (action.type === 'events subscribe success') {
+    return {
+      ...state,
+      pending: { ...state.pending, [action.name]: false },
+      subscriptions: { ...state.subscriptions, [action.name]: action.subscription }
+    };
+  }
+
+  if (action.type === 'events unsubscribe') {
+    return {
+      ...state,
+      pending: { ...state.pending, [action.name]: false },
+      subscriptions: { ...state.subscriptions, [action.name]: null },
+      events: state.events.filter((event) => event.type !== action.name)
+    };
+  }
+
+  if (action.type === 'events event') {
+    return { ...state, events: state.events
+      .filter((event) => event.key !== action.event.key)
+      .concat(action.event)
+      .sort(sortEvents)
+    };
+  }
+
+  return state;
+};
diff --git a/js/src/dapps/registry/IdentityIcon/identityIcon.css b/js/src/dapps/registry/IdentityIcon/identityIcon.css
new file mode 100644
index 0000000000000000000000000000000000000000..3fa1df99e4d29224b7dd7cc02fdaac2e68e490c7
--- /dev/null
+++ b/js/src/dapps/registry/IdentityIcon/identityIcon.css
@@ -0,0 +1,23 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  margin-right: 0.5em;
+}
diff --git a/js/src/dapps/registry/IdentityIcon/identityIcon.js b/js/src/dapps/registry/IdentityIcon/identityIcon.js
new file mode 100644
index 0000000000000000000000000000000000000000..e4baf27057d9d7180ae6f908b27283b129234658
--- /dev/null
+++ b/js/src/dapps/registry/IdentityIcon/identityIcon.js
@@ -0,0 +1,39 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../parity';
+import styles from './identityIcon.css';
+
+export default class IdentityIcon extends Component {
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    style: PropTypes.object
+  }
+
+  render () {
+    const { address, className, style } = this.props;
+
+    return (
+      <img
+        className={ styles.icon + ' ' + className }
+        style={ style }
+        src={ api.util.createIdentityImg(address, 3) } />
+    );
+  }
+}
diff --git a/js/src/dapps/registry/IdentityIcon/index.js b/js/src/dapps/registry/IdentityIcon/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..76c107bfb7540f707a9b2665aac9b52f9d7590fa
--- /dev/null
+++ b/js/src/dapps/registry/IdentityIcon/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './identityIcon';
diff --git a/js/src/dapps/registry/Lookup/actions.js b/js/src/dapps/registry/Lookup/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..a7df875854fef8bdc5b045d02d9cdb9c222945c3
--- /dev/null
+++ b/js/src/dapps/registry/Lookup/actions.js
@@ -0,0 +1,42 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { sha3 } from '../parity.js';
+
+export const clear = () => ({ type: 'lookup clear' });
+
+export const start = (name, key) => ({ type: 'lookup start', name, key });
+
+export const success = (address) => ({ type: 'lookup success', result: address });
+
+export const fail = () => ({ type: 'lookup error' });
+
+export const lookup = (name, key) => (dispatch, getState) => {
+  const { contract } = getState();
+  if (!contract) return;
+  const getAddress = contract.functions
+    .find((f) => f.name === 'getAddress');
+
+  name = name.toLowerCase();
+  dispatch(start(name, key));
+  getAddress.call({}, [sha3(name), key])
+    .then((address) => dispatch(success(address)))
+    .catch((err) => {
+      console.error(`could not lookup ${key} for ${name}`);
+      if (err) console.error(err.stack);
+      dispatch(fail());
+    });
+};
diff --git a/js/src/dapps/registry/Lookup/index.js b/js/src/dapps/registry/Lookup/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f4ade7c001e38d32a4d0460f88e6817c2309e075
--- /dev/null
+++ b/js/src/dapps/registry/Lookup/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './lookup.js';
diff --git a/js/src/dapps/registry/Lookup/lookup.css b/js/src/dapps/registry/Lookup/lookup.css
new file mode 100644
index 0000000000000000000000000000000000000000..12ddd040c087a90745aa088bcf7e6298bf6dafb4
--- /dev/null
+++ b/js/src/dapps/registry/Lookup/lookup.css
@@ -0,0 +1,28 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.lookup {
+  margin: 1em;
+}
+
+.box {
+  margin: 0 1em;
+}
+
+.spacing {
+  margin-left: 1em;
+}
diff --git a/js/src/dapps/registry/Lookup/lookup.js b/js/src/dapps/registry/Lookup/lookup.js
new file mode 100644
index 0000000000000000000000000000000000000000..4238f1160108808156eb2405c57293be3b355316
--- /dev/null
+++ b/js/src/dapps/registry/Lookup/lookup.js
@@ -0,0 +1,98 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { Card, CardHeader, CardText } from 'material-ui/Card';
+import TextField from 'material-ui/TextField';
+import RaisedButton from 'material-ui/RaisedButton';
+import SearchIcon from 'material-ui/svg-icons/action/search';
+import renderAddress from '../ui/address.js';
+import renderImage from '../ui/image.js';
+
+import recordTypeSelect from '../ui/record-type-select.js';
+import styles from './lookup.css';
+
+const nullable = (type) => React.PropTypes.oneOfType([ React.PropTypes.oneOf([ null ]), type ]);
+
+export default class Lookup extends Component {
+
+  static propTypes = {
+    actions: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    result: nullable(PropTypes.string.isRequired),
+    accounts: PropTypes.object.isRequired,
+    contacts: PropTypes.object.isRequired
+  }
+
+  state = { name: '', type: 'A' };
+
+  render () {
+    const name = this.state.name || this.props.name;
+    const type = this.state.type || this.props.type;
+    const { result, accounts, contacts } = this.props;
+
+    let output = '';
+    if (result) {
+      if (type === 'A') {
+        output = (<code>{ renderAddress(result, accounts, contacts, false) }</code>);
+      } else if (type === 'IMG') {
+        output = renderImage(result);
+      } else if (type === 'CONTENT') {
+        output = (<div>
+          <code>{ result }</code>
+          <p>This is most likely just the hash of the content you are looking for</p>
+        </div>);
+      } else {
+        output = (<code>{ result }</code>);
+      }
+    }
+
+    return (
+      <Card className={ styles.lookup }>
+        <CardHeader title={ 'Query the Registry' } />
+        <div className={ styles.box }>
+          <TextField
+            className={ styles.spacing }
+            hintText='name'
+            value={ name }
+            onChange={ this.onNameChange }
+          />
+          { recordTypeSelect(type, this.onTypeChange, styles.spacing) }
+          <RaisedButton
+            className={ styles.spacing }
+            label='Lookup'
+            primary
+            icon={ <SearchIcon /> }
+            onClick={ this.onLookupClick }
+          />
+        </div>
+        <CardText>{ output }</CardText>
+      </Card>
+    );
+  }
+
+  onNameChange = (e) => {
+    this.setState({ name: e.target.value });
+  };
+  onTypeChange = (e, i, type) => {
+    this.setState({ type });
+    this.props.actions.clear();
+  };
+  onLookupClick = () => {
+    this.props.actions.lookup(this.state.name, this.state.type);
+  };
+}
diff --git a/js/src/dapps/registry/Lookup/reducers.js b/js/src/dapps/registry/Lookup/reducers.js
new file mode 100644
index 0000000000000000000000000000000000000000..f96e784bdbe533734139317a0e9f220172d69b79
--- /dev/null
+++ b/js/src/dapps/registry/Lookup/reducers.js
@@ -0,0 +1,53 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const initialState = {
+  pending: false,
+  name: '', type: '',
+  result: null
+};
+
+export default (state = initialState, action) => {
+  if (action.type === 'lookup clear') {
+    return { ...state, result: null };
+  }
+
+  if (action.type === 'lookup start') {
+    return {
+      pending: true,
+      name: action.name, type: action.entry,
+      result: null
+    };
+  }
+
+  if (action.type === 'lookup error') {
+    return {
+      pending: false,
+      name: initialState.name, type: initialState.type,
+      result: null
+    };
+  }
+
+  if (action.type === 'lookup success') {
+    return {
+      pending: false,
+      name: initialState.name, type: initialState.type,
+      result: action.result
+    };
+  }
+
+  return state;
+};
diff --git a/js/src/dapps/registry/Names/actions.js b/js/src/dapps/registry/Names/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..ee73ad78e52c50bdffa08aeda50ceefcdff11729
--- /dev/null
+++ b/js/src/dapps/registry/Names/actions.js
@@ -0,0 +1,89 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { sha3, toWei } from '../parity.js';
+
+const alreadyQueued = (queue, action, name) =>
+  !!queue.find((entry) => entry.action === action && entry.name === name);
+
+export const reserveStart = (name) => ({ type: 'names reserve start', name });
+
+export const reserveSuccess = (name) => ({ type: 'names reserve success', name });
+
+export const reserveFail = (name) => ({ type: 'names reserve fail', name });
+
+export const reserve = (name) => (dispatch, getState) => {
+  const state = getState();
+  const account = state.accounts.selected;
+  const contract = state.contract;
+  if (!contract || !account) return;
+  if (alreadyQueued(state.names.queue, 'reserve', name)) return;
+  const reserve = contract.functions.find((f) => f.name === 'reserve');
+
+  name = name.toLowerCase();
+  const options = {
+    from: account.address,
+    value: toWei(1).toString()
+  };
+  const values = [ sha3(name) ];
+
+  dispatch(reserveStart(name));
+  reserve.estimateGas(options, values)
+    .then((gas) => {
+      options.gas = gas.mul(1.2).toFixed(0);
+      return reserve.postTransaction(options, values);
+    })
+    .then((data) => {
+      dispatch(reserveSuccess(name));
+    }).catch((err) => {
+      console.error(`could not reserve ${name}`);
+      if (err) console.error(err.stack);
+      dispatch(reserveFail(name));
+    });
+};
+
+export const dropStart = (name) => ({ type: 'names drop start', name });
+
+export const dropSuccess = (name) => ({ type: 'names drop success', name });
+
+export const dropFail = (name) => ({ type: 'names drop fail', name });
+
+export const drop = (name) => (dispatch, getState) => {
+  const state = getState();
+  const account = state.accounts.selected;
+  const contract = state.contract;
+  if (!contract || !account) return;
+  if (alreadyQueued(state.names.queue, 'drop', name)) return;
+  const drop = contract.functions.find((f) => f.name === 'drop');
+
+  name = name.toLowerCase();
+  const options = { from: account.address };
+  const values = [ sha3(name) ];
+
+  dispatch(dropStart(name));
+  drop.estimateGas(options, values)
+    .then((gas) => {
+      options.gas = gas.mul(1.2).toFixed(0);
+      return drop.postTransaction(options, values);
+    })
+    .then((data) => {
+      dispatch(dropSuccess(name));
+    }).catch((err) => {
+      console.error(`could not drop ${name}`);
+      if (err) console.error(err.stack);
+      dispatch(reserveFail(name));
+    });
+};
diff --git a/js/src/dapps/registry/Names/index.js b/js/src/dapps/registry/Names/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..26195de88487ef4e2ab80db80216c7c18445f2f1
--- /dev/null
+++ b/js/src/dapps/registry/Names/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './names.js';
diff --git a/js/src/dapps/registry/Names/names.css b/js/src/dapps/registry/Names/names.css
new file mode 100644
index 0000000000000000000000000000000000000000..a058d41ac0e62d3b7b61ff2964072ae7574d95d0
--- /dev/null
+++ b/js/src/dapps/registry/Names/names.css
@@ -0,0 +1,40 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.names {
+  margin: 1em;
+}
+
+.box {
+  margin: 0 1em 1em 1em;
+}
+
+.spacing {
+  margin-left: 1em;
+}
+
+.noSpacing {
+  margin-top: 0;
+}
+
+.link {
+  color: #00BCD4;
+  text-decoration: none;
+}
+.link:hover {
+  text-decoration: underline;
+}
diff --git a/js/src/dapps/registry/Names/names.js b/js/src/dapps/registry/Names/names.js
new file mode 100644
index 0000000000000000000000000000000000000000..907e3bf873e3aeb44fed68499eef5a0d4effa31c
--- /dev/null
+++ b/js/src/dapps/registry/Names/names.js
@@ -0,0 +1,144 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { Card, CardHeader, CardText } from 'material-ui/Card';
+import TextField from 'material-ui/TextField';
+import DropDownMenu from 'material-ui/DropDownMenu';
+import MenuItem from 'material-ui/MenuItem';
+import RaisedButton from 'material-ui/RaisedButton';
+import CheckIcon from 'material-ui/svg-icons/navigation/check';
+
+import { fromWei } from '../parity.js';
+
+import styles from './names.css';
+
+const useSignerText = (<p>Use the <a href='/#/signer' className={ styles.link } target='_blank'>Signer</a> to authenticate the following changes.</p>);
+
+const renderNames = (names) => {
+  const out = [];
+  for (let name of names) {
+    out.push((<code>{ name }</code>), ', ');
+  }
+  out.pop();
+  return out;
+};
+
+const renderQueue = (queue) => {
+  if (queue.length === 0) {
+    return null;
+  }
+
+  const grouped = queue.reduce((grouped, change) => {
+    const last = grouped[grouped.length - 1];
+    if (last && last.action === change.action) {
+      last.names.push(change.name);
+    } else {
+      grouped.push({ action: change.action, names: [change.name] });
+    }
+    return grouped;
+  }, []);
+
+  return (
+    <ul>
+      { grouped.map(({ action, names }) => (
+        <li key={ action + '-' + names.join('-') }>
+          { renderNames(names) }
+          { ' will be ' }
+          { action === 'reserve' ? 'reserved' : 'dropped' }
+        </li>
+      )) }
+    </ul>
+  );
+};
+
+export default class Names extends Component {
+
+  static propTypes = {
+    actions: PropTypes.object.isRequired,
+    fee: PropTypes.object.isRequired,
+    hasAccount: PropTypes.bool.isRequired,
+    pending: PropTypes.bool.isRequired,
+    queue: PropTypes.array.isRequired
+  }
+
+  state = {
+    action: 'reserve',
+    name: ''
+  };
+
+  render () {
+    const { action, name } = this.state;
+    const { fee, hasAccount, pending, queue } = this.props;
+
+    return (
+      <Card className={ styles.names }>
+        <CardHeader title={ 'Manage Names' } />
+        <CardText>
+          { !hasAccount
+            ? (<p className={ styles.noSpacing }>Please select an account first.</p>)
+            : (action === 'reserve'
+                ? (<p className={ styles.noSpacing }>
+                  The fee to reserve a name is <code>{ fromWei(fee).toFixed(3) }</code>ETH.
+                </p>)
+                : (<p className={ styles.noSpacing }>To drop a name, you have to be the owner.</p>)
+              )
+          }
+          <TextField
+            hintText='name'
+            value={ name }
+            onChange={ this.onNameChange }
+          />
+          <DropDownMenu
+            disabled={ !hasAccount || pending }
+            value={ action }
+            onChange={ this.onActionChange }
+          >
+            <MenuItem value='reserve' primaryText='reserve this name' />
+            <MenuItem value='drop' primaryText='drop this name' />
+          </DropDownMenu>
+          <RaisedButton
+            disabled={ !hasAccount || pending }
+            className={ styles.spacing }
+            label={ action === 'reserve' ? 'Reserve' : 'Drop' }
+            primary
+            icon={ <CheckIcon /> }
+            onClick={ this.onSubmitClick }
+          />
+          { queue.length > 0
+            ? (<div>{ useSignerText }{ renderQueue(queue) }</div>)
+            : null
+          }
+        </CardText>
+      </Card>
+    );
+  }
+
+  onNameChange = (e) => {
+    this.setState({ name: e.target.value });
+  };
+  onActionChange = (e, i, action) => {
+    this.setState({ action });
+  };
+  onSubmitClick = () => {
+    const { action, name } = this.state;
+    if (action === 'reserve') {
+      this.props.actions.reserve(name);
+    } else if (action === 'drop') {
+      this.props.actions.drop(name);
+    }
+  };
+}
diff --git a/js/src/dapps/registry/Names/reducers.js b/js/src/dapps/registry/Names/reducers.js
new file mode 100644
index 0000000000000000000000000000000000000000..1fcee57d8b2f06f5236f5a20327563698e3f0b00
--- /dev/null
+++ b/js/src/dapps/registry/Names/reducers.js
@@ -0,0 +1,55 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const initialState = {
+  hasAccount: false,
+  pending: false,
+  queue: []
+};
+
+export default (state = initialState, action) => {
+  if (action.type === 'accounts select') {
+    return { ...state, hasAccount: !!action.address };
+  }
+
+  if (action.type === 'names reserve start') {
+    return { ...state, pending: true };
+  }
+  if (action.type === 'names reserve success') {
+    return {
+      ...state, pending: false,
+      queue: state.queue.concat({ action: 'reserve', name: action.name })
+    };
+  }
+  if (action.type === 'names reserve fail') {
+    return { ...state, pending: false };
+  }
+
+  if (action.type === 'names drop start') {
+    return { ...state, pending: true };
+  }
+  if (action.type === 'names drop success') {
+    return {
+      ...state, pending: false,
+      queue: state.queue.concat({ action: 'drop', name: action.name })
+    };
+  }
+  if (action.type === 'names drop fail') {
+    return { ...state, pending: false };
+  }
+
+  return state;
+};
diff --git a/js/src/dapps/registry/Records/actions.js b/js/src/dapps/registry/Records/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..8b1407211906ec5eb25a44be67bc4079dd5b3119
--- /dev/null
+++ b/js/src/dapps/registry/Records/actions.js
@@ -0,0 +1,38 @@
+import { sha3 } from '../parity.js';
+
+export const start = (name, key, value) => ({ type: 'records update start', name, key, value });
+
+export const success = () => ({ type: 'records update success' });
+
+export const fail = () => ({ type: 'records update error' });
+
+export const update = (name, key, value) => (dispatch, getState) => {
+  const state = getState();
+  const account = state.accounts.selected;
+  const contract = state.contract;
+
+  if (!contract || !account) {
+    return;
+  }
+
+  const fnName = key === 'A' ? 'setAddress' : 'set';
+  const fn = contract.functions.find((f) => f.name === fnName);
+
+  name = name.toLowerCase();
+  const options = { from: account.address };
+  const values = [ sha3(name), key, value ];
+
+  dispatch(start(name, key, value));
+  fn.estimateGas(options, values)
+    .then((gas) => {
+      options.gas = gas.mul(1.2).toFixed(0);
+      return fn.postTransaction(options, values);
+    })
+    .then((data) => {
+      dispatch(success());
+    }).catch((err) => {
+      console.error(`could not update ${key} record of ${name}`);
+      if (err) console.error(err.stack);
+      dispatch(fail());
+    });
+};
diff --git a/js/src/dapps/registry/Records/index.js b/js/src/dapps/registry/Records/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e2528968e5ec80aaf5ac8272102a83cace4e5608
--- /dev/null
+++ b/js/src/dapps/registry/Records/index.js
@@ -0,0 +1 @@
+export default from './records.js';
diff --git a/js/src/dapps/registry/Records/records.css b/js/src/dapps/registry/Records/records.css
new file mode 100644
index 0000000000000000000000000000000000000000..72b62595d0ffe3aca9bc7ff7d6f7e21588f41ec3
--- /dev/null
+++ b/js/src/dapps/registry/Records/records.css
@@ -0,0 +1,28 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.records {
+  margin: 1em;
+}
+
+.noSpacing {
+  margin-top: 0;
+}
+
+.spacing {
+  margin-left: 1em;
+}
diff --git a/js/src/dapps/registry/Records/records.js b/js/src/dapps/registry/Records/records.js
new file mode 100644
index 0000000000000000000000000000000000000000..355522e605439a1e5a00bc3ed6bac1d956937723
--- /dev/null
+++ b/js/src/dapps/registry/Records/records.js
@@ -0,0 +1,76 @@
+import React, { Component, PropTypes } from 'react';
+import { Card, CardHeader, CardText } from 'material-ui/Card';
+import TextField from 'material-ui/TextField';
+import RaisedButton from 'material-ui/RaisedButton';
+import SaveIcon from 'material-ui/svg-icons/content/save';
+
+import recordTypeSelect from '../ui/record-type-select.js';
+import styles from './records.css';
+
+export default class Records extends Component {
+
+  static propTypes = {
+    actions: PropTypes.object.isRequired,
+    hasAccount: PropTypes.bool.isRequired,
+    pending: PropTypes.bool.isRequired,
+    name: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired
+  }
+
+  state = { name: '', type: 'A', value: '' };
+
+  render () {
+    const { hasAccount, pending } = this.props;
+    const name = this.state.name || this.props.name;
+    const type = this.state.type || this.props.type;
+    const value = this.state.value || this.props.value;
+
+    return (
+      <Card className={ styles.records }>
+        <CardHeader title={ 'Manage Entries of a Name' } />
+        <CardText>
+          { !hasAccount
+            ? (<p className={ styles.noSpacing }>Please select an account first.</p>)
+            : (<p className={ styles.noSpacing }>You can only modify entries of names that you previously registered.</p>)
+          }
+          <TextField
+            className={ styles.spacing }
+            hintText='name'
+            value={ name }
+            onChange={ this.onNameChange }
+          />
+          { recordTypeSelect(type, this.onTypeChange, styles.spacing) }
+          <TextField
+            className={ styles.spacing }
+            hintText='value'
+            value={ value }
+            onChange={ this.onValueChange }
+          />
+          <RaisedButton
+            disabled={ !hasAccount || pending }
+            className={ styles.spacing }
+            label='Save'
+            primary
+            icon={ <SaveIcon /> }
+            onClick={ this.onSaveClick }
+          />
+        </CardText>
+      </Card>
+    );
+  }
+
+  onNameChange = (e) => {
+    this.setState({ name: e.target.value });
+  };
+  onTypeChange = (e, i, type) => {
+    this.setState({ type });
+  };
+  onValueChange = (e) => {
+    this.setState({ value: e.target.value });
+  };
+  onSaveClick = () => {
+    const { name, type, value } = this.state;
+    this.props.actions.update(name, type, value);
+  };
+}
diff --git a/js/src/dapps/registry/Records/reducers.js b/js/src/dapps/registry/Records/reducers.js
new file mode 100644
index 0000000000000000000000000000000000000000..a9a3ae37158fb4a01969f041d1183dba7a73a6eb
--- /dev/null
+++ b/js/src/dapps/registry/Records/reducers.js
@@ -0,0 +1,29 @@
+const initialState = {
+  hasAccount: false,
+  pending: false,
+  name: '', type: '', value: ''
+};
+
+export default (state = initialState, action) => {
+  if (action.type === 'accounts select') {
+    return { ...state, hasAccount: !!action.address };
+  }
+
+  if (action.type === 'records update start') {
+    return {
+      ...state,
+      pending: true,
+      name: action.name, type: action.entry, value: action.value
+    };
+  }
+
+  if (action.type === 'records update error' && action.type === 'records update success') {
+    return {
+      ...state,
+      pending: false,
+      name: initialState.name, type: initialState.type, value: initialState.value
+    };
+  }
+
+  return state;
+};
diff --git a/js/src/dapps/registry/actions.js b/js/src/dapps/registry/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..882af036036f30fb6067849b012f6e64a0f63732
--- /dev/null
+++ b/js/src/dapps/registry/actions.js
@@ -0,0 +1,68 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { registry as registryAbi } from '../../contracts/abi';
+
+import { api } from './parity.js';
+import * as addresses from './addresses/actions.js';
+import * as accounts from './Accounts/actions.js';
+import * as lookup from './Lookup/actions.js';
+import * as events from './Events/actions.js';
+import * as names from './Names/actions.js';
+import * as records from './Records/actions.js';
+
+export { addresses, accounts, lookup, events, names, records };
+
+export const setContract = (contract) => ({ type: 'set contract', contract });
+
+export const fetchContract = () => (dispatch) =>
+  api.ethcore.registryAddress()
+  .then((address) => {
+    const contract = api.newContract(registryAbi, address);
+    dispatch(setContract(contract));
+    dispatch(fetchFee());
+    dispatch(fetchOwner());
+  })
+  .catch((err) => {
+    console.error('could not fetch contract');
+    if (err) console.error(err.stack);
+  });
+
+export const setFee = (fee) => ({ type: 'set fee', fee });
+
+const fetchFee = () => (dispatch, getState) => {
+  const { contract } = getState();
+  if (!contract) return;
+  contract.instance.fee.call()
+  .then((fee) => dispatch(setFee(fee)))
+  .catch((err) => {
+    console.error('could not fetch fee');
+    if (err) console.error(err.stack);
+  });
+};
+
+export const setOwner = (owner) => ({ type: 'set owner', owner });
+
+export const fetchOwner = () => (dispatch, getState) => {
+  const { contract } = getState();
+  if (!contract) return;
+  contract.instance.owner.call()
+  .then((owner) => dispatch(setOwner(owner)))
+  .catch((err) => {
+    console.error('could not fetch owner');
+    if (err) console.error(err.stack);
+  });
+};
diff --git a/js/src/dapps/registry/addresses/accounts-reducer.js b/js/src/dapps/registry/addresses/accounts-reducer.js
new file mode 100644
index 0000000000000000000000000000000000000000..20981877d65d82789d7203edaad7c408e6668eb5
--- /dev/null
+++ b/js/src/dapps/registry/addresses/accounts-reducer.js
@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const initialState = {
+  all: {},
+  selected: null
+};
+
+export default (state = initialState, action) => {
+  if (action.type === 'addresses set') {
+    const accounts = action.addresses
+      .filter((address) => address.isAccount)
+      .reduce((accounts, account) => {
+        accounts[account.address] = account;
+        return accounts;
+      }, {});
+    return { ...state, all: accounts };
+  }
+
+  if (action.type === 'accounts select' && state.all[action.address]) {
+    return { ...state, selected: state.all[action.address] };
+  }
+
+  return state;
+};
diff --git a/js/src/dapps/registry/addresses/actions.js b/js/src/dapps/registry/addresses/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..b6091acb57fbeb846fadc506e5836feb04b805b2
--- /dev/null
+++ b/js/src/dapps/registry/addresses/actions.js
@@ -0,0 +1,39 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { api } from '../parity';
+
+export const set = (addresses) => ({ type: 'addresses set', addresses });
+
+export const fetch = () => (dispatch) => {
+  return Promise
+    .all([
+      api.personal.listAccounts(),
+      api.personal.accountsInfo()
+    ])
+    .then(([ accounts, data ]) => {
+      const addresses = Object.keys(data)
+        .filter((address) => data[address] && !data[address].meta.deleted)
+        .map((address) => ({
+          ...data[address], address,
+          isAccount: accounts.includes(address)
+        }));
+      dispatch(set(addresses));
+    })
+    .catch((error) => {
+      console.error('could not fetch addresses', error);
+    });
+};
diff --git a/js/src/dapps/registry/addresses/contacts-reducer.js b/js/src/dapps/registry/addresses/contacts-reducer.js
new file mode 100644
index 0000000000000000000000000000000000000000..6b0572e5495914b8f9250c619e2c6a984d731846
--- /dev/null
+++ b/js/src/dapps/registry/addresses/contacts-reducer.js
@@ -0,0 +1,31 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const initialState = {};
+
+export default (state = initialState, action) => {
+  if (action.type === 'addresses set') {
+    const contacts = action.addresses
+      .filter((address) => !address.isAccount)
+      .reduce((contacts, contact) => {
+        contacts[contact.address] = contact;
+        return contacts;
+      }, {});
+    return contacts;
+  }
+
+  return state;
+};
diff --git a/js/src/dapps/registry/parity.js b/js/src/dapps/registry/parity.js
new file mode 100644
index 0000000000000000000000000000000000000000..cf9819b60ebc0fdaaa8529c226cea85347906e49
--- /dev/null
+++ b/js/src/dapps/registry/parity.js
@@ -0,0 +1,23 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const api = window.parity.api;
+const { bytesToHex, sha3, toWei, fromWei } = window.parity.api.util;
+
+export {
+  api,
+  bytesToHex, sha3, toWei, fromWei
+};
diff --git a/js/src/dapps/registry/reducers.js b/js/src/dapps/registry/reducers.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0f620b7084f09bfff0ef5a2a5d74821906c0092
--- /dev/null
+++ b/js/src/dapps/registry/reducers.js
@@ -0,0 +1,55 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import accountsReducer from './addresses/accounts-reducer.js';
+import contactsReducer from './addresses/contacts-reducer.js';
+import lookupReducer from './Lookup/reducers.js';
+import eventsReducer from './Events/reducers.js';
+import namesReducer from './Names/reducers.js';
+import recordsReducer from './Records/reducers.js';
+
+const contractReducer = (state = null, action) =>
+  action.type === 'set contract' ? action.contract : state;
+
+const feeReducer = (state = null, action) =>
+  action.type === 'set fee' ? action.fee : state;
+
+const ownerReducer = (state = null, action) =>
+  action.type === 'set owner' ? action.owner : state;
+
+const initialState = {
+  accounts: accountsReducer(undefined, { type: '' }),
+  contacts: contactsReducer(undefined, { type: '' }),
+  contract: contractReducer(undefined, { type: '' }),
+  fee: feeReducer(undefined, { type: '' }),
+  owner: ownerReducer(undefined, { type: '' }),
+  lookup: lookupReducer(undefined, { type: '' }),
+  events: eventsReducer(undefined, { type: '' }),
+  names: namesReducer(undefined, { type: '' }),
+  records: recordsReducer(undefined, { type: '' })
+};
+
+export default (state = initialState, action) => ({
+  accounts: accountsReducer(state.accounts, action),
+  contacts: contactsReducer(state.contacts, action),
+  contract: contractReducer(state.contract, action),
+  fee: feeReducer(state.fee, action),
+  owner: ownerReducer(state.owner, action),
+  lookup: lookupReducer(state.lookup, action),
+  events: eventsReducer(state.events, action),
+  names: namesReducer(state.names, action),
+  records: recordsReducer(state.records, action)
+});
diff --git a/js/src/dapps/registry/store.js b/js/src/dapps/registry/store.js
new file mode 100644
index 0000000000000000000000000000000000000000..5fb7d4b6a4e4d42c3e9e8ca61942e7f8871ca2f5
--- /dev/null
+++ b/js/src/dapps/registry/store.js
@@ -0,0 +1,22 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+
+import reducer from './reducers';
+
+export default createStore(reducer, applyMiddleware(thunk));
diff --git a/js/src/dapps/registry/ui/address.js b/js/src/dapps/registry/ui/address.js
new file mode 100644
index 0000000000000000000000000000000000000000..e4a5a953e5d4000adb9718f073dc2208500425ad
--- /dev/null
+++ b/js/src/dapps/registry/ui/address.js
@@ -0,0 +1,47 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import renderHash from './hash';
+import IdentityIcon from '../IdentityIcon';
+
+const container = {
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  height: '24px'
+};
+const align = {
+  display: 'inline-block',
+  verticalAlign: 'top',
+  lineHeight: '24px'
+};
+
+export default (address, accounts, contacts, shortenHash = true) => {
+  let caption;
+  if (accounts[address]) {
+    caption = (<abbr title={ address } style={ align }>{ accounts[address].name }</abbr>);
+  } else if (contacts[address]) {
+    caption = (<abbr title={ address } style={ align }>{ contacts[address].name }</abbr>);
+  } else {
+    caption = (<code style={ align }>{ shortenHash ? renderHash(address) : address }</code>);
+  }
+  return (
+    <div style={ container }>
+      <IdentityIcon address={ address } style={ align } />
+      { caption }
+    </div>
+  );
+};
diff --git a/js/src/dapps/registry/ui/hash.js b/js/src/dapps/registry/ui/hash.js
new file mode 100644
index 0000000000000000000000000000000000000000..4035a9bbe24099f06146c4d6dd8714fd8c503533
--- /dev/null
+++ b/js/src/dapps/registry/ui/hash.js
@@ -0,0 +1,24 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+
+export default (hash) => {
+  const shortened = hash.length > (2 + 9 + 9)
+    ? hash.substr(2, 9) + '...' + hash.slice(-9)
+    : hash.slice(2);
+  return (<abbr title={ hash }>{ shortened }</abbr>);
+};
diff --git a/js/src/dapps/registry/ui/image.js b/js/src/dapps/registry/ui/image.js
new file mode 100644
index 0000000000000000000000000000000000000000..7e7a52a88aa3a49ef3f818ab802d74c3559c13a5
--- /dev/null
+++ b/js/src/dapps/registry/ui/image.js
@@ -0,0 +1,30 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+
+const styles = {
+  padding: '.5em',
+  border: '1px solid #777'
+};
+
+export default (address) => (
+  <img
+    src={ `http://127.0.0.1:8080/${address}/` }
+    alt={ address }
+    style={ styles }
+  />
+);
diff --git a/js/src/dapps/registry/ui/record-type-select.js b/js/src/dapps/registry/ui/record-type-select.js
new file mode 100644
index 0000000000000000000000000000000000000000..2cfbdf540679687e30a14c634de48ce9acd59966
--- /dev/null
+++ b/js/src/dapps/registry/ui/record-type-select.js
@@ -0,0 +1,27 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import DropDownMenu from 'material-ui/DropDownMenu';
+import MenuItem from 'material-ui/MenuItem';
+
+export default (value, onSelect, className = '') => (
+  <DropDownMenu className={ className } value={ value } onChange={ onSelect }>
+    <MenuItem value='A' primaryText='A – Ethereum address' />
+    <MenuItem value='IMG' primaryText='IMG – hash of a picture in the blockchain' />
+    <MenuItem value='CONTENT' primaryText='CONTENT – hash of a data in the blockchain' />
+  </DropDownMenu>
+);
diff --git a/js/src/dapps/signaturereg.html b/js/src/dapps/signaturereg.html
new file mode 100644
index 0000000000000000000000000000000000000000..3f74be28ab3626a69894e79436e00136302144f2
--- /dev/null
+++ b/js/src/dapps/signaturereg.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Method Signature Registry</title>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="vendor.js"></script>
+    <script src="commons.js"></script>
+    <script src="parity.js"></script>
+    <script src="signaturereg.js"></script>
+  </body>
+</html>
diff --git a/js/src/dapps/signaturereg.js b/js/src/dapps/signaturereg.js
new file mode 100644
index 0000000000000000000000000000000000000000..72ddd0ca7921bcda2ca83f7965ffc33e6ccd5535
--- /dev/null
+++ b/js/src/dapps/signaturereg.js
@@ -0,0 +1,33 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import ReactDOM from 'react-dom';
+import React from 'react';
+
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
+import Application from './signaturereg/Application';
+
+import '../../assets/fonts/Roboto/font.css';
+import '../../assets/fonts/RobotoMono/font.css';
+import './style.css';
+import './signaturereg.html';
+
+ReactDOM.render(
+  <Application />,
+  document.querySelector('#container')
+);
diff --git a/js/src/dapps/signaturereg/Application/application.css b/js/src/dapps/signaturereg/Application/application.css
new file mode 100644
index 0000000000000000000000000000000000000000..4675b064e08e76d2d3bef02cfd2bef17af43f48c
--- /dev/null
+++ b/js/src/dapps/signaturereg/Application/application.css
@@ -0,0 +1,29 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  background: black;
+  color: #eee;
+  font-family: 'Roboto';
+  vertical-align: middle;
+}
+
+.actions {
+  position: absolute;
+  top: 1.5em;
+  right: 1.5em;
+}
diff --git a/js/src/dapps/signaturereg/Application/application.js b/js/src/dapps/signaturereg/Application/application.js
new file mode 100644
index 0000000000000000000000000000000000000000..3878af4cfb17a26abf9daea38c76ca8bf1315d0c
--- /dev/null
+++ b/js/src/dapps/signaturereg/Application/application.js
@@ -0,0 +1,130 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component } from 'react';
+
+import { attachInterface, attachBlockNumber } from '../services';
+import Button from '../Button';
+import Events from '../Events';
+import Header from '../Header';
+import Import from '../Import';
+import Loading from '../Loading';
+
+import styles from './application.css';
+
+export default class Application extends Component {
+  state = {
+    accounts: {},
+    address: null,
+    fromAddress: null,
+    accountsInfo: {},
+    blockNumber: new BigNumber(0),
+    contract: null,
+    instance: null,
+    loading: true,
+    totalSignatures: new BigNumber(0),
+    showImport: false
+  }
+
+  componentDidMount () {
+    attachInterface()
+      .then((state) => {
+        this.setState(state, () => {
+          this.setState({ loading: false });
+        });
+
+        return attachBlockNumber(state.instance, (state) => {
+          this.setState(state);
+        });
+      })
+      .catch((error) => {
+        console.error('componentDidMount', error);
+      });
+  }
+
+  render () {
+    const { loading } = this.state;
+
+    if (loading) {
+      return (
+        <Loading />
+      );
+    }
+
+    return (
+      <div className={ styles.container }>
+        { this.renderHeader() }
+        { this.renderImport() }
+        { this.renderEvents() }
+      </div>
+    );
+  }
+
+  renderHeader () {
+    const { blockNumber, totalSignatures } = this.state;
+
+    return (
+      <Header
+        blockNumber={ blockNumber }
+        totalSignatures={ totalSignatures } />
+    );
+  }
+
+  renderImport () {
+    const { accounts, fromAddress, instance, showImport } = this.state;
+
+    if (showImport) {
+      return (
+        <Import
+          accounts={ accounts }
+          fromAddress={ fromAddress }
+          instance={ instance }
+          visible={ showImport }
+          onClose={ this.toggleImport }
+          onSetFromAddress={ this.setFromAddress } />
+      );
+    }
+
+    return (
+      <div className={ styles.actions }>
+        <Button invert onClick={ this.toggleImport }>import abi</Button>
+      </div>
+    );
+  }
+
+  renderEvents () {
+    const { accountsInfo, contract } = this.state;
+
+    return (
+      <Events
+        accountsInfo={ accountsInfo }
+        contract={ contract } />
+    );
+  }
+
+  toggleImport = () => {
+    this.setState({
+      showImport: !this.state.showImport
+    });
+  }
+
+  setFromAddress = (fromAddress) => {
+    this.setState({
+      fromAddress
+    });
+  }
+}
diff --git a/js/src/dapps/signaturereg/Application/index.js b/js/src/dapps/signaturereg/Application/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..236578226a80e822593c37acd1daad1c649950e1
--- /dev/null
+++ b/js/src/dapps/signaturereg/Application/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './application';
diff --git a/js/src/dapps/signaturereg/Button/button.css b/js/src/dapps/signaturereg/Button/button.css
new file mode 100644
index 0000000000000000000000000000000000000000..444359c79ea8e0bd880f2be325be42f339d92696
--- /dev/null
+++ b/js/src/dapps/signaturereg/Button/button.css
@@ -0,0 +1,43 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.button {
+  background: #f80;
+  color: white;
+  border-radius: 5px;
+  font-size: 1em;
+  line-height: 24px;
+  height: 24px;
+  padding: 0.75em 1.5em;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.button.disabled {
+  opacity: 0.25;
+  cursor: default;
+}
+
+.button.inverse {
+  color: #f80;
+  background: white;
+}
+
+.button * {
+  display: inline-block;
+  vertical-align: top;
+}
diff --git a/js/src/dapps/signaturereg/Button/button.js b/js/src/dapps/signaturereg/Button/button.js
new file mode 100644
index 0000000000000000000000000000000000000000..9cbbcf478ee4e23a621e95b53b1ae1dbba88e2ab
--- /dev/null
+++ b/js/src/dapps/signaturereg/Button/button.js
@@ -0,0 +1,50 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './button.css';
+
+export default class Button extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    invert: PropTypes.bool,
+    onClick: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { children, className, disabled, invert } = this.props;
+    const classes = `${styles.button} ${disabled ? styles.disabled : ''} ${invert ? styles.inverse : ''} ${className}`;
+
+    return (
+      <div className={ classes } onTouchTap={ this.onClick }>
+        { children }
+      </div>
+    );
+  }
+
+  onClick = (event) => {
+    const { disabled, onClick } = this.props;
+
+    if (disabled) {
+      return;
+    }
+
+    onClick(event);
+  }
+}
diff --git a/js/src/dapps/signaturereg/Button/index.js b/js/src/dapps/signaturereg/Button/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f69a65e3d53fd0e216cb4aefcbcd551417281e09
--- /dev/null
+++ b/js/src/dapps/signaturereg/Button/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './button';
diff --git a/js/src/dapps/signaturereg/Events/events.css b/js/src/dapps/signaturereg/Events/events.css
new file mode 100644
index 0000000000000000000000000000000000000000..5e9960e0eed0f222552a323d0d51d96e1be9ae9c
--- /dev/null
+++ b/js/src/dapps/signaturereg/Events/events.css
@@ -0,0 +1,76 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.events {
+  padding: 3em;
+  text-align: center;
+}
+
+.header {
+  font-size: 1.3em;
+  line-height: 1.3em;
+  vertical-align: middle;
+  text-align: center;
+  padding-bottom: 24px;
+  color: #f80;
+}
+
+.events table {
+  border: none;
+  margin: 0 auto;
+  border-collapse: collapse;
+}
+
+.events td {
+  padding: 0 0.5em 0.5em 0.5em;
+  white-space: nowrap;
+  text-align: left;
+  line-height: 24px;
+}
+
+.events td * {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.pending {
+  opacity: 0.5;
+}
+
+.mined {
+}
+
+td.methodName {
+  color: #f80;
+}
+
+td.signature {
+  color: #888;
+  text-align: right;
+}
+
+td.timestamp {
+  text-align: right;
+}
+
+td.blockNumber {
+  text-align: center;
+}
+
+td.owner {
+  text-overflow: ellipsis;
+}
diff --git a/js/src/dapps/signaturereg/Events/events.js b/js/src/dapps/signaturereg/Events/events.js
new file mode 100644
index 0000000000000000000000000000000000000000..302b51250417abda653c49be8427861c5fb933b4
--- /dev/null
+++ b/js/src/dapps/signaturereg/Events/events.js
@@ -0,0 +1,84 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { formatBlockNumber, formatBlockTimestamp, formatSignature } from '../format';
+import { attachEvents } from '../services';
+import IdentityIcon from '../IdentityIcon';
+
+import styles from './events.css';
+
+export default class Events extends Component {
+  static propTypes = {
+    accountsInfo: PropTypes.object.isRequired,
+    contract: PropTypes.object.isRequired
+  }
+
+  state = {
+    events: []
+  }
+
+  componentDidMount () {
+    const { contract } = this.props;
+
+    attachEvents(contract, (state) => {
+      this.setState(state);
+    });
+  }
+
+  render () {
+    const { events } = this.state;
+
+    if (!events.length) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.events }>
+        <table>
+          <tbody>
+            { this.renderEvents() }
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  renderEvents () {
+    const { accountsInfo } = this.props;
+    const { events } = this.state;
+
+    return events.map((event) => {
+      const name = accountsInfo[event.params.creator]
+        ? accountsInfo[event.params.creator].name
+        : event.params.creator;
+
+      return (
+        <tr className={ styles[event.state] } key={ event.key }>
+          <td className={ styles.timestamp }>{ formatBlockTimestamp(event.block) }</td>
+          <td className={ styles.blockNumber }>{ formatBlockNumber(event.blockNumber) }</td>
+          <td className={ styles.owner }>
+            <IdentityIcon address={ event.params.creator } />
+            <div>{ name }</div>
+          </td>
+          <td className={ styles.signature }>{ formatSignature(event.params.signature) }</td>
+          <td className={ styles.methodName }>{ event.params.method }</td>
+        </tr>
+      );
+    });
+  }
+}
diff --git a/js/src/dapps/signaturereg/Events/index.js b/js/src/dapps/signaturereg/Events/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..88ad6d407c91e416ead5fef1cf8c93201cac529b
--- /dev/null
+++ b/js/src/dapps/signaturereg/Events/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './events';
diff --git a/js/src/dapps/signaturereg/Header/header.css b/js/src/dapps/signaturereg/Header/header.css
new file mode 100644
index 0000000000000000000000000000000000000000..8d95b959c2acb10d759fc2479e7af581cf7e395b
--- /dev/null
+++ b/js/src/dapps/signaturereg/Header/header.css
@@ -0,0 +1,67 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.header {
+  position: relative;
+  height: 13.69em;
+  color: white;
+  border-bottom: 4px solid white;
+  overflow: hidden;
+}
+
+.banner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  font-size: 1.3em;
+  line-height: 1.3em;
+  padding: 24px;
+  background: #f80;
+}
+
+.header img,
+.content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.header img {
+  opacity: 0.2;
+  width: 100%;
+}
+
+.content {
+  text-align: center;
+  padding: 3em;
+}
+
+.hero {
+  font-size: 5em;
+  line-height: 1.2em;
+  vertical-align: middle;
+}
+
+.byline {
+  font-size: 1.3em;
+  line-height: 1.3em;
+  vertical-align: middle;
+}
diff --git a/js/src/dapps/signaturereg/Header/header.js b/js/src/dapps/signaturereg/Header/header.js
new file mode 100644
index 0000000000000000000000000000000000000000..8dd7cd578a5afa8cc6311b95bd8e10b7561d1b3e
--- /dev/null
+++ b/js/src/dapps/signaturereg/Header/header.js
@@ -0,0 +1,48 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './header.css';
+import blocks from '../../../../assets/images/dapps/blocks-350.jpg';
+
+export default class Header extends Component {
+  static propTypes = {
+    blockNumber: PropTypes.object.isRequired,
+    totalSignatures: PropTypes.object.isRequired
+  }
+
+  render () {
+    const { totalSignatures } = this.props;
+
+    return (
+      <div className={ styles.header }>
+        <div className={ styles.banner }>
+          contract signature registry
+        </div>
+        <img src={ blocks } />
+        <div className={ styles.content }>
+          <div className={ styles.hero }>
+            { totalSignatures.toFormat(0) }
+          </div>
+          <div className={ styles.byline }>
+            signatures registered
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/js/src/dapps/signaturereg/Header/index.js b/js/src/dapps/signaturereg/Header/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..37b5835f05496ab16e2f3c472ed0a5b174838a09
--- /dev/null
+++ b/js/src/dapps/signaturereg/Header/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './header.js';
diff --git a/js/src/dapps/signaturereg/IdentityIcon/identityIcon.css b/js/src/dapps/signaturereg/IdentityIcon/identityIcon.css
new file mode 100644
index 0000000000000000000000000000000000000000..3fa1df99e4d29224b7dd7cc02fdaac2e68e490c7
--- /dev/null
+++ b/js/src/dapps/signaturereg/IdentityIcon/identityIcon.css
@@ -0,0 +1,23 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  margin-right: 0.5em;
+}
diff --git a/js/src/dapps/signaturereg/IdentityIcon/identityIcon.js b/js/src/dapps/signaturereg/IdentityIcon/identityIcon.js
new file mode 100644
index 0000000000000000000000000000000000000000..0bc86731d4544432cae2af30ee573670fff5f9f7
--- /dev/null
+++ b/js/src/dapps/signaturereg/IdentityIcon/identityIcon.js
@@ -0,0 +1,36 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../parity';
+import styles from './identityIcon.css';
+
+export default class IdentityIcon extends Component {
+  static propTypes = {
+    address: PropTypes.string.isRequired
+  }
+
+  render () {
+    const { address } = this.props;
+
+    return (
+      <img
+        className={ styles.icon }
+        src={ api.util.createIdentityImg(address, 3) } />
+    );
+  }
+}
diff --git a/js/src/dapps/signaturereg/IdentityIcon/index.js b/js/src/dapps/signaturereg/IdentityIcon/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..76c107bfb7540f707a9b2665aac9b52f9d7590fa
--- /dev/null
+++ b/js/src/dapps/signaturereg/IdentityIcon/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './identityIcon';
diff --git a/js/src/dapps/signaturereg/Import/import.css b/js/src/dapps/signaturereg/Import/import.css
new file mode 100644
index 0000000000000000000000000000000000000000..8f9788c34100518c7ce3bc789447443c949939fc
--- /dev/null
+++ b/js/src/dapps/signaturereg/Import/import.css
@@ -0,0 +1,151 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(55, 55, 55, 0.75);
+  text-align: center;
+}
+
+.dialog {
+  margin-top: 1.5em;
+  border-radius: 5px;
+  width: 750px;
+  background: rgba(0, 0, 0, 0.9);
+  display: inline-block;
+}
+
+.close {
+  top: 4px;
+  right: 4px;
+  position: absolute;
+  background: transparent;
+}
+
+.header {
+  font-size: 1.3em;
+  line-height: 1.3em;
+  padding: 16px 24px;
+  background: #f80;
+  color: white;
+  position: relative;
+  margin-bottom: 24px;
+  border-radius: 5px 5px 0 0;
+}
+
+.body {
+  padding: 0 24px;
+}
+
+.body div {
+  text-align: center;
+}
+
+.info {
+  padding: 0 24px 24px 24px;
+  line-height: 1.618em;
+}
+
+.info textarea {
+  background: rgba(80, 80, 80, 0.25);
+  border-radius: 5px;
+  resize: none;
+  padding: 1em;
+  color: #eee;
+  font-size: 0.75em;
+  font-family: 'Roboto Mono';
+  width: 100%;
+  border: none;
+  box-sizing: border-box;
+}
+
+.info textarea.error {
+  background: rgba(255, 0, 0, 0.25);
+}
+
+.info .error {
+  color: rgba(255, 0, 0, 1);
+  font-size: 0.75em;
+  line-height: 1.5em;
+}
+
+.buttonrow {
+  position: relative;
+  padding: 24px 0;
+  margin: 0;
+  text-align: right !important;
+}
+
+.addressSelect {
+  position: absolute;
+  top: 24px;
+  left: 0;
+}
+
+.keys {
+  position: absolute;
+  left: 24px;
+  top: 16px;
+  padding: 4px 0;
+}
+
+.fnconstant,
+.fnexists,
+.fnunknown,
+.fntodo {
+  display: inline-block;
+  margin: 0.25em;
+  padding: 0.5em 1em;
+  border-radius: 2px;
+  color: white;
+  line-height: 1em;
+  font-size: 0.8em;
+}
+
+.fnconstant {
+  color: #888;
+  background: #333;
+}
+
+.fnexists {
+  color: #f80;
+  background: #333;
+}
+
+.fnunknown {
+  color: #eee;
+}
+
+.fntodo {
+  background: #f80;
+}
+
+.hide {
+  opacity: 0;
+}
diff --git a/js/src/dapps/signaturereg/Import/import.js b/js/src/dapps/signaturereg/Import/import.js
new file mode 100644
index 0000000000000000000000000000000000000000..dcf2b3f985cf2bc37d19c7f41695e21b86742e77
--- /dev/null
+++ b/js/src/dapps/signaturereg/Import/import.js
@@ -0,0 +1,236 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../parity';
+import { callRegister, postRegister } from '../services';
+import Button from '../Button';
+import IdentityIcon from '../IdentityIcon';
+
+import styles from './import.css';
+
+export default class Import extends Component {
+  static propTypes = {
+    accounts: PropTypes.object.isRequired,
+    fromAddress: PropTypes.string.isRequired,
+    instance: PropTypes.object.isRequired,
+    visible: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onSetFromAddress: PropTypes.func.isRequired
+  }
+
+  state = {
+    abi: null,
+    abiParsed: null,
+    abiError: 'Please add a valid ABI definition',
+    functions: null,
+    fnstate: {}
+  }
+
+  render () {
+    const { visible, onClose } = this.props;
+    const { abiError } = this.state;
+
+    if (!visible) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.modal }>
+        <div className={ styles.overlay }>
+          <div className={ styles.dialog }>
+            <div className={ styles.header }>
+              <div>abi import</div>
+              <Button className={ styles.close } onClick={ onClose }>&times;</Button>
+            </div>
+            { abiError ? this.renderCapture() : this.renderRegister() }
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderCapture () {
+    const { abiError } = this.state;
+
+    return (
+      <div className={ styles.body }>
+        <div className={ styles.info }>
+          Provide the ABI (Contract Interface) in the space provided below. Only non-constant functions (names &amp; types) will be imported, while constant functions and existing signatures will be ignored.
+        </div>
+        <div className={ styles.info }>
+          <textarea rows='8' className={ styles.error } onChange={ this.onAbiEdit }></textarea>
+          <div className={ styles.error }>
+            { abiError }
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderRegister () {
+    const { accounts, fromAddress } = this.props;
+
+    const account = accounts[fromAddress];
+    const count = this.countFunctions();
+    let buttons = null;
+
+    if (count) {
+      buttons = (
+        <div className={ styles.buttonrow }>
+          <div className={ styles.addressSelect }>
+            <Button invert onClick={ this.onSelectFromAddress }>
+              <IdentityIcon address={ account.address } />
+              <div>{ account.name || account.address }</div>
+            </Button>
+          </div>
+          <Button onClick={ this.onRegister }>
+            register functions
+          </Button>
+        </div>
+      );
+    }
+
+    return (
+      <div className={ styles.body }>
+        <div className={ styles.info }>
+          The following functions have been extracted from the ABI provided and the state has been determined from interacting with the signature contract.
+        </div>
+        <div className={ styles.info }>
+          <div className={ styles.fnkeys }>
+            { this.renderFunctions() }
+          </div>
+        </div>
+        <div className={ styles.info }>
+          { count || 'no' } functions available for registration
+        </div>
+        { buttons }
+      </div>
+    );
+  }
+
+  renderFunctions () {
+    const { functions, fnstate } = this.state;
+
+    if (!functions) {
+      return null;
+    }
+
+    return functions.map((fn) => {
+      if (fn.constant) {
+        fnstate[fn.signature] = 'fnconstant';
+      } else if (!fnstate[fn.signature]) {
+        this.testFunction(fn);
+      }
+
+      return (
+        <div key={ fn.signature } className={ styles[fnstate[fn.signature] || 'fnunknown'] }>
+          { fn.id }
+        </div>
+      );
+    });
+  }
+
+  sortFunctions = (a, b) => {
+    return a.name.localeCompare(b.name);
+  }
+
+  countFunctions () {
+    const { functions, fnstate } = this.state;
+
+    if (!functions) {
+      return 0;
+    }
+
+    return functions.filter((fn) => fnstate[fn.signature] === 'fntodo').length;
+  }
+
+  testFunction (fn) {
+    const { instance } = this.props;
+    const { fnstate } = this.state;
+
+    callRegister(instance, fn.id)
+      .then((result) => {
+        fnstate[fn.signature] = result ? 'fntodo' : 'fnexists';
+        this.setState(fnstate);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }
+
+  onAbiEdit = (event) => {
+    let functions = null;
+    let abiError = null;
+    let abiParsed = null;
+    let abi = null;
+
+    try {
+      abiParsed = JSON.parse(event.target.value);
+      functions = api.newContract(abiParsed).functions.sort(this.sortFunctions);
+      abi = JSON.stringify(abiParsed);
+    } catch (error) {
+      console.error('onAbiEdit', error);
+      abiError = error.message;
+    }
+
+    this.setState({
+      functions,
+      abiError,
+      abiParsed,
+      abi
+    });
+  }
+
+  onRegister = () => {
+    const { instance, fromAddress, onClose } = this.props;
+    const { functions, fnstate } = this.state;
+
+    Promise
+      .all(
+        functions
+          .filter((fn) => !fn.constant)
+          .filter((fn) => fnstate[fn.signature] === 'fntodo')
+          .map((fn) => postRegister(instance, fn.id, { from: fromAddress }))
+      )
+      .then(() => {
+        onClose();
+      })
+      .catch((error) => {
+        console.error('onRegister', error);
+      });
+  }
+
+  onSelectFromAddress = () => {
+    const { accounts, fromAddress, onSetFromAddress } = this.props;
+    const addresses = Object.keys(accounts);
+    let index = 0;
+
+    addresses.forEach((address, _index) => {
+      if (address === fromAddress) {
+        index = _index;
+      }
+    });
+
+    index++;
+    if (index >= addresses.length) {
+      index = 0;
+    }
+
+    onSetFromAddress(addresses[index]);
+  }
+}
diff --git a/js/src/dapps/signaturereg/Import/index.js b/js/src/dapps/signaturereg/Import/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d2f352cf3dbdc50bc2c6a797fc2fc225baef6523
--- /dev/null
+++ b/js/src/dapps/signaturereg/Import/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './import';
diff --git a/js/src/dapps/signaturereg/Loading/index.js b/js/src/dapps/signaturereg/Loading/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0468cab37dfd505cb0b1ef415376ca121ab9ca89
--- /dev/null
+++ b/js/src/dapps/signaturereg/Loading/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './loading';
diff --git a/js/src/dapps/signaturereg/Loading/loading.css b/js/src/dapps/signaturereg/Loading/loading.css
new file mode 100644
index 0000000000000000000000000000000000000000..b77d1a23725749001e0ff1e0675844afefa37aa8
--- /dev/null
+++ b/js/src/dapps/signaturereg/Loading/loading.css
@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.loading {
+  width: 100%;
+  text-align: center;
+  padding-top: 5em;
+  font-size: 2em;
+  color: #999;
+}
diff --git a/js/src/dapps/signaturereg/Loading/loading.js b/js/src/dapps/signaturereg/Loading/loading.js
new file mode 100644
index 0000000000000000000000000000000000000000..b884597d763299230e7f956d2778783141f41feb
--- /dev/null
+++ b/js/src/dapps/signaturereg/Loading/loading.js
@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import styles from './loading.css';
+
+export default class Loading extends Component {
+  render () {
+    return (
+      <div className={ styles.loading }>
+        Attaching to contract ...
+      </div>
+    );
+  }
+}
diff --git a/js/src/dapps/signaturereg/format.js b/js/src/dapps/signaturereg/format.js
new file mode 100644
index 0000000000000000000000000000000000000000..24b6428f48d67bb0cc99c3f6df9817f7be36c363
--- /dev/null
+++ b/js/src/dapps/signaturereg/format.js
@@ -0,0 +1,40 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import moment from 'moment';
+
+import { api } from './parity';
+
+const ZERO = new BigNumber(0);
+
+export function formatBlockNumber (blockNumber) {
+  return ZERO.eq(blockNumber || 0)
+    ? 'Pending'
+    : `${blockNumber.toFormat()}`;
+}
+
+export function formatSignature (signature) {
+  return api.util.bytesToHex(signature);
+}
+
+export function formatBlockTimestamp (block) {
+  if (!block || !block.timestamp) {
+    return null;
+  }
+
+  return moment(block.timestamp).fromNow();
+}
diff --git a/js/src/dapps/signaturereg/parity.js b/js/src/dapps/signaturereg/parity.js
new file mode 100644
index 0000000000000000000000000000000000000000..f6d59f44d5771db93be36fa0ed8af8889d14af51
--- /dev/null
+++ b/js/src/dapps/signaturereg/parity.js
@@ -0,0 +1,21 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const { api } = window.parity;
+
+export {
+  api
+};
diff --git a/js/src/dapps/signaturereg/services.js b/js/src/dapps/signaturereg/services.js
new file mode 100644
index 0000000000000000000000000000000000000000..3963d394c7f2c33a50d3d518068ff6a5ea7139bf
--- /dev/null
+++ b/js/src/dapps/signaturereg/services.js
@@ -0,0 +1,173 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import * as abis from '../../contracts/abi';
+import { api } from './parity';
+
+const sortEvents = (a, b) => b.blockNumber.cmp(a.blockNumber) || b.logIndex.cmp(a.logIndex);
+
+const logToEvent = (log) => {
+  const key = api.util.sha3(JSON.stringify(log));
+  const { blockNumber, logIndex, transactionHash, transactionIndex, params, type } = log;
+
+  return {
+    type: log.event,
+    state: type,
+    blockNumber,
+    logIndex,
+    transactionHash,
+    transactionIndex,
+    params,
+    key
+  };
+};
+
+export function attachInterface (callback) {
+  return api.ethcore
+    .registryAddress()
+    .then((registryAddress) => {
+      console.log(`the registry was found at ${registryAddress}`);
+
+      const registry = api.newContract(abis.registry, registryAddress).instance;
+
+      return Promise
+        .all([
+          registry.getAddress.call({}, [api.util.sha3('signaturereg'), 'A']),
+          api.personal.listAccounts(),
+          api.personal.accountsInfo()
+        ]);
+    })
+    .then(([address, addresses, accountsInfo]) => {
+      console.log(`signaturereg was found at ${address}`);
+
+      const contract = api.newContract(abis.signaturereg, address);
+      const accounts = addresses.reduce((obj, address) => {
+        const info = accountsInfo[address];
+
+        return Object.assign(obj, {
+          [address]: {
+            address,
+            name: info.name || 'Unnamed',
+            uuid: info.uuid
+          }
+        });
+      }, {});
+      const fromAddress = Object.keys(accounts)[0];
+
+      return {
+        accounts,
+        address,
+        accountsInfo,
+        contract,
+        instance: contract.instance,
+        fromAddress
+      };
+    })
+    .catch((error) => {
+      console.error('attachInterface', error);
+    });
+}
+
+export function attachBlockNumber (instance, callback) {
+  return api.subscribe('eth_blockNumber', (error, blockNumber) => {
+    if (error) {
+      console.error('blockNumber', error);
+      return;
+    }
+
+    instance.totalSignatures
+      .call()
+      .then((totalSignatures) => {
+        callback({
+          blockNumber,
+          totalSignatures
+        });
+      })
+      .catch((error) => {
+        console.error('totalSignatures', error);
+      });
+  });
+}
+
+export function attachEvents (contract, callback) {
+  const blocks = { '0': {} };
+  let mined = [];
+  let pending = [];
+  let events = [];
+
+  const options = {
+    fromBlock: 0,
+    toBlock: 'pending',
+    limit: 50
+  };
+
+  return contract.subscribe('Registered', options, (error, _logs) => {
+    if (error) {
+      console.error('events', error);
+      return;
+    }
+
+    const logs = _logs.map(logToEvent);
+
+    mined = logs
+      .filter((log) => log.state === 'mined')
+      .map((log) => {
+        const blockNumber = log.blockNumber.toString();
+
+        if (!blocks[blockNumber]) {
+          blocks[blockNumber] = {};
+          getBlock(blockNumber).then((block) => {
+            Object.assign(blocks[blockNumber], block);
+          });
+        }
+
+        return Object.assign(log, { block: blocks[blockNumber] });
+      })
+      .reverse()
+      .concat(mined)
+      .sort(sortEvents);
+
+    pending = logs
+      .filter((log) => log.state === 'pending')
+      .reverse()
+      .filter((event) => !pending.find((log) => log.params.method === event.params.method))
+      .concat(pending)
+      .filter((event) => !mined.find((log) => log.params.method === event.params.method))
+      .sort(sortEvents);
+
+    events = pending.concat(mined);
+
+    callback({ events });
+  });
+}
+
+export function getBlock (blockNumber) {
+  return api.eth.getBlockByNumber(blockNumber);
+}
+
+export function callRegister (instance, id, options = {}) {
+  return instance.register.call(options, [id]);
+}
+
+export function postRegister (instance, id, options = {}) {
+  return instance.register
+    .estimateGas(options, [id])
+    .then((gas) => {
+      options.gas = gas.mul(1.2).toFixed(0);
+      console.log('postRegister', `gas estimated at ${gas.toFormat(0)}, setting to ${gas.mul(1.2).toFormat(0)}`);
+      instance.register.postTransaction(options, [id]);
+    });
+}
diff --git a/js/src/dapps/style.css b/js/src/dapps/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..b177a15f9264ae3f0563b51b719755d548a62a01
--- /dev/null
+++ b/js/src/dapps/style.css
@@ -0,0 +1,46 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+:root,
+:root body {
+  background: #fff;
+  border: 0;
+  color: #333;
+  font-size: 16px;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300 !important;
+  margin: 0;
+  padding: 0;
+  vertical-align: top;
+}
+
+:root,
+:root body,
+:root :global(#container) {
+  min-height: 100%;
+  width: 100%;
+  display: flex;
+  flex: 1;
+}
+
+:root * {
+  font-weight: 300 !important;
+}
+
+:root :global(#container) > div {
+  flex: 1;
+}
diff --git a/js/src/dapps/tokenreg.html b/js/src/dapps/tokenreg.html
new file mode 100644
index 0000000000000000000000000000000000000000..ecb03d0055b1d4a413913413a7a25c723fbe885f
--- /dev/null
+++ b/js/src/dapps/tokenreg.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Token Registry</title>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="vendor.js"></script>
+    <script src="commons.js"></script>
+    <script src="parity.js"></script>
+    <script src="tokenreg.js"></script>
+  </body>
+</html>
diff --git a/js/src/dapps/tokenreg.js b/js/src/dapps/tokenreg.js
new file mode 100644
index 0000000000000000000000000000000000000000..8ca70e114f04a74630c48e58c13b99e9e4cb4aa5
--- /dev/null
+++ b/js/src/dapps/tokenreg.js
@@ -0,0 +1,39 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
+import store from './tokenreg/store';
+import Container from './tokenreg/Container';
+
+import '../../assets/fonts/Roboto/font.css';
+import '../../assets/fonts/RobotoMono/font.css';
+import './style.css';
+import './tokenreg.html';
+
+ReactDOM.render(
+  (
+  <Provider store={ store }>
+    <Container />
+  </Provider>
+  ),
+  document.querySelector('#container')
+);
diff --git a/js/src/dapps/tokenreg/Accounts/AccountSelector/account-selector.css b/js/src/dapps/tokenreg/Accounts/AccountSelector/account-selector.css
new file mode 100644
index 0000000000000000000000000000000000000000..f6f8476bb3e4f31d2711fc6faeaeac1bb6ecd2cd
--- /dev/null
+++ b/js/src/dapps/tokenreg/Accounts/AccountSelector/account-selector.css
@@ -0,0 +1,25 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.account-selector {
+}
+
+.avatar > img {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/js/src/dapps/tokenreg/Accounts/AccountSelector/account-selector.js b/js/src/dapps/tokenreg/Accounts/AccountSelector/account-selector.js
new file mode 100644
index 0000000000000000000000000000000000000000..4c8525d7ee8d795294966e1e317b903430480f64
--- /dev/null
+++ b/js/src/dapps/tokenreg/Accounts/AccountSelector/account-selector.js
@@ -0,0 +1,120 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { List, ListItem } from 'material-ui/List';
+import Subheader from 'material-ui/Subheader';
+import Avatar from 'material-ui/Avatar';
+
+import IdentityIcon from '../../IdentityIcon';
+
+import styles from './account-selector.css';
+
+class AccountSelectorItem extends Component {
+
+  static propTypes = {
+    onSelectAccount: PropTypes.func.isRequired,
+    account: PropTypes.object.isRequired
+  };
+
+  render () {
+    const account = this.props.account;
+
+    const props = Object.assign({}, this.props);
+    delete props.account;
+    delete props.onSelectAccount;
+
+    const icon = (<IdentityIcon
+      inline center
+      address={ account.address } />
+    );
+
+    const avatar = (<Avatar
+      className={ styles.avatar }
+      backgroundColor='none'
+      icon={ icon } />
+    );
+
+    return (
+      <ListItem
+        onClick={ this.onSelectAccount }
+        value={ account.address }
+        primaryText={ account.name }
+        secondaryText={ account.address }
+        leftAvatar={ avatar }
+        { ...props } />
+    );
+  }
+
+  onSelectAccount = () => {
+    this.props.onSelectAccount(this.props.account.address);
+  }
+
+}
+
+export default class AccountSelector extends Component {
+
+  static propTypes = {
+    list: PropTypes.array.isRequired,
+    selected: PropTypes.object.isRequired,
+    handleSetSelected: PropTypes.func.isRequired
+  };
+
+  state = {
+    open: false
+  };
+
+  render () {
+    const nestedAccounts = this.renderAccounts(this.props.list);
+    const selectedAccount = (
+      <AccountSelectorItem
+        account={ this.props.selected }
+        nestedItems={ nestedAccounts }
+        open={ this.state.open }
+        onSelectAccount={ this.onToggleOpen }
+        autoGenerateNestedIndicator={ false } />
+    );
+
+    return (
+      <div className={ styles['account-selector'] }>
+        <List>
+          <Subheader>Select an account</Subheader>
+          { selectedAccount }
+        </List>
+      </div>
+    );
+  }
+
+  renderAccounts (accounts) {
+    return accounts
+      .map((account, index) => (
+        <AccountSelectorItem
+          account={ account }
+          onSelectAccount={ this.onSelectAccount }
+          key={ index } />
+      ));
+  }
+
+  onToggleOpen = () => {
+    this.setState({ open: !this.state.open });
+  }
+
+  onSelectAccount = (address) => {
+    this.props.handleSetSelected(address);
+    this.onToggleOpen();
+  }
+
+}
diff --git a/js/src/dapps/tokenreg/Accounts/AccountSelector/container.js b/js/src/dapps/tokenreg/Accounts/AccountSelector/container.js
new file mode 100644
index 0000000000000000000000000000000000000000..6438d1dff7c61f939e4598c7e4b280cdee62b1ec
--- /dev/null
+++ b/js/src/dapps/tokenreg/Accounts/AccountSelector/container.js
@@ -0,0 +1,45 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import AccountSelector from './account-selector';
+
+import { setSelectedAccount } from '../actions';
+
+class AccountSelectorContainer extends Component {
+  render () {
+    return (<AccountSelector
+      { ...this.props }
+    />);
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { accounts } = state;
+  return { ...accounts };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    handleSetSelected: (address) => {
+      dispatch(setSelectedAccount(address));
+    }
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(AccountSelectorContainer);
diff --git a/js/src/dapps/tokenreg/Accounts/AccountSelector/index.js b/js/src/dapps/tokenreg/Accounts/AccountSelector/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..87fbc567ef2f3db31a65d206720db12454dfcd7e
--- /dev/null
+++ b/js/src/dapps/tokenreg/Accounts/AccountSelector/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './container';
diff --git a/js/src/dapps/tokenreg/Accounts/actions.js b/js/src/dapps/tokenreg/Accounts/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..2e597f2e55b9c79061a2cf9d48a2a848c263c36d
--- /dev/null
+++ b/js/src/dapps/tokenreg/Accounts/actions.js
@@ -0,0 +1,61 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const { api } = window.parity;
+
+export const SET_ACCOUNTS = 'SET_ACCOUNTS';
+export const setAccounts = (accounts) => ({
+  type: SET_ACCOUNTS,
+  accounts
+});
+
+export const SET_ACCOUNTS_INFO = 'SET_ACCOUNTS_INFO';
+export const setAccountsInfo = (accountsInfo) => ({
+  type: SET_ACCOUNTS_INFO,
+  accountsInfo
+});
+
+export const SET_SELECTED_ACCOUNT = 'SET_SELECTED_ACCOUNT';
+export const setSelectedAccount = (address) => ({
+  type: SET_SELECTED_ACCOUNT,
+  address
+});
+
+export const loadAccounts = () => (dispatch) => {
+  Promise
+    .all([
+      api.personal.listAccounts(),
+      api.personal.accountsInfo()
+    ])
+    .then(results => {
+      const [ accounts, accountsInfo ] = results;
+
+      const accountsList = accounts
+        .map(address => ({
+          ...accountsInfo[address],
+          address
+        }));
+
+      console.log('accounts', accountsList);
+
+      dispatch(setAccounts(accountsList));
+      dispatch(setAccountsInfo(accountsInfo));
+      dispatch(setSelectedAccount(accountsList[0].address));
+    })
+    .catch(e => {
+      console.error('loadAccounts error', e);
+    });
+};
diff --git a/js/src/dapps/tokenreg/Accounts/reducer.js b/js/src/dapps/tokenreg/Accounts/reducer.js
new file mode 100644
index 0000000000000000000000000000000000000000..091df4c8a66743d9d52a8160f16b2ba27d66f336
--- /dev/null
+++ b/js/src/dapps/tokenreg/Accounts/reducer.js
@@ -0,0 +1,57 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import {
+  SET_ACCOUNTS,
+  SET_SELECTED_ACCOUNT,
+  SET_ACCOUNTS_INFO
+} from './actions';
+
+const initialState = {
+  list: [],
+  accountsInfo: {},
+  selected: null
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case SET_ACCOUNTS:
+      return {
+        ...state,
+        list: [].concat(action.accounts)
+      };
+
+    case SET_ACCOUNTS_INFO:
+      return {
+        ...state,
+        accountsInfo: { ...action.accountsInfo }
+      };
+
+    case SET_SELECTED_ACCOUNT: {
+      const address = action.address;
+      const account = state.list.find(a => a.address === address);
+
+      return {
+        ...state,
+        selected: account
+      };
+    }
+
+    default:
+      return state;
+  }
+};
+
diff --git a/js/src/dapps/tokenreg/Actions/Query/index.js b/js/src/dapps/tokenreg/Actions/Query/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..83bc6a337ca01c63b7565a611dbf847c05838e49
--- /dev/null
+++ b/js/src/dapps/tokenreg/Actions/Query/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './query';
diff --git a/js/src/dapps/tokenreg/Actions/Query/query.js b/js/src/dapps/tokenreg/Actions/Query/query.js
new file mode 100644
index 0000000000000000000000000000000000000000..16d13f2f04e105e7398eba9ae2c9ba5e01a3943c
--- /dev/null
+++ b/js/src/dapps/tokenreg/Actions/Query/query.js
@@ -0,0 +1,207 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { Dialog, FlatButton, SelectField, MenuItem } from 'material-ui';
+
+import InputText from '../../Inputs/Text';
+import Loading from '../../Loading';
+import Token from '../../Tokens/Token';
+
+import { SIMPLE_TOKEN_ADDRESS_TYPE, SIMPLE_TLA_TYPE } from '../../Inputs/validation';
+
+import styles from '../actions.css';
+
+const initState = {
+  queryKey: 'tla',
+  form: {
+    valid: false,
+    value: ''
+  }
+};
+
+export default class QueryAction extends Component {
+
+  static propTypes = {
+    show: PropTypes.bool.isRequired,
+    loading: PropTypes.bool.isRequired,
+
+    onClose: PropTypes.func.isRequired,
+    handleQueryToken: PropTypes.func.isRequired,
+    handleQueryMetaLookup: PropTypes.func.isRequired,
+
+    data: PropTypes.object,
+    notFound: PropTypes.bool,
+    metaLoading: PropTypes.bool,
+    metaData: PropTypes.object
+  }
+
+  state = initState;
+
+  render () {
+    return (
+      <Dialog
+        title={ 'search for a token' }
+        open={ this.props.show }
+        className={ styles.dialog }
+        onRequestClose={ this.onClose }
+        actions={ this.renderActions() } >
+        { this.renderContent() }
+      </Dialog>
+    );
+  }
+
+  renderActions () {
+    const { loading, data, notFound } = this.props;
+
+    if (loading) {
+      return (
+        <FlatButton
+          label='Loading...'
+          primary
+          disabled />
+      );
+    }
+
+    const complete = data || notFound;
+
+    if (complete) {
+      return ([
+        <FlatButton
+          label='Close'
+          primary
+          onTouchTap={ this.onClose } />
+      ]);
+    }
+
+    const isValid = this.state.form.valid;
+
+    return ([
+      <FlatButton
+        label='Cancel'
+        primary
+        onTouchTap={ this.onClose } />,
+      <FlatButton
+        label='Query'
+        primary
+        disabled={ !isValid }
+        onTouchTap={ this.onQuery } />
+    ]);
+  }
+
+  renderContent () {
+    const { loading, notFound, data } = this.props;
+
+    if (loading) {
+      return (
+        <Loading size={ 1 } />
+      );
+    }
+
+    if (notFound) {
+      return (
+        <p>No token has been found in the registry...</p>
+      );
+    }
+
+    if (data) {
+      return this.renderData();
+    }
+
+    return this.renderForm();
+  }
+
+  renderData () {
+    const { data } = this.props;
+
+    return (
+      <Token
+        fullWidth
+        handleMetaLookup={ this.props.handleQueryMetaLookup }
+        isMetaLoading={ this.props.metaLoading }
+        meta={ this.props.metaData }
+        { ...data }
+        />
+    );
+  }
+
+  renderForm () {
+    return (
+      <div>
+        <SelectField
+          floatingLabelText='Select which field to query'
+          fullWidth
+          value={ this.state.queryKey }
+          onChange={ this.onQueryKeyChange }>
+          <MenuItem value='tla' label='TLA' primaryText='TLA' />
+          <MenuItem value='address' label='Address' primaryText='Address' />
+        </SelectField>
+
+        {
+          this.state.queryKey !== 'tla'
+          ? (<InputText
+            key={ 0 }
+
+            floatingLabelText="Token's address"
+            hintText='0xdeadbeef...'
+
+            validationType={ SIMPLE_TOKEN_ADDRESS_TYPE }
+            onChange={ this.onChange }
+            onEnter={ this.onQuery } />)
+          : (<InputText
+            key={ 1 }
+
+            floatingLabelText="Token's TLA"
+            hintText='GAV'
+
+            validationType={ SIMPLE_TLA_TYPE }
+            onChange={ this.onChange }
+            onEnter={ this.onQuery } />)
+        }
+      </div>
+    );
+  }
+
+  onQueryKeyChange = (event, index, queryKey) => {
+    this.setState({
+      queryKey,
+      form: { valid: false, value: '' }
+    });
+  }
+
+  onChange = (valid, value) => {
+    this.setState({
+      form: {
+        valid, value
+      }
+    });
+  }
+
+  onQuery = () => {
+    if (!this.state.form.valid) return;
+
+    const { queryKey, form } = this.state;
+
+    this.props.handleQueryToken(queryKey, form.value);
+  }
+
+  onClose = () => {
+    this.setState(initState);
+    this.props.onClose();
+  }
+
+}
diff --git a/js/src/dapps/tokenreg/Actions/Register/index.js b/js/src/dapps/tokenreg/Actions/Register/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3099d1f42f33b844b8c9a86f23c3250a0e613b7b
--- /dev/null
+++ b/js/src/dapps/tokenreg/Actions/Register/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './register';
diff --git a/js/src/dapps/tokenreg/Actions/Register/register.js b/js/src/dapps/tokenreg/Actions/Register/register.js
new file mode 100644
index 0000000000000000000000000000000000000000..78d823326f26ef6bf6537fdcd6700b6fa6c98f16
--- /dev/null
+++ b/js/src/dapps/tokenreg/Actions/Register/register.js
@@ -0,0 +1,217 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { Dialog, FlatButton } from 'material-ui';
+
+import AccountSelector from '../../Accounts/AccountSelector';
+import InputText from '../../Inputs/Text';
+
+import { TOKEN_ADDRESS_TYPE, TLA_TYPE, UINT_TYPE, STRING_TYPE } from '../../Inputs/validation';
+
+import styles from '../actions.css';
+
+const defaultField = { value: '', valid: false };
+const initState = {
+  isFormValid: false,
+  fields: {
+    address: {
+      ...defaultField,
+      type: TOKEN_ADDRESS_TYPE,
+      floatingLabelText: 'Token address',
+      hintText: 'The token address'
+    },
+    tla: {
+      ...defaultField,
+      type: TLA_TYPE,
+      floatingLabelText: 'Token TLA',
+      hintText: 'The token short name (3 characters)'
+    },
+    base: {
+      ...defaultField,
+      type: UINT_TYPE,
+      floatingLabelText: 'Token Base',
+      hintText: 'The token precision'
+    },
+    name: {
+      ...defaultField,
+      type: STRING_TYPE,
+      floatingLabelText: 'Token name',
+      hintText: 'The token name'
+    }
+  }
+};
+
+export default class RegisterAction extends Component {
+
+  static propTypes = {
+    show: PropTypes.bool.isRequired,
+    sending: PropTypes.bool.isRequired,
+    complete: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    handleRegisterToken: PropTypes.func.isRequired,
+
+    error: PropTypes.object
+  }
+
+  state = initState;
+
+  render () {
+    const { sending, error, complete } = this.props;
+
+    return (
+      <Dialog
+        title={ error ? 'error' : 'register a new token' }
+        open={ this.props.show }
+        modal={ sending || complete }
+        className={ styles.dialog }
+        onRequestClose={ this.onClose }
+        actions={ this.renderActions() } >
+        { this.renderContent() }
+      </Dialog>
+    );
+  }
+
+  renderActions () {
+    const { complete, sending, error } = this.props;
+
+    if (error) {
+      return (
+        <FlatButton
+          label='Close'
+          primary
+          onTouchTap={ this.onClose } />
+      );
+    }
+
+    if (complete) {
+      return (
+        <FlatButton
+          label='Done'
+          primary
+          onTouchTap={ this.onClose } />
+      );
+    }
+
+    const isValid = this.state.isFormValid;
+
+    return ([
+      <FlatButton
+        label='Cancel'
+        primary
+        onTouchTap={ this.onClose } />,
+      <FlatButton
+        label={ sending ? 'Sending...' : 'Register' }
+        primary
+        disabled={ !isValid || sending }
+        onTouchTap={ this.onRegister } />
+    ]);
+  }
+
+  renderContent () {
+    const { error, complete } = this.props;
+
+    if (error) return this.renderError();
+    if (complete) return this.renderComplete();
+    return this.renderForm();
+  }
+
+  renderError () {
+    const { error } = this.props;
+
+    return (<div>
+      <p className={ styles.error }>{ error.toString() }</p>
+    </div>);
+  }
+
+  renderComplete () {
+    return (<div>
+      <p>Your transaction has been posted. Please visit the Parity Signer to authenticate the transfer.</p>
+    </div>);
+  }
+
+  renderForm () {
+    return (
+      <div>
+        <AccountSelector />
+        { this.renderInputs() }
+      </div>
+    );
+  }
+
+  renderInputs () {
+    const { fields } = this.state;
+
+    return Object.keys(fields).map((fieldKey, index) => {
+      const onChange = this.onChange.bind(this, fieldKey);
+      const field = fields[fieldKey];
+
+      return (
+        <InputText
+          key={ index }
+
+          floatingLabelText={ field.floatingLabelText }
+          hintText={ field.hintText }
+
+          validationType={ field.type }
+          onChange={ onChange } />
+      );
+    });
+  }
+
+  onChange (fieldKey, valid, value) {
+    const { fields } = this.state;
+    const field = fields[fieldKey];
+
+    const newFields = {
+      ...fields,
+      [ fieldKey ]: {
+        ...field,
+        valid, value
+      }
+    };
+
+    const isFormValid = Object.keys(newFields)
+      .map(key => newFields[key].valid)
+      .reduce((current, fieldValid) => {
+        return current && fieldValid;
+      }, true);
+
+    this.setState({
+      fields: newFields,
+      isFormValid
+    });
+  }
+
+  onRegister = () => {
+    const { fields } = this.state;
+
+    const data = Object.keys(fields)
+      .reduce((dataObject, fieldKey) => {
+        dataObject[fieldKey] = fields[fieldKey].value;
+        return dataObject;
+      }, {});
+
+    this.props.handleRegisterToken(data);
+  }
+
+  onClose = () => {
+    this.setState(initState);
+    this.props.onClose();
+  }
+
+}
diff --git a/js/src/dapps/tokenreg/Actions/actions.css b/js/src/dapps/tokenreg/Actions/actions.css
new file mode 100644
index 0000000000000000000000000000000000000000..d8eba57f1e513fcb0dfcf1c96ea31efc3d7f03a0
--- /dev/null
+++ b/js/src/dapps/tokenreg/Actions/actions.css
@@ -0,0 +1,50 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.actions {
+  padding-top: 2rem;
+}
+
+.button {
+  margin: 0 0.5em;
+}
+
+.button button {
+  background-color: #27ae60 !important;
+  height: 56px !important;
+  padding: 0 10px !important;
+}
+
+.button button[disabled] {
+  background-color: rgba(50, 50, 50, 0.25) !important;
+}
+
+.dialog {
+}
+
+.dialog h3 {
+  color: rgba(50, 100, 150, 1) !important;
+  text-transform: uppercase;
+}
+
+.dialogtext {
+  padding-top: 1em;
+}
+
+.error {
+  color: red;
+}
diff --git a/js/src/dapps/tokenreg/Actions/actions.js b/js/src/dapps/tokenreg/Actions/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..0f3390ea4f52eed6d67b94d4cc47e22da7ee52bb
--- /dev/null
+++ b/js/src/dapps/tokenreg/Actions/actions.js
@@ -0,0 +1,215 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { getTokenTotalSupply } from '../utils';
+
+const { sha3, bytesToHex } = window.parity.api.util;
+
+export const SET_REGISTER_SENDING = 'SET_REGISTER_SENDING';
+export const setRegisterSending = (isSending) => ({
+  type: SET_REGISTER_SENDING,
+  isSending
+});
+
+export const SET_REGISTER_ERROR = 'SET_REGISTER_ERROR';
+export const setRegisterError = (e) => ({
+  type: SET_REGISTER_ERROR,
+  error: e
+});
+
+export const REGISTER_RESET = 'REGISTER_RESET';
+export const registerReset = () => ({
+  type: REGISTER_RESET
+});
+
+export const REGISTER_COMPLETED = 'REGISTER_COMPLETED';
+export const registerCompleted = () => ({
+  type: REGISTER_COMPLETED
+});
+
+export const registerToken = (tokenData) => (dispatch, getState) => {
+  console.log('registering token', tokenData);
+
+  const state = getState();
+  const contractInstance = state.status.contract.instance;
+  const fee = state.status.contract.fee;
+
+  const { address, base, name, tla } = tokenData;
+
+  dispatch(setRegisterSending(true));
+
+  const values = [ address, tla, base, name ];
+  const options = {
+    from: state.accounts.selected.address,
+    value: fee
+  };
+
+  Promise.resolve()
+    .then(() => {
+      return contractInstance
+        .fromTLA.call({}, [ tla ])
+        .then(([id, address, base, name, owner]) => {
+          if (owner !== '0x0000000000000000000000000000000000000000') {
+            throw new Error(`A Token has already been registered with the TLA ${tla}`);
+          }
+        });
+    })
+    .then(() => {
+      return contractInstance
+        .fromAddress.call({}, [ address ])
+        .then(([id, tla, base, name, owner]) => {
+          if (owner !== '0x0000000000000000000000000000000000000000') {
+            throw new Error(`A Token has already been registered with the Address ${address}`);
+          }
+        });
+    })
+    .then(() => {
+      return contractInstance
+        .register.estimateGas(options, values);
+    })
+    .then((gasEstimate) => {
+      options.gas = gasEstimate.mul(1.2).toFixed(0);
+      console.log(`transfer: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
+
+      return contractInstance.register.postTransaction(options, values);
+    })
+    .then((result) => {
+      dispatch(registerCompleted());
+    })
+    .catch((e) => {
+      console.error('registerToken error', e);
+      dispatch(setRegisterError(e));
+    });
+};
+
+export const SET_QUERY_LOADING = 'SET_QUERY_LOADING';
+export const setQueryLoading = (isLoading) => ({
+  type: SET_QUERY_LOADING,
+  isLoading
+});
+
+export const SET_QUERY_RESULT = 'SET_QUERY_RESULT';
+export const setQueryResult = (data) => ({
+  type: SET_QUERY_RESULT,
+  data
+});
+
+export const SET_QUERY_NOT_FOUND = 'SET_QUERY_NOT_FOUND';
+export const setQueryNotFound = () => ({
+  type: SET_QUERY_NOT_FOUND
+});
+
+export const QUERY_RESET = 'QUERY_RESET';
+export const queryReset = () => ({
+  type: QUERY_RESET
+});
+
+export const SET_QUERY_META_LOADING = 'SET_QUERY_META_LOADING';
+export const setQueryMetaLoading = (isLoading) => ({
+  type: SET_QUERY_META_LOADING,
+  isLoading
+});
+
+export const SET_QUERY_META = 'SET_QUERY_META';
+export const setQueryMeta = (data) => ({
+  type: SET_QUERY_META,
+  data
+});
+
+export const queryToken = (key, query) => (dispatch, getState) => {
+  const state = getState();
+  const contractInstance = state.status.contract.instance;
+
+  const contractFunc = (key === 'tla') ? 'fromTLA' : 'fromAddress';
+
+  dispatch(setQueryLoading(true));
+
+  contractInstance[contractFunc]
+    .call({}, [ query ])
+    .then((result) => {
+      const data = {
+        index: result[0].toNumber(),
+        base: result[2].toNumber(),
+        name: result[3],
+        owner: result[4]
+      };
+
+      if (key === 'tla') {
+        data.tla = query;
+        data.address = result[1];
+      }
+
+      if (key === 'address') {
+        data.address = query;
+        data.tla = result[1];
+      }
+
+      return data;
+    })
+    .then(data => {
+      return getTokenTotalSupply(data.address)
+        .then(totalSupply => {
+          data.totalSupply = totalSupply;
+          return data;
+        });
+    })
+    .then(data => {
+      if (data.totalSupply === null) {
+        dispatch(setQueryNotFound());
+        dispatch(setQueryLoading(false));
+
+        return false;
+      }
+
+      data.totalSupply = data.totalSupply.toNumber();
+      dispatch(setQueryResult(data));
+      dispatch(setQueryLoading(false));
+    }, () => {
+      dispatch(setQueryNotFound());
+      dispatch(setQueryLoading(false));
+    });
+};
+
+export const queryTokenMeta = (id, query) => (dispatch, getState) => {
+  console.log('loading token meta', query);
+
+  const state = getState();
+  const contractInstance = state.status.contract.instance;
+
+  const key = sha3(query);
+
+  const startDate = Date.now();
+  dispatch(setQueryMetaLoading(true));
+
+  contractInstance
+    .meta
+    .call({}, [ id, key ])
+    .then((value) => {
+      const meta = {
+        key, query,
+        value: value.find(v => v !== 0) ? bytesToHex(value) : null
+      };
+
+      dispatch(setQueryMeta(meta));
+
+      setTimeout(() => {
+        dispatch(setQueryMetaLoading(false));
+      }, 500 - (Date.now() - startDate));
+    })
+    .catch((e) => {
+      console.error('load meta query error', e);
+    });
+};
diff --git a/js/src/dapps/tokenreg/Actions/component.js b/js/src/dapps/tokenreg/Actions/component.js
new file mode 100644
index 0000000000000000000000000000000000000000..3e7ef0d6458a8e2d42c86eef629fc44e533588cb
--- /dev/null
+++ b/js/src/dapps/tokenreg/Actions/component.js
@@ -0,0 +1,119 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { RaisedButton } from 'material-ui';
+import ActionSearchIcon from 'material-ui/svg-icons/action/search';
+import ContentSendIcon from 'material-ui/svg-icons/content/send';
+
+import Register from './Register';
+import Query from './Query';
+
+import styles from './actions.css';
+
+const REGISTER_ACTION = 'REGISTER_ACTION';
+const QUERY_ACTION = 'QUERY_ACTION';
+
+export default class Actions extends Component {
+
+  static propTypes = {
+    handleRegisterToken: PropTypes.func.isRequired,
+    handleRegisterClose: PropTypes.func.isRequired,
+    register: PropTypes.object.isRequired,
+
+    handleQueryToken: PropTypes.func.isRequired,
+    handleQueryClose: PropTypes.func.isRequired,
+    handleQueryMetaLookup: PropTypes.func.isRequired,
+    query: PropTypes.object.isRequired
+  };
+
+  state = {
+    show: {
+      [ REGISTER_ACTION ]: false,
+      [ QUERY_ACTION ]: false
+    }
+  }
+
+  constructor () {
+    super();
+
+    this.onShowRegister = this.onShow.bind(this, REGISTER_ACTION);
+    this.onShowQuery = this.onShow.bind(this, QUERY_ACTION);
+  }
+
+  render () {
+    return (
+      <div className={ styles.actions }>
+        <RaisedButton
+          className={ styles.button }
+          icon={ <ContentSendIcon /> }
+          label='Register Token'
+          primary
+          onTouchTap={ this.onShowRegister } />
+
+        <RaisedButton
+          className={ styles.button }
+          icon={ <ActionSearchIcon /> }
+          label='Search Token'
+          primary
+          onTouchTap={ this.onShowQuery } />
+
+        <Register
+          show={ this.state.show[ REGISTER_ACTION ] }
+          onClose={ this.onRegisterClose }
+          handleRegisterToken={ this.props.handleRegisterToken }
+          { ...this.props.register } />
+
+        <Query
+          show={ this.state.show[ QUERY_ACTION ] }
+          onClose={ this.onQueryClose }
+          handleQueryToken={ this.props.handleQueryToken }
+          handleQueryMetaLookup={ this.props.handleQueryMetaLookup }
+          { ...this.props.query } />
+      </div>
+    );
+  }
+
+  onRegisterClose = () => {
+    this.onHide(REGISTER_ACTION);
+    this.props.handleRegisterClose();
+  }
+
+  onQueryClose = () => {
+    this.onHide(QUERY_ACTION);
+    this.props.handleQueryClose();
+  }
+
+  onShow (key) {
+    this.setState({
+      show: {
+        ...this.state.show,
+        [ key ]: true
+      }
+    });
+  }
+
+  onHide (key) {
+    this.setState({
+      show: {
+        ...this.state.show,
+        [ key ]: false
+      }
+    });
+  }
+
+}
diff --git a/js/src/dapps/tokenreg/Actions/container.js b/js/src/dapps/tokenreg/Actions/container.js
new file mode 100644
index 0000000000000000000000000000000000000000..2c37731222ace95fdcf10b8d310d3557c880aa51
--- /dev/null
+++ b/js/src/dapps/tokenreg/Actions/container.js
@@ -0,0 +1,62 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import Actions from './component';
+
+import { registerToken, registerReset, queryToken, queryReset, queryTokenMeta } from './actions';
+
+class TokensContainer extends Component {
+
+  render () {
+    return (<Actions
+      { ...this.props }
+    />);
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { register, query } = state.actions;
+
+  return { register, query };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    handleRegisterToken: (tokenData) => {
+      dispatch(registerToken(tokenData));
+    },
+    handleRegisterClose: () => {
+      dispatch(registerReset());
+    },
+    handleQueryToken: (key, query) => {
+      dispatch(queryToken(key, query));
+    },
+    handleQueryClose: () => {
+      dispatch(queryReset());
+    },
+    handleQueryMetaLookup: (id, query) => {
+      dispatch(queryTokenMeta(id, query));
+    }
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TokensContainer);
diff --git a/js/src/dapps/tokenreg/Actions/index.js b/js/src/dapps/tokenreg/Actions/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..9007217b714120bff96d4b62f9f0ad0ac69ac104
--- /dev/null
+++ b/js/src/dapps/tokenreg/Actions/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './container.js';
diff --git a/js/src/dapps/tokenreg/Actions/reducer.js b/js/src/dapps/tokenreg/Actions/reducer.js
new file mode 100644
index 0000000000000000000000000000000000000000..7b7f8341a32795f9de8c2a022d5a821f6a80c1f4
--- /dev/null
+++ b/js/src/dapps/tokenreg/Actions/reducer.js
@@ -0,0 +1,155 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import {
+  SET_REGISTER_SENDING,
+  SET_REGISTER_ERROR,
+  REGISTER_RESET,
+  REGISTER_COMPLETED,
+
+  SET_QUERY_LOADING,
+  SET_QUERY_RESULT,
+  SET_QUERY_NOT_FOUND,
+  SET_QUERY_META_LOADING,
+  SET_QUERY_META,
+  QUERY_RESET
+} from './actions';
+
+const initialState = {
+  register: {
+    sending: false,
+    error: null,
+    complete: false
+  },
+  query: {
+    loading: false,
+    data: null,
+    notFound: false,
+    metaLoading: false,
+    metaData: null
+  }
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case SET_REGISTER_SENDING: {
+      const registerState = state.register;
+
+      return {
+        ...state,
+        register: {
+          ...registerState,
+          sending: action.isSending
+        }
+      };
+    }
+
+    case REGISTER_COMPLETED: {
+      const registerState = state.register;
+
+      return {
+        ...state,
+        register: {
+          ...registerState,
+          sending: false,
+          complete: true
+        }
+      };
+    }
+
+    case SET_REGISTER_ERROR: {
+      const registerState = state.register;
+
+      return {
+        ...state,
+        register: {
+          ...registerState,
+          sending: false,
+          error: action.error
+        }
+      };
+    }
+
+    case REGISTER_RESET: {
+      return {
+        ...state,
+        register: initialState.register
+      };
+    }
+
+    case SET_QUERY_LOADING: {
+      return {
+        ...state,
+        query: {
+          ...state.query,
+          loading: action.isLoading
+        }
+      };
+    }
+
+    case SET_QUERY_RESULT: {
+      return {
+        ...state,
+        query: {
+          ...state.query,
+          data: action.data
+        }
+      };
+    }
+
+    case SET_QUERY_NOT_FOUND: {
+      return {
+        ...state,
+        query: {
+          ...state.query,
+          notFound: true
+        }
+      };
+    }
+
+    case SET_QUERY_META_LOADING: {
+      return {
+        ...state,
+        query: {
+          ...state.query,
+          metaLoading: action.isLoading
+        }
+      };
+    }
+
+    case SET_QUERY_META: {
+      return {
+        ...state,
+        query: {
+          ...state.query,
+          metaData: action.data
+        }
+      };
+    }
+
+    case QUERY_RESET: {
+      return {
+        ...state,
+        query: {
+          ...initialState.query
+        }
+      };
+    }
+
+    default:
+      return state;
+  }
+};
diff --git a/js/src/dapps/tokenreg/Application/application.css b/js/src/dapps/tokenreg/Application/application.css
new file mode 100644
index 0000000000000000000000000000000000000000..07bc74b40c760c80e5848c73869fa7a0ad6ad4dd
--- /dev/null
+++ b/js/src/dapps/tokenreg/Application/application.css
@@ -0,0 +1,22 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.application {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
diff --git a/js/src/dapps/tokenreg/Application/application.js b/js/src/dapps/tokenreg/Application/application.js
new file mode 100644
index 0000000000000000000000000000000000000000..e48922b05338b149925e119e07c71c341b1bca2c
--- /dev/null
+++ b/js/src/dapps/tokenreg/Application/application.js
@@ -0,0 +1,72 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+
+import Loading from '../Loading';
+import Status from '../Status';
+import Tokens from '../Tokens';
+import Actions from '../Actions';
+
+import styles from './application.css';
+
+const muiTheme = getMuiTheme({
+  palette: {
+    primary1Color: '#27ae60'
+  }
+});
+
+export default class Application extends Component {
+  static childContextTypes = {
+    muiTheme: PropTypes.object
+  }
+
+  static propTypes = {
+    isLoading: PropTypes.bool.isRequired,
+
+    contract: PropTypes.object
+  };
+
+  render () {
+    const { isLoading, contract } = this.props;
+
+    if (isLoading) {
+      return (
+        <Loading />
+      );
+    }
+
+    return (
+      <div className={ styles.application }>
+        <Status
+          address={ contract.address }
+          fee={ contract.fee } />
+
+        <Actions />
+
+        <Tokens />
+      </div>
+    );
+  }
+
+  getChildContext () {
+    return {
+      muiTheme
+    };
+  }
+
+}
diff --git a/js/src/dapps/tokenreg/Application/index.js b/js/src/dapps/tokenreg/Application/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..236578226a80e822593c37acd1daad1c649950e1
--- /dev/null
+++ b/js/src/dapps/tokenreg/Application/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './application';
diff --git a/js/src/dapps/tokenreg/Chip/chip.css b/js/src/dapps/tokenreg/Chip/chip.css
new file mode 100644
index 0000000000000000000000000000000000000000..5c28d56ce635a43b0342b320da06da0ea58e2dda
--- /dev/null
+++ b/js/src/dapps/tokenreg/Chip/chip.css
@@ -0,0 +1,45 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.chip > span {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+}
+
+.chip img {
+  margin-bottom: -11px;
+  margin-left: -11px;
+}
+
+.value {
+  font-family: 'Roboto Mono', monospace;
+  color: rgba(255, 255, 255, 1);
+  -webkit-user-select: text;
+  cursor: text;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.label {
+  color: rgba(255, 255, 255, 0.7);
+  margin-left: 1em;
+  margin-right: 0.5em;
+  text-transform: uppercase;
+}
diff --git a/js/src/dapps/tokenreg/Chip/chip.js b/js/src/dapps/tokenreg/Chip/chip.js
new file mode 100644
index 0000000000000000000000000000000000000000..ad98860259ac664e330dec65607061a10b58a32f
--- /dev/null
+++ b/js/src/dapps/tokenreg/Chip/chip.js
@@ -0,0 +1,68 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { Chip } from 'material-ui';
+
+import IdentityIcon from '../IdentityIcon' ;
+
+import styles from './chip.css';
+
+export default class CustomChip extends Component {
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+
+    isAddress: PropTypes.bool,
+    displayValue: PropTypes.string
+  };
+
+  render () {
+    const { isAddress, value, label } = this.props;
+
+    const displayValue = this.props.displayValue || value;
+
+    return (
+      <Chip
+        className={ styles.chip }
+        style={ {
+          margin: '0.5em',
+          background: '#27ae60',
+          display: 'flex',
+          flexDirection: 'column'
+        } }>
+        { this.renderIcon(isAddress, value) }
+        <span className={ styles.value } title={ value }>
+          { displayValue }
+        </span>
+        <span className={ styles.label }>
+          { label }
+        </span>
+      </Chip>
+    );
+  }
+
+  renderIcon (isAddress, address) {
+    if (!isAddress) return;
+
+    return (
+      <IdentityIcon
+        inline center
+        address={ address } />
+    );
+  }
+}
diff --git a/js/src/dapps/tokenreg/Chip/index.js b/js/src/dapps/tokenreg/Chip/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..6e1ea80fba19db63dc6973f0ead3e7de9485239e
--- /dev/null
+++ b/js/src/dapps/tokenreg/Chip/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './chip';
diff --git a/js/src/dapps/tokenreg/Container.js b/js/src/dapps/tokenreg/Container.js
new file mode 100644
index 0000000000000000000000000000000000000000..9a8d7c63658418ce759aec4256dcdaf46f64caa0
--- /dev/null
+++ b/js/src/dapps/tokenreg/Container.js
@@ -0,0 +1,64 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+import Application from './Application';
+
+import { loadContract } from './Status/actions';
+import { loadAccounts } from './Accounts/actions';
+
+class Container extends Component {
+  static propTypes = {
+    isLoading: PropTypes.bool.isRequired,
+    contract: PropTypes.object.isRequired,
+    onLoad: PropTypes.func.isRequired
+  };
+
+  componentDidMount () {
+    this.props.onLoad();
+  }
+
+  render () {
+    const { isLoading, contract } = this.props;
+
+    return (<Application
+      isLoading={ isLoading }
+      contract={ contract }
+    />);
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { isLoading, contract } = state.status;
+
+  return {
+    isLoading,
+    contract
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onLoad: () => {
+      dispatch(loadContract());
+      dispatch(loadAccounts());
+    }
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Container);
diff --git a/js/src/dapps/tokenreg/IdentityIcon/identityIcon.css b/js/src/dapps/tokenreg/IdentityIcon/identityIcon.css
new file mode 100644
index 0000000000000000000000000000000000000000..2b645d8239b35335bcfb2bef2bd5f7eb64ab3bf4
--- /dev/null
+++ b/js/src/dapps/tokenreg/IdentityIcon/identityIcon.css
@@ -0,0 +1,23 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  margin-right: 0.5em;
+}
diff --git a/js/src/dapps/tokenreg/IdentityIcon/identityIcon.js b/js/src/dapps/tokenreg/IdentityIcon/identityIcon.js
new file mode 100644
index 0000000000000000000000000000000000000000..51f48d46ab3b54843b72899f8acea22afa947b9b
--- /dev/null
+++ b/js/src/dapps/tokenreg/IdentityIcon/identityIcon.js
@@ -0,0 +1,36 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../parity';
+import styles from './identityIcon.css';
+
+export default class IdentityIcon extends Component {
+  static propTypes = {
+    address: PropTypes.string.isRequired
+  }
+
+  render () {
+    const { address } = this.props;
+
+    return (
+      <img
+        className={ styles.icon }
+        src={ api.util.createIdentityImg(address, 4) } />
+    );
+  }
+}
diff --git a/js/src/dapps/tokenreg/IdentityIcon/index.js b/js/src/dapps/tokenreg/IdentityIcon/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..76c107bfb7540f707a9b2665aac9b52f9d7590fa
--- /dev/null
+++ b/js/src/dapps/tokenreg/IdentityIcon/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './identityIcon';
diff --git a/js/src/dapps/tokenreg/Inputs/Text/container.js b/js/src/dapps/tokenreg/Inputs/Text/container.js
new file mode 100644
index 0000000000000000000000000000000000000000..450a2b56e54acae1f1bd10e499fd1c891a0633b5
--- /dev/null
+++ b/js/src/dapps/tokenreg/Inputs/Text/container.js
@@ -0,0 +1,37 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import InputText from './input-text';
+
+class InputTextContainer extends Component {
+
+  render () {
+    return (<InputText
+      { ...this.props }
+    />);
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { contract } = state.status;
+
+  return { contract };
+};
+
+export default connect(mapStateToProps)(InputTextContainer);
diff --git a/js/src/dapps/tokenreg/Inputs/Text/index.js b/js/src/dapps/tokenreg/Inputs/Text/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..87fbc567ef2f3db31a65d206720db12454dfcd7e
--- /dev/null
+++ b/js/src/dapps/tokenreg/Inputs/Text/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './container';
diff --git a/js/src/dapps/tokenreg/Inputs/Text/input-text.js b/js/src/dapps/tokenreg/Inputs/Text/input-text.js
new file mode 100644
index 0000000000000000000000000000000000000000..289c8c37f38ae9a52dbafe3acdbbe9318d821435
--- /dev/null
+++ b/js/src/dapps/tokenreg/Inputs/Text/input-text.js
@@ -0,0 +1,141 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { TextField } from 'material-ui';
+import CheckIcon from 'material-ui/svg-icons/navigation/check';
+import { green500 } from 'material-ui/styles/colors';
+
+import Loading from '../../Loading';
+
+import { validate } from '../validation';
+
+import styles from '../inputs.css';
+
+const initState = {
+  error: null,
+  value: '',
+  valid: false,
+  disabled: false,
+  loading: false
+};
+
+export default class InputText extends Component {
+
+  static propTypes = {
+    validationType: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onEnter: PropTypes.func,
+
+    floatingLabelText: PropTypes.string,
+    hintText: PropTypes.string,
+
+    contract: PropTypes.object
+  }
+
+  state = initState;
+
+  render () {
+    const { disabled, error } = this.state;
+
+    return (
+      <div className={ styles['input-container'] }>
+        <TextField
+          floatingLabelText={ this.props.floatingLabelText }
+          hintText={ this.props.hintText }
+
+          autoComplete='off'
+          floatingLabelFixed
+          fullWidth
+          disabled={ disabled }
+          errorText={ error }
+          onChange={ this.onChange }
+          onKeyDown={ this.onKeyDown } />
+
+        { this.renderLoading() }
+        { this.renderIsValid() }
+      </div>
+    );
+  }
+
+  renderLoading () {
+    if (!this.state.loading) return;
+
+    return (
+      <div className={ styles['input-loading'] }>
+        <Loading size={ 0.3 } />
+      </div>
+    );
+  }
+
+  renderIsValid () {
+    if (this.state.loading || !this.state.valid) return;
+
+    return (
+      <div className={ styles['input-icon'] }>
+        <CheckIcon color={ green500 } />
+      </div>
+    );
+  }
+
+  onChange = (event) => {
+    const value = event.target.value;
+    // So we can focus on the input after async validation
+    event.persist();
+
+    const { validationType, contract } = this.props;
+
+    const validation = validate(value, validationType, contract);
+
+    if (validation instanceof Promise) {
+      this.setState({ disabled: true, loading: true });
+
+      return validation
+        .then(validation => {
+          this.setValidation({
+            ...validation,
+            disabled: false,
+            loading: false
+          });
+
+          event.target.focus();
+        });
+    }
+
+    this.setValidation(validation);
+  }
+
+  onKeyDown = (event) => {
+    if (!this.props.onEnter) return;
+    if (event.keyCode !== 13) return;
+
+    this.props.onEnter();
+  }
+
+  setValidation = (validation) => {
+    const { value } = validation;
+
+    this.setState({ ...validation });
+
+    if (validation.valid) {
+      return this.props.onChange(true, value);
+    }
+
+    return this.props.onChange(false, value);
+  }
+
+}
diff --git a/js/src/dapps/tokenreg/Inputs/inputs.css b/js/src/dapps/tokenreg/Inputs/inputs.css
new file mode 100644
index 0000000000000000000000000000000000000000..f8bea11483dc892325e67948470e3988f4461a1b
--- /dev/null
+++ b/js/src/dapps/tokenreg/Inputs/inputs.css
@@ -0,0 +1,33 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.input-container {
+  width: 100%;
+  position: relative;
+}
+
+.input-loading {
+  position: absolute;
+  right: -5px;
+  top: 20px;
+}
+
+.input-icon {
+  position: absolute;
+  right: 5px;
+  bottom: 10px;
+}
diff --git a/js/src/dapps/tokenreg/Inputs/validation.js b/js/src/dapps/tokenreg/Inputs/validation.js
new file mode 100644
index 0000000000000000000000000000000000000000..b2e0688a89f17786fa384e127da1cfd20893f95e
--- /dev/null
+++ b/js/src/dapps/tokenreg/Inputs/validation.js
@@ -0,0 +1,212 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import isURL from 'validator/lib/isURL';
+
+import { api } from '../parity';
+
+import { getTokenTotalSupply } from '../utils';
+
+const {
+  isHex,
+  isAddressValid,
+  toChecksumAddress
+} = api.util;
+
+export const ADDRESS_TYPE = 'ADDRESS_TYPE';
+export const TOKEN_ADDRESS_TYPE = 'TOKEN_ADDRESS_TYPE';
+export const SIMPLE_TOKEN_ADDRESS_TYPE = 'SIMPLE_TOKEN_ADDRESS_TYPE';
+export const TLA_TYPE = 'TLA_TYPE';
+export const SIMPLE_TLA_TYPE = 'SIMPLE_TLA_TYPE';
+export const UINT_TYPE = 'UINT_TYPE';
+export const STRING_TYPE = 'STRING_TYPE';
+export const HEX_TYPE = 'HEX_TYPE';
+export const URL_TYPE = 'URL_TYPE';
+
+export const ERRORS = {
+  invalidTLA: 'The TLA should be 3 characters long',
+  invalidUint: 'Please enter a non-negative integer',
+  invalidString: 'Please enter at least a character',
+  invalidAccount: 'Please select an account to transact with',
+  invalidRecipient: 'Please select an account to send to',
+  invalidAddress: 'The address is not in the correct format',
+  invalidTokenAddress: 'The address is not a regular token contract address',
+  invalidHex: 'Please enter an hexadecimal string (digits and letters from a to z)',
+  invalidAmount: 'Please enter a positive amount > 0',
+  invalidTotal: 'The amount is greater than the availale balance',
+  tlaAlreadyTaken: 'This TLA address is already registered',
+  addressAlreadyTaken: 'This Token address is already registered',
+  invalidURL: 'Please enter a valid URL'
+};
+
+const validateAddress = (address) => {
+  if (!isAddressValid(address)) {
+    return {
+      error: ERRORS.invalidAddress,
+      valid: false
+    };
+  }
+
+  return {
+    value: toChecksumAddress(address),
+    error: null,
+    valid: true
+  };
+};
+
+const validateTokenAddress = (address, contract, simple) => {
+  const addressValidation = validateAddress(address);
+  if (!addressValidation.valid) return addressValidation;
+
+  if (simple) return addressValidation;
+
+  return getTokenTotalSupply(address)
+    .then(balance => {
+      if (balance === null) {
+        return {
+          error: ERRORS.invalidTokenAddress,
+          valid: false
+        };
+      }
+
+      return contract.instance
+        .fromAddress.call({}, [ address ])
+        .then(([id, tla, base, name, owner]) => {
+          if (owner !== '0x0000000000000000000000000000000000000000') {
+            return {
+              error: ERRORS.addressAlreadyTaken,
+              valid: false
+            };
+          }
+        });
+    })
+    .then((result) => {
+      if (result) return result;
+      return addressValidation;
+    });
+};
+
+const validateTLA = (tla, contract, simple) => {
+  if (tla.toString().length !== 3) {
+    return {
+      error: ERRORS.invalidTLA,
+      valid: false
+    };
+  }
+
+  const fTLA = tla.toString().toUpperCase();
+
+  if (simple) {
+    return {
+      value: fTLA,
+      error: null,
+      valid: true
+    };
+  }
+
+  return contract.instance
+    .fromTLA.call({}, [ fTLA ])
+    .then(([id, address, base, name, owner]) => {
+      if (owner !== '0x0000000000000000000000000000000000000000') {
+        return {
+          error: ERRORS.tlaAlreadyTaken,
+          valid: false
+        };
+      }
+    })
+    .then((result) => {
+      if (result) return result;
+      return {
+        value: fTLA,
+        error: null,
+        valid: true
+      };
+    });
+};
+
+const validateUint = (uint) => {
+  if (!/^\d+$/.test(uint) || parseInt(uint) <= 0) {
+    return {
+      error: ERRORS.invalidUint,
+      valid: false
+    };
+  }
+
+  return {
+    value: parseInt(uint),
+    error: null,
+    valid: true
+  };
+};
+
+const validateString = (string) => {
+  if (string.toString().length === 0) {
+    return {
+      error: ERRORS.invalidString,
+      valid: false
+    };
+  }
+
+  return {
+    value: string.toString(),
+    error: null,
+    valid: true
+  };
+};
+
+const validateHex = (string) => {
+  if (!isHex(string.toString())) {
+    return {
+      error: ERRORS.invalidHex,
+      valid: false
+    };
+  }
+
+  return {
+    value: string.toString(),
+    error: null,
+    valid: true
+  };
+};
+
+const validateURL = (string) => {
+  if (!isURL(string.toString())) {
+    return {
+      error: ERRORS.invalidURL,
+      valid: false
+    };
+  }
+
+  return {
+    value: string.toString(),
+    error: null,
+    valid: true
+  };
+};
+
+export const validate = (value, type, contract) => {
+  if (type === ADDRESS_TYPE) return validateAddress(value);
+  if (type === TOKEN_ADDRESS_TYPE) return validateTokenAddress(value, contract);
+  if (type === SIMPLE_TOKEN_ADDRESS_TYPE) return validateTokenAddress(value, contract, true);
+  if (type === TLA_TYPE) return validateTLA(value, contract);
+  if (type === SIMPLE_TLA_TYPE) return validateTLA(value, contract, true);
+  if (type === UINT_TYPE) return validateUint(value);
+  if (type === STRING_TYPE) return validateString(value);
+  if (type === HEX_TYPE) return validateHex(value);
+  if (type === URL_TYPE) return validateURL(value);
+
+  return { valid: true, error: null };
+};
diff --git a/js/src/dapps/tokenreg/Loading/index.js b/js/src/dapps/tokenreg/Loading/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0468cab37dfd505cb0b1ef415376ca121ab9ca89
--- /dev/null
+++ b/js/src/dapps/tokenreg/Loading/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './loading';
diff --git a/js/src/dapps/tokenreg/Loading/loading.css b/js/src/dapps/tokenreg/Loading/loading.css
new file mode 100644
index 0000000000000000000000000000000000000000..dbdb98e42254917684a63e20b6f6644371dff060
--- /dev/null
+++ b/js/src/dapps/tokenreg/Loading/loading.css
@@ -0,0 +1,23 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.loading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/js/src/dapps/tokenreg/Loading/loading.js b/js/src/dapps/tokenreg/Loading/loading.js
new file mode 100644
index 0000000000000000000000000000000000000000..3b7619323186037d489106213b474862bfc96bdf
--- /dev/null
+++ b/js/src/dapps/tokenreg/Loading/loading.js
@@ -0,0 +1,34 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import CircularProgress from 'material-ui/CircularProgress';
+
+import styles from './loading.css';
+
+export default class Loading extends Component {
+  static propTypes = {
+    size: PropTypes.number
+  };
+
+  render () {
+    return (
+      <div className={ styles.loading }>
+        <CircularProgress size={ this.props.size || 2 } />
+      </div>
+    );
+  }
+}
diff --git a/js/src/dapps/tokenreg/Status/actions.js b/js/src/dapps/tokenreg/Status/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..a479179b223ec22c218c83d15487771ffbb6e66d
--- /dev/null
+++ b/js/src/dapps/tokenreg/Status/actions.js
@@ -0,0 +1,202 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import {
+  registry as registryAbi,
+  tokenreg as tokenregAbi,
+  githubhint as githubhintAbi
+} from '../../../contracts/abi';
+
+import { loadToken, setTokenPending, deleteToken, setTokenData } from '../Tokens/actions';
+
+const { api } = window.parity;
+
+export const SET_LOADING = 'SET_LOADING';
+export const setLoading = (isLoading) => ({
+  type: SET_LOADING,
+  isLoading
+});
+
+export const FIND_CONTRACT = 'FIND_CONTRACT';
+export const loadContract = () => (dispatch) => {
+  dispatch(setLoading(true));
+
+  api.ethcore
+    .registryAddress()
+    .then((registryAddress) => {
+      console.log(`registry found at ${registryAddress}`);
+      const registry = api.newContract(registryAbi, registryAddress).instance;
+
+      return Promise.all([
+        registry.getAddress.call({}, [api.util.sha3('tokenreg'), 'A']),
+        registry.getAddress.call({}, [api.util.sha3('githubhint'), 'A'])
+      ]);
+    })
+    .then(([ tokenregAddress, githubhintAddress ]) => {
+      console.log(`tokenreg was found at ${tokenregAddress}`);
+
+      const tokenregContract = api
+        .newContract(tokenregAbi, tokenregAddress);
+
+      const githubhintContract = api
+        .newContract(githubhintAbi, githubhintAddress);
+
+      dispatch(setContractDetails({
+        address: tokenregAddress,
+        instance: tokenregContract.instance,
+        raw: tokenregContract
+      }));
+
+      dispatch(setGithubhintDetails({
+        address: githubhintAddress,
+        instance: githubhintContract.instance,
+        raw: githubhintContract
+      }));
+
+      dispatch(loadContractDetails());
+      dispatch(subscribeEvents());
+    })
+    .catch((error) => {
+      console.error('loadContract error', error);
+    });
+};
+
+export const LOAD_CONTRACT_DETAILS = 'LOAD_CONTRACT_DETAILS';
+export const loadContractDetails = () => (dispatch, getState) => {
+  const state = getState();
+
+  const instance = state.status.contract.instance;
+
+  Promise
+    .all([
+      api.personal.listAccounts(),
+      instance.owner.call(),
+      instance.fee.call()
+    ])
+    .then(([accounts, owner, fee]) => {
+      console.log(`owner as ${owner}, fee set at ${fee.toFormat()}`);
+
+      const isOwner = accounts.filter(a => a === owner).length > 0;
+
+      dispatch(setContractDetails({
+        fee,
+        owner,
+        isOwner
+      }));
+
+      dispatch(setLoading(false));
+    })
+    .catch((error) => {
+      console.error('loadContractDetails error', error);
+    });
+};
+
+export const SET_CONTRACT_DETAILS = 'SET_CONTRACT_DETAILS';
+export const setContractDetails = (details) => ({
+  type: SET_CONTRACT_DETAILS,
+  details
+});
+
+export const SET_GITHUBHINT_CONTRACT = 'SET_GITHUBHINT_CONTRACT';
+export const setGithubhintDetails = (details) => ({
+  type: SET_GITHUBHINT_CONTRACT,
+  details
+});
+
+export const subscribeEvents = () => (dispatch, getState) => {
+  const state = getState();
+
+  const contract = state.status.contract.raw;
+  const previousSubscriptionId = state.status.subscriptionId;
+
+  if (previousSubscriptionId) {
+    contract.unsubscribe(previousSubscriptionId);
+  }
+
+  contract
+    .subscribe(null, {
+      fromBlock: 'latest',
+      toBlock: 'pending',
+      limit: 50
+    }, (error, logs) => {
+      if (error) {
+        console.error('setupFilters', error);
+        return;
+      }
+
+      if (!logs || logs.length === 0) return;
+
+      logs.forEach(log => {
+        const event = log.event;
+        const type = log.type;
+        const params = log.params;
+
+        if (event === 'Registered' && type === 'pending') {
+          return dispatch(setTokenData(params.id.toNumber(), {
+            tla: '...',
+            base: -1,
+            address: params.addr,
+            name: params.name,
+            isPending: true
+          }));
+        }
+
+        if (event === 'Registered' && type === 'mined') {
+          return dispatch(loadToken(params.id.toNumber()));
+        }
+
+        if (event === 'Unregistered' && type === 'pending') {
+          return dispatch(setTokenPending(params.id.toNumber(), true));
+        }
+
+        if (event === 'Unregistered' && type === 'mined') {
+          return dispatch(deleteToken(params.id.toNumber()));
+        }
+
+        if (event === 'MetaChanged' && type === 'pending') {
+          return dispatch(setTokenData(
+            params.id.toNumber(),
+            { metaPending: true, metaMined: false }
+          ));
+        }
+
+        if (event === 'MetaChanged' && type === 'mined') {
+          setTimeout(() => {
+            dispatch(setTokenData(
+              params.id.toNumber(),
+              { metaPending: false, metaMined: false }
+            ));
+          }, 5000);
+
+          return dispatch(setTokenData(
+            params.id.toNumber(),
+            { metaPending: false, metaMined: true }
+          ));
+        }
+
+        console.log('new log event', log);
+      });
+    })
+    .then((subscriptionId) => {
+      dispatch(setSubscriptionId(subscriptionId));
+    });
+};
+
+export const SET_SUBSCRIPTION_ID = 'SET_SUBSCRIPTION_ID';
+export const setSubscriptionId = subscriptionId => ({
+  type: SET_SUBSCRIPTION_ID,
+  subscriptionId
+});
diff --git a/js/src/dapps/tokenreg/Status/index.js b/js/src/dapps/tokenreg/Status/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..44079b22485b96c83d7ed82e2491caf9e1c8c7b5
--- /dev/null
+++ b/js/src/dapps/tokenreg/Status/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './status';
diff --git a/js/src/dapps/tokenreg/Status/reducer.js b/js/src/dapps/tokenreg/Status/reducer.js
new file mode 100644
index 0000000000000000000000000000000000000000..7b018bd85e32222a846be55b5ab31ccddbee9f08
--- /dev/null
+++ b/js/src/dapps/tokenreg/Status/reducer.js
@@ -0,0 +1,65 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import {
+  SET_LOADING,
+  SET_CONTRACT_DETAILS,
+  SET_GITHUBHINT_CONTRACT,
+  SET_SUBSCRIPTION_ID
+} from './actions';
+
+const initialState = {
+  isLoading: true,
+  subscriptionId: null,
+  contract: {
+    addres: null,
+    instance: null,
+    raw: null,
+    owner: null,
+    isOwner: false,
+    fee: null
+  },
+  githubhint: {
+    address: null,
+    instance: null,
+    raw: null
+  }
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case SET_LOADING:
+      return { ...state, isLoading: action.isLoading };
+
+    case SET_SUBSCRIPTION_ID:
+      return { ...state, subscriptionId: action.subscriptionId };
+
+    case SET_CONTRACT_DETAILS:
+      return { ...state, contract: {
+        ...state.contract,
+        ...action.details
+      } };
+
+    case SET_GITHUBHINT_CONTRACT:
+      return { ...state, githubhint: {
+        ...state.githubhint,
+        ...action.details
+      } };
+
+    default:
+      return state;
+  }
+};
diff --git a/js/src/dapps/tokenreg/Status/status.css b/js/src/dapps/tokenreg/Status/status.css
new file mode 100644
index 0000000000000000000000000000000000000000..27ef53607ef7b0afc8407a9230819b01f078cf84
--- /dev/null
+++ b/js/src/dapps/tokenreg/Status/status.css
@@ -0,0 +1,36 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.status {
+  background: rgba(46, 204, 113, 0.85);
+  color: rgba(255, 255, 255, 1);
+  padding: 4em 0 2em 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+}
+
+.title {
+  font-size: 3rem;
+  font-weight: 300;
+  margin-top: 0;
+  text-transform: uppercase;
+}
diff --git a/js/src/dapps/tokenreg/Status/status.js b/js/src/dapps/tokenreg/Status/status.js
new file mode 100644
index 0000000000000000000000000000000000000000..f8c7b347a4b7b062ce45e56bc61fd99e9164342a
--- /dev/null
+++ b/js/src/dapps/tokenreg/Status/status.js
@@ -0,0 +1,50 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import Chip from '../Chip';
+
+import styles from './status.css';
+
+const { api } = window.parity;
+
+export default class Status extends Component {
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    fee: PropTypes.object.isRequired
+  };
+
+  render () {
+    const { address, fee } = this.props;
+
+    return (
+      <div className={ styles.status }>
+        <h1 className={ styles.title }>Token Registry</h1>
+
+        <Chip
+          isAddress
+          value={ address }
+          label='Address' />
+
+        <Chip
+          isAddress={ false }
+          value={ api.util.fromWei(fee).toFixed(3) + 'ETH' }
+          label='Fee' />
+      </div>
+    );
+  }
+}
diff --git a/js/src/dapps/tokenreg/Tokens/Token/add-meta.js b/js/src/dapps/tokenreg/Tokens/Token/add-meta.js
new file mode 100644
index 0000000000000000000000000000000000000000..09e65954d2545663a855302cd6174c51aea435e3
--- /dev/null
+++ b/js/src/dapps/tokenreg/Tokens/Token/add-meta.js
@@ -0,0 +1,193 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { Dialog, RaisedButton, FlatButton, SelectField, MenuItem } from 'material-ui';
+import AddIcon from 'material-ui/svg-icons/content/add';
+
+import InputText from '../../Inputs/Text';
+import { ADDRESS_TYPE } from '../../Inputs/validation';
+
+import styles from './token.css';
+
+import { metaDataKeys } from '../../constants';
+
+const initState = {
+  showDialog: false,
+  complete: false,
+  metaKeyIndex: 0,
+
+  form: {
+    valid: false,
+    value: ''
+  }
+};
+
+export default class AddMeta extends Component {
+  static propTypes = {
+    isTokenOwner: PropTypes.bool,
+    handleAddMeta: PropTypes.func,
+    index: PropTypes.number
+  };
+
+  state = initState;
+
+  render () {
+    if (!this.props.isTokenOwner) return null;
+
+    return (<div className={ styles['add-meta'] }>
+      <RaisedButton
+        label='Add Meta-Data'
+        icon={ <AddIcon /> }
+        primary
+        fullWidth
+        onTouchTap={ this.onShowDialog } />
+
+      <Dialog
+        title='add meta data'
+        open={ this.state.showDialog }
+        modal={ this.state.complete }
+        className={ styles.dialog }
+        onRequestClose={ this.onClose }
+        actions={ this.renderActions() } >
+        { this.renderContent() }
+      </Dialog>
+    </div>);
+  }
+
+  renderActions () {
+    const { complete } = this.state;
+
+    if (complete) {
+      return (
+        <FlatButton
+          label='Done'
+          primary
+          onTouchTap={ this.onClose } />
+      );
+    }
+
+    const isValid = this.state.form.valid;
+
+    return ([
+      <FlatButton
+        label='Cancel'
+        primary
+        onTouchTap={ this.onClose } />,
+      <FlatButton
+        label='Add'
+        primary
+        disabled={ !isValid }
+        onTouchTap={ this.onAdd } />
+    ]);
+  }
+
+  renderContent () {
+    const { complete } = this.state;
+
+    if (complete) return this.renderComplete();
+    return this.renderForm();
+  }
+
+  renderComplete () {
+    if (metaDataKeys[this.state.metaKeyIndex].value === 'IMG') {
+      return (<div>
+        <p>
+        Your transactions has been posted.
+        Two transactions are needed to add an Image.
+        Please visit the Parity Signer to authenticate the transfer.</p>
+      </div>);
+    }
+    return (<div>
+      <p>Your transaction has been posted. Please visit the Parity Signer to authenticate the transfer.</p>
+    </div>);
+  }
+
+  renderForm () {
+    const selectedMeta = metaDataKeys[this.state.metaKeyIndex];
+
+    return (
+      <div>
+        <SelectField
+          floatingLabelText='Choose the meta-data to add'
+          fullWidth
+          value={ this.state.metaKeyIndex }
+          onChange={ this.onMetaKeyChange }>
+
+          { this.renderMetaKeyItems() }
+
+        </SelectField>
+
+        <InputText
+          key={ selectedMeta.value }
+          floatingLabelText={ `${selectedMeta.label} value` }
+          hintText={ `The value of the ${selectedMeta.label.toLowerCase()} (${selectedMeta.validation === ADDRESS_TYPE ? 'Address' : 'Url Hint'})` }
+
+          validationType={ selectedMeta.validation }
+          onChange={ this.onChange } />
+      </div>
+    );
+  }
+
+  renderMetaKeyItems () {
+    return metaDataKeys.map((key, index) => (
+      <MenuItem
+        value={ index }
+        key={ index }
+        label={ key.label } primaryText={ key.label } />
+    ));
+  }
+
+  onShowDialog = () => {
+    this.setState({ showDialog: true });
+  }
+
+  onClose = () => {
+    this.setState(initState);
+  }
+
+  onAdd = () => {
+    const { index } = this.props;
+
+    const keyIndex = this.state.metaKeyIndex;
+    const key = metaDataKeys[keyIndex].value;
+
+    this.props.handleAddMeta(
+      index,
+      key,
+      this.state.form.value
+    );
+
+    this.setState({ complete: true });
+  }
+
+  onChange = (valid, value) => {
+    this.setState({
+      form: {
+        valid, value
+      }
+    });
+  }
+
+  onMetaKeyChange = (event, metaKeyIndex) => {
+    this.setState({ metaKeyIndex, form: {
+      ...[this.state.form],
+      valid: false,
+      value: ''
+    } });
+  }
+
+}
diff --git a/js/src/dapps/tokenreg/Tokens/Token/index.js b/js/src/dapps/tokenreg/Tokens/Token/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4b822b4bdf7c1d731ef6e68055be06e6cc85d0ec
--- /dev/null
+++ b/js/src/dapps/tokenreg/Tokens/Token/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './token';
diff --git a/js/src/dapps/tokenreg/Tokens/Token/token.css b/js/src/dapps/tokenreg/Tokens/Token/token.css
new file mode 100644
index 0000000000000000000000000000000000000000..cfd01e3d630f26d22ebaba26c6a373e6b1cd23ea
--- /dev/null
+++ b/js/src/dapps/tokenreg/Tokens/Token/token.css
@@ -0,0 +1,140 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.token{
+  position: relative;
+  display: flex;
+
+  width: 20rem;
+  margin: 1rem;
+  padding: 1rem;
+  padding-bottom: 1.5rem;
+}
+
+.token-container, .token-content, .token-meta {
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.token-content, .token-meta {
+  z-index: 50;
+}
+
+.token-bg {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  -webkit-filter: blur(5px);
+  filter: blur(5px);
+  background-color: rgba(255, 255, 255, 0.85);
+}
+
+.token-container {
+  flex: 1;
+}
+
+.full-width .token-container {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.full-width .token-content {
+  width: 20rem;
+  margin-right: 1rem;
+}
+
+.token-content > div, .token-meta > div {
+  max-width: 100%;
+}
+
+.loading {
+  margin: 1rem 0;
+}
+
+.name {
+  padding-bottom: 0.75rem;
+}
+
+.title {
+  font-size: 2rem;
+  padding: 0 0 0.5rem;
+}
+
+.meta-query {
+  font-size: 0.9rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0;
+}
+
+.meta-key {
+  font-weight: bold;
+}
+
+.meta-value {
+  margin-top: 0.5rem;
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
+
+.meta-info {
+  margin-top: 1.5rem;
+  margin-bottom: -0.5rem;
+  font-size: 0.9rem;
+  color: gray;
+}
+
+.meta-image {
+  width: 100%;
+  margin-top: 1rem;
+}
+
+.meta-image img {
+  width: 100%;
+}
+
+.meta-form {
+  width: 100%;
+}
+
+.unregister {
+  margin-top: 1rem;
+}
+
+.add-meta {
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.pending {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 100;
+  background-color: rgba(0, 0, 0, 0.35);
+}
+
+.dialog h3 {
+  color: rgba(50, 100, 150, 1) !important;
+  text-transform: uppercase;
+}
diff --git a/js/src/dapps/tokenreg/Tokens/Token/token.js b/js/src/dapps/tokenreg/Tokens/Token/token.js
new file mode 100644
index 0000000000000000000000000000000000000000..bee925689924d88d32534e0d895e7250f8c07d6a
--- /dev/null
+++ b/js/src/dapps/tokenreg/Tokens/Token/token.js
@@ -0,0 +1,338 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import Paper from 'material-ui/Paper';
+import { RaisedButton, SelectField, MenuItem } from 'material-ui';
+
+import FindIcon from 'material-ui/svg-icons/action/find-in-page';
+import DeleteIcon from 'material-ui/svg-icons/action/delete';
+
+import Loading from '../../Loading';
+import Chip from '../../Chip';
+import AddMeta from './add-meta';
+
+import styles from './token.css';
+
+import { metaDataKeys } from '../../constants';
+
+import { api } from '../../parity';
+
+export default class Token extends Component {
+  static propTypes = {
+    handleMetaLookup: PropTypes.func.isRequired,
+    address: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    index: PropTypes.number.isRequired,
+    owner: PropTypes.string.isRequired,
+
+    handleAddMeta: PropTypes.func,
+    handleUnregister: PropTypes.func,
+
+    tla: PropTypes.string,
+    base: PropTypes.number,
+    totalSupply: PropTypes.number,
+    meta: PropTypes.object,
+    isMetaLoading: PropTypes.bool,
+    ownerAccountInfo: PropTypes.shape({
+      name: PropTypes.string,
+      meta: PropTypes.object
+    }),
+    metaPending: PropTypes.bool,
+    metaMined: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    isPending: PropTypes.bool,
+    isTokenOwner: PropTypes.bool.isRequired,
+
+    fullWidth: PropTypes.bool
+  };
+
+  state = {
+    metaKeyIndex: 0
+  };
+
+  render () {
+    const { isLoading, fullWidth } = this.props;
+
+    if (isLoading) {
+      return (
+        <div className={ [ styles.token, styles.loading ].join(' ') }>
+          <Loading size={ 1 } />
+        </div>
+      );
+    }
+
+    if (fullWidth) {
+      return (<div className={ styles['full-width'] }>
+        { this.renderContent() }
+      </div>);
+    }
+
+    return (<div>
+      <Paper zDepth={ 1 } className={ styles.token } style={ {
+        backgroundColor: 'none'
+      } }>
+        <div className={ styles['token-bg'] } />
+        { this.renderContent() }
+      </Paper>
+    </div>);
+  }
+
+  renderContent () {
+    const { address, tla, base, name, meta, owner, totalSupply } = this.props;
+
+    return (<div className={ styles['token-container'] }>
+      { this.renderIsPending() }
+
+      <div className={ styles['token-content'] }>
+        <div className={ styles.title }>{ tla }</div>
+        <div className={ styles.name }>"{ name }"</div>
+
+        { this.renderBase(base) }
+        { this.renderTotalSupply(totalSupply, base, tla) }
+        { this.renderAddress(address) }
+        { this.renderOwner(owner) }
+      </div>
+
+      <div className={ styles['token-meta'] }>
+        <div className={ styles['meta-form'] }>
+          <SelectField
+            floatingLabelText='Choose the meta-data to look-up'
+            fullWidth
+            value={ this.state.metaKeyIndex }
+            onChange={ this.onMetaKeyChange }>
+
+            { this.renderMetaKeyItems() }
+
+          </SelectField>
+
+          <RaisedButton
+            label='Lookup'
+            icon={ <FindIcon /> }
+            primary
+            fullWidth
+            onTouchTap={ this.onMetaLookup } />
+        </div>
+
+        { this.renderMeta(meta) }
+        { this.renderAddMeta() }
+        { this.renderUnregister() }
+      </div>
+
+      { this.renderMetaPending() }
+      { this.renderMetaMined() }
+    </div>);
+  }
+
+  renderMetaKeyItems () {
+    return metaDataKeys.map((key, index) => (
+      <MenuItem
+        value={ index }
+        key={ index }
+        label={ key.label } primaryText={ key.label } />
+    ));
+  }
+
+  renderBase (base) {
+    if (!base || base < 0) return null;
+    return (
+      <Chip
+        value={ base.toString() }
+        label='Base' />
+    );
+  }
+
+  renderAddress (address) {
+    if (!address) return null;
+    return (
+      <Chip
+        isAddress
+        value={ address }
+        label='Address' />
+    );
+  }
+
+  renderTotalSupply (totalSupply, base, tla) {
+    const balance = Math.round((totalSupply / base) * 100) / 100;
+
+    return (
+      <Chip
+        value={ `${balance.toString()} ${tla}` }
+        label='Total' />
+    );
+  }
+
+  renderOwner (owner) {
+    if (!owner) return null;
+
+    const ownerInfo = this.props.ownerAccountInfo;
+
+    const displayValue = (ownerInfo && ownerInfo.name)
+      ? ownerInfo.name
+      : owner;
+
+    return (
+      <Chip
+        isAddress
+        displayValue={ displayValue }
+        value={ owner }
+        label='Owner' />
+    );
+  }
+
+  renderIsPending () {
+    const { isPending } = this.props;
+
+    if (!isPending) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.pending } />
+    );
+  }
+
+  renderAddMeta () {
+    if (!this.props.isTokenOwner) {
+      return null;
+    }
+
+    return (
+      <AddMeta
+        handleAddMeta={ this.props.handleAddMeta }
+        isTokenOwner={ this.props.isTokenOwner }
+        index={ this.props.index } />
+    );
+  }
+
+  renderUnregister () {
+    if (!this.props.isTokenOwner) {
+      return null;
+    }
+
+    return (
+      <RaisedButton
+        className={ styles.unregister }
+        label='Unregister'
+        icon={ <DeleteIcon /> }
+        secondary
+        fullWidth
+        onTouchTap={ this.onUnregister } />
+    );
+  }
+
+  renderMeta (meta) {
+    const isMetaLoading = this.props.isMetaLoading;
+
+    if (isMetaLoading) {
+      return (<div>
+        <Loading size={ 0.5 } />
+      </div>);
+    }
+
+    if (!meta) return;
+
+    const metaData = metaDataKeys.find(m => m.value === meta.query);
+
+    if (!meta.value) {
+      return (<div>
+        <p className={ styles['meta-query'] }>
+          No <span className={ styles['meta-key'] }>
+            { metaData.label.toLowerCase() }
+          </span> meta-data...
+        </p>
+      </div>);
+    }
+
+    if (meta.query === 'IMG') {
+      const imageHash = meta.value.replace(/^0x/, '');
+
+      return (<div>
+        <p className={ styles['meta-query'] }>
+          <span className={ styles['meta-key'] }>
+            { metaData.label }
+          </span> meta-data:
+        </p>
+        <div className={ styles['meta-image'] }>
+          <img src={ `http://127.0.0.1:8080/api/content/${imageHash}/` } />
+        </div>
+      </div>);
+    }
+
+    if (meta.query === 'A') {
+      const address = meta.value.slice(0, 42);
+
+      return (<div>
+        <p className={ styles['meta-query'] }>
+          <span className={ styles['meta-key'] }>
+            { metaData.label }
+          </span> meta-data:
+        </p>
+        <p className={ styles['meta-value'] }>
+          { api.util.toChecksumAddress(address) }
+        </p>
+      </div>);
+    }
+
+    return (<div>
+      <p className={ styles['meta-query'] }>
+        <span className={ styles['meta-key'] }>
+          { metaData.label }
+        </span> meta-data:
+      </p>
+      <p className={ styles['meta-value'] }>{ meta.value }</p>
+    </div>);
+  }
+
+  renderMetaPending () {
+    const isMetaPending = this.props.metaPending;
+    if (!isMetaPending) return;
+
+    return (<div>
+      <p className={ styles['meta-info'] }>
+        Meta-Data pending...
+      </p>
+    </div>);
+  }
+
+  renderMetaMined () {
+    const isMetaMined = this.props.metaMined;
+    if (!isMetaMined) return;
+
+    return (<div>
+      <p className={ styles['meta-info'] }>
+        Meta-Data saved on the blockchain!
+      </p>
+    </div>);
+  }
+
+  onUnregister = () => {
+    const index = this.props.index;
+    this.props.handleUnregister(index);
+  }
+
+  onMetaLookup = () => {
+    const keyIndex = this.state.metaKeyIndex;
+    const key = metaDataKeys[keyIndex].value;
+    const index = this.props.index;
+
+    this.props.handleMetaLookup(index, key);
+  }
+
+  onMetaKeyChange = (event, metaKeyIndex) => {
+    this.setState({ metaKeyIndex });
+  }
+}
diff --git a/js/src/dapps/tokenreg/Tokens/actions.js b/js/src/dapps/tokenreg/Tokens/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..7953bb241c7af75b5c84e563ed1288d7b1be5078
--- /dev/null
+++ b/js/src/dapps/tokenreg/Tokens/actions.js
@@ -0,0 +1,262 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { getTokenTotalSupply } from '../utils';
+
+const { bytesToHex } = window.parity.api.util;
+
+export const SET_TOKENS_LOADING = 'SET_TOKENS_LOADING';
+export const setTokensLoading = (isLoading) => ({
+  type: SET_TOKENS_LOADING,
+  isLoading
+});
+
+export const SET_TOKEN_COUNT = 'SET_TOKEN_COUNT';
+export const setTokenCount = (tokenCount) => ({
+  type: SET_TOKEN_COUNT,
+  tokenCount
+});
+
+export const SET_TOKEN_DATA = 'SET_TOKEN_DATA';
+export const setTokenData = (index, tokenData) => ({
+  type: SET_TOKEN_DATA,
+  index, tokenData
+});
+
+export const SET_TOKEN_META = 'SET_TOKEN_META';
+export const setTokenMeta = (index, meta) => ({
+  type: SET_TOKEN_META,
+  index, meta
+});
+
+export const SET_TOKEN_LOADING = 'SET_TOKEN_LOADING';
+export const setTokenLoading = (index, isLoading) => ({
+  type: SET_TOKEN_LOADING,
+  index, isLoading
+});
+
+export const SET_TOKEN_META_LOADING = 'SET_TOKEN_META_LOADING';
+export const setTokenMetaLoading = (index, isMetaLoading) => ({
+  type: SET_TOKEN_META_LOADING,
+  index, isMetaLoading
+});
+
+export const SET_TOKEN_PENDING = 'SET_TOKEN_PENDING';
+export const setTokenPending = (index, isPending) => ({
+  type: SET_TOKEN_PENDING,
+  index, isPending
+});
+
+export const DELETE_TOKEN = 'DELETE_TOKEN';
+export const deleteToken = (index) => ({
+  type: DELETE_TOKEN,
+  index
+});
+
+export const loadTokens = () => (dispatch, getState) => {
+  console.log('loading tokens...');
+
+  const state = getState();
+  const contractInstance = state.status.contract.instance;
+
+  dispatch(setTokensLoading(true));
+
+  contractInstance
+    .tokenCount
+    .call()
+    .then((count) => {
+      const tokenCount = parseInt(count);
+      console.log(`token count: ${tokenCount}`);
+      dispatch(setTokenCount(tokenCount));
+
+      for (let i = 0; i < tokenCount; i++) {
+        dispatch(loadToken(i));
+      }
+
+      dispatch(setTokensLoading(false));
+    })
+    .catch((e) => {
+      console.error('loadTokens error', e);
+    });
+};
+
+export const loadToken = (index) => (dispatch, getState) => {
+  console.log('loading token', index);
+
+  const state = getState();
+  const contractInstance = state.status.contract.instance;
+
+  const userAccounts = state.accounts.list;
+  const accountsInfo = state.accounts.accountsInfo;
+
+  dispatch(setTokenLoading(index, true));
+
+  contractInstance
+    .token
+    .call({}, [ parseInt(index) ])
+    .then((result) => {
+      const tokenOwner = result[4];
+
+      const isTokenOwner = userAccounts
+        .filter(a => a.address === tokenOwner)
+        .length > 0;
+
+      const data = {
+        index: parseInt(index),
+        address: result[0],
+        tla: result[1],
+        base: result[2].toNumber(),
+        name: result[3],
+        owner: tokenOwner,
+        ownerAccountInfo: accountsInfo[tokenOwner],
+        isPending: false,
+        isTokenOwner
+      };
+
+      return data;
+    })
+    .then(data => {
+      return getTokenTotalSupply(data.address)
+        .then(totalSupply => {
+          data.totalSupply = totalSupply;
+          return data;
+        });
+    })
+    .then(data => {
+      // If no total supply, must not be a proper token
+      if (data.totalSupply === null) {
+        dispatch(setTokenData(index, null));
+        dispatch(setTokenLoading(index, false));
+        return;
+      }
+
+      data.totalSupply = data.totalSupply.toNumber();
+      console.log(`token loaded: #${index}`, data);
+      dispatch(setTokenData(index, data));
+      dispatch(setTokenLoading(index, false));
+    })
+    .catch((e) => {
+      dispatch(setTokenData(index, null));
+      dispatch(setTokenLoading(index, false));
+
+      if (!e instanceof TypeError) {
+        console.error(`loadToken #${index} error`, e);
+      }
+    });
+};
+
+export const queryTokenMeta = (index, query) => (dispatch, getState) => {
+  console.log('loading token meta', index, query);
+
+  const state = getState();
+  const contractInstance = state.status.contract.instance;
+
+  const startDate = Date.now();
+  dispatch(setTokenMetaLoading(index, true));
+
+  contractInstance
+    .meta
+    .call({}, [ index, query ])
+    .then((value) => {
+      const meta = {
+        query,
+        value: value.find(v => v !== 0) ? bytesToHex(value) : null
+      };
+
+      console.log(`token meta loaded: #${index}`, value);
+      dispatch(setTokenMeta(index, meta));
+
+      setTimeout(() => {
+        dispatch(setTokenMetaLoading(index, false));
+      }, 500 - (Date.now() - startDate));
+    })
+    .catch((e) => {
+      console.error(`loadToken #${index} error`, e);
+    });
+};
+
+export const addTokenMeta = (index, key, value) => (dispatch, getState) => {
+  console.log('add token meta', index, key, value);
+
+  const state = getState();
+  const contractInstance = state.status.contract.instance;
+  const token = state.tokens.tokens.find(t => t.index === index);
+
+  const options = { from: token.owner };
+  const values = [ index, key, value ];
+
+  contractInstance
+    .setMeta
+    .estimateGas(options, values)
+    .then((gasEstimate) => {
+      options.gas = gasEstimate.mul(1.2).toFixed(0);
+      console.log(`addTokenMeta: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
+
+      return contractInstance.setMeta.postTransaction(options, values);
+    })
+    .catch((e) => {
+      console.error(`addTokenMeta: #${index} error`, e);
+    });
+};
+
+export const addGithubhintURL = (from, key, url) => (dispatch, getState) => {
+  console.log('add githubhint url', key, url);
+
+  const state = getState();
+  const contractInstance = state.status.githubhint.instance;
+
+  const options = { from };
+
+  const values = [ key, url ];
+
+  contractInstance
+    .hintURL
+    .estimateGas(options, values)
+    .then((gasEstimate) => {
+      options.gas = gasEstimate.mul(1.2).toFixed(0);
+      console.log(`transfer: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
+
+      return contractInstance.hintURL.postTransaction(options, values);
+    })
+    .catch((e) => {
+      console.error('addGithubhintURL error', e);
+    });
+};
+
+export const unregisterToken = (index) => (dispatch, getState) => {
+  console.log('unregistering token', index);
+
+  const state = getState();
+  const contractInstance = state.status.contract.instance;
+
+  const values = [ index ];
+  const options = {
+    from: state.accounts.selected.address
+  };
+
+  contractInstance
+    .unregister
+    .estimateGas(options, values)
+    .then((gasEstimate) => {
+      options.gas = gasEstimate.mul(1.2).toFixed(0);
+      console.log(`transfer: gas estimated as ${gasEstimate.toFixed(0)} setting to ${options.gas}`);
+
+      return contractInstance.unregister.postTransaction(options, values);
+    })
+    .catch((e) => {
+      console.error(`unregisterToken #${index} error`, e);
+    });
+};
diff --git a/js/src/dapps/tokenreg/Tokens/container.js b/js/src/dapps/tokenreg/Tokens/container.js
new file mode 100644
index 0000000000000000000000000000000000000000..b6171c2cc1d3eed386044efcdd7d196790e0084e
--- /dev/null
+++ b/js/src/dapps/tokenreg/Tokens/container.js
@@ -0,0 +1,80 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+import Tokens from './tokens';
+
+import { loadTokens, queryTokenMeta, unregisterToken, addTokenMeta } from './actions';
+
+class TokensContainer extends Component {
+  static propTypes = {
+    isOwner: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    tokens: PropTypes.array,
+    tokenCount: PropTypes.number,
+    onLoadTokens: PropTypes.func,
+    accounts: PropTypes.array
+  };
+
+  componentDidMount () {
+    this.props.onLoadTokens();
+  }
+
+  render () {
+    console.log(this.props);
+    return (
+      <Tokens
+        { ...this.props }
+      />
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { list } = state.accounts;
+  const { isLoading, tokens, tokenCount } = state.tokens;
+
+  const { isOwner } = state.status.contract;
+
+  return { isLoading, tokens, tokenCount, isOwner, accounts: list };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onLoadTokens: () => {
+      dispatch(loadTokens());
+    },
+
+    handleMetaLookup: (index, query) => {
+      dispatch(queryTokenMeta(index, query));
+    },
+
+    handleUnregister: (index) => {
+      dispatch(unregisterToken(index));
+    },
+
+    handleAddMeta: (index, key, value) => {
+      dispatch(addTokenMeta(index, key, value));
+    }
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TokensContainer);
diff --git a/js/src/dapps/tokenreg/Tokens/index.js b/js/src/dapps/tokenreg/Tokens/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..87fbc567ef2f3db31a65d206720db12454dfcd7e
--- /dev/null
+++ b/js/src/dapps/tokenreg/Tokens/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './container';
diff --git a/js/src/dapps/tokenreg/Tokens/reducer.js b/js/src/dapps/tokenreg/Tokens/reducer.js
new file mode 100644
index 0000000000000000000000000000000000000000..21952105c4d30bf9cfa74a4ab3ff296dddfca9f4
--- /dev/null
+++ b/js/src/dapps/tokenreg/Tokens/reducer.js
@@ -0,0 +1,114 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import {
+  SET_TOKENS_LOADING,
+  SET_TOKEN_COUNT,
+  SET_TOKEN_DATA,
+  SET_TOKEN_META,
+  SET_TOKEN_LOADING,
+  SET_TOKEN_META_LOADING,
+  SET_TOKEN_PENDING,
+  DELETE_TOKEN
+} from './actions';
+
+const initialState = {
+  isLoading: true,
+  tokens: [],
+  tokenCount: 0
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case SET_TOKENS_LOADING:
+      return { ...state, isLoading: action.isLoading };
+
+    case SET_TOKEN_COUNT:
+      return { ...state, tokenCount: action.tokenCount };
+
+    case SET_TOKEN_DATA: {
+      const index = action.index;
+      const tokens = [].concat(state.tokens);
+
+      tokens[index] = {
+        ...tokens[index],
+        ...action.tokenData
+      };
+
+      return { ...state, tokens: tokens };
+    }
+
+    case SET_TOKEN_META: {
+      const index = action.index;
+      const tokens = [].concat(state.tokens);
+
+      tokens[index] = {
+        ...tokens[index],
+        meta: action.meta
+      };
+
+      return { ...state, tokens: tokens };
+    }
+
+    case SET_TOKEN_LOADING: {
+      const index = action.index;
+      const tokens = [].concat(state.tokens);
+
+      tokens[index] = {
+        ...tokens[index],
+        isLoading: action.isLoading
+      };
+
+      return { ...state, tokens: tokens };
+    }
+
+    case SET_TOKEN_META_LOADING: {
+      const index = action.index;
+      const tokens = [].concat(state.tokens);
+
+      tokens[index] = {
+        ...tokens[index],
+        isMetaLoading: action.isMetaLoading
+      };
+
+      return { ...state, tokens: tokens };
+    }
+
+    case SET_TOKEN_PENDING: {
+      const index = action.index;
+      const tokens = [].concat(state.tokens);
+
+      tokens[index] = {
+        ...tokens[index],
+        isPending: action.isPending
+      };
+
+      return { ...state, tokens: tokens };
+    }
+
+    case DELETE_TOKEN: {
+      const index = action.index;
+      const tokens = [].concat(state.tokens);
+
+      delete tokens[index];
+
+      return { ...state, tokens: tokens };
+    }
+
+    default:
+      return state;
+  }
+};
diff --git a/js/src/dapps/tokenreg/Tokens/tokens.css b/js/src/dapps/tokenreg/Tokens/tokens.css
new file mode 100644
index 0000000000000000000000000000000000000000..20aaecef4eeefb97ec57576d0a0009ad0c4cfc37
--- /dev/null
+++ b/js/src/dapps/tokenreg/Tokens/tokens.css
@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.tokens {
+  width: 90%;
+  padding-top: 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
diff --git a/js/src/dapps/tokenreg/Tokens/tokens.js b/js/src/dapps/tokenreg/Tokens/tokens.js
new file mode 100644
index 0000000000000000000000000000000000000000..57c2a2a9138d081a0789f630d9bc85ed072bc1a1
--- /dev/null
+++ b/js/src/dapps/tokenreg/Tokens/tokens.js
@@ -0,0 +1,68 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import Token from './Token';
+import Loading from '../Loading';
+
+import styles from './tokens.css';
+
+export default class Tokens extends Component {
+  static propTypes = {
+    handleAddMeta: PropTypes.func.isRequired,
+    handleUnregister: PropTypes.func.isRequired,
+    handleMetaLookup: PropTypes.func.isRequired,
+    isOwner: PropTypes.bool.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    tokens: PropTypes.array,
+    accounts: PropTypes.array
+  };
+
+  render () {
+    const { isLoading, tokens } = this.props;
+    const loading = isLoading ? (<Loading size={ 2 } />) : null;
+
+    return (
+      <div className={ styles.tokens }>
+        { this.renderTokens(tokens) }
+        { loading }
+      </div>
+    );
+  }
+
+  renderTokens (tokens) {
+    const { accounts } = this.props;
+
+    return tokens.map((token, index) => {
+      if (!token || !token.tla) {
+        return null;
+      }
+
+      const isTokenOwner = !!accounts.find((account) => account.address === token.owner);
+
+      return (
+        <Token
+          { ...token }
+          handleUnregister={ this.props.handleUnregister }
+          handleMetaLookup={ this.props.handleMetaLookup }
+          handleAddMeta={ this.props.handleAddMeta }
+          key={ index }
+          isTokenOwner={ isTokenOwner } />
+      );
+    });
+  }
+}
diff --git a/js/src/dapps/tokenreg/constants.js b/js/src/dapps/tokenreg/constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..e9e7bebcab84e261fd03f6a9af8aa12a02a77203
--- /dev/null
+++ b/js/src/dapps/tokenreg/constants.js
@@ -0,0 +1,30 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { HEX_TYPE, ADDRESS_TYPE } from './Inputs/validation';
+
+export const metaDataKeys = [
+  {
+    label: 'Image',
+    value: 'IMG',
+    validation: HEX_TYPE
+  },
+  {
+    label: 'Address',
+    value: 'A',
+    validation: ADDRESS_TYPE
+  }
+];
diff --git a/js/src/dapps/tokenreg/parity.js b/js/src/dapps/tokenreg/parity.js
new file mode 100644
index 0000000000000000000000000000000000000000..f6d59f44d5771db93be36fa0ed8af8889d14af51
--- /dev/null
+++ b/js/src/dapps/tokenreg/parity.js
@@ -0,0 +1,21 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const { api } = window.parity;
+
+export {
+  api
+};
diff --git a/js/src/dapps/tokenreg/reducers.js b/js/src/dapps/tokenreg/reducers.js
new file mode 100644
index 0000000000000000000000000000000000000000..cf533432fd4409af5aa057dc78a4fee01b669609
--- /dev/null
+++ b/js/src/dapps/tokenreg/reducers.js
@@ -0,0 +1,28 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { combineReducers } from 'redux';
+
+import status from './Status/reducer';
+import tokens from './Tokens/reducer';
+import actions from './Actions/reducer';
+import accounts from './Accounts/reducer';
+
+const rootReducer = combineReducers({
+  status, tokens, actions, accounts
+});
+
+export default rootReducer;
diff --git a/js/src/dapps/tokenreg/store.js b/js/src/dapps/tokenreg/store.js
new file mode 100644
index 0000000000000000000000000000000000000000..5fb7d4b6a4e4d42c3e9e8ca61942e7f8871ca2f5
--- /dev/null
+++ b/js/src/dapps/tokenreg/store.js
@@ -0,0 +1,22 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+
+import reducer from './reducers';
+
+export default createStore(reducer, applyMiddleware(thunk));
diff --git a/js/src/dapps/tokenreg/utils.js b/js/src/dapps/tokenreg/utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..0f4e192f085a5e337e3917dfd63b160c75c25893
--- /dev/null
+++ b/js/src/dapps/tokenreg/utils.js
@@ -0,0 +1,37 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { api } from './parity';
+
+import { eip20 as eip20Abi } from '../../contracts/abi';
+
+export const getTokenTotalSupply = (tokenAddress) => {
+  return api
+    .eth
+    .getCode(tokenAddress)
+    .then(code => {
+      if (!code || /^(0x)?0?$/.test(code)) {
+        return null;
+      }
+
+      const contract = api.newContract(eip20Abi, tokenAddress);
+
+      return contract
+        .instance
+        .totalSupply
+        .call({}, []);
+    });
+};
diff --git a/js/src/environment/empty.js b/js/src/environment/empty.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/js/src/environment/index.js b/js/src/environment/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d8e81f343fea0420cf1a9a7b0d99f81c3ff88a91
--- /dev/null
+++ b/js/src/environment/index.js
@@ -0,0 +1,20 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+// import './integration-tests';
+// import './perf-debug';
+
+import './tests';
diff --git a/js/src/environment/integration-tests/fake-backend.js b/js/src/environment/integration-tests/fake-backend.js
new file mode 100644
index 0000000000000000000000000000000000000000..16fcae3adc515a4ce8412f014acb8fb8228b4477
--- /dev/null
+++ b/js/src/environment/integration-tests/fake-backend.js
@@ -0,0 +1,84 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import sinon from 'sinon/pkg/sinon';
+import mockedResponses from '../../../test/mocked-responses.json';
+
+class FakeRpcServer {
+  constructor () {
+    this.xhr = null;
+    this.middlewares = [];
+  }
+
+  start () {
+    this.xhr = sinon.useFakeXMLHttpRequest();
+    this.xhr.onCreate = this.handleRequest;
+    return () => this.xhr.restore();
+  }
+
+  simpleRpc (rpcMethod, result) {
+    this.rpc(rpcMethod, req => result);
+  }
+
+  rpc (rpcMethod, middleware) {
+    this.middlewares.unshift({
+      rpcMethod, middleware
+    });
+  }
+
+  handleRequest = req => {
+    setTimeout(() => {
+      req.body = JSON.parse(req.requestBody);
+      const middlewaresForMethod = this.middlewares
+        .filter(m => m.rpcMethod === req.body.method);
+
+      const response = middlewaresForMethod
+        .map(m => m.middleware)
+        .reduce((replied, middleware) => {
+          if (replied) {
+            return replied;
+          }
+
+          return middleware(req);
+        }, false);
+
+      if (!response) {
+        return req.respond(405, {
+          'Content-Type': 'application/json'
+        }, JSON.stringify({
+          jsonrpc: '2.0',
+          id: req.body.id,
+          result: null
+        }));
+      }
+
+      return req.respond(200, {
+        'Content-Type': 'application/json'
+      }, JSON.stringify({
+        jsonrpc: '2.0',
+        id: req.body.id,
+        result: response
+      }));
+    });
+  }
+}
+
+const fakeRpc = new FakeRpcServer();
+fakeRpc.start();
+mockedResponses.rpc.forEach(method => fakeRpc.simpleRpc(method.name, method.response));
+
+// export fakeRpc to mock stuff in tests
+window.fakeRpc = fakeRpc;
diff --git a/js/src/environment/integration-tests/index.js b/js/src/environment/integration-tests/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d62acaa324beddb79497de60c702541139d1c1ef
--- /dev/null
+++ b/js/src/environment/integration-tests/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import './fake-backend';
diff --git a/js/src/environment/perf-debug/index.js b/js/src/environment/perf-debug/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..29f84f50fb0799d68c028459fc03aa04d3cedab6
--- /dev/null
+++ b/js/src/environment/perf-debug/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import './why-update';
diff --git a/js/src/environment/perf-debug/why-update.js b/js/src/environment/perf-debug/why-update.js
new file mode 100644
index 0000000000000000000000000000000000000000..35eef2edc3639c528c8c58f4db3e1efacf65f77f
--- /dev/null
+++ b/js/src/environment/perf-debug/why-update.js
@@ -0,0 +1,20 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import { whyDidYouUpdate } from 'why-did-you-update';
+
+whyDidYouUpdate(React);
diff --git a/js/src/environment/tests/index.js b/js/src/environment/tests/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3e6241fb1144fe9dc62d1809c51822d9e64cc799
--- /dev/null
+++ b/js/src/environment/tests/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import './test-utils';
diff --git a/js/src/environment/tests/test-utils.js b/js/src/environment/tests/test-utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..785a6f3ad8ee97e366aaae9bf0ec85a5441cb6d5
--- /dev/null
+++ b/js/src/environment/tests/test-utils.js
@@ -0,0 +1,46 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { Component } from 'react';
+
+const isProd = process.env.NODE_ENV === 'production';
+
+// Component utils for integration tests hooks.
+const TEST_HOOK = 'data-test';
+Component.prototype._test = isProd ? noop : testHook;
+Component.prototype._testInherit = isProd ? noop : testHookInherit;
+
+function noop (name) {}
+
+function testHookInherit (name) {
+  let hook = this.props[TEST_HOOK];
+  if (name) {
+    hook += `-${name}`;
+  }
+  return {
+    [TEST_HOOK]: hook
+  };
+}
+
+function testHook (name) {
+  let hook = this.constructor.name;
+  if (name) {
+    hook += `-${name}`;
+  }
+  return {
+    [TEST_HOOK]: hook
+  };
+}
diff --git a/js/src/error_pages.css b/js/src/error_pages.css
new file mode 100644
index 0000000000000000000000000000000000000000..0b098d29ade714976a3764ffd985b39597d36d7c
--- /dev/null
+++ b/js/src/error_pages.css
@@ -0,0 +1,113 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+@font-face {
+  font-family: "Roboto";
+  src: url('~roboto-font/fonts/Roboto/roboto-light-webfont.eot');
+  src: url('~roboto-font/fonts/Roboto/roboto-light-webfont.eot?#iefix') format('embedded-opentype'), url('~roboto-font/fonts/Roboto/roboto-light-webfont.woff') format('woff'), url('~roboto-font/fonts/Roboto/roboto-light-webfont.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+    font-family: 'Roboto Mono';
+    src: url('~roboto-mono-webfont/fonts/RobotoMono-Light.ttf') format('truetype');
+    font-style: normal;
+    font-weight: 300;
+    text-rendering: optimizeLegibility;
+}
+
+:root, :root body {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+  background: rgb(95, 95, 95);
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 16px;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+}
+
+:root a, :root a:visited {
+  text-decoration: none;
+  cursor: pointer;
+  color: rgb(0, 151, 167); /* #f80 */
+}
+
+:root a:hover {
+  color: rgb(0, 174, 193);
+}
+
+h1,h2,h3,h4,h5,h6 {
+  font-weight: 300;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+
+h1 {
+  font-size: 24px;
+  line-height: 36px;
+  color: rgb(0, 151, 167);
+}
+
+h2 {
+  font-size: 20px;
+  line-height: 34px;
+}
+
+code,kbd,pre,samp {
+  font-family: 'Roboto Mono', monospace;
+}
+
+.parity-navbar {
+  background: rgb(65, 65, 65);
+  height: 72px;
+  padding: 0 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.parity-status {
+  clear: both;
+  padding: 1rem;
+  margin: 1rem 0;
+  text-align: right;
+  opacity: 0.75;
+}
+
+.parity-box {
+  margin: 1rem;
+  padding: 1rem;
+  background-color: rgb(48, 48, 48);
+  box-sizing: border-box;
+  box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
+  border-radius: 2px;
+  z-index: 1;
+  color: #aaa;
+}
+
+.parity-box h1,
+.parity-box h2,
+.parity-box h3,
+.parity-box h4,
+.parity-box h5,
+.parity-box h6 {
+  margin: 0;
+}
diff --git a/js/src/images/dapps/blocks-350.png b/js/src/images/dapps/blocks-350.png
new file mode 100644
index 0000000000000000000000000000000000000000..16e0c213d5b341e729454b9951f8a641938b4c3a
Binary files /dev/null and b/js/src/images/dapps/blocks-350.png differ
diff --git a/js/src/index.html b/js/src/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..4ca2e7c1a012368aa85b745a056b66772abc6f42
--- /dev/null
+++ b/js/src/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Parity</title>
+    <style>
+      html, body, #container {
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="vendor.js"></script>
+    <script src="commons.js"></script>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/js/src/index.js b/js/src/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f432251d07df0c67bec53cb57c4af3fec297f563
--- /dev/null
+++ b/js/src/index.js
@@ -0,0 +1,91 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import 'babel-polyfill';
+import 'whatwg-fetch';
+
+// redirect when not on 127.0.0.1:8180
+const host = `${window.location.hostname}:${window.location.port}`;
+if (host === '127.0.0.1:8080' || host === 'localhost:8080') {
+  window.location = 'http://127.0.0.1:8180';
+}
+
+import es6Promise from 'es6-promise';
+es6Promise.polyfill();
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+import { createHashHistory } from 'history';
+import { Redirect, Router, Route, useRouterHistory } from 'react-router';
+
+import SecureApi from './secureApi';
+import ContractInstances from './contracts';
+
+import { initStore } from './redux';
+import { ContextProvider, muiTheme } from './ui';
+import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, Dapp, Dapps, Settings, SettingsBackground, SettingsViews, Signer, Status } from './views';
+
+import './environment';
+
+import '../assets/fonts/Roboto/font.css';
+import '../assets/fonts/RobotoMono/font.css';
+import styles from './reset.css';
+import './index.html';
+
+injectTapEventPlugin();
+
+const parityUrl = process.env.PARITY_URL ||
+  (
+    process.env.NODE_ENV === 'production'
+    ? window.location.host
+    : '127.0.0.1:8180'
+  );
+
+const api = new SecureApi(`ws://${parityUrl}`);
+ContractInstances.create(api);
+
+const store = initStore(api);
+store.dispatch({ type: 'initAll', api });
+
+const routerHistory = useRouterHistory(createHashHistory)({});
+
+ReactDOM.render(
+  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+    <Router className={ styles.reset } history={ routerHistory }>
+      <Redirect from='/' to='/accounts' />
+      <Redirect from='/settings' to='/settings/views' />
+      <Route path='/' component={ Application }>
+        <Route path='accounts' component={ Accounts } />
+        <Route path='account/:address' component={ Account } />
+        <Route path='addresses' component={ Addresses } />
+        <Route path='address/:address' component={ Address } />
+        <Route path='apps' component={ Dapps } />
+        <Route path='app/:type/:name' component={ Dapp } />
+        <Route path='contracts' component={ Contracts } />
+        <Route path='contract/:address' component={ Contract } />
+        <Route path='settings' component={ Settings }>
+          <Route path='background' component={ SettingsBackground } />
+          <Route path='views' component={ SettingsViews } />
+        </Route>
+        <Route path='signer' component={ Signer } />
+        <Route path='status' component={ Status } />
+        <Route path='status/:subpage' component={ Status } />
+      </Route>
+    </Router>
+  </ContextProvider>,
+  document.querySelector('#container')
+);
diff --git a/js/src/jsonrpc/README.md b/js/src/jsonrpc/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..8f16ec3ca77a3caf39263afb1306ca92e4af8a1d
--- /dev/null
+++ b/js/src/jsonrpc/README.md
@@ -0,0 +1,20 @@
+# jsonrpc
+
+JSON file of all ethereum's rpc methods supported by parity
+
+## interfaces
+
+[interfaces.md](release/interfaces.md) contains the auto-generated list of interfaces exposed, along with their relevant documentation
+
+## contributing
+
+0. Clone the repo
+0. Branch
+0. Add the missing interfaces only into `src/interfaces/*.js`
+0. Parameters (array) & Returns take objects of type
+    - `{ type: [Array|Boolean|Object|String|...], desc: 'some description' }`
+    - Types are built-in JS types or those defined in `src/types.js` (e.g. `BlockNumber`, `Quantity`, etc.)
+    - If a formatter is required, add it as `format: 'string-type'`
+0. Run the lint & tests, `npm run lint && npm run testOnce`
+0. Generate via `npm run build` which outputs `index.js`, `index.json` & `interfaces.md` (Only required until Travis is fully in-place)
+0. Check-in and make a PR
diff --git a/js/src/jsonrpc/generator/build-json.js b/js/src/jsonrpc/generator/build-json.js
new file mode 100644
index 0000000000000000000000000000000000000000..362df7bf5fe9305c5231f7c30fefccf320a5a6f6
--- /dev/null
+++ b/js/src/jsonrpc/generator/build-json.js
@@ -0,0 +1,67 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import fs from 'fs';
+import path from 'path';
+
+import interfaces from '../';
+
+const INDEX_JSON = path.join(__dirname, '../../release/index.json');
+const methods = [];
+
+function formatDescription (obj) {
+  const optional = obj.optional ? '(optional) ' : '';
+  const defaults = obj.default ? `(default: ${obj.default}) ` : '';
+
+  return `${obj.type.name} - ${optional}${defaults}${obj.desc}`;
+}
+
+function formatType (obj) {
+  if (obj.type === Object && obj.details) {
+    const formatted = {};
+
+    Object.keys(obj.details).sort().forEach((key) => {
+      formatted[key] = formatType(obj.details[key]);
+    });
+
+    return {
+      desc: formatDescription(obj),
+      details: formatted
+    };
+  } else if (obj.type && obj.type.name) {
+    return formatDescription(obj);
+  }
+
+  return obj;
+}
+
+Object.keys(interfaces).sort().forEach((group) => {
+  Object.keys(interfaces[group]).sort().forEach((name) => {
+    const method = interfaces[group][name];
+    const deprecated = method.deprecated ? ' (Deprecated and not supported, to be removed in a future version)' : '';
+
+    methods.push({
+      name: `${group}_${name}`,
+      desc: `${method.desc}${deprecated}`,
+      params: method.params.map(formatType),
+      returns: formatType(method.returns),
+      inputFormatters: method.params.map((param) => param.format || null),
+      outputFormatter: method.returns.format || null
+    });
+  });
+});
+
+fs.writeFileSync(INDEX_JSON, JSON.stringify({ methods: methods }, null, 2), 'utf8');
diff --git a/js/src/jsonrpc/generator/build-markdown.js b/js/src/jsonrpc/generator/build-markdown.js
new file mode 100644
index 0000000000000000000000000000000000000000..278138d545ef2a72ce917735b1d6ae6fe44c1dbd
--- /dev/null
+++ b/js/src/jsonrpc/generator/build-markdown.js
@@ -0,0 +1,69 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import fs from 'fs';
+import path from 'path';
+
+import interfaces from '../';
+
+const MARKDOWN = path.join(__dirname, '../../release/interfaces.md');
+
+let preamble = '# interfaces\n';
+let markdown = '';
+
+function formatDescription (obj, prefix = '', indent = '') {
+  const optional = obj.optional ? '(optional) ' : '';
+  const defaults = obj.default ? `(default: ${obj.default}) ` : '';
+
+  return `${indent}- ${prefix}\`${obj.type.name}\` - ${optional}${defaults}${obj.desc}`;
+}
+
+function formatType (obj) {
+  if (obj.type === Object && obj.details) {
+    const sub = Object.keys(obj.details).sort().map((key) => {
+      return formatDescription(obj.details[key], `\`${key}\`/`, '    ');
+    }).join('\n');
+
+    return `${formatDescription(obj)}\n${sub}`;
+  } else if (obj.type && obj.type.name) {
+    return formatDescription(obj);
+  }
+
+  return obj;
+}
+
+Object.keys(interfaces).sort().forEach((group) => {
+  let content = '';
+
+  preamble = `${preamble}\n- [${group}](#${group})`;
+  markdown = `${markdown}\n## ${group}\n`;
+
+  Object.keys(interfaces[group]).sort().forEach((iname) => {
+    const method = interfaces[group][iname];
+    const name = `${group}_${iname}`;
+    const deprecated = method.deprecated ? ' (Deprecated and not supported, to be removed in a future version)' : '';
+    const desc = `${method.desc}${deprecated}`;
+    const params = method.params.map(formatType).join('\n');
+    const returns = formatType(method.returns);
+
+    markdown = `${markdown}\n- [${name}](#${name})`;
+    content = `${content}### ${name}\n\n${desc}\n\n#### parameters\n\n${params || 'none'}\n\n#### returns\n\n${returns || 'none'}\n\n`;
+  });
+
+  markdown = `${markdown}\n\n${content}`;
+});
+
+fs.writeFileSync(MARKDOWN, `${preamble}\n\n${markdown}`, 'utf8');
diff --git a/js/src/jsonrpc/index.js b/js/src/jsonrpc/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..18bd4302df938610835f01fc276c073a2827c44c
--- /dev/null
+++ b/js/src/jsonrpc/index.js
@@ -0,0 +1,35 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import db from './interfaces/db';
+import eth from './interfaces/eth';
+import ethcore from './interfaces/ethcore';
+import net from './interfaces/net';
+import personal from './interfaces/personal';
+import shh from './interfaces/shh';
+import trace from './interfaces/trace';
+import web3 from './interfaces/web3';
+
+export default {
+  db: db,
+  eth: eth,
+  ethcore: ethcore,
+  net: net,
+  personal: personal,
+  shh: shh,
+  trace: trace,
+  web3: web3
+};
diff --git a/js/src/jsonrpc/index.spec.js b/js/src/jsonrpc/index.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..0f124747743b78f4c9988fefb22d7b12d2c10fa9
--- /dev/null
+++ b/js/src/jsonrpc/index.spec.js
@@ -0,0 +1,62 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import interfaces from './';
+import { Address, BlockNumber, Data, Hash, Integer, Quantity } from './types';
+
+const flatlist = {};
+
+function verifyType (obj) {
+  if (typeof obj !== 'string') {
+    expect(obj).to.satisfy(() => {
+      return obj.type === Array ||
+        obj.type === Boolean ||
+        obj.type === Object ||
+        obj.type === String ||
+        obj.type === Address ||
+        obj.type === BlockNumber ||
+        obj.type === Data ||
+        obj.type === Hash ||
+        obj.type === Integer ||
+        obj.type === Quantity;
+    });
+  }
+}
+
+describe('jsonrpc/interfaces', () => {
+  Object.keys(interfaces).forEach((group) => {
+    describe(group, () => {
+      Object.keys(interfaces[group]).forEach((name) => {
+        const method = interfaces[group][name];
+
+        flatlist[`${group}_${name}`] = true;
+
+        describe(name, () => {
+          it('has the correct interface', () => {
+            expect(method.desc).to.be.a('string');
+            expect(method.params).to.be.an('array');
+            expect(method.returns).to.satisfy((returns) => {
+              return typeof returns === 'string' || typeof returns === 'object';
+            });
+
+            method.params.forEach(verifyType);
+            verifyType(method.returns);
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/js/src/jsonrpc/interfaces/db.js b/js/src/jsonrpc/interfaces/db.js
new file mode 100644
index 0000000000000000000000000000000000000000..ab4d35b34a7087aac66f6825dc2d9d061fcb230c
--- /dev/null
+++ b/js/src/jsonrpc/interfaces/db.js
@@ -0,0 +1,103 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { Data } from '../types';
+
+export default {
+  getHex: {
+    desc: 'Returns binary data from the local database.',
+    params: [
+      {
+        type: String,
+        desc: 'Database name'
+      },
+      {
+        type: String,
+        desc: 'Key name'
+      }
+    ],
+    returns: {
+      type: Data,
+      desc: 'The previously stored data'
+    },
+    deprecated: true
+  },
+
+  getString: {
+    desc: 'Returns string from the local database.',
+    params: [
+      {
+        type: String,
+        desc: 'Database name'
+      },
+      {
+        type: String,
+        desc: 'Key name'
+      }
+    ],
+    returns: {
+      type: String,
+      desc: 'The previously stored string'
+    },
+    deprecated: true
+  },
+
+  putHex: {
+    desc: 'Stores binary data in the local database.',
+    params: [
+      {
+        type: String,
+        desc: 'Database name'
+      },
+      {
+        type: String,
+        desc: 'Key name'
+      },
+      {
+        type: Data,
+        desc: 'The data to store'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: '`true` if the value was stored, otherwise `false`'
+    },
+    deprecated: true
+  },
+
+  putString: {
+    desc: 'Stores a string in the local database.',
+    params: [
+      {
+        type: String,
+        desc: 'Database name'
+      },
+      {
+        type: String,
+        desc: 'Key name'
+      },
+      {
+        type: String,
+        desc: 'The string to store'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: '`true` if the value was stored, otherwise `false`'
+    },
+    deprecated: true
+  }
+};
diff --git a/js/src/jsonrpc/interfaces/eth.js b/js/src/jsonrpc/interfaces/eth.js
new file mode 100644
index 0000000000000000000000000000000000000000..b8bbcbd614496667d2c0f49a9928104a7f18298b
--- /dev/null
+++ b/js/src/jsonrpc/interfaces/eth.js
@@ -0,0 +1,1044 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { Address, BlockNumber, Data, Hash, Quantity } from '../types';
+
+export default {
+  accounts: {
+    desc: 'Returns a list of addresses owned by client.',
+    params: [],
+    returns: {
+      type: Array,
+      desc: '20 Bytes - addresses owned by the client'
+    }
+  },
+
+  blockNumber: {
+    desc: 'Returns the number of most recent block.',
+    params: [],
+    returns: {
+      type: Quantity,
+      desc: 'integer of the current block number the client is on'
+    }
+  },
+
+  call: {
+    desc: 'Executes a new message call immediately without creating a transaction on the block chain.',
+    params: [
+      {
+        type: Object,
+        desc: 'The transaction call object',
+        format: 'inputCallFormatter',
+        details: {
+          from: {
+            type: Address,
+            desc: '20 Bytes - The address the transaction is send from',
+            optional: true
+          },
+          to: {
+            type: Address,
+            desc: '20 Bytes  - The address the transaction is directed to'
+          },
+          gas: {
+            type: Quantity,
+            desc: 'Integer of the gas provided for the transaction execution. eth_call consumes zero gas, but this parameter may be needed by some executions',
+            optional: true
+          },
+          gasPrice: {
+            type: Quantity,
+            desc: 'Integer of the gasPrice used for each paid gas',
+            optional: true
+          },
+          value: {
+            type: Quantity,
+            desc: 'Integer of the value send with this transaction',
+            optional: true
+          },
+          data: {
+            type: Data,
+            desc: 'Hash of the method signature and encoded parameters. For details see [Ethereum Contract ABI](https://github.com/ethereum/wiki/wiki/Ethereum-Contract-ABI)',
+            optional: true
+          }
+        }
+      },
+      {
+        type: BlockNumber,
+        desc: 'integer block number, or the string `\'latest\'`, `\'earliest\'` or `\'pending\'`, see the [default block parameter](#the-default-block-parameter)',
+        format: 'inputDefaultBlockNumberFormatter'
+      }
+    ],
+    returns: {
+      type: Data,
+      desc: 'the return value of executed contract'
+    }
+  },
+
+  checkRequest: {
+    desc: 'Returns the transactionhash of the requestId (received from eth_postTransaction) if the request was confirmed',
+    params: [
+      {
+        type: Quantity,
+        desc: 'The requestId to check for'
+      }
+    ],
+    returns: {
+      type: Hash,
+      desc: '32 Bytes - the transaction hash, or the zero hash if the transaction is not yet available'
+    }
+  },
+
+  coinbase: {
+    desc: 'Returns the client coinbase address.',
+    params: [],
+    returns: {
+      type: Address,
+      desc: 'The current coinbase address'
+    }
+  },
+
+  compileSerpent: {
+    desc: 'Returns compiled serpent code.',
+    params: [
+      {
+        type: String,
+        desc: 'The source code'
+      }
+    ],
+    returns: {
+      type: Data,
+      desc: 'The compiled source code'
+    }
+  },
+
+  compileSolidity: {
+    desc: 'Returns compiled solidity code.',
+    params: [
+      {
+        type: String,
+        desc: 'The source code'
+      }
+    ],
+    returns: {
+      type: Data,
+      desc: 'The compiled source code'
+    }
+  },
+
+  compileLLL: {
+    desc: 'Returns compiled LLL code.',
+    params: [
+      {
+        type: String,
+        desc: 'The source code'
+      }
+    ],
+    returns: {
+      type: Data,
+      desc: 'The compiled source code'
+    }
+  },
+
+  estimateGas: {
+    desc: 'Makes a call or transaction, which won\'t be added to the blockchain and returns the used gas, which can be used for estimating the used gas.',
+    params: [
+      {
+        type: Object,
+        desc: 'see [eth_sendTransaction](#eth_sendTransaction)',
+        format: 'inputCallFormatter'
+      }
+    ],
+    returns: {
+      type: Quantity,
+      desc: 'The amount of gas used',
+      format: 'utils.toDecimal'
+    }
+  },
+
+  fetchQueuedTransactions: {
+    desc: '?',
+    params: [
+      '?'
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  flush: {
+    desc: '?',
+    params: [],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  gasPrice: {
+    desc: 'Returns the current price per gas in wei.',
+    params: [],
+    returns: {
+      type: Quantity,
+      desc: 'integer of the current gas price in wei'
+    }
+  },
+
+  getBalance: {
+    desc: 'Returns the balance of the account of given address.',
+    params: [
+      {
+        type: Address,
+        desc: '20 Bytes - address to check for balance',
+        format: 'inputAddressFormatter'
+      },
+      {
+        type: BlockNumber,
+        desc: 'integer block number, or the string `\'latest\'`, `\'earliest\'` or `\'pending\'`, see the [default block parameter](#the-default-block-parameter)',
+        format: 'inputDefaultBlockNumberFormatter'
+      }
+    ],
+    returns: {
+      type: Quantity,
+      desc: 'integer of the current balance in wei',
+      format: 'outputBigNumberFormatter'
+    }
+  },
+
+  getBlockByHash: {
+    desc: 'Returns information about a block by hash.',
+    params: [
+      {
+        type: Hash,
+        desc: 'Hash of a block'
+      },
+      {
+        type: Boolean,
+        desc: 'If `true` it returns the full transaction objects, if `false` only the hashes of the transactions'
+      }
+    ],
+    returns: {
+      type: Object,
+      desc: 'A block object, or `null` when no block was found',
+      details: {
+        number: {
+          type: Quantity,
+          desc: 'The block number. `null` when its pending block'
+        },
+        hash: {
+          type: Hash,
+          desc: '32 Bytes - hash of the block. `null` when its pending block'
+        },
+        parentHash: {
+          type: Hash,
+          desc: '32 Bytes - hash of the parent block'
+        },
+        nonce: {
+          type: Data,
+          desc: '8 Bytes - hash of the generated proof-of-work. `null` when its pending block'
+        },
+        sha3Uncles: {
+          type: Data,
+          desc: '32 Bytes - SHA3 of the uncles data in the block'
+        },
+        logsBloom: {
+          type: Data,
+          desc: '256 Bytes - the bloom filter for the logs of the block. `null` when its pending block'
+        },
+        transactionsRoot: {
+          type: Data,
+          desc: '32 Bytes - the root of the transaction trie of the block'
+        },
+        stateRoot: {
+          type: Data,
+          desc: '32 Bytes - the root of the final state trie of the block'
+        },
+        receiptsRoot: {
+          type: Data, desc: '32 Bytes - the root of the receipts trie of the block'
+        },
+        miner: {
+          type: Address,
+          desc: '20 Bytes - the address of the beneficiary to whom the mining rewards were given'
+        },
+        difficulty: {
+          type: Quantity,
+          desc: 'integer of the difficulty for this block'
+        },
+        totalDifficulty: {
+          type: Quantity,
+          desc: 'integer of the total difficulty of the chain until this block'
+        },
+        extraData: {
+          type: Data,
+          desc: 'the \'extra data\' field of this block'
+        },
+        size: {
+          type: Quantity,
+          desc: 'integer the size of this block in bytes'
+        },
+        gasLimit: {
+          type: Quantity,
+          desc: 'the maximum gas allowed in this block'
+        },
+        gasUsed: {
+          type: Quantity,
+          desc: 'the total used gas by all transactions in this block'
+        },
+        timestamp: {
+          type: Quantity,
+          desc: 'the unix timestamp for when the block was collated'
+        },
+        transactions: {
+          type: Array,
+          desc: 'Array of transaction objects, or 32 Bytes transaction hashes depending on the last given parameter'
+        },
+        uncles: {
+          type: Array,
+          desc: 'Array of uncle hashes'
+        }
+      }
+    }
+  },
+
+  getBlockByNumber: {
+    desc: 'Returns information about a block by block number.',
+    params: [
+      {
+        type: BlockNumber,
+        desc: 'integer of a block number, or the string `\'earliest\'`, `\'latest\'` or `\'pending\'`, as in the [default block parameter](#the-default-block-parameter)'
+      },
+      {
+        type: Boolean,
+        desc: 'If `true` it returns the full transaction objects, if `false` only the hashes of the transactions'
+      }
+    ],
+    returns: 'See [eth_getBlockByHash](#eth_getblockbyhash)'
+  },
+
+  getBlockTransactionCountByHash: {
+    desc: 'Returns the number of transactions in a block from a block matching the given block hash.',
+    params: [
+      {
+        type: Hash,
+        desc: '32 Bytes - hash of a block'
+      }
+    ],
+    returns: {
+      type: Quantity,
+      desc: 'integer of the number of transactions in this block'
+    }
+  },
+
+  getBlockTransactionCountByNumber: {
+    desc: 'Returns the number of transactions in a block from a block matching the given block number.',
+    params: [
+      {
+        type: BlockNumber,
+        desc: 'integer of a block number, or the string `\'earliest\'`, `\'latest\'` or `\'pending\'`, as in the [default block parameter](#the-default-block-parameter)'
+      }
+    ],
+    returns: {
+      type: Quantity,
+      desc: 'integer of the number of transactions in this block'
+    }
+  },
+
+  getCode: {
+    desc: 'Returns code at a given address.',
+    params: [
+      {
+        type: Address,
+        desc: '20 Bytes - address',
+        format: 'inputAddressFormatter'
+      },
+      {
+        type: BlockNumber,
+        desc: 'integer block number, or the string `\'latest\'`, `\'earliest\'` or `\'pending\'`, see the [default block parameter](#the-default-block-parameter)',
+        format: 'inputDefaultBlockNumberFormatter'
+      }
+    ],
+    returns: {
+      type: Data,
+      desc: 'the code from the given address'
+    }
+  },
+
+  getCompilers: {
+    desc: 'Returns a list of available compilers in the client.',
+    params: [],
+    returns: {
+      type: Array,
+      desc: 'Array of available compilers'
+    }
+  },
+
+  getFilterChanges: {
+    desc: 'Polling method for a filter, which returns an array of logs which occurred since last poll.',
+    params: [
+      {
+        type: Quantity,
+        desc: 'The filter id'
+      }
+    ],
+    returns: {
+      type: Array,
+      desc: 'Array of log objects, or an empty array if nothing has changed since last poll'
+    }
+  },
+
+  getFilterChangesEx: {
+    desc: '?',
+    params: [
+      '?'
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  getFilterLogs: {
+    desc: 'Returns an array of all logs matching filter with given id.',
+    params: [
+      {
+        type: Quantity,
+        desc: 'The filter id'
+      }
+    ],
+    returns: 'See [eth_getFilterChanges](#eth_getfilterchanges)'
+  },
+
+  getFilterLogsEx: {
+    desc: '?',
+    params: [
+      '?'
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  getLogs: {
+    desc: 'Returns an array of all logs matching a given filter object.',
+    params: [
+      {
+        type: Object,
+        desc: 'The filter object, see [eth_newFilter parameters](#eth_newfilter)'
+      }
+    ],
+    returns: 'See [eth_getFilterChanges](#eth_getfilterchanges)'
+  },
+
+  getLogsEx: {
+    desc: '?',
+    params: [
+      '?'
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  getStorageAt: {
+    desc: 'Returns the value from a storage position at a given address.',
+    params: [
+      {
+        type: Address,
+        desc: '20 Bytes - address of the storage'
+      },
+      {
+        type: Quantity,
+        desc: 'integer of the position in the storage',
+        format: 'utils.toHex'
+      },
+      {
+        type: BlockNumber,
+        desc: 'integer block number, or the string `\'latest\'`, `\'earliest\'` or `\'pending\'`, see the [default block parameter](#the-default-block-parameter)',
+        format: 'inputDefaultBlockNumberFormatter'
+      }
+    ],
+    returns: {
+      type: Data,
+      desc: 'the value at this storage position'
+    }
+  },
+
+  getTransactionByHash: {
+    desc: 'Returns the information about a transaction requested by transaction hash.',
+    params: [
+      {
+        type: Hash,
+        desc: '32 Bytes - hash of a transaction'
+      }
+    ],
+    returns: {
+      type: Object,
+      desc: 'A transaction object, or `null` when no transaction was found:',
+      format: 'outputTransactionFormatter',
+      details: {
+        hash: {
+          type: Hash,
+          desc: '32 Bytes - hash of the transaction.'
+        },
+        nonce: {
+          type: Quantity,
+          desc: 'the number of transactions made by the sender prior to this one.'
+        },
+        blockHash: {
+          type: Hash,
+          desc: '32 Bytes - hash of the block where this transaction was in. `null` when its pending.'
+        },
+        blockNumber: {
+          type: BlockNumber,
+          desc: 'block number where this transaction was in. `null` when its pending.'
+        },
+        transactionIndex: {
+          type: Quantity,
+          desc: 'integer of the transactions index position in the block. `null` when its pending.'
+        },
+        from: {
+          type: Address,
+          desc: '20 Bytes - address of the sender.'
+        },
+        to: {
+          type: Address,
+          desc: '20 Bytes - address of the receiver. `null` when its a contract creation transaction.'
+        },
+        value: {
+          type: Quantity,
+          desc: 'value transferred in Wei.'
+        },
+        gasPrice: {
+          type: Quantity,
+          desc: 'gas price provided by the sender in Wei.'
+        },
+        gas: {
+          type: Quantity,
+          desc: 'gas provided by the sender.'
+        },
+        input: {
+          type: Data,
+          desc: 'the data send along with the transaction.'
+        }
+      }
+    }
+  },
+
+  getTransactionByBlockHashAndIndex: {
+    desc: 'Returns information about a transaction by block hash and transaction index position.',
+    params: [
+      {
+        type: Hash,
+        desc: 'hash of a block'
+      },
+      {
+        type: Quantity,
+        desc: 'integer of the transaction index position'
+      }
+    ],
+    returns: 'See [eth_getBlockByHash](#eth_gettransactionbyhash)'
+  },
+
+  getTransactionByBlockNumberAndIndex: {
+    desc: 'Returns information about a transaction by block number and transaction index position.',
+    params: [
+      {
+        type: BlockNumber,
+        desc: 'a block number, or the string `\'earliest\'`, `\'latest\'` or `\'pending\'`, as in the [default block parameter](#the-default-block-parameter)'
+      },
+      {
+        type: Quantity,
+        desc: 'The transaction index position'
+      }
+    ],
+    returns: 'See [eth_getBlockByHash](#eth_gettransactionbyhash)'
+  },
+
+  getTransactionCount: {
+    desc: 'Returns the number of transactions *sent* from an address.',
+    params: [
+      {
+        type: Address,
+        desc: '20 Bytes - address'
+      },
+      {
+        type: BlockNumber,
+        desc: 'integer block number, or the string `\'latest\'`, `\'earliest\'` or `\'pending\'`, see the [default block parameter](#the-default-block-parameter)',
+        format: 'inputDefaultBlockNumberFormatter'
+      }
+    ],
+    returns: {
+      type: Quantity,
+      desc: 'integer of the number of transactions send from this address',
+      format: 'utils.toDecimal'
+    }
+  },
+
+  getTransactionReceipt: {
+    desc: 'Returns the receipt of a transaction by transaction hash.\n**Note** That the receipt is not available for pending transactions.',
+    params: [
+      {
+        type: Hash,
+        desc: 'hash of a transaction'
+      }
+    ],
+    returns: {
+      type: Object,
+      desc: 'A transaction receipt object, or `null` when no receipt was found:',
+      format: 'outputTransactionReceiptFormatter',
+      details: {
+        transactionHash: {
+          type: Hash,
+          desc: '32 Bytes - hash of the transaction.'
+        },
+        transactionIndex: {
+          type: Quantity,
+          desc: 'integer of the transactions index position in the block.'
+        },
+        blockHash: {
+          type: Hash,
+          desc: '32 Bytes - hash of the block where this transaction was in.'
+        },
+        blockNumber: {
+          type: BlockNumber,
+          desc: 'block number where this transaction was in.'
+        },
+        cumulativeGasUsed: {
+          type: Quantity,
+          desc: 'The total amount of gas used when this transaction was executed in the block.'
+        },
+        gasUsed: {
+          type: Quantity,
+          desc: 'The amount of gas used by this specific transaction alone.'
+        },
+        contractAddress: {
+          type: Address,
+          desc: '20 Bytes - The contract address created, if the transaction was a contract creation, otherwise `null`.'
+        },
+        logs: {
+          type: Array,
+          desc: 'Array of log objects, which this transaction generated.'
+        }
+      }
+    }
+  },
+
+  getUncleByBlockHashAndIndex: {
+    desc: 'Returns information about a uncle of a block by hash and uncle index position.',
+    params: [
+      {
+        type: Hash,
+        desc: 'Hash a block'
+      },
+      {
+        type: Quantity,
+        desc: 'The uncle\'s index position'
+      }
+    ],
+    returns: 'See [eth_getBlockByHash](#eth_getblockbyhash)'
+  },
+
+  getUncleByBlockNumberAndIndex: {
+    desc: 'Returns information about a uncle of a block by number and uncle index position.',
+    params: [
+      {
+        type: BlockNumber,
+        desc: 'a block number, or the string `\'earliest\'`, `\'latest\'` or `\'pending\'`, as in the [default block parameter](#the-default-block-parameter)'
+      },
+      {
+        type: Quantity,
+        desc: 'The uncle\'s index position'
+      }
+    ],
+    returns: 'See [eth_getBlockByHash](#eth_getblockbyhash)'
+  },
+
+  getUncleCountByBlockHash: {
+    desc: 'Returns the number of uncles in a block from a block matching the given block hash.',
+    params: [
+      {
+        type: Hash,
+        desc: '32 Bytes - hash of a block'
+      }
+    ],
+    returns: {
+      type: Quantity,
+      desc: 'integer of the number of uncles in this block'
+    }
+  },
+
+  getUncleCountByBlockNumber: {
+    desc: 'Returns the number of uncles in a block from a block matching the given block number.',
+    params: [
+      {
+        type: BlockNumber,
+        desc: 'integer of a block number, or the string \'latest\', \'earliest\' or \'pending\', see the [default block parameter](#the-default-block-parameter)'
+      }
+    ],
+    returns: {
+      type: Quantity,
+      desc: 'integer of the number of uncles in this block'
+    }
+  },
+
+  getWork: {
+    desc: 'Returns the hash of the current block, the seedHash, and the boundary condition to be met (\'target\').',
+    params: [],
+    returns: {
+      type: Array,
+      desc: 'Array with the following properties:'
+    }
+  },
+
+  hashrate: {
+    desc: 'Returns the number of hashes per second that the node is mining with.',
+    params: [],
+    returns: {
+      type: Quantity,
+      desc: 'number of hashes per second'
+    }
+  },
+
+  inspectTransaction: {
+    desc: '?',
+    params: [
+      '?'
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  mining: {
+    desc: 'Returns `true` if client is actively mining new blocks.',
+    params: [],
+    returns: {
+      type: Boolean,
+      desc: '`true` of the client is mining, otherwise `false`'
+    }
+  },
+
+  newBlockFilter: {
+    desc: 'Creates a filter in the node, to notify when a new block arrives.\nTo check if the state has changed, call [eth_getFilterChanges](#eth_getfilterchanges).',
+    params: [],
+    returns: {
+      type: Quantity,
+      desc: 'A filter id'
+    }
+  },
+
+  newFilter: {
+    desc: 'Creates a filter object, based on filter options, to notify when the state changes (logs).\nTo check if the state has changed, call [eth_getFilterChanges](#eth_getfilterchanges).',
+    params: [{
+      type: Object,
+      desc: 'The filter options:',
+      details: {
+        fromBlock: {
+          type: BlockNumber,
+          desc: 'Integer block number, or `\'latest\'` for the last mined block or `\'pending\'`, `\'earliest\'` for not yet mined transactions.',
+          optional: true,
+          default: 'latest'
+        },
+        toBlock: {
+          type: BlockNumber,
+          desc: 'Integer block number, or `\'latest\'` for the last mined block or `\'pending\'`, `\'earliest\'` for not yet mined transactions.',
+          optional: true,
+          default: 'latest'
+        },
+        address: {
+          type: Address,
+          desc: '20 Bytes - Contract address or a list of addresses from which logs should originate.',
+          optional: true
+        },
+        topics: {
+          type: Array,
+          desc: 'Array of 32 Bytes `DATA` topics. Topics are order-dependent. Each topic can also be an array of DATA with \'or\' options.',
+          optional: true
+        },
+        limit: {
+          type: Number,
+          desc: 'The maximum number of entries to retrieve (latest first)',
+          optional: true
+        }
+      }
+    }],
+    returns: {
+      type: Quantity,
+      desc: 'The filter id'
+    }
+  },
+
+  newFilterEx: {
+    desc: '?',
+    params: [
+      '?'
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  newPendingTransactionFilter: {
+    desc: 'Creates a filter in the node, to notify when new pending transactions arrive.\nTo check if the state has changed, call [eth_getFilterChanges](#eth_getfilterchanges).',
+    params: [],
+    returns: {
+      type: Quantity,
+      desc: 'A filter id'
+    }
+  },
+
+  notePassword: {
+    desc: '?',
+    params: [
+      '?'
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  pendingTransactions: {
+    desc: '?',
+    params: [],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  postTransaction: {
+    desc: 'Posts a transaction to the Signer.',
+    params: [
+      {
+        type: Object,
+        desc: 'see [eth_sendTransaction](#eth_sendTransaction)',
+        format: 'inputCallFormatter'
+      }
+    ],
+    returns: {
+      type: Quantity,
+      desc: 'The id of the actual transaction',
+      format: 'utils.toDecimal'
+    }
+  },
+
+  protocolVersion: {
+    desc: 'Returns the current ethereum protocol version.',
+    params: [],
+    returns: {
+      type: String,
+      desc: 'The current ethereum protocol version'
+    }
+  },
+
+  register: {
+    desc: '?',
+    params: [
+      '?'
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  sendRawTransaction: {
+    desc: 'Creates new message call transaction or a contract creation for signed transactions.',
+    params: [
+      {
+        type: Data,
+        desc: 'The signed transaction data'
+      }
+    ],
+    returns: {
+      type: Hash,
+      desc: '32 Bytes - the transaction hash, or the zero hash if the transaction is not yet available'
+    }
+  },
+
+  sendTransaction: {
+    desc: 'Creates new message call transaction or a contract creation, if the data field contains code.',
+    params: [
+      {
+        type: Object, desc: 'The transaction object',
+        format: 'inputTransactionFormatter',
+        details: {
+          from: {
+            type: Address,
+            desc: '20 Bytes - The address the transaction is send from'
+          },
+          to: {
+            type: Address,
+            desc: '20 Bytes - (optional when creating new contract) The address the transaction is directed to'
+          },
+          gas: {
+            type: Quantity,
+            desc: 'Integer of the gas provided for the transaction execution. It will return unused gas.',
+            optional: true,
+            default: 90000
+          },
+          gasPrice: {
+            type: Quantity,
+            desc: 'Integer of the gasPrice used for each paid gas',
+            optional: true,
+            default: 'To-Be-Determined'
+          },
+          value: {
+            type: Quantity,
+            desc: 'Integer of the value send with this transaction',
+            optional: true
+          },
+          data: {
+            type: Data,
+            desc: 'The compiled code of a contract OR the hash of the invoked method signature and encoded parameters. For details see [Ethereum Contract ABI](https://github.com/ethereum/wiki/wiki/Ethereum-Contract-ABI)'
+          },
+          nonce: {
+            type: Quantity,
+            desc: 'Integer of a nonce. This allows to overwrite your own pending transactions that use the same nonce.',
+            optional: true
+          }
+        }
+      }
+    ],
+    returns: {
+      type: Hash,
+      desc: '32 Bytes - the transaction hash, or the zero hash if the transaction is not yet available'
+    }
+  },
+
+  sign: {
+    desc: 'Signs data with a given address.\n**Note** the address to sign must be unlocked.',
+    params: [
+      {
+        type: Address,
+        desc: '20 Bytes - address',
+        format: 'inputAddressFormatter'
+      },
+      {
+        type: Data,
+        desc: 'Data to sign'
+      }
+    ],
+    returns: {
+      type: Data,
+      desc: 'Signed data'
+    }
+  },
+
+  signTransaction: {
+    desc: '?',
+    params: [
+      '?'
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  submitWork: {
+    desc: 'Used for submitting a proof-of-work solution.',
+    params: [
+      {
+        type: Data,
+        desc: '8 Bytes - The nonce found (64 bits)'
+      },
+      {
+        type: Data,
+        desc: '32 Bytes - The header\'s pow-hash (256 bits)'
+      },
+      {
+        type: Data,
+        desc: '32 Bytes - The mix digest (256 bits)'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: '`true` if the provided solution is valid, otherwise `false`'
+    }
+  },
+
+  submitHashrate: {
+    desc: 'Used for submitting mining hashrate.',
+    params: [
+      {
+        type: Data,
+        desc: 'a hexadecimal string representation (32 bytes) of the hash rate'
+      },
+      {
+        type: String,
+        desc: 'A random hexadecimal(32 bytes) ID identifying the client'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: '`true` if submitting went through succesfully and `false` otherwise'
+    }
+  },
+
+  syncing: {
+    desc: 'Returns an object with data about the sync status or `false`.',
+    params: [],
+    returns: {
+      type: Object,
+      desc: 'An object with sync status data or `FALSE`, when not syncing',
+      format: 'outputSyncingFormatter',
+      details: {
+        startingBlock: {
+          type: Quantity,
+          desc: 'The block at which the import started (will only be reset, after the sync reached his head)'
+        },
+        currentBlock: {
+          type: Quantity,
+          desc: 'The current block, same as eth_blockNumber'
+        },
+        highestBlock: {
+          type: Quantity,
+          desc: 'The estimated highest block'
+        }
+      }
+    }
+  },
+
+  uninstallFilter: {
+    desc: 'Uninstalls a filter with given id. Should always be called when watch is no longer needed.\nAdditonally Filters timeout when they aren\'t requested with [eth_getFilterChanges](#eth_getfilterchanges) for a period of time.',
+    params: [
+      {
+        type: Quantity,
+        desc: 'The filter id'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: '`true` if the filter was successfully uninstalled, otherwise `false`'
+    }
+  },
+
+  unregister: {
+    desc: '?',
+    params: [
+      '?'
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  }
+};
diff --git a/js/src/jsonrpc/interfaces/ethcore.js b/js/src/jsonrpc/interfaces/ethcore.js
new file mode 100644
index 0000000000000000000000000000000000000000..5b291061852e6456cb921c511c2a1de1ace9c065
--- /dev/null
+++ b/js/src/jsonrpc/interfaces/ethcore.js
@@ -0,0 +1,315 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { Address, Data, Hash, Quantity } from '../types';
+
+export default {
+  acceptNonReservedPeers: {
+    desc: '?',
+    params: [],
+    returns: {
+      type: Boolean,
+      desc: '?'
+    }
+  },
+
+  addReservedPeer: {
+    desc: '?',
+    params: [
+      {
+        type: String,
+        desc: 'Enode'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: '?'
+    }
+  },
+
+  defaultExtraData: {
+    desc: 'Returns the default extra data',
+    params: [],
+    returns: {
+      type: Data,
+      desc: 'Extra data'
+    }
+  },
+
+  devLogs: {
+    desc: 'Returns latest logs of your node',
+    params: [],
+    returns: {
+      type: Array,
+      desc: 'Development logs'
+    }
+  },
+
+  devLogsLevels: {
+    desc: 'Returns current log level settings',
+    params: [],
+    returns: {
+      type: String,
+      decs: 'Current log level'
+    }
+  },
+
+  dropNonReservedPeers: {
+    desc: '?',
+    params: [],
+    returns: {
+      type: Boolean,
+      desc: '?'
+    }
+  },
+
+  extraData: {
+    desc: 'Returns currently set extra data',
+    params: [],
+    returns: {
+      type: Data,
+      desc: 'Extra data'
+    }
+  },
+
+  gasFloorTarget: {
+    desc: 'Returns current target for gas floor',
+    params: [],
+    returns: {
+      type: Quantity,
+      desc: 'Gas Floor Target',
+      format: 'outputBigNumberFormatter'
+    }
+  },
+
+  generateSecretPhrase: {
+    desc: 'Creates a secret phrase that can be associated with an account',
+    params: [],
+    returns: {
+      type: String,
+      desc: 'The secret phrase'
+    }
+  },
+
+  hashContent: {
+    desc: 'Creates a hash of the file as retrieved',
+    params: [
+      {
+        type: String,
+        desc: 'The url of the content'
+      }
+    ],
+    returns: {
+      type: Hash,
+      desc: 'The hash of the content'
+    }
+  },
+
+  minGasPrice: {
+    desc: 'Returns currently set minimal gas price',
+    params: [],
+    returns: {
+      type: Quantity,
+      desc: 'Minimal Gas Price',
+      format: 'outputBigNumberFormatter'
+    }
+  },
+
+  netChain: {
+    desc: 'Returns the name of the connected chain.',
+    params: [],
+    returns: {
+      type: String,
+      desc: 'chain name'
+    }
+  },
+
+  netPeers: {
+    desc: 'Returns number of peers.',
+    params: [],
+    returns: {
+      type: Quantity,
+      desc: 'Number of peers'
+    }
+  },
+
+  netMaxPeers: {
+    desc: 'Returns maximal number of peers.',
+    params: [],
+    returns: {
+      type: Quantity,
+      desc: 'Maximal number of peers'
+    }
+  },
+
+  netPort: {
+    desc: 'Returns network port the node is listening on.',
+    params: [],
+    returns: {
+      type: Quantity,
+      desc: 'Port Number'
+    }
+  },
+
+  nodeName: {
+    desc: 'Returns node name (identity)',
+    params: [],
+    returns: {
+      type: String,
+      desc: 'Node name'
+    }
+  },
+
+  phraseToAddress: {
+    desc: 'Converts a secret phrase into the corresponting address',
+    params: [
+      {
+        type: String,
+        desc: 'The secret'
+      }
+    ],
+    returns: {
+      type: Address,
+      desc: 'Corresponding address'
+    }
+  },
+
+  removeReservedPeer: {
+    desc: '?',
+    params: [
+      {
+        type: String,
+        desc: 'Encode'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: '?'
+    }
+  },
+
+  registryAddress: {
+    desc: 'The address for the global registry',
+    params: [],
+    returns: {
+      type: Address,
+      desc: 'The registry address'
+    }
+  },
+
+  rpcSettings: {
+    desc: 'Returns basic settings of rpc (enabled, port, interface).',
+    params: [],
+    returns: {
+      type: Object,
+      desc: 'JSON object containing rpc settings'
+    }
+  },
+
+  setAuthor: {
+    desc: 'Changes author (coinbase) for mined blocks.',
+    params: [
+      {
+        type: Address,
+        desc: '20 Bytes - Address',
+        format: 'inputAddressFormatter'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  setExtraData: {
+    desc: 'Changes extra data for newly mined blocks',
+    params: [
+      {
+        type: Data,
+        desc: 'Extra Data',
+        format: 'utils.toHex'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  setGasFloorTarget: {
+    desc: 'Changes current gas floor target.',
+    params: [
+      {
+        type: Quantity,
+        desc: 'Gas Floor Target',
+        format: 'utils.toHex'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  setMinGasPrice: {
+    desc: 'Changes minimal gas price for transaction to be accepted to the queue.',
+    params: [
+      {
+        type: Quantity,
+        desc: 'Minimal gas price',
+        format: 'utils.toHex'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  setTransactionsLimit: {
+    desc: 'Changes limit for transactions in queue.',
+    params: [
+      {
+        type: Quantity,
+        desc: 'New Limit',
+        format: 'utils.toHex'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  },
+
+  transactionsLimit: {
+    desc: 'Changes limit for transactions in queue.',
+    params: [],
+    returns: {
+      type: Quantity,
+      desc: 'Current max number of transactions in queue',
+      format: 'outputBigNumberFormatter'
+    }
+  },
+
+  unsignedTransactionsCount: {
+    desc: 'Returns number of unsigned transactions when running with Trusted Signer. Error otherwise',
+    params: [],
+    returns: {
+      type: Quantity,
+      desc: 'Number of unsigned transactions'
+    }
+  }
+};
diff --git a/js/src/jsonrpc/interfaces/net.js b/js/src/jsonrpc/interfaces/net.js
new file mode 100644
index 0000000000000000000000000000000000000000..9cc3bc0766665d115f4a98a8e8412f9c7e383fa0
--- /dev/null
+++ b/js/src/jsonrpc/interfaces/net.js
@@ -0,0 +1,47 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { Quantity } from '../types';
+
+export default {
+  listening: {
+    desc: 'Returns `true` if client is actively listening for network connections.',
+    params: [],
+    returns: {
+      type: Boolean,
+      desc: '`true` when listening, otherwise `false`.'
+    }
+  },
+
+  peerCount: {
+    desc: 'Returns number of peers currenly connected to the client.',
+    params: [],
+    returns: {
+      type: Quantity,
+      desc: 'Integer of the number of connected peers',
+      format: 'utils.toDecimal'
+    }
+  },
+
+  version: {
+    desc: 'Returns the current network protocol version.',
+    params: [],
+    returns: {
+      type: String,
+      desc: 'The current network protocol version'
+    }
+  }
+};
diff --git a/js/src/jsonrpc/interfaces/personal.js b/js/src/jsonrpc/interfaces/personal.js
new file mode 100644
index 0000000000000000000000000000000000000000..748c8799f0b1f27df6da1e40b252ee53e9eb25e2
--- /dev/null
+++ b/js/src/jsonrpc/interfaces/personal.js
@@ -0,0 +1,288 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { Address, Data, Quantity } from '../types';
+
+export default {
+  accountsInfo: {
+    desc: 'returns a map of accounts as an object',
+    params: [],
+    returns: {
+      type: Array,
+      desc: 'Account metadata',
+      details: {
+        name: {
+          type: String,
+          desc: 'Account name'
+        },
+        meta: {
+          type: String,
+          desc: 'Encoded JSON string the defines additional account metadata'
+        },
+        uuid: {
+          type: String,
+          desc: 'The account UUID, or null if not available/unknown/not applicable.'
+        }
+      }
+    }
+  },
+
+  generateAuthorizationToken: {
+    desc: 'Generates a new authorization token',
+    params: [],
+    returns: {
+      type: String,
+      desc: 'The new authorization token'
+    }
+  },
+
+  requestsToConfirm: {
+    desc: 'Returns a list of the transactions requiring authorization',
+    params: [],
+    returns: {
+      type: Array,
+      desc: 'A list of the outstanding transactions'
+    }
+  },
+
+  confirmRequest: {
+    desc: 'Confirm a request in the signer queue',
+    params: [
+      {
+        type: Quantity,
+        desc: 'The request id'
+      },
+      {
+        type: Object,
+        desc: 'The request options'
+      },
+      {
+        type: String,
+        desc: 'The account password'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'The status of the confirmation'
+    }
+  },
+
+  rejectRequest: {
+    desc: 'Rejects a request in the signer queue',
+    params: [
+      {
+        type: Quantity,
+        desc: 'The request id'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'The status of the rejection'
+    }
+  },
+
+  listAccounts: {
+    desc: 'Returns a list of addresses owned by client.',
+    params: [],
+    returns: {
+      type: Array,
+      desc: '20 Bytes addresses owned by the client.'
+    }
+  },
+
+  listGethAccounts: {
+    desc: 'Returns a list of the accounts available from Geth',
+    params: [],
+    returns: {
+      type: Array,
+      desc: '20 Bytes addresses owned by the client.'
+    }
+  },
+
+  importGethAccounts: {
+    desc: 'Imports a list of accounts from geth',
+    params: [
+      {
+        type: Array,
+        desc: 'List of the geth addresses to import'
+      }
+    ],
+    returns: {
+      type: Array,
+      desc: 'Array of the imported addresses'
+    }
+  },
+
+  newAccount: {
+    desc: 'Creates new account',
+    params: [
+      {
+        type: String,
+        desc: 'Password'
+      }
+    ],
+    returns: {
+      type: Address,
+      desc: 'The created address'
+    }
+  },
+
+  newAccountFromPhrase: {
+    desc: 'Creates a new account from a brainwallet passphrase',
+    params: [
+      {
+        type: String,
+        desc: 'Phrase'
+      },
+      {
+        type: String,
+        desc: 'Password'
+      }
+    ],
+    returns: {
+      type: Address,
+      desc: 'The created address'
+    }
+  },
+
+  newAccountFromWallet: {
+    desc: 'Creates a new account from a JSON import',
+    params: [
+      {
+        type: String,
+        desc: 'JSON'
+      },
+      {
+        type: String,
+        desc: 'Password'
+      }
+    ],
+    returns: {
+      type: Address,
+      desc: 'The created address'
+    }
+  },
+
+  setAccountName: {
+    desc: 'Sets a name for the account',
+    params: [
+      {
+        type: Address,
+        desc: 'Address'
+      },
+      {
+        type: String,
+        desc: 'Name'
+      }
+    ],
+    returns: {
+      type: Object,
+      desc: 'Returns null in all cases'
+    }
+  },
+
+  setAccountMeta: {
+    desc: 'Sets metadata for the account',
+    params: [
+      {
+        type: Address,
+        desc: 'Address'
+      },
+      {
+        type: String,
+        desc: 'Metadata (JSON encoded)'
+      }
+    ],
+    returns: {
+      type: Object,
+      desc: 'Returns null in all cases'
+    }
+  },
+
+  signAndSendTransaction: {
+    desc: 'Sends and signs a transaction given account passphrase. Does not require the account to be unlocked nor unlocks the account for future transactions. ',
+    params: [
+      {
+        type: Object,
+        desc: 'The transaction object',
+        details: {
+          from: {
+            type: Address,
+            desc: '20 Bytes - The address the transaction is send from'
+          },
+          to: {
+            type: Address,
+            desc: '20 Bytes - (optional when creating new contract) The address the transaction is directed to'
+          },
+          gas: {
+            type: Quantity,
+            desc: 'Integer of the gas provided for the transaction execution. It will return unused gas',
+            optional: true,
+            default: 90000
+          },
+          gasPrice: {
+            type: Quantity,
+            desc: 'Integer of the gasPrice used for each paid gas',
+            optional: true,
+            default: 'To-Be-Determined'
+          },
+          value: {
+            type: Quantity,
+            desc: 'Integer of the value send with this transaction',
+            optional: true
+          },
+          data: {
+            type: Data,
+            desc: 'The compiled code of a contract OR the hash of the invoked method signature and encoded parameters. For details see [Ethereum Contract ABI](https://github.com/ethereum/wiki/wiki/Ethereum-Contract-ABI)'
+          },
+          nonce: {
+            type: Quantity,
+            desc: 'Integer of a nonce. This allows to overwrite your own pending transactions that use the same nonce.',
+            optional: true
+          }
+        }
+      },
+      {
+        type: String,
+        desc: 'Passphrase to unlock `from` account.'
+      }
+    ],
+    returns: {
+      type: Data,
+      desc: '32 Bytes - the transaction hash, or the zero hash if the transaction is not yet available'
+    }
+  },
+
+  signerEnabled: {
+    desc: 'Returns whether signer is enabled/disabled.',
+    params: [],
+    returns: {
+      type: Boolean,
+      desc: 'true when enabled, false when disabled'
+    }
+  },
+
+  unlockAccount: {
+    desc: '?',
+    params: [
+      '?', '?', '?'
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'whether the call was successful'
+    }
+  }
+};
diff --git a/js/src/jsonrpc/interfaces/shh.js b/js/src/jsonrpc/interfaces/shh.js
new file mode 100644
index 0000000000000000000000000000000000000000..e9f727dacc4cb010942d7c3cb54d2d2dca2ffb81
--- /dev/null
+++ b/js/src/jsonrpc/interfaces/shh.js
@@ -0,0 +1,169 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { Data, Quantity } from '../types';
+
+export default {
+  version: {
+    desc: 'Returns the current whisper protocol version.',
+    params: [],
+    returns: {
+      type: String,
+      desc: 'The current whisper protocol version'
+    }
+  },
+
+  post: {
+    desc: 'Sends a whisper message.',
+    params: [
+      {
+        type: Object, desc: 'The whisper post object:', format: 'inputPostFormatter',
+        details: {
+          from: {
+            type: Data, desc: '60 Bytes - The identity of the sender',
+            optional: true
+          },
+          to: {
+            type: Data, desc: '60 Bytes - The identity of the receiver. When present whisper will encrypt the message so that only the receiver can decrypt it',
+            optional: true
+          },
+          topics: {
+            type: Array, desc: 'Array of `DATA` topics, for the receiver to identify messages'
+          },
+          payload: {
+            type: Data, desc: 'The payload of the message'
+          },
+          priority: {
+            type: Quantity, desc: 'The integer of the priority in a rang from ... (?)'
+          },
+          ttl: {
+            type: Quantity, desc: 'Integer of the time to live in seconds.'
+          }
+        }
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: '`true` if the message was send, otherwise `false`'
+    }
+  },
+
+  newIdentity: {
+    desc: 'Creates new whisper identity in the client.',
+    params: [],
+    returns: {
+      type: Data,
+      desc: '60 Bytes - the address of the new identiy'
+    }
+  },
+
+  hasIdentity: {
+    desc: 'Checks if the client hold the private keys for a given identity.',
+    params: [
+      {
+        type: Data,
+        desc: '60 Bytes - The identity address to check'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: '`true` if the client holds the privatekey for that identity, otherwise `false`'
+    }
+  },
+
+  newGroup: {
+    desc: '(?)',
+    params: [],
+    returns: {
+      type: Data, desc: '60 Bytes - the address of the new group. (?)'
+    }
+  },
+
+  addToGroup: {
+    desc: '(?)',
+    params: [
+      {
+        type: Data,
+        desc: '60 Bytes - The identity address to add to a group (?)'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: '`true` if the identity was successfully added to the group, otherwise `false` (?)'
+    }
+  },
+
+  newFilter: {
+    desc: 'Creates filter to notify, when client receives whisper message matching the filter options.',
+    params: [
+      {
+        type: Object, desc: 'The filter options:',
+        details: {
+          to: {
+            type: Data, desc: '60 Bytes - Identity of the receiver. *When present it will try to decrypt any incoming message if the client holds the private key to this identity.*',
+            optional: true
+          },
+          topics: {
+            type: Array, desc: 'Array of `DATA` topics which the incoming message\'s topics should match.  You can use the following combinations'
+          }
+        }
+      }
+    ],
+    returns: {
+      type: Quantity,
+      desc: 'The newly created filter'
+    }
+  },
+
+  uninstallFilter: {
+    desc: 'Uninstalls a filter with given id. Should always be called when watch is no longer needed.\nAdditonally Filters timeout when they aren\'t requested with [shh_getFilterChanges](#shh_getfilterchanges) for a period of time.',
+    params: [
+      {
+        type: Quantity,
+        desc: 'The filter id'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: '`true` if the filter was successfully uninstalled, otherwise `false`'
+    }
+  },
+
+  getFilterChanges: {
+    desc: 'Polling method for whisper filters. Returns new messages since the last call of this method.\n**Note** calling the [shh_getMessages](#shh_getmessages) method, will reset the buffer for this method, so that you won\'t receive duplicate messages.',
+    params: [
+      {
+        type: Quantity,
+        desc: 'The filter id'
+      }
+    ],
+    returns: {
+      type: Array,
+      desc: 'Array of messages received since last poll'
+    }
+  },
+
+  getMessages: {
+    desc: 'Get all messages matching a filter. Unlike `shh_getFilterChanges` this returns all messages.',
+    params: [
+      {
+        type: Quantity,
+        desc: 'The filter id'
+      }
+    ],
+    returns: 'See [shh_getFilterChanges](#shh_getfilterchanges)'
+  }
+};
diff --git a/js/src/jsonrpc/interfaces/trace.js b/js/src/jsonrpc/interfaces/trace.js
new file mode 100644
index 0000000000000000000000000000000000000000..3dc4451f006369de574c536fb2033467642d36d8
--- /dev/null
+++ b/js/src/jsonrpc/interfaces/trace.js
@@ -0,0 +1,79 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { BlockNumber, Hash, Integer } from '../types';
+
+export default {
+  filter: {
+    desc: 'Returns traces matching given filter',
+    params: [
+      {
+        type: Object,
+        desc: 'The filter object'
+      }
+    ],
+    returns: {
+      type: Array,
+      desc: 'Traces matching given filter'
+    }
+  },
+
+  get: {
+    desc: 'Returns trace at given position.',
+    params: [
+      {
+        type: Hash,
+        desc: 'Transaction hash'
+      },
+      {
+        type: Integer,
+        desc: 'Trace position witing transaction'
+      }
+    ],
+    returns: {
+      type: Object,
+      desc: 'Trace object'
+    }
+  },
+
+  transaction: {
+    desc: 'Returns all traces of given transaction',
+    params: [
+      {
+        type: Hash,
+        desc: 'Transaction hash'
+      }
+    ],
+    returns: {
+      type: Array,
+      desc: 'Traces of given transaction'
+    }
+  },
+
+  block: {
+    desc: 'Returns traces created at given block',
+    params: [
+      {
+        type: BlockNumber,
+        desc: 'Integer block number, or \'latest\' for the last mined block or \'pending\', \'earliest\' for not yet mined transactions'
+      }
+    ],
+    returns: {
+      type: Array,
+      desc: 'Block traces'
+    }
+  }
+};
diff --git a/js/src/jsonrpc/interfaces/web3.js b/js/src/jsonrpc/interfaces/web3.js
new file mode 100644
index 0000000000000000000000000000000000000000..783663716ab354b7fddb133ae9edf4281e51a9ea
--- /dev/null
+++ b/js/src/jsonrpc/interfaces/web3.js
@@ -0,0 +1,42 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { Data } from '../types';
+
+export default {
+  clientVersion: {
+    desc: 'Returns the current client version.',
+    params: [],
+    returns: {
+      type: String,
+      desc: 'The current client version'
+    }
+  },
+
+  sha3: {
+    desc: 'Returns Keccak-256 (*not* the standardized SHA3-256) of the given data.',
+    params: [
+      {
+        type: String,
+        desc: 'The data to convert into a SHA3 hash'
+      }
+    ],
+    returns: {
+      type: Data,
+      desc: 'The SHA3 result of the given string'
+    }
+  }
+};
diff --git a/js/src/jsonrpc/rollup.config.js b/js/src/jsonrpc/rollup.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..cc4f8c9314c4fcab0743efe67f38821413fa9369
--- /dev/null
+++ b/js/src/jsonrpc/rollup.config.js
@@ -0,0 +1,12 @@
+import babel from 'rollup-plugin-babel';
+
+export default {
+  entry: 'src/index.js',
+  dest: 'release/index.js',
+  format: 'cjs',
+  plugins: [babel({
+    babelrc: false,
+    presets: ['es2015-rollup', 'stage-0'],
+    runtimeHelpers: true
+  })]
+};
diff --git a/js/src/jsonrpc/types.js b/js/src/jsonrpc/types.js
new file mode 100644
index 0000000000000000000000000000000000000000..026e010ed9655cfa26cf83d715b935fec9980ccc
--- /dev/null
+++ b/js/src/jsonrpc/types.js
@@ -0,0 +1,27 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export class Address {}
+
+export class BlockNumber {}
+
+export class Data {}
+
+export class Hash {}
+
+export class Integer {}
+
+export class Quantity {}
diff --git a/js/src/modals/AddAddress/addAddress.js b/js/src/modals/AddAddress/addAddress.js
new file mode 100644
index 0000000000000000000000000000000000000000..5ab8bbe80f6bdf4e7e3e742ffe9da19b9fd533d0
--- /dev/null
+++ b/js/src/modals/AddAddress/addAddress.js
@@ -0,0 +1,151 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import ContentAdd from 'material-ui/svg-icons/content/add';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+
+import { Button, Modal, Form, Input, InputAddress } from '../../ui';
+import { ERRORS, validateAddress, validateName } from '../../util/validation';
+
+export default class AddAddress extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    contacts: PropTypes.object.isRequired,
+    onClose: PropTypes.func
+  };
+
+  state = {
+    address: '',
+    addressError: ERRORS.invalidAddress,
+    name: '',
+    nameError: ERRORS.invalidName,
+    description: ''
+  };
+
+  render () {
+    return (
+      <Modal
+        visible
+        actions={ this.renderDialogActions() }
+        title='add saved address'>
+        { this.renderFields() }
+      </Modal>
+    );
+  }
+
+  renderDialogActions () {
+    const { addressError, nameError } = this.state;
+    const hasError = !!(addressError || nameError);
+
+    return ([
+      <Button
+        icon={ <ContentClear /> }
+        label='Cancel'
+        onClick={ this.onClose } />,
+      <Button
+        icon={ <ContentAdd /> }
+        label='Save Address'
+        disabled={ hasError }
+        onClick={ this.onAdd } />
+    ]);
+  }
+
+  renderFields () {
+    const { address, addressError, description, name, nameError } = this.state;
+
+    return (
+      <Form>
+        <InputAddress
+          label='network address'
+          hint='the network address for the entry'
+          error={ addressError }
+          value={ address }
+          onChange={ this.onEditAddress } />
+        <Input
+          label='address name'
+          hint='a descriptive name for the entry'
+          error={ nameError }
+          value={ name }
+          onChange={ this.onEditName } />
+        <Input
+          multiLine
+          rows={ 1 }
+          label='(optional) address description'
+          hint='an expanded description for the entry'
+          value={ description }
+          onChange={ this.onEditDescription } />
+      </Form>
+    );
+  }
+
+  onEditAddress = (event, _address) => {
+    const { contacts } = this.props;
+    let { address, addressError } = validateAddress(_address);
+
+    if (!addressError) {
+      const contact = contacts[address];
+
+      if (contact && !contact.meta.deleted) {
+        addressError = ERRORS.duplicateAddress;
+      }
+    }
+
+    this.setState({
+      address,
+      addressError
+    });
+  }
+
+  onEditDescription = (event, description) => {
+    this.setState({
+      description
+    });
+  }
+
+  onEditName = (event, _name) => {
+    const { name, nameError } = validateName(_name);
+
+    this.setState({
+      name,
+      nameError
+    });
+  }
+
+  onAdd = () => {
+    const { api } = this.context;
+    const { address, name, description } = this.state;
+
+    Promise.all([
+      api.personal.setAccountName(address, name),
+      api.personal.setAccountMeta(address, {
+        description,
+        deleted: false
+      })
+    ]).catch((error) => {
+      console.error('onAdd', error);
+    });
+
+    this.props.onClose();
+  }
+
+  onClose = () => {
+    this.props.onClose();
+  }
+}
diff --git a/js/src/modals/AddAddress/index.js b/js/src/modals/AddAddress/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..fb891f0fef2d347e20c62e979f8b0d725716f7cc
--- /dev/null
+++ b/js/src/modals/AddAddress/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './addAddress';
diff --git a/js/src/modals/AddContract/addContract.js b/js/src/modals/AddContract/addContract.js
new file mode 100644
index 0000000000000000000000000000000000000000..ebad868074b3458b5c74c054fa84250ed041582d
--- /dev/null
+++ b/js/src/modals/AddContract/addContract.js
@@ -0,0 +1,161 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import ContentAdd from 'material-ui/svg-icons/content/add';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+
+import { Button, Modal, Form, Input, InputAddress } from '../../ui';
+import { ERRORS, validateAbi, validateAddress, validateName } from '../../util/validation';
+
+export default class AddContract extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    contracts: PropTypes.object.isRequired,
+    onClose: PropTypes.func
+  };
+
+  state = {
+    abi: '',
+    abiError: ERRORS.invalidAbi,
+    abiParsed: null,
+    address: '',
+    addressError: ERRORS.invalidAddress,
+    name: '',
+    nameError: ERRORS.invalidName,
+    description: ''
+  };
+
+  render () {
+    return (
+      <Modal
+        visible
+        actions={ this.renderDialogActions() }
+        title='watch contract'>
+        { this.renderFields() }
+      </Modal>
+    );
+  }
+
+  renderDialogActions () {
+    const { addressError, nameError } = this.state;
+    const hasError = !!(addressError || nameError);
+
+    return ([
+      <Button
+        icon={ <ContentClear /> }
+        label='Cancel'
+        onClick={ this.onClose } />,
+      <Button
+        icon={ <ContentAdd /> }
+        label='Add Contract'
+        disabled={ hasError }
+        onClick={ this.onAdd } />
+    ]);
+  }
+
+  renderFields () {
+    const { abi, abiError, address, addressError, description, name, nameError } = this.state;
+
+    return (
+      <Form>
+        <InputAddress
+          label='network address'
+          hint='the network address for the contract'
+          error={ addressError }
+          value={ address }
+          onSubmit={ this.onEditAddress } />
+        <Input
+          label='contract name'
+          hint='a descriptive name for the contract'
+          error={ nameError }
+          value={ name }
+          onSubmit={ this.onEditName } />
+        <Input
+          multiLine
+          rows={ 1 }
+          label='(optional) contract description'
+          hint='an expanded description for the entry'
+          value={ description }
+          onSubmit={ this.onEditDescription } />
+        <Input
+          label='contract abi'
+          hint='the abi for the contract'
+          error={ abiError }
+          value={ abi }
+          onSubmit={ this.onEditAbi } />
+      </Form>
+    );
+  }
+
+  onEditAbi = (abi) => {
+    const { api } = this.context;
+
+    this.setState(validateAbi(abi, api));
+  }
+
+  onEditAddress = (_address) => {
+    const { contracts } = this.props;
+    let { address, addressError } = validateAddress(_address);
+
+    if (!addressError) {
+      const contract = contracts[address];
+
+      if (contract && !contract.meta.deleted) {
+        addressError = ERRORS.duplicateAddress;
+      }
+    }
+
+    this.setState({
+      address,
+      addressError
+    });
+  }
+
+  onEditDescription = (description) => {
+    this.setState({ description });
+  }
+
+  onEditName = (name) => {
+    this.setState(validateName(name));
+  }
+
+  onAdd = () => {
+    const { api } = this.context;
+    const { abiParsed, address, name, description } = this.state;
+
+    Promise.all([
+      api.personal.setAccountName(address, name),
+      api.personal.setAccountMeta(address, {
+        contract: true,
+        deleted: false,
+        abi: abiParsed,
+        description
+      })
+    ]).catch((error) => {
+      console.error('onAdd', error);
+    });
+
+    this.props.onClose();
+  }
+
+  onClose = () => {
+    this.props.onClose();
+  }
+}
diff --git a/js/src/modals/AddContract/index.js b/js/src/modals/AddContract/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..05f53efd5b0350692ef7a761e61c720eab7acf2b
--- /dev/null
+++ b/js/src/modals/AddContract/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './addContract';
diff --git a/js/src/modals/CreateAccount/AccountDetails/accountDetails.js b/js/src/modals/CreateAccount/AccountDetails/accountDetails.js
new file mode 100644
index 0000000000000000000000000000000000000000..c6a6f81114af8042c5fe6a38e80aeba1053fbb7e
--- /dev/null
+++ b/js/src/modals/CreateAccount/AccountDetails/accountDetails.js
@@ -0,0 +1,65 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { Form, Input, InputAddress } from '../../../ui';
+
+export default class AccountDetails extends Component {
+  static propTypes = {
+    address: PropTypes.string,
+    name: PropTypes.string,
+    phrase: PropTypes.string
+  }
+
+  render () {
+    const { address, name } = this.props;
+
+    return (
+      <Form>
+        <Input
+          disabled
+          hint='a descriptive name for the account'
+          label='account name'
+          value={ name } />
+        <InputAddress
+          disabled
+          hint='the network address for the account'
+          label='address'
+          value={ address } />
+        { this.renderPhrase() }
+      </Form>
+    );
+  }
+
+  renderPhrase () {
+    const { phrase } = this.props;
+
+    if (!phrase) {
+      return null;
+    }
+
+    return (
+      <Input
+        disabled
+        hint='the account recovery phrase'
+        label='account recovery phrase (take note)'
+        multiLine
+        rows={ 1 }
+        value={ phrase } />
+    );
+  }
+}
diff --git a/js/src/modals/CreateAccount/AccountDetails/index.js b/js/src/modals/CreateAccount/AccountDetails/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..c1911d8d8e00812d633768f99b457197c6f8e4ff
--- /dev/null
+++ b/js/src/modals/CreateAccount/AccountDetails/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './accountDetails';
diff --git a/js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.css b/js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.css
new file mode 100644
index 0000000000000000000000000000000000000000..cee245e39c4d46c3aa2fbb14a257bf2578063c7e
--- /dev/null
+++ b/js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.css
@@ -0,0 +1,22 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.address {
+  color: #999;
+  padding-top: 1em;
+  line-height: 1.618em;
+  padding-left: 2em;
+}
diff --git a/js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js b/js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js
new file mode 100644
index 0000000000000000000000000000000000000000..d0f4ac2ff5ac5e085c8c432bb5d7f8ae6808f973
--- /dev/null
+++ b/js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js
@@ -0,0 +1,41 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './accountDetailsGeth.css';
+
+export default class AccountDetailsGeth extends Component {
+  static propTypes = {
+    addresses: PropTypes.array
+  }
+
+  render () {
+    const { addresses } = this.props;
+
+    const formatted = addresses.map((address, idx) => {
+      const comma = !idx ? '' : ((idx === addresses.length - 1) ? ' & ' : ', ');
+      return `${comma}${address}`;
+    }).join('');
+
+    return (
+      <div>
+        <div>You have imported { addresses.length } addresses from the Geth keystore:</div>
+        <div className={ styles.address }>{ formatted }</div>
+      </div>
+    );
+  }
+}
diff --git a/js/src/modals/CreateAccount/AccountDetailsGeth/index.js b/js/src/modals/CreateAccount/AccountDetailsGeth/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..97d2ce159ddcc7db1a3998e9786e2ae341118e94
--- /dev/null
+++ b/js/src/modals/CreateAccount/AccountDetailsGeth/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './accountDetailsGeth';
diff --git a/js/src/modals/CreateAccount/CreationType/creationType.js b/js/src/modals/CreateAccount/CreationType/creationType.js
new file mode 100644
index 0000000000000000000000000000000000000000..866b3323686355139966fbb6aa203e76af170a63
--- /dev/null
+++ b/js/src/modals/CreateAccount/CreationType/creationType.js
@@ -0,0 +1,61 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
+
+import styles from '../createAccount.css';
+
+export default class CreationType extends Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired
+  }
+
+  componentWillMount () {
+    this.props.onChange('fromNew');
+  }
+
+  render () {
+    return (
+      <div className={ styles.spaced }>
+        <RadioButtonGroup
+          defaultSelected='fromNew'
+          name='creationType'
+          onChange={ this.onChange }>
+          <RadioButton
+            label='Create new account manually'
+            value='fromNew' />
+          <RadioButton
+            label='Recover account from recovery phrase'
+            value='fromPhrase' />
+          <RadioButton
+            label='Import accounts from Geth keystore'
+            value='fromGeth' />
+          <RadioButton
+            label='Import account from a backup JSON file'
+            value='fromJSON' />
+          <RadioButton
+            label='Import account from an Ethereum pre-sale wallet'
+            value='fromPresale' />
+        </RadioButtonGroup>
+      </div>
+    );
+  }
+
+  onChange = (event) => {
+    this.props.onChange(event.target.value);
+  }
+}
diff --git a/js/src/modals/CreateAccount/CreationType/index.js b/js/src/modals/CreateAccount/CreationType/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..cd00277c4fff933045bfcb5eeaced20839091aa0
--- /dev/null
+++ b/js/src/modals/CreateAccount/CreationType/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './creationType';
diff --git a/js/src/modals/CreateAccount/NewAccount/index.js b/js/src/modals/CreateAccount/NewAccount/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f030a32d962047b17790dc9f8492480fb8c08f39
--- /dev/null
+++ b/js/src/modals/CreateAccount/NewAccount/index.js
@@ -0,0 +1,23 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { ERRORS } from './newAccount';
+
+export default from './newAccount';
+
+export {
+  ERRORS
+};
diff --git a/js/src/modals/CreateAccount/NewAccount/newAccount.js b/js/src/modals/CreateAccount/NewAccount/newAccount.js
new file mode 100644
index 0000000000000000000000000000000000000000..282efb5ab7c960fb072c8d5f1d66164710f970cf
--- /dev/null
+++ b/js/src/modals/CreateAccount/NewAccount/newAccount.js
@@ -0,0 +1,298 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import IconButton from 'material-ui/IconButton';
+import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
+import ActionAutorenew from 'material-ui/svg-icons/action/autorenew';
+
+import { Form, Input, IdentityIcon } from '../../../ui';
+
+import styles from '../createAccount.css';
+
+const ERRORS = {
+  noName: 'you need to specify a valid name for the account',
+  noPhrase: 'you need to specify the recovery phrase',
+  invalidPassword: 'you need to specify a password >= 8 characters',
+  noMatchPassword: 'the supplied passwords does not match'
+};
+
+export {
+  ERRORS
+};
+
+export default class CreateAccount extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    store: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    onChange: PropTypes.func.isRequired
+  }
+
+  state = {
+    accountName: '',
+    accountNameError: ERRORS.noName,
+    passwordHint: '',
+    password1: '',
+    password1Error: ERRORS.invalidPassword,
+    password2: '',
+    password2Error: ERRORS.noMatchPassword,
+    accounts: null,
+    selectedAddress: '',
+    isValidPass: false,
+    isValidName: false
+  }
+
+  componentWillMount () {
+    this.createIdentities();
+    this.props.onChange(false, {});
+  }
+
+  render () {
+    const { accountName, accountNameError, passwordHint, password1, password1Error, password2, password2Error } = this.state;
+
+    return (
+      <Form>
+        <Input
+          label='account name'
+          hint='a descriptive name for the account'
+          error={ accountNameError }
+          value={ accountName }
+          onChange={ this.onEditAccountName } />
+        <Input
+          label='password hint'
+          hint='(optional) a hint to help with remembering the password'
+          value={ passwordHint }
+          onChange={ this.onEditPasswordHint } />
+        <div className={ styles.passwords }>
+          <div className={ styles.password }>
+            <Input
+              className={ styles.password }
+              label='password'
+              hint='a strong, unique password'
+              type='password'
+              error={ password1Error }
+              value={ password1 }
+              onChange={ this.onEditPassword1 } />
+          </div>
+          <div className={ styles.password }>
+            <Input
+              className={ styles.password }
+              label='password (repeat)'
+              hint='verify your password'
+              type='password'
+              error={ password2Error }
+              value={ password2 }
+              onChange={ this.onEditPassword2 } />
+          </div>
+        </div>
+        { this.renderIdentitySelector() }
+        { this.renderIdentities() }
+      </Form>
+    );
+  }
+
+  renderIdentitySelector () {
+    const { accounts, selectedAddress } = this.state;
+
+    if (!accounts) {
+      return null;
+    }
+
+    const buttons = Object.keys(accounts).map((address) => {
+      return (
+        <RadioButton
+          className={ styles.button }
+          key={ address }
+          value={ address } />
+      );
+    });
+
+    return (
+      <RadioButtonGroup
+        valueSelected={ selectedAddress }
+        className={ styles.selector }
+        name='identitySelector'
+        onChange={ this.onChangeIdentity }>
+        { buttons }
+      </RadioButtonGroup>
+    );
+  }
+
+  renderIdentities () {
+    const { accounts } = this.state;
+
+    if (!accounts) {
+      return null;
+    }
+
+    const identities = Object.keys(accounts).map((address) => {
+      return (
+        <div
+          className={ styles.identity }
+          key={ address }
+          onTouchTap={ this.onChangeIdentity }>
+          <IdentityIcon
+            address={ address }
+            center />
+        </div>
+      );
+    });
+
+    return (
+      <div className={ styles.identities }>
+        { identities }
+        <div className={ styles.refresh }>
+          <IconButton
+            onTouchTap={ this.createIdentities }>
+            <ActionAutorenew
+              color='rgb(0, 151, 167)' />
+          </IconButton>
+        </div>
+      </div>
+    );
+  }
+
+  createIdentities = () => {
+    const { api } = this.context;
+
+    Promise
+      .all([
+        api.ethcore.generateSecretPhrase(),
+        api.ethcore.generateSecretPhrase(),
+        api.ethcore.generateSecretPhrase(),
+        api.ethcore.generateSecretPhrase(),
+        api.ethcore.generateSecretPhrase()
+      ])
+      .then((phrases) => {
+        return Promise
+          .all(phrases.map((phrase) => api.ethcore.phraseToAddress(phrase)))
+          .then((addresses) => {
+            const accounts = {};
+
+            phrases.forEach((phrase, idx) => {
+              accounts[addresses[idx]] = {
+                address: addresses[idx],
+                phrase: phrase
+              };
+            });
+
+            console.log(accounts);
+
+            this.setState({
+              selectedAddress: addresses[0],
+              accounts: accounts
+            });
+          });
+      })
+      .catch((error) => {
+        console.log('createIdentities', error);
+
+        setTimeout(this.createIdentities, 1000);
+        this.newError(error);
+      });
+  }
+
+  updateParent = () => {
+    const { isValidName, isValidPass, accounts, accountName, passwordHint, password1, selectedAddress } = this.state;
+    const isValid = isValidName && isValidPass;
+
+    this.props.onChange(isValid, {
+      address: selectedAddress,
+      name: accountName,
+      passwordHint,
+      password: password1,
+      phrase: accounts[selectedAddress].phrase
+    });
+  }
+
+  onChangeIdentity = (event) => {
+    const address = event.target.value || event.target.getAttribute('value');
+
+    if (!address) {
+      return;
+    }
+
+    this.setState({
+      selectedAddress: address
+    }, this.updateParent);
+  }
+
+  onEditPasswordHint = (event, value) => {
+    this.setState({
+      passwordHint: value
+    });
+  }
+
+  onEditAccountName = (event) => {
+    const value = event.target.value;
+    let error = null;
+
+    if (!value || value.trim().length < 2) {
+      error = ERRORS.noName;
+    }
+
+    this.setState({
+      accountName: value,
+      accountNameError: error,
+      isValidName: !error
+    }, this.updateParent);
+  }
+
+  onEditPassword1 = (event) => {
+    const value = event.target.value;
+    let error1 = null;
+    let error2 = null;
+
+    if (!value || value.trim().length < 8) {
+      error1 = ERRORS.invalidPassword;
+    }
+
+    if (value !== this.state.password2) {
+      error2 = ERRORS.noMatchPassword;
+    }
+
+    this.setState({
+      password1: value,
+      password1Error: error1,
+      password2Error: error2,
+      isValidPass: !error1 && !error2
+    }, this.updateParent);
+  }
+
+  onEditPassword2 = (event) => {
+    const value = event.target.value;
+    let error2 = null;
+
+    if (value !== this.state.password1) {
+      error2 = ERRORS.noMatchPassword;
+    }
+
+    this.setState({
+      password2: value,
+      password2Error: error2,
+      isValidPass: !error2
+    }, this.updateParent);
+  }
+
+  newError = (error) => {
+    const { store } = this.context;
+
+    store.dispatch({ type: 'newError', error });
+  }
+}
diff --git a/js/src/modals/CreateAccount/NewGeth/index.js b/js/src/modals/CreateAccount/NewGeth/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5801eb9700896cda6bfb89d64cc31044d049cad6
--- /dev/null
+++ b/js/src/modals/CreateAccount/NewGeth/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './newGeth';
diff --git a/js/src/modals/CreateAccount/NewGeth/newGeth.css b/js/src/modals/CreateAccount/NewGeth/newGeth.css
new file mode 100644
index 0000000000000000000000000000000000000000..8bf6d2cdd43fa4de9eca665eebc8227b0d93d496
--- /dev/null
+++ b/js/src/modals/CreateAccount/NewGeth/newGeth.css
@@ -0,0 +1,43 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.list {
+}
+
+.list input+div>div {
+  top: 13px;
+}
+
+.selection {
+  display: inline-block;
+  margin-bottom: 0.5em;
+}
+
+.selection .icon {
+  display: inline-block;
+}
+
+.selection .detail {
+  display: inline-block;
+}
+
+.detail .address {
+  color: #aaa;
+}
+
+.detail .balance {
+  font-family: 'Roboto Mono', monospace;
+}
diff --git a/js/src/modals/CreateAccount/NewGeth/newGeth.js b/js/src/modals/CreateAccount/NewGeth/newGeth.js
new file mode 100644
index 0000000000000000000000000000000000000000..8853a671bdbe2fc6fcb8a511793dd5261c30a85a
--- /dev/null
+++ b/js/src/modals/CreateAccount/NewGeth/newGeth.js
@@ -0,0 +1,128 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { Checkbox } from 'material-ui';
+
+import { IdentityIcon } from '../../../ui';
+
+import styles from './newGeth.css';
+
+export default class NewGeth extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    accounts: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired
+  }
+
+  state = {
+    available: []
+  }
+
+  componentDidMount () {
+    this.loadAvailable();
+  }
+
+  render () {
+    const { available } = this.state;
+
+    if (!available.length) {
+      return (
+        <div className={ styles.list }>There are currently no importable keys available from the Geth keystore, which are not already available on your Parity instance</div>
+      );
+    }
+    const checkboxes = available.map((account) => {
+      const label = (
+        <div className={ styles.selection }>
+          <div className={ styles.icon }>
+            <IdentityIcon
+              center inline
+              address={ account.address } />
+          </div>
+          <div className={ styles.detail }>
+            <div className={ styles.address }>{ account.address }</div>
+            <div className={ styles.balance }>{ account.balance } ETH</div>
+          </div>
+        </div>
+      );
+
+      return (
+        <Checkbox
+          key={ account.address }
+          checked={ account.checked }
+          label={ label }
+          data-address={ account.address }
+          onCheck={ this.onSelect } />
+      );
+    });
+
+    return (
+      <div className={ styles.list }>
+        { checkboxes }
+      </div>
+    );
+  }
+
+  onSelect = (event, checked) => {
+    const address = event.target.getAttribute('data-address');
+
+    if (!address) {
+      return;
+    }
+
+    const { available } = this.state;
+    const account = available.find((_account) => _account.address === address);
+    account.checked = checked;
+    const selected = available.filter((_account) => _account.checked);
+
+    this.setState({
+      available
+    });
+
+    this.props.onChange(selected.length, selected.map((account) => account.address));
+  }
+
+  loadAvailable = () => {
+    const { api } = this.context;
+    const { accounts } = this.props;
+
+    api.personal
+      .listGethAccounts()
+      .then((_addresses) => {
+        const addresses = (addresses || []).filter((address) => !accounts[address]);
+
+        return Promise
+          .all(addresses.map((address) => api.eth.getBalance(address)))
+          .then((balances) => {
+            this.setState({
+              available: addresses.map((address, idx) => {
+                return {
+                  address,
+                  balance: api.util.fromWei(balances[idx]).toFormat(5),
+                  checked: false
+                };
+              })
+            });
+          });
+      })
+      .catch((error) => {
+        console.error('loadAvailable', error);
+      });
+  }
+}
diff --git a/js/src/modals/CreateAccount/NewImport/index.js b/js/src/modals/CreateAccount/NewImport/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0b260f4267e2ecb89e1befc0c7066223d9181fca
--- /dev/null
+++ b/js/src/modals/CreateAccount/NewImport/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './newImport';
diff --git a/js/src/modals/CreateAccount/NewImport/newImport.js b/js/src/modals/CreateAccount/NewImport/newImport.js
new file mode 100644
index 0000000000000000000000000000000000000000..793a8ab1b1f753f953cc599a0f03fbf2d92a9cad
--- /dev/null
+++ b/js/src/modals/CreateAccount/NewImport/newImport.js
@@ -0,0 +1,182 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
+import { FloatingActionButton } from 'material-ui';
+import EditorAttachFile from 'material-ui/svg-icons/editor/attach-file';
+
+import { Form, Input } from '../../../ui';
+
+import styles from '../createAccount.css';
+
+const FAKEPATH = 'C:\\fakepath\\';
+const STYLE_HIDDEN = { display: 'none' };
+
+const ERRORS = {
+  noName: 'you need to specify a valid name for the account',
+  noPassword: 'supply a valid password to confirm the transaction',
+  noFile: 'select a valid wallet file to import'
+};
+
+export default class NewImport extends Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired
+  }
+
+  state = {
+    accountName: '',
+    accountNameError: ERRORS.noName,
+    passwordHint: '',
+    password: '',
+    passwordError: ERRORS.noPassword,
+    walletFile: '',
+    walletFileError: ERRORS.noFile,
+    walletJson: '',
+    isValidPass: false,
+    isValidName: false,
+    isValidFile: false
+  }
+
+  componentWillMount () {
+    this.props.onChange(false, {});
+  }
+
+  render () {
+    return (
+      <Form>
+        <Input
+          label='account name'
+          hint='a descriptive name for the account'
+          error={ this.state.accountNameError }
+          value={ this.state.accountName }
+          onChange={ this.onEditAccountName } />
+        <Input
+          label='password hint'
+          hint='(optional) a hint to help with remembering the password'
+          value={ this.state.passwordHint }
+          onChange={ this.onEditpasswordHint } />
+        <div className={ styles.passwords }>
+          <div className={ styles.password }>
+            <Input
+              className={ styles.password }
+              label='password'
+              hint='the password to unlock the wallet'
+              type='password'
+              error={ this.state.passwordError }
+              value={ this.state.password }
+              onChange={ this.onEditPassword } />
+          </div>
+        </div>
+        <div>
+          <Input
+            disabled
+            label='wallet file'
+            hint='the wallet file for import'
+            error={ this.state.walletFileError }
+            value={ this.state.walletFile } />
+          <div className={ styles.upload }>
+            <FloatingActionButton
+              mini
+              onTouchTap={ this.openFileDialog }>
+              <EditorAttachFile />
+            </FloatingActionButton>
+            <input
+              ref='fileUpload'
+              type='file'
+              style={ STYLE_HIDDEN }
+              onChange={ this.onFileChange } />
+          </div>
+        </div>
+      </Form>
+    );
+  }
+
+  onFileChange = (event) => {
+    const el = event.target;
+    const error = ERRORS.noFile;
+
+    if (el.files.length) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        this.setState({
+          walletJson: event.target.result,
+          walletFileError: null,
+          isValidFile: true
+        }, this.updateParent);
+      };
+      reader.readAsText(el.files[0]);
+    }
+
+    this.setState({
+      walletFile: el.value.replace(FAKEPATH, ''),
+      walletFileError: error,
+      isValidFile: false
+    }, this.updateParent);
+  }
+
+  openFileDialog = () => {
+    ReactDOM.findDOMNode(this.refs.fileUpload).click();
+  }
+
+  updateParent = () => {
+    const valid = this.state.isValidName && this.state.isValidPass && this.state.isValidFile;
+
+    this.props.onChange(valid, {
+      name: this.state.accountName,
+      passwordHint: this.state.passwordHint,
+      password: this.state.password,
+      phrase: null,
+      json: this.state.walletJson
+    });
+  }
+
+  onEditPasswordHint = (event, value) => {
+    this.setState({
+      passwordHint: value
+    });
+  }
+
+  onEditAccountName = (event) => {
+    const value = event.target.value;
+    let error = null;
+
+    if (!value || value.trim().length < 2) {
+      error = ERRORS.noName;
+    }
+
+    this.setState({
+      accountName: value,
+      accountNameError: error,
+      isValidName: !error
+    }, this.updateParent);
+  }
+
+  onEditPassword = (event) => {
+    let error = null;
+    const value = event.target.value;
+
+    if (!value || !value.length) {
+      error = ERRORS.noPassword;
+    }
+
+    this.setState({
+      password: value,
+      passwordError: error,
+      isValidPass: !error
+    }, this.updateParent);
+  }
+}
diff --git a/js/src/modals/CreateAccount/RecoveryPhrase/index.js b/js/src/modals/CreateAccount/RecoveryPhrase/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..b88a8580e83d02b67e569672334d0b22818e9c76
--- /dev/null
+++ b/js/src/modals/CreateAccount/RecoveryPhrase/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './recoveryPhrase';
diff --git a/js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js b/js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js
new file mode 100644
index 0000000000000000000000000000000000000000..451650c698fcf71f75dad656f47087b6faa8c5a4
--- /dev/null
+++ b/js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js
@@ -0,0 +1,181 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { Form, Input } from '../../../ui';
+
+import styles from '../createAccount.css';
+
+import { ERRORS } from '../NewAccount';
+
+export default class RecoveryPhrase extends Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired
+  }
+
+  state = {
+    recoveryPhrase: '',
+    recoveryPhraseError: ERRORS.noPhrase,
+    accountName: '',
+    accountNameError: ERRORS.noName,
+    passwordHint: '',
+    password1: '',
+    password1Error: ERRORS.invalidPassword,
+    password2: '',
+    password2Error: ERRORS.noMatchPassword,
+    isValidPass: false,
+    isValidName: false,
+    isValidPhrase: false
+  }
+
+  componentWillMount () {
+    this.props.onChange(false, {});
+  }
+
+  render () {
+    const { accountName, accountNameError, passwordHint, password1, password1Error, password2, password2Error, recoveryPhrase } = this.state;
+
+    return (
+      <Form>
+        <Input
+          hint='the account recovery phrase'
+          label='account recovery phrase'
+          multiLine
+          rows={ 1 }
+          value={ recoveryPhrase }
+          onChange={ this.onEditPhrase } />
+        <Input
+          label='account name'
+          hint='a descriptive name for the account'
+          error={ accountNameError }
+          value={ accountName }
+          onChange={ this.onEditAccountName } />
+        <Input
+          label='password hint'
+          hint='(optional) a hint to help with remembering the password'
+          value={ passwordHint }
+          onChange={ this.onEditPasswordHint } />
+        <div className={ styles.passwords }>
+          <div className={ styles.password }>
+            <Input
+              className={ styles.password }
+              label='password'
+              hint='a strong, unique password'
+              type='password'
+              error={ password1Error }
+              value={ password1 }
+              onChange={ this.onEditPassword1 } />
+          </div>
+          <div className={ styles.password }>
+            <Input
+              className={ styles.password }
+              label='password (repeat)'
+              hint='verify your password'
+              type='password'
+              error={ password2Error }
+              value={ password2 }
+              onChange={ this.onEditPassword2 } />
+          </div>
+        </div>
+      </Form>
+    );
+  }
+
+  updateParent = () => {
+    const { isValidName, isValidPass, isValidPhrase, accountName, passwordHint, password1, recoveryPhrase } = this.state;
+    const isValid = isValidName && isValidPass && isValidPhrase;
+
+    this.props.onChange(isValid, {
+      name: accountName,
+      passwordHint,
+      password: password1,
+      phrase: recoveryPhrase
+    });
+  }
+
+  onEditPasswordHint = (event, value) => {
+    this.setState({
+      passwordHint: value
+    });
+  }
+
+  onEditPhrase = (event) => {
+    const value = event.target.value;
+    let error = null;
+
+    if (!value || value.trim().length < 25) {
+      error = ERRORS.noPhrase;
+    }
+
+    this.setState({
+      recoveryPhrase: value,
+      recoveryPhraseError: error,
+      isValidPhrase: !error
+    }, this.updateParent);
+  }
+
+  onEditAccountName = (event) => {
+    const value = event.target.value;
+    let error = null;
+
+    if (!value || value.trim().length < 2) {
+      error = ERRORS.noName;
+    }
+
+    this.setState({
+      accountName: value,
+      accountNameError: error,
+      isValidName: !error
+    }, this.updateParent);
+  }
+
+  onEditPassword1 = (event) => {
+    const value = event.target.value;
+    let error1 = null;
+    let error2 = null;
+
+    if (!value || value.trim().length < 8) {
+      error1 = ERRORS.invalidPassword;
+    }
+
+    if (value !== this.state.password2) {
+      error2 = ERRORS.noMatchPassword;
+    }
+
+    this.setState({
+      password1: value,
+      password1Error: error1,
+      password2Error: error2,
+      isValidPass: !error1 && !error2
+    }, this.updateParent);
+  }
+
+  onEditPassword2 = (event) => {
+    const value = event.target.value;
+    let error2 = null;
+
+    if (value !== this.state.password1) {
+      error2 = ERRORS.noMatchPassword;
+    }
+
+    this.setState({
+      password2: value,
+      password2Error: error2,
+      isValidPass: !error2
+    }, this.updateParent);
+  }
+}
diff --git a/js/src/modals/CreateAccount/createAccount.css b/js/src/modals/CreateAccount/createAccount.css
new file mode 100644
index 0000000000000000000000000000000000000000..d7acd84df09110500c22dd85371bbd89aff9033e
--- /dev/null
+++ b/js/src/modals/CreateAccount/createAccount.css
@@ -0,0 +1,60 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.spaced {
+  line-height: 1.618em;
+}
+
+.password {
+  flex: 0 1 50%;
+  width: 50%;
+}
+
+.passwords {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.identities, .selector {
+  display: flex;
+}
+
+.selector {
+  margin-top: 1.5em;
+}
+
+.identities .identity, .selector .button {
+  flex: 0 1 18%;
+  width: 18% !important;
+  text-align: center;
+  cursor: pointer;
+}
+
+.refresh {
+  flex: 0 1 10%;
+  width: 10% !important;
+}
+
+.upload {
+  text-align: right;
+  float: right;
+  margin-left: -100%;
+  margin-top: 28px;
+}
+
+.upload>div {
+  margin-right: 0.5em;
+}
diff --git a/js/src/modals/CreateAccount/createAccount.js b/js/src/modals/CreateAccount/createAccount.js
new file mode 100644
index 0000000000000000000000000000000000000000..e4b50257174ca0015a8690f73d34daeaf7cc4f0e
--- /dev/null
+++ b/js/src/modals/CreateAccount/createAccount.js
@@ -0,0 +1,324 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import ActionDone from 'material-ui/svg-icons/action/done';
+import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
+import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
+
+import { Button, Modal } from '../../ui';
+
+import AccountDetails from './AccountDetails';
+import AccountDetailsGeth from './AccountDetailsGeth';
+import CreationType from './CreationType';
+import NewAccount from './NewAccount';
+import NewGeth from './NewGeth';
+import NewImport from './NewImport';
+import RecoveryPhrase from './RecoveryPhrase';
+
+const TITLES = {
+  type: 'creation type',
+  create: 'create account',
+  info: 'account information',
+  import: 'import wallet'
+};
+const STAGE_NAMES = [TITLES.type, TITLES.create, TITLES.info];
+const STAGE_IMPORT = [TITLES.type, TITLES.import, TITLES.info];
+
+export default class CreateAccount extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    store: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    accounts: PropTypes.object.isRequired,
+    onClose: PropTypes.func,
+    onUpdate: PropTypes.func
+  }
+
+  state = {
+    address: null,
+    name: null,
+    passwordHint: null,
+    password: null,
+    phrase: null,
+    json: null,
+    canCreate: false,
+    createType: null,
+    gethAddresses: [],
+    stage: 0
+  }
+
+  render () {
+    const { createType, stage } = this.state;
+    const steps = createType === 'fromNew'
+      ? STAGE_NAMES
+      : STAGE_IMPORT;
+
+    return (
+      <Modal
+        visible
+        actions={ this.renderDialogActions() }
+        current={ stage }
+        steps={ steps }>
+        { this.renderPage() }
+      </Modal>
+    );
+  }
+
+  renderPage () {
+    const { createType, stage } = this.state;
+    const { accounts } = this.props;
+
+    switch (stage) {
+      case 0:
+        return (
+          <CreationType
+            onChange={ this.onChangeType } />
+        );
+
+      case 1:
+        if (createType === 'fromNew') {
+          return (
+            <NewAccount
+              onChange={ this.onChangeDetails } />
+          );
+        } else if (createType === 'fromGeth') {
+          return (
+            <NewGeth
+              accounts={ accounts }
+              onChange={ this.onChangeGeth } />
+          );
+        } else if (createType === 'fromPhrase') {
+          return (
+            <RecoveryPhrase
+              onChange={ this.onChangeDetails } />
+          );
+        }
+
+        return (
+          <NewImport
+            onChange={ this.onChangeWallet } />
+        );
+
+      case 2:
+        if (createType === 'fromGeth') {
+          return (
+            <AccountDetailsGeth
+              addresses={ this.state.gethAddresses } />
+          );
+        }
+
+        return (
+          <AccountDetails
+            address={ this.state.address }
+            name={ this.state.name }
+            phrase={ this.state.phrase } />
+        );
+    }
+  }
+
+  renderDialogActions () {
+    const { createType, stage } = this.state;
+
+    switch (stage) {
+      case 0:
+        return [
+          <Button
+            icon={ <ContentClear /> }
+            label='Cancel'
+            onClick={ this.onClose } />,
+          <Button
+            icon={ <NavigationArrowForward /> }
+            label='Next'
+            onClick={ this.onNext } />
+        ];
+      case 1:
+        const createLabel = createType === 'fromNew'
+          ? 'Create'
+          : 'Import';
+
+        return [
+          <Button
+            icon={ <ContentClear /> }
+            label='Cancel'
+            onClick={ this.onClose } />,
+          <Button
+            icon={ <NavigationArrowBack /> }
+            label='Back'
+            onClick={ this.onPrev } />,
+          <Button
+            icon={ <ActionDone /> }
+            label={ createLabel }
+            disabled={ !this.state.canCreate }
+            onClick={ this.onCreate } />
+        ];
+
+      case 2:
+        return (
+          <Button
+            icon={ <ActionDoneAll /> }
+            label='Close'
+            onClick={ this.onClose } />
+        );
+    }
+  }
+
+  onNext = () => {
+    this.setState({
+      stage: this.state.stage + 1
+    });
+  }
+
+  onPrev = () => {
+    this.setState({
+      stage: this.state.stage - 1
+    });
+  }
+
+  onCreate = () => {
+    const { createType } = this.state;
+    const { api } = this.context;
+
+    this.setState({
+      canCreate: false
+    });
+
+    if (createType === 'fromNew' || createType === 'fromPhrase') {
+      return api.personal
+        .newAccountFromPhrase(this.state.phrase, this.state.password)
+        .then((address) => {
+          this.setState({ address });
+          return api.personal
+            .setAccountName(address, this.state.name)
+            .then(() => api.personal.setAccountMeta(address, { passwordHint: this.state.passwordHint }));
+        })
+        .then(() => {
+          this.onNext();
+          this.props.onUpdate && this.props.onUpdate();
+        })
+        .catch((error) => {
+          console.error('onCreate', error);
+
+          this.setState({
+            canCreate: true
+          });
+
+          this.newError(error);
+        });
+    } else if (createType === 'fromGeth') {
+      return api.personal
+        .importGethAccounts(this.state.gethAddresses)
+        .then((result) => {
+          console.log('result', result);
+
+          return Promise.all(this.state.gethAddresses.map((address) => {
+            return api.personal.setAccountName(address, 'Geth Import');
+          }));
+        })
+        .then(() => {
+          this.onNext();
+          this.props.onUpdate && this.props.onUpdate();
+        })
+        .catch((error) => {
+          console.error('onCreate', error);
+
+          this.setState({
+            canCreate: true
+          });
+
+          this.newError(error);
+        });
+    }
+
+    return api.personal
+      .newAccountFromWallet(this.state.json, this.state.password)
+      .then((address) => {
+        this.setState({
+          address: address
+        });
+
+        return api.personal
+          .setAccountName(address, this.state.name)
+          .then(() => api.personal.setAccountMeta(address, { passwordHint: this.state.passwordHint }));
+      })
+      .then(() => {
+        this.onNext();
+        this.props.onUpdate && this.props.onUpdate();
+      })
+      .catch((error) => {
+        console.error('onCreate', error);
+
+        this.setState({
+          canCreate: true
+        });
+
+        this.newError(error);
+      });
+  }
+
+  onClose = () => {
+    this.setState({
+      stage: 0,
+      canCreate: false
+    }, () => {
+      this.props.onClose && this.props.onClose();
+    });
+  }
+
+  onChangeType = (value) => {
+    this.setState({
+      createType: value
+    });
+  }
+
+  onChangeDetails = (valid, { name, passwordHint, address, password, phrase }) => {
+    this.setState({
+      canCreate: valid,
+      name,
+      passwordHint,
+      address,
+      password,
+      phrase
+    });
+  }
+
+  onChangeGeth = (valid, gethAddresses) => {
+    this.setState({
+      canCreate: valid,
+      gethAddresses
+    });
+  }
+
+  onChangeWallet = (valid, { name, passwordHint, password, json }) => {
+    this.setState({
+      canCreate: valid,
+      name,
+      passwordHint,
+      password,
+      json
+    });
+  }
+
+  newError = (error) => {
+    const { store } = this.context;
+
+    store.dispatch({ type: 'newError', error });
+  }
+}
diff --git a/js/src/modals/CreateAccount/index.js b/js/src/modals/CreateAccount/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f75cecaacf717c4741ba70abda398c31138d70d0
--- /dev/null
+++ b/js/src/modals/CreateAccount/index.js
@@ -0,0 +1,21 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import AccountDetails from './AccountDetails';
+import NewAccount from './NewAccount';
+
+export default from './createAccount';
+export { AccountDetails, NewAccount };
diff --git a/js/src/modals/DeployContract/DetailsStep/detailsStep.js b/js/src/modals/DeployContract/DetailsStep/detailsStep.js
new file mode 100644
index 0000000000000000000000000000000000000000..1eebe4304980df10a888db2684f485a54f359fb1
--- /dev/null
+++ b/js/src/modals/DeployContract/DetailsStep/detailsStep.js
@@ -0,0 +1,192 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { AddressSelect, Form, Input, InputAddressSelect } from '../../../ui';
+import { validateAbi } from '../../../util/validation';
+
+import styles from '../deployContract.css';
+
+export default class DetailsStep extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    accounts: PropTypes.object.isRequired,
+    abi: PropTypes.string,
+    abiError: PropTypes.string,
+    code: PropTypes.string,
+    codeError: PropTypes.string,
+    description: PropTypes.string,
+    descriptionError: PropTypes.string,
+    fromAddress: PropTypes.string,
+    fromAddressError: PropTypes.string,
+    name: PropTypes.string,
+    nameError: PropTypes.string,
+    params: PropTypes.array,
+    paramsError: PropTypes.array,
+    onAbiChange: PropTypes.func.isRequired,
+    onCodeChange: PropTypes.func.isRequired,
+    onFromAddressChange: PropTypes.func.isRequired,
+    onDescriptionChange: PropTypes.func.isRequired,
+    onNameChange: PropTypes.func.isRequired,
+    onParamsChange: PropTypes.func.isRequired
+  }
+
+  state = {
+    inputs: []
+  }
+
+  render () {
+    const { accounts } = this.props;
+    const { abi, abiError, code, codeError, fromAddress, fromAddressError, name, nameError } = this.props;
+
+    return (
+      <Form>
+        <AddressSelect
+          label='from account (contract owner)'
+          hint='the owner account for this contract'
+          value={ fromAddress }
+          error={ fromAddressError }
+          accounts={ accounts }
+          onChange={ this.onFromAddressChange } />
+        <Input
+          label='contract name'
+          hint='a name for the deployed contract'
+          error={ nameError }
+          value={ name }
+          onSubmit={ this.onNameChange } />
+        <Input
+          label='abi'
+          hint='the abi of the contract to deploy'
+          error={ abiError }
+          value={ abi }
+          onSubmit={ this.onAbiChange } />
+        <Input
+          label='code'
+          hint='the compiled code of the contract to deploy'
+          error={ codeError }
+          value={ code }
+          onSubmit={ this.onCodeChange } />
+        { this.renderConstructorInputs() }
+      </Form>
+    );
+  }
+
+  renderConstructorInputs () {
+    const { accounts, params, paramsError } = this.props;
+    const { inputs } = this.state;
+
+    if (!inputs || !inputs.length) {
+      return null;
+    }
+
+    return inputs.map((input, index) => {
+      const onChange = (event, value) => this.onParamChange(index, value);
+      const onSubmit = (value) => this.onParamChange(index, value);
+      const label = `${input.name}: ${input.type}`;
+      let inputBox = null;
+
+      switch (input.type) {
+        case 'address':
+          inputBox = (
+            <InputAddressSelect
+              accounts={ accounts }
+              editing
+              label={ label }
+              value={ params[index] }
+              error={ paramsError[index] }
+              onChange={ onChange } />
+          );
+          break;
+
+        default:
+          inputBox = (
+            <Input
+              label={ label }
+              value={ params[index] }
+              error={ paramsError[index] }
+              onSubmit={ onSubmit } />
+            );
+          break;
+      }
+
+      return (
+        <div key={ index } className={ styles.funcparams }>
+          { inputBox }
+        </div>
+      );
+    });
+  }
+
+  onFromAddressChange = (event, fromAddress) => {
+    const { onFromAddressChange } = this.props;
+
+    onFromAddressChange(fromAddress);
+  }
+
+  onNameChange = (name) => {
+    const { onNameChange } = this.props;
+
+    onNameChange(name);
+  }
+
+  onParamChange = (index, value) => {
+    const { params, onParamsChange } = this.props;
+
+    params[index] = value;
+    onParamsChange(params);
+  }
+
+  onAbiChange = (abi) => {
+    const { api } = this.context;
+    const { onAbiChange, onParamsChange } = this.props;
+    const { abiError, abiParsed } = validateAbi(abi, api);
+
+    if (!abiError) {
+      const { inputs } = abiParsed.find((method) => method.type === 'constructor') || { inputs: [] };
+      const params = [];
+
+      inputs.forEach((input) => {
+        switch (input.type) {
+          case 'string':
+            params.push('');
+            break;
+
+          default:
+            params.push('0x');
+            break;
+        }
+      });
+
+      onParamsChange(params);
+      this.setState({ inputs });
+    } else {
+      onParamsChange([]);
+      this.setState({ inputs: [] });
+    }
+
+    onAbiChange(abi);
+  }
+
+  onCodeChange = (code) => {
+    const { onCodeChange } = this.props;
+
+    onCodeChange(code);
+  }
+}
diff --git a/js/src/modals/DeployContract/DetailsStep/index.js b/js/src/modals/DeployContract/DetailsStep/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5519ee8ea7417242015b69687c6b80d466648f64
--- /dev/null
+++ b/js/src/modals/DeployContract/DetailsStep/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './detailsStep';
diff --git a/js/src/modals/DeployContract/ErrorStep/errorStep.js b/js/src/modals/DeployContract/ErrorStep/errorStep.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d97ab598dcefa69c11f8aba0c7b70c5d97c4fb4
--- /dev/null
+++ b/js/src/modals/DeployContract/ErrorStep/errorStep.js
@@ -0,0 +1,35 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from '../deployContract.css';
+
+export default class ErrorStep extends Component {
+  static propTypes = {
+    error: PropTypes.object
+  }
+
+  render () {
+    const { error } = this.props;
+
+    return (
+      <div className={ styles.center }>
+        The contract deployment failed: { error.message }
+      </div>
+    );
+  }
+}
diff --git a/js/src/modals/DeployContract/ErrorStep/index.js b/js/src/modals/DeployContract/ErrorStep/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..93379cab9bc7b62c3109b6a8049d678ba2f111d3
--- /dev/null
+++ b/js/src/modals/DeployContract/ErrorStep/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './errorStep';
diff --git a/js/src/modals/DeployContract/deployContract.css b/js/src/modals/DeployContract/deployContract.css
new file mode 100644
index 0000000000000000000000000000000000000000..45fd7a852ee7e4bc5940fd852ef924cdab4ba1b4
--- /dev/null
+++ b/js/src/modals/DeployContract/deployContract.css
@@ -0,0 +1,33 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.center {
+  text-align: center;
+}
+
+.address {
+  vertical-align: top;
+  display: inline-block;
+}
+
+.identityicon {
+  margin: -8px 0.5em;
+}
+
+.funcparams {
+  padding-left: 3em;
+}
diff --git a/js/src/modals/DeployContract/deployContract.js b/js/src/modals/DeployContract/deployContract.js
new file mode 100644
index 0000000000000000000000000000000000000000..3e1b105999ce97043f00e1786b17452c96de8212
--- /dev/null
+++ b/js/src/modals/DeployContract/deployContract.js
@@ -0,0 +1,275 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+
+import { BusyStep, CompletedStep, Button, IdentityIcon, Modal, TxHash } from '../../ui';
+import { ERRORS, validateAbi, validateCode, validateName } from '../../util/validation';
+
+import DetailsStep from './DetailsStep';
+import ErrorStep from './ErrorStep';
+
+import styles from './deployContract.css';
+
+const steps = ['contract details', 'deployment', 'completed'];
+
+export default class DeployContract extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    store: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    accounts: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired
+  }
+
+  state = {
+    abi: '',
+    abiError: ERRORS.invalidAbi,
+    code: '',
+    codeError: ERRORS.invalidCode,
+    deployState: '',
+    description: '',
+    descriptionError: null,
+    fromAddress: Object.keys(this.props.accounts)[0],
+    fromAddressError: null,
+    name: '',
+    nameError: ERRORS.invalidName,
+    params: [],
+    paramsError: [],
+    step: 0,
+    deployError: null
+  }
+
+  render () {
+    const { step, deployError } = this.state;
+
+    return (
+      <Modal
+        actions={ this.renderDialogActions() }
+        current={ step }
+        steps={ deployError ? null : steps }
+        title={ deployError ? 'deployment failed' : null }
+        waiting={ [1] }
+        visible>
+        { this.renderStep() }
+      </Modal>
+    );
+  }
+
+  renderDialogActions () {
+    const { deployError, abiError, codeError, nameError, descriptionError, fromAddressError, fromAddress, step } = this.state;
+    const isValid = !nameError && !fromAddressError && !descriptionError && !abiError && !codeError;
+
+    const cancelBtn = (
+      <Button
+        icon={ <ContentClear /> }
+        label='Cancel'
+        onClick={ this.onClose } />
+    );
+
+    if (deployError) {
+      return cancelBtn;
+    }
+
+    switch (step) {
+      case 0:
+        return [
+          cancelBtn,
+          <Button
+            disabled={ !isValid }
+            icon={ <IdentityIcon button address={ fromAddress } /> }
+            label='Create'
+            onClick={ this.onDeployStart } />
+        ];
+
+      case 1:
+        return [
+          cancelBtn
+        ];
+
+      case 2:
+        return [
+          <Button
+            icon={ <ActionDoneAll /> }
+            label='Close'
+            onClick={ this.onClose } />
+        ];
+    }
+  }
+
+  renderStep () {
+    const { accounts } = this.props;
+    const { address, deployError, step, deployState, txhash } = this.state;
+
+    if (deployError) {
+      return (
+        <ErrorStep error={ deployError } />
+      );
+    }
+
+    switch (step) {
+      case 0:
+        return (
+          <DetailsStep
+            { ...this.state }
+            accounts={ accounts }
+            onAbiChange={ this.onAbiChange }
+            onCodeChange={ this.onCodeChange }
+            onFromAddressChange={ this.onFromAddressChange }
+            onDescriptionChange={ this.onDescriptionChange }
+            onNameChange={ this.onNameChange }
+            onParamsChange={ this.onParamsChange } />
+        );
+
+      case 1:
+        const body = txhash
+          ? <TxHash hash={ txhash } />
+          : null;
+        return (
+          <BusyStep
+            title='The deployment is currently in progress'
+            state={ deployState }>
+            { body }
+          </BusyStep>
+        );
+
+      case 2:
+        return (
+          <CompletedStep>
+            <div>Your contract has been deployed at</div>
+            <div>
+              <IdentityIcon address={ address } inline center className={ styles.identityicon } />
+              <div className={ styles.address }>{ address }</div>
+            </div>
+            <TxHash hash={ txhash } />
+          </CompletedStep>
+        );
+    }
+  }
+
+  onDescriptionChange = (description) => {
+    this.setState({ description, descriptionError: null });
+  }
+
+  onFromAddressChange = (fromAddress) => {
+    const { api } = this.context;
+    const fromAddressError = api.util.isAddressValid(fromAddress)
+      ? null
+      : 'a valid account as the contract owner needs to be selected';
+
+    this.setState({ fromAddress, fromAddressError });
+  }
+
+  onNameChange = (name) => {
+    this.setState(validateName(name));
+  }
+
+  onParamsChange = (params) => {
+    this.setState({ params });
+  }
+
+  onAbiChange = (abi) => {
+    const { api } = this.context;
+
+    this.setState(validateAbi(abi, api));
+  }
+
+  onCodeChange = (code) => {
+    const { api } = this.context;
+
+    this.setState(validateCode(code, api));
+  }
+
+  onDeployStart = () => {
+    const { api, store } = this.context;
+    const { abiParsed, code, description, name, params, fromAddress } = this.state;
+    const options = {
+      data: code,
+      from: fromAddress
+    };
+
+    this.setState({ step: 1 });
+
+    api
+      .newContract(abiParsed)
+      .deploy(options, params, this.onDeploymentState)
+      .then((address) => {
+        return Promise.all([
+          api.personal.setAccountName(address, name),
+          api.personal.setAccountMeta(address, {
+            abi: abiParsed,
+            contract: true,
+            deleted: false,
+            description
+          })
+        ])
+        .then(() => {
+          console.log(`contract deployed at ${address}`);
+          this.setState({ step: 2, address });
+        });
+      })
+      .catch((error) => {
+        console.error('error deploying contract', error);
+        this.setState({ deployError: error });
+        store.dispatch({ type: 'newError', error });
+      });
+  }
+
+  onDeploymentState = (error, data) => {
+    if (error) {
+      console.error('onDeploymentState', error);
+      return;
+    }
+
+    console.log('onDeploymentState', data);
+
+    switch (data.state) {
+      case 'estimateGas':
+      case 'postTransaction':
+        this.setState({ deployState: 'Preparing transaction for network transmission' });
+        return;
+
+      case 'checkRequest':
+        this.setState({ deployState: 'Waiting for confirmation of the transaction in the Parity Secure Signer' });
+        return;
+
+      case 'getTransactionReceipt':
+        this.setState({ deployState: 'Waiting for the contract deployment transaction receipt', txhash: data.txhash });
+        return;
+
+      case 'hasReceipt':
+      case 'getCode':
+        this.setState({ deployState: 'Validating the deployed contract code' });
+        return;
+
+      case 'completed':
+        this.setState({ deployState: 'The contract deployment has been completed' });
+        return;
+
+      default:
+        console.error('Unknow contract deployment state', data);
+        return;
+    }
+  }
+
+  onClose = () => {
+    this.props.onClose();
+  }
+}
diff --git a/js/src/modals/DeployContract/index.js b/js/src/modals/DeployContract/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e982107ee31161dae86c4c64d2cd21d3b290bc99
--- /dev/null
+++ b/js/src/modals/DeployContract/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './deployContract';
diff --git a/js/src/modals/EditMeta/editMeta.js b/js/src/modals/EditMeta/editMeta.js
new file mode 100644
index 0000000000000000000000000000000000000000..5822c1a3c9db45fe7998d3a41eaee43f01abe112
--- /dev/null
+++ b/js/src/modals/EditMeta/editMeta.js
@@ -0,0 +1,131 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+import ContentSave from 'material-ui/svg-icons/content/save';
+
+import { Button, Form, Input, Modal } from '../../ui';
+import { validateName } from '../../util/validation';
+
+export default class EditMeta extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    store: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    keys: PropTypes.array.isRequired,
+    account: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired
+  }
+
+  state = {
+    meta: this.props.account.meta,
+    metaErrors: {},
+    name: this.props.account.name,
+    nameError: null
+  }
+
+  render () {
+    const { name, nameError } = this.state;
+
+    return (
+      <Modal
+        visible
+        actions={ this.renderActions() }
+        title='edit metadata'>
+        <Form>
+          <Input
+            label='name'
+            value={ name }
+            error={ nameError }
+            onSubmit={ this.onNameChange } />
+          { this.renderMetaFields() }
+        </Form>
+      </Modal>
+    );
+  }
+
+  renderActions () {
+    const { nameError } = this.state;
+
+    return [
+      <Button
+        label='Cancel'
+        icon={ <ContentClear /> }
+        onClick={ this.props.onClose } />,
+      <Button
+        disabled={ !!nameError }
+        label='Save'
+        icon={ <ContentSave /> }
+        onClick={ this.onSave } />
+    ];
+  }
+
+  renderMetaFields () {
+    const { keys } = this.props;
+    const { meta } = this.state;
+
+    return keys.map((key) => {
+      const onSubmit = (value) => this.onMetaChange(key, value);
+      const label = `(optional) ${key}`;
+      const hint = `the optional ${key} metadata`;
+
+      return (
+        <Input
+          key={ key }
+          label={ label }
+          hint={ hint }
+          value={ meta[key] || '' }
+          onSubmit={ onSubmit } />
+      );
+    });
+  }
+
+  onNameChange = (name) => {
+    this.setState(validateName(name));
+  }
+
+  onMetaChange = (key, value) => {
+    const { meta } = this.state;
+
+    this.setState({
+      meta: Object.assign(meta, { [key]: value })
+    });
+  }
+
+  onSave = () => {
+    const { api, store } = this.context;
+    const { account } = this.props;
+    const { name, nameError, meta } = this.state;
+
+    if (nameError) {
+      return;
+    }
+
+    Promise
+      .all([
+        api.personal.setAccountName(account.address, name),
+        api.personal.setAccountMeta(account.address, Object.assign({}, account.meta, meta))
+      ])
+      .then(() => this.props.onClose())
+      .catch((error) => {
+        console.error('onSave', error);
+        store.dispatch({ type: 'newError', error });
+      });
+  }
+}
diff --git a/js/src/modals/EditMeta/index.js b/js/src/modals/EditMeta/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..995b06b0ef93607a7506085963d5a255bd3738c7
--- /dev/null
+++ b/js/src/modals/EditMeta/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './editMeta';
diff --git a/js/src/modals/ExecuteContract/DetailsStep/detailsStep.js b/js/src/modals/ExecuteContract/DetailsStep/detailsStep.js
new file mode 100644
index 0000000000000000000000000000000000000000..6aab34e7aae1593cd2954d1cb8f7113c144a15ae
--- /dev/null
+++ b/js/src/modals/ExecuteContract/DetailsStep/detailsStep.js
@@ -0,0 +1,167 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { MenuItem } from 'material-ui';
+
+import { AddressSelect, Form, Input, InputAddressSelect, Select } from '../../../ui';
+
+import styles from '../executeContract.css';
+
+export default class DetailsStep extends Component {
+  static propTypes = {
+    accounts: PropTypes.object.isRequired,
+    contract: PropTypes.object.isRequired,
+    amount: PropTypes.string,
+    amountError: PropTypes.string,
+    onAmountChange: PropTypes.func.isRequired,
+    fromAddress: PropTypes.string,
+    fromAddressError: PropTypes.string,
+    onFromAddressChange: PropTypes.func.isRequired,
+    func: PropTypes.object,
+    funcError: PropTypes.string,
+    onFuncChange: PropTypes.func,
+    values: PropTypes.array.isRequired,
+    valuesError: PropTypes.array.isRequired,
+    onValueChange: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { accounts, amount, amountError, fromAddress, fromAddressError, onFromAddressChange, onAmountChange } = this.props;
+
+    return (
+      <Form>
+        <AddressSelect
+          label='from account'
+          hint='the account to transact with'
+          value={ fromAddress }
+          error={ fromAddressError }
+          accounts={ accounts }
+          onChange={ onFromAddressChange } />
+        { this.renderFunctionSelect() }
+        { this.renderParameters() }
+        <Input
+          label='transaction value (in ETH)'
+          hint='the amount to send to with the transaction'
+          value={ amount }
+          error={ amountError }
+          onSubmit={ onAmountChange } />
+      </Form>
+    );
+  }
+
+  renderFunctionSelect () {
+    const { func, funcError, contract } = this.props;
+
+    if (!func) {
+      return null;
+    }
+
+    const functions = contract.functions
+      .filter((func) => !func.constant)
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map((func) => {
+        const params = func.abi.inputs
+          .map((input, index) => {
+            return (
+              <span key={ input.name }>
+                <span>{ index ? ', ' : '' }</span>
+                <span className={ styles.paramname }>{ input.name }: </span>
+                <span>{ input.type }</span>
+              </span>
+            );
+          });
+        const name = (
+          <div>
+            <span>{ func.name }</span>
+            <span className={ styles.paramname }>(</span>
+            { params }
+            <span className={ styles.paramname }>)</span>
+          </div>
+        );
+
+        return (
+          <MenuItem
+            key={ func.signature }
+            value={ func.signature }
+            label={ func.name }>
+            { name }
+          </MenuItem>
+        );
+      });
+
+    return (
+      <Select
+        label='function to execute'
+        hint='the function to call on the contract'
+        error={ funcError }
+        onChange={ this.onFuncChange }
+        value={ func.signature }>
+        { functions }
+      </Select>
+    );
+  }
+
+  renderParameters () {
+    const { accounts, func, values, valuesError, onValueChange } = this.props;
+
+    if (!func) {
+      return null;
+    }
+
+    return func.abi.inputs.map((input, index) => {
+      const onChange = (event, value) => onValueChange(event, index, value);
+      const onSubmit = (value) => onValueChange(null, index, value);
+      const label = `${input.name}: ${input.type}`;
+      let inputbox;
+
+      switch (input.type) {
+        case 'address':
+          inputbox = (
+            <InputAddressSelect
+              accounts={ accounts }
+              editing
+              label={ label }
+              value={ values[index] }
+              error={ valuesError[index] }
+              onChange={ onChange } />
+          );
+          break;
+
+        default:
+          inputbox = (
+            <Input
+              label={ label }
+              value={ values[index] }
+              error={ valuesError[index] }
+              onSubmit={ onSubmit } />
+          );
+      }
+
+      return (
+        <div className={ styles.funcparams } key={ index }>
+          { inputbox }
+        </div>
+      );
+    });
+  }
+
+  onFuncChange = (event, index, signature) => {
+    const { contract, onFuncChange } = this.props;
+
+    onFuncChange(event, contract.functions.find((fn) => fn.signature === signature));
+  }
+}
diff --git a/js/src/modals/ExecuteContract/DetailsStep/index.js b/js/src/modals/ExecuteContract/DetailsStep/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5519ee8ea7417242015b69687c6b80d466648f64
--- /dev/null
+++ b/js/src/modals/ExecuteContract/DetailsStep/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './detailsStep';
diff --git a/js/src/modals/ExecuteContract/executeContract.css b/js/src/modals/ExecuteContract/executeContract.css
new file mode 100644
index 0000000000000000000000000000000000000000..cdebfef326686199f2bcc17bdf6466814d8b0762
--- /dev/null
+++ b/js/src/modals/ExecuteContract/executeContract.css
@@ -0,0 +1,35 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.modalbody,
+.modalcenter {
+}
+
+.modalcenter {
+  text-align: center;
+}
+
+.funcparams {
+  padding-left: 3em;
+}
+
+.paramname {
+  color: #aaa;
+}
+
+.txhash {
+  word-break: break-all;
+}
diff --git a/js/src/modals/ExecuteContract/executeContract.js b/js/src/modals/ExecuteContract/executeContract.js
new file mode 100644
index 0000000000000000000000000000000000000000..524326c3a2eb5e1e6408cca4cd757493b47fcfa4
--- /dev/null
+++ b/js/src/modals/ExecuteContract/executeContract.js
@@ -0,0 +1,221 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+
+import { BusyStep, CompletedStep, Button, IdentityIcon, Modal, TxHash } from '../../ui';
+
+import DetailsStep from './DetailsStep';
+
+export default class ExecuteContract extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    store: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    isTest: PropTypes.bool,
+    fromAddress: PropTypes.string,
+    accounts: PropTypes.object,
+    contract: PropTypes.object,
+    onClose: PropTypes.func.isRequired,
+    onFromAddressChange: PropTypes.func.isRequired
+  }
+
+  state = {
+    amount: '0',
+    amountError: null,
+    func: null,
+    funcError: null,
+    values: [],
+    valuesError: [],
+    step: 0,
+    sending: false,
+    busyState: null,
+    txhash: null
+  }
+
+  componentDidMount () {
+    const { contract } = this.props;
+    const functions = contract.functions
+      .filter((func) => !func.constant)
+      .sort((a, b) => a.name.localeCompare(b.name));
+
+    this.onFuncChange(null, functions[0]);
+  }
+
+  render () {
+    const { sending } = this.state;
+
+    return (
+      <Modal
+        actions={ this.renderDialogActions() }
+        title='execute function'
+        busy={ sending }
+        waiting={ [1] }
+        visible>
+        { this.renderStep() }
+      </Modal>
+    );
+  }
+
+  renderDialogActions () {
+    const { onClose, fromAddress } = this.props;
+    const { sending, step } = this.state;
+    const cancelBtn = (
+      <Button
+        key='cancel'
+        label='Cancel'
+        icon={ <ContentClear /> }
+        onClick={ onClose } />
+    );
+
+    if (step === 0) {
+      return [
+        cancelBtn,
+        <Button
+          key='postTransaction'
+          label='post transaction'
+          disabled={ sending }
+          icon={ <IdentityIcon address={ fromAddress } button /> }
+          onClick={ this.postTransaction } />
+      ];
+    } else if (step === 1) {
+      return [
+        cancelBtn
+      ];
+    }
+
+    return [
+      <Button
+        key='close'
+        label='Done'
+        icon={ <ActionDoneAll /> }
+        onClick={ onClose } />
+    ];
+  }
+
+  renderStep () {
+    const { onFromAddressChange } = this.props;
+    const { step, busyState, txhash } = this.state;
+
+    if (step === 0) {
+      return (
+        <DetailsStep
+          { ...this.props }
+          { ...this.state }
+          onAmountChange={ this.onAmountChange }
+          onFromAddressChange={ onFromAddressChange }
+          onFuncChange={ this.onFuncChange }
+          onValueChange={ this.onValueChange } />
+      );
+    } else if (step === 1) {
+      return (
+        <BusyStep
+          title='The function execution is in progress'
+          state={ busyState } />
+      );
+    }
+
+    return (
+      <CompletedStep>
+        <TxHash hash={ txhash } />
+      </CompletedStep>
+    );
+  }
+
+  onAmountChange = (amount) => {
+    this.setState({ amount });
+  }
+
+  onFuncChange = (event, func) => {
+    const values = func.inputs.map((input) => {
+      switch (input.kind.type) {
+        case 'address':
+          return '0x';
+
+        case 'bytes':
+          return '0x';
+
+        case 'uint':
+          return '0';
+
+        default:
+          return '';
+      }
+    });
+
+    this.setState({
+      func,
+      values
+    });
+  }
+
+  onValueChange = (event, index, _value) => {
+    const { func, values, valuesError } = this.state;
+    const input = func.inputs.find((input, _index) => index === _index);
+    let value;
+    let valueError;
+
+    switch (input.kind.type) {
+      default:
+        value = _value;
+        valueError = null;
+        break;
+    }
+
+    values[index] = value;
+    valuesError[index] = valueError;
+
+    this.setState({
+      values,
+      valuesError
+    });
+  }
+
+  postTransaction = () => {
+    const { api, store } = this.context;
+    const { fromAddress } = this.props;
+    const { amount, func, values } = this.state;
+    const options = {
+      from: fromAddress,
+      value: api.util.toWei(amount || 0)
+    };
+
+    this.setState({ sending: true, step: 1 });
+
+    func
+      .estimateGas(options, values)
+      .then((gas) => {
+        options.gas = gas.mul(1.2).toFixed(0);
+        console.log(`estimateGas: received ${gas.toFormat(0)}, adjusted to ${gas.mul(1.2).toFormat(0)}`);
+        return func.postTransaction(options, values);
+      })
+      .then((requestId) => {
+        this.setState({ busyState: 'Waiting for authorization in the Parity Signer' });
+        return api.pollMethod('eth_checkRequest', requestId);
+      })
+      .then((txhash) => {
+        this.setState({ sending: false, step: 2, txhash, busyState: 'Your transaction has been posted to the network' });
+      })
+      .catch((error) => {
+        console.error('postTransaction', error);
+        store.dispatch({ type: 'newError', error });
+      });
+  }
+}
diff --git a/js/src/modals/ExecuteContract/index.js b/js/src/modals/ExecuteContract/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..58ae3e8defc83cd666fb50c3b8cede97d4bf353f
--- /dev/null
+++ b/js/src/modals/ExecuteContract/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './executeContract';
diff --git a/js/src/modals/FirstRun/Completed/completed.js b/js/src/modals/FirstRun/Completed/completed.js
new file mode 100644
index 0000000000000000000000000000000000000000..43724f0341fbb371a22ff97bf2523b1ea9cb3ae0
--- /dev/null
+++ b/js/src/modals/FirstRun/Completed/completed.js
@@ -0,0 +1,27 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+export default class Completed extends Component {
+  render () {
+    return (
+      <div>
+        <p>Your node setup has been completed successfully and you are ready to use the application. Next you will receive a walk-through of the available functions and the general application interface to get you up and running in record time.</p>
+      </div>
+    );
+  }
+}
diff --git a/js/src/modals/FirstRun/Completed/index.js b/js/src/modals/FirstRun/Completed/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3e79033d81cba698d169306454e64babd5a2bf14
--- /dev/null
+++ b/js/src/modals/FirstRun/Completed/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './completed';
diff --git a/js/src/modals/FirstRun/Welcome/index.js b/js/src/modals/FirstRun/Welcome/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..241e26fc210999b37b875634f583b71baeb6773d
--- /dev/null
+++ b/js/src/modals/FirstRun/Welcome/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './welcome';
diff --git a/js/src/modals/FirstRun/Welcome/welcome.js b/js/src/modals/FirstRun/Welcome/welcome.js
new file mode 100644
index 0000000000000000000000000000000000000000..ae804317f790bea364155a322009e47298dfc721
--- /dev/null
+++ b/js/src/modals/FirstRun/Welcome/welcome.js
@@ -0,0 +1,41 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import imagesEthcore from '../../../../assets/images/ethcore-logo-white-square.png';
+
+const LOGO_STYLE = {
+  float: 'right',
+  width: '25%',
+  height: 'auto'
+};
+
+export default class FirstRun extends Component {
+  render () {
+    return (
+      <div>
+        <img
+          src={ imagesEthcore }
+          alt='Ethcore Ltd.'
+          style={ LOGO_STYLE } />
+        <p>Welcome to <strong>Parity</strong>, the fastest and simplest way to run your node.</p>
+        <p>The next few steps will guide you through the process of setting up you Parity instance and the associated account.</p>
+        <p>Click <strong>Next</strong> to continue your journey.</p>
+      </div>
+    );
+  }
+}
diff --git a/js/src/modals/FirstRun/firstRun.js b/js/src/modals/FirstRun/firstRun.js
new file mode 100644
index 0000000000000000000000000000000000000000..e5033f9e63dfe8e2f26da47a3cca50d1421e1ebe
--- /dev/null
+++ b/js/src/modals/FirstRun/firstRun.js
@@ -0,0 +1,185 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import ActionDone from 'material-ui/svg-icons/action/done';
+import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
+import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
+
+import { Button, Modal } from '../../ui';
+
+import { NewAccount, AccountDetails } from '../CreateAccount';
+
+import Completed from './Completed';
+import Welcome from './Welcome';
+
+const STAGE_NAMES = ['welcome', 'new account', 'recovery', 'completed'];
+
+export default class FirstRun extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    store: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    visible: PropTypes.bool,
+    onClose: PropTypes.func.isRequired
+  }
+
+  state = {
+    stage: 0,
+    name: '',
+    address: '',
+    password: '',
+    phrase: '',
+    canCreate: false
+  }
+
+  render () {
+    const { visible } = this.props;
+    const { stage } = this.state;
+
+    if (!visible) {
+      return null;
+    }
+
+    return (
+      <Modal
+        actions={ this.renderDialogActions() }
+        current={ stage }
+        steps={ STAGE_NAMES }
+        visible>
+        { this.renderStage() }
+      </Modal>
+    );
+  }
+
+  renderStage () {
+    const { address, name, phrase, stage } = this.state;
+
+    switch (stage) {
+      case 0:
+        return (
+          <Welcome />
+        );
+      case 1:
+        return (
+          <NewAccount
+            onChange={ this.onChangeDetails } />
+        );
+      case 2:
+        return (
+          <AccountDetails
+            address={ address }
+            name={ name }
+            phrase={ phrase } />
+        );
+      case 3:
+        return (
+          <Completed />
+        );
+    }
+  }
+
+  renderDialogActions () {
+    const { canCreate, stage } = this.state;
+
+    switch (stage) {
+      case 0:
+      case 2:
+        return (
+          <Button
+            icon={ <NavigationArrowForward /> }
+            label='Next'
+            onClick={ this.onNext } />
+        );
+
+      case 1:
+        return (
+          <Button
+            icon={ <ActionDone /> }
+            label='Create'
+            disabled={ !canCreate }
+            onClick={ this.onCreate } />
+        );
+
+      case 3:
+        return (
+          <Button
+            icon={ <ActionDoneAll /> }
+            label='Close'
+            onClick={ this.onClose } />
+      );
+    }
+  }
+
+  onClose = () => {
+    const { onClose } = this.props;
+
+    this.setState({
+      stage: 0
+    }, onClose);
+  }
+
+  onNext = () => {
+    const { stage } = this.state;
+
+    this.setState({
+      stage: stage + 1
+    });
+  }
+
+  onChangeDetails = (valid, { name, address, password, phrase }) => {
+    this.setState({
+      canCreate: valid,
+      name: name,
+      address: address,
+      password: password,
+      phrase: phrase
+    });
+  }
+
+  onCreate = () => {
+    const { api } = this.context;
+    const { name, phrase, password } = this.state;
+
+    this.setState({
+      canCreate: false
+    });
+
+    return api.personal
+      .newAccountFromPhrase(phrase, password)
+      .then((address) => api.personal.setAccountName(address, name))
+      .then(() => {
+        this.onNext();
+      })
+      .catch((error) => {
+        console.error('onCreate', error);
+
+        this.setState({
+          canCreate: true
+        });
+
+        this.newError(error);
+      });
+  }
+
+  newError = (error) => {
+    const { store } = this.context;
+
+    store.dispatch({ type: 'newError', error });
+  }
+}
diff --git a/js/src/modals/FirstRun/index.js b/js/src/modals/FirstRun/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4dea9ba514a349ad6e0013b1bf9a89e3c177a098
--- /dev/null
+++ b/js/src/modals/FirstRun/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './firstRun';
diff --git a/js/src/modals/Shapeshift/AwaitingDepositStep/awaitingDepositStep.js b/js/src/modals/Shapeshift/AwaitingDepositStep/awaitingDepositStep.js
new file mode 100644
index 0000000000000000000000000000000000000000..73d1de300c15e54da78c6454269cb39651d56e66
--- /dev/null
+++ b/js/src/modals/Shapeshift/AwaitingDepositStep/awaitingDepositStep.js
@@ -0,0 +1,67 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import Value from '../Value';
+
+import styles from '../shapeshift.css';
+
+export default class AwaitingDepositStep extends Component {
+  static propTypes = {
+    coinSymbol: PropTypes.string.isRequired,
+    depositAddress: PropTypes.string,
+    price: PropTypes.shape({
+      rate: PropTypes.number.isRequired,
+      minimum: PropTypes.number.isRequired,
+      limit: PropTypes.number.isRequired
+    }).isRequired
+  }
+
+  render () {
+    const { coinSymbol, depositAddress, price } = this.props;
+    const typeSymbol = (
+      <div className={ styles.symbol }>
+        { coinSymbol }
+      </div>
+    );
+
+    if (!depositAddress) {
+      return (
+        <div className={ styles.center }>
+          <div className={ styles.busy }>
+            Awaiting confirmation of the deposit address for your { typeSymbol } funds exchange
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className={ styles.center }>
+        <div className={ styles.info }>
+          <a href='https://shapeshift.io' target='_blank'>ShapeShift.io</a> is awaiting a { typeSymbol } deposit. Send the funds from your { typeSymbol } network client to -
+        </div>
+        <div className={ styles.hero }>
+          { depositAddress }
+        </div>
+        <div className={ styles.price }>
+          <div>
+            (<Value amount={ price.minimum } symbol={ coinSymbol } /> minimum, <Value amount={ price.limit } symbol={ coinSymbol } /> maximum)
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/js/src/modals/Shapeshift/AwaitingDepositStep/index.js b/js/src/modals/Shapeshift/AwaitingDepositStep/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e888b6b815e5bdb38e6cdf67460ce98e0f45142a
--- /dev/null
+++ b/js/src/modals/Shapeshift/AwaitingDepositStep/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './awaitingDepositStep';
diff --git a/js/src/modals/Shapeshift/AwaitingExchangeStep/awaitingExchangeStep.js b/js/src/modals/Shapeshift/AwaitingExchangeStep/awaitingExchangeStep.js
new file mode 100644
index 0000000000000000000000000000000000000000..17845526a8db5e1a996b0621a41ab4700d71a278
--- /dev/null
+++ b/js/src/modals/Shapeshift/AwaitingExchangeStep/awaitingExchangeStep.js
@@ -0,0 +1,48 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import Value from '../Value';
+
+import styles from '../shapeshift.css';
+
+export default class AwaitingExchangeStep extends Component {
+  static propTypes = {
+    depositInfo: PropTypes.shape({
+      incomingCoin: PropTypes.number.isRequired,
+      incomingType: PropTypes.string.isRequired
+    }).isRequired
+  }
+
+  render () {
+    const { depositInfo } = this.props;
+    const { incomingCoin, incomingType } = depositInfo;
+
+    return (
+      <div className={ styles.center }>
+        <div className={ styles.info }>
+          <a href='https://shapeshift.io' target='_blank'>ShapeShift.io</a> has received a deposit of -
+        </div>
+        <div className={ styles.hero }>
+          <Value amount={ incomingCoin } symbol={ incomingType } />
+        </div>
+        <div className={ styles.info }>
+          Awaiting the completion of the funds exchange and transfer of funds to your Parity account.
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/js/src/modals/Shapeshift/AwaitingExchangeStep/index.js b/js/src/modals/Shapeshift/AwaitingExchangeStep/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..215fea893ba1c78e5768b2aba34a0c92e704fb41
--- /dev/null
+++ b/js/src/modals/Shapeshift/AwaitingExchangeStep/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './awaitingExchangeStep';
diff --git a/js/src/modals/Shapeshift/CompletedStep/completedStep.js b/js/src/modals/Shapeshift/CompletedStep/completedStep.js
new file mode 100644
index 0000000000000000000000000000000000000000..d20a2e7b883e5a1beb6854d2edcc667cb4f290b6
--- /dev/null
+++ b/js/src/modals/Shapeshift/CompletedStep/completedStep.js
@@ -0,0 +1,54 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import Value from '../Value';
+
+import styles from '../shapeshift.css';
+
+export default class CompletedStep extends Component {
+  static propTypes = {
+    depositInfo: PropTypes.shape({
+      incomingCoin: PropTypes.number.isRequired,
+      incomingType: PropTypes.string.isRequired
+    }).isRequired,
+    exchangeInfo: PropTypes.shape({
+      outgoingCoin: PropTypes.string.isRequired,
+      outgoingType: PropTypes.string.isRequired
+    }).isRequired
+  }
+
+  render () {
+    const { depositInfo, exchangeInfo } = this.props;
+    const { incomingCoin, incomingType } = depositInfo;
+    const { outgoingCoin, outgoingType } = exchangeInfo;
+
+    return (
+      <div className={ styles.center }>
+        <div className={ styles.info }>
+          <a href='https://shapeshift.io' target='_blank'>ShapeShift.io</a> has completed the funds exchange.
+        </div>
+        <div className={ styles.hero }>
+          <Value amount={ incomingCoin } symbol={ incomingType } /> => <Value amount={ outgoingCoin } symbol={ outgoingType } />
+        </div>
+        <div className={ styles.info }>
+          The change in funds will be reflected in your Parity account shortly.
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/js/src/modals/Shapeshift/CompletedStep/index.js b/js/src/modals/Shapeshift/CompletedStep/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..64e1d6199397d03f7d6e0612efdc55e460b082d8
--- /dev/null
+++ b/js/src/modals/Shapeshift/CompletedStep/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './completedStep';
diff --git a/js/src/modals/Shapeshift/ErrorStep/errorStep.js b/js/src/modals/Shapeshift/ErrorStep/errorStep.js
new file mode 100644
index 0000000000000000000000000000000000000000..52be49bbcb3ce5204f2e66171c98307a91c869ee
--- /dev/null
+++ b/js/src/modals/Shapeshift/ErrorStep/errorStep.js
@@ -0,0 +1,43 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from '../shapeshift.css';
+
+export default class ErrorStep extends Component {
+  static propTypes = {
+    error: PropTypes.shape({
+      fatal: PropTypes.bool,
+      message: PropTypes.string.isRequired
+    }).isRequired
+  }
+
+  render () {
+    const { error } = this.props;
+
+    return (
+      <div className={ styles.body }>
+        <div className={ styles.info }>
+          The funds shifting via <a href='https://shapeshift.io' target='_blank'>ShapeShift.io</a> failed with a fatal error on the exchange. The error message received from the exchange is as follow:
+        </div>
+        <div className={ styles.error }>
+          { error.message }
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/js/src/modals/Shapeshift/ErrorStep/index.js b/js/src/modals/Shapeshift/ErrorStep/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..93379cab9bc7b62c3109b6a8049d678ba2f111d3
--- /dev/null
+++ b/js/src/modals/Shapeshift/ErrorStep/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './errorStep';
diff --git a/js/src/modals/Shapeshift/OptionsStep/index.js b/js/src/modals/Shapeshift/OptionsStep/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..18b819c67e3c69045acf6bd0b08ca4e780a1d4c5
--- /dev/null
+++ b/js/src/modals/Shapeshift/OptionsStep/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './optionsStep';
diff --git a/js/src/modals/Shapeshift/OptionsStep/optionsStep.css b/js/src/modals/Shapeshift/OptionsStep/optionsStep.css
new file mode 100644
index 0000000000000000000000000000000000000000..23cc0f9b7ca0e769d7aa3b8c1b1ab8af380c7bd7
--- /dev/null
+++ b/js/src/modals/Shapeshift/OptionsStep/optionsStep.css
@@ -0,0 +1,61 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.body {
+}
+
+.accept {
+  padding: 1.5em 0;
+}
+
+.coinselector {
+}
+
+.coinselector .coinselect {
+  margin-top: 11px;
+}
+
+.coinselect {
+  max-height: 36px;
+  padding: 4px 0 0 0;
+  line-height: 32px;
+}
+
+.coinimage {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  margin-right: 0.5em;
+}
+
+.coindetails {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.coinsymbol {
+  display: inline-block;
+  margin-right: 0.5em;
+  color: #aaa;
+}
+
+.coinname {
+  display: inline-block;
+}
+
+.empty {
+  color: #aaa;
+}
diff --git a/js/src/modals/Shapeshift/OptionsStep/optionsStep.js b/js/src/modals/Shapeshift/OptionsStep/optionsStep.js
new file mode 100644
index 0000000000000000000000000000000000000000..b9b029ce5d7b21bbbce7754af012d631f26b20f6
--- /dev/null
+++ b/js/src/modals/Shapeshift/OptionsStep/optionsStep.js
@@ -0,0 +1,113 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { Checkbox, MenuItem } from 'material-ui';
+
+import { Form, Input, Select } from '../../../ui';
+
+import Price from '../Price';
+
+import styles from './optionsStep.css';
+
+export default class OptionsStep extends Component {
+  static propTypes = {
+    refundAddress: PropTypes.string.isRequired,
+    coinSymbol: PropTypes.string.isRequired,
+    coins: PropTypes.array.isRequired,
+    price: PropTypes.object,
+    hasAccepted: PropTypes.bool.isRequired,
+    onChangeSymbol: PropTypes.func.isRequired,
+    onChangeRefund: PropTypes.func.isRequired,
+    onToggleAccept: PropTypes.func.isRequired
+  };
+
+  render () {
+    const { coinSymbol, coins, refundAddress, hasAccepted, onToggleAccept } = this.props;
+    const label = `(optional) ${coinSymbol} return address`;
+
+    if (!coins.length) {
+      return (
+        <div className={ styles.empty }>
+          There are currently no exchange pairs/coins available to fund with.
+        </div>
+      );
+    }
+
+    const items = coins.map(this.renderCoinSelectItem);
+
+    return (
+      <div className={ styles.body }>
+        <Form>
+          <Select
+            className={ styles.coinselector }
+            label='fund account from'
+            hint='the type of crypto conversion to do'
+            value={ coinSymbol }
+            onChange={ this.onSelectCoin }>
+            { items }
+          </Select>
+          <Input
+            label={ label }
+            hint='the return address for send failures'
+            value={ refundAddress }
+            onSubmit={ this.onChangeRefund } />
+          <Checkbox
+            className={ styles.accept }
+            label='I understand that ShapeShift.io is a 3rd-party service and by using the service any transfer of information and/or funds is completely out of the control of Parity'
+            checked={ hasAccepted }
+            onCheck={ onToggleAccept } />
+        </Form>
+        <Price { ...this.props } />
+      </div>
+    );
+  }
+
+  renderCoinSelectItem = (coin) => {
+    const { image, name, symbol } = coin;
+
+    const item = (
+      <div className={ styles.coinselect }>
+        <img className={ styles.coinimage } src={ image } />
+        <div className={ styles.coindetails }>
+          <div className={ styles.coinsymbol }>
+            { symbol }
+          </div>
+          <div className={ styles.coinname }>
+            { name }
+          </div>
+        </div>
+      </div>
+    );
+
+    return (
+      <MenuItem
+        key={ symbol }
+        value={ symbol }
+        label={ item }>
+        { item }
+      </MenuItem>
+    );
+  }
+
+  onSelectCoin = (event, idx, value) => {
+    this.props.onChangeSymbol(event, value);
+  }
+
+  onChangeAddress = (event, value) => {
+    this.props.onChangeRefund(value);
+  }
+}
diff --git a/js/src/modals/Shapeshift/Price/index.js b/js/src/modals/Shapeshift/Price/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..920094acfe151891e97b1cf2968055f9c1b4745d
--- /dev/null
+++ b/js/src/modals/Shapeshift/Price/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './price';
diff --git a/js/src/modals/Shapeshift/Price/price.js b/js/src/modals/Shapeshift/Price/price.js
new file mode 100644
index 0000000000000000000000000000000000000000..557d4fa68c50746dc08c6be65a3a2259aabc89cb
--- /dev/null
+++ b/js/src/modals/Shapeshift/Price/price.js
@@ -0,0 +1,50 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import Value from '../Value';
+import styles from '../shapeshift.css';
+
+export default class Price extends Component {
+  static propTypes = {
+    coinSymbol: PropTypes.string.isRequired,
+    price: PropTypes.shape({
+      rate: PropTypes.number.isRequired,
+      minimum: PropTypes.number.isRequired,
+      limit: PropTypes.number.isRequired
+    })
+  }
+
+  render () {
+    const { coinSymbol, price } = this.props;
+
+    if (!price) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.price }>
+        <div>
+          <Value amount={ 1 } symbol={ coinSymbol } /> = <Value amount={ price.rate } />
+        </div>
+        <div>
+          (<Value amount={ price.minimum } symbol={ coinSymbol } /> minimum, <Value amount={ price.limit } symbol={ coinSymbol } /> maximum)
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/js/src/modals/Shapeshift/Value/index.js b/js/src/modals/Shapeshift/Value/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..588b4c421918004cef64e57dddc0b3691719306b
--- /dev/null
+++ b/js/src/modals/Shapeshift/Value/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './value';
diff --git a/js/src/modals/Shapeshift/Value/value.css b/js/src/modals/Shapeshift/Value/value.css
new file mode 100644
index 0000000000000000000000000000000000000000..746b5d1686b89f2a31062374c2f34132664a1a29
--- /dev/null
+++ b/js/src/modals/Shapeshift/Value/value.css
@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.body {
+  display: inline-block;
+  color: #aaa;
+}
+
+.amount {
+  display: inline-block;
+}
diff --git a/js/src/modals/Shapeshift/Value/value.js b/js/src/modals/Shapeshift/Value/value.js
new file mode 100644
index 0000000000000000000000000000000000000000..be8c447114d1e612df8c4a215972f217b8d95ce9
--- /dev/null
+++ b/js/src/modals/Shapeshift/Value/value.js
@@ -0,0 +1,45 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+
+import styles from './value.css';
+
+export default class Value extends Component {
+  static propTypes = {
+    amount: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string
+    ]),
+    symbol: PropTypes.string
+  }
+
+  render () {
+    const { amount, symbol } = this.props;
+
+    let value = '';
+    if (amount) {
+      value = new BigNumber(amount).toFormat(3);
+    }
+
+    return (
+      <div className={ styles.body }>
+        <span>{ value }</span><small>{ symbol || 'ETH' }</small>
+      </div>
+    );
+  }
+}
diff --git a/js/src/modals/Shapeshift/index.js b/js/src/modals/Shapeshift/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5ebced4b8417478c343df284731eeb19efbbb234
--- /dev/null
+++ b/js/src/modals/Shapeshift/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './shapeshift';
diff --git a/js/src/modals/Shapeshift/shapeshift.css b/js/src/modals/Shapeshift/shapeshift.css
new file mode 100644
index 0000000000000000000000000000000000000000..2af32756a77802acfc107a61b83166f305a1d9d5
--- /dev/null
+++ b/js/src/modals/Shapeshift/shapeshift.css
@@ -0,0 +1,65 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.body {
+}
+
+.shapeshift {
+  position: absolute;
+  bottom: 0.5em;
+  left: 1em;
+  cursor: pointer;
+  outline: none;
+}
+
+.shapeshift img {
+  height: 28px;
+}
+
+.info, .busy {
+}
+
+.center {
+}
+
+.center div {
+  text-align: center;
+}
+
+.error {
+  padding-top: 1.5em;
+  color: #e44;
+}
+
+.hero {
+  padding-top: 0.75em;
+  text-align: center;
+  font-size: 1.75em;
+}
+
+.symbol {
+  display: inline-block;
+  color: #aaa;
+}
+
+.price div {
+  text-align: center;
+  font-size: small;
+}
+
+.empty {
+  color: #aaa;
+}
diff --git a/js/src/modals/Shapeshift/shapeshift.js b/js/src/modals/Shapeshift/shapeshift.js
new file mode 100644
index 0000000000000000000000000000000000000000..ba3252398d3ce9b667e4a61859fe04b56f0f22dd
--- /dev/null
+++ b/js/src/modals/Shapeshift/shapeshift.js
@@ -0,0 +1,306 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+
+import { Button, IdentityIcon, Modal } from '../../ui';
+import initShapeshift from '../../3rdparty/shapeshift';
+import shapeshiftLogo from '../../../assets/images/shapeshift-logo.png';
+
+import AwaitingDepositStep from './AwaitingDepositStep';
+import AwaitingExchangeStep from './AwaitingExchangeStep';
+import CompletedStep from './CompletedStep';
+import ErrorStep from './ErrorStep';
+import OptionsStep from './OptionsStep';
+
+import styles from './shapeshift.css';
+
+const shapeshift = initShapeshift();
+
+const STAGE_NAMES = ['details', 'awaiting deposit', 'awaiting exchange', 'completed'];
+
+export default class Shapeshift extends Component {
+  static contextTypes = {
+    store: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    onClose: PropTypes.func
+  }
+
+  state = {
+    stage: 0,
+    coinSymbol: 'BTC',
+    coinPair: 'btc_eth',
+    coins: [],
+    depositAddress: '',
+    refundAddress: '',
+    price: null,
+    depositInfo: null,
+    exchangeInfo: null,
+    error: {},
+    hasAccepted: false,
+    shifting: false
+  }
+
+  componentDidMount () {
+    this.retrieveCoins();
+  }
+
+  render () {
+    const { error, stage } = this.state;
+
+    return (
+      <Modal
+        actions={ this.renderDialogActions() }
+        current={ stage }
+        steps={ error.fatal ? null : STAGE_NAMES }
+        title={ error.fatal ? 'exchange failed' : null }
+        waiting={ [1, 2] }
+        visible>
+        { this.renderPage() }
+      </Modal>
+    );
+  }
+
+  renderDialogActions () {
+    const { address } = this.props;
+    const { coins, error, stage, hasAccepted, shifting } = this.state;
+
+    const logo = (
+      <a href='http://shapeshift.io' target='_blank' className={ styles.shapeshift }>
+        <img src={ shapeshiftLogo } />
+      </a>
+    );
+    const cancelBtn = (
+      <Button
+        icon={ <ContentClear /> }
+        label='Cancel'
+        onClick={ this.onClose } />
+    );
+
+    if (error.fatal) {
+      return [
+        logo,
+        cancelBtn
+      ];
+    }
+
+    switch (stage) {
+      case 0:
+        return [
+          logo,
+          cancelBtn,
+          <Button
+            disabled={ !coins.length || !hasAccepted || shifting }
+            icon={ <IdentityIcon address={ address } button /> }
+            label='Shift Funds'
+            onClick={ this.onShift } />
+        ];
+
+      case 1:
+      case 2:
+        return [
+          logo,
+          cancelBtn
+        ];
+
+      case 3:
+        return [
+          logo,
+          <Button
+            icon={ <ActionDoneAll /> }
+            label='Close'
+            onClick={ this.onClose } />
+        ];
+    }
+  }
+
+  renderPage () {
+    const { error, stage } = this.state;
+
+    if (error.fatal) {
+      return (
+        <ErrorStep error={ error } />
+      );
+    }
+
+    switch (stage) {
+      case 0:
+        return (
+          <OptionsStep
+            { ...this.state }
+            onChangeSymbol={ this.onChangeSymbol }
+            onChangeRefund={ this.onChangeRefund }
+            onToggleAccept={ this.onToggleAccept } />
+        );
+
+      case 1:
+        return (
+          <AwaitingDepositStep { ...this.state } />
+        );
+
+      case 2:
+        return (
+          <AwaitingExchangeStep { ...this.state } />
+        );
+
+      case 3:
+        return (
+          <CompletedStep { ...this.state } />
+        );
+    }
+  }
+
+  setStage (stage) {
+    this.setState({
+      stage,
+      error: {}
+    });
+  }
+
+  setFatalError (message) {
+    this.setState({
+      stage: 0,
+      error: {
+        fatal: true,
+        message
+      }
+    });
+  }
+
+  onClose = () => {
+    this.setStage(0);
+    this.props.onClose && this.props.onClose();
+  }
+
+  onShift = () => {
+    const { address } = this.props;
+    const { coinPair, refundAddress } = this.state;
+
+    this.setState({
+      stage: 1,
+      shifting: true
+    });
+
+    shapeshift
+      .shift(address, refundAddress, coinPair)
+      .then((result) => {
+        console.log('onShift', result);
+        const depositAddress = result.deposit;
+
+        shapeshift.subscribe(depositAddress, this.onExchangeInfo);
+        this.setState({ depositAddress });
+      })
+      .catch((error) => {
+        console.error('onShift', error);
+        const message = `Failed to start exchange: ${error.message}`;
+
+        this.newError(new Error(message));
+        this.setFatalError(message);
+      });
+  }
+
+  onChangeSymbol = (event, coinSymbol) => {
+    const coinPair = `${coinSymbol.toLowerCase()}_eth`;
+
+    this.setState({
+      coinPair,
+      coinSymbol,
+      price: null
+    });
+    this.getPrice(coinPair);
+  }
+
+  onChangeRefund = (event, refundAddress) => {
+    this.setState({ refundAddress });
+  }
+
+  onToggleAccept = () => {
+    const { hasAccepted } = this.state;
+
+    this.setState({
+      hasAccepted: !hasAccepted
+    });
+  }
+
+  onExchangeInfo = (error, result) => {
+    if (error) {
+      console.error('onExchangeInfo', error);
+
+      if (error.fatal) {
+        this.setFatalError(error.message);
+      }
+
+      this.newError(error);
+      return;
+    }
+
+    console.log('onExchangeInfo', result.status, result);
+
+    switch (result.status) {
+      case 'received':
+        this.setState({ depositInfo: result });
+        this.setStage(2);
+        return;
+
+      case 'complete':
+        this.setState({ exchangeInfo: result });
+        this.setStage(3);
+        return;
+    }
+  }
+
+  getPrice (coinPair) {
+    shapeshift
+      .getMarketInfo(coinPair)
+      .then((price) => {
+        this.setState({ price });
+      })
+      .catch((error) => {
+        console.error('getPrice', error);
+      });
+  }
+
+  retrieveCoins () {
+    const { coinPair } = this.state;
+
+    shapeshift
+      .getCoins()
+      .then((_coins) => {
+        const coins = Object.values(_coins).filter((coin) => coin.status === 'available');
+
+        this.getPrice(coinPair);
+        this.setState({ coins });
+      })
+      .catch((error) => {
+        console.error('retrieveCoins', error);
+        const message = `Failed to retrieve available coins from ShapeShift.io: ${error.message}`;
+
+        this.newError(new Error(message));
+        this.setFatalError(message);
+      });
+  }
+
+  newError (error) {
+    const { store } = this.context;
+
+    store.dispatch({ type: 'newError', error });
+  }
+}
diff --git a/js/src/modals/Transfer/Details/details.js b/js/src/modals/Transfer/Details/details.js
new file mode 100644
index 0000000000000000000000000000000000000000..55896f0c75aad2853576301d5e8022fc8735a3cc
--- /dev/null
+++ b/js/src/modals/Transfer/Details/details.js
@@ -0,0 +1,193 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+import { Checkbox, MenuItem } from 'material-ui';
+
+import Form, { Input, InputAddressSelect, Select } from '../../../ui/Form';
+
+import imageUnknown from '../../../../assets/images/contracts/unknown-64x64.png';
+import styles from '../transfer.css';
+
+const CHECK_STYLE = {
+  position: 'absolute',
+  top: '38px',
+  left: '1em'
+};
+
+export default class Details extends Component {
+  static contextTypes = {
+    api: PropTypes.object
+  }
+
+  static propTypes = {
+    address: PropTypes.string,
+    balance: PropTypes.object,
+    all: PropTypes.bool,
+    extras: PropTypes.bool,
+    images: PropTypes.object.isRequired,
+    recipient: PropTypes.string,
+    recipientError: PropTypes.string,
+    tag: PropTypes.string,
+    total: PropTypes.string,
+    totalError: PropTypes.string,
+    value: PropTypes.string,
+    valueError: PropTypes.string,
+    onChange: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { all, extras, tag, total, totalError, value, valueError } = this.props;
+    const label = `amount to transfer (in ${tag})`;
+
+    return (
+      <Form>
+        { this.renderTokenSelect() }
+        { this.renderToAddress() }
+        <div className={ styles.columns }>
+          <div>
+            <Input
+              disabled={ all }
+              label={ label }
+              hint='the amount to transfer to the recipient'
+              value={ value }
+              error={ valueError }
+              onChange={ this.onEditValue } />
+          </div>
+          <div>
+            <Checkbox
+              checked={ all }
+              label='full account balance'
+              onCheck={ this.onCheckAll }
+              style={ CHECK_STYLE } />
+          </div>
+        </div>
+        <div className={ styles.columns }>
+          <div>
+            <Input
+              disabled
+              label='total transaction amount'
+              error={ totalError }>
+              <div className={ styles.inputoverride }>
+                { total }<small> ETH</small>
+              </div>
+            </Input>
+          </div>
+          <div>
+            <Checkbox
+              checked={ extras }
+              label='advanced sending options'
+              onCheck={ this.onCheckExtras }
+              style={ CHECK_STYLE } />
+          </div>
+        </div>
+      </Form>
+    );
+  }
+
+  renderToAddress () {
+    const { recipient, recipientError } = this.props;
+
+    return (
+      <div className={ styles.address }>
+        <InputAddressSelect
+          label='recipient address'
+          hint='the recipient address'
+          error={ recipientError }
+          value={ recipient }
+          onChange={ this.onEditRecipient } />
+      </div>
+    );
+  }
+
+  renderTokenSelect () {
+    const { api } = this.context;
+    const { balance, images, tag } = this.props;
+
+    const items = balance.tokens
+      .filter((token) => token.value.gt(0))
+      .map((balance, idx) => {
+        const token = balance.token;
+        const isEth = idx === 0;
+        const imagesrc = token.image || images[token.address] || imageUnknown;
+        let value = 0;
+
+        if (isEth) {
+          value = api.util.fromWei(balance.value).toFormat(3);
+        } else {
+          value = new BigNumber(balance.value).div(balance.token.format || 1).toFormat(3);
+        }
+
+        const label = (
+          <div className={ styles.token }>
+            <img src={ imagesrc } />
+            <div className={ styles.tokenname }>
+              { token.name }
+            </div>
+            <div className={ styles.tokenbalance }>
+              { value }<small> { token.tag }</small>
+            </div>
+          </div>
+        );
+
+        return (
+          <MenuItem
+            key={ token.tag }
+            value={ token.tag }
+            label={ label }>
+            { label }
+          </MenuItem>
+        );
+      });
+
+    return (
+      <Select
+        label='type of token transfer'
+        hint='type of token to transfer'
+        value={ tag }
+        onChange={ this.onChangeToken }>
+        { items }
+      </Select>
+    );
+  }
+
+  onChangeToken = (event, idx, tag) => {
+    this.props.onChange('tag', tag);
+  }
+
+  onEditRecipient = (event, recipient) => {
+    this.props.onChange('recipient', recipient);
+  }
+
+  onEditValue = (event) => {
+    this.props.onChange('value', event.target.value);
+  }
+
+  onCheckAll = () => {
+    this.props.onChange('all', !this.props.all);
+  }
+
+  onCheckExtras = () => {
+    this.props.onChange('extras', !this.props.extras);
+  }
+
+  onContacts = () => {
+    this.setState({
+      showAddresses: true
+    });
+  }
+}
diff --git a/js/src/modals/Transfer/Details/index.js b/js/src/modals/Transfer/Details/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d0bf396b6931716955e5082556d37d8c1749ea6d
--- /dev/null
+++ b/js/src/modals/Transfer/Details/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './details';
diff --git a/js/src/modals/Transfer/Extras/extras.js b/js/src/modals/Transfer/Extras/extras.js
new file mode 100644
index 0000000000000000000000000000000000000000..c5ddd4eac47de2b41b7eb1f088661582c70e9690
--- /dev/null
+++ b/js/src/modals/Transfer/Extras/extras.js
@@ -0,0 +1,109 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import Form, { Input } from '../../../ui/Form';
+
+import styles from '../transfer.css';
+
+export default class Extras extends Component {
+  static propTypes = {
+    isEth: PropTypes.bool,
+    data: PropTypes.string,
+    dataError: PropTypes.string,
+    gas: PropTypes.string,
+    gasEst: PropTypes.string,
+    gasError: PropTypes.string,
+    gasPrice: PropTypes.string,
+    gasPriceDefault: PropTypes.string,
+    gasPriceError: PropTypes.string,
+    total: PropTypes.string,
+    totalError: PropTypes.string,
+    onChange: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { gas, gasError, gasEst, gasPrice, gasPriceDefault, gasPriceError, total, totalError } = this.props;
+    const gasLabel = `gas amount (estimated: ${gasEst})`;
+    const priceLabel = `gas price (current: ${gasPriceDefault})`;
+
+    return (
+      <Form>
+        { this.renderData() }
+        <div className={ styles.columns }>
+          <div>
+            <Input
+              label={ gasLabel }
+              hint='the amount of gas to use for the transaction'
+              error={ gasError }
+              value={ gas }
+              onChange={ this.onEditGas } />
+          </div>
+          <div>
+            <Input
+              label={ priceLabel }
+              hint='the price of gas to use for the transaction'
+              error={ gasPriceError }
+              value={ gasPrice }
+              onChange={ this.onEditGasPrice } />
+          </div>
+        </div>
+        <div className={ styles.columns }>
+          <div>
+            <Input
+              disabled
+              label='total transaction amount'
+              hint='the total amount of the transaction'
+              error={ totalError }
+              value={ `${total} ETH` } />
+          </div>
+        </div>
+      </Form>
+    );
+  }
+
+  renderData () {
+    const { isEth, data, dataError } = this.props;
+
+    if (!isEth) {
+      return null;
+    }
+
+    return (
+      <div>
+        <Input
+          hint='the data to pass through with the transaction'
+          label='transaction data'
+          value={ data }
+          error={ dataError }
+          onChange={ this.onEditData } />
+      </div>
+    );
+  }
+
+  onEditGas = (event) => {
+    this.props.onChange('gas', event.target.value);
+  }
+
+  onEditGasPrice = (event) => {
+    this.props.onChange('gasPrice', event.target.value);
+  }
+
+  onEditData = (event) => {
+    this.props.onChange('data', event.target.value);
+  }
+}
diff --git a/js/src/modals/Transfer/Extras/index.js b/js/src/modals/Transfer/Extras/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0b4d22a2ebcc8568da72d6d8b85927cded150542
--- /dev/null
+++ b/js/src/modals/Transfer/Extras/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './extras';
diff --git a/js/src/modals/Transfer/errors.js b/js/src/modals/Transfer/errors.js
new file mode 100644
index 0000000000000000000000000000000000000000..cc6f9b365d6a3a136b9e0e0e1682b5a73df469b4
--- /dev/null
+++ b/js/src/modals/Transfer/errors.js
@@ -0,0 +1,24 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const ERRORS = {
+  requireRecipient: 'a recipient network address is required for the transaction',
+  invalidAddress: 'the supplied address is an invalid network address',
+  invalidAmount: 'the supplied amount should be a valid positive number',
+  largeAmount: 'the transaction total is higher than the available balance'
+};
+
+export default ERRORS;
diff --git a/js/src/modals/Transfer/index.js b/js/src/modals/Transfer/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..24d36d79637acc5ad834c1240dcde31298a766d1
--- /dev/null
+++ b/js/src/modals/Transfer/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './transfer';
diff --git a/js/src/modals/Transfer/transfer.css b/js/src/modals/Transfer/transfer.css
new file mode 100644
index 0000000000000000000000000000000000000000..645f813f5488dbb7d5cf8b4e3e371375e201b1a6
--- /dev/null
+++ b/js/src/modals/Transfer/transfer.css
@@ -0,0 +1,130 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.info {
+  line-height: 1.618em;
+  width: 100%;
+}
+
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.columns>div {
+  flex: 0 1 50%;
+  width: 50%;
+  position: relative;
+}
+
+.floatbutton {
+  text-align: right;
+  float: right;
+  margin-left: -100%;
+  margin-top: 28px;
+}
+
+.floatbutton>div {
+  margin-right: 0.5em;
+}
+
+.token {
+  height: 32px;
+  margin-top: 14px;
+}
+
+.token img {
+  height: 32px;
+  width: 32px;
+  margin: 0 16px 0 0;
+  z-index: 10;
+}
+
+.token div {
+  height: 32px;
+  line-height: 32px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.tokenbalance {
+  display: inline-block;
+  color: #aaa;
+  padding-left: 1em;
+}
+
+.tokenname {}
+
+.address {
+  position: relative;
+}
+
+.address input {
+  padding-left: 48px !important;
+}
+
+.from {
+  padding: 25px 0 0 48px !important;
+  line-height: 32px;
+}
+
+.fromaddress {
+  text-transform: uppercase;
+  display: inline-block;
+}
+
+.frombalance {
+  display: inline-block;
+  color: #aaa;
+  padding-left: 1em;
+}
+
+.icon {
+  position: absolute;
+  top: 35px;
+}
+
+.grayscale {
+  -webkit-filter: grayscale(1);
+  filter: grayscale(1);
+  opacity: 0;
+}
+
+.hdraccount {
+  padding: 1em 0 0 0;
+}
+
+.hdrimage {
+  display: inline-block;
+}
+
+.hdrdetails {
+  display: inline-block;
+}
+
+.hdrname {
+  text-transform: uppercase;
+}
+
+.hdraddress {
+  color: #aaa;
+  font-size: 0.75em;
+}
+
+.inputoverride {
+  padding-top: 24px !important;
+}
diff --git a/js/src/modals/Transfer/transfer.js b/js/src/modals/Transfer/transfer.js
new file mode 100644
index 0000000000000000000000000000000000000000..f14048203f407d94fe32de85ccdefc556a9a2efc
--- /dev/null
+++ b/js/src/modals/Transfer/transfer.js
@@ -0,0 +1,577 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
+import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
+
+import { BusyStep, CompletedStep, Button, IdentityIcon, Modal, TxHash } from '../../ui';
+
+import Details from './Details';
+import Extras from './Extras';
+import ERRORS from './errors';
+import styles from './transfer.css';
+
+const DEFAULT_GAS = '21000';
+const DEFAULT_GASPRICE = '20000000000';
+const TITLES = {
+  transfer: 'transfer details',
+  sending: 'sending',
+  complete: 'complete',
+  extras: 'extra information'
+};
+const STAGES_BASIC = [TITLES.transfer, TITLES.sending, TITLES.complete];
+const STAGES_EXTRA = [TITLES.transfer, TITLES.extras, TITLES.sending, TITLES.complete];
+
+export default class Transfer extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    store: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    account: PropTypes.object,
+    balance: PropTypes.object,
+    balances: PropTypes.object,
+    images: PropTypes.object.isRequired,
+    onClose: PropTypes.func
+  }
+
+  state = {
+    stage: 0,
+    data: '',
+    dataError: null,
+    extras: false,
+    gas: DEFAULT_GAS,
+    gasEst: '0',
+    gasError: null,
+    gasPrice: DEFAULT_GASPRICE,
+    gasPriceError: null,
+    recipient: '',
+    recipientError: ERRORS.requireRecipient,
+    sending: false,
+    tag: 'ETH',
+    total: '0.0',
+    totalError: null,
+    value: '0.0',
+    valueAll: false,
+    valueError: null,
+    isEth: true,
+    busyState: null
+  }
+
+  componentDidMount () {
+    this.getDefaults();
+  }
+
+  render () {
+    const { stage, extras } = this.state;
+
+    return (
+      <Modal
+        actions={ this.renderDialogActions() }
+        current={ stage }
+        steps={ extras ? STAGES_EXTRA : STAGES_BASIC }
+        waiting={ extras ? [2] : [1] }
+        visible>
+        { this.renderPage() }
+      </Modal>
+    );
+  }
+
+  renderAccount () {
+    const { account } = this.props;
+
+    return (
+      <div className={ styles.hdraccount }>
+        <div className={ styles.hdrimage }>
+          <IdentityIcon
+            inline center
+            address={ account.address } />
+        </div>
+        <div className={ styles.hdrdetails }>
+          <div className={ styles.hdrname }>
+            { account.name || 'Unnamed' }
+          </div>
+          <div className={ styles.hdraddress }>
+            { account.address }
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderPage () {
+    const { extras, stage } = this.state;
+
+    if (stage === 0) {
+      return this.renderDetailsPage();
+    } else if (stage === 1 && extras) {
+      return this.renderExtrasPage();
+    }
+
+    return this.renderCompletePage();
+  }
+
+  renderCompletePage () {
+    const { sending, txhash, busyState } = this.state;
+
+    if (sending) {
+      return (
+        <BusyStep
+          title='The transaction is in progress'
+          state={ busyState } />
+      );
+    }
+
+    return (
+      <CompletedStep>
+        <TxHash hash={ txhash } />
+      </CompletedStep>
+    );
+  }
+
+  renderDetailsPage () {
+    const { account, balance, images } = this.props;
+
+    return (
+      <Details
+        address={ account.address }
+        all={ this.state.valueAll }
+        balance={ balance }
+        extras={ this.state.extras }
+        images={ images }
+        recipient={ this.state.recipient }
+        recipientError={ this.state.recipientError }
+        tag={ this.state.tag }
+        total={ this.state.total }
+        totalError={ this.state.totalError }
+        value={ this.state.value }
+        valueError={ this.state.valueError }
+        onChange={ this.onUpdateDetails } />
+    );
+  }
+
+  renderExtrasPage () {
+    return (
+      <Extras
+        isEth={ this.state.isEth }
+        data={ this.state.data }
+        dataError={ this.state.dataError }
+        gas={ this.state.gas }
+        gasEst={ this.state.gasEst }
+        gasError={ this.state.gasError }
+        gasPrice={ this.state.gasPrice }
+        gasPriceDefault={ this.state.gasPriceDefault }
+        gasPriceError={ this.state.gasPriceError }
+        total={ this.state.total }
+        totalError={ this.state.totalError }
+        onChange={ this.onUpdateDetails } />
+    );
+  }
+
+  renderDialogActions () {
+    const { account } = this.props;
+    const { extras, sending, stage } = this.state;
+
+    const cancelBtn = (
+      <Button
+        icon={ <ContentClear /> }
+        label='Cancel'
+        onClick={ this.onClose } />
+    );
+    const nextBtn = (
+      <Button
+        disabled={ !this.isValid() }
+        icon={ <NavigationArrowForward /> }
+        label='Next'
+        onClick={ this.onNext } />
+    );
+    const prevBtn = (
+      <Button
+        icon={ <NavigationArrowBack /> }
+        label='Back'
+        onClick={ this.onPrev } />
+    );
+    const sendBtn = (
+      <Button
+        disabled={ !this.isValid() || sending }
+        icon={ <IdentityIcon address={ account.address } button /> }
+        label='Send'
+        onClick={ this.onSend } />
+    );
+    const doneBtn = (
+      <Button
+        icon={ <ActionDoneAll /> }
+        label='Close'
+        onClick={ this.onClose } />
+    );
+
+    switch (stage) {
+      case 0:
+        return extras
+          ? [cancelBtn, nextBtn]
+          : [cancelBtn, sendBtn];
+      case 1:
+        return extras
+          ? [cancelBtn, prevBtn, sendBtn]
+          : [doneBtn];
+      default:
+        return [doneBtn];
+    }
+  }
+
+  isValid () {
+    const detailsValid = !this.state.recipientError && !this.state.valueError && !this.state.totalError;
+    const extrasValid = !this.state.gasError && !this.state.gasPriceError && !this.state.totalError;
+    const verifyValid = !this.state.passwordError;
+
+    switch (this.state.stage) {
+      case 0:
+        return detailsValid;
+
+      case 1:
+        return this.state.extras ? extrasValid : verifyValid;
+
+      case 2:
+        return verifyValid;
+    }
+  }
+
+  onNext = () => {
+    this.setState({
+      stage: this.state.stage + 1
+    });
+  }
+
+  onPrev = () => {
+    this.setState({
+      stage: this.state.stage - 1
+    });
+  }
+
+  _onUpdateAll (valueAll) {
+    this.setState({
+      valueAll
+    }, this.recalculateGas);
+  }
+
+  _onUpdateExtras (extras) {
+    this.setState({
+      extras
+    });
+  }
+
+  _onUpdateData (data) {
+    this.setState({
+      data
+    }, this.recalculateGas);
+  }
+
+  validatePositiveNumber (num) {
+    try {
+      const v = new BigNumber(num);
+      if (v.lt(0)) {
+        return ERRORS.invalidAmount;
+      }
+    } catch (e) {
+      return ERRORS.invalidAmount;
+    }
+
+    return null;
+  }
+
+  _onUpdateGas (gas) {
+    const gasError = this.validatePositiveNumber(gas);
+
+    this.setState({
+      gas,
+      gasError
+    }, this.recalculate);
+  }
+
+  _onUpdateGasPrice (gasPrice) {
+    const gasPriceError = this.validatePositiveNumber(gasPrice);
+
+    this.setState({
+      gasPrice,
+      gasPriceError
+    }, this.recalculate);
+  }
+
+  _onUpdateRecipient (recipient) {
+    const { api } = this.context;
+    let recipientError = null;
+
+    if (!recipient || !recipient.length) {
+      recipientError = ERRORS.requireRecipient;
+    } else if (!api.util.isAddressValid(recipient)) {
+      recipientError = ERRORS.invalidAddress;
+    }
+
+    this.setState({
+      recipient,
+      recipientError
+    }, this.recalculateGas);
+  }
+
+  _onUpdateTag (tag) {
+    const { balance } = this.props;
+
+    this.setState({
+      tag,
+      isEth: tag === balance.tokens[0].token.tag
+    }, this.recalculateGas);
+  }
+
+  _onUpdateValue (value) {
+    const valueError = this.validatePositiveNumber(value);
+
+    this.setState({
+      value,
+      valueError
+    }, this.recalculateGas);
+  }
+
+  onUpdateDetails = (type, value) => {
+    switch (type) {
+      case 'all':
+        return this._onUpdateAll(value);
+
+      case 'extras':
+        return this._onUpdateExtras(value);
+
+      case 'data':
+        return this._onUpdateData(value);
+
+      case 'gas':
+        return this._onUpdateGas(value);
+
+      case 'gasPrice':
+        return this._onUpdateGasPrice(value);
+
+      case 'recipient':
+        return this._onUpdateRecipient(value);
+
+      case 'tag':
+        return this._onUpdateTag(value);
+
+      case 'value':
+        return this._onUpdateValue(value);
+    }
+  }
+
+  _sendEth () {
+    const { api } = this.context;
+    const { account } = this.props;
+    const { data, gas, gasPrice, recipient, value } = this.state;
+    const options = {
+      from: account.address,
+      to: recipient,
+      gas,
+      gasPrice,
+      value: api.util.toWei(value || 0)
+    };
+
+    if (data && data.length) {
+      options.data = data;
+    }
+
+    return api.eth.postTransaction(options);
+  }
+
+  _sendToken () {
+    const { account, balance } = this.props;
+    const { recipient, value, tag } = this.state;
+    const token = balance.tokens.find((balance) => balance.token.tag === tag).token;
+
+    return token.contract.instance.transfer
+      .postTransaction({
+        from: account.address,
+        to: token.address
+      }, [
+        recipient,
+        new BigNumber(value).mul(token.format).toString()
+      ]);
+  }
+
+  onSend = () => {
+    const { api } = this.context;
+
+    this.onNext();
+
+    this.setState({ sending: true }, () => {
+      (this.state.isEth
+        ? this._sendEth()
+        : this._sendToken()
+      ).then((requestId) => {
+        this.setState({ busyState: 'Waiting for authorization in the Parity Signer' });
+        return api.pollMethod('eth_checkRequest', requestId);
+      })
+      .then((txhash) => {
+        this.onNext();
+        this.setState({
+          sending: false,
+          txhash,
+          busyState: 'Your transaction has been posted to the network'
+        });
+      })
+      .catch((error) => {
+        console.log('send', error);
+
+        this.setState({
+          sending: false
+        });
+
+        this.newError(error);
+      });
+    });
+  }
+
+  onClose = () => {
+    this.setState({ stage: 0 }, () => {
+      this.props.onClose && this.props.onClose();
+    });
+  }
+
+  _estimateGasToken () {
+    const { account, balance } = this.props;
+    const { recipient, value, tag } = this.state;
+    const token = balance.tokens.find((balance) => balance.token.tag === tag).token;
+
+    return token.contract.instance.transfer
+      .estimateGas({
+        from: account.address,
+        to: token.address
+      }, [
+        recipient,
+        new BigNumber(value || 0).mul(token.format).toString()
+      ]);
+  }
+
+  _estimateGasEth () {
+    const { api } = this.context;
+    const { account } = this.props;
+    const { data, recipient, value } = this.state;
+    const options = {
+      from: account.address,
+      to: recipient,
+      value: api.util.toWei(value || 0)
+    };
+
+    if (data && data.length) {
+      options.data = data;
+    }
+
+    return api.eth.estimateGas(options);
+  }
+
+  recalculateGas = () => {
+    (this.state.isEth
+      ? this._estimateGasEth()
+      : this._estimateGasToken()
+    ).then((_value) => {
+      let gas = _value;
+
+      if (gas.gt(DEFAULT_GAS)) {
+        gas = gas.mul(1.2);
+      }
+
+      this.setState({
+        gas: gas.toFixed(0),
+        gasEst: _value.toFormat()
+      }, this.recalculate);
+    })
+    .catch((error) => {
+      console.error('etimateGas', error);
+    });
+  }
+
+  recalculate = () => {
+    const { api } = this.context;
+    const { account, balance } = this.props;
+
+    if (!account || !balance) {
+      return;
+    }
+
+    const { gas, gasPrice, tag, valueAll, isEth } = this.state;
+    const gasTotal = new BigNumber(gasPrice || 0).mul(new BigNumber(gas || 0));
+    const balance_ = balance.tokens.find((b) => tag === b.token.tag);
+    const availableEth = new BigNumber(balance.tokens[0].value);
+    const available = new BigNumber(balance_.value);
+    const format = new BigNumber(balance_.token.format || 1);
+
+    let { value, valueError } = this.state;
+    let totalEth = gasTotal;
+    let totalError = null;
+
+    if (valueAll) {
+      if (isEth) {
+        const bn = api.util.fromWei(availableEth.minus(gasTotal));
+        value = (bn.lt(0) ? new BigNumber(0.0) : bn).toString();
+      } else {
+        value = available.div(format).toString();
+      }
+    }
+
+    if (isEth) {
+      totalEth = totalEth.plus(api.util.toWei(value || 0));
+    }
+
+    if (new BigNumber(value || 0).gt(available.div(format))) {
+      valueError = ERRORS.largeAmount;
+    } else if (valueError === ERRORS.largeAmount) {
+      valueError = null;
+    }
+
+    if (totalEth.gt(availableEth)) {
+      totalError = ERRORS.largeAmount;
+    }
+
+    this.setState({
+      total: api.util.fromWei(totalEth).toString(),
+      totalError,
+      value,
+      valueError
+    });
+  }
+
+  getDefaults = () => {
+    const { api } = this.context;
+
+    api.eth
+      .gasPrice()
+      .then((gasPrice) => {
+        this.setState({
+          gasPrice: gasPrice.toString(),
+          gasPriceDefault: gasPrice.toFormat()
+        }, this.recalculate);
+      })
+      .catch((error) => {
+        console.error('getDefaults', error);
+      });
+  }
+
+  newError = (error) => {
+    const { store } = this.context;
+
+    store.dispatch({ type: 'newError', error });
+  }
+}
diff --git a/js/src/modals/index.js b/js/src/modals/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d5eb9197198851a71faa14a676b810e465effcf6
--- /dev/null
+++ b/js/src/modals/index.js
@@ -0,0 +1,37 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import AddAddress from './AddAddress';
+import AddContract from './AddContract';
+import CreateAccount from './CreateAccount';
+import DeployContract from './DeployContract';
+import EditMeta from './EditMeta';
+import ExecuteContract from './ExecuteContract';
+import FirstRun from './FirstRun';
+import Shapeshift from './Shapeshift';
+import Transfer from './Transfer';
+
+export {
+  AddAddress,
+  AddContract,
+  CreateAccount,
+  DeployContract,
+  EditMeta,
+  ExecuteContract,
+  FirstRun,
+  Shapeshift,
+  Transfer
+};
diff --git a/js/src/parity.js b/js/src/parity.js
new file mode 100644
index 0000000000000000000000000000000000000000..1fe788b5a23a551a98932b6369d432c5d158fb63
--- /dev/null
+++ b/js/src/parity.js
@@ -0,0 +1,30 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import 'babel-polyfill';
+import 'whatwg-fetch';
+
+import es6Promise from 'es6-promise';
+es6Promise.polyfill();
+
+import Api from './api';
+
+const api = new Api(new Api.Transport.Http('/rpc/'));
+
+window.parity = {
+  Api,
+  api
+};
diff --git a/js/src/redux/actions.js b/js/src/redux/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..58e9c2a36730879451eed368bcf5d3d6fa834e98
--- /dev/null
+++ b/js/src/redux/actions.js
@@ -0,0 +1,28 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { newError } from '../ui/Errors/actions';
+import { setAddressImage } from './providers/imagesActions';
+import { clearStatusLogs, toggleStatusLogs } from './providers/statusActions';
+import { toggleView } from '../views/Settings';
+
+export {
+  newError,
+  clearStatusLogs,
+  setAddressImage,
+  toggleStatusLogs,
+  toggleView
+};
diff --git a/js/src/redux/index.js b/js/src/redux/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..a23f60659faa17545d2369dfa8ee479a11a64772
--- /dev/null
+++ b/js/src/redux/index.js
@@ -0,0 +1,23 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import * as actions from './actions';
+import initStore from './store';
+
+export {
+  actions,
+  initStore
+};
diff --git a/js/src/redux/middleware.js b/js/src/redux/middleware.js
new file mode 100644
index 0000000000000000000000000000000000000000..6ba811ea7d10064909ee9b7e35090982d256ece2
--- /dev/null
+++ b/js/src/redux/middleware.js
@@ -0,0 +1,36 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import ErrorsMiddleware from '../ui/Errors/middleware';
+import SettingsMiddleware from '../views/Settings/middleware';
+import SignerMiddleware from './providers/signerMiddleware';
+
+import statusMiddleware from '../views/Status/middleware';
+
+export default function (api) {
+  const errors = new ErrorsMiddleware();
+  const signer = new SignerMiddleware(api);
+  const settings = new SettingsMiddleware();
+  const status = statusMiddleware();
+
+  const middleware = [
+    settings.toMiddleware(),
+    signer.toMiddleware(),
+    errors.toMiddleware()
+  ];
+
+  return middleware.concat(status);
+}
diff --git a/js/src/redux/providers/balances.js b/js/src/redux/providers/balances.js
new file mode 100644
index 0000000000000000000000000000000000000000..b88883fb736528fc42a1ceecb4d7432699e7d952
--- /dev/null
+++ b/js/src/redux/providers/balances.js
@@ -0,0 +1,182 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { getBalances, getTokens } from './balancesActions';
+import { setAddressImage } from './imagesActions';
+
+import * as abis from '../../contracts/abi';
+
+import imagesEthereum from '../../../assets/images/contracts/ethereum-black-64x64.png';
+
+const ETH = {
+  name: 'Ethereum',
+  tag: 'ETH',
+  image: imagesEthereum
+};
+
+export default class Balances {
+  constructor (store, api) {
+    this._api = api;
+    this._store = store;
+    this._accountsInfo = null;
+  }
+
+  start () {
+    this._subscribeBlockNumber();
+    this._subscribeAccountsInfo();
+  }
+
+  _subscribeAccountsInfo () {
+    this._api
+      .subscribe('personal_accountsInfo', (error, accountsInfo) => {
+        if (error) {
+          return;
+        }
+
+        this._accountsInfo = accountsInfo;
+        this._retrieveBalances();
+      })
+      .then((subscriptionId) => {
+        console.log('balances._subscribeAccountsInfo', 'subscriptionId', subscriptionId);
+      });
+  }
+
+  _subscribeBlockNumber () {
+    this._api
+      .subscribe('eth_blockNumber', (error) => {
+        if (error) {
+          return;
+        }
+
+        this._retrieveTokens();
+      })
+      .then((subscriptionId) => {
+        console.log('balances._subscribeBlockNumber', 'subscriptionId', subscriptionId);
+      });
+  }
+
+  _retrieveTokens () {
+    this._api.ethcore
+      .registryAddress()
+      .then((registryAddress) => {
+        const registry = this._api.newContract(abis.registry, registryAddress);
+
+        return registry.instance.getAddress.call({}, [this._api.util.sha3('tokenreg'), 'A']);
+      })
+      .then((tokenregAddress) => {
+        const tokenreg = this._api.newContract(abis.tokenreg, tokenregAddress);
+
+        return tokenreg.instance.tokenCount
+          .call()
+          .then((numTokens) => {
+            const promisesTokens = [];
+            const promisesImages = [];
+
+            while (promisesTokens.length < numTokens.toNumber()) {
+              const index = promisesTokens.length;
+
+              promisesTokens.push(tokenreg.instance.token.call({}, [index]));
+              promisesImages.push(tokenreg.instance.meta.call({}, [index, 'IMG']));
+            }
+
+            return Promise.all([
+              Promise.all(promisesTokens),
+              Promise.all(promisesImages)
+            ]);
+          });
+      })
+      .then(([_tokens, images]) => {
+        const tokens = {};
+        this._tokens = _tokens.map((_token, index) => {
+          const [address, tag, format, name] = _token;
+
+          const token = {
+            address,
+            name,
+            tag,
+            format: format.toString(),
+            contract: this._api.newContract(abis.eip20, address)
+          };
+          tokens[address] = token;
+          this._store.dispatch(setAddressImage(address, images[index]));
+
+          return token;
+        });
+
+        this._store.dispatch(getTokens(tokens));
+        this._retrieveBalances();
+      })
+      .catch((error) => {
+        console.error('balances._retrieveTokens', error);
+      });
+  }
+
+  _retrieveBalances () {
+    if (!this._accountsInfo || !this._tokens) {
+      return;
+    }
+
+    const addresses = Object.keys(this._accountsInfo);
+    this._balances = {};
+
+    Promise
+      .all(
+        addresses.map((address) => Promise.all([
+          this._api.eth.getBalance(address),
+          this._api.eth.getTransactionCount(address)
+        ]))
+      )
+      .then((balanceTxCount) => {
+        return Promise.all(
+          balanceTxCount.map(([value, txCount], idx) => {
+            const address = addresses[idx];
+
+            this._balances[address] = {
+              txCount,
+              tokens: [{
+                token: ETH,
+                value
+              }]
+            };
+
+            return Promise.all(
+              this._tokens.map((token) => {
+                return token.contract.instance.balanceOf.call({}, [address]);
+              })
+            );
+          })
+        );
+      })
+      .then((tokenBalances) => {
+        addresses.forEach((address, idx) => {
+          const balanceOf = tokenBalances[idx];
+          const balance = this._balances[address];
+
+          this._tokens.forEach((token, tidx) => {
+            balance.tokens.push({
+              token,
+              value: balanceOf[tidx]
+            });
+          });
+        });
+
+        this._store.dispatch(getBalances(this._balances));
+      })
+      .catch((error) => {
+        console.error('balances._retrieveBalances', error);
+      });
+  }
+}
diff --git a/js/src/redux/providers/balancesActions.js b/js/src/redux/providers/balancesActions.js
new file mode 100644
index 0000000000000000000000000000000000000000..2771c455e23a67cc933a6bb0ea4d2f09fb82786a
--- /dev/null
+++ b/js/src/redux/providers/balancesActions.js
@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function getBalances (balances) {
+  return {
+    type: 'getBalances',
+    balances
+  };
+}
+
+export function getTokens (tokens) {
+  return {
+    type: 'getTokens',
+    tokens
+  };
+}
diff --git a/js/src/redux/providers/balancesReducer.js b/js/src/redux/providers/balancesReducer.js
new file mode 100644
index 0000000000000000000000000000000000000000..ea28a52174d252fdb44deba44e9941ed27efb81f
--- /dev/null
+++ b/js/src/redux/providers/balancesReducer.js
@@ -0,0 +1,36 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { handleActions } from 'redux-actions';
+
+const initialState = {
+  balances: {},
+  tokens: {}
+};
+
+export default handleActions({
+  getBalances (state, action) {
+    const { balances } = action;
+
+    return Object.assign({}, state, { balances });
+  },
+
+  getTokens (state, action) {
+    const { tokens } = action;
+
+    return Object.assign({}, state, { tokens });
+  }
+}, initialState);
diff --git a/js/src/redux/providers/imagesActions.js b/js/src/redux/providers/imagesActions.js
new file mode 100644
index 0000000000000000000000000000000000000000..ce9221a3b974c26132cd556dfda15e12d4018374
--- /dev/null
+++ b/js/src/redux/providers/imagesActions.js
@@ -0,0 +1,23 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function setAddressImage (address, hashArray) {
+  return {
+    type: 'setAddressImage',
+    address,
+    hashArray
+  };
+}
diff --git a/js/src/redux/providers/imagesReducer.js b/js/src/redux/providers/imagesReducer.js
new file mode 100644
index 0000000000000000000000000000000000000000..e3e8cbbfc5498a36588cdfe660b6fd375d978c38
--- /dev/null
+++ b/js/src/redux/providers/imagesReducer.js
@@ -0,0 +1,40 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { handleActions } from 'redux-actions';
+import { bytesToHex } from '../../api/util/format';
+
+const ZERO = '0x0000000000000000000000000000000000000000000000000000000000000000';
+
+const initialState = {
+  images: {}
+};
+
+export function hashToImageUrl (hashArray) {
+  const hash = hashArray ? bytesToHex(hashArray) : ZERO;
+
+  return hash === ZERO ? null : `http://127.0.0.1:8080/api/content/${hash.substr(2)}`;
+}
+
+export default handleActions({
+  setAddressImage (state, action) {
+    const { address, hashArray } = action;
+
+    return Object.assign({}, state, {
+      [address]: hashToImageUrl(hashArray)
+    });
+  }
+}, initialState);
diff --git a/js/src/redux/providers/index.js b/js/src/redux/providers/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..7e5f19f2b2213e425faa066049e416cec8f958cf
--- /dev/null
+++ b/js/src/redux/providers/index.js
@@ -0,0 +1,26 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export Balances from './balances';
+export Personal from './personal';
+export Signer from './signer';
+export Status from './status';
+
+export balancesReducer from './balancesReducer';
+export imagesReducer from './imagesReducer';
+export personalReducer from './personalReducer';
+export signerReducer from './signerReducer';
+export statusReducer from './statusReducer';
diff --git a/js/src/redux/providers/personal.js b/js/src/redux/providers/personal.js
new file mode 100644
index 0000000000000000000000000000000000000000..e75b4082bb0ecad6a2968e094cd595b669ea2024
--- /dev/null
+++ b/js/src/redux/providers/personal.js
@@ -0,0 +1,43 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { personalAccountsInfo } from './personalActions';
+
+export default class Personal {
+  constructor (store, api) {
+    this._api = api;
+    this._store = store;
+  }
+
+  start () {
+    this._subscribeAccountsInfo();
+  }
+
+  _subscribeAccountsInfo () {
+    this._api
+      .subscribe('personal_accountsInfo', (error, accountsInfo) => {
+        if (error) {
+          console.error('personal_accountsInfo', error);
+          return;
+        }
+
+        this._store.dispatch(personalAccountsInfo(accountsInfo));
+      })
+      .then((subscriptionId) => {
+        console.log('personal._subscribeAccountsInfo', 'subscriptionId', subscriptionId);
+      });
+  }
+}
diff --git a/js/src/redux/providers/personalActions.js b/js/src/redux/providers/personalActions.js
new file mode 100644
index 0000000000000000000000000000000000000000..2e422cb1afa2fa3aa33d7d58b9e9c71d55397222
--- /dev/null
+++ b/js/src/redux/providers/personalActions.js
@@ -0,0 +1,22 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function personalAccountsInfo (accountsInfo) {
+  return {
+    type: 'personalAccountsInfo',
+    accountsInfo
+  };
+}
diff --git a/js/src/redux/providers/personalReducer.js b/js/src/redux/providers/personalReducer.js
new file mode 100644
index 0000000000000000000000000000000000000000..6d35610e9b3d45f6767f2a71bc4cc833c11c513f
--- /dev/null
+++ b/js/src/redux/providers/personalReducer.js
@@ -0,0 +1,59 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { handleActions } from 'redux-actions';
+
+const initialState = {
+  accountsInfo: {},
+  accounts: {},
+  hasAccounts: false,
+  contacts: {},
+  hasContacts: false,
+  contracts: {},
+  hasContracts: false
+};
+
+export default handleActions({
+  personalAccountsInfo (state, action) {
+    const { accountsInfo } = action;
+    const accounts = {};
+    const contacts = {};
+    const contracts = {};
+
+    Object.keys(accountsInfo || {})
+      .map((address) => Object.assign({}, accountsInfo[address], { address }))
+      .filter((account) => !account.meta.deleted)
+      .forEach((account) => {
+        if (account.uuid) {
+          accounts[account.address] = account;
+        } else if (account.meta.contract) {
+          contracts[account.address] = account;
+        } else {
+          contacts[account.address] = account;
+        }
+      });
+
+    return Object.assign({}, state, {
+      accountsInfo,
+      accounts,
+      hasAccounts: Object.keys(accounts).length !== 0,
+      contacts,
+      hasContacts: Object.keys(contacts).length !== 0,
+      contracts,
+      hasContracts: Object.keys(contracts).length !== 0
+    });
+  }
+}, initialState);
diff --git a/js/src/redux/providers/signer.js b/js/src/redux/providers/signer.js
new file mode 100644
index 0000000000000000000000000000000000000000..92f80d51eee88bdc99359a549aab1d320573b431
--- /dev/null
+++ b/js/src/redux/providers/signer.js
@@ -0,0 +1,58 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { signerRequestsToConfirm } from './signerActions';
+
+export default class Signer {
+  constructor (store, api) {
+    this._api = api;
+    this._store = store;
+  }
+
+  start () {
+    this._subscribeRequestsToConfirm();
+  }
+
+  _subscribeRequestsToConfirm () {
+    this._api
+      .subscribe('personal_requestsToConfirm', (error, pending) => {
+        if (error) {
+          return;
+        }
+
+        this._store.dispatch(signerRequestsToConfirm(pending || []));
+      })
+      .then((subscriptionId) => {
+        console.log('signer._subscribeRequestsToConfirm', 'subscriptionId', subscriptionId);
+      });
+  }
+}
diff --git a/js/src/redux/providers/signerActions.js b/js/src/redux/providers/signerActions.js
new file mode 100644
index 0000000000000000000000000000000000000000..bd3c1022d41ed1c68080fb8b61b90304db142648
--- /dev/null
+++ b/js/src/redux/providers/signerActions.js
@@ -0,0 +1,41 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createAction } from 'redux-actions';
+
+import { withError } from '../util';
+
+function identity (x) {
+  return x;
+}
+
+export function signerRequestsToConfirm (pending) {
+  return {
+    type: 'signerRequestsToConfirm',
+    pending
+  };
+}
+
+export const startConfirmRequest = createAction('signerStartConfirmRequest');
+export const successConfirmRequest = createAction('signerSuccessConfirmRequest');
+export const errorConfirmRequest = createAction('signerErrorConfirmRequest', identity,
+  withError((args) => args.err, 'error')
+);
+export const startRejectRequest = createAction('signerStartRejectRequest');
+export const successRejectRequest = createAction('signerSuccessRejectRequest');
+export const errorRejectRequest = createAction('signerErrorRejectRequest', identity,
+  withError((args) => args.err, 'error')
+);
diff --git a/js/src/redux/providers/signerMiddleware.js b/js/src/redux/providers/signerMiddleware.js
new file mode 100644
index 0000000000000000000000000000000000000000..53144e454411c1e78a95028343b1cdae1855eff9
--- /dev/null
+++ b/js/src/redux/providers/signerMiddleware.js
@@ -0,0 +1,84 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import * as actions from './signerActions';
+
+export default class SignerMiddleware {
+  constructor (api) {
+    this._api = api;
+  }
+
+  toMiddleware () {
+    return (store) => (next) => (action) => {
+      let delegate;
+
+      switch (action.type) {
+        case 'signerStartConfirmRequest':
+          delegate = this.onConfirmStart;
+          break;
+
+        case 'signerStartRejectRequest':
+          delegate = this.onRejectStart;
+          break;
+
+        default:
+          next(action);
+          return;
+      }
+
+      if (!delegate) {
+        return;
+      }
+
+      next(action);
+      delegate(store, action);
+    };
+  }
+
+  onConfirmStart = (store, action) => {
+    const { id, password } = action.payload;
+
+    this._api.personal
+      .confirmRequest(id, {}, password)
+      .then((txHash) => {
+        console.log('confirmRequest', id, txHash);
+        if (!txHash) {
+          store.dispatch(actions.errorConfirmRequest({ id, err: 'Unable to confirm.' }));
+          return;
+        }
+
+        store.dispatch(actions.successConfirmRequest({ id, txHash }));
+      })
+      .catch((error) => {
+        console.error('confirmRequest', id, error);
+        store.dispatch(actions.errorConfirmRequest({ id, err: error.message }));
+      });
+  }
+
+  onRejectStart = (store, action) => {
+    const id = action.payload;
+
+    this._api.personal
+      .rejectRequest(id)
+      .then(() => {
+        store.dispatch(actions.successRejectRequest({ id }));
+      })
+      .catch((error) => {
+        console.error('rejectRequest', id, error);
+        store.dispatch(actions.errorRejectRequest({ id, err: error.message }));
+      });
+  }
+}
diff --git a/js/src/redux/providers/signerReducer.js b/js/src/redux/providers/signerReducer.js
new file mode 100644
index 0000000000000000000000000000000000000000..42e7b5f46f537e55e1ebfe21d692d99300e11007
--- /dev/null
+++ b/js/src/redux/providers/signerReducer.js
@@ -0,0 +1,110 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { handleActions } from 'redux-actions';
+
+const initialState = {
+  finished: [],
+  pending: []
+};
+
+function removeWithId (pending, id) {
+  return pending.filter(tx => tx.id !== id).slice();
+}
+
+function setIsSending (pending, id, isSending) {
+  return pending.map(p => {
+    if (p.id === id) {
+      p.isSending = isSending;
+    }
+    return p;
+  }).slice();
+}
+
+export default handleActions({
+  signerRequestsToConfirm (state, action) {
+    const { pending } = action;
+
+    return Object.assign({}, state, {
+      pending: pending.map((request) => {
+        const { id } = request;
+        const oldRequest = state.pending.find((r) => r.id === id);
+
+        request.date = (oldRequest && oldRequest.date)
+          ? oldRequest.date
+          : new Date();
+
+        return request;
+      })
+    });
+  },
+
+  signerStartConfirmRequest (state, action) {
+    return {
+      ...state,
+      pending: setIsSending(state.pending, action.payload.id, true)
+    };
+  },
+
+  signerSuccessConfirmRequest (state, action) {
+    const { id, txHash } = action.payload;
+    const confirmed = Object.assign(
+      state.pending.find(p => p.id === id),
+      { result: txHash, status: 'confirmed' }
+    );
+
+    return {
+      ...state,
+      pending: removeWithId(state.pending, id),
+      finished: [confirmed].concat(state.finished)
+    };
+  },
+
+  signerErrorConfirmRequest (state, action) {
+    return {
+      ...state,
+      pending: setIsSending(state.pending, action.payload.id, false)
+    };
+  },
+
+  signerStartRejectRequest (state, action) {
+    return {
+      ...state,
+      pending: setIsSending(state.pending, action.payload.id, true)
+    };
+  },
+
+  signerSuccessRejectRequest (state, action) {
+    const { id } = action.payload;
+    const rejected = Object.assign(
+      state.pending.find(p => p.id === id),
+      { status: 'rejected' }
+    );
+    return {
+      ...state,
+      pending: removeWithId(state.pending, id),
+      finished: [rejected].concat(state.finished)
+    };
+  },
+
+  signerErrorRejectRequest (state, action) {
+    return {
+      ...state,
+      pending: setIsSending(state.pending, action.payload.id, false)
+    };
+  }
+
+}, initialState);
diff --git a/js/src/redux/providers/status.js b/js/src/redux/providers/status.js
new file mode 100644
index 0000000000000000000000000000000000000000..917a8577e8a66bcc235c7e1fe8bc930ef79b3ebf
--- /dev/null
+++ b/js/src/redux/providers/status.js
@@ -0,0 +1,138 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { statusBlockNumber, statusCollection, statusLogs } from './statusActions';
+
+export default class Status {
+  constructor (store, api) {
+    this._api = api;
+    this._store = store;
+  }
+
+  start () {
+    this._subscribeBlockNumber();
+    this._pollPing();
+    this._pollStatus();
+    this._pollLogs();
+  }
+
+  _subscribeBlockNumber () {
+    this._api
+      .subscribe('eth_blockNumber', (error, blockNumber) => {
+        if (error) {
+          return;
+        }
+
+        this._store.dispatch(statusBlockNumber(blockNumber));
+      })
+      .then((subscriptionId) => {
+        console.log('status._subscribeBlockNumber', 'subscriptionId', subscriptionId);
+      });
+  }
+
+  _pollPing = () => {
+    const dispatch = (status, timeout = 500) => {
+      this._store.dispatch(statusCollection({ isPingable: status }));
+      setTimeout(this._pollPing, timeout);
+    };
+
+    fetch('/', { method: 'GET' })
+      .then((response) => dispatch(!!response.ok))
+      .catch(() => dispatch(false));
+  }
+
+  _pollStatus = () => {
+    const { secureToken, isConnected, isConnecting, needsToken } = this._api;
+    const nextTimeout = (timeout = 1000) => {
+      setTimeout(this._pollStatus, timeout);
+    };
+
+    this._store.dispatch(statusCollection({ isConnected, isConnecting, needsToken, secureToken }));
+    if (!isConnected) {
+      nextTimeout(250);
+      return;
+    }
+
+    Promise
+      .all([
+        this._api.web3.clientVersion(),
+        this._api.eth.coinbase(),
+        this._api.ethcore.defaultExtraData(),
+        this._api.ethcore.extraData(),
+        this._api.ethcore.gasFloorTarget(),
+        this._api.eth.hashrate(),
+        this._api.ethcore.minGasPrice(),
+        this._api.ethcore.netChain(),
+        this._api.ethcore.netPeers(),
+        this._api.ethcore.netPort(),
+        this._api.ethcore.nodeName(),
+        this._api.ethcore.rpcSettings(),
+        this._api.eth.syncing()
+      ])
+      .then(([clientVersion, coinbase, defaultExtraData, extraData, gasFloorTarget, hashrate, minGasPrice, netChain, netPeers, netPort, nodeName, rpcSettings, syncing]) => {
+        const isTest = netChain === 'morden' || netChain === 'testnet';
+
+        this._store.dispatch(statusCollection({
+          clientVersion,
+          coinbase,
+          defaultExtraData,
+          extraData,
+          gasFloorTarget,
+          hashrate,
+          minGasPrice,
+          netChain,
+          netPeers,
+          netPort,
+          nodeName,
+          rpcSettings,
+          syncing,
+          isTest
+        }));
+        nextTimeout();
+      })
+      .catch((error) => {
+        console.error('_pollStatus', error);
+        nextTimeout();
+      });
+  }
+
+  _pollLogs = () => {
+    const nextTimeout = (timeout = 1000) => setTimeout(this._pollLogs, timeout);
+    const { devLogsEnabled } = this._store.getState().nodeStatus;
+
+    if (!devLogsEnabled) {
+      nextTimeout();
+      return;
+    }
+
+    Promise
+      .all([
+        this._api.ethcore.devLogs(),
+        this._api.ethcore.devLogsLevels()
+      ])
+      .then(([devLogs, devLogsLevels]) => {
+        this._store.dispatch(statusLogs({
+          devLogs: devLogs.slice(-1024),
+          devLogsLevels
+        }));
+        nextTimeout();
+      })
+      .catch((error) => {
+        console.error('_pollLogs', error);
+        nextTimeout();
+      });
+  }
+}
diff --git a/js/src/redux/providers/statusActions.js b/js/src/redux/providers/statusActions.js
new file mode 100644
index 0000000000000000000000000000000000000000..142cdabdcb64e6fb7cd217118b2a0d08c2336b82
--- /dev/null
+++ b/js/src/redux/providers/statusActions.js
@@ -0,0 +1,49 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function statusBlockNumber (blockNumber) {
+  return {
+    type: 'statusBlockNumber',
+    blockNumber
+  };
+}
+
+export function statusCollection (collection) {
+  return {
+    type: 'statusCollection',
+    collection
+  };
+}
+
+export function statusLogs (logInfo) {
+  return {
+    type: 'statusLogs',
+    logInfo
+  };
+}
+
+export function toggleStatusLogs (devLogsEnabled) {
+  return {
+    type: 'toggleStatusLogs',
+    devLogsEnabled
+  };
+}
+
+export function clearStatusLogs () {
+  return {
+    type: 'clearStatusLogs'
+  };
+}
diff --git a/js/src/redux/providers/statusReducer.js b/js/src/redux/providers/statusReducer.js
new file mode 100644
index 0000000000000000000000000000000000000000..18a60284bb60da9cc2714f19cbb5a85428136c52
--- /dev/null
+++ b/js/src/redux/providers/statusReducer.js
@@ -0,0 +1,75 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import { handleActions } from 'redux-actions';
+
+const initialState = {
+  blockNumber: new BigNumber(0),
+  devLogs: [],
+  devLogsLevels: null,
+  devLogsEnabled: false,
+  clientVersion: '',
+  coinbase: '',
+  defaultExtraData: '',
+  extraData: '',
+  gasFloorTarget: new BigNumber(0),
+  hashrate: new BigNumber(0),
+  minGasPrice: new BigNumber(0),
+  netChain: 'morden',
+  netPeers: {
+    active: new BigNumber(0),
+    connected: new BigNumber(0),
+    max: new BigNumber(0)
+  },
+  netPort: new BigNumber(0),
+  nodeName: '',
+  rpcSettings: {},
+  syncing: false,
+  isApiConnected: true,
+  isPingConnected: true,
+  isTest: true
+};
+
+export default handleActions({
+  statusBlockNumber (state, action) {
+    const { blockNumber } = action;
+
+    return Object.assign({}, state, { blockNumber });
+  },
+
+  statusCollection (state, action) {
+    const { collection } = action;
+
+    return Object.assign({}, state, collection);
+  },
+
+  statusLogs (state, action) {
+    const { logInfo } = action;
+
+    return Object.assign({}, state, logInfo);
+  },
+
+  toggleStatusLogs (state, action) {
+    const { devLogsEnabled } = action;
+
+    return Object.assign({}, state, { devLogsEnabled });
+  },
+
+  clearStatusLogs (state, action) {
+    return Object.assign({}, state, { devLogs: [] });
+  }
+}, initialState);
diff --git a/js/src/redux/reducers.js b/js/src/redux/reducers.js
new file mode 100644
index 0000000000000000000000000000000000000000..4161807ba4a0f35b3a6171702eadf25db7f1bf99
--- /dev/null
+++ b/js/src/redux/reducers.js
@@ -0,0 +1,39 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { combineReducers } from 'redux';
+import { routerReducer } from 'react-router-redux';
+
+import { balancesReducer, imagesReducer, personalReducer, signerReducer, statusReducer as nodeStatusReducer } from './providers';
+
+import { errorReducer } from '../ui/Errors';
+import { settingsReducer } from '../views/Settings';
+import { tooltipReducer } from '../ui/Tooltips';
+
+export default function () {
+  return combineReducers({
+    errors: errorReducer,
+    tooltip: tooltipReducer,
+    routing: routerReducer,
+    settings: settingsReducer,
+
+    balances: balancesReducer,
+    images: imagesReducer,
+    nodeStatus: nodeStatusReducer,
+    personal: personalReducer,
+    signer: signerReducer
+  });
+}
diff --git a/js/src/redux/store.js b/js/src/redux/store.js
new file mode 100644
index 0000000000000000000000000000000000000000..9d5620226411e01df869c9a10e05f4e8fea71322
--- /dev/null
+++ b/js/src/redux/store.js
@@ -0,0 +1,44 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { applyMiddleware, createStore } from 'redux';
+
+import initMiddleware from './middleware';
+import initReducers from './reducers';
+
+import {
+  Balances as BalancesProvider,
+  Personal as PersonalProvider,
+  Signer as SignerProvider,
+  Status as StatusProvider
+} from './providers';
+
+const storeCreation = window.devToolsExtension
+  ? window.devToolsExtension()(createStore)
+  : createStore;
+
+export default function (api) {
+  const reducers = initReducers();
+  const middleware = initMiddleware(api);
+  const store = applyMiddleware(...middleware)(storeCreation)(reducers);
+
+  new BalancesProvider(store, api).start();
+  new PersonalProvider(store, api).start();
+  new SignerProvider(store, api).start();
+  new StatusProvider(store, api).start();
+
+  return store;
+}
diff --git a/js/src/redux/util.js b/js/src/redux/util.js
new file mode 100644
index 0000000000000000000000000000000000000000..0c45c4b09f8aa8e1e661328a398a442df24d2547
--- /dev/null
+++ b/js/src/redux/util.js
@@ -0,0 +1,23 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { hashToImageUrl } from './providers/imagesReducer';
+import { withError } from '../ui/Errors/middleware';
+
+export {
+  hashToImageUrl,
+  withError
+};
diff --git a/js/src/reset.css b/js/src/reset.css
new file mode 100644
index 0000000000000000000000000000000000000000..b1ee22d03d1c79b4c412aae88f77cf097db1b52a
--- /dev/null
+++ b/js/src/reset.css
@@ -0,0 +1,108 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+:root,
+:root body {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 16px;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300 !important;
+}
+
+:root * {
+  font-weight: 300 !important;
+}
+
+:root a,
+:root a:visited {
+  text-decoration: none;
+  cursor: pointer;
+  color: rgb(0, 151, 167); /* #f80 */
+}
+
+:root a:hover {
+  color: rgb(0, 174, 193);
+}
+
+:root .reset { font-size: initial; width: 100%; height: 100%; }
+/* shame:on */
+/* Material-ui is changing input properties with inline styles. */
+/* because of that https://github.com/ethcore/eth-node-status-page is overriding all inputs with !important
+/* We want to keep it consistent and we use material ui, so we set the default color according to material ui */
+:root .reset input {
+  margin-top: 0;
+  color: rgba(0, 0, 0, 0.870588) !important;
+}
+:root .reset input[disabled] {
+  color: rgba(0, 0, 0, 0.298039) !important;
+}
+/* shame:off */
+
+// Prefixed version of
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+:root .reset div, :root .reset span, :root .reset applet, :root .reset object, :root .reset iframe,
+:root .reset h1, :root .reset h2, :root .reset h3, :root .reset h4, :root .reset h5, :root .reset h6, :root .reset p, :root .reset blockquote, :root .reset pre,
+:root .reset a, :root .reset abbr, :root .reset acronym, :root .reset address, :root .reset big, :root .reset cite, :root .reset code,
+:root .reset del, :root .reset dfn, :root .reset em, :root .reset img, :root .reset ins, :root .reset kbd, :root .reset q, :root .reset s, :root .reset samp,
+:root .reset small, :root .reset strike, :root .reset strong, :root .reset sub, :root .reset sup, :root .reset tt, :root .reset var,
+:root .reset b, :root .reset u, :root .reset i, :root .reset center,
+:root .reset dl, :root .reset dt, :root .reset dd, :root .reset ol, :root .reset ul, :root .reset li,
+:root .reset fieldset, :root .reset form, :root .reset label, :root .reset legend,
+:root .reset table, :root .reset caption, :root .reset tbody, :root .reset tfoot, :root .reset thead, :root .reset tr, :root .reset th, :root .reset td,
+:root .reset article, :root .reset aside, :root .reset canvas, :root .reset details, :root .reset embed,
+:root .reset figure, :root .reset figcaption, :root .reset footer, :root .reset header, :root .reset hgroup,
+:root .reset menu, :root .reset nav, :root .reset output, :root .reset ruby, :root .reset section, :root .reset summary,
+:root .reset time, :root .reset mark, :root .reset audio, :root .reset video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+:root .reset article, :root .reset aside, :root .reset details, :root .reset figcaption, :root .reset figure,
+:root .reset footer, :root .reset header, :root .reset hgroup, :root .reset menu, :root .reset nav, :root .reset section {
+  display: block;
+}
+:root .reset body {
+  line-height: 1;
+}
+:root .reset ol, :root .reset ul {
+  list-style: none;
+}
+:root .reset blockquote, :root .reset q {
+  quotes: none;
+}
+:root .reset blockquote:before, :root .reset blockquote:after,
+:root .reset q:before, :root .reset q:after {
+  content: '';
+  content: none;
+}
+:root .reset table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/js/src/secureApi.js b/js/src/secureApi.js
new file mode 100644
index 0000000000000000000000000000000000000000..545cfd459e1f3e26ccac479db551342e65021e43
--- /dev/null
+++ b/js/src/secureApi.js
@@ -0,0 +1,113 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Api from './api';
+
+const sysuiToken = window.localStorage.getItem('sysuiToken');
+
+export default class SecureApi extends Api {
+  constructor (url) {
+    super(new Api.Transport.Ws(url, sysuiToken));
+
+    this._isConnecting = true;
+    this._connectState = 0;
+    this._needsToken = false;
+
+    this._followConnection();
+  }
+
+  setToken = () => {
+    window.localStorage.setItem('sysuiToken', this._transport.token);
+  }
+
+  _followConnection = () => {
+    const nextTick = () => {
+      setTimeout(this._followConnection, 250);
+    };
+    const setManual = () => {
+      this._connectedState = 100;
+      this._needsToken = true;
+      this._isConnecting = false;
+    };
+    const lastError = this._transport.lastError;
+    const isConnected = this._transport.isConnected;
+
+    switch (this._connectState) {
+      // token = <passed via constructor>
+      case 0:
+        if (isConnected) {
+          this._isConnecting = false;
+          return this.setToken();
+        } else if (lastError) {
+          this.updateToken('initial', 1);
+        }
+        break;
+
+      // token = 'initial'
+      case 1:
+        if (isConnected) {
+          this._connectState = 2;
+          this.personal
+            .generateAuthorizationToken()
+            .then((token) => {
+              this.updateToken(token, 2);
+            })
+            .catch((error) => {
+              console.error('_followConnection', error);
+              setManual();
+            });
+          return;
+        } else if (lastError) {
+          return setManual();
+        }
+        break;
+
+      // token = <personal_generateAuthorizationToken>
+      case 2:
+        if (isConnected) {
+          this._isConnecting = false;
+          return this.setToken();
+        } else if (lastError) {
+          return setManual();
+        }
+        break;
+    }
+
+    nextTick();
+  }
+
+  updateToken (token, connectedState = 0) {
+    this._connectState = connectedState;
+    this._transport.updateToken(token.replace(/[^a-zA-Z0-9]/g, ''));
+    this._followConnection();
+  }
+
+  get isConnecting () {
+    return this._isConnecting;
+  }
+
+  get isConnected () {
+    return this._transport.isConnected;
+  }
+
+  get needsToken () {
+    return this._needsToken;
+  }
+
+  get secureToken () {
+    return this._transport.token;
+  }
+}
diff --git a/js/src/ui/Actionbar/actionbar.css b/js/src/ui/Actionbar/actionbar.css
new file mode 100644
index 0000000000000000000000000000000000000000..73c5687f434a29c16a96a0b975e17f288d4b4a94
--- /dev/null
+++ b/js/src/ui/Actionbar/actionbar.css
@@ -0,0 +1,39 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.actionbar {
+  padding: 0 24px !important;
+  margin-bottom: 0;
+  height: auto !important;
+  background: rgba(0, 0, 0, 0.25) !important;
+}
+
+.tooltitle {
+  text-transform: uppercase;
+  color: white;
+}
+
+.toolbuttons {
+}
+
+.toolbuttons button {
+  margin: 10px 0 10px 16px !important;
+  color: white !important;
+}
+
+.toolbuttons svg {
+  fill: white !important;
+}
diff --git a/js/src/ui/Actionbar/actionbar.js b/js/src/ui/Actionbar/actionbar.js
new file mode 100644
index 0000000000000000000000000000000000000000..c3fbe6a189809b37ad65fdfc2a843487bf345837
--- /dev/null
+++ b/js/src/ui/Actionbar/actionbar.js
@@ -0,0 +1,67 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
+
+import styles from './actionbar.css';
+
+export default class Actionbar extends Component {
+  static propTypes = {
+    title: PropTypes.string,
+    buttons: PropTypes.array,
+    children: PropTypes.node,
+    className: PropTypes.string
+  };
+
+  render () {
+    const { children, className } = this.props;
+    const classes = `${styles.actionbar} ${className}`;
+
+    return (
+      <Toolbar className={ classes }>
+        { this.renderTitle() }
+        { this.renderButtons() }
+        { children }
+      </Toolbar>
+    );
+  }
+
+  renderButtons () {
+    const { buttons } = this.props;
+
+    if (!buttons || !buttons.length) {
+      return null;
+    }
+
+    return (
+      <ToolbarGroup
+        className={ styles.toolbuttons }>
+        { buttons }
+      </ToolbarGroup>
+    );
+  }
+
+  renderTitle () {
+    const { title } = this.props;
+
+    return (
+      <h3 className={ styles.tooltitle }>
+        { title }
+      </h3>
+    );
+  }
+}
diff --git a/js/src/ui/Actionbar/index.js b/js/src/ui/Actionbar/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5955440799df0a74a56ce38fb41569f1559130d9
--- /dev/null
+++ b/js/src/ui/Actionbar/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './actionbar';
diff --git a/js/src/ui/Badge/badge.css b/js/src/ui/Badge/badge.css
new file mode 100644
index 0000000000000000000000000000000000000000..3653bdae86edfa3381019ab6b99b5a719ddc3c29
--- /dev/null
+++ b/js/src/ui/Badge/badge.css
@@ -0,0 +1,35 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.bubble {
+  border-radius: 50%;
+  padding: 3px 5px;
+  color: white;
+  font-size: 0.7em;
+  line-height: 1em;
+}
+
+.default {
+  background: #555;
+}
+
+.red {
+  background: red;
+}
+
+.green {
+  background: green;
+}
diff --git a/js/src/ui/Badge/badge.js b/js/src/ui/Badge/badge.js
new file mode 100644
index 0000000000000000000000000000000000000000..1ffd4d83ca0de3b0d5c750a88859ddee0799b2e8
--- /dev/null
+++ b/js/src/ui/Badge/badge.js
@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './badge.css';
+
+export default class Badge extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    color: PropTypes.string,
+    value: PropTypes.any
+  };
+
+  render () {
+    const { className, color, value } = this.props;
+    const classes = `${styles.bubble} ${styles[color || 'default']} ${className}`;
+
+    return (
+      <div className={ classes }>
+        { value }
+      </div>
+    );
+  }
+}
diff --git a/js/src/ui/Badge/index.js b/js/src/ui/Badge/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..8dc0c9ef0fb9af3e93db0fcd975a1da3d51b3993
--- /dev/null
+++ b/js/src/ui/Badge/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './badge';
diff --git a/js/src/ui/Balance/balance.css b/js/src/ui/Balance/balance.css
new file mode 100644
index 0000000000000000000000000000000000000000..6f9b7bb21b5790659c811c333daf700ca4f765dd
--- /dev/null
+++ b/js/src/ui/Balance/balance.css
@@ -0,0 +1,50 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.balances {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 1em 0 0 0;
+  vertical-align: top;
+}
+
+.empty {
+  line-height: 24px;
+  margin: 0.75em 0.5em 0 0;
+  opacity: 0.25;
+}
+
+.balance {
+  background: rgba(255, 255, 255, 0.07);
+  border-radius: 16px;
+  margin: 0.75em 0.5em 0 0;
+  max-height: 24px;
+}
+
+.balance img {
+  display: inline-block;
+  height: 32px;
+  margin: -4px 1em 0 0;
+  width: 32px;
+}
+
+.balance div {
+  display: inline-block;
+  /*font-family: 'Roboto Mono', monospace;*/
+  line-height: 24px;
+  margin: 0 1em 0 0;
+  vertical-align: top;
+}
diff --git a/js/src/ui/Balance/balance.js b/js/src/ui/Balance/balance.js
new file mode 100644
index 0000000000000000000000000000000000000000..b9df3e9fb76370fa759c04b1cc7398f096b3ff1e
--- /dev/null
+++ b/js/src/ui/Balance/balance.js
@@ -0,0 +1,93 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import unknownImage from '../../../assets/images/contracts/unknown-64x64.png';
+import styles from './balance.css';
+
+class Balance extends Component {
+  static contextTypes = {
+    api: PropTypes.object
+  }
+
+  static propTypes = {
+    balance: PropTypes.object,
+    images: PropTypes.object.isRequired
+  }
+
+  render () {
+    const { api } = this.context;
+    const { balance, images } = this.props;
+
+    if (!balance) {
+      return null;
+    }
+
+    let body = (balance.tokens || [])
+      .filter((balance) => new BigNumber(balance.value).gt(0))
+      .map((balance) => {
+        const token = balance.token;
+        const value = token.format
+          ? new BigNumber(balance.value).div(new BigNumber(token.format)).toFormat(3)
+          : api.util.fromWei(balance.value).toFormat(3);
+        const imagesrc = token.image || images[token.address] || unknownImage;
+
+        return (
+          <div
+            className={ styles.balance }
+            key={ token.tag }>
+            <img
+              src={ imagesrc }
+              alt={ token.name } />
+            <div>{ value }<small> { token.tag }</small></div>
+          </div>
+        );
+      });
+
+    if (!body.length) {
+      body = (
+        <div className={ styles.empty }>
+          There are no balances associated with this account
+        </div>
+      );
+    }
+
+    return (
+      <div className={ styles.balances }>
+        { body }
+      </div>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { images } = state;
+
+  return { images };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Balance);
diff --git a/js/src/ui/Balance/index.js b/js/src/ui/Balance/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..24ed7c44e1a891c57a52d372d1db72738561c89d
--- /dev/null
+++ b/js/src/ui/Balance/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './balance';
diff --git a/js/src/ui/Button/button.js b/js/src/ui/Button/button.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef4c7d7fec7c88ab81a9645b54fe3d17e760e458
--- /dev/null
+++ b/js/src/ui/Button/button.js
@@ -0,0 +1,45 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { FlatButton } from 'material-ui';
+
+export default class Button extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    icon: PropTypes.node,
+    label: PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.object
+    ]),
+    onClick: PropTypes.func
+  }
+
+  render () {
+    const { className, disabled, icon, label, onClick } = this.props;
+
+    return (
+      <FlatButton
+        className={ className }
+        disabled={ disabled }
+        icon={ icon }
+        label={ label }
+        primary
+        onTouchTap={ onClick } />
+    );
+  }
+}
diff --git a/js/src/ui/Button/index.js b/js/src/ui/Button/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f69a65e3d53fd0e216cb4aefcbcd551417281e09
--- /dev/null
+++ b/js/src/ui/Button/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './button';
diff --git a/js/src/ui/ConfirmDialog/confirmDialog.css b/js/src/ui/ConfirmDialog/confirmDialog.css
new file mode 100644
index 0000000000000000000000000000000000000000..6bb860bd342eb299c3d717d6e5d0b329edbe2348
--- /dev/null
+++ b/js/src/ui/ConfirmDialog/confirmDialog.css
@@ -0,0 +1,19 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.body {
+  text-align: center;
+}
diff --git a/js/src/ui/ConfirmDialog/confirmDialog.js b/js/src/ui/ConfirmDialog/confirmDialog.js
new file mode 100644
index 0000000000000000000000000000000000000000..7a0be650a1c5e07c8e9c05cdc31aac299961c4c7
--- /dev/null
+++ b/js/src/ui/ConfirmDialog/confirmDialog.js
@@ -0,0 +1,56 @@
+import React, { Component, PropTypes } from 'react';
+import ActionDone from 'material-ui/svg-icons/action/done';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+
+import Button from '../Button';
+import Modal from '../Modal';
+
+import styles from './confirmDialog.css';
+
+export default class ConfirmDialog extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    iconConfirm: PropTypes.node,
+    iconDeny: PropTypes.node,
+    labelConfirm: PropTypes.string,
+    labelDeny: PropTypes.string,
+    title: PropTypes.oneOfType([
+      PropTypes.node, PropTypes.string
+    ]).isRequired,
+    visible: PropTypes.bool.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    onDeny: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { children, className, title, visible } = this.props;
+
+    return (
+      <Modal
+        className={ className }
+        actions={ this.renderActions() }
+        title={ title }
+        visible={ visible }>
+        <div className={ styles.body }>
+          { children }
+        </div>
+      </Modal>
+    );
+  }
+
+  renderActions () {
+    const { iconConfirm, iconDeny, labelConfirm, labelDeny, onConfirm, onDeny } = this.props;
+
+    return [
+      <Button
+        label={ labelDeny || 'no' }
+        icon={ iconDeny || <ContentClear /> }
+        onClick={ onDeny } />,
+      <Button
+        label={ labelConfirm || 'yes' }
+        icon={ iconConfirm || <ActionDone /> }
+        onClick={ onConfirm } />
+    ];
+  }
+}
diff --git a/js/src/ui/ConfirmDialog/index.js b/js/src/ui/ConfirmDialog/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ea4074149d2d144a145f575466472915315219b6
--- /dev/null
+++ b/js/src/ui/ConfirmDialog/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './confirmDialog';
diff --git a/js/src/ui/Container/Title/index.js b/js/src/ui/Container/Title/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..8ddd6868351c9dd42398d26c56c377ab82dab113
--- /dev/null
+++ b/js/src/ui/Container/Title/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './title';
diff --git a/js/src/ui/Container/Title/title.css b/js/src/ui/Container/Title/title.css
new file mode 100644
index 0000000000000000000000000000000000000000..c3bf7a3b10e0e5ada0ca1ad8d5fce1ddbe01c66c
--- /dev/null
+++ b/js/src/ui/Container/Title/title.css
@@ -0,0 +1,25 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.byline {
+  color: #aaa;
+}
+
+.title {
+  text-transform: uppercase;
+  margin: 0;
+  line-height: 34px;
+}
diff --git a/js/src/ui/Container/Title/title.js b/js/src/ui/Container/Title/title.js
new file mode 100644
index 0000000000000000000000000000000000000000..2acfc30bb1b19784c5b143869f7745e6b44fd219
--- /dev/null
+++ b/js/src/ui/Container/Title/title.js
@@ -0,0 +1,48 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './title.css';
+
+export default class Title extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    title: PropTypes.oneOfType([
+      PropTypes.string, PropTypes.node
+    ]),
+    byline: PropTypes.string
+  }
+
+  state = {
+    name: 'Unnamed'
+  }
+
+  render () {
+    const { className } = this.props;
+
+    return (
+      <div className={ className }>
+        <h3 className={ styles.title }>
+          { this.props.title }
+        </h3>
+        <div className={ styles.byline }>
+          { this.props.byline }
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/js/src/ui/Container/container.css b/js/src/ui/Container/container.css
new file mode 100644
index 0000000000000000000000000000000000000000..890f9d93427c805439362e1d4cf415409345fed8
--- /dev/null
+++ b/js/src/ui/Container/container.css
@@ -0,0 +1,29 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.container {
+  padding: 0em
+}
+
+.padded {
+  padding: 1.5em;
+  background: rgba(0, 0, 0, 0.8) !important;
+  border-radius: 0 !important;
+}
+
+.light .padded {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
diff --git a/js/src/ui/Container/container.js b/js/src/ui/Container/container.js
new file mode 100644
index 0000000000000000000000000000000000000000..a91f0ab06a89e6e63f2aaf8b54ffd0ea5f70a28f
--- /dev/null
+++ b/js/src/ui/Container/container.js
@@ -0,0 +1,42 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { Card } from 'material-ui/Card';
+
+import styles from './container.css';
+
+export default class Container extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    light: PropTypes.bool,
+    style: PropTypes.object
+  }
+
+  render () {
+    const { children, className, light, style } = this.props;
+    const classes = `${styles.container} ${light ? styles.light : ''} ${className}`;
+
+    return (
+      <div className={ classes } style={ style }>
+        <Card className={ styles.padded }>
+          { children }
+        </Card>
+      </div>
+    );
+  }
+}
diff --git a/js/src/ui/Container/index.js b/js/src/ui/Container/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..12d4155aa2827857665b4f43bd6b5b795d900432
--- /dev/null
+++ b/js/src/ui/Container/index.js
@@ -0,0 +1,20 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Title from './Title';
+
+export default from './container.js';
+export { Title };
diff --git a/js/src/ui/ContextProvider/contextProvider.js b/js/src/ui/ContextProvider/contextProvider.js
new file mode 100644
index 0000000000000000000000000000000000000000..7af6d342e87133779efa854fbf6e466224aa5203
--- /dev/null
+++ b/js/src/ui/ContextProvider/contextProvider.js
@@ -0,0 +1,48 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { Component, PropTypes } from 'react';
+
+export default class ContextProvider extends Component {
+  static propTypes = {
+    api: PropTypes.object.isRequired,
+    muiTheme: PropTypes.object.isRequired,
+    store: PropTypes.object.isRequired,
+    children: PropTypes.node.isRequired
+  }
+
+  static childContextTypes = {
+    api: PropTypes.object,
+    muiTheme: PropTypes.object,
+    store: PropTypes.object
+  }
+
+  render () {
+    const { children } = this.props;
+
+    return children;
+  }
+
+  getChildContext () {
+    const { api, muiTheme, store } = this.props;
+
+    return {
+      api,
+      muiTheme,
+      store
+    };
+  }
+}
diff --git a/js/src/ui/ContextProvider/index.js b/js/src/ui/ContextProvider/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..6b6958db75c71dbf4beac04e1b8645c4dcb2950d
--- /dev/null
+++ b/js/src/ui/ContextProvider/index.js
@@ -0,0 +1 @@
+export default from './contextProvider';
diff --git a/js/src/ui/Errors/actions.js b/js/src/ui/Errors/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..de401ccaa666ac7c9db00e1164ea2676434ed19a
--- /dev/null
+++ b/js/src/ui/Errors/actions.js
@@ -0,0 +1,28 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function newError (error) {
+  return {
+    type: 'newError',
+    error
+  };
+}
+
+export function closeErrors () {
+  return {
+    type: 'closeErrors'
+  };
+}
diff --git a/js/src/ui/Errors/errors.css b/js/src/ui/Errors/errors.css
new file mode 100644
index 0000000000000000000000000000000000000000..30fd7186a7edc98ea29a7dc270661c3446a9a25f
--- /dev/null
+++ b/js/src/ui/Errors/errors.css
@@ -0,0 +1,20 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  z-index: 10101 !important;
+}
diff --git a/js/src/ui/Errors/errors.js b/js/src/ui/Errors/errors.js
new file mode 100644
index 0000000000000000000000000000000000000000..e29e002b96f8e634af0a5b8b586ca8e3dacd7150
--- /dev/null
+++ b/js/src/ui/Errors/errors.js
@@ -0,0 +1,69 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Snackbar } from 'material-ui';
+
+import { closeErrors } from './actions';
+
+import styles from './errors.css';
+
+class Errors extends Component {
+  static propTypes = {
+    message: PropTypes.string,
+    visible: PropTypes.bool,
+    onCloseErrors: PropTypes.func
+  };
+
+  render () {
+    const { message, visible, onCloseErrors } = this.props;
+
+    if (!message || !visible) {
+      return null;
+    }
+
+    return (
+      <Snackbar
+        open
+        className={ styles.container }
+        message={ message }
+        autoHideDuration={ 5000 }
+        onRequestClose={ onCloseErrors } />
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { message, visible } = state.errors;
+
+  return {
+    message,
+    visible
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    onCloseErrors: closeErrors
+  }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Errors);
diff --git a/js/src/ui/Errors/index.js b/js/src/ui/Errors/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..608f22a1df1cbc649d12e550f9eab881c2ac00d0
--- /dev/null
+++ b/js/src/ui/Errors/index.js
@@ -0,0 +1,25 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import errorReducer from './reducers';
+import { newError } from './actions';
+
+export default from './errors';
+
+export {
+  errorReducer,
+  newError
+};
diff --git a/js/src/ui/Errors/middleware.js b/js/src/ui/Errors/middleware.js
new file mode 100644
index 0000000000000000000000000000000000000000..da660b49ea0803501a56638c8a9b7e6ecc465a9c
--- /dev/null
+++ b/js/src/ui/Errors/middleware.js
@@ -0,0 +1,46 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { newError } from './actions';
+
+function withError (formatter, type = 'default') {
+  return (message) => {
+    return {
+      error: {
+        message: formatter(message),
+        type
+      }
+    };
+  };
+}
+
+export default class ErrorsMiddleware {
+  toMiddleware () {
+    return (store) => (next) => (action) => {
+      const { meta } = action;
+
+      if (meta && meta.error) {
+        next(newError(meta.error));
+      }
+
+      next(action);
+    };
+  }
+}
+
+export {
+  withError
+};
diff --git a/js/src/ui/Errors/reducers.js b/js/src/ui/Errors/reducers.js
new file mode 100644
index 0000000000000000000000000000000000000000..f04a7529d2db4711d257442b34adc7ed017062e7
--- /dev/null
+++ b/js/src/ui/Errors/reducers.js
@@ -0,0 +1,44 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+function newError (state, action) {
+  const { error } = action;
+
+  return Object.assign({}, state, {
+    visible: true,
+    message: error.message
+  });
+}
+
+function closeErrors (state, action) {
+  return Object.assign({}, state, {
+    visible: false,
+    message: null
+  });
+}
+
+export default function errorReducer (state = {}, action) {
+  switch (action.type) {
+    case 'newError':
+      return newError(state, action);
+
+    case 'closeErrors':
+      return closeErrors(state, action);
+
+    default:
+      return state;
+  }
+}
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.css b/js/src/ui/Form/AddressSelect/addressSelect.css
new file mode 100644
index 0000000000000000000000000000000000000000..a5df06b9705309160793c52e5fed5474bd6881ad
--- /dev/null
+++ b/js/src/ui/Form/AddressSelect/addressSelect.css
@@ -0,0 +1,38 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.account {
+  max-height: 36px;
+  padding: 4px 0 0 0;
+  line-height: 32px;
+  margin-top: 11px;
+}
+
+.details {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.image {
+  display: inline-block;
+  max-height: 32px;
+}
+
+.name {
+  line-height: 32px;
+  vertical-align: top;
+  text-transform: uppercase;
+}
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js
new file mode 100644
index 0000000000000000000000000000000000000000..617d02481d29ee394e88c72d83317b2195b25694
--- /dev/null
+++ b/js/src/ui/Form/AddressSelect/addressSelect.js
@@ -0,0 +1,95 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { MenuItem } from 'material-ui';
+
+import IdentityIcon from '../../IdentityIcon';
+import IdentityName from '../../IdentityName';
+import Select from '../Select';
+
+import styles from './addressSelect.css';
+
+export default class AddressSelect extends Component {
+  static propTypes = {
+    disabled: PropTypes.bool,
+    accounts: PropTypes.object,
+    contacts: PropTypes.object,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+    error: PropTypes.string,
+    value: PropTypes.string,
+    tokens: PropTypes.object,
+    onChange: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { disabled, error, hint, label, value } = this.props;
+
+    return (
+      <Select
+        disabled={ disabled }
+        label={ label }
+        hint={ hint }
+        error={ error }
+        value={ value }
+        onChange={ this.onChange }>
+        { this.renderSelectEntries() }
+      </Select>
+    );
+  }
+
+  renderSelectEntries () {
+    const { accounts, contacts } = this.props;
+    const entries = Object.values(Object.assign({}, accounts || {}, contacts || {}));
+
+    if (!entries.length) {
+      return null;
+    }
+
+    return entries.map(this.renderSelectEntry);
+  }
+
+  renderSelectEntry = (entry) => {
+    const item = (
+      <div className={ styles.account }>
+        <div className={ styles.image }>
+          <IdentityIcon
+            inline center
+            address={ entry.address } />
+        </div>
+        <div className={ styles.details }>
+          <div className={ styles.name }>
+            <IdentityName address={ entry.address } />
+          </div>
+        </div>
+      </div>
+    );
+
+    return (
+      <MenuItem
+        key={ entry.address }
+        value={ entry.address }
+        label={ item }>
+        { item }
+      </MenuItem>
+    );
+  }
+
+  onChange = (event, idx, value) => {
+    this.props.onChange(event, value);
+  }
+}
diff --git a/js/src/ui/Form/AddressSelect/index.js b/js/src/ui/Form/AddressSelect/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..58059cd2e1ed7ab7091ed5e46191bdca69a0cf1e
--- /dev/null
+++ b/js/src/ui/Form/AddressSelect/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './addressSelect';
diff --git a/js/src/ui/Form/FormWrap/formWrap.css b/js/src/ui/Form/FormWrap/formWrap.css
new file mode 100644
index 0000000000000000000000000000000000000000..31a73e6ee9d1e0e665249589457211d4dc67afec
--- /dev/null
+++ b/js/src/ui/Form/FormWrap/formWrap.css
@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.stretch {
+  width: 75%;
+  clear: both;
+}
+
+.stretch input {
+  width: 100%;
+}
diff --git a/js/src/ui/Form/FormWrap/formWrap.js b/js/src/ui/Form/FormWrap/formWrap.js
new file mode 100644
index 0000000000000000000000000000000000000000..ba3f0a9573a50130ec476f93af6eee5fa6c63066
--- /dev/null
+++ b/js/src/ui/Form/FormWrap/formWrap.js
@@ -0,0 +1,33 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './formWrap.css';
+
+export default class FormWrap extends Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render () {
+    return (
+      <div className={ styles.stretch }>
+        { this.props.children }
+      </div>
+    );
+  }
+}
diff --git a/js/src/ui/Form/FormWrap/index.js b/js/src/ui/Form/FormWrap/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..97c1b0181d94bc3fd0f5c3cef3cb8260528beed8
--- /dev/null
+++ b/js/src/ui/Form/FormWrap/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './formWrap';
diff --git a/js/src/ui/Form/Input/index.js b/js/src/ui/Form/Input/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d9d9293e5a0d94f5eb5d4ba1a940163111f64d5
--- /dev/null
+++ b/js/src/ui/Form/Input/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './input';
diff --git a/js/src/ui/Form/Input/input.js b/js/src/ui/Form/Input/input.js
new file mode 100644
index 0000000000000000000000000000000000000000..4d62f997c00be37df23f796eb6981d21307245e0
--- /dev/null
+++ b/js/src/ui/Form/Input/input.js
@@ -0,0 +1,123 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { TextField } from 'material-ui';
+
+// TODO: duplicated in Select
+const UNDERLINE_DISABLED = {
+  borderColor: 'rgba(255, 255, 255, 0.298039)' // 'transparent' // 'rgba(255, 255, 255, 0.298039)'
+};
+
+const UNDERLINE_NORMAL = {
+  borderBottom: 'solid 2px'
+};
+
+const NAME_ID = ' ';
+
+export default class Input extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    error: PropTypes.string,
+    hint: PropTypes.string,
+    label: PropTypes.string,
+    multiLine: PropTypes.bool,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    onSubmit: PropTypes.func,
+    rows: PropTypes.number,
+    type: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.number, PropTypes.string
+    ])
+  }
+
+  state = {
+    value: this.props.value
+  }
+
+  render () {
+    const { value } = this.state;
+    const { children, className, disabled, error, label, hint, multiLine, rows, type } = this.props;
+
+    return (
+      <TextField
+        autoComplete='off'
+        className={ className }
+        disabled={ disabled }
+        errorText={ error }
+        floatingLabelFixed
+        floatingLabelText={ label }
+        fullWidth
+        hintText={ hint }
+        multiLine={ multiLine }
+        name={ NAME_ID }
+        id={ NAME_ID }
+        rows={ rows }
+        type={ type || 'text' }
+        underlineDisabledStyle={ UNDERLINE_DISABLED }
+        underlineStyle={ UNDERLINE_NORMAL }
+        value={ value }
+        onBlur={ this.onBlur }
+        onChange={ this.onChange }
+        onKeyDown={ this.onKeyDown }>
+        { children }
+      </TextField>
+    );
+  }
+
+  onChange = (event, value) => {
+    this.setValue(value);
+
+    this.props.onChange && this.props.onChange(event, value);
+  }
+
+  onBlur = (event) => {
+    const { value } = event.target;
+
+    this.onSubmit(value);
+
+    this.props.onBlur && this.props.onBlur(event);
+  }
+
+  onKeyDown = (event) => {
+    const { value } = event.target;
+
+    if (event.which === 13) {
+      this.onSubmit(value);
+    } else if (event.which === 27) {
+      // TODO ESC, revert to original
+    }
+
+    this.props.onKeyDown && this.props.onKeyDown(event);
+  }
+
+  onSubmit = (value) => {
+    this.setValue(value);
+
+    this.props.onSubmit && this.props.onSubmit(value);
+  }
+
+  setValue (value) {
+    this.setState({
+      value
+    });
+  }
+}
diff --git a/js/src/ui/Form/InputAddress/index.js b/js/src/ui/Form/InputAddress/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..b0bb94c9480e8af56c5dc0d9c3bf06afeff2ae1f
--- /dev/null
+++ b/js/src/ui/Form/InputAddress/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './inputAddress';
diff --git a/js/src/ui/Form/InputAddress/inputAddress.css b/js/src/ui/Form/InputAddress/inputAddress.css
new file mode 100644
index 0000000000000000000000000000000000000000..d3ac9678ecf0b60f17c97c24d99b07e3f0328828
--- /dev/null
+++ b/js/src/ui/Form/InputAddress/inputAddress.css
@@ -0,0 +1,28 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.container {
+  position: relative;
+}
+
+.input input {
+  padding-left: 48px !important;
+}
+
+.icon {
+  position: absolute;
+  top: 35px;
+}
diff --git a/js/src/ui/Form/InputAddress/inputAddress.js b/js/src/ui/Form/InputAddress/inputAddress.js
new file mode 100644
index 0000000000000000000000000000000000000000..37025c1c8a94f91c1f7dfe647297aa73eecfa907
--- /dev/null
+++ b/js/src/ui/Form/InputAddress/inputAddress.js
@@ -0,0 +1,97 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import Input from '../Input';
+import IdentityIcon from '../../IdentityIcon';
+
+import styles from './inputAddress.css';
+
+class InputAddress extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    error: PropTypes.string,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+    value: PropTypes.string,
+    accountsInfo: PropTypes.object,
+    tokens: PropTypes.object,
+    text: PropTypes.bool,
+    onChange: PropTypes.func,
+    onSubmit: PropTypes.func
+  };
+
+  render () {
+    const { className, disabled, error, label, hint, value, text, onChange, onSubmit, accountsInfo, tokens } = this.props;
+    const classes = `${styles.input} ${className}`;
+    const account = accountsInfo[value] || tokens[value];
+    const hasAccount = account && !account.meta.deleted;
+
+    return (
+      <div className={ styles.container }>
+        <Input
+          className={ classes }
+          disabled={ disabled }
+          label={ label }
+          hint={ hint }
+          error={ error }
+          value={ text && hasAccount ? account.name : value }
+          onChange={ onChange }
+          onSubmit={ onSubmit } />
+        { this.renderIcon() }
+      </div>
+    );
+  }
+
+  renderIcon () {
+    const { value } = this.props;
+
+    if (!value || !value.length) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.icon }>
+        <IdentityIcon
+          inline center
+          address={ value } />
+      </div>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { accountsInfo } = state.personal;
+  const { tokens } = state.balances;
+
+  return {
+    accountsInfo,
+    tokens
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(InputAddress);
diff --git a/js/src/ui/Form/InputAddressSelect/index.js b/js/src/ui/Form/InputAddressSelect/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..19493b1cea22f1f4e005261a426b75342907f469
--- /dev/null
+++ b/js/src/ui/Form/InputAddressSelect/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './inputAddressSelect';
diff --git a/js/src/ui/Form/InputAddressSelect/inputAddressSelect.css b/js/src/ui/Form/InputAddressSelect/inputAddressSelect.css
new file mode 100644
index 0000000000000000000000000000000000000000..0211ef568a09a5d684473b4a94c4e6e791801d9d
--- /dev/null
+++ b/js/src/ui/Form/InputAddressSelect/inputAddressSelect.css
@@ -0,0 +1,31 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.inputselect {
+  position: relative;
+}
+
+.inputselect svg {
+  padding-right: 84px;
+}
+
+.toggle {
+  position: absolute !important;
+  top: 38px;
+  right: 0;
+  display: inline-block !important;
+  width: auto !important;
+}
diff --git a/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js b/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js
new file mode 100644
index 0000000000000000000000000000000000000000..e2c5e8a1dd13ecb78e1e62ce7f17d3cb29f34ae0
--- /dev/null
+++ b/js/src/ui/Form/InputAddressSelect/inputAddressSelect.js
@@ -0,0 +1,127 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Toggle } from 'material-ui';
+
+import AddressSelect from '../AddressSelect';
+import InputAddress from '../InputAddress';
+
+import styles from './inputAddressSelect.css';
+
+class InputAddressSelect extends Component {
+  static propTypes = {
+    accounts: PropTypes.object,
+    contacts: PropTypes.object,
+    disabled: PropTypes.bool,
+    editing: PropTypes.bool,
+    error: PropTypes.string,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+    value: PropTypes.string,
+    tokens: PropTypes.object,
+    onChange: PropTypes.func
+  };
+
+  state = {
+    editing: this.props.editing || false,
+    entries: []
+  }
+
+  render () {
+    const { editing } = this.state;
+
+    return (
+      <div className={ styles.inputselect }>
+        { editing ? this.renderInput() : this.renderSelect() }
+        <Toggle
+          className={ styles.toggle }
+          label='Edit'
+          labelPosition='right'
+          toggled={ editing }
+          onToggle={ this.onToggle } />
+      </div>
+    );
+  }
+
+  renderInput () {
+    const { disabled, error, hint, label, value, tokens } = this.props;
+
+    return (
+      <InputAddress
+        disabled={ disabled }
+        error={ error }
+        hint={ hint }
+        label={ label }
+        value={ value }
+        tokens={ tokens }
+        onChange={ this.onChangeInput } />
+    );
+  }
+
+  renderSelect () {
+    const { accounts, contacts, disabled, error, hint, label, value, tokens } = this.props;
+
+    return (
+      <AddressSelect
+        accounts={ accounts }
+        contacts={ contacts }
+        disabled={ disabled }
+        label={ label }
+        hint={ hint }
+        error={ error }
+        value={ value }
+        tokens={ tokens }
+        onChange={ this.onChangeSelect } />
+    );
+  }
+
+  onToggle = () => {
+    const { editing } = this.state;
+
+    this.setState({
+      editing: !editing
+    });
+  }
+
+  onChangeInput = (event, value) => {
+    this.props.onChange(event, value);
+  }
+
+  onChangeSelect = (event, value) => {
+    this.props.onChange(event, value);
+  }
+}
+
+function mapStateToProps (state) {
+  const { accounts, contacts } = state.personal;
+
+  return {
+    accounts,
+    contacts
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(InputAddressSelect);
diff --git a/js/src/ui/Form/InputInline/index.js b/js/src/ui/Form/InputInline/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e2a1886bebf1e559dd9c9235b750aaf008ee1578
--- /dev/null
+++ b/js/src/ui/Form/InputInline/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './inputInline';
diff --git a/js/src/ui/Form/InputInline/inputInline.css b/js/src/ui/Form/InputInline/inputInline.css
new file mode 100644
index 0000000000000000000000000000000000000000..fc320a3cadd2dace6e541c6037245740cd641aff
--- /dev/null
+++ b/js/src/ui/Form/InputInline/inputInline.css
@@ -0,0 +1,19 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.inlineedit {
+  cursor: pointer;
+}
diff --git a/js/src/ui/Form/InputInline/inputInline.js b/js/src/ui/Form/InputInline/inputInline.js
new file mode 100644
index 0000000000000000000000000000000000000000..bdf5102f0850f7ef5fdd42a2cff3e3c43cc7f089
--- /dev/null
+++ b/js/src/ui/Form/InputInline/inputInline.js
@@ -0,0 +1,94 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import Input from '../Input';
+
+import styles from './inputInline.css';
+
+export default class InputInline extends Component {
+  static propTypes = {
+    error: PropTypes.string,
+    hint: PropTypes.string,
+    label: PropTypes.string,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    onSubmit: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    type: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.number, PropTypes.string
+    ]),
+    static: PropTypes.oneOfType([
+      PropTypes.node, PropTypes.string
+    ])
+  }
+
+  state = {
+    editing: false
+  }
+
+  render () {
+    const { editing } = this.state;
+    const { error, label, hint, type, value } = this.props;
+
+    if (!editing) {
+      return (
+        <div
+          className={ styles.inlineedit }
+          onClick={ this.onToggle }>
+          { this.props.static || value }
+        </div>
+      );
+    }
+
+    return (
+      <Input
+        error={ error }
+        label={ label }
+        hint={ hint }
+        type={ type }
+        value={ value }
+        onBlur={ this.onBlur }
+        onChange={ this.props.onChange }
+        onKeyDown={ this.onKeyDown }
+        onSubmit={ this.props.onSubmit } />
+    );
+  }
+
+  onBlur = () => {
+    this.onToggle();
+
+    if (this.props.onBlur) {
+      this.props.onBlur();
+    }
+  }
+
+  onToggle = () => {
+    this.setState({
+      editing: !this.state.editing
+    });
+  }
+
+  onKeyDown = (event) => {
+    if (event.keyCode === 13) {
+      this.onToggle();
+    }
+
+    this.props.onKeyDown && this.props.onKeyDown(event);
+  }
+}
diff --git a/js/src/ui/Form/Select/index.js b/js/src/ui/Form/Select/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..471dad14af320b229f299bf179406b2dbfe2d5b4
--- /dev/null
+++ b/js/src/ui/Form/Select/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './select';
diff --git a/js/src/ui/Form/Select/select.js b/js/src/ui/Form/Select/select.js
new file mode 100644
index 0000000000000000000000000000000000000000..cb879e3f7d3f8eff61823b4f7e1b694edae25bbe
--- /dev/null
+++ b/js/src/ui/Form/Select/select.js
@@ -0,0 +1,71 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { SelectField } from 'material-ui';
+
+// TODO: duplicated in Input
+const UNDERLINE_DISABLED = {
+  borderColor: 'rgba(255, 255, 255, 0.298039)' // 'transparent' // 'rgba(255, 255, 255, 0.298039)'
+};
+
+const UNDERLINE_NORMAL = {
+  borderBottom: 'solid 2px'
+};
+
+const NAME_ID = ' ';
+
+export default class Select extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    error: PropTypes.string,
+    hint: PropTypes.string,
+    label: PropTypes.string,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    type: PropTypes.string,
+    value: PropTypes.any
+  }
+
+  render () {
+    const { disabled, error, label, hint, value, children, className, onBlur, onChange, onKeyDown } = this.props;
+
+    return (
+      <SelectField
+        className={ className }
+        autoComplete='off'
+        disabled={ disabled }
+        errorText={ error }
+        floatingLabelFixed
+        floatingLabelText={ label }
+        fullWidth
+        hintText={ hint }
+        name={ NAME_ID }
+        id={ NAME_ID }
+        underlineDisabledStyle={ UNDERLINE_DISABLED }
+        underlineStyle={ UNDERLINE_NORMAL }
+        value={ value }
+        onBlur={ onBlur }
+        onChange={ onChange }
+        onKeyDown={ onKeyDown }>
+        { children }
+      </SelectField>
+    );
+  }
+}
diff --git a/js/src/ui/Form/form.css b/js/src/ui/Form/form.css
new file mode 100644
index 0000000000000000000000000000000000000000..4a4be1002fe6a39965163c717abdbae6937c7d81
--- /dev/null
+++ b/js/src/ui/Form/form.css
@@ -0,0 +1,33 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.form {
+  margin-top: -1em;
+}
+
+.autofill {
+  height: 0;
+  width: 1px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+}
+
+:root .form input:-webkit-autofill {
+  display: none;
+  opacity: 0;
+}
diff --git a/js/src/ui/Form/form.js b/js/src/ui/Form/form.js
new file mode 100644
index 0000000000000000000000000000000000000000..930f3c51d17dcf5fb5a718c4ff1af7f78b29293d
--- /dev/null
+++ b/js/src/ui/Form/form.js
@@ -0,0 +1,40 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './form.css';
+
+export default class Form extends Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render () {
+    // HACK: hidden inputs to disable Chrome's autocomplete
+    return (
+      <form
+        autoComplete='new-password'
+        className={ styles.form }>
+        <div className={ styles.autofill }>
+          <input type='text' name='fakeusernameremembered' />
+          <input type='password' name='fakepasswordremembered' />
+        </div>
+        { this.props.children }
+      </form>
+    );
+  }
+}
diff --git a/js/src/ui/Form/index.js b/js/src/ui/Form/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..30dba8d14f2464be70d05345e600ac811b0ad062
--- /dev/null
+++ b/js/src/ui/Form/index.js
@@ -0,0 +1,34 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import AddressSelect from './AddressSelect';
+import FormWrap from './FormWrap';
+import Input from './Input';
+import InputAddress from './InputAddress';
+import InputAddressSelect from './InputAddressSelect';
+import InputInline from './InputInline';
+import Select from './Select';
+
+export default from './form';
+export {
+  AddressSelect,
+  FormWrap,
+  Input,
+  InputAddress,
+  InputAddressSelect,
+  InputInline,
+  Select
+};
diff --git a/js/src/ui/IdentityIcon/identityIcon.css b/js/src/ui/IdentityIcon/identityIcon.css
new file mode 100644
index 0000000000000000000000000000000000000000..34da4ebebd8ff4290fc0230ea8b72c61dc61a80a
--- /dev/null
+++ b/js/src/ui/IdentityIcon/identityIcon.css
@@ -0,0 +1,52 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.icon {
+  border-radius: 50%;
+  margin: 0;
+}
+
+.center {
+  text-align: center;
+}
+
+.left {
+  float: left;
+  text-align: left;
+  margin-right: 1em;
+}
+
+.right {
+  float: right;
+  text-align: right;
+}
+
+.padded {
+  margin: 1em 0 0 0;
+}
+
+.inline,
+.tiny {
+  display: inline-block;
+  margin-right: 0.75em;
+}
+
+.button {
+  display: inline;
+  width: 24px;
+  height: 24px;
+  margin: 6px 0.25em 0 12px;
+}
diff --git a/js/src/ui/IdentityIcon/identityIcon.js b/js/src/ui/IdentityIcon/identityIcon.js
new file mode 100644
index 0000000000000000000000000000000000000000..928a340a7371e3bb78e5d9494151b47e3f350b61
--- /dev/null
+++ b/js/src/ui/IdentityIcon/identityIcon.js
@@ -0,0 +1,136 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import ContractIcon from 'material-ui/svg-icons/action/code';
+
+import styles from './identityIcon.css';
+
+class IdentityIcon extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    address: PropTypes.string,
+    button: PropTypes.bool,
+    className: PropTypes.string,
+    center: PropTypes.bool,
+    padded: PropTypes.bool,
+    inline: PropTypes.bool,
+    tiny: PropTypes.bool,
+    images: PropTypes.object.isRequired
+  }
+
+  state = {
+    iconsrc: ''
+  }
+
+  componentDidMount () {
+    this.updateIcon(this.props.address, this.props.images);
+  }
+
+  componentWillReceiveProps (newProps) {
+    const sameAddress = newProps.address === this.props.address;
+    const sameImages = Object.keys(newProps.images).length === Object.keys(this.props.images).length;
+
+    if (sameAddress && sameImages) {
+      return;
+    }
+
+    this.updateIcon(newProps.address, newProps.images);
+  }
+
+  updateIcon (_address, images) {
+    const { api } = this.context;
+    const { button, inline, tiny } = this.props;
+    const iconsrc = images[_address];
+
+    if (iconsrc) {
+      this.setState({ iconsrc });
+      return;
+    }
+
+    let scale = 7;
+    if (tiny) {
+      scale = 2;
+    } else if (button) {
+      scale = 3;
+    } else if (inline) {
+      scale = 4;
+    }
+
+    this.setState({
+      iconsrc: api.util.createIdentityImg(_address, scale)
+    });
+  }
+
+  render () {
+    const { address, button, className, center, inline, padded, tiny } = this.props;
+    const { iconsrc } = this.state;
+    const classes = [
+      styles.icon,
+      tiny ? styles.tiny : '',
+      button ? styles.button : '',
+      center ? styles.center : styles.left,
+      inline ? styles.inline : '',
+      padded ? styles.padded : '',
+      className
+    ].join(' ');
+
+    let size = '56px';
+    if (tiny) {
+      size = '16px';
+    } else if (button) {
+      size = '24px';
+    } else if (inline) {
+      size = '32px';
+    }
+
+    if (!address) {
+      return (
+        <ContractIcon
+          className={ classes }
+          style={ { width: size, height: size, background: '#eee' } } />
+      );
+    }
+
+    return (
+      <img
+        className={ classes }
+        src={ iconsrc }
+        width={ size }
+        height={ size } />
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { images } = state;
+
+  return { images };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(IdentityIcon);
diff --git a/js/src/ui/IdentityIcon/index.js b/js/src/ui/IdentityIcon/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..76c107bfb7540f707a9b2665aac9b52f9d7590fa
--- /dev/null
+++ b/js/src/ui/IdentityIcon/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './identityIcon';
diff --git a/js/src/ui/IdentityName/identityName.js b/js/src/ui/IdentityName/identityName.js
new file mode 100644
index 0000000000000000000000000000000000000000..ca56bcacff5a41661bda20469a40032e36cb88cb
--- /dev/null
+++ b/js/src/ui/IdentityName/identityName.js
@@ -0,0 +1,78 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+class IdentityName extends Component {
+  static propTypes = {
+    address: PropTypes.string,
+    accountsInfo: PropTypes.object,
+    tokens: PropTypes.object,
+    empty: PropTypes.bool,
+    shorten: PropTypes.bool,
+    unknown: PropTypes.bool
+  }
+
+  render () {
+    const { address, accountsInfo, tokens, empty, shorten, unknown } = this.props;
+    const account = accountsInfo[address] || tokens[address];
+    const hasAccount = account && (!account.meta || !account.meta.deleted);
+
+    if (!hasAccount && empty) {
+      return null;
+    }
+
+    const addressFallback = shorten ? this.formatHash(address) : address;
+    const fallback = unknown ? 'UNNAMED' : addressFallback;
+    const isUuid = hasAccount && account.name === account.uuid;
+    const name = hasAccount && !isUuid
+      ? account.name.toUpperCase()
+      : fallback;
+
+    return (
+      <span>{ name }</span>
+    );
+  }
+
+  formatHash (hash) {
+    if (!hash || hash.length <= 16) {
+      return hash;
+    }
+
+    return `${hash.substr(2, 6)}...${hash.slice(-6)}`;
+  }
+}
+
+function mapStateToProps (state) {
+  const { accountsInfo } = state.personal;
+  const { tokens } = state.balances;
+
+  return {
+    accountsInfo,
+    tokens
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(IdentityName);
diff --git a/js/src/ui/IdentityName/index.js b/js/src/ui/IdentityName/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3774b0e527871d36b4fb313a2d8bbb66ee52f795
--- /dev/null
+++ b/js/src/ui/IdentityName/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './identityName';
diff --git a/js/src/ui/MethodDecoding/index.js b/js/src/ui/MethodDecoding/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..1606857edab51ce31a6299013776cf5e8606afa5
--- /dev/null
+++ b/js/src/ui/MethodDecoding/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './methodDecoding';
diff --git a/js/src/ui/MethodDecoding/methodDecoding.css b/js/src/ui/MethodDecoding/methodDecoding.css
new file mode 100644
index 0000000000000000000000000000000000000000..175ed965e021794c7e2c7e4be977f5d782524fe5
--- /dev/null
+++ b/js/src/ui/MethodDecoding/methodDecoding.css
@@ -0,0 +1,75 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+}
+
+.details,
+.gasDetails {
+  color: #aaa;
+}
+
+.gasDetails {
+  padding-top: 1em;
+  font-size: 0.75em;
+  line-height: 2em;
+  opacity: 0.5;
+}
+
+.description {
+  line-height: 2em;
+  padding-bottom: 0.5em;
+}
+
+.name,
+.highlight {
+  color: white;
+  padding: 0.25em;
+}
+
+.name,
+.inputs,
+.highlight {
+}
+
+.inputs {
+  padding-left: 2em;
+}
+
+.input {
+  margin-top: -16px;
+  font-family: inherit !important;
+}
+
+.inputs img {
+  position: absolute;
+  top: -16px;
+}
+
+.etherValue,
+.tokenValue {
+}
+
+.address {
+  display: inline-block;
+  position: relative;
+}
+
+.identityicon {
+  margin-bottom: -10px;
+  margin-right: 0.5em;
+}
diff --git a/js/src/ui/MethodDecoding/methodDecoding.js b/js/src/ui/MethodDecoding/methodDecoding.js
new file mode 100644
index 0000000000000000000000000000000000000000..741716428ba177abd6c853576dc175052700a366
--- /dev/null
+++ b/js/src/ui/MethodDecoding/methodDecoding.js
@@ -0,0 +1,349 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import Contracts from '../../contracts';
+import IdentityIcon from '../IdentityIcon';
+import IdentityName from '../IdentityName';
+import { Input, InputAddress } from '../Form';
+
+import styles from './methodDecoding.css';
+
+const CONTRACT_CREATE = '0x60606040';
+const TOKEN_METHODS = {
+  '0xa9059cbb': 'transfer(to,value)'
+};
+
+class Method extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    tokens: PropTypes.object,
+    transaction: PropTypes.object,
+    historic: PropTypes.bool
+  }
+
+  state = {
+    method: null,
+    methodName: null,
+    methodInputs: null,
+    methodParams: null,
+    methodSignature: null,
+    token: null,
+    isContract: false,
+    isDeploy: false,
+    isReceived: false
+  }
+
+  componentDidMount () {
+    const { transaction } = this.props;
+
+    this.lookup(transaction);
+  }
+
+  componentWillReceiveProps (newProps) {
+    const { transaction } = this.props;
+
+    if (newProps.transaction === transaction) {
+      return;
+    }
+
+    this.lookup(transaction);
+  }
+
+  render () {
+    const { transaction } = this.props;
+
+    if (!transaction) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.container }>
+        { this.renderAction() }
+        { this.renderGas() }
+      </div>
+    );
+  }
+
+  renderGas () {
+    const { historic, transaction } = this.props;
+    const { gas, gasPrice } = transaction;
+    const gasValue = gas.mul(gasPrice);
+
+    return (
+      <div className={ styles.gasDetails }>
+        { historic ? 'Used' : 'Will use' } <span className={ styles.highlight }>{ gas.toFormat(0) } gas ({ gasPrice.div(1000000).toFormat(0) }M/<small>ETH</small>)</span> for a total transaction cost of <span className={ styles.highlight }>{ this.renderEtherValue(gasValue) }</span>
+      </div>
+    );
+  }
+
+  renderAction () {
+    const { methodName, methodInputs, methodSignature, token, isDeploy, isReceived } = this.state;
+
+    if (isDeploy) {
+      return this.renderDeploy();
+    }
+
+    if (methodSignature) {
+      if (token && TOKEN_METHODS[methodSignature] && methodInputs) {
+        return this.renderTokenAction();
+      }
+
+      return methodName
+        ? this.renderSignatureMethod()
+        : this.renderUnknownMethod();
+    }
+
+    return isReceived
+      ? this.renderValueReceipt()
+      : this.renderValueTransfer();
+  }
+
+  renderTokenAction () {
+    const { historic } = this.props;
+    const { methodSignature, methodInputs } = this.state;
+    const [to, value] = methodInputs;
+    const address = to.value;
+
+    switch (TOKEN_METHODS[methodSignature]) {
+      case 'transfer(to,value)':
+      default:
+        return (
+          <div className={ styles.details }>
+            { historic ? 'Transferred' : 'Will transfer' } <span className={ styles.highlight }>{ this.renderTokenValue(value.value) }</span> to <span className={ styles.highlight }>{ this.renderAddressName(address) }</span>.
+          </div>
+        );
+    }
+  }
+
+  renderDeploy () {
+    const { historic, transaction } = this.props;
+
+    if (!historic) {
+      return (
+        <div className={ styles.details }>
+          Will deploy a contract.
+        </div>
+      );
+    }
+
+    return (
+      <div className={ styles.details }>
+        Deployed a contract at address <span className={ styles.highlight }>{ this.renderAddressName(transaction.creates, false) }</span>.
+      </div>
+    );
+  }
+
+  renderValueReceipt () {
+    const { historic, transaction } = this.props;
+    const { isContract } = this.state;
+
+    return (
+      <div className={ styles.details }>
+        { historic ? 'Received' : 'Will receive' } <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span> from { isContract ? 'the contract' : '' } <span className={ styles.highlight }>{ this.renderAddressName(transaction.from) }</span>
+      </div>
+    );
+  }
+
+  renderValueTransfer () {
+    const { historic, transaction } = this.props;
+    const { isContract } = this.state;
+
+    return (
+      <div className={ styles.details }>
+        { historic ? 'Transferred' : 'Will transfer' } <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span> to { isContract ? 'the contract' : '' } <span className={ styles.highlight }>{ this.renderAddressName(transaction.to) }</span>
+      </div>
+    );
+  }
+
+  renderSignatureMethod () {
+    const { historic, transaction } = this.props;
+    const { methodName } = this.state;
+
+    return (
+      <div className={ styles.details }>
+        <div className={ styles.description }>
+          { historic ? 'Executed' : 'Will execute' } the <span className={ styles.name }>{ methodName }</span> function on the contract <span className={ styles.highlight }>{ this.renderAddressName(transaction.to) }</span>, transferring <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span>, passing the following parameters:
+        </div>
+        <div className={ styles.inputs }>
+          { this.renderInputs() }
+        </div>
+      </div>
+    );
+  }
+
+  renderUnknownMethod () {
+    const { historic, transaction } = this.props;
+
+    return (
+      <div className={ styles.details }>
+        { historic ? 'Executed' : 'Will execute' } <span className={ styles.name }>an unknown/unregistered</span> method on the contract <span className={ styles.highlight }>{ this.renderAddressName(transaction.to) }</span>, transferring <span className={ styles.highlight }>{ this.renderEtherValue(transaction.value) }</span>.
+      </div>
+    );
+  }
+
+  renderInputs () {
+    const { methodInputs } = this.state;
+
+    return methodInputs.map((input, index) => {
+      switch (input.type) {
+        case 'address':
+          return (
+            <InputAddress
+              disabled
+              text
+              key={ index }
+              className={ styles.input }
+              value={ input.value }
+              label={ input.type } />
+          );
+
+        default:
+          return (
+            <Input
+              disabled
+              key={ index }
+              className={ styles.input }
+              value={ this.renderValue(input.value) }
+              label={ input.type } />
+          );
+      }
+    });
+  }
+
+  renderValue (value) {
+    const { api } = this.context;
+
+    if (api.util.isInstanceOf(value, BigNumber)) {
+      return value.toFormat(0);
+    } else if (api.util.isArray(value)) {
+      return api.util.bytesToHex(value);
+    }
+
+    return value.toString();
+  }
+
+  renderTokenValue (value) {
+    const { token } = this.state;
+
+    return (
+      <span className={ styles.tokenValue }>
+        { value.div(token.format).toFormat(5) }<small>{ token.tag }</small>
+      </span>
+    );
+  }
+
+  renderEtherValue (value) {
+    const { api } = this.context;
+    const ether = api.util.fromWei(value);
+
+    return (
+      <span className={ styles.etherValue }>
+        { ether.toFormat(5) }<small>ETH</small>
+      </span>
+    );
+  }
+
+  renderAddressName (address, withName = true) {
+    return (
+      <span className={ styles.address }>
+        <IdentityIcon center inline address={ address } className={ styles.identityicon } />
+        { withName ? <IdentityName address={ address } /> : address }
+      </span>
+    );
+  }
+
+  lookup (transaction) {
+    const { api } = this.context;
+    const { address, tokens } = this.props;
+
+    if (!transaction) {
+      return;
+    }
+
+    const isReceived = transaction.to === address;
+    const token = (tokens || {})[isReceived ? transaction.from : transaction.to];
+    this.setState({ token, isReceived });
+
+    if (!transaction.input) {
+      return;
+    }
+
+    const { signature, paramdata } = api.util.decodeCallData(transaction.input);
+    this.setState({ methodSignature: signature, methodParams: paramdata });
+
+    if (!signature || signature === CONTRACT_CREATE || transaction.creates) {
+      this.setState({ isDeploy: true });
+      return;
+    }
+
+    api.eth
+      .getCode(isReceived ? transaction.from : transaction.to)
+      .then((code) => {
+        if (code && code !== '0x') {
+          this.setState({ isContract: true });
+        }
+
+        return Contracts.get().signatureReg.lookup(signature);
+      }).then((method) => {
+        let methodInputs = null;
+        let methodName = null;
+
+        if (method && method.length) {
+          const abi = api.util.methodToAbi(method);
+
+          methodName = abi.name;
+          methodInputs = api.util
+            .decodeMethodInput(abi, paramdata)
+            .map((value, index) => {
+              const type = abi.inputs[index].type;
+
+              return { type, value };
+            });
+        }
+
+        this.setState({ method, methodName, methodInputs });
+      })
+      .catch((error) => {
+        console.error('lookup', error);
+      });
+  }
+}
+
+function mapStateToProps (state) {
+  const { tokens } = state.balances;
+
+  return {
+    tokens
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Method);
diff --git a/js/src/ui/Modal/Busy/busy.css b/js/src/ui/Modal/Busy/busy.css
new file mode 100644
index 0000000000000000000000000000000000000000..ea2cb948580d69c546663527afd5a1a0c1a48020
--- /dev/null
+++ b/js/src/ui/Modal/Busy/busy.css
@@ -0,0 +1,27 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.center {
+  text-align: center;
+}
+
+.title {
+}
+
+.state {
+  margin-top: 1em;
+}
diff --git a/js/src/ui/Modal/Busy/busy.js b/js/src/ui/Modal/Busy/busy.js
new file mode 100644
index 0000000000000000000000000000000000000000..6898d3e1fade32053383088a8eadb3f95051dcaf
--- /dev/null
+++ b/js/src/ui/Modal/Busy/busy.js
@@ -0,0 +1,39 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './busy.css';
+
+export default class Busy extends Component {
+  static propTypes = {
+    title: PropTypes.string,
+    state: PropTypes.string,
+    children: PropTypes.node
+  }
+
+  render () {
+    const { children, title, state } = this.props;
+
+    return (
+      <div className={ styles.center }>
+        <div className={ styles.title }>{ title }</div>
+        <div className={ styles.state }>{ state }</div>
+        { children }
+      </div>
+    );
+  }
+}
diff --git a/js/src/ui/Modal/Busy/index.js b/js/src/ui/Modal/Busy/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..27c097eeae73e3d773c334d495a26b482321be85
--- /dev/null
+++ b/js/src/ui/Modal/Busy/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './busy';
diff --git a/js/src/ui/Modal/Completed/completed.css b/js/src/ui/Modal/Completed/completed.css
new file mode 100644
index 0000000000000000000000000000000000000000..e843e7c664313881ee8fc0079f8937f14961abc4
--- /dev/null
+++ b/js/src/ui/Modal/Completed/completed.css
@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.body {
+  text-align: center;
+}
+
+.body>div+div {
+  margin-top: 1em;
+}
diff --git a/js/src/ui/Modal/Completed/completed.js b/js/src/ui/Modal/Completed/completed.js
new file mode 100644
index 0000000000000000000000000000000000000000..de6195621368726c6a9484a93f030584fa7a7c5d
--- /dev/null
+++ b/js/src/ui/Modal/Completed/completed.js
@@ -0,0 +1,35 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './completed.css';
+
+export default class Completed extends Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render () {
+    const { children } = this.props;
+
+    return (
+      <div className={ styles.body }>
+        { children }
+      </div>
+    );
+  }
+}
diff --git a/js/src/ui/Modal/Completed/index.js b/js/src/ui/Modal/Completed/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3e79033d81cba698d169306454e64babd5a2bf14
--- /dev/null
+++ b/js/src/ui/Modal/Completed/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './completed';
diff --git a/js/src/ui/Modal/Title/index.js b/js/src/ui/Modal/Title/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..8ddd6868351c9dd42398d26c56c377ab82dab113
--- /dev/null
+++ b/js/src/ui/Modal/Title/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './title';
diff --git a/js/src/ui/Modal/Title/title.js b/js/src/ui/Modal/Title/title.js
new file mode 100644
index 0000000000000000000000000000000000000000..58db8487a359f51f8cdb6ecc16642662987d8c2b
--- /dev/null
+++ b/js/src/ui/Modal/Title/title.js
@@ -0,0 +1,92 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { LinearProgress } from 'material-ui';
+import { Step, Stepper, StepLabel } from 'material-ui/Stepper';
+
+import styles from '../modal.css';
+
+export default class Title extends Component {
+  static propTypes = {
+    busy: PropTypes.bool,
+    current: PropTypes.number,
+    steps: PropTypes.array,
+    waiting: PropTypes.array,
+    title: React.PropTypes.oneOfType([
+      PropTypes.node, PropTypes.string
+    ])
+  }
+
+  render () {
+    const { current, steps, title } = this.props;
+
+    return (
+      <div className={ styles.title }>
+        <h3>{ steps ? steps[current] : title }</h3>
+        { this.renderSteps() }
+        { this.renderWaiting() }
+      </div>
+    );
+  }
+
+  renderSteps () {
+    const { current, steps } = this.props;
+
+    if (!steps) {
+      return;
+    }
+
+    return (
+      <div className={ styles.steps }>
+        <Stepper
+          activeStep={ current }>
+          { this.renderTimeline() }
+        </Stepper>
+      </div>
+    );
+  }
+
+  renderTimeline () {
+    const { steps } = this.props;
+
+    return steps.map((label) => {
+      return (
+        <Step
+          key={ label }>
+          <StepLabel>
+            { label }
+          </StepLabel>
+        </Step>
+      );
+    });
+  }
+
+  renderWaiting () {
+    const { current, busy, waiting } = this.props;
+    const isWaiting = busy || (waiting || []).includes(current);
+
+    if (!isWaiting) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.waiting }>
+        <LinearProgress />
+      </div>
+    );
+  }
+}
diff --git a/js/src/ui/Modal/index.js b/js/src/ui/Modal/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..232d94eb2243e8ffacbf7e6a88935ef0a6bc55df
--- /dev/null
+++ b/js/src/ui/Modal/index.js
@@ -0,0 +1,25 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Busy from './Busy';
+import Completed from './Completed';
+
+export default from './modal';
+
+export {
+  Busy,
+  Completed
+};
diff --git a/js/src/ui/Modal/modal.css b/js/src/ui/Modal/modal.css
new file mode 100644
index 0000000000000000000000000000000000000000..8361d4d96adf490dde12c82b9135388bb03356c5
--- /dev/null
+++ b/js/src/ui/Modal/modal.css
@@ -0,0 +1,70 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.actions {
+  background: rgba(0, 0, 0, 0.25) !important;
+}
+
+.actions button:not([disabled]) {
+  color: white !important;
+}
+
+.actions button:not([disabled]) svg {
+  fill: white !important;
+}
+
+.body {
+  padding: 0 !important;
+}
+
+.dialog {
+}
+
+.content {
+  transform: translate(0px, 0px) !important;
+}
+
+.content>div {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+
+.content div {
+  transition: none !important;
+}
+
+.title {
+  padding: 1em;
+  margin-bottom: 0;
+  background: rgba(0, 0, 0, 0.25) !important;
+}
+
+.title h3 {
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.title .steps {
+  margin-bottom: -1em;
+}
+
+.waiting {
+  margin: 1em -1em -1em -1em;
+}
+
+.overlay {
+  background: rgba(255, 255, 255, 0.5) !important;
+  transition: none !important;
+}
diff --git a/js/src/ui/Modal/modal.js b/js/src/ui/Modal/modal.js
new file mode 100644
index 0000000000000000000000000000000000000000..fbdf2a6c18a73f0fcab457627acedb2399848f15
--- /dev/null
+++ b/js/src/ui/Modal/modal.js
@@ -0,0 +1,106 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Dialog } from 'material-ui';
+
+import Container from '../Container';
+import Title from './Title';
+
+const ACTIONS_STYLE = { borderStyle: 'none' };
+const TITLE_STYLE = { borderStyle: 'none' };
+const DIALOG_STYLE = { paddingTop: '1px' };
+
+import styles from './modal.css';
+
+class Modal extends Component {
+  static contextTypes = {
+    muiTheme: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    actions: PropTypes.node,
+    busy: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    current: PropTypes.number,
+    waiting: PropTypes.array,
+    scroll: PropTypes.bool,
+    steps: PropTypes.array,
+    title: React.PropTypes.oneOfType([
+      PropTypes.node, PropTypes.string
+    ]),
+    visible: PropTypes.bool.isRequired,
+    settings: PropTypes.object.isRequired
+  }
+
+  render () {
+    const { muiTheme } = this.context;
+    const { actions, busy, className, current, children, scroll, steps, waiting, title, visible, settings } = this.props;
+    const contentStyle = muiTheme.parity.getBackgroundStyle(null, settings.backgroundSeed);
+    const header = (
+      <Title
+        current={ current }
+        busy={ busy }
+        waiting={ waiting }
+        steps={ steps }
+        title={ title } />
+    );
+    const classes = `${styles.dialog} ${className}`;
+
+    return (
+      <Dialog
+        className={ classes }
+        actions={ actions }
+        actionsContainerStyle={ ACTIONS_STYLE }
+        autoDetectWindowHeight={ false }
+        autoScrollBodyContent={ !!scroll }
+        actionsContainerClassName={ styles.actions }
+        bodyClassName={ styles.body }
+        contentClassName={ styles.content }
+        contentStyle={ contentStyle }
+        modal
+        open={ visible }
+        overlayClassName={ styles.overlay }
+        overlayStyle={ { transition: 'none' } }
+        repositionOnUpdate={ false }
+        style={ DIALOG_STYLE }
+        title={ header }
+        titleStyle={ TITLE_STYLE }>
+        <Container light style={ { transition: 'none' } }>
+          { children }
+        </Container>
+      </Dialog>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { settings } = state;
+
+  return { settings };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Modal);
diff --git a/js/src/ui/Page/index.js b/js/src/ui/Page/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0ddc533d40073a928a6998bc58fc6dd775404677
--- /dev/null
+++ b/js/src/ui/Page/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './page';
diff --git a/js/src/ui/Page/page.css b/js/src/ui/Page/page.css
new file mode 100644
index 0000000000000000000000000000000000000000..81f4e0e685d6958d78abbd8d2f0c1668456a324d
--- /dev/null
+++ b/js/src/ui/Page/page.css
@@ -0,0 +1,23 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.layout {
+  padding: 0.25em;
+}
+
+.layout>div {
+  padding-bottom: 0.25em;
+}
diff --git a/js/src/ui/Page/page.js b/js/src/ui/Page/page.js
new file mode 100644
index 0000000000000000000000000000000000000000..867c3fdf16bd969c4314f0ef6fa4e36a830209a8
--- /dev/null
+++ b/js/src/ui/Page/page.js
@@ -0,0 +1,37 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './page.css';
+
+export default class Page extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node
+  };
+
+  render () {
+    const { className, children } = this.props;
+    const classes = `${styles.layout} ${className}`;
+
+    return (
+      <div className={ classes }>
+        { children }
+      </div>
+    );
+  }
+}
diff --git a/js/src/ui/ParityBackground/index.js b/js/src/ui/ParityBackground/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4c766ac3c1f8d6df3ebed18079fd809c4a2b94ea
--- /dev/null
+++ b/js/src/ui/ParityBackground/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './parityBackground';
diff --git a/js/src/ui/ParityBackground/parityBackground.js b/js/src/ui/ParityBackground/parityBackground.js
new file mode 100644
index 0000000000000000000000000000000000000000..0916d3a85c5c10b72beab9a3011295b656b5822a
--- /dev/null
+++ b/js/src/ui/ParityBackground/parityBackground.js
@@ -0,0 +1,64 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+class ParityBackground extends Component {
+  static contextTypes = {
+    muiTheme: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    gradient: PropTypes.string,
+    seed: PropTypes.any,
+    settings: PropTypes.object.isRequired,
+    onClick: PropTypes.func
+  }
+
+  render () {
+    const { muiTheme } = this.context;
+    const { children, className, gradient, seed, settings, onClick } = this.props;
+    const style = muiTheme.parity.getBackgroundStyle(gradient, seed || settings.backgroundSeed);
+
+    return (
+      <div
+        className={ className }
+        style={ style }
+        onTouchTap={ onClick }>
+        { children }
+      </div>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { settings } = state;
+
+  return { settings };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ParityBackground);
diff --git a/js/src/ui/SignerIcon/index.js b/js/src/ui/SignerIcon/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0a871e6b288f5641472b4f294401eef6116098fa
--- /dev/null
+++ b/js/src/ui/SignerIcon/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './signerIcon';
diff --git a/js/src/ui/SignerIcon/signerIcon.js b/js/src/ui/SignerIcon/signerIcon.js
new file mode 100644
index 0000000000000000000000000000000000000000..6d7cd45e8ac8786230ba6d41a45f4a970c2be2c8
--- /dev/null
+++ b/js/src/ui/SignerIcon/signerIcon.js
@@ -0,0 +1,64 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { keccak_256 } from 'js-sha3'; // eslint-disable-line camelcase
+import ActionFingerprint from 'material-ui/svg-icons/action/fingerprint';
+
+import IdentityIcon from '../IdentityIcon';
+
+class SignerIcon extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    secureToken: PropTypes.string
+  }
+
+  render () {
+    const { className, secureToken } = this.props;
+
+    if (!secureToken) {
+      return (
+        <ActionFingerprint />
+      );
+    }
+
+    const signerSha = keccak_256(secureToken);
+
+    return (
+      <IdentityIcon
+        center
+        className={ className }
+        address={ signerSha } />
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { secureToken } = state.nodeStatus;
+
+  return { secureToken };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SignerIcon);
diff --git a/js/src/ui/Theme/index.js b/js/src/ui/Theme/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ba15b212bff53866a5c1b2e62009a1d6d1523be0
--- /dev/null
+++ b/js/src/ui/Theme/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './theme';
diff --git a/js/src/ui/Theme/theme.js b/js/src/ui/Theme/theme.js
new file mode 100644
index 0000000000000000000000000000000000000000..92a57487ca102192a9398c18a4aaf4282129cf8d
--- /dev/null
+++ b/js/src/ui/Theme/theme.js
@@ -0,0 +1,71 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import GeoPattern from 'geopattern';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
+import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
+
+const lightTheme = getMuiTheme(lightBaseTheme);
+const muiTheme = getMuiTheme(darkBaseTheme);
+
+muiTheme.stepper.textColor = '#eee';
+muiTheme.stepper.disabledTextColor = '#777';
+muiTheme.inkBar.backgroundColor = 'transparent';
+muiTheme.raisedButton.primaryTextColor = 'white';
+muiTheme.snackbar.backgroundColor = 'rgba(255, 30, 30, 0.9)';
+muiTheme.snackbar.textColor = 'rgba(255, 255, 255, 0.75)';
+muiTheme.tabs = lightTheme.tabs;
+muiTheme.tabs.backgroundColor = 'transparent';
+muiTheme.tabs.selectedTextColor = 'white';
+muiTheme.tabs.textColor = 'rgba(255, 255, 255, 0.5)'; // 'rgb(0, 151, 167)';
+muiTheme.textField.floatingLabelColor = 'rgba(255, 255, 255, 0.5)';
+muiTheme.textField.hintColor = 'rgba(255, 255, 255, 0.5)';
+muiTheme.textField.disabledTextColor = muiTheme.textField.textColor;
+muiTheme.toolbar = lightTheme.toolbar;
+muiTheme.toolbar.backgroundColor = 'transparent';
+
+const imageCache = {};
+
+muiTheme.parity = {
+  backgroundSeed: '0x0',
+
+  setBackgroundSeed: (seed) => {
+    muiTheme.parity.backgroundSeed = seed;
+  },
+
+  getBackgroundStyle: (_gradient, _seed) => {
+    const gradient = _gradient || 'rgba(255, 255, 255, 0.25)';
+    const seed = _seed || muiTheme.parity.backgroundSeed;
+    let url;
+
+    if (_seed) {
+      url = GeoPattern.generate(_seed).toDataUrl();
+    } else if (imageCache[seed] && imageCache[seed][gradient]) {
+      url = imageCache[seed][gradient];
+    } else {
+      url = GeoPattern.generate(seed).toDataUrl();
+      imageCache[seed] = imageCache[seed] || {};
+      imageCache[seed][gradient] = url;
+    }
+
+    return {
+      background: `linear-gradient(${gradient}, ${gradient}), ${url}`
+    };
+  }
+};
+
+export default muiTheme;
diff --git a/js/src/ui/Tooltips/Tooltip/index.js b/js/src/ui/Tooltips/Tooltip/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f24757da211e906d6ef8917c407bebcb21969450
--- /dev/null
+++ b/js/src/ui/Tooltips/Tooltip/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './tooltip';
diff --git a/js/src/ui/Tooltips/Tooltip/tooltip.js b/js/src/ui/Tooltips/Tooltip/tooltip.js
new file mode 100644
index 0000000000000000000000000000000000000000..c2718ef067c5c143a79aaf69cc40c26a63fbf6ae
--- /dev/null
+++ b/js/src/ui/Tooltips/Tooltip/tooltip.js
@@ -0,0 +1,117 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { FlatButton } from 'material-ui';
+import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
+
+import { newTooltip, nextTooltip, closeTooltips } from '../actions';
+
+import styles from '../tooltips.css';
+
+let tooltipId = 0;
+
+class Tooltip extends Component {
+  static propTypes = {
+    title: PropTypes.string,
+    text: PropTypes.string,
+    right: PropTypes.bool,
+    currentId: PropTypes.number,
+    maxId: PropTypes.number,
+    className: PropTypes.string,
+    onNewTooltip: PropTypes.func,
+    onNextTooltip: PropTypes.func,
+    onCloseTooltips: PropTypes.func
+  }
+
+  state = {
+    id: tooltipId
+  }
+
+  componentWillMount () {
+    const { onNewTooltip } = this.props;
+
+    onNewTooltip(tooltipId);
+    tooltipId++;
+  }
+
+  render () {
+    const { id } = this.state;
+    const { className, currentId, maxId, right, onCloseTooltips, onNextTooltip } = this.props;
+    const classes = `${styles.box} ${right ? styles.arrowRight : styles.arrowLeft} ${className}`;
+
+    if (id !== currentId) {
+      return null;
+    }
+
+    const buttons = id !== maxId
+      ? [
+        <FlatButton
+          key='skipButton'
+          icon={ <ContentClear /> }
+          label='Skip'
+          onTouchTap={ onCloseTooltips } />,
+        <FlatButton
+          key='nextButton'
+          icon={ <NavigationArrowForward /> }
+          label='Next'
+          onTouchTap={ onNextTooltip } />
+      ] : (
+      <FlatButton
+        icon={ <ActionDoneAll /> }
+        label='Done'
+        onTouchTap={ onCloseTooltips } />
+      );
+
+    return (
+      <div
+        className={ classes }>
+        <div className={ styles.title }>
+          { this.props.title }
+        </div>
+        <div className={ styles.text }>
+          { this.props.text }
+        </div>
+        <div className={ styles.buttons }>
+          { buttons }
+        </div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { currentId, maxId } = state.tooltip;
+
+  return { currentId, maxId };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    onNewTooltip: newTooltip,
+    onNextTooltip: nextTooltip,
+    onCloseTooltips: closeTooltips
+  }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Tooltip);
diff --git a/js/src/ui/Tooltips/actions.js b/js/src/ui/Tooltips/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..fba250fd7fd594eec2ebbc5dda8ea5a2ae0563c3
--- /dev/null
+++ b/js/src/ui/Tooltips/actions.js
@@ -0,0 +1,34 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function newTooltip (newId) {
+  return {
+    type: 'newTooltip',
+    newId
+  };
+}
+
+export function nextTooltip () {
+  return {
+    type: 'nextTooltip'
+  };
+}
+
+export function closeTooltips () {
+  return {
+    type: 'closeTooltips'
+  };
+}
diff --git a/js/src/ui/Tooltips/index.js b/js/src/ui/Tooltips/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..6edea3a3211bc6f19f436d74105748b3cd57bf2c
--- /dev/null
+++ b/js/src/ui/Tooltips/index.js
@@ -0,0 +1,21 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Tooltip from './Tooltip';
+import tooltipReducer from './reducers';
+
+export default from './tooltips';
+export { Tooltip, tooltipReducer };
diff --git a/js/src/ui/Tooltips/reducers.js b/js/src/ui/Tooltips/reducers.js
new file mode 100644
index 0000000000000000000000000000000000000000..4a1d2619b5ebff119c87e8df24b39d302c816373
--- /dev/null
+++ b/js/src/ui/Tooltips/reducers.js
@@ -0,0 +1,69 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const LS_KEY = 'tooltips';
+
+let currentId = -1;
+let maxId = 0;
+
+function closeTooltips (state, action) {
+  window.localStorage.setItem(LS_KEY, '{"state":"off"}');
+
+  currentId = -1;
+
+  return Object.assign({}, state, {
+    currentId
+  });
+}
+
+function newTooltip (state, action) {
+  const { newId } = action;
+
+  maxId = Math.max(newId, maxId);
+
+  return Object.assign({}, state, {
+    currentId,
+    maxId
+  });
+}
+
+function nextTooltip (state, action) {
+  const hideTips = window.localStorage.getItem(LS_KEY);
+
+  currentId = hideTips
+    ? -1
+    : currentId + 1;
+
+  return Object.assign({}, state, {
+    currentId
+  });
+}
+
+export default function tooltipReducer (state = {}, action) {
+  switch (action.type) {
+    case 'newTooltip':
+      return newTooltip(state, action);
+
+    case 'nextTooltip':
+      return nextTooltip(state, action);
+
+    case 'closeTooltips':
+      return closeTooltips(state, action);
+
+    default:
+      return state;
+  }
+}
diff --git a/js/src/ui/Tooltips/tooltips.css b/js/src/ui/Tooltips/tooltips.css
new file mode 100644
index 0000000000000000000000000000000000000000..b5b0f361c203af9cea74da447bc0401fff65f0ed
--- /dev/null
+++ b/js/src/ui/Tooltips/tooltips.css
@@ -0,0 +1,103 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.container {
+  height: 100%;
+  width: 100%;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+  z-index: 499;
+}
+
+.box {
+  position: absolute;
+  background: #663600; /* rgba(48, 48, 48, 0.95); #88b7d5; */
+  border: 4px solid #f80; /* #c2e1f5; */
+  max-width: 450px;
+  border-radius: 0.5em;
+  z-index: 500;
+  opacity: 1;
+  line-height: 1.618em;
+  white-space: normal;
+  opacity: 0.95;
+}
+
+.box:after, .box:before {
+  bottom: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.box:after {
+  border-color: rgba(136, 183, 213, 0);
+  border-bottom-color: #663600; /* rgba(48, 48, 48, 0.95); #88b7d5; */
+  border-width: 20px;
+}
+
+.box:before {
+  border-color: rgba(194, 225, 245, 0);
+  border-bottom-color: #f80; /* #c2e1f5; */
+  border-width: 26px;
+}
+
+.arrowLeft:after, .arrowLeft:before {
+  left: 15%;
+}
+
+.arrowLeft:after {
+  margin-left: -20px;
+}
+
+.arrowLeft:before {
+  margin-left: -26px;
+}
+
+.arrowRight:after, .arrowRight:before {
+  right: 15%;
+}
+
+.arrowRight:after {
+  margin-right: -20px;
+}
+
+.arrowRight:before {
+  margin-right: -26px;
+}
+
+.title {
+  text-transform: uppercase;
+}
+
+.text {
+  padding: 1em;
+}
+
+.buttons {
+  margin: 0;
+  padding: 0 0.5em 0.5em 0;
+  text-align: right;
+}
diff --git a/js/src/ui/Tooltips/tooltips.js b/js/src/ui/Tooltips/tooltips.js
new file mode 100644
index 0000000000000000000000000000000000000000..70160a3245ba0609f246a7018c18af0fcc636ca5
--- /dev/null
+++ b/js/src/ui/Tooltips/tooltips.js
@@ -0,0 +1,66 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { nextTooltip } from './actions';
+
+import styles from './tooltips.css';
+
+class Tooltips extends Component {
+  static propTypes = {
+    currentId: PropTypes.number,
+    closed: PropTypes.bool,
+    onNextTooltip: PropTypes.func
+  }
+
+  componentDidMount () {
+    const { onNextTooltip } = this.props;
+
+    onNextTooltip();
+  }
+
+  render () {
+    const { currentId } = this.props;
+
+    if (currentId === -1) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.overlay } />
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { currentId } = state.tooltip;
+
+  return { currentId };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    onNextTooltip: nextTooltip
+  }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Tooltips);
diff --git a/js/src/ui/TxHash/index.js b/js/src/ui/TxHash/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..eddcbfcbf9bdf2991b11b5721320b5543c6386aa
--- /dev/null
+++ b/js/src/ui/TxHash/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './txHash';
diff --git a/js/src/ui/TxHash/txHash.css b/js/src/ui/TxHash/txHash.css
new file mode 100644
index 0000000000000000000000000000000000000000..c57aef3d4f8a2f10e5b55c0fe2e558c527158c63
--- /dev/null
+++ b/js/src/ui/TxHash/txHash.css
@@ -0,0 +1,41 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.details {
+}
+
+.header {
+}
+
+.hash {
+  padding-top: 1em;
+}
+
+.confirm {
+  padding-top: 1em;
+  opacity: 0.5;
+}
+
+.progressbar {
+  margin: 0.5em !important;
+  width: 30% !important;
+  display: inline-block !important;
+  height: 0.75em !important;
+}
+
+.progressinfo {
+}
diff --git a/js/src/ui/TxHash/txHash.js b/js/src/ui/TxHash/txHash.js
new file mode 100644
index 0000000000000000000000000000000000000000..79714cf9bc0cfbcb4813805cf56d9b5eb45eb18e
--- /dev/null
+++ b/js/src/ui/TxHash/txHash.js
@@ -0,0 +1,135 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { LinearProgress } from 'material-ui';
+
+import styles from './txHash.css';
+
+class TxHash extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    hash: PropTypes.string.isRequired,
+    isTest: PropTypes.bool
+  }
+
+  state = {
+    blockNumber: new BigNumber(0),
+    transaction: null,
+    subscriptionId: null
+  }
+
+  componentDidMount () {
+    const { api } = this.context;
+
+    api.subscribe('eth_blockNumber', this.onBlockNumber).then((subscriptionId) => {
+      this.setState({ subscriptionId });
+    });
+  }
+
+  componentWillUnmount () {
+    const { api } = this.context;
+    const { subscriptionId } = this.state;
+
+    api.unsubscribe('eth_blockNumber', subscriptionId);
+  }
+
+  render () {
+    const { hash, isTest } = this.props;
+    const link = `https://${isTest ? 'testnet.' : ''}etherscan.io/tx/${hash}`;
+
+    return (
+      <div className={ styles.details }>
+        <div className={ styles.header }>
+          The transaction has been posted to the network with a transaction hash of
+        </div>
+        <div className={ styles.hash }>
+          <a href={ link } target='_blank'>{ hash }</a>
+        </div>
+        { this.renderConfirmations() }
+      </div>
+    );
+  }
+
+  renderConfirmations () {
+    const { blockNumber, transaction } = this.state;
+
+    let txBlock = 'Pending';
+    let confirmations = 'No';
+    let value = 0;
+
+    if (transaction && transaction.blockNumber && transaction.blockNumber.gt(0)) {
+      const num = blockNumber.minus(transaction.blockNumber).plus(1);
+      txBlock = `#${transaction.blockNumber.toFormat(0)}`;
+      confirmations = num.toFormat(0);
+      value = num.gt(10) ? 10 : num.toNumber();
+    }
+
+    return (
+      <div className={ styles.confirm }>
+        <LinearProgress
+          className={ styles.progressbar }
+          min={ 0 } max={ 10 } value={ value }
+          color='white'
+          mode='determinate' />
+        <div className={ styles.progressinfo }>
+          { txBlock } / { confirmations } confirmations
+        </div>
+      </div>
+    );
+  }
+
+  onBlockNumber = (error, blockNumber) => {
+    const { api } = this.context;
+    const { hash } = this.props;
+
+    if (error) {
+      return;
+    }
+
+    this.setState({ blockNumber });
+
+    api.eth
+      .getTransactionReceipt(hash)
+      .then((transaction) => {
+        this.setState({ transaction });
+      })
+      .catch((error) => {
+        console.warn('onBlockNumber', error);
+      });
+  }
+}
+
+function mapStateToProps (state) {
+  const { isTest } = state.nodeStatus;
+
+  return { isTest };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TxHash);
diff --git a/js/src/ui/index.js b/js/src/ui/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3a324bcebccfb2a6f878ba5f6c9ff091f1a6473f
--- /dev/null
+++ b/js/src/ui/index.js
@@ -0,0 +1,68 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Actionbar from './Actionbar';
+import Badge from './Badge';
+import Balance from './Balance';
+import Button from './Button';
+import ConfirmDialog from './ConfirmDialog';
+import Container, { Title as ContainerTitle } from './Container';
+import ContextProvider from './ContextProvider';
+import Errors from './Errors';
+import Form, { AddressSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputInline, Select } from './Form';
+import IdentityIcon from './IdentityIcon';
+import IdentityName from './IdentityName';
+import MethodDecoding from './MethodDecoding';
+import Modal, { Busy as BusyStep, Completed as CompletedStep } from './Modal';
+import muiTheme from './Theme';
+import Page from './Page';
+import ParityBackground from './ParityBackground';
+import SignerIcon from './SignerIcon';
+import Tooltips, { Tooltip } from './Tooltips';
+import TxHash from './TxHash';
+
+export {
+  Actionbar,
+  AddressSelect,
+  Badge,
+  Balance,
+  Button,
+  ConfirmDialog,
+  Container,
+  ContainerTitle,
+  ContextProvider,
+  Errors,
+  Form,
+  FormWrap,
+  Input,
+  InputAddress,
+  InputAddressSelect,
+  InputInline,
+  Select,
+  IdentityIcon,
+  IdentityName,
+  MethodDecoding,
+  Modal,
+  BusyStep,
+  CompletedStep,
+  muiTheme,
+  Page,
+  ParityBackground,
+  SignerIcon,
+  Tooltip,
+  Tooltips,
+  TxHash
+};
diff --git a/js/src/util/validation.js b/js/src/util/validation.js
new file mode 100644
index 0000000000000000000000000000000000000000..d6775d237e9cdf68b89ab53afb6082b1bd823256
--- /dev/null
+++ b/js/src/util/validation.js
@@ -0,0 +1,91 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import util from '../api/util';
+
+export const ERRORS = {
+  invalidAddress: 'address is an invalid network address',
+  duplicateAddress: 'the address is already in your address book',
+  invalidChecksum: 'address has failed the checksum formatting',
+  invalidName: 'name should not be blank and longer than 2',
+  invalidAbi: 'abi should be a valid JSON array',
+  invalidCode: 'code should be the compiled hex string'
+};
+
+export function validateAbi (abi, api) {
+  let abiError = null;
+  let abiParsed = null;
+
+  try {
+    abiParsed = JSON.parse(abi);
+
+    if (!api.util.isArray(abiParsed) || !abiParsed.length) {
+      abiError = ERRORS.inavlidAbi;
+    } else {
+      abi = JSON.stringify(abiParsed);
+    }
+  } catch (error) {
+    console.error(error);
+    abiError = ERRORS.invalidAbi;
+  }
+
+  return {
+    abi,
+    abiError,
+    abiParsed
+  };
+}
+
+export function validateAddress (address) {
+  let addressError = null;
+
+  if (!address) {
+    addressError = ERRORS.invalidAddress;
+  } else if (!util.isAddressValid(address)) {
+    addressError = ERRORS.invalidAddress;
+  } else {
+    address = util.toChecksumAddress(address);
+  }
+
+  return {
+    address,
+    addressError
+  };
+}
+
+export function validateCode (code, api) {
+  let codeError = null;
+
+  if (!code.length) {
+    codeError = ERRORS.invalidCode;
+  } else if (!api.util.isHex(code)) {
+    codeError = ERRORS.invalidCode;
+  }
+
+  return {
+    code,
+    codeError
+  };
+}
+
+export function validateName (name) {
+  const nameError = !name || name.length < 2 ? ERRORS.invalidName : null;
+
+  return {
+    name,
+    nameError
+  };
+}
diff --git a/js/src/views/Account/Header/header.css b/js/src/views/Account/Header/header.css
new file mode 100644
index 0000000000000000000000000000000000000000..35ce0a700dbc328543d7e195e7a6467cf3129c30
--- /dev/null
+++ b/js/src/views/Account/Header/header.css
@@ -0,0 +1,43 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.balances {
+  clear: both;
+}
+
+.editicon {
+  margin-left: 0.5em;
+}
+
+.floatleft {
+  float: left;
+  margin-bottom: 0.5em;
+}
+
+.addressline,
+.infoline,
+.uuidline {
+  line-height: 1.618em;
+}
+
+.infoline,
+.uuidline {
+  opacity: 0.25;
+}
+
+.uuidline {
+  display: inline-block;
+}
diff --git a/js/src/views/Account/Header/header.js b/js/src/views/Account/Header/header.js
new file mode 100644
index 0000000000000000000000000000000000000000..d23fd50812b61bac80bc456f05ed87abf087de2c
--- /dev/null
+++ b/js/src/views/Account/Header/header.js
@@ -0,0 +1,121 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName } from '../../../ui';
+
+import styles from './header.css';
+
+export default class Header extends Component {
+  static contextTypes = {
+    api: PropTypes.object
+  }
+
+  static propTypes = {
+    account: PropTypes.object,
+    balance: PropTypes.object,
+    isTest: PropTypes.bool
+  }
+
+  state = {
+    name: null
+  }
+
+  componentWillMount () {
+    this.setName();
+  }
+
+  componentWillReceiveProps () {
+    this.setName();
+  }
+
+  render () {
+    const { account, balance } = this.props;
+    const { address, meta, uuid } = account;
+
+    if (!account) {
+      return null;
+    }
+
+    const uuidText = !uuid
+      ? null
+      : <div className={ styles.uuidline }>uuid: { uuid }</div>;
+
+    return (
+      <Container>
+        <IdentityIcon
+          address={ address } />
+        <div className={ styles.floatleft }>
+          <ContainerTitle title={ <IdentityName address={ address } unknown /> } />
+          <div className={ styles.addressline }>
+            { address }
+          </div>
+          { uuidText }
+          <div className={ styles.infoline }>
+            { meta.description }
+          </div>
+          { this.renderTxCount() }
+        </div>
+        <div className={ styles.balances }>
+          <Balance
+            account={ account }
+            balance={ balance } />
+        </div>
+      </Container>
+    );
+  }
+
+  renderTxCount () {
+    const { isTest, balance } = this.props;
+
+    if (!balance) {
+      return null;
+    }
+
+    const txCount = balance.txCount.sub(isTest ? 0x100000 : 0);
+
+    return (
+      <div className={ styles.infoline }>
+        { txCount.toFormat() } outgoing transactions
+      </div>
+    );
+  }
+
+  onSubmitName = (name) => {
+    const { api } = this.context;
+    const { account } = this.props;
+
+    this.setState({ name }, () => {
+      api.personal
+        .setAccountName(account.address, name)
+        .catch((error) => {
+          console.error(error);
+        });
+    });
+  }
+
+  setName () {
+    const { account } = this.props;
+
+    if (account && account.name !== this.propName) {
+      this.propName = account.name;
+      this.setState({
+        name: account.name
+      });
+    }
+  }
+}
diff --git a/js/src/views/Account/Header/index.js b/js/src/views/Account/Header/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4a51219067e9b777d9e8180f84449d146f85df3d
--- /dev/null
+++ b/js/src/views/Account/Header/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './header';
diff --git a/js/src/views/Account/Transactions/Transaction/index.js b/js/src/views/Account/Transactions/Transaction/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..28a39ad46808bc2cb00d98d6cd4ec27be3021d52
--- /dev/null
+++ b/js/src/views/Account/Transactions/Transaction/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './transaction';
diff --git a/js/src/views/Account/Transactions/Transaction/transaction.js b/js/src/views/Account/Transactions/Transaction/transaction.js
new file mode 100644
index 0000000000000000000000000000000000000000..4d8060ecaffe0016b6042eec750ea4664bab5640
--- /dev/null
+++ b/js/src/views/Account/Transactions/Transaction/transaction.js
@@ -0,0 +1,193 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+import moment from 'moment';
+
+import { IdentityIcon, IdentityName, MethodDecoding } from '../../../../ui';
+
+import styles from '../transactions.css';
+
+export default class Transaction extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    transaction: PropTypes.object.isRequired,
+    address: PropTypes.string.isRequired,
+    isTest: PropTypes.bool.isRequired
+  }
+
+  state = {
+    info: null,
+    isContract: false,
+    isReceived: false
+  }
+
+  componentDidMount () {
+    const { address, transaction } = this.props;
+
+    this.lookup(address, transaction);
+  }
+
+  render () {
+    const { transaction, isTest } = this.props;
+    const { block } = this.state;
+
+    const prefix = `https://${isTest ? 'testnet.' : ''}etherscan.io/`;
+
+    return (
+      <tr>
+        <td className={ styles.timestamp }>
+          <div>{ this.formatBlockTimestamp(block) }</div>
+          <div>{ this.formatNumber(transaction.blockNumber) }</div>
+        </td>
+        { this.renderAddress(prefix, transaction.from) }
+        { this.renderTransaction() }
+        { this.renderAddress(prefix, transaction.to) }
+        <td className={ styles.method }>
+          { this.renderMethod() }
+        </td>
+      </tr>
+    );
+  }
+
+  renderMethod () {
+    const { address } = this.props;
+    const { info } = this.state;
+
+    if (!info) {
+      return null;
+    }
+
+    return (
+      <MethodDecoding
+        historic
+        address={ address }
+        transaction={ info } />
+    );
+  }
+
+  renderTransaction () {
+    const { transaction, isTest } = this.props;
+
+    const prefix = `https://${isTest ? 'testnet.' : ''}etherscan.io/`;
+    const hashLink = `${prefix}tx/${transaction.hash}`;
+
+    return (
+      <td className={ styles.transaction }>
+        { this.renderEtherValue() }
+        <div>⇒</div>
+        <div>
+          <a href={ hashLink } target='_blank' className={ styles.link }>
+            { this.formatHash(transaction.hash) }
+          </a>
+        </div>
+      </td>
+    );
+  }
+
+  renderAddress (prefix, address) {
+    const eslink = address ? (
+      <a
+        href={ `${prefix}address/${address}` }
+        target='_blank'
+        className={ styles.link }>
+        <IdentityName address={ address } shorten />
+      </a>
+    ) : 'DEPLOY';
+
+    return (
+      <td className={ styles.address }>
+        <div className={ styles.center }>
+          <IdentityIcon
+            center
+            className={ styles.icon }
+            address={ address } />
+        </div>
+        <div className={ styles.center }>
+          { eslink }
+        </div>
+      </td>
+    );
+  }
+
+  renderEtherValue () {
+    const { api } = this.context;
+    const { info } = this.state;
+
+    if (!info) {
+      return null;
+    }
+
+    const value = api.util.fromWei(info.value);
+
+    if (value.eq(0)) {
+      return <div className={ styles.value }>{ ' ' }</div>;
+    }
+
+    return (
+      <div className={ styles.value }>
+        { value.toFormat(5) }<small>ETH</small>
+      </div>
+    );
+  }
+
+  formatHash (hash) {
+    if (!hash || hash.length <= 16) {
+      return hash;
+    }
+
+    return `${hash.substr(2, 6)}...${hash.slice(-6)}`;
+  }
+
+  formatNumber (number) {
+    return new BigNumber(number).toFormat();
+  }
+
+  formatBlockTimestamp (block) {
+    if (!block) {
+      return null;
+    }
+
+    return moment(block.timestamp).fromNow();
+  }
+
+  lookup (address, transaction) {
+    const { api } = this.context;
+    const { info } = this.state;
+
+    if (info) {
+      return;
+    }
+
+    this.setState({ isReceived: address === transaction.to });
+
+    Promise
+      .all([
+        api.eth.getBlockByNumber(transaction.blockNumber),
+        api.eth.getTransactionByHash(transaction.hash)
+      ])
+      .then(([block, info]) => {
+        this.setState({ block, info });
+      })
+      .catch((error) => {
+        console.error('lookup', error);
+      });
+  }
+}
diff --git a/js/src/views/Account/Transactions/index.js b/js/src/views/Account/Transactions/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f74dcd5e8b76b802d82c433a007c90e0aad5d17d
--- /dev/null
+++ b/js/src/views/Account/Transactions/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './transactions';
diff --git a/js/src/views/Account/Transactions/transactions.css b/js/src/views/Account/Transactions/transactions.css
new file mode 100644
index 0000000000000000000000000000000000000000..62411d8f2cf3f831e4097ef4c199bf4b50bcd7cf
--- /dev/null
+++ b/js/src/views/Account/Transactions/transactions.css
@@ -0,0 +1,101 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.right {
+  text-align: right;
+}
+
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
+.transactions {
+}
+
+.transactions table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.transactions tr {
+  line-height: 32px;
+  vertical-align: top;
+}
+
+.transactions tr:nth-child(even) {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.transactions th {
+  color: #aaa;
+  text-align: center;
+}
+
+.transactions td {
+  vertical-align: top;
+  padding: 0.75em 0.75em;
+}
+
+.transactions .link {
+  vertical-align: top;
+}
+
+.infonone {
+  opacity: 0.25;
+}
+
+.etherscan {
+  text-align: right;
+  padding-top: 1em;
+  font-size: 0.75em;
+  color: #aaa;
+}
+
+.address {
+  text-align: center;
+}
+
+.transaction {
+  text-align: center;
+}
+
+.transactions td.transaction {
+  padding-top: 1.5em;
+}
+
+.transaction div {
+  line-height: 1.25em;
+  min-height: 1.25em;
+}
+
+.icon {
+  margin: 0;
+}
+
+.method {
+  width: 40%;
+}
+
+.transactions td.timestamp {
+  padding-top: 1.5em;
+  text-align: right;
+  line-height: 1.5em;
+  opacity: 0.5;
+}
diff --git a/js/src/views/Account/Transactions/transactions.js b/js/src/views/Account/Transactions/transactions.js
new file mode 100644
index 0000000000000000000000000000000000000000..1c9187660446e9b226b4ce12e0adee70f41291ac
--- /dev/null
+++ b/js/src/views/Account/Transactions/transactions.js
@@ -0,0 +1,148 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import LinearProgress from 'material-ui/LinearProgress';
+
+import etherscan from '../../../3rdparty/etherscan';
+import { Container, ContainerTitle } from '../../../ui';
+
+import Transaction from './Transaction';
+
+import styles from './transactions.css';
+
+class Transactions extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    accounts: PropTypes.object,
+    contacts: PropTypes.object,
+    contracts: PropTypes.object,
+    tokens: PropTypes.object,
+    isTest: PropTypes.bool
+  }
+
+  state = {
+    transactions: [],
+    loading: true,
+    callInfo: {}
+  }
+
+  componentDidMount () {
+    this.getTransactions();
+  }
+
+  render () {
+    return (
+      <Container>
+        <ContainerTitle title='transactions' />
+        { this.renderTransactions() }
+      </Container>
+    );
+  }
+
+  renderTransactions () {
+    const { loading, transactions } = this.state;
+
+    if (loading) {
+      return (
+        <LinearProgress mode='indeterminate' />
+      );
+    } else if (!transactions.length) {
+      return (
+        <div className={ styles.infonone }>
+          No transactions were found for this account
+        </div>
+      );
+    }
+
+    return (
+      <div className={ styles.transactions }>
+        <table>
+          <tbody>
+            { this.renderRows() }
+          </tbody>
+        </table>
+        <div className={ styles.etherscan }>
+          Transaction list powered by <a href='https://etherscan.io/' target='_blank'>etherscan.io</a>
+        </div>
+      </div>
+    );
+  }
+
+  renderRows () {
+    const { address, accounts, contacts, contracts, tokens, isTest } = this.props;
+    const { transactions } = this.state;
+
+    return (transactions || []).map((transaction, index) => {
+      return (
+        <Transaction
+          key={ index }
+          transaction={ transaction }
+          address={ address }
+          accounts={ accounts }
+          contacts={ contacts }
+          contracts={ contracts }
+          tokens={ tokens }
+          isTest={ isTest } />
+      );
+    });
+  }
+
+  getTransactions = () => {
+    const { isTest, address } = this.props;
+
+    return etherscan.account
+      .transactions(address, 0, isTest)
+      .then((transactions) => {
+        this.setState({
+          transactions,
+          loading: false
+        });
+      })
+      .catch((error) => {
+        console.error('getTransactions', error);
+      });
+  }
+}
+
+function mapStateToProps (state) {
+  const { isTest } = state.nodeStatus;
+  const { accounts, contacts, contracts } = state.personal;
+  const { tokens } = state.balances;
+
+  return {
+    isTest,
+    accounts,
+    contacts,
+    contracts,
+    tokens
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Transactions);
diff --git a/js/src/views/Account/account.css b/js/src/views/Account/account.css
new file mode 100644
index 0000000000000000000000000000000000000000..b1410f23aa8a0324e3e4541edefd97c929ee198a
--- /dev/null
+++ b/js/src/views/Account/account.css
@@ -0,0 +1,23 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.account {
+}
+
+.btnicon {
+  width: 24px;
+  height: 24px;
+}
diff --git a/js/src/views/Account/account.js b/js/src/views/Account/account.js
new file mode 100644
index 0000000000000000000000000000000000000000..10fcd9f3ce801207d80d4a5e47dbc6ca054da7ce
--- /dev/null
+++ b/js/src/views/Account/account.js
@@ -0,0 +1,207 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import ContentCreate from 'material-ui/svg-icons/content/create';
+import ContentSend from 'material-ui/svg-icons/content/send';
+
+import { EditMeta, Shapeshift, Transfer } from '../../modals';
+import { Actionbar, Button, Page } from '../../ui';
+
+import shapeshiftBtn from '../../../assets/images/shapeshift-btn.png';
+
+import Header from './Header';
+import Transactions from './Transactions';
+
+import styles from './account.css';
+
+class Account extends Component {
+  static propTypes = {
+    params: PropTypes.object,
+    accounts: PropTypes.object,
+    balances: PropTypes.object,
+    images: PropTypes.object.isRequired,
+    isTest: PropTypes.bool
+  }
+
+  propName = null
+
+  state = {
+    showEditDialog: false,
+    showFundDialog: false,
+    showTransferDialog: false
+  }
+
+  render () {
+    const { accounts, balances, isTest } = this.props;
+    const { address } = this.props.params;
+
+    const account = (accounts || {})[address];
+    const balance = (balances || {})[address];
+
+    if (!account) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.account }>
+        { this.renderEditDialog(account) }
+        { this.renderFundDialog() }
+        { this.renderTransferDialog() }
+        { this.renderActionbar() }
+        <Page>
+          <Header
+            isTest={ isTest }
+            account={ account }
+            balance={ balance } />
+          <Transactions
+            accounts={ accounts }
+            address={ address } />
+        </Page>
+      </div>
+    );
+  }
+
+  renderActionbar () {
+    const buttons = [
+      <Button
+        key='transferFunds'
+        icon={ <ContentSend /> }
+        label='transfer'
+        onClick={ this.onTransferClick } />,
+      <Button
+        key='shapeshift'
+        icon={ <img src={ shapeshiftBtn } className={ styles.btnicon } /> }
+        label='shapeshift'
+        onClick={ this.onShapeshiftAccountClick } />,
+      <Button
+        key='editmeta'
+        icon={ <ContentCreate /> }
+        label='edit'
+        onClick={ this.onEditClick } />
+    ];
+
+    return (
+      <Actionbar
+        title='Account Management'
+        buttons={ buttons } />
+    );
+  }
+
+  renderEditDialog (account) {
+    const { showEditDialog } = this.state;
+
+    if (!showEditDialog) {
+      return null;
+    }
+
+    return (
+      <EditMeta
+        account={ account }
+        keys={ ['description', 'passwordHint'] }
+        onClose={ this.onEditClick } />
+    );
+  }
+
+  renderFundDialog () {
+    const { showFundDialog } = this.state;
+
+    if (!showFundDialog) {
+      return null;
+    }
+
+    const { address } = this.props.params;
+
+    return (
+      <Shapeshift
+        address={ address }
+        onClose={ this.onShapeshiftAccountClose } />
+    );
+  }
+
+  renderTransferDialog () {
+    const { showTransferDialog } = this.state;
+
+    if (!showTransferDialog) {
+      return null;
+    }
+
+    const { address } = this.props.params;
+    const { accounts, balances, images } = this.props;
+    const account = accounts[address];
+    const balance = balances[address];
+
+    return (
+      <Transfer
+        account={ account }
+        balance={ balance }
+        balances={ balances }
+        images={ images }
+        onClose={ this.onTransferClose } />
+    );
+  }
+
+  onEditClick = () => {
+    this.setState({
+      showEditDialog: !this.state.showEditDialog
+    });
+  }
+
+  onShapeshiftAccountClick = () => {
+    this.setState({
+      showFundDialog: !this.state.showFundDialog
+    });
+  }
+
+  onShapeshiftAccountClose = () => {
+    this.onShapeshiftAccountClick();
+  }
+
+  onTransferClick = () => {
+    this.setState({
+      showTransferDialog: !this.state.showTransferDialog
+    });
+  }
+
+  onTransferClose = () => {
+    this.onTransferClick();
+  }
+}
+
+function mapStateToProps (state) {
+  const { accounts } = state.personal;
+  const { balances } = state.balances;
+  const { images } = state;
+  const { isTest } = state.nodeStatus;
+
+  return {
+    isTest,
+    accounts,
+    balances,
+    images
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Account);
diff --git a/js/src/views/Account/index.js b/js/src/views/Account/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..55c215f7c9481f7a1a257faff06a38ad09229c20
--- /dev/null
+++ b/js/src/views/Account/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './account';
diff --git a/js/src/views/Accounts/List/index.js b/js/src/views/Accounts/List/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..11950acfa4a549da02971bdae2cd4c656b5ebeb0
--- /dev/null
+++ b/js/src/views/Accounts/List/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './list';
diff --git a/js/src/views/Accounts/List/list.css b/js/src/views/Accounts/List/list.css
new file mode 100644
index 0000000000000000000000000000000000000000..6c23d32e1b372ea0e9f81a6ad855a8f11c63e8b2
--- /dev/null
+++ b/js/src/views/Accounts/List/list.css
@@ -0,0 +1,45 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.item {
+  flex: 0 1 50%;
+  width: 50%;
+  position: relative;
+  padding-bottom: 0.25em;
+  box-sizing: border-box;
+}
+
+.item:nth-child(odd) {
+  padding-right: 0.125em;
+}
+
+.item:nth-child(even) {
+  padding-left: 0.125em;
+}
+
+.empty {
+  width: 100%;
+  display: block;
+}
+
+.empty div {
+  color: #aaa;
+}
diff --git a/js/src/views/Accounts/List/list.js b/js/src/views/Accounts/List/list.js
new file mode 100644
index 0000000000000000000000000000000000000000..5c09d0e3488e1ad4a53195a7b18502ed9d5c99f6
--- /dev/null
+++ b/js/src/views/Accounts/List/list.js
@@ -0,0 +1,69 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { Container } from '../../../ui';
+
+import Summary from '../Summary';
+import styles from './list.css';
+
+export default class List extends Component {
+  static propTypes = {
+    accounts: PropTypes.object,
+    balances: PropTypes.object,
+    link: PropTypes.string,
+    empty: PropTypes.bool
+  };
+
+  render () {
+    return (
+      <div className={ styles.list }>
+        { this.renderAccounts() }
+      </div>
+    );
+  }
+
+  renderAccounts () {
+    const { accounts, balances, link, empty } = this.props;
+
+    if (empty) {
+      return (
+        <Container className={ styles.empty }>
+          <div>
+            There are currently no accounts or addresses to display.
+          </div>
+        </Container>
+      );
+    }
+
+    return Object.keys(accounts).map((address, idx) => {
+      const account = accounts[address] || {};
+      const balance = balances[address] || {};
+
+      return (
+        <div
+          className={ styles.item }
+          key={ address }>
+          <Summary
+            link={ link }
+            account={ account }
+            balance={ balance } />
+        </div>
+      );
+    });
+  }
+}
diff --git a/js/src/views/Accounts/Summary/index.js b/js/src/views/Accounts/Summary/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..7cc23b215d3cdc8ba06503358e2fed8901afb591
--- /dev/null
+++ b/js/src/views/Accounts/Summary/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './summary';
diff --git a/js/src/views/Accounts/Summary/summary.js b/js/src/views/Accounts/Summary/summary.js
new file mode 100644
index 0000000000000000000000000000000000000000..0bfb41a20d9ad3b46531f19217e4b218ae2bfd91
--- /dev/null
+++ b/js/src/views/Accounts/Summary/summary.js
@@ -0,0 +1,60 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
+
+import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName } from '../../../ui';
+
+export default class Summary extends Component {
+  static contextTypes = {
+    api: React.PropTypes.object
+  }
+
+  static propTypes = {
+    account: PropTypes.object.isRequired,
+    balance: PropTypes.object.isRequired,
+    link: PropTypes.string,
+    children: PropTypes.node
+  }
+
+  state = {
+    name: 'Unnamed'
+  }
+
+  render () {
+    const { account, balance, children, link } = this.props;
+
+    if (!account) {
+      return null;
+    }
+
+    const viewLink = `/${link || 'account'}/${account.address}`;
+
+    return (
+      <Container>
+        <IdentityIcon
+          address={ account.address } />
+        <ContainerTitle
+          title={ <Link to={ viewLink }>{ <IdentityName address={ account.address } unknown /> }</Link> }
+          byline={ account.address } />
+        <Balance
+          balance={ balance } />
+        { children }
+      </Container>
+    );
+  }
+}
diff --git a/js/src/views/Accounts/accounts.css b/js/src/views/Accounts/accounts.css
new file mode 100644
index 0000000000000000000000000000000000000000..f98a09ea3e97f9bf36bb826233f2c750dcf9c934
--- /dev/null
+++ b/js/src/views/Accounts/accounts.css
@@ -0,0 +1,32 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.accounts {
+}
+
+.accountTooltip {
+  top: 13.3em;
+  left: 7em;
+}
+
+.toolbar {
+  position: relative;
+}
+
+.toolbarTooltip {
+  right: 1em;
+  top: 4em;
+}
diff --git a/js/src/views/Accounts/accounts.js b/js/src/views/Accounts/accounts.js
new file mode 100644
index 0000000000000000000000000000000000000000..b8f5cba16443efaafbd8d145c0b4c2b737617c92
--- /dev/null
+++ b/js/src/views/Accounts/accounts.js
@@ -0,0 +1,134 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import ContentAdd from 'material-ui/svg-icons/content/add';
+
+import List from './List';
+import { CreateAccount } from '../../modals';
+import { Actionbar, Button, Page, Tooltip } from '../../ui';
+
+import styles from './accounts.css';
+
+class Accounts extends Component {
+  static contextTypes = {
+    api: PropTypes.object
+  }
+
+  static propTypes = {
+    accounts: PropTypes.object,
+    hasAccounts: PropTypes.bool,
+    balances: PropTypes.object
+  }
+
+  state = {
+    addressBook: false,
+    newDialog: false
+  }
+
+  render () {
+    const { accounts, hasAccounts, balances } = this.props;
+
+    return (
+      <div className={ styles.accounts }>
+        { this.renderNewDialog() }
+        { this.renderActionbar() }
+        <Page>
+          <List
+            accounts={ accounts }
+            balances={ balances }
+            empty={ !hasAccounts } />
+          <Tooltip
+            className={ styles.accountTooltip }
+            text='your accounts are visible for easy access, allowing you to edit the meta information, make transfers, view transactions and fund the account' />
+        </Page>
+      </div>
+    );
+  }
+
+  renderActionbar () {
+    const buttons = [
+      <Button
+        key='newAccount'
+        icon={ <ContentAdd /> }
+        label='new account'
+        onClick={ this.onNewAccountClick } />
+    ];
+
+    return (
+      <Actionbar
+        className={ styles.toolbar }
+        title='Accounts Overview'
+        buttons={ buttons }>
+        <Tooltip
+          className={ styles.toolbarTooltip }
+          right
+          text='actions relating to the current view are available on the toolbar for quick access, be it for performing actions or creating a new item' />
+      </Actionbar>
+    );
+  }
+
+  renderNewDialog () {
+    const { accounts } = this.props;
+    const { newDialog } = this.state;
+
+    if (!newDialog) {
+      return null;
+    }
+
+    return (
+      <CreateAccount
+        accounts={ accounts }
+        onClose={ this.onNewAccountClose }
+        onUpdate={ this.onNewAccountUpdate } />
+    );
+  }
+
+  onNewAccountClick = () => {
+    this.setState({
+      newDialog: !this.state.newDialog
+    });
+  }
+
+  onNewAccountClose = () => {
+    this.onNewAccountClick();
+  }
+
+  onNewAccountUpdate = () => {
+  }
+}
+
+function mapStateToProps (state) {
+  const { accounts, hasAccounts } = state.personal;
+  const { balances } = state.balances;
+
+  return {
+    accounts,
+    hasAccounts,
+    balances
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Accounts);
diff --git a/js/src/views/Accounts/index.js b/js/src/views/Accounts/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e9be1d557338144d69c09ec2d7adc0d2386d3999
--- /dev/null
+++ b/js/src/views/Accounts/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './accounts';
diff --git a/js/src/views/Address/Delete/delete.js b/js/src/views/Address/Delete/delete.js
new file mode 100644
index 0000000000000000000000000000000000000000..66e6edb95f4a88e36f4e2fffd6fcd01ea822a5bd
--- /dev/null
+++ b/js/src/views/Address/Delete/delete.js
@@ -0,0 +1,113 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { ConfirmDialog, IdentityIcon, IdentityName } from '../../../ui';
+import { newError } from '../../../redux/actions';
+
+import styles from '../address.css';
+
+class Delete extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    router: PropTypes.object
+  }
+
+  static propTypes = {
+    address: PropTypes.string,
+    account: PropTypes.object,
+    route: PropTypes.string.isRequired,
+    visible: PropTypes.bool,
+    onClose: PropTypes.func,
+    newError: PropTypes.func
+  }
+
+  render () {
+    const { account, visible } = this.props;
+
+    if (!visible) {
+      return null;
+    }
+
+    return (
+      <ConfirmDialog
+        className={ styles.delete }
+        title='confirm removal'
+        visible
+        onDeny={ this.closeDeleteDialog }
+        onConfirm={ this.onDeleteConfirmed }>
+        <div className={ styles.hero }>
+          Are you sure you want to remove the following address from your addressbook?
+        </div>
+        <div className={ styles.info }>
+          <IdentityIcon
+            className={ styles.icon }
+            address={ account.address } />
+          <div className={ styles.nameinfo }>
+            <div className={ styles.header }>
+              <IdentityName address={ account.address } unknown />
+            </div>
+            <div className={ styles.address }>
+              { account.address }
+            </div>
+          </div>
+        </div>
+        <div className={ styles.description }>
+          { account.meta.description }
+        </div>
+      </ConfirmDialog>
+    );
+  }
+
+  onDeleteConfirmed = () => {
+    const { api, router } = this.context;
+    const { account, route, newError } = this.props;
+
+    account.meta.deleted = true;
+
+    api.personal
+      .setAccountMeta(account.address, account.meta)
+      .then(() => {
+        router.push(route);
+        this.closeDeleteDialog();
+      })
+      .catch((error) => {
+        console.error('onDeleteConfirmed', error);
+        newError(new Error(`Deletion failed: ${error.message}`));
+        this.closeDeleteDialog();
+      });
+  }
+
+  closeDeleteDialog = () => {
+    this.props.onClose();
+  }
+}
+
+function mapStateToProps (state) {
+  return {};
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({ newError }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Delete);
diff --git a/js/src/views/Address/Delete/index.js b/js/src/views/Address/Delete/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..8d2a51500cb7adbaef7aae426ad10d27c0752b75
--- /dev/null
+++ b/js/src/views/Address/Delete/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './delete';
diff --git a/js/src/views/Address/address.css b/js/src/views/Address/address.css
new file mode 100644
index 0000000000000000000000000000000000000000..d93b88b594aa357e9886cb7986872549da39d156
--- /dev/null
+++ b/js/src/views/Address/address.css
@@ -0,0 +1,50 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.address {
+}
+
+.delete .hero {
+  padding-bottom: 1em;
+}
+
+.delete .info {
+  display: inline-block;
+}
+
+.delete .icon {
+  display: inline-block;
+}
+
+.delete .nameinfo {
+  display: inline-block;
+  text-align: left;
+}
+
+.delete .header {
+  text-transform: uppercase;
+  font-size: 1.25em;
+  padding-bottom: 0.25em;
+}
+
+.delete .address {
+}
+
+.delete .description {
+  padding-top: 1em;
+  font-size: 0.75em;
+  color: #aaa;
+}
diff --git a/js/src/views/Address/address.js b/js/src/views/Address/address.js
new file mode 100644
index 0000000000000000000000000000000000000000..210f63b99975b78a6698e75e22035899c871830e
--- /dev/null
+++ b/js/src/views/Address/address.js
@@ -0,0 +1,153 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import ActionDelete from 'material-ui/svg-icons/action/delete';
+import ContentCreate from 'material-ui/svg-icons/content/create';
+
+import { EditMeta } from '../../modals';
+import { Actionbar, Button, Page } from '../../ui';
+
+import Header from '../Account/Header';
+import Transactions from '../Account/Transactions';
+import Delete from './Delete';
+
+import styles from './address.css';
+
+class Address extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    router: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    contacts: PropTypes.object,
+    balances: PropTypes.object,
+    isTest: PropTypes.bool,
+    params: PropTypes.object
+  }
+
+  state = {
+    showDeleteDialog: false,
+    showEditDialog: false
+  }
+
+  render () {
+    const { contacts, balances, isTest } = this.props;
+    const { address } = this.props.params;
+    const { showDeleteDialog } = this.state;
+
+    const contact = (contacts || {})[address];
+    const balance = (balances || {})[address];
+
+    if (!contact) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.address }>
+        { this.renderEditDialog(contact) }
+        { this.renderActionbar(contact) }
+        <Delete
+          account={ contact }
+          visible={ showDeleteDialog }
+          route='/addresses'
+          onClose={ this.closeDeleteDialog } />
+        <Page>
+          <Header
+            isTest={ isTest }
+            account={ contact }
+            balance={ balance } />
+          <Transactions
+            address={ address } />
+        </Page>
+      </div>
+    );
+  }
+
+  renderActionbar (contact) {
+    const buttons = [
+      <Button
+        key='editmeta'
+        icon={ <ContentCreate /> }
+        label='edit'
+        onClick={ this.onEditClick } />,
+      <Button
+        key='delete'
+        icon={ <ActionDelete /> }
+        label='delete address'
+        onClick={ this.showDeleteDialog } />
+    ];
+
+    return (
+      <Actionbar
+        title='Address Information'
+        buttons={ !contact || contact.meta.deleted ? [] : buttons } />
+    );
+  }
+
+  renderEditDialog (contact) {
+    const { showEditDialog } = this.state;
+
+    if (!showEditDialog) {
+      return null;
+    }
+
+    return (
+      <EditMeta
+        account={ contact }
+        keys={ ['description'] }
+        onClose={ this.onEditClick } />
+    );
+  }
+
+  onEditClick = () => {
+    this.setState({
+      showEditDialog: !this.state.showEditDialog
+    });
+  }
+
+  closeDeleteDialog = () => {
+    this.setState({ showDeleteDialog: false });
+  }
+
+  showDeleteDialog = () => {
+    this.setState({ showDeleteDialog: true });
+  }
+}
+
+function mapStateToProps (state) {
+  const { contacts } = state.personal;
+  const { balances } = state.balances;
+  const { isTest } = state.nodeStatus;
+
+  return {
+    isTest,
+    contacts,
+    balances
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Address);
diff --git a/js/src/views/Address/index.js b/js/src/views/Address/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f97d5b1aedb92212349188e8985e34d07271d6f6
--- /dev/null
+++ b/js/src/views/Address/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './address';
diff --git a/js/src/views/Addresses/addresses.css b/js/src/views/Addresses/addresses.css
new file mode 100644
index 0000000000000000000000000000000000000000..5dbbe9aec5f6b856ebc358800fbbb07f1ac362c3
--- /dev/null
+++ b/js/src/views/Addresses/addresses.css
@@ -0,0 +1,46 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.addresses {
+}
+
+.list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.address {
+  flex: 0 1 50%;
+  width: 50%;
+  position: relative;
+}
+
+.address:nth-child(odd)>div {
+  padding-right: 0.5em !important;
+}
+
+.address:nth-child(even)>div {
+  padding-left: 0.5em !important;
+}
+
+.empty {
+  width: 100%;
+  display: block;
+}
+
+.empty div {
+  color: #aaa;
+}
diff --git a/js/src/views/Addresses/addresses.js b/js/src/views/Addresses/addresses.js
new file mode 100644
index 0000000000000000000000000000000000000000..b4b51944f662c584218f23b1210713251dc07067
--- /dev/null
+++ b/js/src/views/Addresses/addresses.js
@@ -0,0 +1,122 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import ContentAdd from 'material-ui/svg-icons/content/add';
+
+import List from '../Accounts/List';
+import { AddAddress } from '../../modals';
+import { Actionbar, Button, Page } from '../../ui';
+
+import styles from './addresses.css';
+
+class Addresses extends Component {
+  static contextTypes = {
+    api: PropTypes.object
+  }
+
+  static propTypes = {
+    balances: PropTypes.object,
+    contacts: PropTypes.object,
+    hasContacts: PropTypes.bool
+  }
+
+  state = {
+    showAdd: false
+  }
+
+  render () {
+    const { balances, contacts, hasContacts } = this.props;
+
+    return (
+      <div className={ styles.addresses }>
+        { this.renderActionbar() }
+        { this.renderAddAddress() }
+        <Page>
+          <List
+            link='address'
+            accounts={ contacts }
+            balances={ balances }
+            empty={ !hasContacts } />
+        </Page>
+      </div>
+    );
+  }
+
+  renderActionbar () {
+    const buttons = [
+      <Button
+        key='newAddress'
+        icon={ <ContentAdd /> }
+        label='new address'
+        onClick={ this.onOpenAdd } />
+    ];
+
+    return (
+      <Actionbar
+        className={ styles.toolbar }
+        title='Saved Addresses'
+        buttons={ buttons } />
+    );
+  }
+
+  renderAddAddress () {
+    const { contacts } = this.props;
+    const { showAdd } = this.state;
+
+    if (!showAdd) {
+      return null;
+    }
+
+    return (
+      <AddAddress
+        contacts={ contacts }
+        onClose={ this.onCloseAdd } />
+    );
+  }
+
+  onOpenAdd = () => {
+    this.setState({
+      showAdd: true
+    });
+  }
+
+  onCloseAdd = () => {
+    this.setState({ showAdd: false });
+  }
+}
+
+function mapStateToProps (state) {
+  const { balances } = state.balances;
+  const { contacts, hasContacts } = state.personal;
+
+  return {
+    balances,
+    contacts,
+    hasContacts
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Addresses);
diff --git a/js/src/views/Addresses/index.js b/js/src/views/Addresses/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..97e107c00ac7fcc3505d51480413aa89b5a473da
--- /dev/null
+++ b/js/src/views/Addresses/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './addresses';
diff --git a/js/src/views/Application/Container/container.js b/js/src/views/Application/Container/container.js
new file mode 100644
index 0000000000000000000000000000000000000000..a1b9124c7d190fb4066bac848b22d85123ea7967
--- /dev/null
+++ b/js/src/views/Application/Container/container.js
@@ -0,0 +1,45 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { FirstRun } from '../../../modals';
+import { Errors, ParityBackground, Tooltips } from '../../../ui';
+
+import styles from '../application.css';
+
+export default class Container extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    showFirstRun: PropTypes.bool,
+    onCloseFirstRun: PropTypes.func
+  };
+
+  render () {
+    const { children, showFirstRun, onCloseFirstRun } = this.props;
+
+    return (
+      <ParityBackground className={ styles.container }>
+        <FirstRun
+          visible={ showFirstRun }
+          onClose={ onCloseFirstRun } />
+        <Tooltips />
+        <Errors />
+        { children }
+      </ParityBackground>
+    );
+  }
+}
diff --git a/js/src/views/Application/Container/index.js b/js/src/views/Application/Container/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..87fbc567ef2f3db31a65d206720db12454dfcd7e
--- /dev/null
+++ b/js/src/views/Application/Container/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './container';
diff --git a/js/src/views/Application/DappContainer/dappContainer.js b/js/src/views/Application/DappContainer/dappContainer.js
new file mode 100644
index 0000000000000000000000000000000000000000..c18422b17911916a8e084ed40d848046dd9d8cc1
--- /dev/null
+++ b/js/src/views/Application/DappContainer/dappContainer.js
@@ -0,0 +1,35 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from '../application.css';
+
+export default class DappContainer extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired
+  };
+
+  render () {
+    const { children } = this.props;
+
+    return (
+      <div className={ styles.container }>
+        { children }
+      </div>
+    );
+  }
+}
diff --git a/js/src/views/Application/DappContainer/index.js b/js/src/views/Application/DappContainer/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..21837d4b1a4d35aa2914ac5d66c9d43c50ef9d13
--- /dev/null
+++ b/js/src/views/Application/DappContainer/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './dappContainer';
diff --git a/js/src/views/Application/FrameError/frameError.css b/js/src/views/Application/FrameError/frameError.css
new file mode 100644
index 0000000000000000000000000000000000000000..0cec767ba7d36f8b1b68a05624878ac4df485e99
--- /dev/null
+++ b/js/src/views/Application/FrameError/frameError.css
@@ -0,0 +1,21 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.error {
+  padding: 2em;
+  background: red;
+  color: white;
+}
diff --git a/js/src/views/Application/FrameError/frameError.js b/js/src/views/Application/FrameError/frameError.js
new file mode 100644
index 0000000000000000000000000000000000000000..35d2493b0f3713a179cb189a1dc69c1367d28b96
--- /dev/null
+++ b/js/src/views/Application/FrameError/frameError.js
@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import styles from './frameError.css';
+
+export default class FrameError extends Component {
+  render () {
+    return (
+      <div className={ styles.error }>
+        ERROR: This application cannot and should not be loaded in an embedded iFrame
+      </div>
+    );
+  }
+}
diff --git a/js/src/views/Application/FrameError/index.js b/js/src/views/Application/FrameError/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e4358d46d4207f3d49f62ec850557fda92b6138d
--- /dev/null
+++ b/js/src/views/Application/FrameError/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './frameError';
diff --git a/js/src/views/Application/Status/index.js b/js/src/views/Application/Status/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..44079b22485b96c83d7ed82e2491caf9e1c8c7b5
--- /dev/null
+++ b/js/src/views/Application/Status/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './status';
diff --git a/js/src/views/Application/Status/status.css b/js/src/views/Application/Status/status.css
new file mode 100644
index 0000000000000000000000000000000000000000..22d119eb5f812207b21833ea238552f2b749c706
--- /dev/null
+++ b/js/src/views/Application/Status/status.css
@@ -0,0 +1,65 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.status {
+  clear: both;
+  padding: 1.5em;
+  text-align: right;
+  color: #ddd;
+}
+
+.title {
+  margin: 0 0.5em 0 2em;
+}
+
+.block {
+}
+
+.netinfo {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-top: 0.25em;
+}
+
+.netinfo>div {
+  display: inline-block;
+  margin-left: 1em;
+}
+
+.network {
+  padding: 0.25em 0.5em;
+  display: inline-block;
+  border-radius: 4px;
+  text-transform: uppercase;
+  height: 1.25em;
+  margin-top: 0.25em;
+  box-sizing: content-box;
+}
+
+.networklive {
+  background: rgb(75, 255, 75);
+}
+
+.networktest {
+  background: rgb(255, 75, 75);
+}
+
+.peers {
+}
+
+.version {
+}
diff --git a/js/src/views/Application/Status/status.js b/js/src/views/Application/Status/status.js
new file mode 100644
index 0000000000000000000000000000000000000000..10f4b18b56fa6c2288d713c72c0b34987d8d2fc2
--- /dev/null
+++ b/js/src/views/Application/Status/status.js
@@ -0,0 +1,82 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import styles from './status.css';
+
+class Status extends Component {
+  static propTypes = {
+    blockNumber: PropTypes.object,
+    clientVersion: PropTypes.string,
+    netPeers: PropTypes.object,
+    netChain: PropTypes.string,
+    isTest: PropTypes.bool
+  }
+
+  render () {
+    const { clientVersion, blockNumber, netChain, netPeers, isTest } = this.props;
+    const netStyle = `${styles.network} ${styles[isTest ? 'networktest' : 'networklive']}`;
+
+    if (!blockNumber) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.status }>
+        <div className={ styles.version }>
+          { clientVersion }
+        </div>
+        <div className={ styles.netinfo }>
+          <div>
+            <div className={ styles.block }>
+              { blockNumber.toFormat() } blocks
+            </div>
+            <div className={ styles.peers }>
+              { netPeers.active.toFormat() }/{ netPeers.connected.toFormat() }/{ netPeers.max.toFormat() } peers
+            </div>
+          </div>
+          <div className={ netStyle }>
+            { isTest ? 'test' : netChain }
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { blockNumber, clientVersion, netPeers, netChain, isTest } = state.nodeStatus;
+
+  return {
+    blockNumber,
+    clientVersion,
+    netPeers,
+    netChain,
+    isTest
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Status);
diff --git a/js/src/views/Application/TabBar/index.js b/js/src/views/Application/TabBar/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d1a5eacbe57db3c93bd700fd9f45f2b3a9182b71
--- /dev/null
+++ b/js/src/views/Application/TabBar/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './tabBar';
diff --git a/js/src/views/Application/TabBar/tabBar.css b/js/src/views/Application/TabBar/tabBar.css
new file mode 100644
index 0000000000000000000000000000000000000000..d5c8c78438d7a8540c9ad8a6bd9953775267f409
--- /dev/null
+++ b/js/src/views/Application/TabBar/tabBar.css
@@ -0,0 +1,84 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.toolbar {
+  background: none !important;
+  height: 72px !important;
+  position: relative;
+}
+
+.tabs {
+  width: 100%;
+  position: relative;
+}
+
+.tabs button,
+.settings,
+.logo,
+.last {
+  background: rgba(0, 0, 0, 0.5) !important; /* rgba(0, 0, 0, 0.25) !important; */
+}
+
+.tabs button:hover {
+  background: rgba(0, 0, 0, 0.4) !important;
+}
+
+button.tabactive,
+button.tabactive:hover {
+  background: rgba(0, 0, 0, 0.25) !important;
+  border-radius: 4px 4px 0 0;
+}
+
+.tabbarTooltip {
+  left: 3.3em;
+  top: 0.5em;
+}
+
+.label {
+  position: relative;
+}
+
+.labelBubble {
+  position: absolute;
+  top: -12px;
+  right: -12px;
+}
+
+.logo {
+  margin: 0 0 0 -24px;
+  padding: 22px 24px 0 24px;
+  white-space: nowrap;
+}
+
+.logo img {
+  height: 28px;
+  width: 28px;
+  margin-right: 0.5em;
+}
+
+.logo div {
+  display: inline-block;
+  text-transform: uppercase;
+  line-height: 32px;
+  vertical-align: top;
+  letter-spacing: 0.2em;
+}
+
+.last {
+  margin: 0 -24px 0 0;
+  padding: 22px 12px 0 12px;
+  white-space: nowrap;
+}
diff --git a/js/src/views/Application/TabBar/tabBar.js b/js/src/views/Application/TabBar/tabBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..07cc4b5fc2786842165c9986b191b6b2ec93258f
--- /dev/null
+++ b/js/src/views/Application/TabBar/tabBar.js
@@ -0,0 +1,187 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
+import { Tabs, Tab } from 'material-ui/Tabs';
+
+import { Badge, Tooltip } from '../../../ui';
+
+import styles from './tabBar.css';
+import imagesEthcoreBlock from '../../../../assets/images/ethcore-block.png';
+
+const TABMAP = {
+  accounts: 'account',
+  addresses: 'address',
+  apps: 'app',
+  contracts: 'contract'
+};
+
+class TabBar extends Component {
+  static contextTypes = {
+    router: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    pending: PropTypes.array,
+    isTest: PropTypes.bool,
+    netChain: PropTypes.string,
+    settings: PropTypes.object.isRequired
+  }
+
+  state = {
+    activeRoute: '/accounts'
+  }
+
+  render () {
+    return (
+      <Toolbar
+        className={ styles.toolbar }>
+        { this.renderLogo() }
+        { this.renderTabs() }
+        { this.renderLast() }
+      </Toolbar>
+    );
+  }
+
+  renderLogo () {
+    return (
+      <ToolbarGroup>
+        <div className={ styles.logo }>
+          <img src={ imagesEthcoreBlock } />
+          <div>Parity</div>
+        </div>
+      </ToolbarGroup>
+    );
+  }
+
+  renderLast () {
+    return (
+      <ToolbarGroup>
+        <div className={ styles.last }>
+          <div></div>
+        </div>
+      </ToolbarGroup>
+    );
+  }
+
+  renderTabs () {
+    const { settings } = this.props;
+    const windowHash = (window.location.hash || '').split('?')[0].split('/')[1];
+    const hash = TABMAP[windowHash] || windowHash;
+
+    const items = Object.keys(settings.views)
+      .filter((id) => settings.views[id].fixed || settings.views[id].active)
+      .map((id) => {
+        const view = settings.views[id];
+        let label = this.renderLabel(view.label);
+        let body = null;
+
+        if (id === 'accounts') {
+          body = (
+            <Tooltip className={ styles.tabbarTooltip } text='navigate between the different parts and views of the application, switching between an account view, token view and distributed application view' />
+          );
+        } else if (id === 'signer') {
+          label = this.renderSignerLabel(label);
+        } else if (id === 'status') {
+          label = this.renderStatusLabel(label);
+        }
+
+        return (
+          <Tab
+            className={ hash === view.value ? styles.tabactive : '' }
+            value={ view.value }
+            icon={ view.icon }
+            key={ id }
+            label={ label }
+            onActive={ this.onActivate(view.route) }>
+            { body }
+          </Tab>
+        );
+      });
+
+    return (
+      <Tabs
+        className={ styles.tabs }
+        value={ hash }>
+        { items }
+      </Tabs>
+    );
+  }
+
+  renderLabel = (name, bubble) => {
+    return (
+      <div className={ styles.label }>
+        { name }
+        { bubble }
+      </div>
+    );
+  }
+
+  renderSignerLabel = (label) => {
+    const { pending } = this.props;
+    let bubble = null;
+
+    if (pending && pending.length) {
+      bubble = (
+        <Badge
+          color='red'
+          className={ styles.labelBubble }
+          value={ pending.length } />
+      );
+    }
+
+    return this.renderLabel(label, bubble);
+  }
+
+  renderStatusLabel = (label) => {
+    const { isTest, netChain } = this.props;
+    const bubble = (
+      <Badge
+        color={ isTest ? 'red' : 'default' }
+        className={ styles.labelBubble }
+        value={ isTest ? 'TEST' : netChain } />
+      );
+
+    return this.renderLabel(label, bubble);
+  }
+
+  onActivate = (activeRoute) => {
+    const { router } = this.context;
+
+    return (event) => {
+      router.push(activeRoute);
+      this.setState({ activeRoute });
+    };
+  }
+}
+
+function mapStateToProps (state) {
+  const { settings } = state;
+
+  return { settings };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TabBar);
diff --git a/js/src/views/Application/application.css b/js/src/views/Application/application.css
new file mode 100644
index 0000000000000000000000000000000000000000..0ce187f65ca61ef506434c4e6a66cad409a6533e
--- /dev/null
+++ b/js/src/views/Application/application.css
@@ -0,0 +1,21 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.outer,
+.container {
+  min-height: 100vh;
+}
diff --git a/js/src/views/Application/application.js b/js/src/views/Application/application.js
new file mode 100644
index 0000000000000000000000000000000000000000..af213faf88ea622dd09bd16a36464babd5b6b1bd
--- /dev/null
+++ b/js/src/views/Application/application.js
@@ -0,0 +1,146 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import Connection from '../Connection';
+import ParityBar from '../ParityBar';
+
+import Container from './Container';
+import DappContainer from './DappContainer';
+import FrameError from './FrameError';
+import Status from './Status';
+import TabBar from './TabBar';
+
+import styles from './application.css';
+
+const inFrame = window.parent !== window && window.parent.frames.length !== 0;
+const showFirstRun = window.localStorage.getItem('showFirstRun') === '1';
+
+class Application extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    background: PropTypes.string
+  }
+
+  static propTypes = {
+    children: PropTypes.node,
+    netChain: PropTypes.string,
+    isTest: PropTypes.bool,
+    pending: PropTypes.array
+  }
+
+  state = {
+    showFirstRun: false
+  }
+
+  componentWillMount () {
+    this.checkAccounts();
+  }
+
+  render () {
+    const [root] = (window.location.hash || '').replace('#/', '').split('/');
+    const isDapp = root === 'app';
+
+    if (inFrame) {
+      return (
+        <FrameError />
+      );
+    }
+
+    return (
+      <div className={ styles.outer }>
+        { isDapp ? this.renderDapp() : this.renderApp() }
+        <Connection />
+        <ParityBar dapp={ isDapp } />
+      </div>
+    );
+  }
+
+  renderApp () {
+    const { children, pending, netChain, isTest } = this.props;
+    const { showFirstRun } = this.state;
+
+    return (
+      <Container
+        showFirstRun={ showFirstRun }
+        onCloseFirstRun={ this.onCloseFirstRun }>
+        <TabBar
+          netChain={ netChain }
+          isTest={ isTest }
+          pending={ pending } />
+        { children }
+        <Status />
+      </Container>
+    );
+  }
+
+  renderDapp () {
+    const { children } = this.props;
+
+    return (
+      <DappContainer>
+        { children }
+      </DappContainer>
+    );
+  }
+
+  checkAccounts () {
+    const { api } = this.context;
+
+    api.personal
+      .listAccounts()
+      .then((accounts) => {
+        this.setState({
+          showFirstRun: showFirstRun || accounts.length === 0
+        });
+      })
+      .catch((error) => {
+        console.error('checkAccounts', error);
+      });
+  }
+
+  onCloseFirstRun = () => {
+    window.localStorage.setItem('showFirstRun', '0');
+    this.setState({
+      showFirstRun: false
+    });
+  }
+}
+
+function mapStateToProps (state) {
+  const { netChain, isTest } = state.nodeStatus;
+  const { hasAccounts } = state.personal;
+  const { pending } = state.signer;
+
+  return {
+    hasAccounts,
+    netChain,
+    isTest,
+    pending
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Application);
diff --git a/js/src/views/Application/index.js b/js/src/views/Application/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..236578226a80e822593c37acd1daad1c649950e1
--- /dev/null
+++ b/js/src/views/Application/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './application';
diff --git a/js/src/views/Connection/connection.css b/js/src/views/Connection/connection.css
new file mode 100644
index 0000000000000000000000000000000000000000..db147c0a2150c7e651929fcb83f2b47e5fbc48f8
--- /dev/null
+++ b/js/src/views/Connection/connection.css
@@ -0,0 +1,113 @@
+/* Copyright 2015; 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation; either version 3 of the License; or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful;
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not; see <http://www.gnu.org/licenses/>.
+*/
+
+.overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(255, 255, 255, 0.75);
+  z-index: 20000
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 20001
+}
+
+.body {
+  margin: 0 auto;
+  padding: 2em 4em;
+  text-align: center;
+  max-width: 40em;
+  background: rgba(25, 25, 25, 0.75);
+  color: rgb(208, 208, 208);
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 45px, rgba(0, 0, 0, 0.22) 0px 10px 18px
+}
+
+.header {
+  fontSize: 1.25em
+}
+
+.info {
+  margin-top: 2em;
+  line-height: 1.618em
+}
+
+.form {
+  margin-top: 0.75em;
+  padding: 0 4em;
+  text-align: left;
+}
+
+.btnrow {
+  text-align: right;
+  padding: 0 4em;
+}
+
+.icons {
+}
+
+.icon,
+.iconSmall {
+  display: inline-block;
+  padding: 1em;
+  vertical-align: middle;
+}
+
+.iconName {
+}
+
+.icon .svg {
+  width: 6em !important;
+  height: 6em !important;
+}
+
+.iconSmall .svg {
+  width: 3em !important;
+  height: 3em !important;
+}
+
+.console {
+  font-family: 'Roboto Mono';
+  background: rgba(0, 0, 0, 0.25);
+  padding: 0 0.25em;
+}
+
+@keyframes pulse {
+  0% {
+    fill: rgb(0, 200, 0);
+  }
+  50% {
+    fill: rgb(150, 200, 150);
+  }
+  100% {
+    fill: rgb(0, 200, 0);
+  }
+}
+
+.pulse {
+  fill: red;
+  animation-name: pulse;
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+}
diff --git a/js/src/views/Connection/connection.js b/js/src/views/Connection/connection.js
new file mode 100644
index 0000000000000000000000000000000000000000..2217bb13c07938d7a849fed5bb21c8ccd165247f
--- /dev/null
+++ b/js/src/views/Connection/connection.js
@@ -0,0 +1,150 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import ActionCompareArrows from 'material-ui/svg-icons/action/compare-arrows';
+import ActionDashboard from 'material-ui/svg-icons/action/dashboard';
+// import CommunicationVpnKey from 'material-ui/svg-icons/communication/vpn-key';
+import HardwareDesktopMac from 'material-ui/svg-icons/hardware/desktop-mac';
+import NotificationVpnLock from 'material-ui/svg-icons/notification/vpn-lock';
+
+import { Input } from '../../ui';
+
+import styles from './connection.css';
+
+class Connection extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    isConnected: PropTypes.bool,
+    isConnecting: PropTypes.bool,
+    isPingable: PropTypes.bool,
+    needsToken: PropTypes.bool
+  }
+
+  state = {
+    token: '',
+    validToken: false
+  }
+
+  render () {
+    const { isConnected, isConnecting, isPingable } = this.props;
+    const isOk = !isConnecting && isConnected && isPingable;
+
+    if (isOk) {
+      return null;
+    }
+
+    const typeIcon = isPingable
+      ? <NotificationVpnLock className={ styles.svg } />
+      : <ActionDashboard className={ styles.svg } />;
+    const description = isPingable
+      ? this.renderSigner()
+      : this.renderPing();
+
+    return (
+      <div>
+        <div className={ styles.overlay } />
+        <div className={ styles.modal }>
+          <div className={ styles.body }>
+            <div className={ styles.icons }>
+              <div className={ styles.icon }>
+                <HardwareDesktopMac className={ styles.svg } />
+              </div>
+              <div className={ styles.iconSmall }>
+                <ActionCompareArrows className={ styles.svg + ' ' + styles.pulse } />
+              </div>
+              <div className={ styles.icon }>
+                { typeIcon }
+              </div>
+            </div>
+            { description }
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderSigner () {
+    const { api } = this.context;
+    const { token, validToken } = this.state;
+    const { needsToken, isConnecting } = api;
+
+    if (needsToken && !isConnecting) {
+      return (
+        <div className={ styles.info }>
+          <div>Unable to make a connection to the Parity Secure API. To update your secure token or to generate a new one, run <span className={ styles.console }>parity signer new-token</span> and supply the token below</div>
+          <div className={ styles.form }>
+            <Input
+              label='secure token'
+              hint='a generated token from Parity'
+              error={ validToken || (!token || !token.length) ? null : 'invalid signer token' }
+              value={ token }
+              onChange={ this.onChangeToken } />
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className={ styles.info }>
+        Connecting to the Parity Secure API.
+      </div>
+    );
+  }
+
+  renderPing () {
+    return (
+      <div className={ styles.info }>
+        Connecting to the Parity Node. If this informational message persists, please ensure that your Parity node is running and reachable on the network.
+      </div>
+    );
+  }
+
+  onChangeToken = (event, token) => {
+    const validToken = /[a-zA-Z0-9]{4}-[a-zA-Z0-9]{4}-[a-zA-Z0-9]{4}-[a-zA-Z0-9]{4}/.test(token);
+    this.setState({ token, validToken }, () => {
+      validToken && this.setToken();
+    });
+  }
+
+  setToken = () => {
+    const { api } = this.context;
+    const { token } = this.state;
+
+    api.updateToken(token);
+    this.setState({ token: '', validToken: false });
+  }
+}
+
+function mapStateToProps (state) {
+  const { isConnected, isConnecting, isPingable, needsToken } = state.nodeStatus;
+
+  return { isConnected, isConnecting, isPingable, needsToken };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Connection);
diff --git a/js/src/views/Connection/index.js b/js/src/views/Connection/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f33fc42fe62d548e09641e1089ce152d3e39b12a
--- /dev/null
+++ b/js/src/views/Connection/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './connection';
diff --git a/js/src/views/Contract/Events/events.js b/js/src/views/Contract/Events/events.js
new file mode 100644
index 0000000000000000000000000000000000000000..7ff0341b3d0abf8236e06142720eccf4e73098a0
--- /dev/null
+++ b/js/src/views/Contract/Events/events.js
@@ -0,0 +1,132 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+
+import { Container, ContainerTitle } from '../../../ui';
+
+import styles from '../contract.css';
+
+export default class Events extends Component {
+  static contextTypes = {
+    api: PropTypes.object
+  }
+
+  static propTypes = {
+    events: PropTypes.array,
+    isTest: PropTypes.bool
+  }
+
+  state = {
+    transactions: {}
+  }
+
+  componentDidMount () {
+    this.componentWillReceiveProps(this.props);
+  }
+
+  componentWillReceiveProps (newProps) {
+    this.retrieveTransactions(newProps.events);
+  }
+
+  render () {
+    const { events, isTest } = this.props;
+    const { transactions } = this.state;
+
+    if (!events || !events.length) {
+      return null;
+    }
+
+    const rows = events.map((event) => {
+      const transaction = transactions[event.transactionHash] || {};
+      const classes = `${styles.event} ${styles[event.state]}`;
+      const url = `https://${isTest ? 'testnet.' : ''}etherscan.io/tx/${event.transactionHash}`;
+      const keys = Object.keys(event.params).map((key, index) => {
+        return <div className={ styles.key } key={ `${event.key}_key_${index}` }>{ key }</div>;
+      });
+      const values = Object.values(event.params).map((value, index) => {
+        return (
+          <div className={ styles.value } key={ `${event.key}_val_${index}` }>
+            { this.renderValue(value) }
+          </div>
+        );
+      });
+
+      return (
+        <tr className={ classes } key={ event.key }>
+          <td>{ event.state === 'pending' ? 'pending' : event.blockNumber.toFormat(0) }</td>
+          <td className={ styles.txhash }>
+            <div>{ transaction.from }</div>
+            <a href={ url } target='_blank'>{ event.transactionHash }</a>
+          </td>
+          <td>
+            <div>{ event.type } =></div>
+            { keys }
+          </td>
+          <td>
+            <div>&nbsp;</div>
+            { values }
+          </td>
+        </tr>
+      );
+    });
+
+    return (
+      <Container>
+        <ContainerTitle title='events' />
+        <table className={ styles.events }>
+          <tbody>{ rows }</tbody>
+        </table>
+      </Container>
+    );
+  }
+
+  renderValue (value) {
+    const { api } = this.context;
+
+    if (api.util.isInstanceOf(value, BigNumber)) {
+      return value.toFormat(0);
+    } else if (api.util.isArray(value)) {
+      return api.util.bytesToHex(value);
+    }
+
+    return value.toString();
+  }
+
+  retrieveTransactions (events) {
+    const { api } = this.context;
+    const { transactions } = this.state;
+    const hashes = {};
+
+    events.forEach((event) => {
+      if (!hashes[event.transactionHash] && !transactions[event.transactionHash]) {
+        hashes[event.transactionHash] = true;
+      }
+    });
+
+    Promise
+      .all(Object.keys(hashes).map((hash) => api.eth.getTransactionByHash(hash)))
+      .then((newTransactions) => {
+        this.setState({
+          transactions: newTransactions.reduce((store, transaction) => {
+            transactions[transaction.hash] = transaction;
+            return transactions;
+          }, transactions)
+        });
+      });
+  }
+}
diff --git a/js/src/views/Contract/Events/index.js b/js/src/views/Contract/Events/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..88ad6d407c91e416ead5fef1cf8c93201cac529b
--- /dev/null
+++ b/js/src/views/Contract/Events/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './events';
diff --git a/js/src/views/Contract/Queries/index.js b/js/src/views/Contract/Queries/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..7a0dd9290e66de090467b87f89457659670caf2c
--- /dev/null
+++ b/js/src/views/Contract/Queries/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './queries';
diff --git a/js/src/views/Contract/Queries/inputQuery.js b/js/src/views/Contract/Queries/inputQuery.js
new file mode 100644
index 0000000000000000000000000000000000000000..29034ff6180ff0b57c8d04030b40e872377b32ca
--- /dev/null
+++ b/js/src/views/Contract/Queries/inputQuery.js
@@ -0,0 +1,186 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+import Chip from 'material-ui/Chip';
+import LinearProgress from 'material-ui/LinearProgress';
+import { Card, CardActions, CardTitle, CardText } from 'material-ui/Card';
+
+import { Button, Input } from '../../../ui';
+
+import styles from './queries.css';
+
+export default class InputQuery extends Component {
+  static contextTypes = {
+    api: PropTypes.object
+  }
+
+  static propTypes = {
+    contract: PropTypes.object.isRequired,
+    inputs: PropTypes.array.isRequired,
+    outputs: PropTypes.array.isRequired,
+    name: PropTypes.string.isRequired,
+    className: PropTypes.string
+  }
+
+  state = {
+    isValid: true,
+    results: [],
+    values: {}
+  }
+
+  render () {
+    const { name, className } = this.props;
+
+    return (
+      <Card
+        className={ className }
+        >
+        <CardTitle
+          className={ styles.methodTitle }
+          title={ name }
+        />
+        { this.renderContent() }
+      </Card>
+    );
+  }
+
+  renderContent () {
+    const { inputs } = this.props;
+
+    const { isValid } = this.state;
+
+    const inputsFields = inputs
+      .map(input => this.renderInput(input));
+
+    return (
+      <div>
+        <CardText
+          className={ styles.methodContent }
+        >
+          <div className={ styles.methodResults }>
+            { this.renderResults() }
+          </div>
+          { inputsFields }
+        </CardText>
+        <CardActions>
+          <Button
+            label='Execute'
+            disabled={ !isValid }
+            onClick={ this.onClick } />
+        </CardActions>
+      </div>
+    );
+  }
+
+  renderResults () {
+    const { results, isLoading } = this.state;
+    const { outputs } = this.props;
+
+    if (isLoading) {
+      return (<LinearProgress mode='indeterminate' />);
+    }
+
+    if (!results || results.length < 1) return null;
+
+    return outputs
+      .map((out, index) => ({
+        name: out.name,
+        value: results[index],
+        display: this.renderValue(results[index])
+      }))
+      .sort((outA, outB) => outA.display.length - outB.display.length)
+      .map((out, index) => (<div key={ index }>
+        <div className={ styles.queryResultName }>{ out.name }</div>
+        <Chip className={ styles.queryValue }>
+          { out.display }
+        </Chip>
+        <br />
+      </div>));
+  }
+
+  renderInput (input) {
+    const { name, type } = input;
+    const label = `${name}: ${type}`;
+
+    const onChange = (event) => {
+      const value = event.target.value;
+      const { values } = this.state;
+
+      this.setState({
+        values: {
+          ...values,
+          [ name ]: value
+        }
+      });
+    };
+
+    return (
+      <div key={ name }>
+        <Input
+          hint={ type }
+          label={ label }
+          required
+          onChange={ onChange }
+        />
+      </div>
+    );
+  }
+
+  renderValue (value) {
+    if (!value) return 'no data';
+
+    const { api } = this.context;
+
+    if (api.util.isInstanceOf(value, BigNumber)) {
+      return value.toFormat(0);
+    } else if (api.util.isArray(value)) {
+      return api.util.bytesToHex(value);
+    }
+
+    return value.toString();
+  }
+
+  onClick = () => {
+    const { values } = this.state;
+    const { inputs, contract, name, outputs } = this.props;
+
+    this.setState({
+      isLoading: true,
+      results: []
+    });
+
+    const inputValues = inputs.map(input => values[input.name]);
+
+    contract
+      .instance[name]
+      .call({}, inputValues)
+      .then(results => {
+        if (outputs.length === 1) {
+          results = [ results ];
+        }
+
+        this.setState({
+          isLoading: false,
+          results
+        });
+      })
+      .catch(e => {
+        console.error(`sending ${name} with params`, inputValues, e);
+      });
+  };
+}
diff --git a/js/src/views/Contract/Queries/queries.css b/js/src/views/Contract/Queries/queries.css
new file mode 100644
index 0000000000000000000000000000000000000000..0caa1006f58debdd88f88ba34d5948c07d5a837f
--- /dev/null
+++ b/js/src/views/Contract/Queries/queries.css
@@ -0,0 +1,87 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.vMethods, .hMethods, .methods {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.container {
+  align-items: flex-start;
+  display: border-box;
+}
+
+.container .method {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+  margin: 0.5em;
+}
+
+.vMethods {
+  flex-direction: column;
+  width: 33.3333%;
+}
+
+.hMethods {
+  flex: 1;
+  flex-direction: row;
+  width: 66.6666%;
+}
+
+.hMethods .container {
+  width: 50%;
+}
+
+.methodTitle {
+  padding-bottom: 8px !important;
+  padding-top: 8px !important;
+}
+
+.methodContent {
+  padding-top: 0 !important;
+  padding-bottom: 8px !important;
+}
+
+.methodResults {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 24rem;
+  justify-content: space-around;
+}
+
+.methodResults > div {
+  margin: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+}
+
+.queryValue, .queryValue * {
+  user-select: text !important;
+  max-width: 100%;
+  box-sizing: border-box;
+  white-space: normal !important;
+  overflow-wrap: break-word !important;
+}
+
+.queryValue:hover {
+  cursor: text !important;
+}
+
+.queryResultName {
+  margin-bottom: 0.25rem;
+}
diff --git a/js/src/views/Contract/Queries/queries.js b/js/src/views/Contract/Queries/queries.js
new file mode 100644
index 0000000000000000000000000000000000000000..915acd258f24e81da52ce94649c5596cf5cc2055
--- /dev/null
+++ b/js/src/views/Contract/Queries/queries.js
@@ -0,0 +1,132 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+import Chip from 'material-ui/Chip';
+import { Card, CardTitle, CardText } from 'material-ui/Card';
+
+import InputQuery from './inputQuery';
+import { Container, ContainerTitle } from '../../../ui';
+
+import styles from './queries.css';
+
+export default class Queries extends Component {
+  static contextTypes = {
+    api: PropTypes.object
+  }
+
+  static propTypes = {
+    contract: PropTypes.object,
+    values: PropTypes.object
+  }
+
+  render () {
+    const { contract } = this.props;
+
+    if (!contract) {
+      return null;
+    }
+
+    const queries = contract.functions
+      .filter((fn) => fn.constant)
+      .sort(this._sortEntries);
+
+    const noInputQueries = queries
+      .slice()
+      .filter((fn) => fn.inputs.length === 0)
+      .map((fn) => this.renderQuery(fn));
+
+    const withInputQueries = queries
+      .slice()
+      .filter((fn) => fn.inputs.length > 0)
+      .map((fn) => this.renderInputQuery(fn));
+
+    return (
+      <Container>
+        <ContainerTitle title='queries' />
+        <div className={ styles.methods }>
+          <div className={ styles.vMethods }>
+            { noInputQueries }
+          </div>
+          <div className={ styles.hMethods }>
+            { withInputQueries }
+          </div>
+        </div>
+      </Container>
+    );
+  }
+
+  renderInputQuery (fn) {
+    const { abi, name } = fn;
+    const { contract } = this.props;
+
+    return (
+      <div className={ styles.container } key={ fn.signature }>
+        <InputQuery
+          className={ styles.method }
+          inputs={ abi.inputs }
+          outputs={ abi.outputs }
+          name={ name }
+          contract={ contract }
+        />
+      </div>
+    );
+  }
+
+  renderQuery (fn) {
+    const { values } = this.props;
+
+    return (
+      <div className={ styles.container } key={ fn.signature }>
+        <Card className={ styles.method }>
+          <CardTitle
+            className={ styles.methodTitle }
+            title={ fn.name }
+          />
+          <CardText
+            className={ styles.methodContent }
+          >
+            { this.renderValue(values[fn.name]) }
+          </CardText>
+        </Card>
+      </div>
+    );
+  }
+
+  renderValue (value) {
+    if (!value) return null;
+
+    const { api } = this.context;
+    let valueToDisplay = value.toString();
+
+    if (api.util.isInstanceOf(value, BigNumber)) {
+      valueToDisplay = value.toFormat(0);
+    } else if (api.util.isArray(value)) {
+      valueToDisplay = api.util.bytesToHex(value);
+    }
+
+    return (
+      <Chip className={ styles.queryValue }>
+        { valueToDisplay }
+      </Chip>
+    );
+  }
+
+  _sortEntries (a, b) {
+    return a.name.localeCompare(b.name);
+  }
+}
diff --git a/js/src/views/Contract/contract.css b/js/src/views/Contract/contract.css
new file mode 100644
index 0000000000000000000000000000000000000000..6956b8c50106ccd7ed1591af7112c038015b5ed4
--- /dev/null
+++ b/js/src/views/Contract/contract.css
@@ -0,0 +1,58 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.contract {
+}
+
+.events {
+  width: 100%;
+  border: none;
+  border-spacing: 0;
+}
+
+.event {
+  vertical-align: top;
+  line-height: 26px;
+}
+
+.event td {
+  vertical-align: top;
+  padding: 1em 0.5em;
+}
+
+.txhash {
+  text-overflow: ellipsis;
+}
+
+.key {
+  text-align: right;
+  color: #aaa;
+}
+
+.value {
+}
+
+.event td div {
+  white-space: nowrap;
+}
+
+.mined {
+}
+
+.pending {
+  opacity: 0.5;
+}
diff --git a/js/src/views/Contract/contract.js b/js/src/views/Contract/contract.js
new file mode 100644
index 0000000000000000000000000000000000000000..7a1889c1994287ad104c24336b10389ffe165582
--- /dev/null
+++ b/js/src/views/Contract/contract.js
@@ -0,0 +1,365 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import ActionDelete from 'material-ui/svg-icons/action/delete';
+import AvPlayArrow from 'material-ui/svg-icons/av/play-arrow';
+import ContentCreate from 'material-ui/svg-icons/content/create';
+
+import { newError } from '../../redux/actions';
+import { EditMeta, ExecuteContract } from '../../modals';
+import { Actionbar, Button, Page } from '../../ui';
+
+import Header from '../Account/Header';
+import Delete from '../Address/Delete';
+
+import Events from './Events';
+import Queries from './Queries';
+
+import styles from './contract.css';
+
+class Contract extends Component {
+  static contextTypes = {
+    api: React.PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    accounts: PropTypes.object,
+    balances: PropTypes.object,
+    contracts: PropTypes.object,
+    isTest: PropTypes.bool,
+    params: PropTypes.object
+  }
+
+  state = {
+    contract: null,
+    fromAddress: '',
+    showDeleteDialog: false,
+    showEditDialog: false,
+    showExecuteDialog: false,
+    subscriptionId: -1,
+    blockSubscriptionId: -1,
+    allEvents: [],
+    minedEvents: [],
+    pendingEvents: [],
+    queryValues: {}
+  }
+
+  componentDidMount () {
+    const { api } = this.context;
+
+    this.attachContract(this.props);
+    this.setBaseAccount(this.props);
+
+    api
+      .subscribe('eth_blockNumber', this.queryContract)
+      .then(blockSubscriptionId => this.setState({ blockSubscriptionId }));
+  }
+
+  componentWillReceiveProps (newProps) {
+    const { accounts, contracts } = newProps;
+
+    if (Object.keys(contracts).length !== Object.keys(this.props.contracts).length) {
+      this.attachContract(newProps);
+    }
+
+    if (Object.keys(accounts).length !== Object.keys(this.props.accounts).length) {
+      this.setBaseAccount(newProps);
+    }
+  }
+
+  componentWillUnmount () {
+    const { api } = this.context;
+    const { subscriptionId, blockSubscriptionId, contract } = this.state;
+
+    api.unsubscribe('eth_blockNumber', blockSubscriptionId);
+    contract.unsubscribe(subscriptionId);
+  }
+
+  render () {
+    const { balances, contracts, params, isTest } = this.props;
+    const { allEvents, contract, queryValues } = this.state;
+    const account = contracts[params.address];
+    const balance = balances[params.address];
+
+    if (!account) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.contract }>
+        { this.renderActionbar(account) }
+        { this.renderDeleteDialog(account) }
+        { this.renderEditDialog(account) }
+        { this.renderExecuteDialog() }
+        <Page>
+          <Header
+            isTest={ isTest }
+            account={ account }
+            balance={ balance } />
+          <Queries
+            contract={ contract }
+            values={ queryValues } />
+          <Events
+            isTest={ isTest }
+            events={ allEvents } />
+        </Page>
+      </div>
+    );
+  }
+
+  renderActionbar (account) {
+    const buttons = [
+      <Button
+        key='execute'
+        icon={ <AvPlayArrow /> }
+        label='execute'
+        onClick={ this.showExecuteDialog } />,
+      <Button
+        key='editmeta'
+        icon={ <ContentCreate /> }
+        label='edit'
+        onClick={ this.onEditClick } />,
+      <Button
+        key='delete'
+        icon={ <ActionDelete /> }
+        label='delete contract'
+        onClick={ this.showDeleteDialog } />
+    ];
+
+    return (
+      <Actionbar
+        title='Contract Information'
+        buttons={ !account || account.meta.deleted ? [] : buttons } />
+    );
+  }
+
+  renderDeleteDialog (account) {
+    const { showDeleteDialog } = this.state;
+
+    return (
+      <Delete
+        account={ account }
+        visible={ showDeleteDialog }
+        route='/contracts'
+        onClose={ this.closeDeleteDialog } />
+    );
+  }
+
+  renderEditDialog (account) {
+    const { showEditDialog } = this.state;
+
+    if (!showEditDialog) {
+      return null;
+    }
+
+    return (
+      <EditMeta
+        account={ account }
+        keys={ ['description'] }
+        onClose={ this.onEditClick } />
+    );
+  }
+
+  renderExecuteDialog () {
+    const { contract, fromAddress, showExecuteDialog } = this.state;
+    const { accounts } = this.props;
+
+    if (!showExecuteDialog) {
+      return null;
+    }
+
+    return (
+      <ExecuteContract
+        accounts={ accounts }
+        contract={ contract }
+        fromAddress={ fromAddress }
+        onClose={ this.closeExecuteDialog }
+        onFromAddressChange={ this.onFromAddressChange } />
+    );
+  }
+
+  queryContract = () => {
+    const { contract } = this.state;
+
+    if (!contract) {
+      return;
+    }
+
+    const queries = contract.functions
+      .filter((fn) => fn.constant)
+      .filter((fn) => !fn.inputs.length);
+
+    Promise
+      .all(queries.map((query) => query.call()))
+      .then(results => {
+        const values = queries.reduce((object, fn, idx) => {
+          const key = fn.name;
+          object[key] = results[idx];
+          return object;
+        }, {});
+
+        this.setState({ queryValues: values });
+      })
+      .catch((error) => {
+        console.error('queryContract', error);
+      });
+  }
+
+  onEditClick = () => {
+    this.setState({
+      showEditDialog: !this.state.showEditDialog
+    });
+  }
+
+  closeDeleteDialog = () => {
+    this.setState({ showDeleteDialog: false });
+  }
+
+  showDeleteDialog = () => {
+    this.setState({ showDeleteDialog: true });
+  }
+
+  closeExecuteDialog = () => {
+    this.setState({ showExecuteDialog: false });
+  }
+
+  showExecuteDialog = () => {
+    this.setState({ showExecuteDialog: true });
+  }
+
+  _sortEvents = (a, b) => {
+    return b.blockNumber.cmp(a.blockNumber) || b.logIndex.cmp(a.logIndex);
+  }
+
+  _logToEvent = (log) => {
+    const { api } = this.context;
+    const key = api.util.sha3(JSON.stringify(log));
+    const { address, blockNumber, logIndex, transactionHash, transactionIndex, params, type } = log;
+
+    return {
+      type: log.event,
+      state: type,
+      address,
+      blockNumber,
+      logIndex,
+      transactionHash,
+      transactionIndex,
+      params,
+      key
+    };
+  }
+
+  _receiveEvents = (error, logs) => {
+    if (error) {
+      console.error('_receiveEvents', error);
+      return;
+    }
+
+    const events = logs.map(this._logToEvent);
+    const minedEvents = events
+      .filter((event) => event.state === 'mined')
+      .reverse()
+      .concat(this.state.minedEvents)
+      .sort(this._sortEvents);
+    const pendingEvents = events
+      .filter((event) => event.state === 'pending')
+      .reverse()
+      .concat(this.state.pendingEvents.filter((pending) => {
+        return !events.find((event) => {
+          const isMined = (event.state === 'mined') && (event.transactionHash === pending.transactionHash);
+          const isPending = (event.state === 'pending') && (event.key === pending.key);
+
+          return isMined || isPending;
+        });
+      }))
+      .sort(this._sortEvents);
+    const allEvents = pendingEvents.concat(minedEvents);
+
+    this.setState({
+      allEvents,
+      minedEvents,
+      pendingEvents
+    });
+  }
+
+  attachContract (props) {
+    if (!props) {
+      return;
+    }
+
+    const { api } = this.context;
+    const { contracts, params } = props;
+    const account = contracts[params.address];
+
+    if (!account) {
+      return;
+    }
+
+    const contract = api.newContract(account.meta.abi, params.address);
+    contract
+      .subscribe(null, { limit: 50, fromBlock: 0, toBlock: 'pending' }, this._receiveEvents)
+      .then((subscriptionId) => {
+        this.setState({ subscriptionId });
+      });
+
+    this.setState({ contract }, this.queryContract);
+  }
+
+  setBaseAccount (props) {
+    const { fromAccount } = this.state;
+
+    if (!props || fromAccount) {
+      return;
+    }
+
+    const { accounts } = props;
+
+    this.setState({
+      fromAddress: Object.keys(accounts)[0]
+    });
+  }
+
+  onFromAddressChange = (event, fromAddress) => {
+    this.setState({
+      fromAddress
+    });
+  }
+}
+
+function mapStateToProps (state) {
+  const { accounts, contracts } = state.personal;
+  const { balances } = state.balances;
+  const { isTest } = state.nodeStatus;
+
+  return {
+    isTest,
+    accounts,
+    contracts,
+    balances
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({ newError }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Contract);
diff --git a/js/src/views/Contract/index.js b/js/src/views/Contract/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..18051a69f910ea8d9baa3a541e8ed553f3fb0966
--- /dev/null
+++ b/js/src/views/Contract/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './contract';
diff --git a/js/src/views/Contracts/Summary/index.js b/js/src/views/Contracts/Summary/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..7cc23b215d3cdc8ba06503358e2fed8901afb591
--- /dev/null
+++ b/js/src/views/Contracts/Summary/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './summary';
diff --git a/js/src/views/Contracts/Summary/summary.js b/js/src/views/Contracts/Summary/summary.js
new file mode 100644
index 0000000000000000000000000000000000000000..4df795797a09e5269d5579fe1f668ecfff4c0691
--- /dev/null
+++ b/js/src/views/Contracts/Summary/summary.js
@@ -0,0 +1,52 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
+
+import { Container, ContainerTitle, IdentityIcon, IdentityName } from '../../../ui';
+
+export default class Summary extends Component {
+  static contextTypes = {
+    api: React.PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    contract: PropTypes.object.isRequired,
+    children: PropTypes.node
+  }
+
+  render () {
+    const contract = this.props.contract;
+
+    if (!contract) {
+      return null;
+    }
+
+    const viewLink = `/app/${contract.address}`;
+
+    return (
+      <Container>
+        <IdentityIcon
+          address={ contract.address } />
+        <ContainerTitle
+          title={ <Link to={ viewLink }>{ <IdentityName address={ contract.address } unknown /> }</Link> }
+          byline={ contract.address } />
+        { this.props.children }
+      </Container>
+    );
+  }
+}
diff --git a/js/src/views/Contracts/contracts.css b/js/src/views/Contracts/contracts.css
new file mode 100644
index 0000000000000000000000000000000000000000..eab0858e70e43c10ddac1f097d4065a22eb9fc99
--- /dev/null
+++ b/js/src/views/Contracts/contracts.css
@@ -0,0 +1,18 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.contracts {
+}
diff --git a/js/src/views/Contracts/contracts.js b/js/src/views/Contracts/contracts.js
new file mode 100644
index 0000000000000000000000000000000000000000..92ab73cb1f733f6d98d61866d815022f6da0567e
--- /dev/null
+++ b/js/src/views/Contracts/contracts.js
@@ -0,0 +1,154 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import ContentAdd from 'material-ui/svg-icons/content/add';
+
+import { Actionbar, Button, Page } from '../../ui';
+import { AddContract, DeployContract } from '../../modals';
+
+import List from '../Accounts/List';
+
+import styles from './contracts.css';
+
+class Contracts extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    balances: PropTypes.object,
+    accounts: PropTypes.object,
+    contracts: PropTypes.object,
+    hasContracts: PropTypes.bool
+  }
+
+  state = {
+    addContract: false,
+    deployContract: false
+  }
+
+  render () {
+    const { contracts, hasContracts, balances } = this.props;
+
+    return (
+      <div className={ styles.contracts }>
+        { this.renderActionbar() }
+        { this.renderAddContract() }
+        { this.renderAddContract() }
+        { this.renderDeployContract() }
+        <Page>
+          <List
+            link='contract'
+            accounts={ contracts }
+            balances={ balances }
+            empty={ !hasContracts } />
+        </Page>
+      </div>
+    );
+  }
+
+  renderActionbar () {
+    const buttons = [
+      <Button
+        key='addContract'
+        icon={ <ContentAdd /> }
+        label='watch contract'
+        onClick={ this.onAddContract } />,
+      <Button
+        key='deployContract'
+        icon={ <ContentAdd /> }
+        label='deploy contract'
+        onClick={ this.onDeployContract } />
+    ];
+
+    return (
+      <Actionbar
+        className={ styles.toolbar }
+        title='Contracts'
+        buttons={ buttons } />
+    );
+  }
+
+  renderAddContract () {
+    const { contracts } = this.props;
+    const { addContract } = this.state;
+
+    if (!addContract) {
+      return null;
+    }
+
+    return (
+      <AddContract
+        contracts={ contracts }
+        onClose={ this.onAddContractClose } />
+    );
+  }
+
+  renderDeployContract () {
+    const { accounts } = this.props;
+    const { deployContract } = this.state;
+
+    if (!deployContract) {
+      return null;
+    }
+
+    return (
+      <DeployContract
+        accounts={ accounts }
+        onClose={ this.onDeployContractClose } />
+    );
+  }
+
+  onDeployContractClose = () => {
+    this.setState({ deployContract: false });
+  }
+
+  onDeployContract = () => {
+    this.setState({ deployContract: true });
+  }
+
+  onAddContractClose = () => {
+    this.setState({ addContract: false });
+  }
+
+  onAddContract = () => {
+    this.setState({ addContract: true });
+  }
+}
+
+function mapStateToProps (state) {
+  const { accounts, contracts, hasContracts } = state.personal;
+  const { balances } = state.balances;
+
+  return {
+    accounts,
+    contracts,
+    hasContracts,
+    balances
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Contracts);
diff --git a/js/src/views/Contracts/index.js b/js/src/views/Contracts/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..075837ce6518cda55b6cb1b885a46d0b6b77eefa
--- /dev/null
+++ b/js/src/views/Contracts/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './contracts';
diff --git a/js/src/views/Dapp/dapp.css b/js/src/views/Dapp/dapp.css
new file mode 100644
index 0000000000000000000000000000000000000000..e95f9d0ae926ce820d70eb72949e4fa8db276a42
--- /dev/null
+++ b/js/src/views/Dapp/dapp.css
@@ -0,0 +1,22 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.frame {
+  border: 0;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
diff --git a/js/src/views/Dapp/dapp.js b/js/src/views/Dapp/dapp.js
new file mode 100644
index 0000000000000000000000000000000000000000..a8198c7344db0b5054c1c685a5c6d222a47b12ab
--- /dev/null
+++ b/js/src/views/Dapp/dapp.js
@@ -0,0 +1,48 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './dapp.css';
+
+const hostname = `${window.location.hostname}:${window.location.port}`;
+const dapphost = (hostname === 'localhost:3000') || (hostname === '127.0.0.1:3000')
+  ? hostname
+  : '127.0.0.1:8080/ui';
+
+export default class Dapp extends Component {
+  static propTypes = {
+    params: PropTypes.object
+  };
+
+  render () {
+    const { name, type } = this.props.params;
+    const src = type === 'global'
+      ? `http://${dapphost}/${name}.html`
+      : `http://127.0.0.1:8080/${name}/`;
+
+    return (
+      <iframe
+        className={ styles.frame }
+        frameBorder={ 0 }
+        name={ name }
+        sandbox='allow-scripts'
+        scrolling='auto'
+        src={ src }>
+      </iframe>
+    );
+  }
+}
diff --git a/js/src/views/Dapp/index.js b/js/src/views/Dapp/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..6fbb5df27387c3425757f25ef433f1a247a313d0
--- /dev/null
+++ b/js/src/views/Dapp/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './dapp';
diff --git a/js/src/views/Dapps/Summary/index.js b/js/src/views/Dapps/Summary/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..7cc23b215d3cdc8ba06503358e2fed8901afb591
--- /dev/null
+++ b/js/src/views/Dapps/Summary/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './summary';
diff --git a/js/src/views/Dapps/Summary/summary.css b/js/src/views/Dapps/Summary/summary.css
new file mode 100644
index 0000000000000000000000000000000000000000..7c75058957c349580b6c0e6fc758f8483cb83108
--- /dev/null
+++ b/js/src/views/Dapps/Summary/summary.css
@@ -0,0 +1,43 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  position: relative;
+}
+
+.image {
+  position: absolute;
+  top: 1.5em;
+  left: 1.5em;
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+}
+
+.description {
+  margin-left: 72px;
+}
+
+.title {
+  mragin-bottom: 0.5em;
+}
+
+.author, .version {
+  font-size: 0.75em;
+  opacity: 0.5;
+  margin-top: 0.5em;
+}
diff --git a/js/src/views/Dapps/Summary/summary.js b/js/src/views/Dapps/Summary/summary.js
new file mode 100644
index 0000000000000000000000000000000000000000..572ee70799ba8cee6f8b08af8c36d3689348dec4
--- /dev/null
+++ b/js/src/views/Dapps/Summary/summary.js
@@ -0,0 +1,60 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
+
+import { Container, ContainerTitle } from '../../../ui';
+
+import styles from './summary.css';
+
+export default class Summary extends Component {
+  static contextTypes = {
+    api: React.PropTypes.object
+  }
+
+  static propTypes = {
+    app: PropTypes.object.isRequired,
+    children: PropTypes.node
+  }
+
+  render () {
+    const { app } = this.props;
+
+    if (!app) {
+      return null;
+    }
+
+    const url = `/app/${app.local ? 'local' : 'global'}/${app.url}`;
+    const image = app.image
+      ? <img src={ app.image } className={ styles.image } />
+      : <div className={ styles.image }>&nbsp;</div>;
+
+    return (
+      <Container className={ styles.container }>
+        { image }
+        <div className={ styles.description }>
+          <ContainerTitle
+            className={ styles.title }
+            title={ <Link to={ url }>{ app.name }</Link> }
+            byline={ app.description } />
+          <div className={ styles.author }>{ app.author }, v{ app.version }</div>
+          { this.props.children }
+        </div>
+      </Container>
+    );
+  }
+}
diff --git a/js/src/views/Dapps/dapps.css b/js/src/views/Dapps/dapps.css
new file mode 100644
index 0000000000000000000000000000000000000000..46cb0e9d45769f7412d84a0ffe827e5d619e816a
--- /dev/null
+++ b/js/src/views/Dapps/dapps.css
@@ -0,0 +1,40 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.list+.list {
+  margin-top: -0.25em;
+}
+
+.item {
+  flex: 0 1 50%;
+  width: 50%;
+  position: relative;
+  box-sizing: border-box;
+  padding-bottom: 0.25em;
+}
+
+.item:nth-child(odd) {
+  padding-right: 0.125em;
+}
+
+.item:nth-child(even) {
+  padding-left: 0.125em;
+}
diff --git a/js/src/views/Dapps/dapps.js b/js/src/views/Dapps/dapps.js
new file mode 100644
index 0000000000000000000000000000000000000000..4edbbfb1216e435252ed2e1ba9416b86bc5ab1ae
--- /dev/null
+++ b/js/src/views/Dapps/dapps.js
@@ -0,0 +1,168 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { sha3 } from '../../api/util/sha3';
+import Contracts from '../../contracts';
+import { hashToImageUrl } from '../../redux/util';
+import { Actionbar, Page } from '../../ui';
+
+import Summary from './Summary';
+
+import styles from './dapps.css';
+
+const APPS = [
+  {
+    name: 'Token Deployment',
+    description: 'Deploy new basic tokens that you are able to send around',
+    author: 'Ethcore <admin@ethcore.io>',
+    url: 'basiccoin',
+    version: '1.0.0'
+  },
+  {
+    name: 'GAVcoin',
+    description: 'Manage your GAVcoins, the hottest new property in crypto',
+    author: 'Ethcore <admin@ethcore.io>',
+    url: 'gavcoin',
+    version: '1.0.0'
+  },
+  {
+    name: 'Registry',
+    description: 'A global registry of addresses on the network',
+    author: 'Ethcore <admin@ethcore.io>',
+    url: 'registry',
+    version: '1.0.0'
+  },
+  {
+    name: 'Token Registry',
+    description: 'A registry of transactable tokens on the network',
+    author: 'Ethcore <admin@ethcore.io>',
+    url: 'tokenreg',
+    version: '1.0.0'
+  },
+  {
+    name: 'Method Registry',
+    description: 'A registry of method signatures for lookups on transactions',
+    author: 'Ethcore <admin@ethcore.io>',
+    url: 'signaturereg',
+    version: '1.0.0'
+  },
+  {
+    name: 'GitHub Hint',
+    description: 'A mapping of GitHub URLs to hashes for use in contracts as references',
+    author: 'Ethcore <admin@ethcore.io>',
+    url: 'githubhint',
+    version: '1.0.0'
+  }
+];
+
+APPS.forEach((app) => {
+  app.id = sha3(app.url);
+  console.log(`dapps ${app.id} -> ${app.url}`);
+});
+
+export default class Dapps extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  state = {
+    globalApps: APPS,
+    localApps: []
+  }
+
+  componentDidMount () {
+    this.loadLocalApps();
+    this.loadImages();
+  }
+
+  render () {
+    return (
+      <div>
+        <Actionbar
+          title='Decentralized Applications' />
+        <Page>
+          <div className={ styles.list }>
+            { this.renderGlobalApps() }
+          </div>
+          <div className={ styles.list }>
+            { this.renderLocalApps() }
+          </div>
+        </Page>
+      </div>
+    );
+  }
+
+  renderApp = (app) => {
+    return (
+      <div
+        className={ styles.item }
+        key={ app.url }>
+        <Summary app={ app } />
+      </div>
+    );
+  }
+
+  renderGlobalApps () {
+    const { globalApps } = this.state;
+
+    return globalApps.map(this.renderApp);
+  }
+
+  renderLocalApps () {
+    const { localApps } = this.state;
+
+    return localApps.map(this.renderApp);
+  }
+
+  loadLocalApps () {
+    fetch('http://127.0.0.1:8080/api/apps', { method: 'GET' })
+      .then((response) => response.ok ? response.json() : [])
+      .then((_localApps) => {
+        const localApps = _localApps
+          .filter((app) => !['home', 'status', 'parity', 'wallet'].includes(app.id))
+          .map((app) => {
+            app.image = `/app/${app.id}/${app.iconUrl}`;
+            app.url = app.id;
+            app.local = true;
+            return app;
+          });
+        console.log('loadLocalApps', localApps);
+        this.setState({ localApps });
+      })
+      .catch((error) => {
+        console.error('loadLocalApps', error);
+      });
+  }
+
+  loadImages () {
+    const { globalApps } = this.state;
+    const { dappReg } = Contracts.get();
+
+    Promise
+      .all(globalApps.map((app) => dappReg.getImage(app.id)))
+      .then((images) => {
+        globalApps.forEach((app, index) => {
+          app.image = hashToImageUrl(images[index]);
+        });
+        this.setState({ globalApps });
+      })
+      .catch((error) => {
+        console.error('loadImages', error);
+      });
+  }
+}
diff --git a/js/src/views/Dapps/index.js b/js/src/views/Dapps/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..38a33260f5c0e43f56d7b3a3aac4e5e3d25fe5b4
--- /dev/null
+++ b/js/src/views/Dapps/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './dapps';
diff --git a/js/src/views/ParityBar/index.js b/js/src/views/ParityBar/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..98cdb6746651930280c9bb98a7add2ba9f82bb2d
--- /dev/null
+++ b/js/src/views/ParityBar/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './parityBar';
diff --git a/js/src/views/ParityBar/parityBar.css b/js/src/views/ParityBar/parityBar.css
new file mode 100644
index 0000000000000000000000000000000000000000..0c6de9f5d1a462f6838f1da12ac7733e50940dfa
--- /dev/null
+++ b/js/src/views/ParityBar/parityBar.css
@@ -0,0 +1,153 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.bar, .expanded {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  font-size: 16px;
+  font-family: 'Roboto', sans-serif;
+  z-index: 10001;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(255, 255, 255, 0.5);
+  z-index: 10000;
+}
+
+.bar {
+  vertical-align: middle;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.expanded {
+  right: 16px;
+  width: 964px;
+  height: 288px;
+  border-radius: 4px 4px 0 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.expanded .content {
+  flex: 1;
+  overflow: auto;
+}
+
+.corner {
+  position: absolute;
+  bottom: 0;
+  right: 16px;
+  border-radius: 4px 4px 0 0;
+}
+
+.cornercolor {
+  background: rgba(0, 0, 0, 0.5);
+  padding: 0.5em 1em;
+}
+
+.link {
+  white-space: nowrap;
+  border: none;
+  outline: none !important;
+  color: white !important;
+  display: inline-block;
+}
+
+.link img, .link svg {
+  height: 24px !important;
+  width: 24px !important;
+  margin: 2px 0.5em 0 0;
+}
+
+.link+.link {
+  margin-left: 1em;
+}
+
+.button {
+  overflow: visible !important;
+}
+
+.label {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.labelText {
+  text-transform: uppercase;
+  vertical-align: top;
+}
+
+.labelBubble {
+  position: absolute;
+  top: 0px;
+  right: -10px;
+}
+
+.header {
+  height: 36px;
+  padding: 0.5em 1em;
+  background: rgba(0, 0, 0, 0.25);
+  margin-bottom: 0;
+}
+
+.header:after {
+  clear: both;
+}
+
+.header button,
+.corner button {
+  color: white !important;
+}
+
+.header svg ,
+.coner svg {
+  fill: white !important;
+}
+
+.body {
+  padding: 1em;
+}
+
+.title {
+  float: left;
+}
+
+.actions {
+  float: right;
+}
+
+.actions div {
+  margin-left: 1em;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.parityIcon, .signerIcon {
+  width: 24px;
+  height: 24px;
+  vertical-align: middle;
+  margin-left: 12px;
+}
diff --git a/js/src/views/ParityBar/parityBar.js b/js/src/views/ParityBar/parityBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..dc514355de90168f3ff0bf587237cd589428b3f4
--- /dev/null
+++ b/js/src/views/ParityBar/parityBar.js
@@ -0,0 +1,170 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+
+import { Badge, Button, ContainerTitle, ParityBackground, SignerIcon } from '../../ui';
+import { Embedded as Signer } from '../Signer';
+
+import imagesEthcoreBlock from '../../../assets/images/ethcore-block.png';
+import styles from './parityBar.css';
+
+class ParityBar extends Component {
+  static propTypes = {
+    pending: PropTypes.array,
+    dapp: PropTypes.bool
+  }
+
+  state = {
+    opened: false
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const count = this.props.pending.length;
+    const newCount = nextProps.pending.length;
+
+    if (count === newCount) {
+      return;
+    }
+
+    if (count < newCount) {
+      this.setState({ opened: true });
+    } else if (newCount === 0 && count === 1) {
+      this.setState({ opened: false });
+    }
+  }
+
+  render () {
+    const { opened } = this.state;
+
+    return opened
+      ? this.renderExpanded()
+      : this.renderBar();
+  }
+
+  renderBar () {
+    const { dapp } = this.props;
+
+    if (!dapp) {
+      return null;
+    }
+
+    const parityIcon = (
+      <img
+        src={ imagesEthcoreBlock }
+        className={ styles.parityIcon } />
+    );
+
+    return (
+      <div className={ styles.bar }>
+        <ParityBackground className={ styles.corner }>
+          <div className={ styles.cornercolor }>
+            <Link to='/apps'>
+              <Button
+                className={ styles.button }
+                icon={ parityIcon }
+                label={ this.renderLabel('Parity') } />
+            </Link>
+            <Button
+              className={ styles.button }
+              icon={ <SignerIcon className={ styles.signerIcon } /> }
+              label={ this.renderSignerLabel() }
+              onClick={ this.toggleDisplay } />
+          </div>
+        </ParityBackground>
+      </div>
+    );
+  }
+
+  renderExpanded () {
+    return (
+      <div className={ styles.overlay }>
+        <ParityBackground className={ styles.expanded }>
+          <div className={ styles.header }>
+            <div className={ styles.title }>
+              <ContainerTitle title='Parity Signer: Pending' />
+            </div>
+            <div className={ styles.actions }>
+              <Button
+                icon={ <ContentClear /> }
+                label='Close'
+                onClick={ this.toggleDisplay } />
+            </div>
+          </div>
+          <div className={ styles.content }>
+            <Signer />
+          </div>
+        </ParityBackground>
+      </div>
+    );
+  }
+
+  renderLabel (name, bubble) {
+    return (
+      <div className={ styles.label }>
+        <div className={ styles.labelText }>
+          { name }
+        </div>
+        { bubble }
+      </div>
+    );
+  }
+
+  renderSignerLabel () {
+    const { pending } = this.props;
+    let bubble = null;
+
+    if (pending && pending.length) {
+      bubble = (
+        <Badge
+          color='red'
+          className={ styles.labelBubble }
+          value={ pending.length } />
+      );
+    }
+
+    return this.renderLabel('Signer', bubble);
+  }
+
+  toggleDisplay = () => {
+    const { opened } = this.state;
+
+    this.setState({
+      opened: !opened
+    });
+  }
+}
+
+function mapStateToProps (state) {
+  const { pending } = state.signer;
+
+  return {
+    pending
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ParityBar);
diff --git a/js/src/views/Settings/Background/background.css b/js/src/views/Settings/Background/background.css
new file mode 100644
index 0000000000000000000000000000000000000000..825b9fe26c8b5de5b4049d99ab835053502e2ed8
--- /dev/null
+++ b/js/src/views/Settings/Background/background.css
@@ -0,0 +1,46 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.bgcontainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.bgflex {
+  flex-basis: 25%;
+  box-sizing: border-box;
+  display: inline-block;
+  padding: 0 0.5em 1em 0.5em;
+}
+
+.bgseed {
+  background: black;
+  border-radius: 4px;
+}
+
+.seed,
+.seedactive {
+  height: 10em;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 2px solid rgba(255, 255, 255, 1);
+}
+
+.seed {
+  opacity: 0.5;
+}
diff --git a/js/src/views/Settings/Background/background.js b/js/src/views/Settings/Background/background.js
new file mode 100644
index 0000000000000000000000000000000000000000..d7c7505814d98dad186d5db426441cfa171cc66c
--- /dev/null
+++ b/js/src/views/Settings/Background/background.js
@@ -0,0 +1,142 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh';
+
+import { Button, Container, ContainerTitle, ParityBackground } from '../../../ui';
+
+import { updateBackground } from '../actions';
+
+import layout from '../layout.css';
+import styles from './background.css';
+
+let counter = 0;
+
+class Background extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    muiTheme: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    settings: PropTypes.object.isRequired,
+    updateBackground: PropTypes.func.isRequired
+  }
+
+  state = {
+    seeds: []
+  }
+
+  componentDidMount () {
+    const { settings } = this.props;
+
+    this.setState({
+      seeds: [settings.backgroundSeed]
+    }, () => this.addSeeds(19));
+  }
+
+  render () {
+    return (
+      <Container>
+        <ContainerTitle title='Background Pattern' />
+        <div className={ layout.layout }>
+          <div className={ layout.overview }>
+            <p><strong>The background pattern you can see right now is unique to your Parity installation. It will change every time you create a new Signer token.</strong> This is so that decentralized applications cannot pretend to be trustworthy.</p>
+            <p>Pick a pattern you like and memorize it. This Pattern will always be shown from now on, unless you clear your browser's cache or use a new Signer token.</p>
+          </div>
+          <div className={ layout.details }>
+            <div className={ styles.bgcontainer }>
+              { this.renderBackgrounds() }
+            </div>
+            <Button
+              icon={ <NavigationRefresh /> }
+              label='generate more'
+              onClick={ this.generateMore } />
+          </div>
+        </div>
+      </Container>
+    );
+  }
+
+  renderBackgrounds () {
+    const { settings } = this.props;
+    const { seeds } = this.state;
+
+    return seeds.map((seed) => {
+      return (
+        <div className={ styles.bgflex } key={ seed }>
+          <div className={ styles.bgseed }>
+            <ParityBackground
+              className={ settings.backgroundSeed === seed ? styles.seedactive : styles.seed }
+              seed={ seed }
+              onClick={ this.onSelect(seed) } />
+          </div>
+        </div>
+      );
+    });
+  }
+
+  onSelect = (seed) => {
+    const { muiTheme } = this.context;
+    const { updateBackground } = this.props;
+
+    return (event) => {
+      muiTheme.parity.setBackgroundSeed(seed);
+      updateBackground(seed);
+    };
+  }
+
+  generateMore = () => {
+    this.addSeeds(20);
+  }
+
+  addSeeds (count) {
+    const { seeds } = this.state;
+    const newSeeds = [];
+
+    for (let index = 0; index < count; index++) {
+      newSeeds.push(this.generateSeed());
+    }
+
+    this.setState({
+      seeds: seeds.concat(newSeeds)
+    });
+  }
+
+  generateSeed () {
+    const { api, muiTheme } = this.context;
+
+    return api.util.sha3(`${muiTheme.backgroundSeed}${Math.random()}${counter++}`);
+  }
+}
+
+function mapStateToProps (state) {
+  const { settings } = state;
+
+  return { settings };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({ updateBackground }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Background);
diff --git a/js/src/views/Settings/Background/index.js b/js/src/views/Settings/Background/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ffd3111f7458feff503ec136b0bfb388fd82701d
--- /dev/null
+++ b/js/src/views/Settings/Background/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './background';
diff --git a/js/src/views/Settings/Views/defaults.js b/js/src/views/Settings/Views/defaults.js
new file mode 100644
index 0000000000000000000000000000000000000000..930f3e32c2b77e6269b0a00b01fc45681d1c77f3
--- /dev/null
+++ b/js/src/views/Settings/Views/defaults.js
@@ -0,0 +1,97 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
+import ActionTrackChanges from 'material-ui/svg-icons/action/track-changes';
+import ActionSettings from 'material-ui/svg-icons/action/settings';
+import CommunicationContacts from 'material-ui/svg-icons/communication/contacts';
+import ImageGridOn from 'material-ui/svg-icons/image/grid-on';
+import NavigationApps from 'material-ui/svg-icons/navigation/apps';
+
+import { SignerIcon } from '../../../ui';
+
+import styles from './views.css';
+
+const defaultViews = {
+  accounts: {
+    active: true,
+    fixed: true,
+    icon: <ActionAccountBalanceWallet />,
+    label: 'Accounts',
+    route: '/accounts',
+    value: 'account',
+    description: 'A list of all the accounts associated to and imported into this Parity instance. Send transactions, receive incoming values, manage your balances and fund your accounts.'
+  },
+
+  addresses: {
+    active: true,
+    icon: <CommunicationContacts />,
+    label: 'Addressbook',
+    route: '/addresses',
+    value: 'address',
+    description: 'A list of all contacts and address book entries that is managed by this Parity instance. Watch accounts and have the details available at the click of a button when transacting.'
+  },
+
+  apps: {
+    active: true,
+    icon: <NavigationApps />,
+    label: 'Applications',
+    route: '/apps',
+    value: 'app',
+    description: 'Distributed applications that interact with the underlying network. Add applications, manage you application portfolio and interact with application from around the newtork.'
+  },
+
+  contracts: {
+    active: false,
+    icon: <ImageGridOn />,
+    label: 'Contracts',
+    route: '/contracts',
+    value: 'contract',
+    description: 'Watch and interact with specific contracts that have been deployed on the network. This is a more technically-focussed environment, specifically for advanced users that understand the inner working of certain contracts.'
+  },
+
+  status: {
+    active: false,
+    icon: <ActionTrackChanges />,
+    label: 'Status',
+    route: '/status',
+    value: 'status',
+    description: 'See how the Parity node is performing in terms of connections to the network, logs from the actual running instance and details of mining (if enabled and configured).'
+  },
+
+  signer: {
+    active: true,
+    fixed: true,
+    icon: <SignerIcon className={ styles.signerIcon } />,
+    label: 'Signer',
+    route: '/signer',
+    value: 'signer',
+    description: 'The security focussed area of the application where you can approve any outgoing transactions made from the application as well as those placed into the queue by distributed applications.'
+  },
+
+  settings: {
+    active: true,
+    fixed: true,
+    icon: <ActionSettings />,
+    label: 'Settings',
+    route: '/settings',
+    value: 'settings',
+    description: 'This view. Allows you to customize the application in term of options, operation and look and feel.'
+  }
+};
+
+export default defaultViews;
diff --git a/js/src/views/Settings/Views/index.js b/js/src/views/Settings/Views/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..cc189d4cac5507a0ca949943a87e7f02a3e32fd6
--- /dev/null
+++ b/js/src/views/Settings/Views/index.js
@@ -0,0 +1,23 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import defaultViews from './defaults';
+
+export default from './views';
+
+export {
+  defaultViews
+};
diff --git a/js/src/views/Settings/Views/views.css b/js/src/views/Settings/Views/views.css
new file mode 100644
index 0000000000000000000000000000000000000000..b907c1ab22bd08d4163e3604ae8c678b0b8ea538
--- /dev/null
+++ b/js/src/views/Settings/Views/views.css
@@ -0,0 +1,49 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.signerIcon {
+  width: 24px;
+  height: 24px;
+  margin-bottom: 5px;
+}
+
+.view {
+}
+
+.view+.view {
+  padding-top: 1.5em;
+}
+
+.header {
+}
+
+.labelicon {
+  display: inline-block;
+  margin-right: 0.75em;
+}
+
+.label {
+  display: inline-block;
+  vertical-align: top;
+  line-height: 24px;
+  color: white !important;
+}
+
+.info {
+  color: #aaa;
+  padding-left: 4.75em;
+}
diff --git a/js/src/views/Settings/Views/views.js b/js/src/views/Settings/Views/views.js
new file mode 100644
index 0000000000000000000000000000000000000000..27dcc7ee4a3509f1af8661388af4df8274ab1f64
--- /dev/null
+++ b/js/src/views/Settings/Views/views.js
@@ -0,0 +1,101 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Checkbox } from 'material-ui';
+
+import { Container, ContainerTitle } from '../../../ui';
+
+import { toggleView } from '../actions';
+
+import layout from '../layout.css';
+import styles from './views.css';
+
+class Views extends Component {
+  static propTypes = {
+    settings: PropTypes.object.isRequired,
+    toggleView: PropTypes.func.isRequired
+  }
+
+  render () {
+    return (
+      <Container>
+        <ContainerTitle title='Views' />
+        <div className={ layout.layout }>
+          <div className={ layout.overview }>
+            <div>Manage the available application views, using only the parts of the application that is applicable to you.</div>
+            <div>Are you an end-user? The defaults are setups for both beginner and advanced users alike.</div>
+            <div>Are you a developer? Add some features to manage contracts are interact with application develoyments.</div>
+            <div>Are you a miner or run a large-scale node? Add the features to give you all the information needed to watch the node operation.</div>
+          </div>
+          <div className={ layout.details }>
+            { this.renderViews() }
+          </div>
+        </div>
+      </Container>
+    );
+  }
+
+  renderViews () {
+    const { settings, toggleView } = this.props;
+
+    return Object.keys(settings.views).map((id) => {
+      const toggle = () => toggleView(id);
+      const view = settings.views[id];
+      const label = (
+        <div className={ styles.header }>
+          <div className={ styles.labelicon }>
+            { view.icon }
+          </div>
+          <div className={ styles.label }>
+            { view.label }
+          </div>
+        </div>
+      );
+
+      return (
+        <div className={ styles.view } key={ id }>
+          <Checkbox
+            disabled={ view.fixed }
+            label={ label }
+            onCheck={ toggle }
+            checked={ view.active }
+            value={ view.active } />
+          <div className={ styles.info }>
+            { view.description }
+          </div>
+        </div>
+      );
+    });
+  }
+}
+
+function mapStateToProps (state) {
+  const { settings } = state;
+
+  return { settings };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({ toggleView }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Views);
diff --git a/js/src/views/Settings/actions.js b/js/src/views/Settings/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..d01ddb24f81fc1c70ed0db8a6f056b92278e942c
--- /dev/null
+++ b/js/src/views/Settings/actions.js
@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function toggleView (viewId) {
+  return {
+    type: 'toggleView',
+    viewId
+  };
+}
+
+export function updateBackground (backgroundSeed) {
+  return {
+    type: 'updateBackground',
+    backgroundSeed
+  };
+}
diff --git a/js/src/views/Settings/index.js b/js/src/views/Settings/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d61c877ee54f3de7cc1814170c64312d120a3027
--- /dev/null
+++ b/js/src/views/Settings/index.js
@@ -0,0 +1,31 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import settingsReducer from './reducers';
+import { toggleView, updateBackground } from './actions';
+import SettingsBackground from './Background';
+import SettingsViews, { defaultViews } from './Views';
+
+export default from './settings';
+
+export {
+  SettingsBackground,
+  SettingsViews,
+  defaultViews,
+  settingsReducer,
+  toggleView,
+  updateBackground
+};
diff --git a/js/src/views/Settings/layout.css b/js/src/views/Settings/layout.css
new file mode 100644
index 0000000000000000000000000000000000000000..d8d953f90b54930fdb7ec653abf37d88696d84b9
--- /dev/null
+++ b/js/src/views/Settings/layout.css
@@ -0,0 +1,54 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.layout {
+  padding-top: 1.5em;
+}
+
+.layout::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
+.overview, .details {
+  float: left;
+  box-sizing: border-box;
+}
+
+.overview {
+  width: 33.33333%;
+  width: -webkit-calc(100% / 12 * 4);
+  width: -moz-calc(100% / 12 * 4);
+  width: calc(100% / 12 * 4);
+}
+
+.overview {
+  opacity: 0.5;
+}
+
+.overview>div+div {
+  padding-top: 1.25em;
+}
+
+.details {
+  width: 66.66665%;
+  width: -webkit-calc(100% / 12 * 8);
+  width: -moz-calc(100% / 12 * 8);
+  width: calc(100% / 12 * 8);
+  padding-left: 3em;
+}
diff --git a/js/src/views/Settings/middleware.js b/js/src/views/Settings/middleware.js
new file mode 100644
index 0000000000000000000000000000000000000000..ddadad92b84e6c4326d88e9cf8a08e486e64ff75
--- /dev/null
+++ b/js/src/views/Settings/middleware.js
@@ -0,0 +1,125 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import defaultViews from './Views/defaults';
+
+function initBackground (store, api) {
+  const backgroundSeed = loadBackground() || api.util.sha3(`${Date.now()}`);
+
+  store.dispatch({
+    type: 'updateBackground',
+    backgroundSeed
+  });
+}
+
+function loadBackground () {
+  return window.localStorage.getItem('backgroundSeed');
+}
+
+function saveBackground (backgroundSeed) {
+  window.localStorage.setItem('backgroundSeed', backgroundSeed);
+}
+
+function initViews (store) {
+  const { settings } = store.getState();
+  const data = loadViews();
+  const viewIds = Object.keys(data).filter((viewId) => {
+    return settings.views[viewId] && data[viewId].active !== settings.views[viewId].active;
+  });
+
+  if (viewIds.length) {
+    store.dispatch({ type: 'toggleViews', viewIds });
+  }
+}
+
+function getFixedViews () {
+  const views = {};
+
+  Object.keys(defaultViews).forEach((id) => {
+    if (defaultViews[id].fixed) {
+      views[id] = { active: true };
+    }
+  });
+
+  return views;
+}
+
+function getDefaultViews () {
+  const views = {};
+
+  Object.keys(defaultViews).forEach((id) => {
+    views[id] = {
+      active: defaultViews[id].active || false
+    };
+  });
+
+  return views;
+}
+
+function loadViews () {
+  const fixed = getFixedViews();
+  const defaults = getDefaultViews();
+  let data;
+
+  try {
+    const json = window.localStorage.getItem('views') || '{}';
+
+    data = Object.assign(defaults, JSON.parse(json), fixed);
+  } catch (e) {
+    data = defaults;
+  }
+
+  return data;
+}
+
+function saveViews (store) {
+  window.localStorage.setItem('views', JSON.stringify(getDefaultViews()));
+}
+
+function toggleViews (store, viewIds) {
+  viewIds.forEach((id) => {
+    defaultViews[id].active = !defaultViews[id].active;
+  });
+
+  saveViews(store);
+}
+
+export default class SettingsMiddleware {
+  toMiddleware () {
+    return (store) => (next) => (action) => {
+      switch (action.type) {
+        case 'initAll':
+          initBackground(store, action.api);
+          initViews(store);
+          break;
+
+        case 'toggleView':
+          toggleViews(store, [action.viewId]);
+          break;
+
+        case 'toggleViews':
+          toggleViews(store, action.viewIds);
+          break;
+
+        case 'updateBackground':
+          saveBackground(action.backgroundSeed);
+          break;
+      }
+
+      next(action);
+    };
+  }
+}
diff --git a/js/src/views/Settings/reducers.js b/js/src/views/Settings/reducers.js
new file mode 100644
index 0000000000000000000000000000000000000000..af261219983901d2bbd5225495f0fc3aca866d24
--- /dev/null
+++ b/js/src/views/Settings/reducers.js
@@ -0,0 +1,40 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { handleActions } from 'redux-actions';
+
+import views from './Views/defaults';
+
+const initialState = {
+  views,
+  backgroundSeed: `${Date.now()}`
+};
+
+export default handleActions({
+  toggleView (state, action) {
+    return Object.assign({}, state, { views });
+  },
+
+  toggleViews (state, action) {
+    return Object.assign({}, state, { views });
+  },
+
+  updateBackground (state, action) {
+    const { backgroundSeed } = action;
+
+    return Object.assign({}, state, { backgroundSeed });
+  }
+}, initialState);
diff --git a/js/src/views/Settings/settings.css b/js/src/views/Settings/settings.css
new file mode 100644
index 0000000000000000000000000000000000000000..d2a38ade2d070351de50f1f05f8b51af4f078053
--- /dev/null
+++ b/js/src/views/Settings/settings.css
@@ -0,0 +1,62 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.layout {
+}
+
+.menu {
+  display: inline-block;
+}
+
+.bar {
+  justify-content: flex-start !important;
+}
+
+.tabs {
+  margin-left: 3em;
+}
+
+.tab,
+.tabactive {
+  padding: 16px 2em !important;
+  line-height: 24px !important;
+}
+
+.tabactive {
+}
+
+.tab>div,
+.tabactive>div {
+  height: 24px !important;
+}
+
+.tab>div>div,
+.tabactive>div>div {
+  display: inline-block !important;
+}
+
+.tab svg,
+.tabactive svg {
+  margin-right: 0.5em;
+  margin-bottom: 0 !important;
+}
+
+.tab .menu,
+.tabactive .menu {
+  vertical-align: top;
+  display: inline-block;
+}
diff --git a/js/src/views/Settings/settings.js b/js/src/views/Settings/settings.js
new file mode 100644
index 0000000000000000000000000000000000000000..3fee956437bf21f4514fe8e1667db3e69d50b5fb
--- /dev/null
+++ b/js/src/views/Settings/settings.js
@@ -0,0 +1,82 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+// 0xecf69634885f27a8f78161e530f15a8d3b57d39e755c222c92cf297b6e25aaaa
+
+import React, { Component, PropTypes } from 'react';
+import { Tab, Tabs } from 'material-ui';
+import ImageBlurOn from 'material-ui/svg-icons/image/blur-on';
+import ImageRemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye';
+
+import { Actionbar, Page } from '../../ui';
+
+import styles from './settings.css';
+
+export default class Settings extends Component {
+  static contextTypes = {
+    router: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    children: PropTypes.object.isRequired
+  }
+
+  render () {
+    const { children } = this.props;
+
+    return (
+      <div className={ styles.layout }>
+        <Actionbar title='settings' className={ styles.bar }>
+          { this.renderTabs() }
+        </Actionbar>
+        <Page>
+          { children }
+        </Page>
+      </div>
+    );
+  }
+
+  renderTabs () {
+    const hash = (window.location.hash || '').split('?')[0].split('/')[2];
+
+    return (
+      <Tabs className={ styles.tabs } value={ hash }>
+        <Tab
+          className={ hash === 'views' ? styles.tabactive : styles.tab }
+          value='views'
+          key='views'
+          icon={ <ImageRemoveRedEye /> }
+          label={ <div className={ styles.menu }>views</div> }
+          onActive={ this.onActivate('views') } />
+        <Tab
+          className={ hash === 'background' ? styles.tabactive : styles.tab }
+          value='background'
+          key='background'
+          icon={ <ImageBlurOn /> }
+          label={ <div className={ styles.menu }>background</div> }
+          onActive={ this.onActivate('background') } />
+      </Tabs>
+    );
+  }
+
+  onActivate = (section) => {
+    const { router } = this.context;
+
+    return (event) => {
+      router.push(`/settings/${section}`);
+    };
+  }
+}
diff --git a/js/src/views/Signer/components/Account/Account.css b/js/src/views/Signer/components/Account/Account.css
new file mode 100644
index 0000000000000000000000000000000000000000..c1695587c1f2d9c74cc29c349de08d2bf3760416
--- /dev/null
+++ b/js/src/views/Signer/components/Account/Account.css
@@ -0,0 +1,44 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.acc {
+  text-align: center;
+  display: inline-block;
+}
+
+.acc > * {
+  display: block;
+}
+
+.address {
+  font-family: monospace;
+}
+
+.acc img {
+  width: 28px;
+  height: 28px;
+  vertical-align: middle;
+  margin-right: 3px;
+}
+
+.name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: lock;
+  vertical-align: middle;
+  text-transform: uppercase;
+}
diff --git a/js/src/views/Signer/components/Account/Account.js b/js/src/views/Signer/components/Account/Account.js
new file mode 100644
index 0000000000000000000000000000000000000000..63a6013732c1099e12f864adb16d5b95de57c918
--- /dev/null
+++ b/js/src/views/Signer/components/Account/Account.js
@@ -0,0 +1,109 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { IdentityIcon, IdentityName } from '../../../../ui';
+import AccountLink from './AccountLink';
+
+import styles from './Account.css';
+
+export default class Account extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    address: PropTypes.string.isRequired,
+    chain: PropTypes.string.isRequired,
+    balance: PropTypes.object // eth BigNumber, not required since it mght take time to fetch
+  };
+
+  state = {
+    balanceDisplay: '?'
+  };
+
+  componentWillMount () {
+    this.updateBalanceDisplay(this.props.balance);
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.balance === this.props.balance) {
+      return;
+    }
+    this.updateBalanceDisplay(nextProps.balance);
+  }
+
+  updateBalanceDisplay (balance) {
+    this.setState({
+      balanceDisplay: balance ? balance.div(1e18).toFormat(3) : '?'
+    });
+  }
+
+  render () {
+    const { address, chain, className } = this.props;
+
+    return (
+      <div className={ `${styles.acc} ${className}` }>
+        <AccountLink address={ address } chain={ chain }>
+          <IdentityIcon
+            center
+            address={ address } />
+        </AccountLink>
+        { this.renderName() }
+        { this.renderBalance() }
+      </div>
+    );
+  }
+
+  renderBalance () {
+    const { balanceDisplay } = this.state;
+    return (
+      <span> <strong>{ balanceDisplay }</strong> <small>ETH</small></span>
+    );
+  }
+
+  renderName () {
+    const { address } = this.props;
+    const name = <IdentityName address={ address } empty />;
+
+    if (!name) {
+      return (
+        <AccountLink address={ address } chain={ this.props.chain }>
+          [{ this.shortAddress(address) }]
+        </AccountLink>
+      );
+    }
+
+    return (
+      <AccountLink address={ address } chain={ this.props.chain } >
+        <span>
+          <span className={ styles.name }>{ name }</span>
+          <span className={ styles.address }>[{ this.tinyAddress(address) }]</span>
+        </span>
+      </AccountLink>
+    );
+  }
+
+  tinyAddress () {
+    const { address } = this.props;
+    const len = address.length;
+    return address.slice(2, 4) + '..' + address.slice(len - 2);
+  }
+
+  shortAddress () {
+    const { address } = this.props;
+    const len = address.length;
+    return address.slice(2, 8) + '..' + address.slice(len - 7);
+  }
+}
diff --git a/js/src/views/Signer/components/Account/AccountLink/AccountLink.css b/js/src/views/Signer/components/Account/AccountLink/AccountLink.css
new file mode 100644
index 0000000000000000000000000000000000000000..e7489895da88de5b47726d5cbd747b9f371a089e
--- /dev/null
+++ b/js/src/views/Signer/components/Account/AccountLink/AccountLink.css
@@ -0,0 +1,20 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.container {
+  text-decoration: none;
+  color: inherit;
+}
diff --git a/js/src/views/Signer/components/Account/AccountLink/AccountLink.js b/js/src/views/Signer/components/Account/AccountLink/AccountLink.js
new file mode 100644
index 0000000000000000000000000000000000000000..8cf041fda7400b7eeb6bfef8e61c85eb11f16e3f
--- /dev/null
+++ b/js/src/views/Signer/components/Account/AccountLink/AccountLink.js
@@ -0,0 +1,66 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { getAccountLink } from '../../util/account';
+import styles from './AccountLink.css';
+
+export default class AccountLink extends Component {
+  static propTypes = {
+    chain: PropTypes.string.isRequired,
+    address: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    children: PropTypes.node
+  }
+
+  state = {
+    link: null
+  };
+
+  componentWillMount () {
+    const { address, chain } = this.props;
+
+    this.updateLink(address, chain);
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const { address, chain } = nextProps;
+
+    this.updateLink(address, chain);
+  }
+
+  render () {
+    const { children, address, className } = this.props;
+    return (
+      <a
+        href={ this.state.link }
+        target='_blank'
+        className={ `${styles.container} ${className}` }
+        >
+        { children || address }
+      </a>
+    );
+  }
+
+  updateLink (address, chain) {
+    const link = getAccountLink(address, chain);
+
+    this.setState({
+      link
+    });
+  }
+}
diff --git a/js/src/views/Signer/components/Account/AccountLink/index.js b/js/src/views/Signer/components/Account/AccountLink/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..90ae8634a1f9a15135689dd3d608508d41482afd
--- /dev/null
+++ b/js/src/views/Signer/components/Account/AccountLink/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './AccountLink';
diff --git a/js/src/views/Signer/components/Account/index.js b/js/src/views/Signer/components/Account/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..c42a8a81038c2b8e620fb152b228bf6f7a388e13
--- /dev/null
+++ b/js/src/views/Signer/components/Account/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './Account';
diff --git a/js/src/views/Signer/components/RequestFinishedWeb3/RequestFinishedWeb3.js b/js/src/views/Signer/components/RequestFinishedWeb3/RequestFinishedWeb3.js
new file mode 100644
index 0000000000000000000000000000000000000000..167ab92d178227ee3fdda13340221592979ae22f
--- /dev/null
+++ b/js/src/views/Signer/components/RequestFinishedWeb3/RequestFinishedWeb3.js
@@ -0,0 +1,80 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import TransactionFinishedWeb3 from '../TransactionFinishedWeb3';
+import SignWeb3 from '../SignRequestWeb3';
+
+export default class RequestFinishedWeb3 extends Component {
+  static propTypes = {
+    id: PropTypes.object.isRequired,
+    result: PropTypes.any.isRequired,
+    date: PropTypes.instanceOf(Date).isRequired,
+    payload: PropTypes.oneOfType([
+      PropTypes.shape({ transaction: PropTypes.object.isRequired }),
+      PropTypes.shape({ sign: PropTypes.object.isRequired })
+    ]).isRequired,
+    msg: PropTypes.string,
+    status: PropTypes.string,
+    error: PropTypes.string,
+    className: PropTypes.string
+  }
+
+  render () {
+    const { payload, id, result, msg, status, error, date, className } = this.props;
+
+    if (payload.sign) {
+      const { sign } = payload;
+      return (
+        <SignWeb3
+          className={ className }
+          isFinished
+          id={ id }
+          address={ sign.address }
+          hash={ sign.hash }
+          result={ result }
+          msg={ msg }
+          status={ status }
+          error={ error }
+          />
+      );
+    }
+
+    if (payload.transaction) {
+      const { transaction } = payload;
+      return (
+        <TransactionFinishedWeb3
+          className={ className }
+          txHash={ result }
+          id={ id }
+          gasPrice={ transaction.gasPrice }
+          gas={ transaction.gas }
+          from={ transaction.from }
+          to={ transaction.to }
+          value={ transaction.value }
+          msg={ msg }
+          date={ date }
+          status={ status }
+          error={ error }
+        />
+      );
+    }
+
+    // Unknown payload
+    return null;
+  }
+}
diff --git a/js/src/views/Signer/components/RequestFinishedWeb3/index.js b/js/src/views/Signer/components/RequestFinishedWeb3/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..bcf7341bb28469e3871fac2dde22caba86a19c0a
--- /dev/null
+++ b/js/src/views/Signer/components/RequestFinishedWeb3/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './RequestFinishedWeb3';
diff --git a/js/src/views/Signer/components/RequestPendingWeb3/RequestPendingWeb3.js b/js/src/views/Signer/components/RequestPendingWeb3/RequestPendingWeb3.js
new file mode 100644
index 0000000000000000000000000000000000000000..b0a03097deff866a6e2eab2b5dc7dd75c34e9f32
--- /dev/null
+++ b/js/src/views/Signer/components/RequestPendingWeb3/RequestPendingWeb3.js
@@ -0,0 +1,78 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import TransactionPendingWeb3 from '../TransactionPendingWeb3';
+import SignRequestWeb3 from '../SignRequestWeb3';
+
+export default class RequestPendingWeb3 extends Component {
+  static propTypes = {
+    id: PropTypes.object.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    onReject: PropTypes.func.isRequired,
+    isSending: PropTypes.bool.isRequired,
+    date: PropTypes.instanceOf(Date).isRequired,
+    payload: PropTypes.oneOfType([
+      PropTypes.shape({ transaction: PropTypes.object.isRequired }),
+      PropTypes.shape({ sign: PropTypes.object.isRequired })
+    ]).isRequired,
+    className: PropTypes.string
+  };
+
+  render () {
+    const { payload, id, className, isSending, date, onConfirm, onReject } = this.props;
+
+    if (payload.sign) {
+      const { sign } = payload;
+      return (
+        <SignRequestWeb3
+          className={ className }
+          onConfirm={ onConfirm }
+          onReject={ onReject }
+          isSending={ isSending }
+          isFinished={ false }
+          id={ id }
+          address={ sign.address }
+          hash={ sign.hash }
+          />
+      );
+    }
+
+    if (payload.transaction) {
+      const { transaction } = payload;
+      return (
+        <TransactionPendingWeb3
+          className={ className }
+          onConfirm={ onConfirm }
+          onReject={ onReject }
+          isSending={ isSending }
+          id={ id }
+          gasPrice={ transaction.gasPrice }
+          gas={ transaction.gas }
+          data={ transaction.data }
+          from={ transaction.from }
+          to={ transaction.to }
+          value={ transaction.value }
+          date={ date }
+          />
+      );
+    }
+
+    // Unknown payload
+    return null;
+  }
+}
diff --git a/js/src/views/Signer/components/RequestPendingWeb3/index.js b/js/src/views/Signer/components/RequestPendingWeb3/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f664b571cb84831b4eace731d559a26326c1ff6b
--- /dev/null
+++ b/js/src/views/Signer/components/RequestPendingWeb3/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './RequestPendingWeb3';
diff --git a/js/src/views/Signer/components/SignRequest/SignRequest.css b/js/src/views/Signer/components/SignRequest/SignRequest.css
new file mode 100644
index 0000000000000000000000000000000000000000..f1981986d0185e954a0d7b86adf2fa658cf7b5dc
--- /dev/null
+++ b/js/src/views/Signer/components/SignRequest/SignRequest.css
@@ -0,0 +1,74 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.container {
+  padding: 25px 0 15px;
+}
+
+.actions, .signDetails {
+  display: inline-block;
+  vertical-align: middle;
+  min-height: 120px;
+}
+
+.signDetails {
+  border-right: 1px solid #eee;
+  margin-right: 2rem;
+  /* TODO [todr] mess - just to align with transaction */
+  width:  430px;
+}
+
+.address, .info {
+  display: inline-block;
+}
+
+.info {
+  padding: 0 30px;
+  width: 250px;
+  color: #E53935;
+  vertical-align: top;
+}
+
+.info p:first-child {
+  margin-top: 0;
+}
+
+/* TODO [todr] copy&paste from transactions */
+.isConfirmed {
+  color: green;
+}
+
+.isRejected {
+  opacity: 0.7;
+}
+
+.txHash {
+  display: block;
+  word-break: break-all;
+}
+
+.actions {
+  width: 180px;
+  display: inline-block;
+  min-height: 120px;
+}
+
+.signDetails img {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  margin: 5px;
+}
diff --git a/js/src/views/Signer/components/SignRequest/SignRequest.js b/js/src/views/Signer/components/SignRequest/SignRequest.js
new file mode 100644
index 0000000000000000000000000000000000000000..e6d14fb5398a97c3b7200be36848a542c74a0412
--- /dev/null
+++ b/js/src/views/Signer/components/SignRequest/SignRequest.js
@@ -0,0 +1,113 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import Account from '../Account';
+import TransactionPendingForm from '../TransactionPendingForm';
+import TxHashLink from '../TxHashLink';
+
+import styles from './SignRequest.css';
+
+export default class SignRequest extends Component {
+
+  // TODO [todr] re-use proptypes?
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    address: PropTypes.string.isRequired,
+    hash: PropTypes.string.isRequired,
+    isFinished: PropTypes.bool.isRequired,
+    chain: PropTypes.string.isRequired,
+    balance: PropTypes.object,
+    isSending: PropTypes.bool,
+    onConfirm: PropTypes.func,
+    onReject: PropTypes.func,
+    status: PropTypes.string,
+    className: PropTypes.string
+  };
+
+  render () {
+    const className = this.props.className || '';
+    return (
+      <div className={ `${styles.container} ${className}` }>
+        { this.renderDetails() }
+        { this.renderActions() }
+      </div>
+    );
+  }
+
+  renderDetails () {
+    const { address, balance, chain, hash } = this.props;
+
+    return (
+      <div className={ styles.signDetails }>
+        <div className={ styles.address }>
+          <Account address={ address } balance={ balance } chain={ chain } />
+        </div>
+        <div className={ styles.info } title={ hash }>
+          <p>Dapp is requesting to sign arbitrary transaction using this account.</p>
+          <p><strong>Confirm the transaction only if you trust the app.</strong></p>
+        </div>
+      </div>
+    );
+  }
+
+  renderActions () {
+    const { address, isFinished, status } = this.props;
+
+    if (isFinished) {
+      if (status === 'confirmed') {
+        const { chain, hash } = this.props;
+
+        return (
+          <div className={ styles.actions }>
+            <span className={ styles.isConfirmed }>Confirmed</span>
+            <div>
+              Transaction hash:
+              <TxHashLink chain={ chain } txHash={ hash } className={ styles.txHash } />
+            </div>
+          </div>
+        );
+      }
+
+      return (
+        <div className={ styles.actions }>
+          <span className={ styles.isRejected }>Rejected</span>
+        </div>
+      );
+    }
+
+    return (
+      <TransactionPendingForm
+        address={ address }
+        isSending={ this.props.isSending }
+        onConfirm={ this.onConfirm }
+        onReject={ this.onReject }
+        className={ styles.actions }
+        />
+    );
+  }
+
+  onConfirm = password => {
+    const { id } = this.props;
+    this.props.onConfirm({ id, password });
+  }
+
+  onReject = () => {
+    this.props.onReject(this.props.id);
+  }
+
+}
diff --git a/js/src/views/Signer/components/SignRequest/index.js b/js/src/views/Signer/components/SignRequest/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4aec1d19c9a82a0a04f902d72e69dba983817f2d
--- /dev/null
+++ b/js/src/views/Signer/components/SignRequest/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './SignRequest';
diff --git a/js/src/views/Signer/components/SignRequestWeb3/SignRequestWeb3.js b/js/src/views/Signer/components/SignRequestWeb3/SignRequestWeb3.js
new file mode 100644
index 0000000000000000000000000000000000000000..139957ccfc1c040bc1ecb42d6e82539734eb43ed
--- /dev/null
+++ b/js/src/views/Signer/components/SignRequestWeb3/SignRequestWeb3.js
@@ -0,0 +1,95 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import SignRequest from '../SignRequest';
+
+export default class SignRequestWeb3 extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    address: PropTypes.string.isRequired,
+    hash: PropTypes.string.isRequired,
+    isFinished: PropTypes.bool.isRequired,
+    isSending: PropTypes.bool,
+    onConfirm: PropTypes.func,
+    onReject: PropTypes.func,
+    status: PropTypes.string,
+    className: PropTypes.string
+  };
+
+  state = {
+    chain: 'homestead',
+    balance: null // avoid required prop loading warning
+  }
+
+  componentDidMount () {
+    this.fetchChain();
+    this.fetchBalance();
+  }
+
+  render () {
+    const { balance, chain } = this.state;
+    const { address, onConfirm, onReject, isSending, isFinished, hash, className, id, status } = this.props;
+
+    return (
+      <SignRequest
+        address={ address }
+        hash={ hash }
+        balance={ balance }
+        onConfirm={ onConfirm }
+        onReject={ onReject }
+        isSending={ isSending }
+        isFinished={ isFinished }
+        id={ id }
+        chain={ chain }
+        status={ status }
+        className={ className }
+        />
+    );
+  }
+
+  fetchChain () {
+    const { api } = this.context;
+
+    api.ethcore
+      .getNetChain()
+      .then((chain) => {
+        this.setState({ chain });
+      })
+      .catch((error) => {
+        console.error('fetchChain', error);
+      });
+  }
+
+  fetchBalance () {
+    const { api } = this.context;
+    const { address } = this.props;
+
+    api.eth
+      .getBalance(address)
+      .then((balance) => {
+        this.setState({ balance });
+      })
+      .catch((error) => {
+        console.error('fetchBalance', error);
+      });
+  }
+}
diff --git a/js/src/views/Signer/components/SignRequestWeb3/index.js b/js/src/views/Signer/components/SignRequestWeb3/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d07d1d7e331e1d5155f9b65066e753fbe2b41747
--- /dev/null
+++ b/js/src/views/Signer/components/SignRequestWeb3/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './SignRequestWeb3';
diff --git a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css
new file mode 100644
index 0000000000000000000000000000000000000000..be995fe171fbf2c60f405faa574d2b5017b7b185
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.css
@@ -0,0 +1,55 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.container {
+  padding: 25px 0 15px;
+}
+
+.mainContainer {
+  position: relative;
+}
+
+.mainContainer > * {
+  vertical-align: middle;
+  min-height: 120px;
+}
+
+.statusContainer {
+  width: 220px;
+  padding: 20px 40px 0 40px;
+  /*border-left: 1px solid #aaa;*/
+  position: absolute;
+  top: 0;
+  right: 0;
+  box-sizing: content-box;
+}
+
+.transactionDetails {
+  margin-right: 321px;
+}
+
+.isConfirmed {
+  color: green;
+}
+
+.isRejected {
+  opacity: 0.7;
+}
+
+.txHash {
+  display: block;
+  word-break: break-all;
+}
diff --git a/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js
new file mode 100644
index 0000000000000000000000000000000000000000..ffd0bb73120e7cad18c175d9d7ffef345318af22
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionFinished/TransactionFinished.js
@@ -0,0 +1,107 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import TransactionMainDetails from '../TransactionMainDetails';
+import TxHashLink from '../TxHashLink';
+import TransactionSecondaryDetails from '../TransactionSecondaryDetails';
+
+import styles from './TransactionFinished.css';
+
+import * as tUtil from '../util/transaction';
+import { capitalize } from '../util/util';
+
+export default class TransactionFinished extends Component {
+  static propTypes = {
+    id: PropTypes.object.isRequired,
+    from: PropTypes.string.isRequired,
+    fromBalance: PropTypes.object, // eth BigNumber, not required since it might take time to fetch
+    value: PropTypes.object.isRequired, // wei hex
+    chain: PropTypes.string.isRequired,
+    gasPrice: PropTypes.object.isRequired, // wei hex
+    gas: PropTypes.object.isRequired, // hex
+    status: PropTypes.string.isRequired, // rejected, confirmed
+    date: PropTypes.instanceOf(Date).isRequired,
+    to: PropTypes.string, // undefined if it's a contract
+    toBalance: PropTypes.object, // eth BigNumber - undefined if it's a contract or until it's fetched
+    txHash: PropTypes.string, // undefined if transacation is rejected
+    className: PropTypes.string,
+    data: PropTypes.string
+  };
+
+  static defaultProps = {
+    value: '0x0' // todo [adgo] - remove after resolving https://github.com/ethcore/parity/issues/1458
+  };
+
+  componentWillMount () {
+    const { gas, gasPrice, value } = this.props;
+    const fee = tUtil.getFee(gas, gasPrice); // BigNumber object
+    const totalValue = tUtil.getTotalValue(fee, value);
+    this.setState({ totalValue });
+  }
+
+  render () {
+    const { className, date, id } = this.props;
+    const { totalValue } = this.state;
+
+    return (
+      <div className={ `${styles.container} ${className || ''}` }>
+        <div className={ styles.mainContainer }>
+          <TransactionMainDetails
+            { ...this.props }
+            totalValue={ totalValue }
+            className={ styles.transactionDetails }
+          >
+            <TransactionSecondaryDetails
+              id={ id }
+              date={ date }
+            />
+          </TransactionMainDetails>
+          <div className={ styles.statusContainer }>
+            { this.renderStatus() }
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderStatus () {
+    const { status } = this.props;
+    const klass = status === 'confirmed' ? styles.isConfirmed : styles.isRejected;
+    return (
+      <div>
+        <span className={ klass }>{ capitalize(status) }</span>
+        { this.renderTxHash() }
+      </div>
+    );
+  }
+
+  renderTxHash () {
+    const { txHash, chain } = this.props;
+    if (!txHash) {
+      return;
+    }
+
+    return (
+      <div>
+        Transaction hash:
+        <TxHashLink chain={ chain } txHash={ txHash } className={ styles.txHash } />
+      </div>
+    );
+  }
+
+}
diff --git a/js/src/views/Signer/components/TransactionFinished/index.js b/js/src/views/Signer/components/TransactionFinished/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..fe606e1d40fe57661f22f6f8151677d1a9b08b51
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionFinished/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './TransactionFinished';
diff --git a/js/src/views/Signer/components/TransactionFinishedWeb3/TransactionFinishedWeb3.js b/js/src/views/Signer/components/TransactionFinishedWeb3/TransactionFinishedWeb3.js
new file mode 100644
index 0000000000000000000000000000000000000000..dded9f1461d6aa7243672aa98b3bcbdc17ac5a44
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionFinishedWeb3/TransactionFinishedWeb3.js
@@ -0,0 +1,92 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import TransactionFinished from '../TransactionFinished';
+
+export default class TransactionFinishedWeb3 extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    from: PropTypes.string.isRequired,
+    to: PropTypes.string // undefined if it's a contract
+  }
+
+  state = {
+    chain: 'homestead'
+  }
+
+  componentDidMount () {
+    this.fetchChain();
+    this.fetchBalances();
+  }
+
+  render () {
+    const { fromBalance, toBalance, chain } = this.state;
+    const { from, to } = this.props;
+
+    return (
+      <TransactionFinished
+        { ...this.props }
+        from={ from }
+        fromBalance={ fromBalance }
+        to={ to }
+        toBalance={ toBalance }
+        chain={ chain }
+        />
+    );
+  }
+
+  fetchChain () {
+    const { api } = this.context;
+
+    api.ethcore
+      .netChain()
+      .then((chain) => {
+        this.setState({ chain });
+      })
+      .catch((error) => {
+        console.error('fetchChain', error);
+      });
+  }
+
+  fetchBalances () {
+    const { from, to } = this.props;
+    this.fetchBalance(from, 'from');
+
+    if (!to) {
+      return;
+    }
+
+    this.fetchBalance(to, 'to');
+  }
+
+  fetchBalance (address, owner) {
+    const { api } = this.context;
+
+    api.eth
+      .getBalance(address)
+      .then((balance) => {
+        this.setState({ [owner + 'Balance']: balance });
+      })
+      .catch((error) => {
+        console.error('fetchBalance', error);
+      });
+  }
+}
diff --git a/js/src/views/Signer/components/TransactionFinishedWeb3/index.js b/js/src/views/Signer/components/TransactionFinishedWeb3/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..2638e8eabd6a7a7fb45c405dc09ee0cc4a0a2524
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionFinishedWeb3/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './TransactionFinishedWeb3';
diff --git a/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css b/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css
new file mode 100644
index 0000000000000000000000000000000000000000..78263e91bbb1955c6bf9946c709d1f9bcdf6d713
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css
@@ -0,0 +1,72 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.transaction {
+}
+
+.transaction > * {
+  display: inline-block;
+}
+
+.account {
+  text-align: center;
+}
+
+.from, .to {
+  width: 50%;
+}
+
+.from .account {
+  padding-right: 75px;
+}
+
+.to .account {
+  padding-left: 75px;
+}
+
+.from img, .to img {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  margin: 5px;
+}
+
+.from span, .to span {
+  display: block;
+}
+
+.tx {
+  position: relative;
+  text-align: center;
+  margin: 0 -75px;
+  width: 150px;
+  top: -20px;
+  white-space: nowrap;
+}
+
+.total {
+  font-size: 0.6em;
+  opacity: .5;
+}
+
+.contractIcon {
+  background: #eee;
+  width: 50px !important;
+  height: 50px !important;
+  box-sizing: border-box;
+  border-radius: 50%;
+  padding: 13px;
+}
diff --git a/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js b/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js
new file mode 100644
index 0000000000000000000000000000000000000000..10b54b10b46ee22fce704f768c120d52677470fa
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js
@@ -0,0 +1,168 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import ContractIcon from 'material-ui/svg-icons/action/code';
+import ReactTooltip from 'react-tooltip';
+
+import * as tUtil from '../util/transaction';
+import Account from '../Account';
+import styles from './TransactionMainDetails.css';
+
+export default class TransactionMainDetails extends Component {
+  static propTypes = {
+    id: PropTypes.object.isRequired,
+    from: PropTypes.string.isRequired,
+    fromBalance: PropTypes.object, // eth BigNumber, not required since it might take time to fetch
+    value: PropTypes.object.isRequired, // wei hex
+    totalValue: PropTypes.object.isRequired, // wei BigNumber
+    chain: PropTypes.string.isRequired,
+    to: PropTypes.string, // undefined if it's a contract
+    toBalance: PropTypes.object, // eth BigNumber - undefined if it's a contract or until it's fetched
+    className: PropTypes.string,
+    children: PropTypes.node
+  };
+
+  componentWillMount () {
+    const { value, totalValue } = this.props;
+    this.updateDisplayValues(value, totalValue);
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const { value, totalValue } = nextProps;
+    this.updateDisplayValues(value, totalValue);
+  }
+
+  updateDisplayValues (value, totalValue) {
+    this.setState({
+      feeEth: tUtil.calcFeeInEth(totalValue, value),
+      valueDisplay: tUtil.getValueDisplay(value),
+      valueDisplayWei: tUtil.getValueDisplayWei(value),
+      totalValueDisplay: tUtil.getTotalValueDisplay(totalValue),
+      totalValueDisplayWei: tUtil.getTotalValueDisplayWei(totalValue)
+    });
+  }
+
+  render () {
+    const { className, children } = this.props;
+    return (
+      <div className={ className }>
+        { this.renderTransfer() }
+        { this.renderContract() }
+        { children }
+      </div>
+    );
+  }
+
+  renderTransfer () {
+    const { from, fromBalance, to, toBalance, chain } = this.props;
+    if (!to) {
+      return;
+    }
+
+    return (
+      <div className={ styles.transaction }>
+        <div className={ styles.from }>
+          <div className={ styles.account }>
+            <Account address={ from } balance={ fromBalance } chain={ chain } />
+          </div>
+        </div>
+        <div className={ styles.tx }>
+          { this.renderValue() }
+          <div>&rArr;</div>
+          { this.renderTotalValue() }
+        </div>
+        <div className={ styles.to }>
+          <div className={ styles.account }>
+            <Account address={ to } balance={ toBalance } chain={ chain } />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderContract () {
+    const { from, fromBalance, to, chain } = this.props;
+    if (to) {
+      return;
+    }
+    return (
+      <div className={ styles.transaction }>
+        <div className={ styles.from }>
+          <div className={ styles.account }>
+            <Account address={ from } balance={ fromBalance } chain={ chain } />
+          </div>
+        </div>
+        <div className={ styles.tx }>
+          { this.renderValue() }
+          <div>&rArr;</div>
+          { this.renderTotalValue() }
+        </div>
+        <div className={ styles.to }>
+          <div className={ styles.account }>
+            <ContractIcon className={ styles.contractIcon } />
+            <br />
+            Contract
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderValue () {
+    const { id } = this.props;
+    const { valueDisplay, valueDisplayWei } = this.state;
+    return (
+      <div>
+        <div
+          data-tip
+          data-for={ 'value' + id }
+          data-effect='solid'
+          >
+          <strong>{ valueDisplay } </strong>
+          <small>ETH</small>
+        </div>
+        <ReactTooltip id={ 'value' + id }>
+          The value of the transaction.<br />
+          <strong>{ valueDisplayWei }</strong> <small>WEI</small>
+        </ReactTooltip>
+      </div>
+    );
+  }
+
+  renderTotalValue () {
+    const { id } = this.props;
+    const { totalValueDisplay, totalValueDisplayWei, feeEth } = this.state;
+    return (
+      <div>
+        <div
+          data-tip
+          data-for={ 'totalValue' + id }
+          data-effect='solid'
+          data-place='bottom'
+          className={ styles.total }>
+          { totalValueDisplay } <small>ETH</small>
+        </div>
+        <ReactTooltip id={ 'totalValue' + id }>
+          The value of the transaction including the mining fee is <strong>{ totalValueDisplayWei }</strong> <small>WEI</small>. <br />
+          (This includes a mining fee of <strong>{ feeEth }</strong> <small>ETH</small>)
+        </ReactTooltip>
+      </div>
+    );
+  }
+
+}
diff --git a/js/src/views/Signer/components/TransactionMainDetails/index.js b/js/src/views/Signer/components/TransactionMainDetails/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f7b053acd3c0e485e7b78edb158f9a9cee207d31
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionMainDetails/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './TransactionMainDetails';
diff --git a/js/src/views/Signer/components/TransactionPending/TransactionPending.css b/js/src/views/Signer/components/TransactionPending/TransactionPending.css
new file mode 100644
index 0000000000000000000000000000000000000000..16fd7c7b87ef21b3551660f6365d11460111dc93
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionPending/TransactionPending.css
@@ -0,0 +1,44 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.container {
+  padding: 25px 0 15px;
+}
+
+.transactionDetails {
+  margin-right: 321px;
+}
+
+.mainContainer {
+  position: relative;
+}
+
+.mainContainer:after {
+  clear: both;
+}
+
+.mainContainer > * {
+  vertical-align: middle;
+  min-height: 120px;
+}
+
+.inputs {
+  margin-right: 30px;
+  margin-left: 30px;
+  width: 180px;
+  position: relative;
+  top: -15px; /* due to material ui weird styling */
+}
diff --git a/js/src/views/Signer/components/TransactionPending/TransactionPending.js b/js/src/views/Signer/components/TransactionPending/TransactionPending.js
new file mode 100644
index 0000000000000000000000000000000000000000..2193cf6eb4e07ba57fafdba669f1e40abc507c14
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionPending/TransactionPending.js
@@ -0,0 +1,106 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import TransactionMainDetails from '../TransactionMainDetails';
+import TransactionPendingForm from '../TransactionPendingForm';
+import TransactionSecondaryDetails from '../TransactionSecondaryDetails';
+
+import styles from './TransactionPending.css';
+
+import * as tUtil from '../util/transaction';
+
+export default class TransactionPending extends Component {
+  static propTypes = {
+    id: PropTypes.object.isRequired,
+    chain: PropTypes.string.isRequired,
+    from: PropTypes.string.isRequired,
+    fromBalance: PropTypes.object, // eth BigNumber, not required since it mght take time to fetch
+    value: PropTypes.object.isRequired, // wei hex
+    gasPrice: PropTypes.object.isRequired, // wei hex
+    gas: PropTypes.object.isRequired, // hex
+    date: PropTypes.instanceOf(Date).isRequired,
+    to: PropTypes.string, // undefined if it's a contract
+    toBalance: PropTypes.object, // eth BigNumber - undefined if it's a contract or until it's fetched
+    data: PropTypes.string, // hex
+    nonce: PropTypes.number,
+    onConfirm: PropTypes.func.isRequired,
+    onReject: PropTypes.func.isRequired,
+    isSending: PropTypes.bool.isRequired,
+    className: PropTypes.string
+  };
+
+  static defaultProps = {
+    isSending: false
+  };
+
+  state = {
+    isDataExpanded: false
+  };
+
+  componentWillMount () {
+    const { gas, gasPrice, value } = this.props;
+    const fee = tUtil.getFee(gas, gasPrice); // BigNumber object
+    const totalValue = tUtil.getTotalValue(fee, value);
+    const gasPriceEthmDisplay = tUtil.getEthmFromWeiDisplay(gasPrice);
+    const gasToDisplay = tUtil.getGasDisplay(gas);
+    this.setState({ gasPriceEthmDisplay, totalValue, gasToDisplay });
+  }
+
+  render () {
+    const { totalValue } = this.state;
+    const className = this.props.className || '';
+
+    const { gasPriceEthmDisplay, gasToDisplay } = this.state;
+    const { id, date, data, from } = this.props;
+
+    return (
+      <div className={ `${styles.container} ${className}` }>
+        <div className={ styles.mainContainer }>
+          <TransactionMainDetails
+            { ...this.props }
+            className={ styles.transactionDetails }
+            totalValue={ totalValue }>
+            <TransactionSecondaryDetails
+              id={ id }
+              date={ date }
+              data={ data }
+              gasPriceEthmDisplay={ gasPriceEthmDisplay }
+              gasToDisplay={ gasToDisplay }
+            />
+          </TransactionMainDetails>
+          <TransactionPendingForm
+            address={ from }
+            isSending={ this.props.isSending }
+            onConfirm={ this.onConfirm }
+            onReject={ this.onReject }
+          />
+        </div>
+      </div>
+    );
+  }
+
+  onConfirm = password => {
+    const { id, gasPrice } = this.props;
+    this.props.onConfirm({ id, password, gasPrice });
+  }
+
+  onReject = () => {
+    this.props.onReject(this.props.id);
+  }
+
+}
diff --git a/js/src/views/Signer/components/TransactionPending/index.js b/js/src/views/Signer/components/TransactionPending/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..1916d05713d66c7fcddb0e8179e5b89f6b2ac7b5
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionPending/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './TransactionPending';
diff --git a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css
new file mode 100644
index 0000000000000000000000000000000000000000..37c1a8317c2d1098c638f808da2853482431cea4
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css
@@ -0,0 +1,45 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.container {
+  width: 220px;
+  padding: 20px 40px 0 40px;
+  /*border-left: 1px solid #aaa;*/
+  position: absolute;
+  top: 0;
+  right: 0;
+  box-sizing: content-box;
+}
+
+.rejectToggle {
+  display: block;
+  cursor: pointer;
+  color: #00e;
+  opacity: .7;
+  transition: opacity .5s;
+}
+
+.rejectToggle:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+
+.rejectToggle svg {
+  position: relative;
+  width: 18px !important;
+  height: 18px !important;
+  top: 3px;
+}
diff --git a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.js b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..aad28d513cb133a40e2fcb0b744e2c9d13b98ad3
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.js
@@ -0,0 +1,93 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import BackIcon from 'material-ui/svg-icons/navigation/arrow-back';
+
+import TransactionPendingFormConfirm from './TransactionPendingFormConfirm';
+import TransactionPendingFormReject from './TransactionPendingFormReject';
+import styles from './TransactionPendingForm.css';
+
+export default class TransactionPendingForm extends Component {
+
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    isSending: PropTypes.bool.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    onReject: PropTypes.func.isRequired,
+    className: PropTypes.string
+  };
+
+  state = {
+    isRejectOpen: false
+  };
+
+  render () {
+    const { className } = this.props;
+
+    return (
+      <div className={ `${styles.container} ${className}` }>
+        { this.renderForm() }
+        { this.renderRejectToggle() }
+      </div>
+    );
+  }
+
+  renderForm () {
+    const { address, isSending, onConfirm, onReject } = this.props;
+
+    if (this.state.isRejectOpen) {
+      return (
+        <TransactionPendingFormReject
+          onReject={ onReject } />
+      );
+    }
+
+    return (
+      <TransactionPendingFormConfirm
+        address={ address }
+        onConfirm={ onConfirm }
+        isSending={ isSending } />
+    );
+  }
+
+  renderRejectToggle () {
+    const { isRejectOpen } = this.state;
+    let html;
+
+    if (!isRejectOpen) {
+      html = <span>reject transaction</span>;
+    } else {
+      html = <span><BackIcon />I've changed my mind</span>;
+    }
+
+    return (
+      <a
+        onClick={ this.onToggleReject }
+        className={ styles.rejectToggle }
+      >
+      { html }
+      </a>
+    );
+  }
+
+  onToggleReject = () => {
+    const { isRejectOpen } = this.state;
+    this.setState({ isRejectOpen: !isRejectOpen });
+  }
+
+}
diff --git a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.css b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.css
new file mode 100644
index 0000000000000000000000000000000000000000..1c3aa9fc3e0589dbfed541ff60803af8ac39f89d
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.css
@@ -0,0 +1,41 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.confirmForm {
+  margin-top: -45px;
+}
+
+.confirmButton {
+  display: block !important;
+  margin-bottom: 10px;
+}
+
+.signerIcon {
+  width: 24px;
+  height: 24px;
+  vertical-align: middle;
+  margin-left: 12px;
+}
+
+.passwordHint {
+  font-size: 0.75em;
+  color: rgba(255, 255, 255, 0.5);
+  margin-bottom: 0.75em;
+}
+
+.passwordHint span {
+  opacity: 0.85;
+}
diff --git a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.js b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.js
new file mode 100644
index 0000000000000000000000000000000000000000..56f5b76b173e5c99e703b045dab902c86d806268
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.js
@@ -0,0 +1,133 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import RaisedButton from 'material-ui/RaisedButton';
+import ReactTooltip from 'react-tooltip';
+
+import { Form, Input, SignerIcon } from '../../../../../ui';
+
+import styles from './TransactionPendingFormConfirm.css';
+
+class TransactionPendingFormConfirm extends Component {
+  static propTypes = {
+    accounts: PropTypes.object.isRequired,
+    address: PropTypes.string.isRequired,
+    isSending: PropTypes.bool.isRequired,
+    onConfirm: PropTypes.func.isRequired
+  }
+
+  id = Math.random(); // for tooltip
+
+  state = {
+    password: ''
+  }
+
+  render () {
+    const { accounts, address, isSending } = this.props;
+    const { password } = this.state;
+    const account = accounts[address] || {};
+
+    const passwordHint = account.meta && account.meta.passwordHint
+      ? (<div><span>(hint) </span>{ account.meta.passwordHint }</div>)
+      : null;
+
+    return (
+      <div className={ styles.confirmForm }>
+        <Form>
+          <Input
+            onChange={ this.onModifyPassword }
+            onKeyDown={ this.onKeyDown }
+            label='Account Password'
+            hint='unlock the account'
+            type='password'
+            value={ password } />
+          <div className={ styles.passwordHint }>
+            { passwordHint }
+          </div>
+          <div
+            data-tip
+            data-place='bottom'
+            data-for={ 'transactionConfirmForm' + this.id }
+            data-effect='solid'
+          >
+            <RaisedButton
+              onClick={ this.onConfirm }
+              className={ styles.confirmButton }
+              fullWidth
+              primary
+              disabled={ isSending }
+              icon={ <SignerIcon className={ styles.signerIcon } /> }
+              label={ isSending ? 'Confirming...' : 'Confirm Transaction' }
+            />
+          </div>
+          { this.renderTooltip() }
+        </Form>
+      </div>
+    );
+  }
+
+  renderTooltip () {
+    if (this.state.password.length) {
+      return;
+    }
+
+    return (
+      <ReactTooltip id={ 'transactionConfirmForm' + this.id }>
+        Please provide a password for this account
+      </ReactTooltip>
+    );
+  }
+
+  onModifyPassword = evt => {
+    const password = evt.target.value;
+    this.setState({
+      password
+    });
+  }
+
+  onConfirm = () => {
+    const { password } = this.state;
+    this.props.onConfirm(password);
+  }
+
+  onKeyDown = evt => {
+    if (evt.which !== 13) {
+      return;
+    }
+
+    this.onConfirm();
+  }
+}
+
+function mapStateToProps (state) {
+  const { accounts } = state.personal;
+
+  return {
+    accounts
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TransactionPendingFormConfirm);
diff --git a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/index.js b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ad0f9fd1ff3223b7dac83d7b2ed82e4a7fcd273c
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './TransactionPendingFormConfirm';
diff --git a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.css b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.css
new file mode 100644
index 0000000000000000000000000000000000000000..39c7f377a562aba1889ca94f5af87217e98f2fca
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.css
@@ -0,0 +1,25 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+/* the rejection button itself, once .reject has been pressed */
+.rejectButton {
+  display: block !important;
+  margin-bottom: 5px;
+}
+
+.rejectText {
+  margin-bottom: 10px;
+}
diff --git a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.js b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.js
new file mode 100644
index 0000000000000000000000000000000000000000..23d4ed7943fda85fbd8a1deca59ee2eea3969bfd
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.js
@@ -0,0 +1,93 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import RaisedButton from 'material-ui/RaisedButton';
+
+import { REJECT_COUNTER_TIME } from '../../constants/constants';
+import styles from './TransactionPendingFormReject.css';
+
+export default class TransactionPendingFormReject extends Component {
+
+  static propTypes = {
+    onReject: PropTypes.func.isRequired,
+    className: PropTypes.string,
+    rejectCounterTime: PropTypes.number
+  };
+
+  static defaultProps = {
+    rejectCounterTime: REJECT_COUNTER_TIME
+  };
+
+  state = {
+    rejectCounter: this.props.rejectCounterTime
+  }
+
+  componentWillMount () {
+    this.onInitCounter();
+  }
+
+  componentWillUnmount () {
+    this.onResetCounter();
+  }
+
+  render () {
+    const { rejectCounter } = this.state;
+    const { onReject } = this.props;
+
+    return (
+      <div>
+        <div className={ styles.rejectText }>
+          Are you sure you want to reject transaction? <br />
+          <strong>This cannot be undone</strong>
+        </div>
+        <RaisedButton
+          onClick={ onReject }
+          className={ styles.rejectButton }
+          disabled={ rejectCounter > 0 }
+          fullWidth
+          label={ `Reject Transaction ${this.renderCounter()}` }
+        />
+      </div>
+    );
+  }
+
+  renderCounter () {
+    const { rejectCounter } = this.state;
+    if (!rejectCounter) {
+      return '';
+    }
+    return `(${rejectCounter})`;
+  }
+
+  onInitCounter () {
+    this.rejectInterval = setInterval(() => {
+      let { rejectCounter } = this.state;
+      if (rejectCounter === 0) {
+        return clearInterval(this.rejectInterval);
+      }
+      this.setState({ rejectCounter: rejectCounter - 1 });
+    }, 1000);
+  }
+
+  onResetCounter () {
+    clearInterval(this.rejectInterval);
+    this.setState({
+      rejectCounter: this.props.rejectCounterTime
+    });
+  }
+}
diff --git a/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/index.js b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3ac772104a8a27af83dab9706acadbde79254a4c
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './TransactionPendingFormReject';
diff --git a/js/src/views/Signer/components/TransactionPendingForm/index.js b/js/src/views/Signer/components/TransactionPendingForm/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..2fe1e9037696b89214dccc3eb97f67e1eabd6f96
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionPendingForm/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './TransactionPendingForm';
diff --git a/js/src/views/Signer/components/TransactionPendingWeb3/TransactionPendingWeb3.js b/js/src/views/Signer/components/TransactionPendingWeb3/TransactionPendingWeb3.js
new file mode 100644
index 0000000000000000000000000000000000000000..0d095e07c582d519b6b9ee79192eac58150a5ff3
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionPendingWeb3/TransactionPendingWeb3.js
@@ -0,0 +1,106 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import TransactionPending from '../TransactionPending';
+
+export default class TransactionPendingWeb3 extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  };
+
+  static propTypes = {
+    id: PropTypes.object.isRequired,
+    from: PropTypes.string.isRequired,
+    value: PropTypes.object.isRequired, // wei hex
+    gasPrice: PropTypes.object.isRequired, // wei hex
+    gas: PropTypes.object.isRequired, // hex
+    onConfirm: PropTypes.func.isRequired,
+    onReject: PropTypes.func.isRequired,
+    isSending: PropTypes.bool.isRequired,
+    date: PropTypes.instanceOf(Date).isRequired,
+    to: PropTypes.string, // undefined if it's a contract
+    data: PropTypes.string, // hex
+    nonce: PropTypes.number,
+    className: PropTypes.string
+  };
+
+  state = {
+    chain: 'homestead',
+    fromBalance: null, // avoid required prop loading warning
+    toBalance: null // avoid required prop loading warning in case there's a to address
+  }
+
+  componentDidMount () {
+    this.fetchChain();
+    this.fetchBalances();
+  }
+
+  render () {
+    const { fromBalance, toBalance, chain } = this.state;
+    const { from, to, date } = this.props;
+
+    return (
+      <TransactionPending
+        { ...this.props }
+        from={ from }
+        to={ to }
+        fromBalance={ fromBalance }
+        toBalance={ toBalance }
+        chain={ chain }
+        date={ date }
+      />
+    );
+  }
+
+  fetchChain () {
+    const { api } = this.context;
+
+    api.ethcore
+      .netChain()
+      .then((chain) => {
+        this.setState({ chain });
+      })
+      .catch((error) => {
+        console.error('fetchChain', error);
+      });
+  }
+
+  fetchBalances () {
+    const { from, to } = this.props;
+    this.fetchBalance(from, 'from');
+
+    if (!to) {
+      return;
+    }
+
+    this.fetchBalance(to, 'to');
+  }
+
+  fetchBalance (address, owner) {
+    const { api } = this.context;
+
+    api.eth
+      .getBalance(address)
+      .then((balance) => {
+        this.setState({ [owner + 'Balance']: balance });
+      })
+      .catch((error) => {
+        console.error('fetchBalance', error);
+      });
+  }
+}
diff --git a/js/src/views/Signer/components/TransactionPendingWeb3/index.js b/js/src/views/Signer/components/TransactionPendingWeb3/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..2765bbc1ce18f457f027cea0048e737c2b3eeb88
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionPendingWeb3/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './TransactionPendingWeb3';
diff --git a/js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.css b/js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.css
new file mode 100644
index 0000000000000000000000000000000000000000..3504c70289cb6f922610eed83e802553f8f2a814
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.css
@@ -0,0 +1,70 @@
+.iconsContainer {
+  display: block;
+  text-align: center;
+  font-size: .8em;
+  opacity: 0.5;
+  padding: 1em 0 0 0;
+}
+
+.iconsContainer > * {
+  margin-right: 3px;
+  display: inline-block;
+}
+
+.iconsContainer:after {
+  clear: both;
+}
+
+.hasInfoIcon svg,
+.miningTime svg,
+.gasPrice svg,
+.data svg,
+.date svg {
+  width: 16px !important;
+  height: 16px !important;
+  position: relative;
+  bottom: -3px;
+  margin: 0 0.25rem 0 0.75rem;
+}
+
+/* TODO [ToDr] composes was handling weird errors when linking from other app */
+.miningTime {
+  /* composes: hasInfoIcon; */
+}
+
+.gasPrice {
+  /* composes: hasInfoIcon; */
+}
+
+.data  {
+  /* composes: hasInfoIcon; */
+  cursor: pointer;
+}
+
+.data.noData {
+  cursor: text;
+}
+
+
+.dataTooltip {
+  word-wrap: break-word;
+  max-width: 400px;
+}
+
+.expandedData {
+  display: block;
+  padding: 15px;
+  background: gray;
+  word-wrap: break-word;
+  color: #fff;
+}
+
+.expandedContainer {
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.expandedContainer:empty {
+  padding: 0;
+}
+
diff --git a/js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.js b/js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.js
new file mode 100644
index 0000000000000000000000000000000000000000..61c1260d4a5bd7c3eaf7ce9835fde77898808511
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.js
@@ -0,0 +1,173 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import ReactTooltip from 'react-tooltip';
+import DescriptionIcon from 'material-ui/svg-icons/action/description';
+import GasIcon from 'material-ui/svg-icons/maps/local-gas-station';
+import TimeIcon from 'material-ui/svg-icons/device/access-time';
+import moment from 'moment';
+
+import styles from './TransactionSecondaryDetails.css';
+
+import * as tUtil from '../util/transaction';
+
+export default class TransactionSecondaryDetails extends Component {
+
+  static propTypes = {
+    id: PropTypes.object.isRequired,
+    date: PropTypes.instanceOf(Date),
+    data: PropTypes.string, // hex
+    gasPriceEthmDisplay: PropTypes.string,
+    gasToDisplay: PropTypes.string,
+    className: PropTypes.string
+  };
+
+  state = {
+    isDataExpanded: false
+  };
+
+  render () {
+    const className = this.props.className || '';
+
+    return (
+      <div className={ className }>
+        <div className={ styles.iconsContainer }>
+          { this.renderGasPrice() }
+          { this.renderData() }
+          { this.renderDate() }
+        </div>
+        <div className={ styles.expandedContainer }>
+          { this.renderDataExpanded() }
+        </div>
+      </div>
+    );
+  }
+
+  renderGasPrice () {
+    if (!this.props.gasPriceEthmDisplay && !this.props.gasToDisplay) return null;
+
+    const { id } = this.props;
+    const { gasPriceEthmDisplay, gasToDisplay } = this.props;
+    return (
+      <div
+        data-tip
+        data-place='right'
+        data-for={ 'gasPrice' + id }
+        data-effect='solid'
+      >
+        <span className={ styles.gasPrice }>
+          <GasIcon />
+          { gasPriceEthmDisplay } <small>ETH/MGAS</small>
+        </span>
+        { /* dynamic id required in case there are multple transactions in page */ }
+        <ReactTooltip id={ 'gasPrice' + id }>
+          Cost of 1,000,000 units of gas. This transaction will use up to <strong>{ gasToDisplay }</strong> <small>MGAS</small>.
+        </ReactTooltip>
+      </div>
+    );
+  }
+
+  renderData () {
+    if (!this.props.data) return null;
+
+    const { data, id } = this.props;
+    let dataToDisplay = this.noData() ? 'no data' : tUtil.getShortData(data);
+    const noDataClass = this.noData() ? styles.noData : '';
+    return (
+      <div
+        className={ `${styles.data} ${noDataClass}` }
+        onClick={ this.toggleDataExpanded }
+        data-tip
+        data-place='right'
+        data-for={ 'data' + id }
+        data-class={ styles.dataTooltip }
+        data-effect='solid'
+      >
+        <DescriptionIcon />
+        { dataToDisplay }
+        { /* dynamic id required in case there are multple transactions in page */ }
+        <ReactTooltip id={ 'data' + id }>
+          <strong>Extra data for the transaction: </strong>
+          <br />
+          { dataToDisplay }.
+          <br />
+          { this.noData() ? '' : <strong>Click to expand.</strong> }
+        </ReactTooltip>
+      </div>
+    );
+  }
+
+  renderDate () {
+    const { date, id } = this.props;
+
+    const dateToDisplay = moment(date).fromNow();
+    const fullDate = moment(date).format('LL LTS');
+
+    return (
+      <div
+        className={ styles.date }
+        data-tip
+        data-place='right'
+        data-for={ 'date' + id }
+        data-class={ styles.dataTooltip }
+        data-effect='solid'
+      >
+        <TimeIcon />
+        { dateToDisplay }
+        { /* dynamic id required in case there are multple transactions in page */ }
+        <ReactTooltip id={ 'date' + id }>
+          <strong>Date of the request: </strong>
+          <br />
+          { fullDate }
+        </ReactTooltip>
+      </div>
+    );
+  }
+
+  renderDataExpanded () {
+    if (!this.props.data) return null;
+
+    const { isDataExpanded } = this.state;
+    const { data } = this.props;
+
+    if (!isDataExpanded) {
+      return;
+    }
+
+    return (
+      <div className={ styles.expandedHelper }>
+        <h3>Transaction's Data</h3>
+        <code className={ styles.expandedData }>{ data }</code>
+      </div>
+    );
+  }
+
+  noData () {
+    return this.props.data === '0x';
+  }
+
+  toggleDataExpanded = () => {
+    if (this.noData()) {
+      return;
+    }
+    this.setState({
+      isDataExpanded: !this.state.isDataExpanded
+    });
+  }
+
+}
diff --git a/js/src/views/Signer/components/TransactionSecondaryDetails/index.js b/js/src/views/Signer/components/TransactionSecondaryDetails/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4b352c41a2a3fab09a6a751e2be75ba168aedf13
--- /dev/null
+++ b/js/src/views/Signer/components/TransactionSecondaryDetails/index.js
@@ -0,0 +1 @@
+export default from './TransactionSecondaryDetails';
diff --git a/js/src/views/Signer/components/TxHashLink/TxHashLink.js b/js/src/views/Signer/components/TxHashLink/TxHashLink.js
new file mode 100644
index 0000000000000000000000000000000000000000..812c4461d0de5a6462045bee23b0b26eb0c2a3fe
--- /dev/null
+++ b/js/src/views/Signer/components/TxHashLink/TxHashLink.js
@@ -0,0 +1,63 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { getTxLink } from '../util/transaction';
+
+export default class TxHashLink extends Component {
+
+  static propTypes = {
+    txHash: PropTypes.string.isRequired,
+    chain: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    className: PropTypes.string
+  }
+
+  state = {
+    link: null
+  };
+
+  componentWillMount () {
+    const { txHash, chain } = this.props;
+    this.updateLink(txHash, chain);
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const { txHash, chain } = nextProps;
+    this.updateLink(txHash, chain);
+  }
+
+  render () {
+    const { children, txHash, className } = this.props;
+    const { link } = this.state;
+
+    return (
+      <a
+        href={ link }
+        target='_blank'
+        className={ className }>
+        { children || txHash }
+      </a>
+    );
+  }
+
+  updateLink (txHash, chain) {
+    const link = getTxLink(txHash, chain);
+    this.setState({ link });
+  }
+
+}
diff --git a/js/src/views/Signer/components/TxHashLink/index.js b/js/src/views/Signer/components/TxHashLink/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef71992907dff0c1ace6135dd124f6c5a713c0a7
--- /dev/null
+++ b/js/src/views/Signer/components/TxHashLink/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './TxHashLink';
diff --git a/js/src/views/Signer/components/constants/constants.js b/js/src/views/Signer/components/constants/constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..cced99bf9fff29d776b19f26234a636d31228bfc
--- /dev/null
+++ b/js/src/views/Signer/components/constants/constants.js
@@ -0,0 +1,26 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+// after user clicks 'reject' for the first time,
+// a second reject button is rendered and disabled
+// for a few seconds to avoid accidential double clicks
+export const REJECT_COUNTER_TIME = 3;
+
+// links to chain explorers
+export const BASE_LINK_ACCOUNT_MORDEN = 'https://testnet.etherscan.io/address/';
+export const BASE_LINK_ACCOUNT_HOMESTEAD = 'https://etherscan.io/address/';
+export const BASE_LINK_TX_MORDEN = 'https://testnet.etherscan.io/tx/';
+export const BASE_LINK_TX_HOMESTEAD = 'https://etherscan.io/tx/';
diff --git a/js/src/views/Signer/components/index.js b/js/src/views/Signer/components/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..2dd5174e2a9385e2671ee616975f7f6ae19e7815
--- /dev/null
+++ b/js/src/views/Signer/components/index.js
@@ -0,0 +1,18 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export RequestFinishedWeb3 from './RequestFinishedWeb3';
+export RequestPendingWeb3 from './RequestPendingWeb3';
diff --git a/js/src/views/Signer/components/util/account.js b/js/src/views/Signer/components/util/account.js
new file mode 100644
index 0000000000000000000000000000000000000000..d37f029c1071c7f3ab4a1863f2320e7bc84bb5d1
--- /dev/null
+++ b/js/src/views/Signer/components/util/account.js
@@ -0,0 +1,25 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { BASE_LINK_ACCOUNT_MORDEN, BASE_LINK_ACCOUNT_HOMESTEAD } from '../constants/constants';
+
+export const getAccountLink = _getAccountLink;
+
+function _getAccountLink (address, chain) {
+  const isTestNet = chain === 'morden' || chain === 'testnet';
+  const base = isTestNet ? BASE_LINK_ACCOUNT_MORDEN : BASE_LINK_ACCOUNT_HOMESTEAD;
+  return base + address;
+}
diff --git a/js/src/views/Signer/components/util/logger.js b/js/src/views/Signer/components/util/logger.js
new file mode 100644
index 0000000000000000000000000000000000000000..671d4de8460e301bce8e7338fa7cbff57e144b63
--- /dev/null
+++ b/js/src/views/Signer/components/util/logger.js
@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const isLogging = process.env.LOGGING;
+
+export default logger();
+
+function logger () {
+  return isLogging ? devLogger() : prodLogger();
+}
+
+function prodLogger () {
+  return {
+    log: noop,
+    info: noop,
+    error: noop,
+    warn: noop
+  };
+}
+
+function devLogger () {
+  return console;
+}
+
+function noop () {}
diff --git a/js/src/views/Signer/components/util/react.js b/js/src/views/Signer/components/util/react.js
new file mode 100644
index 0000000000000000000000000000000000000000..095f6e6b0d16be2cc8677abb33b7cefb6dcf9cd2
--- /dev/null
+++ b/js/src/views/Signer/components/util/react.js
@@ -0,0 +1,21 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { isValidElement } from 'react';
+
+export function isReactComponent (componentOrElem) {
+  return isValidElement(componentOrElem) && typeof componentOrElem.type === 'function';
+}
diff --git a/js/src/views/Signer/components/util/transaction.js b/js/src/views/Signer/components/util/transaction.js
new file mode 100644
index 0000000000000000000000000000000000000000..b843b7643760c62c59e944ffa9248e7df6a43860
--- /dev/null
+++ b/js/src/views/Signer/components/util/transaction.js
@@ -0,0 +1,121 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+
+const WEI_TO_ETH_MULTIPLIER = 0.000000000000000001;
+const WEI_TO_SZABU_MULTIPLIER = 0.000000000001;
+import { BASE_LINK_TX_MORDEN, BASE_LINK_TX_HOMESTEAD } from '../constants/constants';
+
+export const getShortData = _getShortData;
+// calculations
+export const getFee = _getFee;
+export const calcFeeInEth = _calcFeeInEth;
+export const getTotalValue = _getTotalValue;
+// displays
+export const getSzaboFromWeiDisplay = _getSzaboFromWeiDisplay;
+export const getValueDisplay = _getValueDisplay;
+export const getValueDisplayWei = _getValueDisplayWei;
+export const getTotalValueDisplay = _getTotalValueDisplay;
+export const getTotalValueDisplayWei = _getTotalValueDisplayWei;
+export const getEthmFromWeiDisplay = _getEthmFromWeiDisplay;
+export const getGasDisplay = _getGasDisplay;
+// links
+export const getTxLink = _getTxLink;
+
+function _getShortData (data) {
+  if (data.length <= 3) {
+    return data;
+  }
+  return data.substr(0, 3) + '...';
+}
+
+/*
+ * @param {hex string} gas
+ * @param {wei hex string} gasPrice
+ * @return {BigNumber} fee in wei
+ */
+function _getFee (gas, gasPrice) {
+  gas = new BigNumber(gas);
+  gasPrice = new BigNumber(gasPrice);
+  return gasPrice.times(gas);
+}
+
+function _calcFeeInEth (totalValue, value) {
+  let fee = new BigNumber(totalValue).sub(new BigNumber(value));
+  return fee.times(WEI_TO_ETH_MULTIPLIER).toFormat(7);
+}
+
+/*
+ * @param {wei BigNumber} fee
+ * @param {wei hex string} value
+ * @return {BigNumber} total value in wei
+ */
+function _getTotalValue (fee, value) {
+  value = new BigNumber(value);
+  return fee.plus(value);
+}
+
+/*
+ * @param {wei hex string} gasPrice
+ * @return {string} szabo gas price with unit [szabo] i.e. 21,423 [szabo]
+ */
+function _getSzaboFromWeiDisplay (gasPrice) {
+  gasPrice = new BigNumber(gasPrice);
+  return gasPrice.times(WEI_TO_SZABU_MULTIPLIER).toPrecision(5);
+}
+
+/*
+ * @param {wei hex string} value
+ * @return {string} value in WEI nicely formatted
+ */
+function _getValueDisplay (value) {
+  value = new BigNumber(value);
+  return value.times(WEI_TO_ETH_MULTIPLIER).toFormat(5);
+}
+
+function _getValueDisplayWei (value) {
+  value = new BigNumber(value);
+  return value.toFormat(0);
+}
+
+/*
+ * @param {wei hex string} totalValue
+ * @return {string} total value (including fee) with units i.e. 1.32 [eth]
+ */
+function _getTotalValueDisplay (totalValue) {
+  totalValue = new BigNumber(totalValue);
+  return totalValue.times(WEI_TO_ETH_MULTIPLIER).toFormat(5);
+}
+
+function _getTotalValueDisplayWei (totalValue) {
+  totalValue = new BigNumber(totalValue);
+  return totalValue.toFormat(0);
+}
+
+function _getEthmFromWeiDisplay (weiHexString) {
+  const value = new BigNumber(weiHexString);
+  return value.times(WEI_TO_ETH_MULTIPLIER).times(1e7).toFixed(5);
+}
+
+function _getTxLink (txHash, chain) {
+  const base = chain === 'morden' || chain === 'testnet' ? BASE_LINK_TX_MORDEN : BASE_LINK_TX_HOMESTEAD;
+  return base + txHash;
+}
+
+function _getGasDisplay (gas) {
+  return new BigNumber(gas).times(1e-7).toFormat(4);
+}
diff --git a/js/src/views/Signer/components/util/transaction.spec.js b/js/src/views/Signer/components/util/transaction.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..af181a7f89ad55bdc7c6969b701c8c6a26069907
--- /dev/null
+++ b/js/src/views/Signer/components/util/transaction.spec.js
@@ -0,0 +1,79 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import { getShortData, getFee, getTotalValue } from './transaction';
+
+describe('util/transaction', () => {
+  describe('getEstimatedMiningTime', () => {
+    it('should return estimated mining time', () => {
+    });
+  });
+
+  describe('getShortData', () => {
+    it('should return short data', () => {
+      // given
+      const data = '0xh87dY78';
+
+      // when
+      const res = getShortData(data);
+
+      // then
+      expect(res).to.equal('0xh...');
+    });
+
+    it('should return data as is', () => {
+      // given
+      const data = '0x0';
+
+      // when
+      const shortData = getShortData(data);
+
+      // then
+      expect(shortData).to.equal('0x0');
+    });
+  });
+
+  describe('getFee', () => {
+    it('should return wei BigNumber object equals to gas * gasPrice', () => {
+      // given
+      const gas = '0x76c0'; // 30400
+      const gasPrice = '0x9184e72a000'; // 10000000000000 wei
+
+      // when
+      const fee = getFee(gas, gasPrice);
+
+      // then
+      expect(fee).to.be.an.instanceOf(BigNumber);
+      expect(fee.toString()).to.be.equal('304000000000000000'); // converting to string due to https://github.com/MikeMcl/bignumber.js/issues/11
+    });
+  });
+
+  describe('getTotalValue', () => {
+    it('should return wei BigNumber totalValue equals to value + fee', () => {
+      // given
+      const fee = new BigNumber(304000000000000000); // wei
+      const value = '0x9184e72a'; // 2441406250 wei
+
+      // when
+      const totalValue = getTotalValue(fee, value);
+
+      // then
+      expect(totalValue).to.be.an.instanceOf(BigNumber);
+      expect(totalValue.toString()).to.be.equal('304000002441406250'); // converting to string due to https://github.com/MikeMcl/bignumber.js/issues/11
+    });
+  });
+});
diff --git a/js/src/views/Signer/components/util/util.js b/js/src/views/Signer/components/util/util.js
new file mode 100644
index 0000000000000000000000000000000000000000..095a78d602d3cb5d14319de6a86980bfaa29feb5
--- /dev/null
+++ b/js/src/views/Signer/components/util/util.js
@@ -0,0 +1,35 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function toPromise (fn) {
+  return new Promise((resolve, reject) => {
+    fn((err, res) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(res);
+      }
+    });
+  });
+}
+
+export function identity (x) {
+  return x;
+}
+
+export function capitalize (str) {
+  return str[0].toUpperCase() + str.slice(1).toLowerCase();
+}
diff --git a/js/src/views/Signer/containers/Embedded/embedded.css b/js/src/views/Signer/containers/Embedded/embedded.css
new file mode 100644
index 0000000000000000000000000000000000000000..ff6f13a2f4d5b1e2808eedf5ea2ddfbda0c59d1d
--- /dev/null
+++ b/js/src/views/Signer/containers/Embedded/embedded.css
@@ -0,0 +1,29 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.signer {
+}
+
+.pending {
+}
+
+.none {
+  color: #aaa;
+}
+
+.info {
+  padding: 1em 0;
+}
diff --git a/js/src/views/Signer/containers/Embedded/embedded.js b/js/src/views/Signer/containers/Embedded/embedded.js
new file mode 100644
index 0000000000000000000000000000000000000000..9ec18988cd382916a4bb71f20b205ac785249dd8
--- /dev/null
+++ b/js/src/views/Signer/containers/Embedded/embedded.js
@@ -0,0 +1,113 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import * as RequestsActions from '../../../../redux/providers/signerActions';
+import { Container } from '../../../../ui';
+
+import { RequestPendingWeb3 } from '../../components';
+
+import styles from './embedded.css';
+
+class Embedded extends Component {
+  static propTypes = {
+    signer: PropTypes.shape({
+      pending: PropTypes.array.isRequired,
+      finished: PropTypes.array.isRequired
+    }).isRequired,
+    actions: PropTypes.shape({
+      startConfirmRequest: PropTypes.func.isRequired,
+      startRejectRequest: PropTypes.func.isRequired
+    }).isRequired
+  };
+
+  render () {
+    return (
+      <Container>
+        <div className={ styles.signer }>
+          { this.renderPendingRequests() }
+        </div>
+      </Container>
+    );
+  }
+
+  renderPendingRequests () {
+    const { signer } = this.props;
+    const { pending } = signer;
+
+    if (!pending.length) {
+      return (
+        <div className={ styles.none }>
+          There are currently no pending requests awaiting your confirmation
+        </div>
+      );
+    }
+
+    const items = pending.sort(this._sortRequests).map(this.renderPending);
+
+    return (
+      <div className={ styles.pending }>
+        { items }
+      </div>
+    );
+  }
+
+  renderPending = (data) => {
+    const { actions } = this.props;
+    const { payload, id, isSending, date } = data;
+
+    return (
+      <RequestPendingWeb3
+        className={ styles.request }
+        onConfirm={ actions.startConfirmRequest }
+        onReject={ actions.startRejectRequest }
+        isSending={ isSending || false }
+        key={ id }
+        id={ id }
+        payload={ payload }
+        date={ date }
+      />
+    );
+  }
+
+  _sortRequests = (a, b) => {
+    return new BigNumber(b.id).cmp(a.id);
+  }
+}
+
+function mapStateToProps (state) {
+  const { actions, signer } = state;
+
+  return {
+    actions,
+    signer
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    actions: bindActionCreators(RequestsActions, dispatch)
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Embedded);
diff --git a/js/src/views/Signer/containers/Embedded/index.js b/js/src/views/Signer/containers/Embedded/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef42659387c673b9ccc0ad0caa917d6f8a8f82b6
--- /dev/null
+++ b/js/src/views/Signer/containers/Embedded/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './embedded';
diff --git a/js/src/views/Signer/containers/RequestsPage/RequestsPage.css b/js/src/views/Signer/containers/RequestsPage/RequestsPage.css
new file mode 100644
index 0000000000000000000000000000000000000000..3dbf1cf481109492a15838735d566595455eaedc
--- /dev/null
+++ b/js/src/views/Signer/containers/RequestsPage/RequestsPage.css
@@ -0,0 +1,25 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.request {
+}
+
+.noRequestsMsg {
+  color: #aaa;
+}
+
+.items {
+}
diff --git a/js/src/views/Signer/containers/RequestsPage/RequestsPage.js b/js/src/views/Signer/containers/RequestsPage/RequestsPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..2a0d087e3717666adbc9fd79d6f767e05a80edef
--- /dev/null
+++ b/js/src/views/Signer/containers/RequestsPage/RequestsPage.js
@@ -0,0 +1,158 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import * as RequestsActions from '../../../../redux/providers/signerActions';
+import { Container, ContainerTitle } from '../../../../ui';
+
+import { RequestPendingWeb3, RequestFinishedWeb3 } from '../../components';
+
+import styles from './RequestsPage.css';
+
+class RequestsPage extends Component {
+  static propTypes = {
+    signer: PropTypes.shape({
+      pending: PropTypes.array.isRequired,
+      finished: PropTypes.array.isRequired
+    }).isRequired,
+    actions: PropTypes.shape({
+      startConfirmRequest: PropTypes.func.isRequired,
+      startRejectRequest: PropTypes.func.isRequired
+    }).isRequired
+  };
+
+  render () {
+    const { pending, finished } = this.props.signer;
+
+    if (!pending.length && !finished.length) {
+      return this.renderNoRequestsMsg();
+    }
+
+    return (
+      <div>
+        { this.renderPendingRequests() }
+        { this.renderFinishedRequests() }
+      </div>
+    );
+  }
+
+  _sortRequests = (a, b) => {
+    return new BigNumber(b.id).cmp(a.id);
+  }
+
+  renderPendingRequests () {
+    const { pending } = this.props.signer;
+
+    if (!pending.length) {
+      return;
+    }
+
+    const items = pending.sort(this._sortRequests).map(this.renderPending);
+
+    return (
+      <Container>
+        <ContainerTitle title='Pending Requests' />
+        <div className={ styles.items }>
+          { items }
+        </div>
+      </Container>
+    );
+  }
+
+  renderFinishedRequests () {
+    const { finished } = this.props.signer;
+
+    if (!finished.length) {
+      return;
+    }
+
+    const items = finished.sort(this._sortRequests).map(this.renderFinished);
+
+    return (
+      <Container>
+        <ContainerTitle title='Finished Requests' />
+        <div className={ styles.items }>
+          { items }
+        </div>
+      </Container>
+    );
+  }
+
+  renderPending = (data) => {
+    const { actions } = this.props;
+    const { payload, id, isSending, date } = data;
+
+    return (
+      <RequestPendingWeb3
+        className={ styles.request }
+        onConfirm={ actions.startConfirmRequest }
+        onReject={ actions.startRejectRequest }
+        isSending={ isSending || false }
+        key={ id }
+        id={ id }
+        payload={ payload }
+        date={ date }
+      />
+    );
+  }
+
+  renderFinished = (data) => {
+    const { payload, id, result, msg, status, error, date } = data;
+
+    return (
+      <RequestFinishedWeb3
+        className={ styles.request }
+        result={ result }
+        key={ id }
+        id={ id }
+        msg={ msg }
+        status={ status }
+        error={ error }
+        payload={ payload }
+        date={ date }
+        />
+    );
+  }
+
+  renderNoRequestsMsg () {
+    return (
+      <Container>
+        <div className={ styles.noRequestsMsg }>
+          There are no requests requiring your confirmation.
+        </div>
+      </Container>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  return state;
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    actions: bindActionCreators(RequestsActions, dispatch)
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(RequestsPage);
diff --git a/js/src/views/Signer/containers/RequestsPage/index.js b/js/src/views/Signer/containers/RequestsPage/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..cb3fdd1439fe0688dcd901ae74fe0e0c931e154f
--- /dev/null
+++ b/js/src/views/Signer/containers/RequestsPage/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './RequestsPage';
diff --git a/js/src/views/Signer/index.js b/js/src/views/Signer/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ff804fe5b622bb07438d514cca5745b95e5ed412
--- /dev/null
+++ b/js/src/views/Signer/index.js
@@ -0,0 +1,23 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Embedded from './containers/Embedded';
+
+export default from './signer';
+
+export {
+  Embedded
+};
diff --git a/js/src/views/Signer/signer.css b/js/src/views/Signer/signer.css
new file mode 100644
index 0000000000000000000000000000000000000000..83d1b800f369c0fa53355b3d7035e784c1384509
--- /dev/null
+++ b/js/src/views/Signer/signer.css
@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.signer {
+}
+
+.container {
+}
+
+.mainContainer {
+}
diff --git a/js/src/views/Signer/signer.js b/js/src/views/Signer/signer.js
new file mode 100644
index 0000000000000000000000000000000000000000..b9aace59530b2a6177cc2b6cfbe1c485a06f5f71
--- /dev/null
+++ b/js/src/views/Signer/signer.js
@@ -0,0 +1,36 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import { Actionbar, Page } from '../../ui';
+import RequestsPage from './containers/RequestsPage';
+
+import styles from './signer.css';
+
+export default class Signer extends Component {
+  render () {
+    return (
+      <div className={ styles.signer }>
+        <Actionbar
+          title='Trusted Signer' />
+        <Page>
+          <RequestsPage />
+        </Page>
+      </div>
+    );
+  }
+}
diff --git a/js/src/views/Signer/utils/extension.js b/js/src/views/Signer/utils/extension.js
new file mode 100644
index 0000000000000000000000000000000000000000..a99a72d63d2f2eeb6f66495fe1e03a982b457dc3
--- /dev/null
+++ b/js/src/views/Signer/utils/extension.js
@@ -0,0 +1,19 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export const isExtension = () => {
+  return window.location.protocol.indexOf('chrome-extension:') > -1;
+};
diff --git a/js/src/views/Signer/utils/utils.js b/js/src/views/Signer/utils/utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..8c231275c8cfab13cd605ad11738d88c7369215c
--- /dev/null
+++ b/js/src/views/Signer/utils/utils.js
@@ -0,0 +1,19 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function identity (x) {
+  return x;
+}
diff --git a/js/src/views/Status/actions/app.js b/js/src/views/Status/actions/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..d236dd84630d143a3f0c2c61ced68a52e689b508
--- /dev/null
+++ b/js/src/views/Status/actions/app.js
@@ -0,0 +1,19 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createAction } from 'redux-actions';
+
+export const initAppAction = createAction('init app');
diff --git a/js/src/views/Status/actions/clipboard.js b/js/src/views/Status/actions/clipboard.js
new file mode 100644
index 0000000000000000000000000000000000000000..732b91d6e90196003cfdeaaad09f9ac21b735470
--- /dev/null
+++ b/js/src/views/Status/actions/clipboard.js
@@ -0,0 +1,22 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createAction } from 'redux-actions';
+
+import { identity } from '../util';
+import { withError } from '../../../redux/util';
+
+export const copyToClipboard = createAction('copy toClipboard', identity, withError(identity));
diff --git a/js/src/views/Status/actions/debug.js b/js/src/views/Status/actions/debug.js
new file mode 100644
index 0000000000000000000000000000000000000000..3cd0c0a43af4d4d4f5c7fb3f8c3695e43390e641
--- /dev/null
+++ b/js/src/views/Status/actions/debug.js
@@ -0,0 +1,23 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createAction } from 'redux-actions';
+
+export const error = createAction('error');
+export const updateDevLogs = createAction('update devLogs');
+export const removeDevLogs = createAction('remove devLogs');
+export const updateDevLogging = createAction('update devLogging');
+export const updateDevLogsLevels = createAction('update devLogsLevels');
diff --git a/js/src/views/Status/actions/localstorage.js b/js/src/views/Status/actions/localstorage.js
new file mode 100644
index 0000000000000000000000000000000000000000..2bf2d284113d6b8f2360b5be90002ebdffb031d5
--- /dev/null
+++ b/js/src/views/Status/actions/localstorage.js
@@ -0,0 +1,20 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createAction } from 'redux-actions';
+
+export const error = createAction('error');
+export const syncRpcStateFromLocalStorage = createAction('sync rpcStateFromLocalStorage');
diff --git a/js/src/views/Status/actions/logger.js b/js/src/views/Status/actions/logger.js
new file mode 100644
index 0000000000000000000000000000000000000000..c202efbbc800d93f4addbabbff2fc12a3e489cc0
--- /dev/null
+++ b/js/src/views/Status/actions/logger.js
@@ -0,0 +1,24 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createAction } from 'redux-actions';
+
+import { identity } from '../util';
+import { withError } from '../../../redux/util';
+
+export const updateLogging = createAction(
+  'update logging', identity, withError(flag => `logging updated to ${flag}`)
+);
diff --git a/js/src/views/Status/actions/mining.js b/js/src/views/Status/actions/mining.js
new file mode 100644
index 0000000000000000000000000000000000000000..e4854420268217ba41d23fff5c6f00fe2bef600f
--- /dev/null
+++ b/js/src/views/Status/actions/mining.js
@@ -0,0 +1,24 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createAction } from 'redux-actions';
+
+export const error = createAction('error');
+export const updateAuthor = createAction('update author');
+export const updateMinGasPrice = createAction('update minGasPrice');
+export const updateGasFloorTarget = createAction('update gasFloorTarget');
+export const updateExtraData = createAction('update extraData');
+export const updateDefaultExtraData = createAction('update defaultExtraData');
diff --git a/js/src/views/Status/actions/modify-mining.js b/js/src/views/Status/actions/modify-mining.js
new file mode 100644
index 0000000000000000000000000000000000000000..ff959c9f5c275d982e192b9f037be84af0893c5a
--- /dev/null
+++ b/js/src/views/Status/actions/modify-mining.js
@@ -0,0 +1,23 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createAction } from 'redux-actions';
+
+export const modifyMinGasPrice = createAction('modify minGasPrice');
+export const modifyGasFloorTarget = createAction('modify gasFloorTarget');
+export const modifyAuthor = createAction('modify author');
+export const modifyExtraData = createAction('modify extraData');
+export const resetExtraData = createAction('reset extraData');
diff --git a/js/src/views/Status/actions/rpc.js b/js/src/views/Status/actions/rpc.js
new file mode 100644
index 0000000000000000000000000000000000000000..bedbb105689111d363f37b95d4e522fe26ddf256
--- /dev/null
+++ b/js/src/views/Status/actions/rpc.js
@@ -0,0 +1,28 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createAction } from 'redux-actions';
+
+import { identity } from '../util';
+import { withError } from '../../../redux/util';
+
+export const error = createAction('error rpc', identity,
+  withError(() => 'error processing rpc call. check console for details', 'error')
+);
+export const fireRpc = createAction('fire rpc');
+export const addRpcReponse = createAction('add rpcResponse');
+export const selectRpcMethod = createAction('select rpcMethod');
+export const resetRpcPrevCalls = createAction('reset rpcPrevCalls');
diff --git a/js/src/views/Status/actions/status.js b/js/src/views/Status/actions/status.js
new file mode 100644
index 0000000000000000000000000000000000000000..8980e34c493ec44768e344097ef66f947473cdaf
--- /dev/null
+++ b/js/src/views/Status/actions/status.js
@@ -0,0 +1,29 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { createAction } from 'redux-actions';
+
+export const error = createAction('error');
+export const updateHashrate = createAction('update hashrate');
+export const updateBlockNumber = createAction('update blockNumber');
+export const updateVersion = createAction('update version');
+export const updatePeerCount = createAction('update peerCount');
+export const updateNetPeers = createAction('update netPeers');
+export const updateNetChain = createAction('update netChain');
+export const updateNetPort = createAction('update netPort');
+export const updateRpcSettings = createAction('update rpcSettings');
+export const updateNodeName = createAction('update nodeName');
+export const updateAccounts = createAction('update accounts');
diff --git a/js/src/views/Status/components-compositors/Animated/AnimateChildren.css b/js/src/views/Status/components-compositors/Animated/AnimateChildren.css
new file mode 100644
index 0000000000000000000000000000000000000000..5d7b5b39ae4a853921bbf446bcd2a3acd58453f3
--- /dev/null
+++ b/js/src/views/Status/components-compositors/Animated/AnimateChildren.css
@@ -0,0 +1,55 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+/* todo [adgo] - make local */
+:global .transition-appear {
+  opacity: 0.01;
+}
+
+:global .transition-appear.transition-appear-active {
+  opacity: 1;
+  transition: opacity .3s ease-in-out;
+}
+
+:global .transition-enter {
+  opacity: 0.01;
+}
+
+:global .transition-enter.transition-enter-active {
+  opacity: 1;
+  transition: opacity .3s ease-in-out;
+}
+
+:global .transition-leave {
+  opacity: 1;
+}
+
+:global .transition-leave.transition-leave-active {
+  opacity: 0.01;
+  transition: opacity .3s ease-in-out;
+}
+
+:global .absoluteAnimationContainer {
+  position: relative;
+}
+
+:global .absoluteAnimationContainer > .transition-leave {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+}
diff --git a/js/src/views/Status/components-compositors/Animated/Animated.js b/js/src/views/Status/components-compositors/Animated/Animated.js
new file mode 100644
index 0000000000000000000000000000000000000000..c22344c015075a4453942fd2b59d3a25bda48cac
--- /dev/null
+++ b/js/src/views/Status/components-compositors/Animated/Animated.js
@@ -0,0 +1,28 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+import AnimateChildren from './children';
+
+export default Wrapped => class Animated extends Component {
+  render () {
+    return (
+      <AnimateChildren>
+        <Wrapped { ...this.props } />
+      </AnimateChildren>
+    );
+  }
+};
diff --git a/js/src/views/Status/components-compositors/Animated/children.js b/js/src/views/Status/components-compositors/Animated/children.js
new file mode 100644
index 0000000000000000000000000000000000000000..be7f910bfec9aa012f0904c36333fa564f3cdd71
--- /dev/null
+++ b/js/src/views/Status/components-compositors/Animated/children.js
@@ -0,0 +1,63 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { isReactComponent } from '../../util/react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import './AnimateChildren.css';
+
+export default class AnimateChildren extends Component {
+  render () {
+    const className = this.props.absolute ? 'absoluteAnimationContainer' : '';
+    return (
+      <ReactCSSTransitionGroup
+        component='div'
+        className={ className }
+        transitionName='transition'
+        transitionAppear
+        transitionAppearTimeout={ 0 }
+        transitionLeaveTimeout={ 0 }
+        transitionEnterTimeout={ 0 }
+        >
+        { this.renderChildren() }
+      </ReactCSSTransitionGroup>
+    );
+  }
+
+  renderChildren () {
+    const { children, isView } = this.props;
+
+    if (isView) {
+      return React.cloneElement(this.props.children, {
+        key: this.props.pathname
+      });
+    }
+
+    if (isReactComponent(children)) {
+      return React.cloneElement(this.props.children, { ...this.props });
+    }
+
+    return children;
+  }
+
+  static propTypes = {
+    children: PropTypes.any.isRequired,
+    pathname: PropTypes.string,
+    isView: PropTypes.bool,
+    absolute: PropTypes.bool
+  }
+
+}
diff --git a/js/src/views/Status/components-compositors/Animated/index.js b/js/src/views/Status/components-compositors/Animated/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ee48d0704a3a6138ffab286316b3550186d03eed
--- /dev/null
+++ b/js/src/views/Status/components-compositors/Animated/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './Animated';
diff --git a/js/src/views/Status/components/AutoComplete/AutoComplete.js b/js/src/views/Status/components/AutoComplete/AutoComplete.js
new file mode 100644
index 0000000000000000000000000000000000000000..c16dbd27635db400973b42c230a305ae7c9a45b4
--- /dev/null
+++ b/js/src/views/Status/components/AutoComplete/AutoComplete.js
@@ -0,0 +1,44 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import AutoComplete from 'material-ui/AutoComplete';
+
+export default class WrappedAutoComplete extends Component {
+
+  render () {
+    return (
+      <AutoComplete { ...this.props } />
+    );
+  }
+
+  static defaultProps = {
+    openOnFocus: true,
+    filter: (searchText, key) => searchText === '' || key.toLowerCase().indexOf(searchText.toLowerCase()) !== -1
+  }
+
+  static propTypes = {
+    dataSource: PropTypes.array.isRequired,
+    filter: PropTypes.func,
+    name: PropTypes.string.isRequired,
+    openOnFocus: PropTypes.bool
+  }
+
+  static contextTypes = {
+    muiTheme: PropTypes.object.isRequired
+  }
+
+}
diff --git a/js/src/views/Status/components/AutoComplete/AutoComplete.spec.js b/js/src/views/Status/components/AutoComplete/AutoComplete.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..046fcfad6c8649dfdc8b695ede3d9670c120202c
--- /dev/null
+++ b/js/src/views/Status/components/AutoComplete/AutoComplete.spec.js
@@ -0,0 +1,44 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+
+import WrappedAutoComplete from './AutoComplete';
+
+describe('components/AutoComplete', () => {
+  describe('rendering', () => {
+    let rendered;
+
+    beforeEach(() => {
+      const dataSource = ['abc', 'def', 'ghi'];
+      const component =
+        <WrappedAutoComplete
+          dataSource={ dataSource }
+          name='testComponent'
+        />;
+
+      rendered = shallow(component, { context: { muiTheme: getMuiTheme({}) } });
+    });
+
+    it('renders the material AutoComplete component', () => {
+      expect(rendered).to.be.ok;
+      expect(rendered).to.have.exactly(1).descendants('AutoComplete');
+    });
+  });
+});
diff --git a/js/src/views/Status/components/AutoComplete/index.js b/js/src/views/Status/components/AutoComplete/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..201b6646e8fd8ad9bbcccb4f3ae5be5909cb7b60
--- /dev/null
+++ b/js/src/views/Status/components/AutoComplete/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './AutoComplete';
diff --git a/js/src/views/Status/components/Box/Box.js b/js/src/views/Status/components/Box/Box.js
new file mode 100644
index 0000000000000000000000000000000000000000..c950c0d659ce68a89607fbf53f0b1eaf6fc44a7c
--- /dev/null
+++ b/js/src/views/Status/components/Box/Box.js
@@ -0,0 +1,47 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+export default class Box extends Component {
+
+  renderValue () {
+    if (!this.props.value) {
+      return;
+    }
+
+    return (
+      <h1>{ this.props.value }</h1>
+    );
+  }
+
+  render () {
+    return (
+      <div className='dapp-box'>
+        <h2>{ this.props.title }</h2>
+        { this.renderValue() }
+        { this.props.children }
+      </div>
+    );
+  }
+
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+    value: PropTypes.string,
+    children: PropTypes.element
+  }
+
+}
diff --git a/js/src/views/Status/components/Box/Box.spec.js b/js/src/views/Status/components/Box/Box.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..0630dc99fc834c52d5f8bc6de1a20e5ce31faa14
--- /dev/null
+++ b/js/src/views/Status/components/Box/Box.spec.js
@@ -0,0 +1,70 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Box from './Box';
+
+describe('components/Box', () => {
+  describe('rendering', () => {
+    const title = 'test title';
+    let rendered;
+
+    beforeEach(() => {
+      rendered = shallow(<Box title={ title } />);
+    });
+
+    it('renders the component', () => {
+      expect(rendered).to.be.ok;
+      expect(rendered).to.have.className('dapp-box');
+    });
+
+    it('renders the title', () => {
+      expect(rendered.find('h2')).to.have.text(title);
+    });
+
+    it('renders no default value', () => {
+      expect(rendered).to.not.have.descendants('h1');
+    });
+  });
+
+  describe('contents', () => {
+    const value = 'test value';
+    const child = 'this is the child value';
+
+    let rendered;
+
+    beforeEach(() => {
+      rendered = shallow(
+        <Box
+          title='title'
+          value={ value }
+        >
+          <pre>{ child }</pre>
+        </Box>
+      );
+    });
+
+    it('renders the value', () => {
+      expect(rendered.find('h1')).to.have.text(value);
+    });
+
+    it('wraps the children', () => {
+      expect(rendered.find('pre')).to.have.text(child);
+    });
+  });
+});
diff --git a/js/src/views/Status/components/Box/index.js b/js/src/views/Status/components/Box/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e27e2972453f80b4c74171971ff83d62f862c94d
--- /dev/null
+++ b/js/src/views/Status/components/Box/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './Box';
diff --git a/js/src/views/Status/components/Call/Call.css b/js/src/views/Status/components/Call/Call.css
new file mode 100644
index 0000000000000000000000000000000000000000..e9184490c141f907b8b2b3982da5ad92a6c7b511
--- /dev/null
+++ b/js/src/views/Status/components/Call/Call.css
@@ -0,0 +1,40 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.call {
+  position: relative;
+  border-bottom: 2px solid #CCC6C6;
+  margin-bottom: 18.4px;
+  background: #f5f4f2;
+}
+
+.call:first-child {
+  border-color: #6691C2;
+}
+
+.call pre {
+  margin: 0;
+}
+
+.call pre:nth-child(3) {
+  padding-top: 0;
+  color: #bbb;
+}
+
+.callNo {
+  float: right;
+  color: #ccc;
+}
diff --git a/js/src/views/Status/components/Call/Call.js b/js/src/views/Status/components/Call/Call.js
new file mode 100644
index 0000000000000000000000000000000000000000..31d20aa423959c72438cc8dbda44ee468c2d6115
--- /dev/null
+++ b/js/src/views/Status/components/Call/Call.js
@@ -0,0 +1,69 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import Response from '../Response';
+import styles from './Call.css';
+
+export default class Call extends Component {
+
+  render () {
+    let { callNo, name, params, response } = this.props.call;
+    params = this.formatParams(params);
+    return (
+      <div
+        onMouseEnter={ this.setActiveCall }
+        ref={ this.setElement }
+        className={ styles.call }
+        { ...this._test(`call-${callNo}`) }
+        >
+        <span className={ styles.callNo } { ...this._test('callNo') }>#{ callNo }</span>
+        <pre { ...this._test('name') }>{ name }({ params })</pre>
+        <Response response={ response } />
+      </div>
+    );
+  }
+
+  setElement = el => {
+    this.element = el;
+  }
+
+  setActiveCall = () => {
+    this.props.setActiveCall(this.props.call, this.element);
+  }
+
+  formatParams (params) {
+    return params.reduce((str, p) => {
+      if (str !== '') {
+        str += ', ';
+      }
+      if (p === undefined) {
+        return str;
+      }
+      if (typeof p === 'object' || typeof p === 'string') {
+        p = JSON.stringify(p);
+      }
+      return str + p;
+    }, '');
+  }
+
+  static propTypes = {
+    call: PropTypes.object.isRequired,
+    setActiveCall: PropTypes.func.isRequired
+  }
+
+}
diff --git a/js/src/views/Status/components/Call/Call.spec.js b/js/src/views/Status/components/Call/Call.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..a4fcf7d01ef04b9379899e374b6888dd6450b503
--- /dev/null
+++ b/js/src/views/Status/components/Call/Call.spec.js
@@ -0,0 +1,92 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+
+import '../../../../environment/tests';
+
+import Call from './Call';
+
+describe('components/Call', () => {
+  const call = { callIdx: 123, callNo: 456, name: 'eth_call', params: [{ name: '123' }], response: '' };
+  const element = 'dummyElement';
+
+  let rendered;
+  let instance;
+  let setActiveCall = sinon.stub();
+
+  beforeEach(() => {
+    rendered = shallow(
+      <Call
+        call={ call }
+        setActiveCall={ setActiveCall }
+      />
+    );
+    instance = rendered.instance();
+  });
+
+  describe('rendering', () => {
+    it('renders the component', () => {
+      expect(rendered).to.be.ok;
+      expect(rendered).to.have.exactly(1).descendants(`div[data-test="Call-call-${call.callNo}"]`);
+    });
+
+    it('adds onMouseEnter to setActiveElement', () => {
+      expect(rendered.find('div').first()).to.have.prop('onMouseEnter', instance.setActiveCall);
+    });
+  });
+
+  describe('actions', () => {
+    it('sets the element via setElement', () => {
+      expect(instance.element).to.not.be.ok;
+      instance.setElement(element);
+      expect(instance.element).to.equal(element);
+    });
+
+    it('calls parent setActive call on setActiveCall', () => {
+      instance.setElement(element);
+      instance.setActiveCall();
+
+      expect(setActiveCall).to.be.calledWith(call, element);
+    });
+  });
+
+  describe('utility', () => {
+    describe('.formatParams', () => {
+      it('correctly returns a single parameter', () => {
+        expect(instance.formatParams([1])).to.equal('1');
+      });
+
+      it('correctly joins 2 parameters', () => {
+        expect(instance.formatParams([1, 2])).to.equal('1, 2');
+      });
+
+      it('stringifies a string object', () => {
+        expect(instance.formatParams(['1'])).to.equal('"1"');
+      });
+
+      it('stringifies an object object', () => {
+        expect(instance.formatParams([{ name: '1' }])).to.equal('{"name":"1"}');
+      });
+
+      it('skips an undefined value', () => {
+        expect(instance.formatParams(['1', undefined, 3])).to.equal('"1", , 3');
+      });
+    });
+  });
+});
diff --git a/js/src/views/Status/components/Call/index.js b/js/src/views/Status/components/Call/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3556a61948cf3c21af526b1344d27f88ffd52b05
--- /dev/null
+++ b/js/src/views/Status/components/Call/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './Call';
diff --git a/js/src/views/Status/components/Calls/Calls.css b/js/src/views/Status/components/Calls/Calls.css
new file mode 100644
index 0000000000000000000000000000000000000000..b881edda6406bbbc450d09aa371e1de99335ead5
--- /dev/null
+++ b/js/src/views/Status/components/Calls/Calls.css
@@ -0,0 +1,44 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.historyInfo {
+  margin-top: 0;
+  text-transform: initial;
+}
+
+.header {
+  margin: 0;
+}
+
+.removeIcon {
+  float: right;
+  color: #bbb;
+  cursor: pointer;
+  transition: opacity ease-in-out 0.2s;
+  transition-delay: 0.2s;
+  opacity: 0;
+}
+
+div:hover > .removeIcon {
+  opacity: 1.0;
+}
+
+.history {
+  margin-top: calc(1em + 18.4px);
+  padding-top: 0;
+  overflow: auto;
+  max-height: 60vh;
+}
diff --git a/js/src/views/Status/components/Calls/Calls.js b/js/src/views/Status/components/Calls/Calls.js
new file mode 100644
index 0000000000000000000000000000000000000000..c7b2100cf0f7e66a76ce9b92873a766f8f458658
--- /dev/null
+++ b/js/src/views/Status/components/Calls/Calls.js
@@ -0,0 +1,132 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import AnimateChildren from '../../components-compositors/Animated/children';
+import Call from '../Call';
+import CallsToolbar from '../CallsToolbar';
+import styles from './Calls.css';
+
+export default class Calls extends Component {
+
+  state = {
+    activeCall: null,
+    activeChild: null
+  }
+
+  render () {
+    return (
+      <div
+        className='calls-container'
+        onMouseLeave={ this.clearActiveCall }
+        { ...this._test('container') }
+      >
+        { this.renderClear() }
+        <h2 className={ styles.header }>History</h2>
+        <div className={ `${styles.history} row` } ref={ this.setCallsHistory }>
+          { this.renderNoCallsMsg() }
+          { this.renderCalls() }
+        </div>
+        <CallsToolbar
+          call={ this.state.activeCall }
+          callEl={ this.state.activeChild }
+          containerEl={ this._callsHistory }
+          actions={ this.props.actions }
+        />
+      </div>
+    );
+  }
+
+  renderClear () {
+    if (!this.props.calls.length) {
+      return;
+    }
+
+    return (
+      <a
+        { ...this._test('remove') }
+        title='Clear RPC calls history'
+        onClick={ this.clearHistory }
+        className={ styles.removeIcon }
+        >
+        <i className='icon-trash'></i>
+      </a>
+    );
+  }
+
+  renderNoCallsMsg () {
+    if (this.props.calls.length) {
+      return;
+    }
+
+    return (
+      <AnimateChildren>
+        <div { ...this._test('empty-wrapper') }>
+          <h3 className={ styles.historyInfo } { ...this._test('empty') }>
+            Fire up some calls and the results will be here.
+          </h3>
+        </div>
+      </AnimateChildren>
+    );
+  }
+
+  renderCalls () {
+    const { calls } = this.props;
+
+    if (!calls.length) {
+      return;
+    }
+
+    return (
+      <AnimateChildren>
+        { calls.map((call, idx) => (
+          <Call
+            key={ calls.length - idx }
+            call={ call }
+            setActiveCall={ this.setActiveCall }
+          />
+        )) }
+      </AnimateChildren>
+    );
+  }
+
+  clearActiveCall = () => {
+    this.setState({ activeCall: null, activeChild: null });
+  }
+
+  setActiveCall = (call, el) => {
+    this.setState({ activeCall: call, activeChild: el });
+  }
+
+  setCallsHistory = el => {
+    this._callsHistory = el;
+  }
+
+  clearHistory = () => {
+    this.props.reset();
+  }
+
+  static propTypes = {
+    calls: PropTypes.arrayOf(PropTypes.object).isRequired,
+    actions: PropTypes.shape({
+      fireRpc: PropTypes.func.isRequired,
+      copyToClipboard: PropTypes.func.isRequired,
+      selectRpcMethod: PropTypes.func.isRequired
+    }).isRequired,
+    reset: PropTypes.func
+  }
+
+}
diff --git a/js/src/views/Status/components/Calls/Calls.spec.js b/js/src/views/Status/components/Calls/Calls.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..7a73fa528d757e19be38c0a925ea47537134b43e
--- /dev/null
+++ b/js/src/views/Status/components/Calls/Calls.spec.js
@@ -0,0 +1,135 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import '../../../../environment/tests';
+
+import Calls from './Calls';
+
+describe('components/Calls', () => {
+  describe('rendering (no calls)', () => {
+    let rendered;
+
+    before(() => {
+      const calls = [];
+
+      rendered = shallow(<Calls calls={ calls } />);
+    });
+
+    it('renders the component and container', () => {
+      expect(rendered).to.be.ok;
+      expect(rendered).to.have.className('calls-container');
+    });
+
+    it('renders no calls', () => {
+      expect(rendered.find('div[data-test="Calls-empty-wrapper"]')).to.have.exactly(1).descendants('h3');
+    });
+
+    it('renders no clear button', () => {
+      expect(rendered.find('a[data-test="Calls-remove"]')).to.not.exist;
+    });
+
+    it('renders an attached CallsToolbar', () => {
+      expect(rendered).to.have.exactly(1).descendants('CallsToolbar');
+    });
+  });
+
+  describe('rendering (calls supplied)', () => {
+    const calls = [
+      { callNo: 0, name: 'eth_call', params: '', response: '' },
+      { callNo: 1, name: 'eth_sendTransaction', params: '', response: '' }
+    ];
+    const actions = { action1: true, action2: true };
+
+    let rendered;
+    let instance;
+
+    before(() => {
+      rendered = shallow(<Calls calls={ calls } actions={ actions } />);
+      instance = rendered.instance();
+    });
+
+    it('renders the clear button', () => {
+      expect(rendered).to.have.exactly(1).descendants('a[data-test="Calls-remove"]');
+    });
+
+    it('renders calls', () => {
+      expect(rendered.find('div[data-test="Calls-empty-wrapper"]')).to.not.exist;
+      expect(rendered.find('div.row div')).to.have.exactly(2).descendants('Call');
+    });
+
+    it('passes the correct properties to Call', () => {
+      const call = rendered.find('Call').first();
+
+      expect(call).to.have.prop('setActiveCall', instance.setActiveCall);
+      expect(call).to.have.prop('call').deep.equal(calls[0]);
+    });
+
+    it('passes the correct properties to CallsToolbar', () => {
+      const child = { offsetTop: 0 };
+      const container = { scrollTop: 0 };
+
+      instance.setCallsHistory(container);
+      rendered.setState({ activeCall: 'dummyActiveCall', activeChild: child });
+
+      const toolbar = rendered.find('CallsToolbar').first();
+
+      expect(toolbar).to.have.prop('call', 'dummyActiveCall');
+      expect(toolbar).to.have.prop('actions').deep.equal(actions);
+      expect(toolbar).to.have.prop('callEl').deep.equal(child);
+      expect(toolbar).to.have.prop('containerEl').deep.equal(container);
+    });
+  });
+
+  describe('actions', () => {
+    let rendered;
+    let instance;
+
+    before(() => {
+      const calls = [
+        { callNo: 0, name: 'eth_call', params: '', response: '' },
+        { callNo: 1, name: 'eth_sendTransaction', params: '', response: '' }
+      ];
+
+      rendered = shallow(<Calls calls={ calls } />);
+      instance = rendered.instance();
+    });
+
+    it('sets the element via setCallsHistory', () => {
+      instance.setCallsHistory('dummyElement');
+
+      expect(instance._callsHistory).to.equal('dummyElement');
+    });
+
+    it('sets state via setActiveCall', () => {
+      instance.setActiveCall('dummyActiveCall', 'dummyActiveChild');
+
+      expect(rendered).to.have.state('activeCall', 'dummyActiveCall');
+      expect(rendered).to.have.state('activeChild', 'dummyActiveChild');
+    });
+
+    it('clears state via clearActiveCall', () => {
+      instance.setActiveCall('dummyActiveCall', 'dummyActiveChild');
+      expect(rendered).to.have.state('activeCall', 'dummyActiveCall');
+      instance.clearActiveCall();
+
+      expect(rendered).to.have.state('activeCall', null);
+      expect(rendered).to.have.state('activeChild', null);
+    });
+  });
+});
diff --git a/js/src/views/Status/components/Calls/index.js b/js/src/views/Status/components/Calls/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..8508479128c0e4acaa715cdb160731d8726084ce
--- /dev/null
+++ b/js/src/views/Status/components/Calls/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './Calls';
diff --git a/js/src/views/Status/components/CallsToolbar/CallsToolbar.css b/js/src/views/Status/components/CallsToolbar/CallsToolbar.css
new file mode 100644
index 0000000000000000000000000000000000000000..2dce82c0091e095cdb61058cf5b862da63d40574
--- /dev/null
+++ b/js/src/views/Status/components/CallsToolbar/CallsToolbar.css
@@ -0,0 +1,66 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.callActionsWrap {
+  position: absolute;
+  animation: fadein .5s;
+  right: 0;
+  height: 28px;
+}
+
+.callActionsButton {
+  padding: 0 !important;
+  height: 24px !important;
+}
+
+.callActionsWrap:hover .callActionsButton {
+  display: none !important;
+}
+
+.callActions {
+  display: none;
+  height: 100%;
+  margin-top: 1px;
+  margin-right: 10px;
+}
+
+.callActionsWrap:hover .callActions {
+  display: block;
+}
+
+.callAction {
+  float: right;
+  transition: opacity ease-in-out .2s;
+  transition-delay: .2s;
+  opacity: 0;
+  padding: 3px !important;
+  height: 22px !important;
+  width: 22px !important;
+}
+
+.callActions:hover .callAction {
+  opacity: 1;
+}
+
+.callActionIcon {
+  height: 100% !important;
+  width: 100% !important;
+}
+
+@keyframes fadein {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
diff --git a/js/src/views/Status/components/CallsToolbar/CallsToolbar.js b/js/src/views/Status/components/CallsToolbar/CallsToolbar.js
new file mode 100644
index 0000000000000000000000000000000000000000..10204dbdeffdef25be2dd9ede7eba58c720561c8
--- /dev/null
+++ b/js/src/views/Status/components/CallsToolbar/CallsToolbar.js
@@ -0,0 +1,132 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { sortBy, find, extend } from 'lodash';
+
+import IconButton from 'material-ui/IconButton';
+import MoreHorizIcon from 'material-ui/svg-icons/navigation/more-horiz';
+import CallIcon from 'material-ui/svg-icons/communication/call';
+import AssignmentIcon from 'material-ui/svg-icons/action/assignment';
+import InputIcon from 'material-ui/svg-icons/action/input';
+
+import { SCROLLBAR_WIDTH } from '../../constants';
+import styles from './CallsToolbar.css';
+import rpcData from '../../data/rpc.json';
+const rpcMethods = sortBy(rpcData.methods, 'name');
+
+export default class CallsToolbar extends Component {
+
+  render () {
+    const { call, callEl, containerEl } = this.props;
+
+    if (!call) {
+      return null;
+    }
+
+    const wrapStyle = { top: callEl.offsetTop - SCROLLBAR_WIDTH - containerEl.scrollTop };
+    if (this.hasScrollbar(containerEl)) {
+      wrapStyle.right = 13;
+    }
+
+    return (
+      <div
+        className={ styles.callActionsWrap }
+        style={ wrapStyle }
+        >
+        <IconButton
+          className={ styles.callActionsButton }
+          { ...this._test('button-more') }
+          >
+          <MoreHorizIcon />
+        </IconButton>
+        <div className={ styles.callActions } { ...this._test('button-container') }>
+          <IconButton
+            className={ styles.callAction }
+            onClick={ this.setCall }
+            tooltip='Set'
+            tooltipPosition='top-left'
+            { ...this._test('button-setCall') }
+            >
+            <InputIcon className={ styles.callActionIcon } />
+          </IconButton>
+          <IconButton
+            className={ styles.callAction }
+            onClick={ this.makeCall }
+            tooltip='Fire again'
+            tooltipPosition='top-left'
+            { ...this._test('button-makeCall') }
+            >
+            <CallIcon className={ styles.callActionIcon } />
+          </IconButton>
+          <CopyToClipboard
+            text={ JSON.stringify(call) }
+            onCopy={ this.copyToClipboard }
+            >
+            <IconButton
+              className={ styles.callAction }
+              tooltip='Copy to clipboard'
+              tooltipPosition='top-left'
+              { ...this._test('copyCallToClipboard') }
+              >
+              <AssignmentIcon className={ styles.callActionIcon } />
+            </IconButton>
+          </CopyToClipboard>
+        </div>
+      </div>
+    );
+  }
+
+  setCall = () => {
+    const { call } = this.props;
+    let method = find(rpcMethods, { name: call.name });
+
+    this.props.actions.selectRpcMethod(extend({}, method, { paramsValues: call.params }));
+  }
+
+  makeCall = () => {
+    const { call } = this.props;
+    let method = find(rpcMethods, { name: call.name });
+
+    this.setCall();
+    this.props.actions.fireRpc({
+      method: method.name,
+      outputFormatter: method.outputFormatter,
+      inputFormatters: method.inputFormatters,
+      params: call.params
+    });
+  }
+
+  copyToClipboard = () => {
+    this.props.actions.copyToClipboard('method copied to clipboard');
+  }
+
+  hasScrollbar (el) {
+    return el.clientHeight < el.scrollHeight;
+  }
+}
+
+CallsToolbar.propTypes = {
+  call: PropTypes.object.isRequired,
+  callEl: PropTypes.node.isRequired,
+  containerEl: PropTypes.node.isRequired,
+  actions: PropTypes.shape({
+    fireRpc: PropTypes.func.isRequired,
+    copyToClipboard: PropTypes.func.isRequired,
+    selectRpcMethod: PropTypes.func.isRequired
+  }).isRequired
+};
diff --git a/js/src/views/Status/components/CallsToolbar/CallsToolbar.spec.js b/js/src/views/Status/components/CallsToolbar/CallsToolbar.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..0ff9f568b1f0fd4e6c8cea66c05a470863f16e96
--- /dev/null
+++ b/js/src/views/Status/components/CallsToolbar/CallsToolbar.spec.js
@@ -0,0 +1,118 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import sinon from 'sinon';
+import { shallow } from 'enzyme';
+
+import '../../../../environment/tests';
+
+import CallsToolbar from './CallsToolbar';
+
+describe('components/CallsToolbar', () => {
+  const callEl = { offsetTop: 0 };
+  const containerEl = { scrollTop: 0, clientHeight: 0, scrollHeight: 999 };
+
+  describe('rendering (no call)', () => {
+    let rendered;
+
+    before(() => {
+      const call = null;
+
+      rendered = shallow(<CallsToolbar call={ call } callEl={ callEl } containerEl={ containerEl } />);
+    });
+
+    it('does not render the component', () => {
+      expect(rendered).to.not.have.descendants('[data-test="CallsToolbar-button-more"]');
+    });
+  });
+
+  describe('rendering', () => {
+    const call = { callNo: 456, name: 'eth_call', params: '', response: '' };
+    let rendered;
+    let btncontainer;
+
+    before(() => {
+      rendered = shallow(<CallsToolbar call={ call } callEl={ callEl } containerEl={ containerEl } />);
+      btncontainer = rendered.find('[data-test="CallsToolbar-button-container"]');
+    });
+
+    it('renders the More button', () => {
+      expect(rendered).to.have.descendants('[data-test="CallsToolbar-button-more"]');
+    });
+
+    it('renders the Set button', () => {
+      expect(btncontainer).to.have.descendants('[data-test="CallsToolbar-button-setCall"]');
+    });
+
+    it('renders the Fire button', () => {
+      expect(btncontainer).to.have.descendants('[data-test="CallsToolbar-button-makeCall"]');
+    });
+
+    it('renders the Copy button', () => {
+      expect(btncontainer).to.have.descendants('[data-test="CallsToolbar-copyCallToClipboard"]');
+    });
+  });
+
+  describe('actions', () => {
+    const call = { callNo: 456, name: 'eth_call', params: '', response: '' };
+    const actions = { fireRpc: sinon.stub(), copyToClipboard: sinon.stub(), selectRpcMethod: sinon.stub() };
+
+    let rendered;
+    let instance;
+
+    before(() => {
+      rendered = shallow(<CallsToolbar call={ call } callEl={ callEl } containerEl={ containerEl } actions={ actions } />);
+      instance = rendered.instance();
+    });
+
+    it('calls copyToClipboard with action copyToClipboard', () => {
+      instance.copyToClipboard();
+      expect(actions.copyToClipboard).to.be.calledOnce;
+    });
+
+    it('calls setCall with action selectRpcMethod', () => {
+      instance.setCall();
+      expect(actions.selectRpcMethod).to.be.calledOnce;
+    });
+
+    it('calls makeCall with action fireRpc', () => {
+      instance.makeCall();
+      expect(actions.fireRpc).to.be.calledOnce;
+    });
+  });
+
+  describe('utility', () => {
+    const call = { callNo: 456, name: 'eth_call', params: '', response: '' };
+    let rendered;
+    let instance;
+
+    before(() => {
+      rendered = shallow(<CallsToolbar call={ call } callEl={ callEl } containerEl={ containerEl } />);
+      instance = rendered.instance();
+    });
+
+    describe('.hasScrollbar', () => {
+      it('correctly returns true when scrollbar', () => {
+        expect(instance.hasScrollbar({ clientHeight: 123, scrollHeight: 456 })).to.be.true;
+      });
+
+      it('correctly returns false when no scrollbar', () => {
+        expect(instance.hasScrollbar({ clientHeight: 456, scrollHeight: 123 })).to.be.false;
+      });
+    });
+  });
+});
diff --git a/js/src/views/Status/components/CallsToolbar/index.js b/js/src/views/Status/components/CallsToolbar/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f8162611e44854b6b0ed4e93301653f0f213a2d9
--- /dev/null
+++ b/js/src/views/Status/components/CallsToolbar/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './CallsToolbar';
diff --git a/js/src/views/Status/components/Debug/Debug.css b/js/src/views/Status/components/Debug/Debug.css
new file mode 100644
index 0000000000000000000000000000000000000000..4e765cce6a67fdbc2dfc349ac371160571ff2927
--- /dev/null
+++ b/js/src/views/Status/components/Debug/Debug.css
@@ -0,0 +1,67 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.subheader {
+  margin-top: 0;
+}
+
+.inputTrigger {
+  display: none;
+  left: 310px;
+  bottom: 4px;
+  position: absolute;
+  cursor: pointer;
+  animation: fadein .3s;
+}
+
+*:hover > .inputTrigger {
+  display: block;
+}
+
+@keyframes fadein {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.logs {
+  width: 100%;
+}
+
+.stopped {
+  color: #aaa;
+  padding: 1em 0;
+}
+
+.log {
+  margin: 0;
+  white-space: nowrap;
+  overflow: visible;
+  color: #aaa;
+}
+
+.container {
+  width: 100%;
+}
+
+.actions {
+  float: right;
+}
+
+.actions a {
+  margin-left: 5px;
+  cursor: pointer;
+  color: #bbb;
+}
diff --git a/js/src/views/Status/components/Debug/Debug.js b/js/src/views/Status/components/Debug/Debug.js
new file mode 100644
index 0000000000000000000000000000000000000000..e6f736c3540196f6e1fda851d2925616d55236d1
--- /dev/null
+++ b/js/src/views/Status/components/Debug/Debug.js
@@ -0,0 +1,114 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import AvPause from 'material-ui/svg-icons/av/pause';
+import AvPlay from 'material-ui/svg-icons/av/play-arrow';
+import AvReplay from 'material-ui/svg-icons/av/replay';
+
+import { Container, ContainerTitle } from '../../../../ui';
+
+import styles from './Debug.css';
+
+export default class Debug extends Component {
+  static propTypes = {
+    actions: PropTypes.shape({
+      clearStatusLogs: PropTypes.func.isRequired,
+      toggleStatusLogs: PropTypes.func.isRequired
+    }).isRequired,
+    nodeStatus: PropTypes.object.isRequired
+  }
+
+  render () {
+    const { nodeStatus } = this.props;
+    const { devLogsLevels } = nodeStatus;
+
+    return (
+      <Container>
+        <ContainerTitle
+          title='Node Logs' />
+        { this.renderActions() }
+        <h2 className={ styles.subheader }>
+          { devLogsLevels || '-' }
+        </h2>
+        { this.renderToggle() }
+        { this.renderLogs() }
+      </Container>
+    );
+  }
+
+  renderToggle () {
+    const { devLogsEnabled } = this.props.nodeStatus;
+
+    if (devLogsEnabled) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.stopped }>
+        Refresh and display of logs from Parity is currently stopped via the UI, start it to see the latest updates.
+      </div>
+    );
+  }
+
+  renderLogs () {
+    const { nodeStatus } = this.props;
+    const { devLogs } = nodeStatus;
+
+    if (!devLogs) {
+      return null;
+    }
+
+    const logs = devLogs.map((log, idx) => (
+      <pre className={ styles.log } key={ idx }>
+        { log }
+      </pre>
+    ));
+
+    return (
+      <div className={ styles.logs }>
+        { logs }
+      </div>
+    );
+  }
+
+  renderActions () {
+    const { devLogsEnabled } = this.props.nodeStatus;
+    const toggleButton = devLogsEnabled
+      ? <AvPause />
+      : <AvPlay />;
+
+    return (
+      <div className={ styles.actions }>
+        <a onClick={ this.toggle }>{ toggleButton }</a>
+        <a onClick={ this.clear }><AvReplay /></a>
+      </div>
+    );
+  }
+
+  clear = () => {
+    const { clearStatusLogs } = this.props.actions;
+
+    clearStatusLogs();
+  }
+
+  toggle = () => {
+    const { devLogsEnabled } = this.props.nodeStatus;
+    const { toggleStatusLogs } = this.props.actions;
+
+    toggleStatusLogs(!devLogsEnabled);
+  }
+}
diff --git a/js/src/views/Status/components/Debug/index.js b/js/src/views/Status/components/Debug/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..9e8eae2198a4c673ddfb96b5c7aad66677a6e3cb
--- /dev/null
+++ b/js/src/views/Status/components/Debug/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './Debug';
diff --git a/js/src/views/Status/components/EditableValue/EditableValue.css b/js/src/views/Status/components/EditableValue/EditableValue.css
new file mode 100644
index 0000000000000000000000000000000000000000..1f617dc1699014effca1c30bbc3b1fcc4622061c
--- /dev/null
+++ b/js/src/views/Status/components/EditableValue/EditableValue.css
@@ -0,0 +1,74 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.input {
+  margin-top: 0;
+  width: 100%;
+  padding-left: 10px;
+  padding-right: 50px;
+}
+
+.icon, .iconSuccess, .firstIcon {
+  display: block;
+  cursor: pointer;
+  flex: 1;
+  margin: 3px 3px;
+  color: #bbb;
+}
+
+.success, .iconSuccess {
+  color: #8bc34a;
+}
+
+.icon i, .iconSuccess i, .firstIcon i {
+  vertical-align: middle;
+}
+
+.icons, .iconsVisible, .firstIcon {
+  z-index: 10;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  opacity: 0;
+  transition: opacity ease-in-out .2s;
+  transition-delay: 0.2s;
+}
+
+.iconsVisible {
+  opacity: 1.0;
+}
+
+.container:hover .icons, .container:hover .firstIcon {
+  opacity: 1.0;
+}
+
+.firstIcon {
+  position: absolute;
+  left: -10px;
+  right: auto;
+  top: 0;
+  bottom: 0;
+  margin: 3px 0;
+  display: block;
+}
+
+.autocomplete input {
+  margin-top: 0;
+  padding-left: 10px !important;
+  padding-right: 50px !important;
+}
diff --git a/js/src/views/Status/components/EditableValue/EditableValue.js b/js/src/views/Status/components/EditableValue/EditableValue.js
new file mode 100644
index 0000000000000000000000000000000000000000..84c5215a360d17f9c575e562a1c2b23ea358ccd3
--- /dev/null
+++ b/js/src/views/Status/components/EditableValue/EditableValue.js
@@ -0,0 +1,192 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import AutoComplete from 'material-ui/AutoComplete';
+
+import styles from './EditableValue.css';
+import valueStyles from '../Value/Value.css';
+
+export default class EditableValue extends Component {
+
+  state = {
+    value: this.props.value,
+    inEditMode: false
+  }
+
+  componentWillReceiveProps (newProps) {
+    if (newProps.value === this.state.value || this.state.inEditMode) {
+      return;
+    }
+    this.setState({
+      value: newProps.value
+    });
+  }
+
+  onChange = value => {
+    this.setState({
+      value: value
+    });
+  }
+
+  onOpenEdit = evt => {
+    this.setState({
+      inEditMode: true
+    });
+
+    if (!this._input) {
+      return;
+    }
+    this._input.focus();
+  }
+
+  onCancel = evt => {
+    this.setState({
+      inEditMode: false,
+      value: this.props.value
+    });
+  }
+
+  onSubmit = () => {
+    this.setState({
+      inEditMode: false
+    });
+    this.props.onSubmit(this.state.value, false);
+  }
+
+  onResetToDefault = () => {
+    this.props.onSubmit(this.props.defaultValue, true);
+  }
+
+  render () {
+    return (
+      <form
+        className={ `${valueStyles.valueContainer} ${styles.container}` }
+        onSubmit={ this.onSubmit }
+        { ...this._testInherit() }
+        >
+        { this.renderResetButton() }
+        <div className={ this.state.inEditMode ? styles.iconsVisible : styles.icons }>
+          { this.props.children }
+          { this.renderButtons() }
+        </div>
+        { this.renderInput() }
+      </form>
+    );
+  }
+
+  renderInput () {
+    const { inEditMode, value } = this.state;
+
+    const setInput = el => { this._input = el; };
+    const onChange = evt => this.onChange(evt.target.value);
+
+    if (!inEditMode || !this.props.autocomplete) {
+      return (
+        <input
+          className={ inEditMode ? styles.input : valueStyles.value }
+          type='text'
+          value={ value }
+          onClick={ this.onOpenEdit }
+          ref={ setInput }
+          onChange={ onChange }
+          readOnly={ !inEditMode }
+          />
+      );
+    }
+
+    return (
+      <AutoComplete
+        name='EditableValueAutoComplete' // avoid Material Ui warning
+        className={ styles.autocomplete }
+        fullWidth
+        searchText={ value }
+        dataSource={ this.props.dataSource }
+        onUpdateInput={ this.onChange }
+        onNewRequest={ this.onChange }
+        openOnFocus
+        filter={ AutoComplete.noFilter }
+      />
+    );
+  }
+
+  renderResetButton () {
+    if (this.state.inEditMode) {
+      return;
+    }
+
+    if (!this.props.defaultValue || this.state.value === this.props.defaultValue) {
+      return;
+    }
+
+    return (
+      <a
+        key={ 'reset' }
+        className={ `${styles.icon} ${styles.firstIcon}` }
+        onClick={ this.onResetToDefault }
+        title={ `Reset to ${this.props.defaultValue}` }
+        { ...this._testInherit('reset') }
+        >
+        <i className='icon-anchor'></i>
+      </a>
+    );
+  }
+
+  renderButtons () {
+    if (this.state.inEditMode) {
+      return [
+        <a
+          key={ 'submit' }
+          className={ styles.iconSuccess }
+          onClick={ this.onSubmit }
+          { ...this._testInherit('submit') }
+          >
+          <i className='icon-check'></i>
+        </a>,
+        <a
+          key={ 'cancel' }
+          className={ styles.icon }
+          onClick={ this.onCancel }
+          { ...this._testInherit('cancel') }
+          >
+          <i className='icon-close'></i>
+        </a>
+      ];
+    }
+
+    return (
+      <a
+        key={ 'edit' }
+        className={ styles.icon }
+        onClick={ this.onOpenEdit }
+        title='Edit'
+        { ...this._testInherit('edit') }
+        >
+        <i className='icon-pencil'></i>
+      </a>
+    );
+  }
+
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    value: PropTypes.string,
+    defaultValue: PropTypes.string,
+    children: PropTypes.element,
+    autocomplete: PropTypes.bool,
+    dataSource: PropTypes.arrayOf(PropTypes.string)
+  }
+
+}
diff --git a/js/src/views/Status/components/EditableValue/index.js b/js/src/views/Status/components/EditableValue/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..bf91564d7655a8c3878d6c25431ae52d83e0864c
--- /dev/null
+++ b/js/src/views/Status/components/EditableValue/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './EditableValue';
diff --git a/js/src/views/Status/components/JsonEditor/JsonEditor.css b/js/src/views/Status/components/JsonEditor/JsonEditor.css
new file mode 100644
index 0000000000000000000000000000000000000000..243f43a59efa3c0f2b6660c3b41c3c0111b7af95
--- /dev/null
+++ b/js/src/views/Status/components/JsonEditor/JsonEditor.css
@@ -0,0 +1,28 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.editor {
+  width: 100%;
+  height: 200px;
+}
+
+.error {
+  border: 1px solid red !important;
+}
+
+.errorMsg {
+  color: red;
+}
diff --git a/js/src/views/Status/components/JsonEditor/JsonEditor.js b/js/src/views/Status/components/JsonEditor/JsonEditor.js
new file mode 100644
index 0000000000000000000000000000000000000000..c8707489a140b2a91459ef0206a22a28628487ca
--- /dev/null
+++ b/js/src/views/Status/components/JsonEditor/JsonEditor.js
@@ -0,0 +1,98 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { isEqual } from 'lodash';
+import formatJson from 'format-json';
+
+import styles from './JsonEditor.css';
+
+export default class JsonEditor extends Component {
+
+  constructor (...args) {
+    super(...args);
+    let { value } = this.props;
+    value = formatJson.plain(value);
+    this.state = { value };
+  }
+
+  componentDidMount () {
+    const mockedEvt = { target: { value: this.state.value } };
+    this.onChange(mockedEvt);
+  }
+
+  componentWillReceiveProps (nextProps) {
+    let { value } = nextProps;
+
+    if (!isEqual(value, this.props.value)) {
+      value = formatJson.plain(value);
+      this.setState({ value });
+    }
+  }
+
+  render () {
+    let errorClass = this.state.error ? styles.error : '';
+
+    return (
+      <div className='row'>
+        <textarea
+          onChange={ this.onChange }
+          className={ `${styles.editor} ${errorClass}` }
+          value={ this.state.value }
+          />
+          { this.renderError() }
+      </div>
+    );
+  }
+
+  renderError () {
+    const { error } = this.state;
+    if (!error) {
+      return;
+    }
+
+    return (
+      <div className={ styles.errorMsg }>{ error }</div>
+    );
+  }
+
+  onChange = evt => {
+    const { value } = evt.target;
+    let parsed;
+    let error;
+
+    try {
+      parsed = JSON.parse(value);
+      error = null;
+    } catch (err) {
+      parsed = null;
+      error = 'invalid json';
+    }
+
+    this.setState({
+      value,
+      error
+    });
+
+    this.props.onChange(parsed, error);
+  }
+
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.object
+  }
+
+}
diff --git a/js/src/views/Status/components/JsonEditor/index.js b/js/src/views/Status/components/JsonEditor/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..db5b75fcae29f16c1994d96c8216d368d283e194
--- /dev/null
+++ b/js/src/views/Status/components/JsonEditor/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './JsonEditor';
diff --git a/js/src/views/Status/components/Markdown/Markdown.css b/js/src/views/Status/components/Markdown/Markdown.css
new file mode 100644
index 0000000000000000000000000000000000000000..a6a643632abeefb71abfd20f6a1b9956810e7954
--- /dev/null
+++ b/js/src/views/Status/components/Markdown/Markdown.css
@@ -0,0 +1,20 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.container li {
+  display: list-item;
+  line-height: 1.6;
+}
diff --git a/js/src/views/Status/components/Markdown/Markdown.js b/js/src/views/Status/components/Markdown/Markdown.js
new file mode 100644
index 0000000000000000000000000000000000000000..155d3d7e358c0de3c1a1e57fd4b37dd7817596d7
--- /dev/null
+++ b/js/src/views/Status/components/Markdown/Markdown.js
@@ -0,0 +1,58 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import marked from 'marked';
+import React, { Component, PropTypes } from 'react';
+import styles from './Markdown.css';
+
+export default class Marked extends Component {
+
+  state = {}
+
+  render () {
+    let { parsed } = this.state;
+    if (!parsed) {
+      return null;
+    }
+    return <div className={ styles.container } style={ this.props.style } dangerouslySetInnerHTML={ { __html: parsed } } />;
+  }
+
+  componentWillMount () {
+    this.setState({ parsed: this.parse(this.props.val) });
+  }
+
+  componentWillReceiveProps (newProps) {
+    if (newProps.val === this.props.val) {
+      return;
+    }
+    this.setState({ parsed: this.parse(newProps.val) });
+  }
+
+  parse (val) {
+    try {
+      val = marked(val);
+    } catch (err) {
+      console.error(`Marked error when parsing ${val}: ${err}`);
+    }
+    return val;
+  }
+
+  static propTypes = {
+    val: PropTypes.any,
+    style: PropTypes.object
+  }
+
+}
diff --git a/js/src/views/Status/components/Markdown/index.js b/js/src/views/Status/components/Markdown/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..569558ede8a07272ac778eff4cc0ece324273e32
--- /dev/null
+++ b/js/src/views/Status/components/Markdown/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './Markdown';
diff --git a/js/src/views/Status/components/MiningSettings/MiningSettings.js b/js/src/views/Status/components/MiningSettings/MiningSettings.js
new file mode 100644
index 0000000000000000000000000000000000000000..c13e2eeaef856c8dc803a64208133bc2af2dfdab
--- /dev/null
+++ b/js/src/views/Status/components/MiningSettings/MiningSettings.js
@@ -0,0 +1,99 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import formatNumber from 'format-number';
+
+import { ContainerTitle, Input } from '../../../../ui';
+
+import { numberFromString } from './numberFromString';
+import { decodeExtraData } from './decodeExtraData';
+
+const toNiceNumber = formatNumber();
+
+export default class MiningSettings extends Component {
+  static contextTypes = {
+    api: PropTypes.object
+  }
+
+  static propTypes = {
+    nodeStatus: PropTypes.object
+  }
+
+  render () {
+    const { nodeStatus } = this.props;
+    const { coinbase, defaultExtraData, extraData, gasFloorTarget, minGasPrice } = nodeStatus;
+
+    return (
+      <div { ...this._testInherit() }>
+        <ContainerTitle title='mining settings' />
+        <Input
+          label='author'
+          hint='the mining author'
+          value={ coinbase }
+          onSubmit={ this.onAuthorChange }
+          { ...this._test('author') } />
+        <Input
+          label='extradata'
+          hint='extra data for mined blocks'
+          value={ decodeExtraData(extraData) }
+          onSubmit={ this.onExtraDataChange }
+          defaultValue={ decodeExtraData(defaultExtraData) }
+          { ...this._test('extra-data') } />
+        <Input
+          label='minimal gas price'
+          hint='the minimum gas price for mining'
+          value={ toNiceNumber(minGasPrice) }
+          onSubmit={ this.onMinGasPriceChange }
+          { ...this._test('min-gas-price') } />
+        <Input
+          label='gas floor target'
+          hint='the gas floor target for mining'
+          value={ toNiceNumber(gasFloorTarget) }
+          onSubmit={ this.onGasFloorTargetChange }
+          { ...this._test('gas-floor-target') } />
+      </div>
+    );
+  }
+
+  onMinGasPriceChange = (newVal) => {
+    const { api } = this.context;
+
+    api.ethcore.setMinGasPrice(numberFromString(newVal));
+  };
+
+  onExtraDataChange = (newVal, isResetToDefault) => {
+    const { api } = this.context;
+    const { nodeStatus } = this.props;
+
+    // In case of resetting to default we are just using raw bytes from defaultExtraData
+    // When user sets new value we can safely send a string that will be converted to hex by formatter.
+    const val = isResetToDefault ? nodeStatus.defaultExtraData : newVal;
+    api.ethcore.setExtraData(val);
+  };
+
+  onAuthorChange = (newVal) => {
+    const { api } = this.context;
+
+    api.ethcore.setAuthor(newVal);
+  };
+
+  onGasFloorTargetChange = (newVal) => {
+    const { api } = this.context;
+
+    api.ethcore.setGasFloorTarget(numberFromString(newVal));
+  };
+}
diff --git a/js/src/views/Status/components/MiningSettings/decodeExtraData.js b/js/src/views/Status/components/MiningSettings/decodeExtraData.js
new file mode 100644
index 0000000000000000000000000000000000000000..7fd07921e7f9dc810450ab7fa7c0cbf2f030eeba
--- /dev/null
+++ b/js/src/views/Status/components/MiningSettings/decodeExtraData.js
@@ -0,0 +1,33 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import rlp from 'rlp';
+
+export function decodeExtraData (str) {
+  try {
+    // Try decoding as RLP
+    const decoded = rlp.decode(str);
+    const v = decoded[0];
+    decoded[0] = decoded[1];
+    decoded[1] = `${v[0]}.${v[1]}.${v[2]}`;
+    return decoded.join('/');
+  } catch (err) {
+    // hex -> str
+    return str.match(/.{1,2}/g).map(v => {
+      return String.fromCharCode(parseInt(v, 16));
+    }).join('');
+  }
+}
diff --git a/js/src/views/Status/components/MiningSettings/decodeExtraData.spec.js b/js/src/views/Status/components/MiningSettings/decodeExtraData.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..007e564b41d1998985416d10684c9772c7fef6b2
--- /dev/null
+++ b/js/src/views/Status/components/MiningSettings/decodeExtraData.spec.js
@@ -0,0 +1,28 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { decodeExtraData } from './decodeExtraData';
+
+describe('MINING SETTINGS', () => {
+  describe('EXTRA DATA', () => {
+    const str = 'parity/1.0.0/1.0.0-beta2';
+    const encoded = '0xd783010000867061726974798b312e302e302d6265746132';
+
+    it('should decode encoded to str', () => {
+      expect(decodeExtraData(encoded)).to.equal(str);
+    });
+  });
+});
diff --git a/js/src/views/Status/components/MiningSettings/index.js b/js/src/views/Status/components/MiningSettings/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3eee1e0516bca6f1773be81acab6ec653786de7c
--- /dev/null
+++ b/js/src/views/Status/components/MiningSettings/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './MiningSettings';
diff --git a/js/src/views/Status/components/MiningSettings/numberFromString.js b/js/src/views/Status/components/MiningSettings/numberFromString.js
new file mode 100644
index 0000000000000000000000000000000000000000..6867345ab2478467136ebab07570bede1994b39a
--- /dev/null
+++ b/js/src/views/Status/components/MiningSettings/numberFromString.js
@@ -0,0 +1,25 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function numberFromString (val) {
+  return parseInt(
+    val
+      .replace(/m/ig, 'k')
+      .replace(/k/ig, '000')
+      .replace(/[^0-9]/g, '')
+    , 10
+  );
+}
diff --git a/js/src/views/Status/components/MiningSettings/numberFromString.spec.js b/js/src/views/Status/components/MiningSettings/numberFromString.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..c0027349529ff30ce90bc14d7ba18a4f2e327b16
--- /dev/null
+++ b/js/src/views/Status/components/MiningSettings/numberFromString.spec.js
@@ -0,0 +1,36 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { numberFromString } from './numberFromString';
+
+describe('NUMBER FROM STRING', () => {
+  it('should convert string to number', () => {
+    expect(numberFromString('12345'), 12345);
+  });
+
+  it('should handle special characters "k" and "m"', () => {
+    expect(numberFromString('10kk'), 10000000);
+    expect(numberFromString('10K'), 1000);
+    expect(numberFromString('10Mmk'), 1000000000000000);
+  });
+
+  it('should ignore any non-numeric characters', () => {
+    expect(numberFromString('10.000.000'), 10000000);
+    expect(numberFromString('10_000_000'), 10000000);
+    expect(numberFromString('10_k_k'), 10000000);
+    expect(numberFromString('-5'), 5);
+  });
+});
diff --git a/js/src/views/Status/components/Response/Response.css b/js/src/views/Status/components/Response/Response.css
new file mode 100644
index 0000000000000000000000000000000000000000..be93437d4fa9d949ea52be093c700124128e13e1
--- /dev/null
+++ b/js/src/views/Status/components/Response/Response.css
@@ -0,0 +1,20 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.response {
+  white-space: nowrap;
+  overflow-x: auto;
+}
diff --git a/js/src/views/Status/components/Response/Response.js b/js/src/views/Status/components/Response/Response.js
new file mode 100644
index 0000000000000000000000000000000000000000..4ee664ad205f8583ee0803bed2e6a6edad58df13
--- /dev/null
+++ b/js/src/views/Status/components/Response/Response.js
@@ -0,0 +1,65 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { isArray, isPlainObject } from 'lodash';
+
+import styles from './Response.css';
+
+export default class Response extends Component {
+
+  render () {
+    let { response } = this.props;
+    let formatted;
+
+    if (isArray(response)) {
+      formatted = this.renderArray();
+    }
+    if (isPlainObject(response)) {
+      formatted = this.renderObject();
+    }
+
+    return <pre className={ styles.response }>{ formatted || response }</pre>;
+  }
+
+  renderArray () {
+    let { response } = this.props;
+    return response.map((r, idx) => (
+      <span key={ idx }>
+        { idx === 0 ? '[' : ',' }
+        { idx === 0 ? '' : <br /> }
+        { r }
+        { idx === response.length - 1 ? ']' : '' }
+      </span>
+    ));
+  }
+
+  renderObject () {
+    let { response } = this.props;
+    const arr = JSON.stringify(response, null, 1).split('\n');
+    return arr.map((any, idx) => (
+      <span key={ idx }>
+        { any }
+        { idx !== 0 && idx !== arr.length - 1 ? <br /> : '' }
+      </span>
+    ));
+  }
+
+  static propTypes = {
+    response: PropTypes.any.isRequired
+  }
+
+}
diff --git a/js/src/views/Status/components/Response/Response.spec.js b/js/src/views/Status/components/Response/Response.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..1eb37a340ca7cde94b8009fff3ca80f029f992b9
--- /dev/null
+++ b/js/src/views/Status/components/Response/Response.spec.js
@@ -0,0 +1,47 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import '../../../../environment/tests';
+
+import Response from './Response';
+
+describe('components/Response', () => {
+  describe('rendering', () => {
+    it('renders non-arrays/non-objects exactly as received', () => {
+      const TEST = '1234567890';
+      const rendered = shallow(<Response response={ TEST } />);
+
+      expect(rendered).to.have.html(`<pre>${TEST}</pre>`);
+    });
+
+    it('renders arrays properly with index and value', () => {
+      const TEST = ['123', '456'];
+      const rendered = shallow(<Response response={ TEST } />);
+
+      expect(rendered).to.have.html('<pre><span>[123</span><span>,<br/>456]</span></pre>');
+    });
+
+    it('renders objects properly with key and value', () => {
+      const TEST = { foo: '123', bar: '456' };
+      const rendered = shallow(<Response response={ TEST } />);
+
+      expect(rendered).to.have.html('<pre><span>{</span><span> &quot;foo&quot;: &quot;123&quot;,<br/></span><span> &quot;bar&quot;: &quot;456&quot;<br/></span><span>}</span></pre>');
+    });
+  });
+});
diff --git a/js/src/views/Status/components/Response/index.js b/js/src/views/Status/components/Response/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f1d89d75a50eb6f175a502a6e5e9cd1a7c2c3d74
--- /dev/null
+++ b/js/src/views/Status/components/Response/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './Response';
diff --git a/js/src/views/Status/components/RpcCalls/RpcCalls.css b/js/src/views/Status/components/RpcCalls/RpcCalls.css
new file mode 100644
index 0000000000000000000000000000000000000000..d33ea36141afa1664a1b1d011331033de24af6ff
--- /dev/null
+++ b/js/src/views/Status/components/RpcCalls/RpcCalls.css
@@ -0,0 +1,32 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.header {
+  margin: 0;
+}
+
+.input {
+  width: 100%;
+}
+
+h3 + label > input {
+  margin-top: 0;
+}
+
+.jsonToggle {
+  width: auto !important;
+  float: right;
+}
diff --git a/js/src/views/Status/components/RpcCalls/RpcCalls.js b/js/src/views/Status/components/RpcCalls/RpcCalls.js
new file mode 100644
index 0000000000000000000000000000000000000000..bebbfe0adce858e8f8feac56d4b11f078adf8529
--- /dev/null
+++ b/js/src/views/Status/components/RpcCalls/RpcCalls.js
@@ -0,0 +1,337 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+
+import Toggle from 'material-ui/Toggle/Toggle';
+import TextField from 'material-ui/TextField';
+import { RpcAutoComplete } from 'dapps-react-components';
+import { formatRpcMd } from '../../util/rpc-md';
+import AnimateChildren from '../../components-compositors/Animated/children';
+import JsonEditor from '../JsonEditor';
+import Calls from '../Calls';
+import Markdown from '../Markdown';
+import styles from './RpcCalls.css';
+import rpcData from '../../data/rpc.json';
+import RpcNav from '../RpcNav';
+
+const rpcMethods = _.sortBy(rpcData.methods, 'name');
+
+export default class RpcCalls extends Component {
+
+  state = {};
+
+  componentWillReceiveProps (nextProps) {
+    const { paramsValues, params } = nextProps.rpc.selectedMethod;
+    if (paramsValues) {
+      params.map((p, idx) => {
+        // todo [adgo] 01.05.2016 - make sure this works
+        // not sure idx is the same for paramsValues and params
+        this.setState({
+          [this.paramKey(p)]: paramsValues[idx]
+        });
+      });
+
+      if (this.state.jsonMode) {
+        this.setJsonEditorValue();
+      }
+    }
+  }
+
+  render () {
+    return (
+      <div className='dapp-flex-content'>
+        <main className='dapp-content'>
+          <div className='dapp-container'>
+            <div className='row'>
+              <div className='col col-6'>
+                <h1><span>RPC</span> Requests</h1>
+              </div>
+              <div className='col col-6'>
+                <RpcNav />
+              </div>
+            </div>
+          </div>
+          <div style={ { clear: 'both' } }></div>
+          <div className='dapp-container'>
+            <div className='row'>
+              <div className='col col-6 mobile-full'>
+                { this.renderForm() }
+              </div>
+              <div className='col col-6 mobile-full'>
+                <Calls
+                  calls={ this.props.rpc.prevCalls }
+                  reset={ this.props.actions.resetRpcPrevCalls }
+                  actions={ this.props.actions }
+                />
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    );
+  }
+
+  renderForm () {
+    return (
+      <div>
+        <Toggle
+          className={ styles.jsonToggle }
+          onToggle={ this.onJsonToggle }
+          label='JSON'
+        />
+        <h2 className={ styles.header }>
+          <label htmlFor='selectedMethod'>
+            Call Method
+          </label>
+        </h2>
+        <AnimateChildren absolute>
+          { this.renderJsonForm() }
+          { this.renderInputForm() }
+        </AnimateChildren>
+      </div>
+    );
+  }
+
+  renderInputForm () {
+    if (this.state.jsonMode) {
+      return;
+    }
+
+    const { returns } = this.props.rpc.selectedMethod;
+    return (
+      <div className='row'>
+        { this.renderMethodList() }
+        <h3>Parameters</h3>
+        { this.renderInputs() }
+        <h3>Returns</h3>
+        <Markdown val={ formatRpcMd(returns) } />
+        { this.renderFormButton() }
+      </div>
+    );
+  }
+
+  renderMethodList () {
+    const { desc } = this.props.rpc.selectedMethod;
+    return (
+      <div>
+        <RpcAutoComplete
+          style={ { marginTop: 0 } }
+          onNewRequest={ this.handleMethodChange }
+          { ...this._test('rpcAutoComplete') }
+        />
+        <div>
+          <Markdown val={ desc } />
+        </div>
+      </div>
+    );
+  }
+
+  handleMethodChange = name => {
+    const method = rpcMethods.find(m => m.name === name);
+    this.props.actions.selectRpcMethod(method);
+  }
+
+  onRpcFire = () => {
+    if (this.state.jsonMode) {
+      return this.onCustomRpcFire();
+    }
+
+    let { name, params, outputFormatter, inputFormatters } = this.props.rpc.selectedMethod;
+    params = params.map(this.jsonParamValue);
+
+    this.props.actions.fireRpc({
+      method: name,
+      outputFormatter,
+      inputFormatters,
+      params
+    });
+  }
+
+  onCustomRpcFire () {
+    const { method, params } = this.state.jsonEditorParsedValue;
+    this.props.actions.fireRpc({ method, params });
+  }
+
+  renderInputs () {
+    let { params, name } = this.props.rpc.selectedMethod;
+
+    if (!params || !params.length) {
+      return (
+        <span>none</span>
+      );
+    }
+
+    return _.find(rpcMethods, { name })
+            .params.map(
+              p => {
+                const onChange = evt => this.setState({
+                  [this.paramKey(p)]: evt.target.value
+                });
+
+                if (_.isPlainObject(p)) {
+                  return this.renderObjInputs(p);
+                }
+
+                return (
+                  <TextField
+                    key={ p }
+                    inputStyle={ { marginTop: 0 } }
+                    fullWidth
+                    hintText={ p }
+                    title={ p }
+                    hintStyle={ { maxWidth: '100%', overflow: 'hidden', whiteSpace: 'nowrap' } }
+                    value={ this.paramValue(p) }
+                    onChange={ onChange }
+                    { ...this._test(this.paramKey(p)) }
+                  />
+                );
+              }
+            );
+  }
+
+  renderObjInputs (param) {
+    const { description, details } = param;
+
+    return (
+      <div>
+        <Markdown val={ description } />
+        <ul>
+          { Object.keys(details).map(k => {
+            const onChange = evt => this.setState({
+              [this.paramKey(`${description}.${k}`)]: evt.target.value
+            });
+
+            return (
+              <li key={ k }>
+                <TextField
+                  inputStyle={ { marginTop: 0 } }
+                  fullWidth
+                  title={ `${k}: ${details[k]}` }
+                  hintText={ `${k}: ${details[k]}` }
+                  hintStyle={ { maxWidth: '100%', overflow: 'hidden', whiteSpace: 'nowrap' } }
+                  value={ this.paramValue(`${description}.${k}`) }
+                  onChange={ onChange }
+                  { ...this._test(this.paramKey(k)) }
+                />
+              </li>
+            );
+          }) }
+        </ul>
+      </div>
+    );
+  }
+
+  setJsonEditorValue () {
+    const { name, params } = this.props.rpc.selectedMethod;
+    const json = {
+      method: name,
+      params: params.map(this.jsonParamValue)
+    };
+    this.setState({
+      jsonEditorValue: json
+    });
+  }
+
+  onJsonToggle = () => {
+    if (!this.state.jsonMode) {
+      this.setJsonEditorValue();
+    }
+    this.setState({ jsonMode: !this.state.jsonMode });
+  }
+
+  renderJsonForm () {
+    if (!this.state.jsonMode) {
+      return;
+    }
+
+    return (
+      <div>
+        <JsonEditor
+          onChange={ this.onJsonEditorChange }
+          value={ this.state.jsonEditorValue }
+        />
+        { this.renderFormButton() }
+      </div>
+    );
+  }
+
+  renderFormButton () {
+    return (
+      <button
+        { ...this._test('fireRpc') }
+        className={ 'dapp-block-button' }
+        disabled={ this.state.jsonEditorError }
+        onClick={ this.onRpcFire }
+        >
+        Fire!
+      </button>
+    );
+  }
+
+  onJsonEditorChange = (jsonEditorParsedValue, jsonEditorError) => {
+    this.setState({
+      jsonEditorParsedValue,
+      jsonEditorError
+    });
+  }
+
+  jsonParamValue = p => {
+    if (_.isPlainObject(p)) {
+      const { description, details } = p;
+      return Object.keys(details).reduce((obj, key) => {
+        obj[key] = this.paramValue(`${description}.${key}`);
+        return obj;
+      }, {});
+    }
+
+    return this.paramValue(p);
+  }
+
+  paramValue (p) {
+    return this.state[this.paramKey(p)];
+  }
+
+  paramKey (p) {
+    return `params_${p}`;
+  }
+
+  selectedMethodChanged (nextProps) {
+    return nextProps.rpc.selectedMethod.name !== this.props.rpc.selectedMethod.name;
+  }
+
+  stateChanged (nextState) {
+    return !_.isEqual(nextState, this.state);
+  }
+
+  prevCallsChanged (nextProps) {
+    return nextProps.rpc.prevCalls.length !== this.props.rpc.prevCalls.length;
+  }
+
+  static propTypes = {
+    rpc: PropTypes.shape({
+      prevCalls: PropTypes.array.isRequired,
+      selectedMethod: PropTypes.object.isRequired
+    }).isRequired,
+    actions: PropTypes.shape({
+      fireRpc: PropTypes.func.isRequired,
+      selectRpcMethod: PropTypes.func.isRequired,
+      resetRpcPrevCalls: PropTypes.func.isRequired
+    }).isRequired
+  }
+
+}
diff --git a/js/src/views/Status/components/RpcCalls/index.js b/js/src/views/Status/components/RpcCalls/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..1c55eea7163c50ed755abf2a08655fdf10ba57f1
--- /dev/null
+++ b/js/src/views/Status/components/RpcCalls/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './RpcCalls';
diff --git a/js/src/views/Status/components/RpcDocs/RpcDocs.css b/js/src/views/Status/components/RpcDocs/RpcDocs.css
new file mode 100644
index 0000000000000000000000000000000000000000..27faba6dace24824c0b946cff6aa4c9f31528c2d
--- /dev/null
+++ b/js/src/views/Status/components/RpcDocs/RpcDocs.css
@@ -0,0 +1,35 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.autocomplete {
+  margin-top: 0 !important;
+}
+
+.headline {
+  text-transform: none;
+}
+
+.returnsTitle {
+  display: 'inline';
+}
+
+.returnsDesc {
+  display: inline-block;
+}
+
+hr {
+  margin-bottom: 0;
+}
diff --git a/js/src/views/Status/components/RpcDocs/RpcDocs.js b/js/src/views/Status/components/RpcDocs/RpcDocs.js
new file mode 100644
index 0000000000000000000000000000000000000000..e932ab728bd270586a6dd3fdd1e86d1805a50e3f
--- /dev/null
+++ b/js/src/views/Status/components/RpcDocs/RpcDocs.js
@@ -0,0 +1,104 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { sortBy } from 'lodash';
+import List from 'material-ui/List/List';
+import ListItem from 'material-ui/List/ListItem';
+import AutoComplete from '../AutoComplete';
+
+import { formatRpcMd } from '../../util/rpc-md';
+import ScrollTopButton from '../ScrollTopButton';
+import styles from './RpcDocs.css';
+import Markdown from '../Markdown';
+import rpcData from '../../data/rpc.json';
+import RpcNav from '../RpcNav';
+
+const rpcMethods = sortBy(rpcData.methods, 'name');
+
+class RpcDocs extends Component {
+
+  render () {
+    return (
+      <div className='dapp-flex-content'>
+        <main className='dapp-content'>
+          <div className='dapp-container'>
+            <div className='row'>
+              <div className='col col-6'>
+                <h1><span>RPC</span> Docs</h1>
+              </div>
+              <div className='col col-6'>
+                <RpcNav />
+              </div>
+            </div>
+          </div>
+          <div style={ { clear: 'both' } }></div>
+          <div className='dapp-container'>
+            <div className='row'>
+              <div className='col col-12'>
+                <AutoComplete
+                  floatingLabelText='Method name'
+                  className={ styles.autocomplete }
+                  dataSource={ rpcMethods.map(m => m.name) }
+                  onNewRequest={ this.handleMethodChange }
+                  { ...this._test('autocomplete') }
+                />
+                { this.renderData() }
+              </div>
+            </div>
+          </div>
+          <ScrollTopButton />
+        </main>
+      </div>
+    );
+  }
+
+  renderData () {
+    const methods = rpcMethods.map((m, idx) => {
+      const setMethod = el => { this[`_method-${m.name}`] = el; };
+
+      return (
+        <ListItem
+          key={ m.name }
+          disabled
+          ref={ setMethod }
+        >
+          <h3 className={ styles.headline }>{ m.name }</h3>
+          <Markdown val={ m.desc } />
+          <p><strong>Params</strong>{ !m.params.length ? ' - none' : '' }</p>
+          { m.params.map((p, idx) => <Markdown key={ `${m.name}-${idx}` } val={ formatRpcMd(p) } />) }
+          <p className={ styles.returnsTitle }><strong>Returns</strong> - </p>
+          <Markdown className={ styles.returnsDesc } val={ formatRpcMd(m.returns) } />
+          { idx !== rpcMethods.length - 1 ? <hr /> : '' }
+        </ListItem>
+      );
+    });
+
+    return (
+      <List>
+        { methods }
+      </List>
+    );
+  }
+
+  handleMethodChange = name => {
+    ReactDOM.findDOMNode(this[`_method-${name}`]).scrollIntoViewIfNeeded();
+  }
+
+}
+
+export default RpcDocs;
diff --git a/js/src/views/Status/components/RpcDocs/index.js b/js/src/views/Status/components/RpcDocs/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f1a9be5c0992534f83cb33426eb6ae35df962332
--- /dev/null
+++ b/js/src/views/Status/components/RpcDocs/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './RpcDocs';
diff --git a/js/src/views/Status/components/RpcNav/RpcNav.css b/js/src/views/Status/components/RpcNav/RpcNav.css
new file mode 100644
index 0000000000000000000000000000000000000000..793620c4ae4127b88d3d3ec7c4fb5f1879dcd4cd
--- /dev/null
+++ b/js/src/views/Status/components/RpcNav/RpcNav.css
@@ -0,0 +1,28 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.nav {
+  font-size: 20px;
+  float: right;
+}
+
+.activeNav {
+  color: #b7a6a6 !important;
+}
+
+.nav a:not(:first-child) {
+  margin-left: 30px;
+}
diff --git a/js/src/views/Status/components/RpcNav/RpcNav.js b/js/src/views/Status/components/RpcNav/RpcNav.js
new file mode 100644
index 0000000000000000000000000000000000000000..690f4355e8535cdeb2324d20723fb84dc87e911e
--- /dev/null
+++ b/js/src/views/Status/components/RpcNav/RpcNav.js
@@ -0,0 +1,35 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+import { Link } from 'react-router';
+import styles from './RpcNav.css';
+
+export default class RpcNav extends Component {
+
+  render () {
+    return (
+      <div className={ styles.nav }>
+        <Link to={ '/rpc/calls' } activeClassName={ styles.activeNav } { ...this._test('rpc-calls-link') }>
+          <i className='icon-call-out'></i>
+        </Link>
+        <Link to={ '/rpc/docs' } activeClassName={ styles.activeNav } { ...this._test('rpc-docs-link') }>
+          <i className='icon-docs'></i>
+        </Link>
+      </div>
+    );
+  }
+}
diff --git a/js/src/views/Status/components/RpcNav/index.js b/js/src/views/Status/components/RpcNav/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..8e2b2aa40a3367bc97ae980b38412f6f17be69e7
--- /dev/null
+++ b/js/src/views/Status/components/RpcNav/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './RpcNav';
diff --git a/js/src/views/Status/components/ScrollTopButton/ScrollTopButton.css b/js/src/views/Status/components/ScrollTopButton/ScrollTopButton.css
new file mode 100644
index 0000000000000000000000000000000000000000..dfaf7193d3bd8fc591818cf154ec12e1b3bbc3a8
--- /dev/null
+++ b/js/src/views/Status/components/ScrollTopButton/ScrollTopButton.css
@@ -0,0 +1,41 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.scrollButton {
+  position: fixed !important;
+  bottom: 35px !important;
+  right: 0;
+  left: 0;
+  margin-right: auto;
+  margin-left: auto;
+  animation: fadein .5s;
+  background: #eee !important;
+  border-radius: 50%;
+  border: 1px solid #6691C2 !important;
+  z-index: 10;
+  padding: 5px !important;
+  width: 34px !important;
+  height: 34px !important;
+}
+
+@keyframes fadein {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.hidden {
+  display: none !important;
+}
diff --git a/js/src/views/Status/components/ScrollTopButton/ScrollTopButton.js b/js/src/views/Status/components/ScrollTopButton/ScrollTopButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..2947495a0e82daa4783fee99d8fd4f5c3f335074
--- /dev/null
+++ b/js/src/views/Status/components/ScrollTopButton/ScrollTopButton.js
@@ -0,0 +1,71 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+import IconButton from 'material-ui/IconButton';
+import ArrowUpwardIcon from 'material-ui/svg-icons/navigation/arrow-upward';
+
+import { scrollTo } from './util';
+import styles from './ScrollTopButton.css';
+
+const scrollTopThreshold = 600;
+
+export default class ScrollTopButton extends Component {
+
+  state = {}
+
+  componentDidMount () {
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  _scrollToTop () {
+    scrollTo(document.body, 0, 500);
+  }
+
+  render () {
+    let hiddenClass = !this.state.showScrollButton ? styles.hidden : '';
+
+    return (
+      <IconButton
+        className={ `${styles.scrollButton} ${hiddenClass}` }
+        onClick={ this._scrollToTop }>
+        <ArrowUpwardIcon />
+      </IconButton>
+    );
+  }
+
+  handleScroll = event => {
+    let { scrollTop } = event.srcElement.body;
+    let { showScrollButton } = this.state;
+
+    if (!showScrollButton && scrollTop > scrollTopThreshold) {
+      this.setState({
+        showScrollButton: true
+      });
+    }
+
+    if (showScrollButton && scrollTop < scrollTopThreshold) {
+      this.setState({
+        showScrollButton: false
+      });
+    }
+  }
+
+}
diff --git a/js/src/views/Status/components/ScrollTopButton/index.js b/js/src/views/Status/components/ScrollTopButton/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..835969920da6ff568adf7b138240cfe444a98869
--- /dev/null
+++ b/js/src/views/Status/components/ScrollTopButton/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './ScrollTopButton';
diff --git a/js/src/views/Status/components/ScrollTopButton/util.js b/js/src/views/Status/components/ScrollTopButton/util.js
new file mode 100644
index 0000000000000000000000000000000000000000..647bcfc43c033eb4fd311357409a2c8a985c4a9c
--- /dev/null
+++ b/js/src/views/Status/components/ScrollTopButton/util.js
@@ -0,0 +1,47 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function scrollTo (element, to, duration) {
+  let start = element.scrollTop;
+  let change = to - start;
+  let increment = 50;
+
+  let animateScroll = elapsedTime => {
+    elapsedTime += increment;
+    let position = easeInOut(elapsedTime, start, change, duration);
+    element.scrollTop = position;
+    if (elapsedTime < duration) {
+      setTimeout(() => {
+        // stop if user scrolled
+        if (element.scrollTop !== parseInt(position, 10)) {
+          return;
+        }
+        animateScroll(elapsedTime);
+      }, increment);
+    }
+  };
+
+  animateScroll(0);
+}
+
+export function easeInOut (currentTime, start, change, duration) {
+  currentTime /= duration / 2;
+  if (currentTime < 1) {
+    return change / 2 * currentTime * currentTime + start;
+  }
+  currentTime -= 1;
+  return -change / 2 * (currentTime * (currentTime - 2) - 1) + start;
+}
diff --git a/js/src/views/Status/components/Status/Status.css b/js/src/views/Status/components/Status/Status.css
new file mode 100644
index 0000000000000000000000000000000000000000..d79d41062de62bd21eb7f97fab7c67a9f7f290ff
--- /dev/null
+++ b/js/src/views/Status/components/Status/Status.css
@@ -0,0 +1,74 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.container {
+  padding-bottom: 1em;
+}
+
+.row {
+  margin: 0 -1em;
+}
+
+.row::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
+.blockinfo {
+  font-size: 24px;
+  color: #aaa;
+  line-height: 24px;
+}
+
+.col,
+.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
+  float: left;
+  padding: 0 1em;
+  box-sizing: border-box;
+}
+
+.col3 {
+  width: 25%;
+  width: -webkit-calc(100% / 12 * 3);
+  width: -moz-calc(100% / 12 * 3);
+  width: calc(100% / 12 * 3);
+}
+
+.col4 {
+  width: 33.33333%;
+  width: -webkit-calc(100% / 12 * 4);
+  width: -moz-calc(100% / 12 * 4);
+  width: calc(100% / 12 * 4);
+}
+
+.col5 {
+  width: 41.66665%;
+  width: -webkit-calc(100% / 12 * 5);
+  width: -moz-calc(100% / 12 * 5);
+  width: calc(100% / 12 * 5);
+}
+
+.col6 {
+  width: 50%;
+  width: -webkit-calc(100% / 12 * 6);
+  width: -moz-calc(100% / 12 * 6);
+  width: calc(100% / 12 * 6);
+}
+
+.col12 {
+  width: 100%;
+}
diff --git a/js/src/views/Status/components/Status/Status.js b/js/src/views/Status/components/Status/Status.js
new file mode 100644
index 0000000000000000000000000000000000000000..3304ee2337aa6dbeda5cb4916b2a9ec218a3de5f
--- /dev/null
+++ b/js/src/views/Status/components/Status/Status.js
@@ -0,0 +1,145 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import bytes from 'bytes';
+
+import { Container, ContainerTitle, Input } from '../../../../ui';
+
+import styles from './Status.css';
+import MiningSettings from '../MiningSettings';
+
+export default class Status extends Component {
+  static propTypes = {
+    nodeStatus: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired
+  }
+
+  render () {
+    const { nodeStatus } = this.props;
+    const { netPeers } = nodeStatus;
+
+    if (!netPeers || !nodeStatus.blockNumber) {
+      return null;
+    }
+
+    const hashrate = bytes(nodeStatus.hashrate.toNumber()) || 0;
+    const peers = `${netPeers.active}/${netPeers.connected}/${netPeers.max}`;
+
+    return (
+      <Container>
+        <div className={ styles.container }>
+          <div className={ styles.row }>
+            <div className={ styles.col3 }>
+              <div className={ styles.col12 }>
+                <ContainerTitle title='best block' />
+                <h2 { ...this._test('best-block') } className={ styles.blockinfo }>
+                  #{ nodeStatus.blockNumber.toFormat() }
+                </h2>
+              </div>
+              <div className={ styles.col12 }>
+                <ContainerTitle title='peers' />
+                <h2 { ...this._test('peers') } className={ styles.blockinfo }>
+                  { peers }
+                </h2>
+              </div>
+              <div className={ styles.col12 }>
+                <ContainerTitle title='hash rate' />
+                <h2 { ...this._test('hashrate') } className={ styles.blockinfo }>
+                  { `${hashrate} H/s` }
+                </h2>
+              </div>
+            </div>
+            <div className={ styles.col5 }>
+              <MiningSettings
+                { ...this._test('mining') }
+                nodeStatus={ nodeStatus }
+                actions={ this.props.actions } />
+            </div>
+            <div className={ styles.col4 }>
+              { this.renderSettings() }
+            </div>
+          </div>
+        </div>
+      </Container>
+    );
+  }
+
+  renderNodeName () {
+    const { nodeStatus } = this.props;
+
+    return (
+      <span>
+        { nodeStatus.nodeName || 'Node' }
+      </span>
+    );
+  }
+
+  renderSettings () {
+    const { nodeStatus } = this.props;
+    const { rpcSettings, netPeers } = nodeStatus;
+    const peers = `${netPeers.active}/${netPeers.connected}/${netPeers.max}`;
+
+    return (
+      <div { ...this._test('settings') }>
+        <ContainerTitle title='network settings' />
+        <Input
+          disabled
+          label='chain'
+          value={ nodeStatus.netChain }
+          { ...this._test('chain') } />
+        <div className={ styles.row }>
+          <div className={ styles.col6 }>
+            <Input
+              disabled
+              label='peers'
+              value={ peers }
+              { ...this._test('peers') } />
+          </div>
+          <div className={ styles.col6 }>
+            <Input
+              disabled
+              label='network port'
+              value={ nodeStatus.netPort.toString() }
+              { ...this._test('network-port') } />
+          </div>
+        </div>
+
+        <Input
+          disabled
+          label='rpc enabled'
+          value={ rpcSettings.enabled ? 'yes' : 'no' }
+          { ...this._test('rpc-enabled') } />
+        <div className={ styles.row }>
+          <div className={ styles.col6 }>
+            <Input
+              disabled
+              label='rpc interface'
+              value={ rpcSettings.interface }
+              { ...this._test('rpc-interface') } />
+          </div>
+          <div className={ styles.col6 }>
+            <Input
+              disabled
+              label='rpc port'
+              value={ rpcSettings.port.toString() }
+              { ...this._test('rpc-port') } />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/js/src/views/Status/components/Status/index.js b/js/src/views/Status/components/Status/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..8885a04c6cf76e7faaf022aac9687b4312839283
--- /dev/null
+++ b/js/src/views/Status/components/Status/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './Status';
diff --git a/js/src/views/Status/constants/index.js b/js/src/views/Status/constants/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..26850209ae78ec19bfcddc2bd19aea78b702ad6d
--- /dev/null
+++ b/js/src/views/Status/constants/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export const SCROLLBAR_WIDTH = 22;
diff --git a/js/src/views/Status/containers/RpcPage/RpcPage.js b/js/src/views/Status/containers/RpcPage/RpcPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..93ff99692a256d19f5a4e63fc660f1352e39e939
--- /dev/null
+++ b/js/src/views/Status/containers/RpcPage/RpcPage.js
@@ -0,0 +1,57 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { extend } from 'lodash';
+import * as RpcActions from '../../actions/rpc';
+import { updateLogging } from '../../actions/logger';
+import { copyToClipboard } from '../../actions/clipboard';
+
+class RpcPage extends Component {
+  static propTypes = {
+    children: PropTypes.object.isRequired,
+    rpc: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired
+  }
+
+  render () {
+    return (
+      <div>
+        { this.props.children && React.cloneElement(this.props.children, {
+          ...this.props
+        }) }
+      </div>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  return state;
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    actions: bindActionCreators(extend({}, RpcActions, { copyToClipboard }, { updateLogging }), dispatch)
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(RpcPage);
diff --git a/js/src/views/Status/containers/RpcPage/index.js b/js/src/views/Status/containers/RpcPage/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f94cbe2b323c1646799b1cfb6e2a5561bb8c20e0
--- /dev/null
+++ b/js/src/views/Status/containers/RpcPage/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './RpcPage';
diff --git a/js/src/views/Status/containers/StatusPage/StatusPage.js b/js/src/views/Status/containers/StatusPage/StatusPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..afc7d60f7b47a4fcf3b31ebff66f5cb9079ce6ed
--- /dev/null
+++ b/js/src/views/Status/containers/StatusPage/StatusPage.js
@@ -0,0 +1,60 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import { clearStatusLogs, toggleStatusLogs } from '../../../../redux/actions';
+
+import Debug from '../../components/Debug';
+import Status from '../../components/Status';
+
+import styles from './statusPage.css';
+
+class StatusPage extends Component {
+  static propTypes = {
+    nodeStatus: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired
+  }
+
+  render () {
+    return (
+      <div className={ styles.body }>
+        <Status { ...this.props } />
+        <Debug { ...this.props } />
+      </div>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  return state;
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    actions: bindActionCreators({
+      clearStatusLogs,
+      toggleStatusLogs
+    }, dispatch)
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(StatusPage);
diff --git a/js/src/views/Status/containers/StatusPage/index.js b/js/src/views/Status/containers/StatusPage/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e36bc949c3d79eb3cc2ccbfc651a093d473940a0
--- /dev/null
+++ b/js/src/views/Status/containers/StatusPage/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './StatusPage';
diff --git a/js/src/views/Status/containers/StatusPage/statusPage.css b/js/src/views/Status/containers/StatusPage/statusPage.css
new file mode 100644
index 0000000000000000000000000000000000000000..850ee08562cbf3398c56017cc6d6e20d58a523bc
--- /dev/null
+++ b/js/src/views/Status/containers/StatusPage/statusPage.css
@@ -0,0 +1,18 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.body {
+}
diff --git a/js/src/views/Status/data/rpc.json b/js/src/views/Status/data/rpc.json
new file mode 100644
index 0000000000000000000000000000000000000000..97c7e40556180fa5b8b0ca31ee9f7be4089ebaff
--- /dev/null
+++ b/js/src/views/Status/data/rpc.json
@@ -0,0 +1,1075 @@
+{
+  "methods": [
+    {
+      "name": "web3_clientVersion",
+      "desc": "Returns the current client version.",
+      "params": [],
+      "returns": "`String` - The current client version",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "web3_sha3",
+      "desc": "Returns Keccak-256 (*not* the standardized SHA3-256) of the given data.",
+      "params": [
+        "`String` - the data to convert into a SHA3 hash"
+      ],
+      "returns": "`DATA` - The SHA3 result of the given string.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "net_version",
+      "desc": "Returns the current network protocol version.",
+      "params": [],
+      "returns": "`String` - The current network protocol version",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "net_listening",
+      "desc": "Returns `true` if client is actively listening for network connections.",
+      "params": [],
+      "returns": "`Boolean` - `true` when listening, otherwise `false`.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "net_peerCount",
+      "desc": "Returns number of peers currenly connected to the client.",
+      "params": [],
+      "returns": "`QUANTITY` - integer of the number of connected peers.",
+      "inputFormatters": [],
+      "outputFormatter": "utils.toDecimal"
+    },
+    {
+      "name": "eth_protocolVersion",
+      "desc": "Returns the current ethereum protocol version.",
+      "params": [],
+      "returns": "`String` - The current ethereum protocol version",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_syncing",
+      "desc": "Returns an object with data about the sync status or `false`.",
+      "params": [],
+      "returns": {
+        "description": "`Object|Boolean`, An object with sync status data or `FALSE`, when not syncing:",
+        "details": {
+          "startingBlock": "`QUANTITY` - The block at which the import started (will only be reset, after the sync reached his head)",
+          "currentBlock": "`QUANTITY` - The current block, same as eth_blockNumber",
+          "highestBlock": "`QUANTITY` - The estimated highest block"
+        }
+      },
+      "inputFormatters": [],
+      "outputFormatter": "outputSyncingFormatter"
+    },
+    {
+      "name": "eth_coinbase",
+      "desc": "Returns the client coinbase address.",
+      "params": [],
+      "returns": "`DATA`, 20 bytes - the current coinbase address.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_mining",
+      "desc": "Returns `true` if client is actively mining new blocks.",
+      "params": [],
+      "returns": "`Boolean` - returns `true` of the client is mining, otherwise `false`.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_hashrate",
+      "desc": "Returns the number of hashes per second that the node is mining with.",
+      "params": [],
+      "returns": "`QUANTITY` - number of hashes per second.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_gasPrice",
+      "desc": "Returns the current price per gas in wei.",
+      "params": [],
+      "returns": "`QUANTITY` - integer of the current gas price in wei.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_accounts",
+      "desc": "Returns a list of addresses owned by client.",
+      "params": [],
+      "returns": "`Array of DATA`, 20 Bytes - addresses owned by the client.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_blockNumber",
+      "desc": "Returns the number of most recent block.",
+      "params": [],
+      "returns": "`QUANTITY` - integer of the current block number the client is on.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getBalance",
+      "desc": "Returns the balance of the account of given address.",
+      "params": [
+        "`DATA`, 20 Bytes - address to check for balance.",
+        "`QUANTITY|TAG` - integer block number, or the string `\"latest\"`, `\"earliest\"` or `\"pending\"`, see the [default block parameter](#the-default-block-parameter)"
+      ],
+      "returns": "`QUANTITY` - integer of the current balance in wei.",
+      "inputFormatters": [
+        "inputAddressFormatter",
+        "inputDefaultBlockNumberFormatter"
+      ],
+      "outputFormatter": "outputBigNumberFormatter"
+    },
+    {
+      "name": "eth_getStorageAt",
+      "desc": "Returns the value from a storage position at a given address.",
+      "params": [
+        "`DATA`, 20 Bytes - address of the storage.",
+        "`QUANTITY` - integer of the position in the storage.",
+        "`QUANTITY|TAG` - integer block number, or the string `\"latest\"`, `\"earliest\"` or `\"pending\"`, see the [default block parameter](#the-default-block-parameter)"
+      ],
+      "returns": "`DATA` - the value at this storage position.",
+      "inputFormatters": [
+        null,
+        "utils.toHex",
+        "inputDefaultBlockNumberFormatter"
+      ],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getTransactionCount",
+      "desc": "Returns the number of transactions *sent* from an address.",
+      "params": [
+        "`DATA`, 20 Bytes - address.",
+        "`QUANTITY|TAG` - integer block number, or the string `\"latest\"`, `\"earliest\"` or `\"pending\"`, see the [default block parameter](#the-default-block-parameter)"
+      ],
+      "returns": "`QUANTITY` - integer of the number of transactions send from this address.",
+      "inputFormatters": [
+        null,
+        "inputDefaultBlockNumberFormatter"
+      ],
+      "outputFormatter": "utils.toDecimal"
+    },
+    {
+      "name": "eth_getBlockTransactionCountByHash",
+      "desc": "Returns the number of transactions in a block from a block matching the given block hash.",
+      "params": [
+        "`DATA`, 32 Bytes - hash of a block"
+      ],
+      "returns": "`QUANTITY` - integer of the number of transactions in this block.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getBlockTransactionCountByNumber",
+      "desc": "Returns the number of transactions in a block from a block matching the given block number.",
+      "params": [
+        "`QUANTITY|TAG` - integer of a block number, or the string `\"earliest\"`, `\"latest\"` or `\"pending\"`, as in the [default block parameter](#the-default-block-parameter)."
+      ],
+      "returns": "`QUANTITY` - integer of the number of transactions in this block.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getUncleCountByBlockHash",
+      "desc": "Returns the number of uncles in a block from a block matching the given block hash.",
+      "params": [
+        "`DATA`, 32 Bytes - hash of a block"
+      ],
+      "returns": "`QUANTITY` - integer of the number of uncles in this block.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getUncleCountByBlockNumber",
+      "desc": "Returns the number of uncles in a block from a block matching the given block number.",
+      "params": [
+        "`QUANTITY` - integer of a block number, or the string \"latest\", \"earliest\" or \"pending\", see the [default block parameter](#the-default-block-parameter)"
+      ],
+      "returns": "`QUANTITY` - integer of the number of uncles in this block.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getCode",
+      "desc": "Returns code at a given address.",
+      "params": [
+        "`DATA`, 20 Bytes - address",
+        "`QUANTITY|TAG` - integer block number, or the string `\"latest\"`, `\"earliest\"` or `\"pending\"`, see the [default block parameter](#the-default-block-parameter)"
+      ],
+      "returns": "`DATA` - the code from the given address.",
+      "inputFormatters": [
+        "inputAddressFormatter",
+        "inputDefaultBlockNumberFormatter"
+      ],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_sign",
+      "desc": "Signs data with a given address.\n**Note** the address to sign must be unlocked.",
+      "params": [
+        "`DATA`, 20 Bytes - address",
+        "`DATA`, Data to sign"
+      ],
+      "returns": "`DATA`: Signed data",
+      "inputFormatters": [
+        "inputAddressFormatter",
+        null
+      ],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_sendTransaction",
+      "desc": "Creates new message call transaction or a contract creation, if the data field contains code.",
+      "params": [
+        {
+          "description": "`Object` - The transaction object",
+          "details": {
+            "from": "`DATA`, 20 Bytes - The address the transaction is send from.",
+            "to": "`DATA`, 20 Bytes - (optional when creating new contract) The address the transaction is directed to.",
+            "gas": "`QUANTITY`  - (optional, default: 90000) Integer of the gas provided for the transaction execution. It will return unused gas.",
+            "gasPrice": "`QUANTITY`  - (optional, default: To-Be-Determined) Integer of the gasPrice used for each paid gas",
+            "value": "`QUANTITY`  - (optional) Integer of the value send with this transaction",
+            "data": "`DATA`  - The compiled code of a contract OR the hash of the invoked method signature and encoded parameters. For details see [Ethereum Contract ABI](https://github.com/ethereum/wiki/wiki/Ethereum-Contract-ABI)",
+            "nonce": "`QUANTITY`  - (optional) Integer of a nonce. This allows to overwrite your own pending transactions that use the same nonce."
+          }
+        }
+      ],
+      "returns": "`DATA`, 32 Bytes - the transaction hash, or the zero hash if the transaction is not yet available.",
+      "inputFormatters": [
+        "inputTransactionFormatter"
+      ],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_sendRawTransaction",
+      "desc": "Creates new message call transaction or a contract creation for signed transactions.",
+      "params": [
+        "`DATA`, The signed transaction data."
+      ],
+      "returns": "`DATA`, 32 Bytes - the transaction hash, or the zero hash if the transaction is not yet available.",
+      "inputFormatters": [
+        null
+      ],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_call",
+      "desc": "Executes a new message call immediately without creating a transaction on the block chain.",
+      "params": [
+        {
+          "description": "`Object` - The transaction call object",
+          "details": {
+            "from": "`DATA`, 20 Bytes - (optional) The address the transaction is send from.",
+            "to": "`DATA`, 20 Bytes  - The address the transaction is directed to.",
+            "gas": "`QUANTITY`  - (optional) Integer of the gas provided for the transaction execution. eth_call consumes zero gas, but this parameter may be needed by some executions.",
+            "gasPrice": "`QUANTITY`  - (optional) Integer of the gasPrice used for each paid gas",
+            "value": "`QUANTITY`  - (optional) Integer of the value send with this transaction",
+            "data": "`DATA`  - (optional) Hash of the method signature and encoded parameters. For details see [Ethereum Contract ABI](https://github.com/ethereum/wiki/wiki/Ethereum-Contract-ABI)"
+          }
+        },
+        "`QUANTITY|TAG` - integer block number, or the string `\"latest\"`, `\"earliest\"` or `\"pending\"`, see the [default block parameter](#the-default-block-parameter)"
+      ],
+      "returns": "`DATA` - the return value of executed contract.",
+      "inputFormatters": [
+        "inputCallFormatter",
+        "inputDefaultBlockNumberFormatter"
+      ],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_estimateGas",
+      "desc": "Makes a call or transaction, which won't be added to the blockchain and returns the used gas, which can be used for estimating the used gas.",
+      "params": [],
+      "returns": "`QUANTITY` - the amount of gas used.",
+      "inputFormatters": [
+        "inputCallFormatter"
+      ],
+      "outputFormatter": "utils.toDecimal"
+    },
+    {
+      "name": "eth_getBlockByHash",
+      "desc": "Returns information about a block by hash.",
+      "params": [
+        "`DATA`, 32 Bytes - Hash of a block.",
+        "`Boolean` - If `true` it returns the full transaction objects, if `false` only the hashes of the transactions."
+      ],
+      "returns": {
+        "description": "`Object` - A block object, or `null` when no block was found:",
+        "details": {
+          "number": "`QUANTITY` - the block number. `null` when its pending block.",
+          "hash": "`DATA`, 32 Bytes - hash of the block. `null` when its pending block.",
+          "parentHash": "`DATA`, 32 Bytes - hash of the parent block.",
+          "nonce": "`DATA`, 8 Bytes - hash of the generated proof-of-work. `null` when its pending block.",
+          "sha3Uncles": "`DATA`, 32 Bytes - SHA3 of the uncles data in the block.",
+          "logsBloom": "`DATA`, 256 Bytes - the bloom filter for the logs of the block. `null` when its pending block.",
+          "transactionsRoot": "`DATA`, 32 Bytes - the root of the transaction trie of the block.",
+          "stateRoot": "`DATA`, 32 Bytes - the root of the final state trie of the block.",
+          "receiptsRoot": "`DATA`, 32 Bytes - the root of the receipts trie of the block.",
+          "miner": "`DATA`, 20 Bytes - the address of the beneficiary to whom the mining rewards were given.",
+          "difficulty": "`QUANTITY` - integer of the difficulty for this block.",
+          "totalDifficulty": "`QUANTITY` - integer of the total difficulty of the chain until this block.",
+          "extraData": "`DATA` - the \"extra data\" field of this block.",
+          "size": "`QUANTITY` - integer the size of this block in bytes.",
+          "gasLimit": "`QUANTITY` - the maximum gas allowed in this block.",
+          "gasUsed": "`QUANTITY` - the total used gas by all transactions in this block.",
+          "timestamp": "`QUANTITY` - the unix timestamp for when the block was collated.",
+          "transactions": "`Array` - Array of transaction objects, or 32 Bytes transaction hashes depending on the last given parameter.",
+          "uncles": "`Array` - Array of uncle hashes."
+        }
+      },
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getBlockByNumber",
+      "desc": "Returns information about a block by block number.",
+      "params": [
+        "`QUANTITY|TAG` - integer of a block number, or the string `\"earliest\"`, `\"latest\"` or `\"pending\"`, as in the [default block parameter](#the-default-block-parameter).",
+        "`Boolean` - If `true` it returns the full transaction objects, if `false` only the hashes of the transactions."
+      ],
+      "returns": "See [eth_getBlockByHash](#eth_getblockbyhash)",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getTransactionByHash",
+      "desc": "Returns the information about a transaction requested by transaction hash.",
+      "params": [
+        "`DATA`, 32 Bytes - hash of a transaction"
+      ],
+      "returns": {
+        "description": "`Object` - A transaction object, or `null` when no transaction was found:",
+        "details": {
+          "hash": "`DATA`, 32 Bytes - hash of the transaction.",
+          "nonce": "`QUANTITY` - the number of transactions made by the sender prior to this one.",
+          "blockHash": "`DATA`, 32 Bytes - hash of the block where this transaction was in. `null` when its pending.",
+          "blockNumber": "`QUANTITY` - block number where this transaction was in. `null` when its pending.",
+          "transactionIndex": "`QUANTITY` - integer of the transactions index position in the block. `null` when its pending.",
+          "from": "`DATA`, 20 Bytes - address of the sender.",
+          "to": "`DATA`, 20 Bytes - address of the receiver. `null` when its a contract creation transaction.",
+          "value": "`QUANTITY` - value transferred in Wei.",
+          "gasPrice": "`QUANTITY` - gas price provided by the sender in Wei.",
+          "gas": "`QUANTITY` - gas provided by the sender.",
+          "input": "`DATA` - the data send along with the transaction."
+        }
+      },
+      "inputFormatters": [],
+      "outputFormatter": "outputTransactionFormatter"
+    },
+    {
+      "name": "eth_getTransactionByBlockHashAndIndex",
+      "desc": "Returns information about a transaction by block hash and transaction index position.",
+      "params": [
+        "`DATA`, 32 Bytes - hash of a block.",
+        "`QUANTITY` - integer of the transaction index position."
+      ],
+      "returns": "See [eth_getBlockByHash](#eth_gettransactionbyhash)",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getTransactionByBlockNumberAndIndex",
+      "desc": "Returns information about a transaction by block number and transaction index position.",
+      "params": [
+        "`QUANTITY|TAG` - a block number, or the string `\"earliest\"`, `\"latest\"` or `\"pending\"`, as in the [default block parameter](#the-default-block-parameter).",
+        "`QUANTITY` - the transaction index position."
+      ],
+      "returns": "See [eth_getBlockByHash](#eth_gettransactionbyhash)",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getTransactionReceipt",
+      "desc": "Returns the receipt of a transaction by transaction hash.\n**Note** That the receipt is not available for pending transactions.",
+      "params": [
+        "`DATA`, 32 Bytes - hash of a transaction"
+      ],
+      "returns": {
+        "description": "`Object` - A transaction receipt object, or `null` when no receipt was found:",
+        "details": {
+          "transactionHash ": "`DATA`, 32 Bytes - hash of the transaction.",
+          "transactionIndex": "`QUANTITY` - integer of the transactions index position in the block.",
+          "blockHash": "`DATA`, 32 Bytes - hash of the block where this transaction was in.",
+          "blockNumber": "`QUANTITY` - block number where this transaction was in.",
+          "cumulativeGasUsed ": "`QUANTITY ` - The total amount of gas used when this transaction was executed in the block.",
+          "gasUsed ": "`QUANTITY ` - The amount of gas used by this specific transaction alone.",
+          "contractAddress ": "`DATA`, 20 Bytes - The contract address created, if the transaction was a contract creation, otherwise `null`.",
+          "logs": "`Array` - Array of log objects, which this transaction generated."
+        }
+      },
+      "inputFormatters": [],
+      "outputFormatter": "outputTransactionReceiptFormatter"
+    },
+    {
+      "name": "eth_getUncleByBlockHashAndIndex",
+      "desc": "Returns information about a uncle of a block by hash and uncle index position.",
+      "params": [
+        "`DATA`, 32 Bytes - hash a block.",
+        "`QUANTITY` - the uncle's index position."
+      ],
+      "returns": "See [eth_getBlockByHash](#eth_getblockbyhash)",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getUncleByBlockNumberAndIndex",
+      "desc": "Returns information about a uncle of a block by number and uncle index position.",
+      "params": [
+        "`QUANTITY|TAG` - a block number, or the string `\"earliest\"`, `\"latest\"` or `\"pending\"`, as in the [default block parameter](#the-default-block-parameter).",
+        "`QUANTITY` - the uncle's index position."
+      ],
+      "returns": "See [eth_getBlockByHash](#eth_getblockbyhash)",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getCompilers",
+      "desc": "Returns a list of available compilers in the client.",
+      "params": [],
+      "returns": "`Array` - Array of available compilers.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_compileSolidity",
+      "desc": "Returns compiled solidity code.",
+      "params": [
+        "`String` - The source code."
+      ],
+      "returns": "`DATA` - The compiled source code.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_compileLLL",
+      "desc": "Returns compiled LLL code.",
+      "params": [
+        "`String` - The source code."
+      ],
+      "returns": "`DATA` - The compiled source code.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_compileSerpent",
+      "desc": "Returns compiled serpent code.",
+      "params": [
+        "`String` - The source code."
+      ],
+      "returns": "`DATA` - The compiled source code.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_newFilter",
+      "desc": "Creates a filter object, based on filter options, to notify when the state changes (logs).\nTo check if the state has changed, call [eth_getFilterChanges](#eth_getfilterchanges).",
+      "params": [],
+      "returns": {
+        "description": "1. `Object` - The filter options:",
+        "details": {
+          "fromBlock": "`QUANTITY|TAG` - (optional, default: `\"latest\"`) Integer block number, or `\"latest\"` for the last mined block or `\"pending\"`, `\"earliest\"` for not yet mined transactions.",
+          "toBlock": "`QUANTITY|TAG` - (optional, default: `\"latest\"`) Integer block number, or `\"latest\"` for the last mined block or `\"pending\"`, `\"earliest\"` for not yet mined transactions.",
+          "address": "`DATA|Array`, 20 Bytes - (optional) Contract address or a list of addresses from which logs should originate.",
+          "topics": "`Array of DATA`,  - (optional) Array of 32 Bytes `DATA` topics. Topics are order-dependent. Each topic can also be an array of DATA with \"or\" options."
+        }
+      },
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_newBlockFilter",
+      "desc": "Creates a filter in the node, to notify when a new block arrives.\nTo check if the state has changed, call [eth_getFilterChanges](#eth_getfilterchanges).",
+      "params": [],
+      "returns": "`QUANTITY` - A filter id.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_newPendingTransactionFilter",
+      "desc": "Creates a filter in the node, to notify when new pending transactions arrive.\nTo check if the state has changed, call [eth_getFilterChanges](#eth_getfilterchanges).",
+      "params": [],
+      "returns": "`QUANTITY` - A filter id.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_uninstallFilter",
+      "desc": "Uninstalls a filter with given id. Should always be called when watch is no longer needed.\nAdditonally Filters timeout when they aren't requested with [eth_getFilterChanges](#eth_getfilterchanges) for a period of time.",
+      "params": [
+        "`QUANTITY` - The filter id."
+      ],
+      "returns": "`Boolean` - `true` if the filter was successfully uninstalled, otherwise `false`.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getFilterChanges",
+      "desc": "Polling method for a filter, which returns an array of logs which occurred since last poll.",
+      "params": [
+        "`QUANTITY` - the filter id."
+      ],
+      "returns": "`Array` - Array of log objects, or an empty array if nothing has changed since last poll.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getFilterLogs",
+      "desc": "Returns an array of all logs matching filter with given id.",
+      "params": [
+        "`QUANTITY` - The filter id."
+      ],
+      "returns": "See [eth_getFilterChanges](#eth_getfilterchanges)",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getLogs",
+      "desc": "Returns an array of all logs matching a given filter object.",
+      "params": [
+        {
+          "description": "`Object` - the filter object, see [eth_newFilter parameters](#eth_newfilter).",
+          "details": {}
+        }
+      ],
+      "returns": "See [eth_getFilterChanges](#eth_getfilterchanges)",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getWork",
+      "desc": "Returns the hash of the current block, the seedHash, and the boundary condition to be met (\"target\").",
+      "params": [],
+      "returns": "`Array` - Array with the following properties:",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_submitWork",
+      "desc": "Used for submitting a proof-of-work solution.",
+      "params": [
+        "`DATA`, 8 Bytes - The nonce found (64 bits)",
+        "`DATA`, 32 Bytes - The header's pow-hash (256 bits)",
+        "`DATA`, 32 Bytes - The mix digest (256 bits)"
+      ],
+      "returns": "`Boolean` - returns `true` if the provided solution is valid, otherwise `false`.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_submitHashrate",
+      "desc": "Used for submitting mining hashrate.",
+      "params": [
+        "`Hashrate`, a hexadecimal string representation (32 bytes) of the hash rate ",
+        "`ID`, String - A random hexadecimal(32 bytes) ID identifying the client"
+      ],
+      "returns": "`Boolean` - returns `true` if submitting went through succesfully and `false` otherwise.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "db_putString",
+      "desc": "Stores a string in the local database.\n**Note** this function is deprecated and will be removed in the future.",
+      "params": [
+        "`String` - Database name.",
+        "`String` - Key name.",
+        "`String` - String to store."
+      ],
+      "returns": "`Boolean` - returns `true` if the value was stored, otherwise `false`.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "db_getString",
+      "desc": "Returns string from the local database.\n**Note** this function is deprecated and will be removed in the future.",
+      "params": [
+        "`String` - Database name.",
+        "`String` - Key name."
+      ],
+      "returns": "`String` - The previously stored string.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "db_putHex",
+      "desc": "Stores binary data in the local database.\n**Note** this function is deprecated and will be removed in the future.",
+      "params": [
+        "`String` - Database name.",
+        "`String` - Key name.",
+        "`DATA` - The data to store."
+      ],
+      "returns": "`Boolean` - returns `true` if the value was stored, otherwise `false`.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "db_getHex",
+      "desc": "Returns binary data from the local database.\n**Note** this function is deprecated and will be removed in the future.",
+      "params": [
+        "`String` - Database name.",
+        "`String` - Key name."
+      ],
+      "returns": "`DATA` - The previously stored data.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "shh_version",
+      "desc": "Returns the current whisper protocol version.",
+      "params": [],
+      "returns": "`String` - The current whisper protocol version",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "shh_post",
+      "desc": "Sends a whisper message.",
+      "params": [
+        {
+          "description": "`Object` - The whisper post object:",
+          "details": {
+            "from": "`DATA`, 60 Bytes - (optional) The identity of the sender.",
+            "to": "`DATA`, 60 Bytes - (optional) The identity of the receiver. When present whisper will encrypt the message so that only the receiver can decrypt it.",
+            "topics": "`Array of DATA` - Array of `DATA` topics, for the receiver to identify messages.",
+            "payload": "`DATA` - The payload of the message.",
+            "priority": "`QUANTITY` - The integer of the priority in a rang from ... (?).",
+            "ttl": "`QUANTITY` - integer of the time to live in seconds."
+          }
+        }
+      ],
+      "returns": "`Boolean` - returns `true` if the message was send, otherwise `false`.",
+      "inputFormatters": [
+        "inputPostFormatter"
+      ],
+      "outputFormatter": null
+    },
+    {
+      "name": "shh_newIdentity",
+      "desc": "Creates new whisper identity in the client.",
+      "params": [],
+      "returns": "`DATA`, 60 Bytes - the address of the new identiy.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "shh_hasIdentity",
+      "desc": "Checks if the client hold the private keys for a given identity.",
+      "params": [
+        "`DATA`, 60 Bytes - The identity address to check."
+      ],
+      "returns": "`Boolean` - returns `true` if the client holds the privatekey for that identity, otherwise `false`.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "shh_newGroup",
+      "desc": "(?)",
+      "params": [],
+      "returns": "`DATA`, 60 Bytes - the address of the new group. (?)",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "shh_addToGroup",
+      "desc": "(?)",
+      "params": [
+        "`DATA`, 60 Bytes - The identity address to add to a group (?)."
+      ],
+      "returns": "`Boolean` - returns `true` if the identity was successfully added to the group, otherwise `false` (?).",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "shh_newFilter",
+      "desc": "Creates filter to notify, when client receives whisper message matching the filter options.",
+      "params": [
+        {
+          "description": "`Object` - The filter options:",
+          "details": {
+            "to": "`DATA`, 60 Bytes - (optional) Identity of the receiver. *When present it will try to decrypt any incoming message if the client holds the private key to this identity.*",
+            "topics": "`Array of DATA` - Array of `DATA` topics which the incoming message's topics should match.  You can use the following combinations:"
+          }
+        }
+      ],
+      "returns": "`QUANTITY` - The newly created filter.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "shh_uninstallFilter",
+      "desc": "Uninstalls a filter with given id. Should always be called when watch is no longer needed.\nAdditonally Filters timeout when they aren't requested with [shh_getFilterChanges](#shh_getfilterchanges) for a period of time.",
+      "params": [
+        "`QUANTITY` - The filter id."
+      ],
+      "returns": "`Boolean` - `true` if the filter was successfully uninstalled, otherwise `false`.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "shh_getFilterChanges",
+      "desc": "Polling method for whisper filters. Returns new messages since the last call of this method.\n**Note** calling the [shh_getMessages](#shh_getmessages) method, will reset the buffer for this method, so that you won't receive duplicate messages.",
+      "params": [
+        "`QUANTITY` - The filter id."
+      ],
+      "returns": "`Array` - Array of messages received since last poll:",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "shh_getMessages",
+      "desc": "Get all messages matching a filter. Unlike `shh_getFilterChanges` this returns all messages.",
+      "params": [
+        "`QUANTITY` - The filter id."
+      ],
+      "returns": "See [shh_getFilterChanges](#shh_getfilterchanges)",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_pendingTransactions",
+      "desc": "?",
+      "params": [],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_flush",
+      "desc": "?",
+      "params": [],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_newFilterEx",
+      "desc": "?",
+      "params": [
+        ""
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getFilterChangesEx",
+      "desc": "?",
+      "params": [
+        ""
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getFilterLogsEx",
+      "desc": "?",
+      "params": [
+        ""
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_getLogsEx",
+      "desc": "?",
+      "params": [
+        "?"
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_register",
+      "desc": "?",
+      "params": [
+        "?"
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_unregister",
+      "desc": "?",
+      "params": [
+        "?"
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_fetchQueuedTransactions",
+      "desc": "?",
+      "params": [
+        "?"
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_signTransaction",
+      "desc": "?",
+      "params": [
+        "?"
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "personal_signAndSendTransaction",
+      "desc": "Sends and signs a transaction given account passphrase. Does not require the account to be unlocked nor unlocks the account for future transactions. ",
+      "params": [
+        {
+          "description": "`Object` - The transaction object",
+          "details": {
+            "from": "`DATA`, 20 Bytes - The address the transaction is send from.",
+            "to": "`DATA`, 20 Bytes - (optional when creating new contract) The address the transaction is directed to.",
+            "gas": "`QUANTITY`  - (optional, default: 90000) Integer of the gas provided for the transaction execution. It will return unused gas.",
+            "gasPrice": "`QUANTITY`  - (optional, default: To-Be-Determined) Integer of the gasPrice used for each paid gas",
+            "value": "`QUANTITY`  - (optional) Integer of the value send with this transaction",
+            "data": "`DATA`  - The compiled code of a contract OR the hash of the invoked method signature and encoded parameters. For details see [Ethereum Contract ABI](https://github.com/ethereum/wiki/wiki/Ethereum-Contract-ABI)",
+            "nonce": "`QUANTITY`  - (optional) Integer of a nonce. This allows to overwrite your own pending transactions that use the same nonce."
+          }
+        },
+        "`PASS`, Passphrase to unlock `from` account."
+      ],
+      "returns": "`DATA`, 32 Bytes - the transaction hash, or the zero hash if the transaction is not yet available.",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_inspectTransaction",
+      "desc": "?",
+      "params": [
+        "?"
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "eth_notePassword",
+      "desc": "?",
+      "params": [
+        "?"
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "personal_newAccount",
+      "desc": "Creates new account",
+      "params": [
+        "`DATA` - Password"
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [
+        null
+      ],
+      "outputFormatter": null
+    },
+    {
+      "name": "personal_unlockAccount",
+      "desc": "?",
+      "params": [
+        "?",
+        "?",
+        "?"
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [
+        null,
+        null,
+        null
+      ],
+      "outputFormatter": null
+    },
+    {
+      "name": "ethcore_minGasPrice",
+      "desc": "Returns currently set minimal gas price",
+      "params": [],
+      "returns": "`QUANTITY` - Minimal Gas Price",
+      "inputFormatters": [],
+      "outputFormatter": "outputBigNumberFormatter"
+    },
+    {
+      "name": "ethcore_extraData",
+      "desc": "Returns currently set extra data",
+      "params": [],
+      "returns": "`DATA` - Extra data",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "ethcore_setExtraData",
+      "desc": "Changes extra data for newly mined blocks",
+      "params": [
+        "`DATA`- Extra Data"
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [
+        "utils.toHex"
+      ],
+      "outputFormatter": null
+    },
+    {
+      "name": "ethcore_setMinGasPrice",
+      "desc": "Changes minimal gas price for transaction to be accepted to the queue.",
+      "params": [
+        "`QUANTITY` - Minimal gas price"
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [
+        "utils.toHex"
+      ],
+      "outputFormatter": null
+    },
+    {
+      "name": "ethcore_gasFloorTarget",
+      "desc": "Returns current target for gas floor",
+      "params": [],
+      "returns": "`QUANTITY` - Gas Floor Target",
+      "inputFormatters": [],
+      "outputFormatter": "outputBigNumberFormatter"
+    },
+    {
+      "name": "ethcore_setGasFloorTarget",
+      "desc": "Changes current gas floor target.",
+      "params": [
+        "`QUANTITY` - Gas Floor Target"
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [
+        "utils.toHex"
+      ],
+      "outputFormatter": null
+    },
+    {
+      "name": "ethcore_setAuthor",
+      "desc": "Changes author (coinbase) for mined blocks.",
+      "params": [
+        "`DATA`, 20 Bytes - Address"
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [
+        "inputAddressFormatter"
+      ],
+      "outputFormatter": null
+    },
+    {
+      "name": "ethcore_setTransactionsLimit",
+      "desc": "Changes limit for transactions in queue.",
+      "params": [
+        "`QUANTITY` - New Limit"
+      ],
+      "returns": "`Boolean` - whether the call was successful",
+      "inputFormatters": [
+        "utils.toHex"
+      ],
+      "outputFormatter": null
+    },
+    {
+      "name": "ethcore_transactionsLimit",
+      "desc": "Changes limit for transactions in queue.",
+      "params": [],
+      "returns": "`QUANTITY` - Current max number of transactions in queue.",
+      "inputFormatters": [],
+      "outputFormatter": "outputBigNumberFormatter"
+    },
+    {
+      "name": "ethcore_netChain",
+      "desc": "Returns the name of the connected chain.",
+      "params": [],
+      "returns": "`DATA` - chain name",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "ethcore_netPeers",
+      "desc": "Returns number of peers.",
+      "params": [],
+      "returns": "`OBJECT` - JSON object containing active, connected and max peers",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "ethcore_netPort",
+      "desc": "Returns network port the node is listening on.",
+      "params": [],
+      "returns": "`QUANTITY` - Port Number",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "ethcore_rpcSettings",
+      "desc": "Returns basic settings of rpc (enabled, port, interface).",
+      "params": [],
+      "returns": "`OBJECT` - JSON object containing rpc settings",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "ethcore_nodeName",
+      "desc": "Returns node name (identity)",
+      "params": [],
+      "returns": "`DATA` - Node name",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "trace_filter",
+      "desc": "Returns traces matching given filter",
+      "params": [
+        "`OBJECT` - The filter object"
+      ],
+      "returns": "`ARRAY` - Traces matching given filter",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "trace_get",
+      "desc": "Returns trace at given position.",
+      "params": [
+        "`HASH` - Transaction hash",
+        "`INTEGER` - Trace position witing transaction"
+      ],
+      "returns": "`Object` - Trace",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "trace_transaction",
+      "desc": "Returns all traces of given transaction",
+      "params": [
+        "`HASH` - Transaction hash"
+      ],
+      "returns": "`ARRAY` - Traces of given transaction",
+      "inputFormatters": [],
+      "outputFormatter": null
+    },
+    {
+      "name": "trace_block",
+      "desc": "Returns traces created at given block",
+      "params": [
+        "`BLOCKNUMBER` - Integer block number, or \"latest\" for the last mined block or \"pending\", \"earliest\" for not yet mined transactions"
+      ],
+      "returns": "`ARRAY` - Block traces",
+      "inputFormatters": [],
+      "outputFormatter": null
+    }
+  ]
+}
diff --git a/js/src/views/Status/index.js b/js/src/views/Status/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..44079b22485b96c83d7ed82e2491caf9e1c8c7b5
--- /dev/null
+++ b/js/src/views/Status/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './status';
diff --git a/js/src/views/Status/middleware/index.js b/js/src/views/Status/middleware/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..169004a08f9f23f61ae2c3c9abaad2716143073a
--- /dev/null
+++ b/js/src/views/Status/middleware/index.js
@@ -0,0 +1,25 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import LocalStorage from './localstorage';
+
+export default function () {
+  const localstorage = new LocalStorage();
+
+  return [
+    localstorage.toMiddleware()
+  ];
+}
diff --git a/js/src/views/Status/middleware/localstorage.js b/js/src/views/Status/middleware/localstorage.js
new file mode 100644
index 0000000000000000000000000000000000000000..a431fdd0a982b838381111b62bb4654adf9490db
--- /dev/null
+++ b/js/src/views/Status/middleware/localstorage.js
@@ -0,0 +1,74 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import localStore from 'store';
+import { syncRpcStateFromLocalStorage } from '../actions/localstorage';
+import rpcMetods from '../data/rpc.json';
+
+export default class localStorageMiddleware {
+
+  toMiddleware () {
+    return store => next => action => {
+      let delegate;
+      switch (action.type) {
+        case 'add rpcResponse': delegate = ::this.onAddRpcResponse; break;
+        case 'reset rpcPrevCalls': delegate = ::this.onResetRpcCalls; break;
+        case 'init app': delegate = ::this.onInitApp; break;
+        default:
+          next(action);
+          return;
+      }
+
+      if (!delegate) {
+        return;
+      }
+
+      delegate(store, next, action);
+    };
+  }
+
+  onInitApp (store, next, action) {
+    const prevCalls = localStore.get('rpcPrevCalls');
+    if (!(prevCalls && prevCalls.length)) {
+      return next(action);
+    }
+
+    store.dispatch(syncRpcStateFromLocalStorage({
+      prevCalls: prevCalls,
+      callNo: prevCalls.length ? prevCalls[0].callNo + 1 : 1,
+      selectedMethod: rpcMetods.methods.find(m => m.name === prevCalls[0].name)
+    }));
+    return next(action);
+  }
+
+  onAddRpcResponse (store, next, action) {
+    action.payload.callNo = store.getState().rpc.callNo;
+    this.unshift('rpcPrevCalls', action.payload);
+    return next(action);
+  }
+
+  onResetRpcCalls (store, next, action) {
+    localStore.set('rpcPrevCalls', []);
+    return next(action);
+  }
+
+  // TODO [adgo] 20.04.2016 remove if/when PR is accepted: https://github.com/marcuswestin/store.js/pull/153
+  unshift (key, value) {
+    const newArr = [value].concat(localStore.get(key) || []);
+    localStore.set(key, newArr);
+  }
+
+}
diff --git a/js/src/views/Status/middleware/localstorage.spec.js b/js/src/views/Status/middleware/localstorage.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..c522196d925a720a0f34ddb5148b14f272a515d6
--- /dev/null
+++ b/js/src/views/Status/middleware/localstorage.spec.js
@@ -0,0 +1,196 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import sinon from 'sinon';
+import localStore from 'store';
+
+import { syncRpcStateFromLocalStorage } from '../actions/localstorage';
+import rpcData from '../data/rpc.json';
+import LocalStorageMiddleware from './localstorage';
+
+describe('MIDDLEWARE: LOCAL STORAGE', () => {
+  let cut, state;
+
+  beforeEach('mock cut', () => {
+    cut = new LocalStorageMiddleware();
+    sinon.spy(cut, 'onAddRpcResponse');
+    sinon.spy(cut, 'onResetRpcCalls');
+    sinon.spy(cut, 'onInitApp');
+    sinon.spy(cut, 'unshift');
+    state = {
+      rpc: {
+        callNo: 1
+      }
+    };
+  });
+
+  it('should call onAddRpcResponse when respected action is dispatched', () => {
+    // given
+    const store = { getState: () => state };
+    const next = sinon.spy();
+    const middleware = cut.toMiddleware()(store)(next);
+    const action = { type: 'add rpcResponse', payload: {} };
+    expect(middleware).to.be.a('function');
+    expect(action).to.be.an('object');
+
+    // when
+    middleware(action);
+
+    // then
+    expect(cut.onAddRpcResponse.calledWith(store, next, action)).to.be.true;
+  });
+
+  it('should call onResetRpcCalls when respected action is dispactched', () => {
+    // given
+    const store = {};
+    const next = sinon.spy();
+    const middleware = cut.toMiddleware()(store)(next);
+    const action = { type: 'reset rpcPrevCalls', payload: {} };
+    expect(middleware).to.be.a('function');
+    expect(action).to.be.an('object');
+
+    // when
+    middleware(action);
+
+    // then
+    expect(cut.onResetRpcCalls.calledWith(store, next, action)).to.be.true;
+  });
+
+  it('should call onInitApp when respected action is dispatched', () => {
+    // given
+    const store = { dispatch: sinon.spy() };
+    const next = sinon.spy();
+    const middleware = cut.toMiddleware()(store)(next);
+    const action = { type: 'init app' };
+    cut.onInitApp = sinon.spy();
+    expect(middleware).to.be.a('function');
+    expect(action).to.be.an('object');
+
+    // when
+    middleware(action);
+
+    // then
+    expect(cut.onInitApp.calledWith(store, next, action)).to.be.true;
+  });
+
+  it('should not call onAddRpcResponse or onInitApp when a non-respected action is dispatched', () => {
+    // given
+    const store = {};
+    const next = sinon.spy();
+    const middleware = cut.toMiddleware()(store)(next);
+    const action = { type: 'testAction' };
+    expect(middleware).to.be.a('function');
+    expect(action).to.be.an('object');
+
+    // when
+    middleware(action);
+
+    // then
+    expect(cut.onAddRpcResponse.called).to.be.false;
+    expect(cut.onInitApp.called).to.be.false;
+    expect(next.calledWith(action)).to.be.true;
+  });
+
+  describe('RPC', () => {
+    it('should dispatch syncRpcStateFromLocalStorage when there are rpc calls in localStorage', () => {
+      // given
+      const store = { dispatch: sinon.spy() };
+      const next = sinon.spy();
+      const action = {};
+      const key = 'rpcPrevCalls';
+      const prevCalls = [rpcData.methods[0]];
+      prevCalls[0].callNo = 1;
+      localStore.remove(key);
+      localStore.set(key, prevCalls);
+
+      // when
+      cut.onInitApp(store, next, action);
+
+      // then
+      expect(store.dispatch.calledWith(syncRpcStateFromLocalStorage({
+        prevCalls: prevCalls,
+        callNo: 2,
+        selectedMethod: prevCalls[0]
+      }))).to.be.true;
+      expect(next.calledWith(action)).to.be.true;
+    });
+
+    it('should not dispatch syncRpcStateFromLocalStorage when there are no rpc calls in localStorage', () => {
+      // given
+      const store = { dispatch: sinon.spy() };
+      const next = sinon.spy();
+      const action = {};
+      localStore.remove('rpcPrevCalls');
+
+      // when
+      cut.onInitApp(store, next, action);
+
+      // then
+      expect(store.dispatch.notCalled).to.be.true;
+      expect(next.calledWith(action)).to.be.true;
+    });
+  });
+
+  it('should call unshift and next', () => {
+    // given
+    const store = { getState: () => state };
+    const next = sinon.spy();
+    const action = { payload: {} };
+
+    // when
+    cut.onAddRpcResponse(store, next, action);
+
+    // then
+    expect(cut.unshift.calledWith('rpcPrevCalls', action.payload)).to.be.true;
+    expect(action.payload.callNo).to.equal(1);
+    expect(next.calledWith(action)).to.be.true;
+  });
+
+  describe('UNSHIFT', () => {
+    // TODO [adgo] 20.04.2016 remove if/when PR is accepted: https://github.com/marcuswestin/store.js/pull/153
+    it('should create array in local storage by key and unshift item to it', () => {
+      // given
+      const key = 'foo';
+      const val = 'bar';
+      localStore.remove(key);
+
+      // when
+      cut.unshift(key, val);
+
+      // then
+      expect(localStore.get(key)[0]).to.equal(val);
+      expect(localStore.get(key).length).to.equal(1);
+    });
+
+    // TODO [adgo] 20.04.2016 remove if/when PR is accepted: https://github.com/marcuswestin/store.js/pull/153
+    it('should unshift item to an existing array in local storage by key', () => {
+      // given
+      const key = 'foo';
+      const val = 'bar';
+      const newVal = 'bazz';
+      localStore.remove(key);
+      localStore.set(key, [val]);
+      expect(localStore.get(key)).to.be.defined;
+
+      // when
+      cut.unshift(key, newVal);
+
+      // then
+      expect(localStore.get(key)[0]).to.equal(newVal);
+      expect(localStore.get(key).length).to.equal(2);
+    });
+  });
+});
diff --git a/js/src/views/Status/reducers/debug.js b/js/src/views/Status/reducers/debug.js
new file mode 100644
index 0000000000000000000000000000000000000000..314470d3d634568ecf4a998b700e8b83fcd46864
--- /dev/null
+++ b/js/src/views/Status/reducers/debug.js
@@ -0,0 +1,66 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { handleActions } from 'redux-actions';
+import { union } from 'lodash';
+
+const initialState = {
+  levels: '',
+  logging: true,
+  logs: []
+};
+
+const maxLogs = 1024;
+
+export const actionHandlers = {
+
+  'update devLogsLevels' (state, action) {
+    return {
+      ...state,
+      levels: `${action.payload}`
+    };
+  },
+
+  'remove devLogs' (state, action) {
+    return {
+      ...state,
+      logs: []
+    };
+  },
+
+  'update devLogging' (state, action) {
+    return {
+      ...state,
+      logging: action.payload
+    };
+  },
+
+  'update devLogs' (state, action) {
+    if (!state.logging) {
+      return { ...state };
+    }
+
+    let newLogs = union(state.logs, action.payload.reverse());
+
+    return {
+      ...state,
+      logs: newLogs.slice(newLogs.length - maxLogs)
+    };
+  }
+
+};
+
+export default handleActions(actionHandlers, initialState);
diff --git a/js/src/views/Status/reducers/index.js b/js/src/views/Status/reducers/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3f6225ee03564e0fd53d7a0844c78c6ab9aa8840
--- /dev/null
+++ b/js/src/views/Status/reducers/index.js
@@ -0,0 +1,31 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import status from './status';
+import settings from './settings';
+import mining from './mining';
+import debug from './debug';
+import rpc from './rpc';
+import logger from './logger';
+
+export {
+  status,
+  settings,
+  mining,
+  rpc,
+  logger,
+  debug
+};
diff --git a/js/src/views/Status/reducers/logger.js b/js/src/views/Status/reducers/logger.js
new file mode 100644
index 0000000000000000000000000000000000000000..62085feacb6f594d8ccc1ac54a29a4de8318a199
--- /dev/null
+++ b/js/src/views/Status/reducers/logger.js
@@ -0,0 +1,32 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { handleActions } from 'redux-actions';
+
+const isProd = process.env.NODE_ENV === 'production';
+
+const initialState = {
+  logging: false && !isProd
+};
+
+export default handleActions({
+  'update logging' (state, action) {
+    return {
+      logging: action.payload
+    };
+  }
+
+}, initialState);
diff --git a/js/src/views/Status/reducers/mining.js b/js/src/views/Status/reducers/mining.js
new file mode 100644
index 0000000000000000000000000000000000000000..3fe780bbdfbf175e0b0417172a996858333872c7
--- /dev/null
+++ b/js/src/views/Status/reducers/mining.js
@@ -0,0 +1,66 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { handleActions } from 'redux-actions';
+
+const initialState = {
+  author: 'loading...',
+  extraData: 'loading...',
+  defaultExtraData: '0x01',
+  minGasPrice: 'loading...',
+  gasFloorTarget: 'loading...'
+};
+
+export const actionHandlers = {
+
+  'update author' (state, action) {
+    return {
+      ...state,
+      author: `${action.payload}`
+    };
+  },
+
+  'update minGasPrice' (state, action) {
+    return {
+      ...state,
+      minGasPrice: `${action.payload}`
+    };
+  },
+
+  'update gasFloorTarget' (state, action) {
+    return {
+      ...state,
+      gasFloorTarget: `${action.payload}`
+    };
+  },
+
+  'update extraData' (state, action) {
+    return {
+      ...state,
+      extraData: `${action.payload}`
+    };
+  },
+
+  'update defaultExtraData' (state, action) {
+    return {
+      ...state,
+      defaultExtraData: `${action.payload}`
+    };
+  }
+
+};
+
+export default handleActions(actionHandlers, initialState);
diff --git a/js/src/views/Status/reducers/rpc.js b/js/src/views/Status/reducers/rpc.js
new file mode 100644
index 0000000000000000000000000000000000000000..e2676260b534599e0b750af1c08765531fac76eb
--- /dev/null
+++ b/js/src/views/Status/reducers/rpc.js
@@ -0,0 +1,64 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { handleActions } from 'redux-actions';
+import rpcMetods from '../data/rpc.json';
+
+const initialState = {
+  prevCalls: [],
+  callNo: 1,
+  selectedMethod: rpcMetods.methods[0]
+};
+
+export const actionHandlers = {
+
+  'add rpcResponse' (state, action) {
+    const calls = [action.payload].concat(state.prevCalls);
+    const maxCalls = 64;
+    return {
+      ...state,
+      callNo: state.callNo + 1,
+      prevCalls: calls.slice(0, maxCalls)
+    };
+  },
+
+  'sync rpcStateFromLocalStorage' (state, action) {
+    return {
+      ...state,
+      prevCalls: action.payload.prevCalls,
+      callNo: action.payload.callNo,
+      selectedMethod: action.payload.selectedMethod
+    };
+  },
+
+  'reset rpcPrevCalls' (state, action) {
+    return {
+      ...state,
+      callNo: 1,
+      prevCalls: []
+    };
+  },
+
+  'select rpcMethod' (state, action) {
+    return {
+      ...state,
+      selectedMethod: action.payload
+    };
+  }
+
+};
+
+export default handleActions(actionHandlers, initialState);
diff --git a/js/src/views/Status/reducers/settings.js b/js/src/views/Status/reducers/settings.js
new file mode 100644
index 0000000000000000000000000000000000000000..ae6582b02f3b2dd446dc7c7285b6bdce25be4c15
--- /dev/null
+++ b/js/src/views/Status/reducers/settings.js
@@ -0,0 +1,60 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { handleActions } from 'redux-actions';
+
+const initialState = {
+  chain: 'loading...',
+  networkPort: 0,
+  maxPeers: 0,
+  rpcEnabled: false,
+  rpcInterface: '-',
+  rpcPort: 0
+};
+
+export default handleActions({
+  'update netChain' (state, action) {
+    return {
+      ...state,
+      chain: action.payload
+    };
+  },
+
+  'update netPort' (state, action) {
+    return {
+      ...state,
+      networkPort: action.payload
+    };
+  },
+
+  'update netPeers' (state, action) {
+    return {
+      ...state,
+      maxPeers: action.payload.max
+    };
+  },
+
+  'update rpcSettings' (state, action) {
+    const rpc = action.payload;
+
+    return {
+      ...state,
+      rpcEnabled: rpc.enabled,
+      rpcInterface: rpc.interface,
+      rpcPort: rpc.port
+    };
+  }
+}, initialState);
diff --git a/js/src/views/Status/reducers/status.js b/js/src/views/Status/reducers/status.js
new file mode 100644
index 0000000000000000000000000000000000000000..f6fec9ce28151fef47673a29de55bcf7ca27edd5
--- /dev/null
+++ b/js/src/views/Status/reducers/status.js
@@ -0,0 +1,92 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { handleActions } from 'redux-actions';
+
+const initialState = {
+  error: false,
+  noOfErrors: 0,
+  name: 'My node',
+  bestBlock: 'loading...',
+  hashrate: 'loading...',
+  connectedPeers: 0,
+  activePeers: 0,
+  peers: 0,
+  accounts: [],
+  version: '-'
+};
+
+export default handleActions({
+  error (state, action) {
+    return {
+      ...state,
+      disconnected: (action.payload.message === 'Invalid JSON RPC response: ""'),
+      noOfErrors: state.noOfErrors + 1
+    };
+  },
+
+  'update blockNumber' (state, action) {
+    return {
+      ...resetError(state),
+      bestBlock: `${action.payload}`
+    };
+  },
+
+  'update hashrate' (state, action) {
+    return {
+      ...resetError(state),
+      hashrate: `${action.payload}`
+    };
+  },
+
+  'update netPeers' (state, action) {
+    return {
+      ...state,
+      connectedPeers: action.payload.connected,
+      activePeers: action.payload.active
+    };
+  },
+
+  'update version' (state, action) {
+    return {
+      ...resetError(state),
+      version: action.payload
+    };
+  },
+
+  'update accounts' (state, action) {
+    return {
+      ...resetError(state),
+      accounts: action.payload
+    };
+  },
+
+  'update nodeName' (state, action) {
+    return {
+      ...resetError(state),
+      name: action.payload || ' '
+    };
+  }
+
+}, initialState);
+
+function resetError (state) {
+  return {
+    ...state,
+    disconnected: false,
+    noOfErrors: 0
+  };
+}
diff --git a/js/src/views/Status/status.css b/js/src/views/Status/status.css
new file mode 100644
index 0000000000000000000000000000000000000000..0ed554ae6457412e55a0ea936d72c85c8183ed53
--- /dev/null
+++ b/js/src/views/Status/status.css
@@ -0,0 +1,18 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.container {
+}
diff --git a/js/src/views/Status/status.js b/js/src/views/Status/status.js
new file mode 100644
index 0000000000000000000000000000000000000000..881c125ba018ba0bcdeeec0d4dbf4ee76ac19ce5
--- /dev/null
+++ b/js/src/views/Status/status.js
@@ -0,0 +1,37 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import { Actionbar, Page } from '../../ui';
+
+import StatusPage from './containers/StatusPage';
+
+import styles from './status.css';
+
+export default class Status extends Component {
+  render () {
+    return (
+      <div className={ styles.container }>
+        <Actionbar
+          title='status' />
+        <Page>
+          <StatusPage />
+        </Page>
+      </div>
+    );
+  }
+}
diff --git a/js/src/views/Status/util/error.js b/js/src/views/Status/util/error.js
new file mode 100644
index 0000000000000000000000000000000000000000..8b680204e7ea674f7bb2be84bb2b221e85b73fe7
--- /dev/null
+++ b/js/src/views/Status/util/error.js
@@ -0,0 +1,30 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function filterErrors (xs) {
+  return xs.filter(isError);
+}
+
+export function hasErrors (xs) {
+  if (!xs) {
+    return;
+  }
+  return !!xs.find(isError);
+}
+
+export function isError (x) {
+  return x instanceof Error;
+}
diff --git a/js/src/views/Status/util/error.spec.js b/js/src/views/Status/util/error.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..f3ba98cc8a56e967aa24b27cd0925b1a982987eb
--- /dev/null
+++ b/js/src/views/Status/util/error.spec.js
@@ -0,0 +1,109 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import sinon from 'sinon';
+import * as ErrorUtil from './error';
+
+describe('util/error', () => {
+  beforeEach('spy on isError', () => {
+    sinon.spy(ErrorUtil, 'isError');
+  });
+
+  afterEach('spy on isError', () => {
+    ErrorUtil.isError.restore();
+  });
+
+  describe('filterErrors', () => {
+    const ERROR1 = new Error('abc');
+    const ERROR2 = new Error('def');
+    const INPUT = [ERROR1, 'ghi', ERROR2, 'jkl'];
+    const ERRORS = [ERROR1, ERROR2];
+
+    it('should return errors in the array', () => {
+      expect(ErrorUtil.filterErrors(INPUT)).to.deep.equal(ERRORS);
+    });
+  });
+
+  describe('hasErrors', () => {
+    it('should return undefined and not invoke isError when null is passed', () => {
+      // given
+      const xs = null;
+
+      // when
+      const res = ErrorUtil.hasErrors(xs);
+
+      // then
+      expect(ErrorUtil.isError.called).to.be.false;
+      expect(res).to.be.undefined;
+    });
+
+    it('should return true and invoke isError when at least one error object is passed', () => {
+      // given
+      const arg1 = 'test string';
+      const arg2 = new Error();
+      const xs = [arg1, arg2];
+
+      // when
+      const res = ErrorUtil.hasErrors(xs);
+
+      // then
+      // todo [adgo] - 30.04.2016 - fix and uncomment
+      // expect(ErrorUtil.isError.calledWith(arg1)).to.be.true;
+      // expect(ErrorUtil.isError.calledWith(arg2)).to.be.true;
+      expect(res).to.be.true;
+    });
+
+    it('should return false and invoke isError when non error objects are passed', () => {
+      // given
+      const arg1 = 'test string';
+      const arg2 = 123;
+      const xs = [arg1, arg2];
+
+      // when
+      const res = ErrorUtil.hasErrors(xs);
+
+      // then
+      // todo [adgo] - 30.04.2016 - fix and uncomment
+      // expect(ErrorUtil.isError.calledWith(arg1)).to.be.true;
+      // expect(ErrorUtil.isError.calledWith(arg2)).to.be.true;
+      expect(res).to.be.false;
+    });
+  });
+
+  describe('isError', () => {
+    it('should return false when non error object is passed', () => {
+      // given
+      const arg = '';
+
+      // when
+      const res = ErrorUtil.isError(arg);
+
+      // then
+      expect(res).to.be.false;
+    });
+
+    it('should return true when error object is passed', () => {
+      // given
+      const arg = new Error();
+
+      // when
+      const res = ErrorUtil.isError(arg);
+
+      // then
+      expect(res).to.be.true;
+    });
+  });
+});
diff --git a/js/src/views/Status/util/index.js b/js/src/views/Status/util/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..9194cfd944f11b5cde4e39416c73802e1d65887c
--- /dev/null
+++ b/js/src/views/Status/util/index.js
@@ -0,0 +1,38 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export function toPromise (fn) {
+  return new Promise((resolve, reject) => {
+    fn((err, res) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(res);
+      }
+    });
+  });
+}
+
+export function stringifyIfObject (any) {
+  if (typeof any === 'object') {
+    any = JSON.stringify(any);
+  }
+  return any;
+}
+
+export function identity (x) {
+  return x;
+}
diff --git a/js/src/views/Status/util/index.spec.js b/js/src/views/Status/util/index.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..e648646c1f1f99d22b5d5fcdab7d135f1e42ecf3
--- /dev/null
+++ b/js/src/views/Status/util/index.spec.js
@@ -0,0 +1,51 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { toPromise, identity } from './';
+
+describe('util', () => {
+  describe('toPromise', () => {
+    it('rejects on error result', () => {
+      const ERROR = new Error();
+      const FN = function (callback) {
+        callback(ERROR);
+      };
+
+      return toPromise(FN).catch(err => {
+        expect(err).to.equal(ERROR);
+      });
+    });
+
+    it('resolves on success result', () => {
+      const SUCCESS = 'ok, we are good';
+      const FN = function (callback) {
+        callback(null, SUCCESS);
+      };
+
+      return toPromise(FN).then(success => {
+        expect(success).to.equal(SUCCESS);
+      });
+    });
+  });
+
+  describe('identity', () => {
+    it('returns the value passed in', () => {
+      const TEST = { abc: 'def' };
+
+      expect(identity(TEST)).to.deep.equal(TEST);
+    });
+  });
+});
diff --git a/js/src/views/Status/util/react.js b/js/src/views/Status/util/react.js
new file mode 100644
index 0000000000000000000000000000000000000000..095f6e6b0d16be2cc8677abb33b7cefb6dcf9cd2
--- /dev/null
+++ b/js/src/views/Status/util/react.js
@@ -0,0 +1,21 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { isValidElement } from 'react';
+
+export function isReactComponent (componentOrElem) {
+  return isValidElement(componentOrElem) && typeof componentOrElem.type === 'function';
+}
diff --git a/js/src/views/Status/util/rpc-md.js b/js/src/views/Status/util/rpc-md.js
new file mode 100644
index 0000000000000000000000000000000000000000..5c0a3f793be77ec3001c556f2886c9b6c75ab29d
--- /dev/null
+++ b/js/src/views/Status/util/rpc-md.js
@@ -0,0 +1,27 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { isPlainObject } from 'lodash';
+
+export function formatRpcMd (val) {
+  if (!isPlainObject(val)) {
+    return val;
+  }
+
+  return val.description + Object.keys(val.details)
+                            .map(key => `- \`${key}\`: ${val.details[key]}`)
+                            .join('\n');
+}
diff --git a/js/src/views/index.js b/js/src/views/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0818c88996585448ab20a2b3081be4f37cb19376
--- /dev/null
+++ b/js/src/views/index.js
@@ -0,0 +1,47 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Account from './Account';
+import Accounts from './Accounts';
+import Address from './Address';
+import Addresses from './Addresses';
+import Application from './Application';
+import Contract from './Contract';
+import Contracts from './Contracts';
+import Dapp from './Dapp';
+import Dapps from './Dapps';
+import ParityBar from './ParityBar';
+import Settings, { SettingsBackground, SettingsViews } from './Settings';
+import Signer from './Signer';
+import Status from './Status';
+
+export {
+  Account,
+  Accounts,
+  Address,
+  Addresses,
+  Application,
+  Contract,
+  Contracts,
+  Dapp,
+  Dapps,
+  ParityBar,
+  Settings,
+  SettingsBackground,
+  SettingsViews,
+  Signer,
+  Status
+};
diff --git a/js/test/babel.js b/js/test/babel.js
new file mode 100644
index 0000000000000000000000000000000000000000..fc37b94bfd2f6f41ca8f207ec6fcbaba13cd5d15
--- /dev/null
+++ b/js/test/babel.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+require('babel-register')();
diff --git a/js/test/e2e/ethapi.js b/js/test/e2e/ethapi.js
new file mode 100644
index 0000000000000000000000000000000000000000..1fa3da79742d825e5d6c33f2614fb315f967472e
--- /dev/null
+++ b/js/test/e2e/ethapi.js
@@ -0,0 +1,33 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import Api from '../../src/api';
+
+function createApi (transport) {
+  if (process.env.DEBUG) {
+    transport.setDebug(true);
+  }
+
+  return new Api(transport);
+}
+
+export function createHttpApi () {
+  return createApi(new Api.Transport.Http('http://localhost:8545'));
+}
+
+export function createWsApi () {
+  return createApi(new Api.Transport.Ws('ws://localhost:8546'));
+}
diff --git a/js/test/mocha.config.js b/js/test/mocha.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..28d2ac2a55f1ec411b55175626c05438e9b801f2
--- /dev/null
+++ b/js/test/mocha.config.js
@@ -0,0 +1,45 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import 'isomorphic-fetch';
+
+import es6Promise from 'es6-promise';
+es6Promise.polyfill();
+
+import 'mock-local-storage';
+
+import chai from 'chai';
+import chaiEnzyme from 'chai-enzyme';
+import sinonChai from 'sinon-chai';
+import { w3cwebsocket } from 'websocket';
+import jsdom from 'jsdom';
+
+chai.use(chaiEnzyme());
+chai.use(sinonChai);
+
+// expose expect to global so we won't have to manually import & define it in every test
+global.expect = chai.expect;
+global.WebSocket = w3cwebsocket;
+
+// setup jsdom
+global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
+global.window = document.defaultView;
+global.navigator = global.window.navigator;
+
+// attach mocked localStorage onto the window as exposed by jsdom
+global.window.localStorage = global.localStorage;
+
+module.exports = {};
diff --git a/js/test/mocha.opts b/js/test/mocha.opts
new file mode 100644
index 0000000000000000000000000000000000000000..6a1e05869c4a0e1f45b95a0338041e730a431b85
--- /dev/null
+++ b/js/test/mocha.opts
@@ -0,0 +1,3 @@
+-r ./test/babel
+-r ./test/mocha.config
+-r ignore-styles
diff --git a/js/test/mockRpc.js b/js/test/mockRpc.js
new file mode 100644
index 0000000000000000000000000000000000000000..800f483c9dae323ba25bc728b4768562d1ef3f9d
--- /dev/null
+++ b/js/test/mockRpc.js
@@ -0,0 +1,95 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import nock from 'nock';
+import { Server as MockWsServer } from 'mock-socket';
+
+import { isFunction } from '../src/api/util/types';
+
+export const TEST_HTTP_URL = 'http://localhost:6688';
+export const TEST_WS_URL = 'ws://localhost:8866';
+
+export function mockHttp (requests) {
+  let scope = nock(TEST_HTTP_URL);
+
+  requests.forEach((request) => {
+    scope = scope
+      .post('/')
+      .reply(request.code || 200, (uri, body) => {
+        if (body.method !== request.method) {
+          return {
+            error: `Invalid method ${body.method}, expected ${request.method}`
+          };
+        }
+
+        scope.body = scope.body || {};
+        scope.body[request.method] = body;
+
+        return request.reply;
+      });
+  });
+
+  return scope;
+}
+
+export function mockWs (requests) {
+  const scope = { requests: 0, body: {} };
+  let mockServer = new MockWsServer(TEST_WS_URL);
+
+  scope.isDone = () => scope.requests === requests.length;
+  scope.stop = () => {
+    if (mockServer) {
+      mockServer.stop();
+      mockServer = null;
+    }
+  };
+
+  mockServer.on('message', (_body) => {
+    const body = JSON.parse(_body);
+    const request = requests[scope.requests];
+    const reply = request.reply;
+    const response = reply.error
+      ? { id: body.id, error: { code: reply.error.code, message: reply.error.message } }
+      : { id: body.id, result: reply };
+
+    scope.body[request.method] = body;
+    scope.requests++;
+
+    mockServer.send(JSON.stringify(response));
+  });
+
+  return scope;
+}
+
+export function endpointTest (instance, moduleId, name) {
+  describe(name, () => {
+    it(`has the ${moduleId}.${name} endpoint`, () => {
+      expect(isFunction(instance[moduleId][name])).to.be.ok;
+    });
+
+    it(`maps to ${moduleId}_${name} via RPC`, () => {
+      const scope = mockHttp([{ method: `${moduleId}_${name}`, reply: {} }]);
+
+      return instance[moduleId][name]()
+        .then(() => {
+          expect(scope.isDone()).to.be.true;
+        })
+        .catch(() => {
+          nock.cleanAll();
+        });
+    });
+  });
+}
diff --git a/js/test/types.js b/js/test/types.js
new file mode 100644
index 0000000000000000000000000000000000000000..73b0aa14e86336f95e7948636ebdf9e33ce5b1b7
--- /dev/null
+++ b/js/test/types.js
@@ -0,0 +1,42 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import { isInstanceOf } from '../src/api/util/types';
+
+export { isFunction, isInstanceOf } from '../src/api/util/types';
+export { isAddress } from '../src/abi/util/address';
+
+const ZEROS = '000000000000000000000000000000000000000000000000000000000000';
+
+export function isBigNumber (test) {
+  return isInstanceOf(test, BigNumber);
+}
+
+export function isBoolean (test) {
+  return Object.prototype.toString.call(test) === '[object Boolean]';
+}
+
+export function isHexNumber (_test) {
+  if (_test.substr(0, 2) !== '0x') {
+    return false;
+  }
+
+  const test = _test.substr(2);
+  const hex = `${ZEROS}${(new BigNumber(_test, 16)).toString(16)}`.slice(-1 * test.length);
+
+  return hex === test;
+}
diff --git a/js/webpack.config.js b/js/webpack.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..571ea5435083d5e7d3aa850631faef9c76a986bf
--- /dev/null
+++ b/js/webpack.config.js
@@ -0,0 +1,222 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const HappyPack = require('happypack');
+const path = require('path');
+const postcssImport = require('postcss-import');
+const postcssVars = require('postcss-simple-vars');
+const rucksack = require('rucksack-css');
+const webpack = require('webpack');
+const WebpackErrorNotificationPlugin = require('webpack-error-notification');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV || 'development';
+const isProd = ENV === 'production';
+const DEST = process.env.BUILD_DEST || '.build';
+
+module.exports = {
+  debug: !isProd,
+  cache: !isProd,
+  devtool: isProd ? '#eval' : '#cheap-module-eval-source-map',
+  context: path.join(__dirname, './src'),
+  entry: {
+    // dapps
+    'basiccoin': ['./dapps/basiccoin.js'],
+    'gavcoin': ['./dapps/gavcoin.js'],
+    'githubhint': ['./dapps/githubhint.js'],
+    'registry': ['./dapps/registry.js'],
+    'signaturereg': ['./dapps/signaturereg.js'],
+    'tokenreg': ['./dapps/tokenreg.js'],
+    // library
+    'parity': ['./parity.js'],
+    // app
+    'index': ['./index.js']
+  },
+  output: {
+    path: path.join(__dirname, DEST),
+    filename: '[name].js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loaders: [ 'happypack/loader?id=js' ]
+      },
+      {
+        test: /\.json$/,
+        loaders: ['json']
+      },
+      {
+        test: /\.html$/,
+        loader: 'file?name=[name].[ext]'
+      },
+
+      {
+        test: /\.css$/,
+        include: [/src/],
+        loaders: [ 'happypack/loader?id=css' ]
+      },
+      {
+        test: /\.css$/,
+        exclude: [/src/],
+        loader: 'style!css'
+      },
+      {
+        test: /\.less$/,
+        loaders: [
+          'style',
+          'css',
+          'less'
+        ]
+      },
+      {
+        test: /\.(png|jpg|)$/,
+        loader: 'file-loader'
+      },
+      {
+        test: /\.(woff(2)|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'file-loader'
+      }
+    ],
+    noParse: [
+      /node_modules\/sinon/
+    ]
+  },
+  resolve: {
+    root: path.join(__dirname, 'node_modules'),
+    fallback: path.join(__dirname, 'node_modules'),
+    extensions: ['', '.js', '.jsx'],
+    unsafeCache: true
+  },
+  resolveLoaders: {
+    root: path.join(__dirname, 'node_modules'),
+    fallback: path.join(__dirname, 'node_modules')
+  },
+  postcss: [
+    postcssImport({
+      addDependencyTo: webpack
+    }),
+    postcssVars({
+      unknown: function (node, name, result) {
+        node.warn(result, `Unknown variable ${name}`);
+      }
+    }),
+    rucksack({
+      autoprefixer: true
+    })
+  ],
+  plugins: (function () {
+    const plugins = [
+      new HappyPack({
+        id: 'css',
+        threads: 4,
+        loaders: [
+          'style',
+          'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+          'postcss'
+        ]
+      }),
+      new HappyPack({
+        id: 'js',
+        threads: 4,
+        loaders: isProd ? ['babel'] : [
+          'react-hot',
+          'babel?cacheDirectory=true'
+        ]
+      }),
+      new webpack.DllReferencePlugin({
+        context: '.',
+        manifest: require(`./${DEST}/vendor-manifest.json`)
+      }),
+      new CopyWebpackPlugin([{ from: './error_pages.css', to: 'styles.css' }], {}),
+      new WebpackErrorNotificationPlugin(),
+      new webpack.DefinePlugin({
+        'process.env': {
+          NODE_ENV: JSON.stringify(ENV),
+          RPC_ADDRESS: JSON.stringify(process.env.RPC_ADDRESS),
+          PARITY_URL: JSON.stringify(process.env.PARITY_URL),
+          LOGGING: JSON.stringify(!isProd)
+        }
+      })
+    ];
+
+    if (!isProd) {
+      plugins.push(
+        new webpack.optimize.CommonsChunkPlugin({
+          filename: 'commons.js',
+          name: 'commons'
+        })
+      );
+    }
+
+    if (isProd) {
+      plugins.push(
+        new webpack.optimize.CommonsChunkPlugin({
+          chunks: [ 'index' ],
+          name: 'commons'
+        })
+      );
+      plugins.push(
+        new webpack.optimize.CommonsChunkPlugin({
+          chunks: [ 'parity' ],
+          name: 'parity'
+        })
+      );
+
+      plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false));
+      plugins.push(new webpack.optimize.DedupePlugin());
+      plugins.push(new webpack.optimize.UglifyJsPlugin({
+        screwIe8: true,
+        compress: {
+          warnings: false
+        },
+        output: {
+          comments: false
+        }
+      }));
+    }
+
+    return plugins;
+  }()),
+  devServer: {
+    contentBase: `./${DEST}`,
+    historyApiFallback: false,
+    quiet: false,
+    hot: !isProd,
+    proxy: {
+      '/api/*': {
+        target: 'http://127.0.0.1:8080',
+        changeOrigin: true
+      },
+      '/app/*': {
+        target: 'http://127.0.0.1:8080',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/app': ''
+        }
+      },
+      '/parity-utils/*': {
+        target: 'http://127.0.0.1:8080',
+        changeOrigin: true
+      },
+      '/rpc/*': {
+        target: 'http://localhost:8080',
+        changeOrigin: true
+      }
+    }
+  }
+};
diff --git a/js/webpack.vendor.js b/js/webpack.vendor.js
new file mode 100644
index 0000000000000000000000000000000000000000..a896cbfd82718c551bd49ace95a0d75c524938e2
--- /dev/null
+++ b/js/webpack.vendor.js
@@ -0,0 +1,84 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const webpack = require('webpack');
+
+const ENV = process.env.NODE_ENV || 'development';
+const isProd = ENV === 'production';
+const DEST = process.env.BUILD_DEST || '.build';
+
+let modules = [
+  'babel-polyfill',
+  'react', 'react-dom', 'react-redux', 'react-router',
+  'redux', 'redux-thunk', 'react-router-redux',
+  'lodash', 'material-ui', 'moment', 'blockies'
+];
+
+if (!isProd) {
+  modules = modules.concat([
+    'webpack-dev-server/client?http://localhost:3000',
+    'react-hot-loader', 'core-js', 'core-js/library'
+  ]);
+}
+
+module.exports = {
+  entry: {
+    vendor: modules
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.json$/,
+        loaders: ['json']
+      }
+    ]
+  },
+  output: {
+    filename: '[name].js',
+    path: `${DEST}/`,
+    library: '[name]_lib'
+  },
+  plugins: (function () {
+    const plugins = [
+      new webpack.DllPlugin({
+        name: '[name]_lib',
+        path: `${DEST}/[name]-manifest.json`
+      }),
+
+      new webpack.DefinePlugin({
+        'process.env': {
+          NODE_ENV: JSON.stringify(ENV)
+        }
+      })
+    ];
+
+    if (isProd) {
+      plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false));
+      plugins.push(new webpack.optimize.DedupePlugin());
+      plugins.push(new webpack.optimize.UglifyJsPlugin({
+        screwIe8: true,
+        compress: {
+          warnings: false
+        },
+        output: {
+          comments: false
+        }
+      }));
+    }
+
+    return plugins;
+  }())
+};