Update repo with the latest changes from the summit

README.md

@@ -1,35 +1,82 @@
-# Starter Next.js TypeScript
+# Hydra Poll dApp
 
-Start a new project on Next.js. This starter template consists of a connect wallet button and wallet integration.
-
-## Getting Started
+Hydra-Poll was a quick attempt to have an independent frontend working with the
+opened Hydra Head.
 
-Start project locally using CLI:
+What we wanted is to have users build and sign Hydra transactions on the frontend.
+There is a live Hydra Head between two participants and the frontend connects to it
+using websocket protocol.
+
+So how can any user sign and submit a Hydra transaction if they are not part of
+the Head I hear you ask?
+
+What we did is commit a script output into a Head. The script is very simple
+and its validator always returns True so anybody can spend this utxo over and
+over again. You don't actually need to sign the transaction but we wanted to
+add some interactivity to the app. Don't worry the fees are zero so you don't
+need to pay anything thanks to the altered protocol parameters in the Head.
+
+One problem we had and this is where the flexibility of Hydra really shines is
+that normally ledger rules will prevent you from providing script output as
+collateral input. Since Hydra uses it's own local ledger which you can tweak to
+your needs we were able to alter it and remove this rule so that we can
+actually use the same script utxo we are spending in the Head also as the
+collateral input!
+
+We couldn't find an easy way to trick MeshJS into not requiring collateral
+input since normally when you want to spend from a script collateral input must
+be provided (we are working with their team to have a bit more flexible rules
+when it comes to building transactions).
+
+In the end the app is really simple but might be of use to someone who wants to
+start to build on Hydra Head protocol.
+
+By the way we opened the necessary ports on our server so anybody can connect
+to this Hydra Head instance from anywhere and run this frontend or even better
+go wild and build something a bit different.
+
+What we currently do is put number 1,2 or 3 in the metadata. These numbers
+represent three voting options. When clicking the vote button we send out a
+new Hydra transaction and then observe `TxValid` Hydra message over websocket.
+When we detect it, it means the transaction is valid and applied to Hydra's
+local ledger and then the counter is incremented. You could alter the metadata
+to include something you would like and build a completely different frontend!
+
+### How to run the frontend
+
+This repo contains the frontend part of the `Hydra Poll`. It is built using MeshJS
+and the first thing to do to run the app is to install dependencies.
+This can be done using `npm` or `yarn`:
 
-```bash
-npx create-mesh-app starter-next-ts-template
+```
+$ npm i
 ```
 
-Start your project on [Demeter](https://demeter.run/):
+or:
 
-[![Code in Cardano Workspace](https://demeter.run/code/badge.svg)](https://demeter.run/code?repository=https://github.com/MeshJS/starter-next-ts-template.git&template=typescript)
+```
+$ yarn
+```
 
-## Learn More
+After the dependencies are installed we need to build the project:
 
-### [React components and hooks](https://meshjs.dev/react)
+```
+$ npm run build
 
-Frontend components for wallet connections, and useful React hooks to getting wallet states - Mesh provides everything you need to bring your Web3 user interface to life.
+```
 
-### [APIs](https://meshjs.dev/apis)
+If the frontend is successfully built you can invoke:
 
-From wallet integrations to transaction builders, Mesh makes Web3 development easy with reliable, scalable, and well-engineered APIs & developer tools.
+```
+$ npm run start
 
-### [Guides](https://meshjs.dev/guides)
+```
 
-Whether you are new to web development or a seasoned blockchain full-stack developer, these guides will help you get started.
+for the development version you can run:
 
-## Connect with us
+```
+$ npm run dev
+```
 
-Follow us on [Twitter](https://twitter.com/meshsdk) for updates.
+and the frontend will start on default port 3000.
 
-Join our [Discord](https://discord.gg/Z6AH9dahdH) for any questions and suggestions.

src/pages/index.tsx

@@ -14,16 +14,18 @@ export default function Home() {
         <meta name="description" content="Poll running on Hydra Head protocol" />
       </Head>
 
+      <div className="wallet">
+        <p>Network: Preprod</p>
+      </div>
+
       <CardanoWallet />
 
+
       <main className="main">
         <Main />
       </main>
 
       <Toaster />
-
-      <footer className="footer">
-      </footer>
     </div>
   )
 }

src/utils/utils.tsx

@@ -29,7 +29,7 @@ export const buildScriptTx = async (
     const dataHash = resolveDataHash(datumValue)
     const asset: Asset = {
         unit: "lovelace",
-        quantity: "98000000"
+        quantity: "9997835926"
     }
     const value: UTxO = {
         input: {

styles/template.css

@@ -152,3 +152,10 @@ body {
     border-color: #222;
   }
 }
+.wallet{
+  display: flex;
+  align-items: left;
+  text-align: left;
+font-size: 0.7rem;
+
+}