-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #327 from MeshJS/hydra-tools
Hydra tools
- Loading branch information
Showing
30 changed files
with
9,732 additions
and
7,698 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
apps/playground/src/pages/providers/hydra-endpoints/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { HydraProvider } from "@meshsdk/core"; | ||
|
||
import HydraInitializeHead from "./init-head"; | ||
import HydraOnMessage from "./on-message"; | ||
|
||
export default function ProviderHydra({ | ||
hydraProvider, | ||
provider, | ||
}: { | ||
hydraProvider: HydraProvider; | ||
provider: string; | ||
}) { | ||
return ( | ||
<> | ||
<HydraInitializeHead | ||
hydraProvider={hydraProvider} | ||
provider={provider} | ||
/> | ||
<HydraOnMessage | ||
hydraProvider={hydraProvider} | ||
provider={provider} | ||
/> | ||
</> | ||
); | ||
} |
55 changes: 55 additions & 0 deletions
55
apps/playground/src/pages/providers/hydra-endpoints/init-head.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import { HydraProvider } from "@meshsdk/core"; | ||
|
||
import LiveCodeDemo from "~/components/sections/live-code-demo"; | ||
import TwoColumnsScroll from "~/components/sections/two-columns-scroll"; | ||
import Codeblock from "~/components/text/codeblock"; | ||
|
||
export default function HydraInitializeHead({ | ||
hydraProvider, | ||
provider, | ||
}: { | ||
hydraProvider: HydraProvider; | ||
provider: string; | ||
}) { | ||
return ( | ||
<TwoColumnsScroll | ||
sidebarTo="initHead" | ||
title="Initializes a new Hydra Head" | ||
leftSection={Left()} | ||
rightSection={Right(hydraProvider, provider)} | ||
/> | ||
); | ||
} | ||
|
||
function Left() { | ||
return ( | ||
<> | ||
<p> | ||
Initializes a new Head. This command is a no-op when a Head is already | ||
open and the server will output an <code>CommandFailed</code> message | ||
should this happen. | ||
</p> | ||
<Codeblock data={`await hydraProvider.initializesHead();`} /> | ||
</> | ||
); | ||
} | ||
|
||
function Right(hydraProvider: HydraProvider, provider: string) { | ||
async function runDemo() { | ||
hydraProvider.onMessage((message) => { | ||
console.log("HydraProvider received message", message); | ||
}); | ||
await hydraProvider.connect(); | ||
return await hydraProvider.initializesHead(); | ||
} | ||
|
||
return ( | ||
<LiveCodeDemo | ||
title="Initializes Hydra Head" | ||
subtitle="Initializes a new Head." | ||
runCodeFunction={runDemo} | ||
runDemoShowProviderInit={true} | ||
runDemoProvider={provider} | ||
></LiveCodeDemo> | ||
); | ||
} |
57 changes: 57 additions & 0 deletions
57
apps/playground/src/pages/providers/hydra-endpoints/on-message.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import { use, useEffect } from "react"; | ||
|
||
import { HydraProvider } from "@meshsdk/core"; | ||
|
||
import Link from "~/components/link"; | ||
import TwoColumnsScroll from "~/components/sections/two-columns-scroll"; | ||
import Codeblock from "~/components/text/codeblock"; | ||
|
||
export default function HydraOnMessage({ | ||
hydraProvider, | ||
provider, | ||
}: { | ||
hydraProvider: HydraProvider; | ||
provider: string; | ||
}) { | ||
return ( | ||
<TwoColumnsScroll | ||
sidebarTo="onMessage" | ||
title="Listens for new messages from Hydra node" | ||
leftSection={Left()} | ||
rightSection={Right(hydraProvider, provider)} | ||
/> | ||
); | ||
} | ||
|
||
function Left() { | ||
let code = ``; | ||
code += `hydraProvider.onMessage((message) => {\n`; | ||
code += ` console.log("HydraProvider received message", message);\n`; | ||
code += ` // do something with the message\n`; | ||
code += `});\n`; | ||
|
||
return ( | ||
<> | ||
<p> | ||
Listens for new messages from Hydra node. The callback function will be | ||
called with the message as the only argument. Check{" "} | ||
<Link href="https://hydra.family/head-protocol/api-reference/#operation-subscribe-/"> | ||
all events emitted | ||
</Link> | ||
by the Hydra node. | ||
</p> | ||
<Codeblock data={code} /> | ||
</> | ||
); | ||
} | ||
|
||
function Right(hydraProvider: HydraProvider, provider: string) { | ||
useEffect(() => { | ||
hydraProvider.onMessage((message) => { | ||
console.log("HydraProvider received message", message); | ||
// do something with the message | ||
}); | ||
}, []); | ||
|
||
return <></>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import type { NextPage } from "next"; | ||
|
||
import { HydraProvider } from "@meshsdk/core"; | ||
|
||
import ButtonFloatDocumentation from "~/components/button/button-float-documentation"; | ||
import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth"; | ||
import Link from "~/components/link"; | ||
import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body"; | ||
import Metatags from "~/components/site/metatags"; | ||
import Codeblock from "~/components/text/codeblock"; | ||
import { metaHydra } from "~/data/links-providers"; | ||
import { useProviders } from "~/hooks/useProviders"; | ||
import ProviderHydra from "./hydra-endpoints"; | ||
|
||
const ReactPage: NextPage = () => { | ||
const sidebarItems = [ | ||
{ label: "Initializes Hydra Head", to: "initHead" }, | ||
{ label: "On Message", to: "onMessage" }, | ||
{ label: "Abort Hydra Head", to: "AA" }, | ||
{ label: "Submit Transaction", to: "AA" }, | ||
{ label: "Decommit UTxO", to: "AA" }, | ||
{ label: "Close Hydra Head", to: "AA" }, | ||
{ label: "Contest latest snapshot", to: "AA" }, | ||
{ label: "Fanout", to: "AA" }, | ||
{ label: "Get UTxO", to: "AA" }, | ||
{ label: "Commit Transaction", to: "AA" }, | ||
{ label: "Decommit Transaction", to: "AA" }, | ||
{ label: "Get protocol parameters", to: "AA" }, | ||
]; | ||
|
||
let code1 = `import { HydraProvider } from "@meshsdk/core";\n\n`; | ||
code1 += `const hydraProvider = new HydraProvider('<URL>');`; | ||
code1 += `\nawait hydraProvider.connect();`; | ||
|
||
const hydraUrl = useProviders((state) => state.hydraUrl); | ||
const hydraProvider = new HydraProvider(hydraUrl); | ||
|
||
return ( | ||
<> | ||
<Metatags title={metaHydra.title} description={metaHydra.desc} /> | ||
<SidebarFullwidth sidebarItems={sidebarItems}> | ||
<TitleIconDescriptionBody | ||
title={metaHydra.title} | ||
description={metaHydra.desc} | ||
> | ||
<p> | ||
The{" "} | ||
<Link href="https://hydra.family/head-protocol/"> | ||
Hydra Head protocol | ||
</Link>{" "} | ||
is a layer 2 scaling solution for Cardano rooted in peer-reviewed | ||
research that increases transaction throughput and ensures cost | ||
efficiency while maintaining rigorous security. | ||
</p> | ||
<p>Get started:</p> | ||
<Codeblock data={code1} /> | ||
</TitleIconDescriptionBody> | ||
<ButtonFloatDocumentation href="https://docs.meshjs.dev/providers/classes/HydraProvider" /> | ||
|
||
<ProviderHydra hydraProvider={hydraProvider} provider="hydra" /> | ||
</SidebarFullwidth> | ||
</> | ||
); | ||
}; | ||
|
||
export default ReactPage; |
Oops, something went wrong.