Utxorpc

apps/playground/src/components/cardano/blockchain-providers-code-snippet.tsx

@@ -26,6 +26,14 @@ export default function BlockchainProviderCodeSnippet() {
   codeMaestro += `  turboSubmit: false // Read about paid turbo transaction submission feature at https://docs.gomaestro.org/docs/Dapp%20Platform/Turbo%20Transaction.\n`;
   codeMaestro += `});\n`;
 
+  let codeU5c = `import { U5CProvider } from "@meshsdk/core";\n\n`;
+  codeU5c += `const blockchainProvider = new U5CProvider({\n`;
+  codeU5c += `  url: "http://localhost:5005U5c",\n`;
+  codeU5c += `  headers: {\n`;
+  codeU5c += `    "dmtr-api-key": "<api-key>",\n`;
+  codeU5c += `  },\n`;
+  codeU5c += `});\n`;
+
   let code = codeBF;
   if (blockchainProvider == "koios") {
     code = codeKoios;
@@ -36,6 +44,9 @@ export default function BlockchainProviderCodeSnippet() {
   if (blockchainProvider == "maestro") {
     code = codeMaestro;
   }
+  if (blockchainProvider == "utxorpc") {
+    code = codeU5c;
+  }
 
   return (
     <>
@@ -56,6 +67,11 @@ export default function BlockchainProviderCodeSnippet() {
             label: "Koios",
             onClick: () => setBlockchainProvider("koios"),
           },
+          {
+            key: "utxorpc",
+            label: "UTxORPC",
+            onClick: () => setBlockchainProvider("utxorpc"),
+          },
         ]}
         currentSelected={blockchainProvider}
       />

apps/playground/src/components/cardano/blockchain-providers-key.tsx

@@ -23,6 +23,8 @@ export default function BlockchainProviderKey({
   const setYaciUrl = useProviders((state) => state.setYaciUrl);
   const ogmiosUrl = useProviders((state) => state.ogmiosUrl);
   const setOgmiosUrl = useProviders((state) => state.setOgmiosUrl);
+  const utxorpc = useProviders((state) => state.utxorpc);
+  const setUTxORPC = useProviders((state) => state.setUTxORPC);
   const hydraUrl = useProviders((state) => state.hydraUrl);
   const setHydraUrl = useProviders((state) => state.setHydraUrl);
 
@@ -167,5 +169,29 @@ export default function BlockchainProviderKey({
     );
   }
 
+  if (provider == "utxorpc") {
+    return (
+      <InputTable
+        listInputs={[
+          <Input
+            value={utxorpc.url}
+            onChange={(e) => setUTxORPC(e.target.value, utxorpc.key)}
+            placeholder="Instance URL"
+            label="Instance URL"
+            key={0}
+          />,
+          <Input
+            value={utxorpc.key}
+            onChange={(e) => setUTxORPC(utxorpc.url, e.target.value)}
+            placeholder="Key"
+            label="Key"
+            type="password"
+            key={1}
+          />,
+        ]}
+      />
+    );
+  }
+
   return <></>;
 }

apps/playground/src/components/site/navbar/index.tsx

@@ -127,6 +127,8 @@ export default function Navbar() {
               <MenuItemDropdown title="SDK" items={linksApi} />
               <MenuItemDropdown title="Solutions" items={linksSolutions} />
               <MenuItem title="Docs" link="https://docs.meshjs.dev/" />
+              <MenuItem title="Docs" link="https://docs.meshjs.dev/" />
+              <MenuItemDropdown title="Solutions" items={linksSolutions} />
               <MenuItemDropdown title="About" items={linksAbout} />
             </ul>
           </div>

apps/playground/src/data/links-providers.ts

@@ -23,6 +23,13 @@ export const metaBlockfrost = {
   thumbnail: "/providers/blockfrost.png",
 };
 
+export const metaU5c = {
+  title: "UTxORPC",
+  link: "/providers/utxorpc",
+  desc: "Facilitates access to this state in a standardized and efficient manner through gRPC",
+  thumbnail: "/providers/utxo-rpc.png",
+};
+
 export const metaYaci = {
   title: "Yaci Provider",
   link: "/providers/yaci",
@@ -50,6 +57,7 @@ export const linksProviders: MenuItem[] = [
   metaMaestro,
   // metaHydra,
   metaOgmios,
+  metaU5c,
   metaYaci,
 ];
 

apps/playground/src/hooks/useProviders.ts

@@ -19,6 +19,8 @@ interface State {
   setYaciUrl: (url: string) => void;
   ogmiosUrl: string;
   setOgmiosUrl: (url: string) => void;
+  utxorpc: { url: string; key: string };
+  setUTxORPC: (url: string, key: string) => void;
   hydraUrl: string;
   setHydraUrl: (url: string) => void;
 }
@@ -37,6 +39,8 @@ export const useProviders = create<State>(
       setYaciUrl: (url) => set({ yaciUrl: url }),
       ogmiosUrl: "",
       setOgmiosUrl: (url) => set({ ogmiosUrl: url }),
+      utxorpc: { url: "http://localhost:50051", key: "api-key" },
+      setUTxORPC: (url, key) => set({ utxorpc: { url, key } }),
       hydraUrl: "",
       setHydraUrl: (url) => set({ hydraUrl: url }),
     }),

apps/playground/src/pages/providers/evaluators/index.tsx

@@ -2,6 +2,7 @@ import {
   BlockfrostProvider,
   MaestroProvider,
   OgmiosProvider,
+  U5CProvider,
   YaciProvider,
 } from "@meshsdk/core";
 
@@ -28,4 +29,5 @@ export type SupportedEvaluators =
   | BlockfrostProvider
   | YaciProvider
   | MaestroProvider
-  | OgmiosProvider;
+  | OgmiosProvider
+  | U5CProvider;

apps/playground/src/pages/providers/fetchers/index.tsx

@@ -2,6 +2,7 @@ import {
   BlockfrostProvider,
   KoiosProvider,
   MaestroProvider,
+  U5CProvider,
   YaciProvider,
 } from "@meshsdk/core";
 
@@ -81,4 +82,5 @@ export type SupportedFetchers =
   | BlockfrostProvider
   | KoiosProvider
   | YaciProvider
-  | MaestroProvider;
+  | MaestroProvider
+  | U5CProvider;

apps/playground/src/pages/providers/listeners/index.tsx

@@ -2,6 +2,7 @@ import {
   BlockfrostProvider,
   KoiosProvider,
   MaestroProvider,
+  U5CProvider,
   YaciProvider,
 } from "@meshsdk/core";
 
@@ -28,4 +29,5 @@ export type SupportedListeners =
   | BlockfrostProvider
   | YaciProvider
   | MaestroProvider
-  | KoiosProvider;
+  | KoiosProvider
+  | U5CProvider;

apps/playground/src/pages/providers/submitters/index.tsx

@@ -3,6 +3,7 @@ import {
   KoiosProvider,
   MaestroProvider,
   OgmiosProvider,
+  U5CProvider,
   YaciProvider,
 } from "@meshsdk/core";
 
@@ -30,4 +31,5 @@ export type SupportedSubmitters =
   | YaciProvider
   | MaestroProvider
   | KoiosProvider
-  | OgmiosProvider;
+  | OgmiosProvider
+  | U5CProvider;

apps/playground/src/pages/providers/utxorpc.tsx

@@ -0,0 +1,137 @@
+import type { NextPage } from "next";
+
+import { U5CProvider } 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 { metaU5c } from "~/data/links-providers";
+import { useProviders } from "~/hooks/useProviders";
+import ProviderEvaluators from "./evaluators";
+import ProviderFetchers from "./fetchers";
+import ProviderListeners from "./listeners";
+import ProviderSubmitters from "./submitters";
+
+const ReactPage: NextPage = () => {
+  const sidebarItems = [
+    { label: "Get data from URL", to: "get" },
+    { label: "Fetch Account Info", to: "fetchAccountInfo" },
+    { label: "Fetch Address Assets", to: "fetchAddressAssets" },
+    { label: "Fetch Address Utxos", to: "fetchAddressUtxos" },
+    { label: "Fetch Asset Addresses", to: "fetchAssetAddresses" },
+    { label: "Fetch Asset Metadata", to: "fetchAssetMetadata" },
+    { label: "Fetch Block Info", to: "fetchBlockInfo" },
+    { label: "Fetch Collection Assets", to: "fetchCollectionAssets" },
+    { label: "Fetch Handle Address", to: "fetchHandleAddress" },
+    { label: "Fetch Handle", to: "fetchHandle" },
+    { label: "Fetch Protocol Parameters", to: "fetchProtocolParameters" },
+    { label: "Fetch Transaction Info", to: "fetchTxInfo" },
+    { label: "Evaluate Tx", to: "evaluateTx" },
+    { label: "Submit Tx", to: "submitTx" },
+    { label: "On Transaction Confirmed", to: "onTxConfirmed" },
+  ];
+
+  let code1 = `import { U5CProvider } from "@meshsdk/core";\n\n`;
+  code1 += `const blockchainProvider = new U5CProvider({\n`;
+  code1 += `  url: "http://localhost:50051",\n`;
+  code1 += `  headers: {\n`;
+  code1 += `    "dmtr-api-key": "<api-key>",\n`;
+  code1 += `  },\n`;
+  code1 += `});\n`;
+
+  const utxorpc = useProviders((state) => state.utxorpc);
+
+  const blockchainProvider = new U5CProvider({
+    url: utxorpc.url,
+    headers: {
+      "dmtr-api-key": utxorpc.key,
+    },
+  });
+
+  return (
+    <>
+      <Metatags title={metaU5c.title} description={metaU5c.desc} />
+      <SidebarFullwidth sidebarItems={sidebarItems}>
+        <TitleIconDescriptionBody
+          title={metaU5c.title}
+          description={metaU5c.desc}
+        >
+          <p>
+            The UTxORPC (u5c) provider facilitates access to this state in a
+            standardized and efficient manner through gRPC, using a compact and
+            high-performance binary format. It enables seamless interaction with
+            the Cardano blockchain, to facilitate the creation, signing, and
+            submission of transactions.
+          </p>
+
+          <ul>
+            <li>
+              <b>Standardized Interface</b>: Implements the UTxORPC
+              specification to ensure compatibility and interoperability across
+              UTxO-based blockchains.
+            </li>
+            <li>
+              <b>Performance Optimized</b>: Utilizes gRPC for efficient
+              communication with blockchain nodes, minimizing network overhead
+              and message size.
+            </li>
+            <li>
+              <b>Flexible Provider Options</b>: Suitable for use with hosted
+              services, local nodes like Dolos, or any UTxORPC-compliant
+              service.
+            </li>
+          </ul>
+
+          <p>
+            The following code samples assume that the UTxORPC node is running
+            locally on localhost:50051. If your node is hosted remotely or on a
+            different server, replace "http://localhost:50051" with the
+            appropriate server URL and port for your environment.
+          </p>
+
+          <p>
+            You can also use the UTxORPC provider with a hosted service like{" "}
+            <Link href="https://demeter.run/">Demeter.run</Link>. Demeter is a
+            PaaS (Platform-as-a-Service) that provides managed Cardano
+            infrastructure. One of their services consists of a cloud-hosted
+            endpoint for Cardano integration using the UTxO RPC spec. Developers
+            can sign-up and get access to the API on a per-request basis.
+          </p>
+
+          <p>
+            For more details on configuring your node, refer to the{" "}
+            <Link href="https://github.com/utxorpc/docs/blob/main/pages/servers.md">
+              UTxORPC Ecosystem Servers Documentation
+            </Link>
+            .
+          </p>
+
+          <Codeblock data={code1} />
+        </TitleIconDescriptionBody>
+        <ButtonFloatDocumentation href="https://docs.meshjs.dev/providers/classes/U5CProvider" />
+
+        <ProviderFetchers
+          blockchainProvider={blockchainProvider}
+          provider="utxorpc"
+        />
+        <ProviderEvaluators
+          blockchainProvider={blockchainProvider}
+          provider="utxorpc"
+        />
+        <ProviderSubmitters
+          blockchainProvider={blockchainProvider}
+          provider="utxorpc"
+        />
+        <ProviderListeners
+          blockchainProvider={blockchainProvider}
+          provider="utxorpc"
+        />
+      </SidebarFullwidth>
+    </>
+  );
+};
+
+export default ReactPage;

apps/playground/src/pages/react/getting-started/mesh-provider.tsx

@@ -13,7 +13,7 @@ export default function ReactProvider() {
 }
 
 function Left() {
-  let example = ``;
+  let example = `import "@meshsdk/react/styles.css";`;
   example += `import { MeshProvider } from "@meshsdk/react";\n`;
   example += `\n`;
   example += `function MyApp({ Component, pageProps }: AppProps) {\n`;