From e216eab16bda2b44fed32db18bc97963b6c999f0 Mon Sep 17 00:00:00 2001
From: Nate Lapinski <n4t311@gmail.com>
Date: Thu, 14 May 2020 21:29:09 +0900
Subject: [PATCH 1/4] Check if Contract.address is set before displaying any UI
 input elements.

Update some html/css to hide input elements by default,
and display a welcome message instead.
---
 .../templates/Crypto Pizzas/app/app.css       |  2 +-
 .../templates/Crypto Pizzas/app/app.html      |  5 +++--
 .../editor/templates/Crypto Pizzas/app/app.js | 17 ++++++++++++++++
 .../editor/templates/Hello World/app/app.css  |  4 ++--
 .../editor/templates/Hello World/app/app.html |  8 +++++++-
 .../editor/templates/Hello World/app/app.js   | 20 ++++++++++++++++++-
 6 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/packages/editor/templates/Crypto Pizzas/app/app.css b/packages/editor/templates/Crypto Pizzas/app/app.css
index b648cfa9..0f27a7e7 100755
--- a/packages/editor/templates/Crypto Pizzas/app/app.css	
+++ b/packages/editor/templates/Crypto Pizzas/app/app.css	
@@ -35,7 +35,7 @@ hr {
     opacity: .6;
 }
 
-.error {
+.error, .hidden {
     display: none;
 }
 
diff --git a/packages/editor/templates/Crypto Pizzas/app/app.html b/packages/editor/templates/Crypto Pizzas/app/app.html
index 71f45e89..3b4f7bdd 100755
--- a/packages/editor/templates/Crypto Pizzas/app/app.html	
+++ b/packages/editor/templates/Crypto Pizzas/app/app.html	
@@ -57,8 +57,9 @@ <h2>Create new CryptoPizza</h2>
                 </div>
 
                 <div class="input-container">
-                    <input type="text" id="create-name" placeholder="Enter name..." maxlength="20" />
-                    <button class="btn" id="button-create">Create</button>
+                    <input type="text" id="create-name" class="hidden" placeholder="Enter name..." maxlength="20" />
+                    <button class="btn hidden" id="button-create">Create</button>
+                    <h3 id="start-message">Please deploy (<img src="/static/img/rocket-ship.svg" color="#fff" height="14" width="14">) your contract to begin.</h3>
                 </div>
             </div>
 
diff --git a/packages/editor/templates/Crypto Pizzas/app/app.js b/packages/editor/templates/Crypto Pizzas/app/app.js
index 9b909311..375d4b8e 100755
--- a/packages/editor/templates/Crypto Pizzas/app/app.js	
+++ b/packages/editor/templates/Crypto Pizzas/app/app.js	
@@ -37,6 +37,10 @@ Pizza.prototype.init = function() {
 
     // Create the contract instance for the specific address provided in the configuration.
     this.instance = this.Contract.address ? contract_interface.at(this.Contract.address) :  { getPizzasByOwner: () => {} };
+
+    if (this.hasContractDeployed()) {
+        this.activateInputElements();
+    }
 }
 
 // Generate random DNA from string
@@ -351,6 +355,19 @@ Pizza.prototype.bindInputs = function() {
     });
 }
 
