further updates

src/App.js

@@ -27,7 +27,7 @@ const { chains, provider } = configureChains(
 const connector = new InjectedConnector({ chains });
 
 const client = createClient({
-  autoConnect: true,
+  autoConnect: false,
   connectors: [connector],
   provider
 });
@@ -68,7 +68,7 @@ function Contract() {
       {..._contract, functionName: 'tokensSet'}
     ],
     watch: true,
-    cacheTime: 8000,
+    cacheTime: 4_000,
     onSuccess(data) {
       handleStateChange({
           totalSupply: Number(data[0]),
@@ -186,7 +186,7 @@ function Contract() {
     } else {
       new Noty({
         type: 'error',
-        text: `Too bad! None of your tokens are elligible to claim`,
+        text: `Too bad! None of your tokens are elligible to claim the Ether prize.`,
         theme: 'relax',
         layout: 'topCenter',
         timeout: 8000
@@ -246,6 +246,8 @@ function Contract() {
           </div>
         )}
 
+        <hr></hr>
+
         {options.totalSupply < options.max && (
         <div className="block">
           <h1 className="heading">Price: {ethers.utils.formatEther((options.price * options.mintAmount).toString())} ETH</h1>
@@ -269,23 +271,36 @@ function Contract() {
         )}
         <div className="block">
           <h1 className="heading">Connected to {address.slice(0,6) + '...' + address.slice(-4)} :: <strong>You own {options.balance} tokens</strong></h1>
-          <h1 className="heading">Minted {options.totalSupply} / {options.max} {options.max - options.totalSupply > 0 && (
+          {options.totalSupply !== options.max && (
             <>
-              <strong>({options.max - options.totalSupply} remaining)</strong>
+              <br />
+              <h1 className="heading">Minted {options.totalSupply} / {options.max} {options.max - options.totalSupply > 0 && (
+                <>
+                  <strong>({options.max - options.totalSupply} remaining)</strong>
+                </>
+              )}</h1>
+              <progress className="progress is-primary" value={options.totalSupply} max={options.max}></progress>
             </>
-          )}</h1>
+          )}
-          <progress className="progress is-primary" value={options.totalSupply} max={options.max}></progress>
         </div>
         {options.tokensSet && (
-          <div className="notification is-warning" style={{marginTop: '2em'}}>
+          <div className="notification is-warning">
             Tokens have now been specified in the contract. Owners of those tokens can claim the Ether by clicking the claim buttons above. Congrats to the winners!
           </div>
         )}
-        <div className="notification is-info" style={{marginTop: '2em'}}>
+        {options.totalSupply === options.max && (
+          <div className="notification is-success">
+            All lottery tokens have been sold! ETH claims will be made available to winners approximately 48 hours after mint out.
+          </div>
+        )}
+        <div className="notification is-info">
           The secret hash containing the pre-determined winners is: <strong>{options.hash}</strong>
         </div>
-        <div className="notification">
+        <div className="buttons has-addons">
-          ETH claims will be made available to winners approximately 48 hours after mint out.
+          <a href="#" target={"_blank"} alt="" className="button">Opensea</a>
+          <a href="#" target={"_blank"} alt="" className="button">Blur</a>
+          <a href="#" target={"_blank"} alt="" className="button">X2Y2</a>
+          <a href="#" target={"_blank"} alt="" className="button">Looksrare</a>
         </div>
       </>
     )