make some ux improvements

src/Contracts.svelte

@@ -7,18 +7,21 @@
   import ShipIt from './lib/shipit.json';
 
   const progress = tweened(0, {
-    duration: 300,
+    duration: 800,
     easing: cubicOut
   });
   const shipit = '0x76Ae5B6E75F6e05BcaD1028F78A83f974fc96A8B';
   let errorMessage = '';
   let successMessage = '';
   let contractAddress = '';
-  let contractApproved = true;
+  let contractApproved = false;
   let checked = false;
   let checksPending = false;
   let transferPending = false;
   let approvalPending = false;
+  let approvalRequired = false;
+  let revokeRequired = false;
+  let revokePending = false;
   let gasCalculation = [];
   let selectedStandard = 1;
   let gasPrice = 0;
@@ -47,6 +50,7 @@
       approvalPending = true;
       await $contracts.nft.methods.setApprovalForAll(shipit, true).send({from: $selectedAccount});
       contractApproved = true;
+      approvalRequired = false;
     } catch(e) {
       errorMessage = `Failed to approve contract: ${e.message}`;
       approvalPending = false;
@@ -54,6 +58,18 @@
     }
   }
 
+  const revokeShipIt = async () => {
+    try {
+      revokePending = true;
+      await $contracts.nft.methods.setApprovalForAll(shipit, false).send({from: $selectedAccount});
+      contractApproved = false;
+    } catch(e) {
+      errorMessage = `Failed to revoke contract: ${e.message}`;
+      revokePending = false;
+      return;
+    }
+  }
+
   const isApproved = async () => {
     return await $contracts.nft.methods.isApprovedForAll($selectedAccount, shipit).call({from: $selectedAccount});
   }
@@ -141,6 +157,7 @@
       let approved = await $contracts.nft.methods.isApprovedForAll($selectedAccount, shipit).call();
       if (!approved) {
         errorMessage = 'ShipIt requires approval to bulk transfer tokens; click the "Approve" button to view gas estimations and savings';
+        approvalRequired = true;
         checksPending = false;
         contractApproved = false;
         return;
@@ -305,22 +322,22 @@
         {#if checksPending}checking...{:else}Check{/if}
       </button>
     {/if}
-    {#if !contractApproved}
+    {#if revokeRequired}
+      <button class="button-primary" disabled={revokePending} on:click|preventDefault={revokeShipIt}>
+        {#if revokePending}revoking...{:else}Revoke{/if}
+      </button>
+    {/if}
+    {#if approvalRequired}
       <button class="button-primary" disabled={approvalPending} on:click|preventDefault={approveShipIt}>
         {#if approvalPending}pending...{:else}Approve{/if}
       </button>
     {/if}
   </form>
-
-  {#if $progress > 0 && $progress < 1}
   <div class="row">
-    <div class="eight columns">
+    <div class="twelve columns">
+      {#if $progress > 0 && $progress < 1}
         <progress value={$progress}></progress>
-    </div>
-  </div>
       {/if}
-  
-
       <ul>
         {#each gasCalculation as m, i}
           {#if i == 3}
@@ -330,14 +347,14 @@
           {/if}
         {/each}
       </ul>
-
       {#if errorMessage}
         <p class="errorMessage">{errorMessage}</p>
       {/if}
-
       {#if successMessage}
         <p class="successMessage">{successMessage}</p>
       {/if}
+    </div>
+  </div>
 {/if}
 <style>
   .errorMessage {