+// Show Input elements in app.html once the contract has been deployed,
+// and hide the starter message.
+Pizza.prototype.activateInputElements = function() {
+    $('#create-name').removeClass('hidden');
+    $('#button-create').removeClass('hidden');
+    $('#start-message').addClass('hidden');
+}
+
+// A contract will not have its address set until it has been deployed
+Pizza.prototype.hasContractDeployed = function() {
+    return this.instance && this.instance.address;
+};
+
 // Show status on bottom of the page when some action happens
 function showStatus(text) {
     var status = document.getElementById("status");
diff --git a/packages/editor/templates/Hello World/app/app.css b/packages/editor/templates/Hello World/app/app.css
index c203b507..910decc9 100755
--- a/packages/editor/templates/Hello World/app/app.css	
+++ b/packages/editor/templates/Hello World/app/app.css	
@@ -5,7 +5,7 @@ body {
     text-align: center;
 }
 
-.text {
+.text, .hidden {
     display: none;
 }
 
@@ -13,7 +13,7 @@ body {
     color: red;
 }
 
-.input-group {
+.input-group, .display-message {
     display: flex;
     flex-direction: column;
     align-items: center;
diff --git a/packages/editor/templates/Hello World/app/app.html b/packages/editor/templates/Hello World/app/app.html
index 096482fc..9d44040e 100755
--- a/packages/editor/templates/Hello World/app/app.html	
+++ b/packages/editor/templates/Hello World/app/app.html	
@@ -17,7 +17,7 @@ <h1 class="text message">Message:&nbsp;<span id="message"></span></h1>
         <h2 class="text blocknumber">Block number:&nbsp;<span id="blocknumber"></span></h2>
         <h2 class="text error">There was an error communicating with the contract.</h2>
         <!-- Form field for updating the message -->
-        <div id="create" class="tabcontent">
+        <div id="create" class="tabcontent hidden">
             <div class="input-group">
                 <h3>Update Message</h3>
                 <input type="text" id="message-input" placeholder="Enter new message..." />
@@ -27,5 +27,11 @@ <h3>Update Message</h3>
                 <div id="loader" style="display: none;"></div>
             </div>
         </div>
+        <!-- Initial display message until contract is deployed -->
+        <div class="tabcontent">
+            <div id="welcome-text" class="display-message">
+                <h3>Please deploy (<img src="/static/img/rocket-ship.svg" color="#fff" height="14" width="14">) your contract to begin.</h3>
+            </div>
+        </div>
     </body>
 </html>
diff --git a/packages/editor/templates/Hello World/app/app.js b/packages/editor/templates/Hello World/app/app.js
index 168fff69..d3af7f05 100755
--- a/packages/editor/templates/Hello World/app/app.js	
+++ b/packages/editor/templates/Hello World/app/app.js	
@@ -150,6 +150,19 @@ HelloWorld.prototype.bindButton = function() {
     });
 };
 
+// Show Input elements in app.html once the contract has been deployed,
+// and hide the starter message.
+HelloWorld.prototype.activateInputElements = function() {
+    $("#create").removeClass("hidden");
+    $("#welcome-text").removeClass("display-message");
+    $("#welcome-text").addClass("hidden");
+};
+
+// A contract will not have its address set until it has been deployed
+HelloWorld.prototype.hasContractDeployed = function() {
+    return this.instance && this.instance.address;
+};
+
 // JavaScript boilerplate to create the instance of the `HelloWorld` object
 // defined above, and show the HTML elements on the page:
 HelloWorld.prototype.main = function() {
@@ -160,7 +173,12 @@ HelloWorld.prototype.main = function() {
 
 HelloWorld.prototype.onReady = function() {
     this.init();
-    this.bindButton();
+    // Don't show interactive UI elements like input/button until
+    // the contract has been deployed.
+    if (this.hasContractDeployed()) {
+        this.activateInputElements();
+        this.bindButton();
+    }
     this.main();
 };
 

From 5c3d16e99d5ef6a31d23e780bc38bb8e96d09562 Mon Sep 17 00:00:00 2001
From: Nate Lapinski <n4t311@gmail.com>
Date: Sat, 6 Jun 2020 17:08:46 +0900
Subject: [PATCH 2/4] Update HelloWorld template to display a welcome message
 until the contract has been deployed.

---
 packages/editor/templates/Hello World/app/app.html | 13 +++++++++----
 packages/editor/templates/Hello World/app/app.js   |  8 ++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/editor/templates/Hello World/app/app.html b/packages/editor/templates/Hello World/app/app.html
index 9d44040e..dbf6f7a4 100755
--- a/packages/editor/templates/Hello World/app/app.html	
+++ b/packages/editor/templates/Hello World/app/app.html	
@@ -11,10 +11,15 @@
         <!-- STYLE -->
     </head>
     <body>
-        <!-- Displays message passed via JavaScript -->
-        <h1 class="text message">Message:&nbsp;<span id="message"></span></h1>
-        <!-- Displays blocknumber passed via JavaScript -->
-        <h2 class="text blocknumber">Block number:&nbsp;<span id="blocknumber"></span></h2>
+        <div id="message-container" class="hidden">
+            <!-- Displays message passed via JavaScript -->
+            <h1 class="text message">Message:&nbsp;<span id="message"></span></h1>
+            <!-- Displays blocknumber passed via JavaScript -->
+            <h2 class="text blocknumber">Block number:&nbsp;<span id="blocknumber"></span></h2>
+        </div>
+        <div id="welcome-container">
+            <h1>Welcome!</h1>
+        </div>
         <h2 class="text error">There was an error communicating with the contract.</h2>
         <!-- Form field for updating the message -->
         <div id="create" class="tabcontent hidden">
diff --git a/packages/editor/templates/Hello World/app/app.js b/packages/editor/templates/Hello World/app/app.js
index d3af7f05..bec9243c 100755
--- a/packages/editor/templates/Hello World/app/app.js	
+++ b/packages/editor/templates/Hello World/app/app.js	
@@ -158,6 +158,13 @@ HelloWorld.prototype.activateInputElements = function() {
     $("#welcome-text").addClass("hidden");
 };
 
+// Remove the welcome message, and display the message and block number
+// fields
+HelloWorld.prototype.updateDisplayMessage = function() {
+    $("#message-container").removeClass("hidden");
+    $("#welcome-container").addClass("hidden");
+}
+
 // A contract will not have its address set until it has been deployed
 HelloWorld.prototype.hasContractDeployed = function() {
     return this.instance && this.instance.address;
@@ -177,6 +184,7 @@ HelloWorld.prototype.onReady = function() {
     // the contract has been deployed.
     if (this.hasContractDeployed()) {
         this.activateInputElements();
+        this.updateDisplayMessage();
         this.bindButton();
     }
     this.main();

From c234e6c806ce0717698e56a1df1af1e6982583eb Mon Sep 17 00:00:00 2001
From: Nate Lapinski <n4t311@gmail.com>
Date: Sat, 6 Jun 2020 17:32:25 +0900
Subject: [PATCH 3/4] Update Crypto Pizza template to display welcome message
 until contract has been deployed

---
 packages/editor/templates/Crypto Pizzas/app/app.html | 11 +++++++----
 packages/editor/templates/Crypto Pizzas/app/app.js   |  6 ++++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/editor/templates/Crypto Pizzas/app/app.html b/packages/editor/templates/Crypto Pizzas/app/app.html
index 3b4f7bdd..94a602ad 100755
--- a/packages/editor/templates/Crypto Pizzas/app/app.html	
+++ b/packages/editor/templates/Crypto Pizzas/app/app.html	
@@ -31,8 +31,12 @@
     </head>
     <body>
         <div id="status"></div>
+        <div id="welcome-container" class="container">
+           <h1>Welcome!</h1>
+           <h3 id="start-message">Please deploy (<img src="/static/img/rocket-ship.svg" color="#fff" height="14" width="14">) your contract to begin.</h3>
+        </div>
 
-        <div class="container">
+        <div id="main-container" class="container hidden">
             <!-- Header -->
             <header>
                 <h1>CryptoPizza</h1>
@@ -57,9 +61,8 @@ <h2>Create new CryptoPizza</h2>
                 </div>
 
                 <div class="input-container">
-                    <input type="text" id="create-name" class="hidden" placeholder="Enter name..." maxlength="20" />
-                    <button class="btn hidden" id="button-create">Create</button>
-                    <h3 id="start-message">Please deploy (<img src="/static/img/rocket-ship.svg" color="#fff" height="14" width="14">) your contract to begin.</h3>
+                    <input type="text" id="create-name" placeholder="Enter name..." maxlength="20" />
+                    <button class="btn" id="button-create">Create</button>
                 </div>
             </div>
 
diff --git a/packages/editor/templates/Crypto Pizzas/app/app.js b/packages/editor/templates/Crypto Pizzas/app/app.js
index 375d4b8e..11691285 100755
--- a/packages/editor/templates/Crypto Pizzas/app/app.js	
+++ b/packages/editor/templates/Crypto Pizzas/app/app.js	
@@ -39,6 +39,7 @@ Pizza.prototype.init = function() {
     this.instance = this.Contract.address ? contract_interface.at(this.Contract.address) :  { getPizzasByOwner: () => {} };
 
     if (this.hasContractDeployed()) {
+        this.updateDisplayMessage();
         this.activateInputElements();
     }
 }
@@ -363,6 +364,11 @@ Pizza.prototype.activateInputElements = function() {
     $('#start-message').addClass('hidden');
 }
 
+Pizza.prototype.updateDisplayMessage = function() {
+    $('#welcome-container').addClass('hidden');
+    $('#main-container').removeClass('hidden');
+}
+
 // A contract will not have its address set until it has been deployed
 Pizza.prototype.hasContractDeployed = function() {
     return this.instance && this.instance.address;

From a3f6d4cc770d3bed4e9a71c48bef1cb94366892a Mon Sep 17 00:00:00 2001
From: Nate Lapinski <n4t311@gmail.com>
Date: Sun, 7 Jun 2020 15:53:47 +0900
Subject: [PATCH 4/4] Add welcome message to Coin template. Refactor all
 templates to follow a welcome content / main content structure.

---
 packages/editor/templates/Coin/app/app.css    |  4 +
 packages/editor/templates/Coin/app/app.html   | 82 ++++++++++---------
 packages/editor/templates/Coin/app/app.js     | 27 +++++-
 .../editor/templates/Crypto Pizzas/app/app.js | 19 +++--
 .../editor/templates/Hello World/app/app.html | 39 ++++-----
 .../editor/templates/Hello World/app/app.js   | 29 ++++---
 6 files changed, 113 insertions(+), 87 deletions(-)

diff --git a/packages/editor/templates/Coin/app/app.css b/packages/editor/templates/Coin/app/app.css
index 67421c16..0f4d3c22 100755
--- a/packages/editor/templates/Coin/app/app.css
+++ b/packages/editor/templates/Coin/app/app.css
@@ -3,4 +3,8 @@ body {
     color: #FCE8DF;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     text-align: center;
+}
+
+.hidden {
+    display: none;
 }
\ No newline at end of file
diff --git a/packages/editor/templates/Coin/app/app.html b/packages/editor/templates/Coin/app/app.html
index 759ffc75..fef39385 100755
--- a/packages/editor/templates/Coin/app/app.html
+++ b/packages/editor/templates/Coin/app/app.html
@@ -1,46 +1,48 @@
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <script type="text/javascript" src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
+        <script type="text/javascript" src="https://unpkg.com/web3@0.20.5/dist/web3.min.js"></script>
+        <!-- The generated javascript and app.js will be substituted in below -->
+        <!-- JAVASCRIPT -->
 
-<head>
-    <meta charset="utf-8">
-    <script type="text/javascript" src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
-    <script type="text/javascript" src="https://unpkg.com/web3@0.20.5/dist/web3.min.js"></script>
-    <!-- The generated javascript and app.js will be substituted in below -->
-    <!-- JAVASCRIPT -->
-
-    <!-- The app.css contents will be substituted in below -->
-    <!-- STYLE -->
-</head>
-
-<body>
-    <!-- Form fields for creating new coins -->
-    <div id="create" class="tabcontent">
-        <h2>Create new coins</h2>
-        <div class="input-group">
-            <h3>Address</h3>
-            <input type="text" id="create-address" placeholder="Enter address..." />
-        </div>
-        <div class="input-group">
-            <h3>Amount</h3>
-            <input type="number" id="create-amount" placeholder="Enter amount..." />
-        </div>
-        <div class="input-group">
-            <button class="btn" id="button-create">Send</button>
+        <!-- The app.css contents will be substituted in below -->
+        <!-- STYLE -->
+    </head>
+    <body>
+        <div id="welcome-container">
+            <h1>Welcome!</h1>
+            <h3>Please deploy (<img src="/static/img/rocket-ship.svg" color="#fff" height="14" width="14">) your contract to begin.</h3>
         </div>
-    </div>
-    <!-- Form fields for checking wallet balances -->
-    <div id="balances" class="tabcontent">
-        <h2>Check balance of wallet</h2>
-        <div class="input-group">
-            <h3>Address</h3>
-            <input type="text" id="balance-address" placeholder="Enter address..." />
+        <div id="main-container" class="hidden">
+            <!-- Form fields for creating new coins -->
+            <div id="create" class="tabcontent">
+                <h2>Create new coins</h2>
+                <div class="input-group">
+                    <h3>Address</h3>
+                    <input type="text" id="create-address" placeholder="Enter address..." />
+                </div>
+                <div class="input-group">
+                    <h3>Amount</h3>
+                    <input type="number" id="create-amount" placeholder="Enter amount..." />
+                </div>
+                <div class="input-group">
+                    <button class="btn" id="button-create">Send</button>
+                </div>
+            </div>
+            <!-- Form fields for checking wallet balances -->
+            <div id="balances" class="tabcontent">
+                <h2>Check balance of wallet</h2>
+                <div class="input-group">
+                    <h3>Address</h3>
+                    <input type="text" id="balance-address" placeholder="Enter address..." />
+                </div>
+                <div class="input-group">
+                    <button class="btn" id="button-check">Check balance</button>
+                </div>
+            </div>
+            <h1 class="text message">Balance:&nbsp;<span id="message"></span></h1>
         </div>
-        <div class="input-group">
-            <button class="btn" id="button-check">Check balance</button>
-        </div>
-    </div>
-
-    <h1 class="text message">Balance:&nbsp;<span id="message"></span></h1>
-</body>
-
+    </body>
 </html>
\ No newline at end of file
diff --git a/packages/editor/templates/Coin/app/app.js b/packages/editor/templates/Coin/app/app.js
index 70f566a0..43f0824c 100755
--- a/packages/editor/templates/Coin/app/app.js
+++ b/packages/editor/templates/Coin/app/app.js
@@ -1,5 +1,5 @@
 // The object 'Contracts' will be injected here, which contains all data for all contracts, keyed on contract name:
-// Contracts['HelloWorld'] = {
+// Contracts['Coin'] = {
 //  abi: [],
 //  address: "0x..",
 //  endpoint: "http://...."
@@ -158,10 +158,33 @@ Coin.prototype.bindButtons = function() {
     }); 
 }
 
+// Remove the welcome content, and display the main content.
+// Called once a contract has been deployed
+Coin.prototype.updateDisplayContent = function() {
+    this.hideWelcomeContent();
+    this.showMainContent();
+};
+
+// A contract will not have its address set until it has been deployed
+Coin.prototype.hasContractDeployed = function() {
+    return this.instance && this.instance.address;
+};
+
+Coin.prototype.hideWelcomeContent = function() {
+    $('#welcome-container').addClass('hidden');
+};
+
+Coin.prototype.showMainContent = function() {
+    $('#main-container').removeClass('hidden');
+};
+
 // Create the instance of the `Coin` object 
 Coin.prototype.onReady = function() {
-    this.bindButtons();
     this.init();
+    if (this.hasContractDeployed()) {
+        this.updateDisplayContent();
+        this.bindButtons();
+    }
 };
 
 if(typeof(Contracts) === "undefined") var Contracts={ Coin: { abi: [] }};
diff --git a/packages/editor/templates/Crypto Pizzas/app/app.js b/packages/editor/templates/Crypto Pizzas/app/app.js
index 11691285..dfe404f9 100755
--- a/packages/editor/templates/Crypto Pizzas/app/app.js	
+++ b/packages/editor/templates/Crypto Pizzas/app/app.js	
@@ -39,8 +39,7 @@ Pizza.prototype.init = function() {
     this.instance = this.Contract.address ? contract_interface.at(this.Contract.address) :  { getPizzasByOwner: () => {} };
 
     if (this.hasContractDeployed()) {
-        this.updateDisplayMessage();
-        this.activateInputElements();
+        this.updateDisplayContent();
     }
 }
 
@@ -356,16 +355,18 @@ Pizza.prototype.bindInputs = function() {
     });
 }
 
-// Show Input elements in app.html once the contract has been deployed,
-// and hide the starter message.
-Pizza.prototype.activateInputElements = function() {
-    $('#create-name').removeClass('hidden');
-    $('#button-create').removeClass('hidden');
-    $('#start-message').addClass('hidden');
+// Remove the welcome content, and display the main content.
+// Called once a contract has been deployed
+Pizza.prototype.updateDisplayContent = function() {
+    this.hideWelcomeContent();
+    this.showMainContent();
 }
 
-Pizza.prototype.updateDisplayMessage = function() {
+Pizza.prototype.hideWelcomeContent = function() {
     $('#welcome-container').addClass('hidden');
+}
+
+Pizza.prototype.showMainContent = function() {
     $('#main-container').removeClass('hidden');
 }
 
diff --git a/packages/editor/templates/Hello World/app/app.html b/packages/editor/templates/Hello World/app/app.html
index dbf6f7a4..a3a6546a 100755
--- a/packages/editor/templates/Hello World/app/app.html	
+++ b/packages/editor/templates/Hello World/app/app.html	
@@ -11,31 +11,28 @@
         <!-- STYLE -->
     </head>
     <body>
-        <div id="message-container" class="hidden">
-            <!-- Displays message passed via JavaScript -->
-            <h1 class="text message">Message:&nbsp;<span id="message"></span></h1>
-            <!-- Displays blocknumber passed via JavaScript -->
-            <h2 class="text blocknumber">Block number:&nbsp;<span id="blocknumber"></span></h2>
-        </div>
         <div id="welcome-container">
             <h1>Welcome!</h1>
+            <h3>Please deploy (<img src="/static/img/rocket-ship.svg" color="#fff" height="14" width="14">) your contract to begin.</h3>
         </div>
-        <h2 class="text error">There was an error communicating with the contract.</h2>
-        <!-- Form field for updating the message -->
-        <div id="create" class="tabcontent hidden">
-            <div class="input-group">
-                <h3>Update Message</h3>
-                <input type="text" id="message-input" placeholder="Enter new message..." />
-            </div>
-            <div class="input-group">
-                <button class="btn" id="message-button">Send</button>
-                <div id="loader" style="display: none;"></div>
+        <div id="main-container" class="hidden">
+            <div>
+                <!-- Displays message passed via JavaScript -->
+                <h1 class="text message">Message:&nbsp;<span id="message"></span></h1>
+                <!-- Displays blocknumber passed via JavaScript -->
+                <h2 class="text blocknumber">Block number:&nbsp;<span id="blocknumber"></span></h2>
             </div>
-        </div>
-        <!-- Initial display message until contract is deployed -->
-        <div class="tabcontent">
-            <div id="welcome-text" class="display-message">
-                <h3>Please deploy (<img src="/static/img/rocket-ship.svg" color="#fff" height="14" width="14">) your contract to begin.</h3>
+            <h2 class="text error">There was an error communicating with the contract.</h2>
+            <!-- Form field for updating the message -->
+            <div id="create" class="tabcontent">
+                <div class="input-group">
+                    <h3>Update Message</h3>
+                    <input type="text" id="message-input" placeholder="Enter new message..." />
+                </div>
+                <div class="input-group">
+                    <button class="btn" id="message-button">Send</button>
+                    <div id="loader" style="display: none;"></div>
+                </div>
             </div>
         </div>
     </body>
diff --git a/packages/editor/templates/Hello World/app/app.js b/packages/editor/templates/Hello World/app/app.js
index bec9243c..efbe1998 100755
--- a/packages/editor/templates/Hello World/app/app.js	
+++ b/packages/editor/templates/Hello World/app/app.js	
@@ -150,26 +150,26 @@ HelloWorld.prototype.bindButton = function() {
     });
 };
 
-// Show Input elements in app.html once the contract has been deployed,
-// and hide the starter message.
-HelloWorld.prototype.activateInputElements = function() {
-    $("#create").removeClass("hidden");
-    $("#welcome-text").removeClass("display-message");
-    $("#welcome-text").addClass("hidden");
+// Remove the welcome content, and display the main content.
+// Called once a contract has been deployed
+HelloWorld.prototype.updateDisplayContent = function() {
+    this.hideWelcomeContent();
+    this.showMainContent();
 };
 
-// Remove the welcome message, and display the message and block number
-// fields
-HelloWorld.prototype.updateDisplayMessage = function() {
-    $("#message-container").removeClass("hidden");
-    $("#welcome-container").addClass("hidden");
-}
-
 // A contract will not have its address set until it has been deployed
 HelloWorld.prototype.hasContractDeployed = function() {
     return this.instance && this.instance.address;
 };
 
+HelloWorld.prototype.hideWelcomeContent = function() {
+    $('#welcome-container').addClass('hidden');
+};
+
+HelloWorld.prototype.showMainContent = function() {
+    $('#main-container').removeClass('hidden');
+};
+
 // JavaScript boilerplate to create the instance of the `HelloWorld` object
 // defined above, and show the HTML elements on the page:
 HelloWorld.prototype.main = function() {
@@ -183,8 +183,7 @@ HelloWorld.prototype.onReady = function() {
     // Don't show interactive UI elements like input/button until
     // the contract has been deployed.
     if (this.hasContractDeployed()) {
-        this.activateInputElements();
-        this.updateDisplayMessage();
+        this.updateDisplayContent();
         this.bindButton();
     }
     this.main();