get from address live + enhance styling

Author: jasonhtpham

public/global.css

@@ -2,10 +2,11 @@ html, body {
 	position: relative;
 	width: 100%;
 	height: 100%;
+    background-color: #2673b8;
 }
 
 body {
-	color: #333;
+	color: white;
 	margin: 0;
 	padding: 8px;
 	box-sizing: border-box;

src/App.svelte

@@ -32,6 +32,7 @@
   }
 
   const uploadToSC = async (e) => {
+    console.log(callerAddress);
     const ipfsHash = e.detail.path;
     //convert ipfsHash to bytes32 to fit the SC
 	  const hashToSend = hashToBytes32(ipfsHash);
@@ -89,7 +90,7 @@
   }
 
   function startApp() {
-	  etherGram = new web3.eth.Contract(ethergramABI,scAddress);
+    etherGram = new web3.eth.Contract(ethergramABI,scAddress);
   }
 
   window.addEventListener('load', async function() {
@@ -108,26 +109,30 @@
     var accounts = await web3.eth.getAccounts();
     callerAddress = accounts[0];
 
-    var accountInterval = setInterval(function() {
-      if (web3.eth.accounts[0] !== callerAddress) {
-        callerAddress = web3.eth.accounts[0];
+    var accountInterval = setInterval(async function() {
+      let accounts = await web3.eth.getAccounts();
+      if (accounts[0] !== callerAddress) {
+        callerAddress = accounts[0];
       }
     }, 100);
+
+    console.log(callerAddress);
   })
 
 
 </script>
 
 <style>
 	h1 {
-		color: rgb(59, 70, 168);
+		color: white;
     font-size: 80px;
     text-align: center;
-    background-color: azure
+    background-color: #31b3ca
 	}
 </style>
 
-<h1>Picture board DApp by Jason</h1>
+
+<h1 class="title">Picture board DApp by Jason</h1>
 
 
 {#if pages.postImage}

src/Upload.svelte

@@ -28,25 +28,30 @@
         const reader = new FileReader()
         return new Promise((resolve, reject) => {
             reader.onerror = () => {
-            reader.abort()
-            reject(`problem reading file ${file.name}`)
+                reader.abort()
+                reject(`problem reading file ${file.name}`)
             }
             reader.onload = () => {
-            resolve(reader.result)
+                resolve(reader.result)
             }
             reader.readAsDataURL(file)
     })
     }
 	
 </script>
 
-<h2>Upload your Images to Picture Board</h2>
-
-<img src={filePreview} alt="filepreview" />
-
-<form on:submit={onSubmit}>
-<input type="file" on:change={fileChange} />
-<input type="submit">
-</form>
-
-<input type="submit" on:click={() => dispatch("viewImage")} value="View Picture Board" />
+<h2 class="subtitle">Upload your Images to Picture Board</h2>
+<div class="preview">
+    <img src={filePreview} alt="filepreview" />
+</div>
+
+<div class="upload-form" id="upload-form">
+    <form on:submit={onSubmit}>
+        <input type="file" on:change={fileChange} />
+        <input type="submit">
+    </form>
+</div>
+
+<div class="view-image-button">
+    <input type="submit" on:click={() => dispatch("viewImage")} value="View Picture Board" />
+</div>

src/Uploading.svelte

@@ -1,8 +1,30 @@
 <style>
     h1 {
-        text-align: center;
         text-emphasis: 10;
     }
+
+    .loader-container{
+        text-align: center;
+    }
+
+    .loader {
+    display: inline-block;
+    border-bottom: 16px solid #31b3ca; 
+    border-top: 16px solid white; /*#2673b8*/
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+    }
+
 </style>
 
-<h1>Please wait...</h1>
+<div class="loader-container">
+    <div class="loader"></div>
+    <h1>Please wait...</h1>
+</div>

src/ViewImage.svelte

@@ -15,25 +15,26 @@
     }
 </script>
 
-<h2>Picture Board</h2>
+<h2 class="subtitle">Picture Board</h2>
 
     <p>Double-click on image to give it a like. <br/>
     And, feel free to drop your comments and submit them.</p>
 
 <input type="submit" value="Back" on:click={() => dispatch("back")}/>
 
-<ul>
 {#each postsFromSC as post}
-<li>
-    <form on:dblclick={clap} on:submit={commentOnPost} name={post.image}>
-        <img src="https://ipfs.infura.io/ipfs/{post.image}" alt={post.image}/>
-        <input type="text" placeholder="Comment your thoughts about this image" maxlength="32"/> <input type="submit">
-    </form>
-    <p>{post.clapCounts} Like(s) </p>
-    <p><b>Comments ({post.comment.length})</b></p>
-    {#each post.comment as comment}
-        <p>{comment} <br /> </p>
-    {/each}
-</li>
-{/each}
-</ul>
+    <div class="post-box">
+        <form on:dblclick={clap} on:submit={commentOnPost} name={post.image}>
+            <img src="https://ipfs.infura.io/ipfs/{post.image}" alt={post.image}/>
+            <input type="text" placeholder="Comment your thoughts about this image" maxlength="32"/> <input type="submit">
+        </form>
+        <p>{post.clapCounts} Like(s) </p>
+        
+        <div class="comment-display">
+            <p><b>Comments ({post.comment.length})</b></p>
+            {#each post.comment as comment}
+                <p>{comment} <br /> </p>
+            {/each}
+        </div>
+    </div>
+{/each}