adding hash and cleaning ui

src/App.js

@@ -35,7 +35,8 @@ function Contract() {
     winningAmount: 0,
     phraseSet: false,
     mintAmount: 1,
-    balance: 0
+    balance: 0,
+    hash: ''
   });
   function handleStateChange(obj) {
     setOptions(preState => ({...preState , ...obj}));
@@ -49,6 +50,7 @@ function Contract() {
       {..._contract, functionName: 'winningAmount'},
       {..._contract, functionName: 'phraseSet'},
       {..._contract, functionName: 'balanceOf'},
+      {..._contract, functionName: 'winningPhraseHash'},
     ],
     watch: true,
     cacheTime: 8000,
@@ -60,7 +62,8 @@ function Contract() {
           winners: Number(data[3]),
           winningAmount: Number(data[4]),
           phraseSet: Number(data[5]),
-          balance: Number(data[6])
+          balance: Number(data[6]),
+          hash: data[7].toString()
       });
     }
   });
@@ -68,11 +71,12 @@ function Contract() {
   if (isConnected)
     return (
       <>
+        <button className="button" style={{marginBottom: '1em'}} onClick={() => disconnect()}>Disconnect Wallet</button>
         <div className="block">
           <h1 className="heading">Price: {ethers.utils.formatEther((options.price * options.mintAmount).toString())} ETH</h1>
           <div class="field has-addons">
             <div class="control">
-              <input class="input" type="text" placeholder="Mint amount" onChange={(v) => {
+              <input class="input" type="text" placeholder="Mint amount" value={options.mintAmount} onChange={(v) => {
                 if (v.target.value >= 0) handleStateChange({mintAmount: Number(v.target.value)})}
               }></input>
             </div>
@@ -82,17 +86,16 @@ function Contract() {
               </a>
             </div>
           </div>
-          <div className="notification is-primary" style={{width: '25em'}}>
+          <h1 className="heading">You'll have a ~{(options.balance + options.mintAmount) / options.max * 100}% chance to win 1 ETH</h1>
-            You'll have a ~{(options.balance + options.mintAmount) / options.max * 100}% chance to win 1 ETH
-          </div>
-          <button className="button" onClick={() => disconnect()}>Disconnect</button>
         </div>
         <div className="block">
-          <h1 className="heading">Connected to {address.slice(0,6) + '...' + address.slice(-4)}</h1>
+          <h1 className="heading">Connected to {address.slice(0,6) + '...' + address.slice(-4)} :: You own {options.balance} tokens</h1>
-          <h1 className="heading">You own {options.balance}</h1>
           <h1 className="heading">Minted {options.totalSupply} / {options.max}</h1>
           <progress className="progress is-primary" value={options.totalSupply} max={options.max}></progress>
         </div>
+        <div class="notification is-info" style={{marginTop: '2em'}}>
+          The secret phrase containing the pre-determined winners is: <strong>{options.hash}</strong>
+        </div>
       </>
     )
   return <button className="button is-dark" onClick={() => connect()}>Connect Wallet</button>
@@ -108,7 +111,7 @@ function App() {
               A Few Of Us Are Going To Make It.
             </p>
             <p className="subtitle">
-              An NFT Lottery. Mint a token for your chance to win 1 ETH.
+              An NFT Lottery. Mint a token for your chance to win 1 ETH. 10 tokens are pre-determined to win.
             </p>
             <Contract />
           </div>