feat: wallet interface and burner wallet

apps/playground/src/components/cardano/connect-browser-wallet.tsx

@@ -1,15 +1,42 @@
 import { CardanoWallet, useWalletList } from "@meshsdk/react";
 
+import { getProvider } from "./mesh-wallet";
+
 export default function ConnectBrowserWallet() {
   const wallets = useWalletList();
   const hasAvailableWallets = wallets.length > 0;
   return (
     <>
       {hasAvailableWallets ? (
-        <CardanoWallet extensions={[95]} />
+        <CommonCardanoWallet />
       ) : (
         <>No wallets installed</>
       )}
     </>
   );
 }
+
+export function CommonCardanoWallet() {
+  const provider = getProvider();
+
+  return (
+    <CardanoWallet
+      label={"Connect a Wallet"}
+      extensions={[95]}
+      metamask={{ network: "preprod" }}
+      cardanoPeerConnect={{
+        dAppInfo: {
+          name: "Mesh SDK",
+          url: "https://meshjs.dev/",
+        },
+        announce: [
+          "wss://dev.btt.cf-identity-wallet.metadata.dev.cf-deployments.org",
+        ],
+      }}
+      burnerWallet={{
+        networkId: 0,
+        provider: provider,
+      }}
+    />
+  );
+}

apps/playground/src/components/cardano/mesh-wallet.ts

@@ -1,7 +1,11 @@
 import { BlockfrostProvider, MeshWallet } from "@meshsdk/core";
 
 export function getProvider(network = "preprod") {
-  return new BlockfrostProvider(`/api/blockfrost/${network}/`);
+  const blockchainProvider = new BlockfrostProvider(
+    `/api/blockfrost/${network}/`,
+  );
+  blockchainProvider.setSubmitTxToBytes(false);
+  return blockchainProvider;
 }
 
 export function getMeshWallet() {

apps/playground/src/components/sections/hero-two-sections.tsx

@@ -15,7 +15,7 @@ export default function HeroTwoSections({
   children?: React.ReactNode;
   title: string;
   description: string;
-  image: string | React.ReactNode;
+  image?: string | React.ReactNode;
   link?: { label: string; href: string };
   code?: string;
 }) {
@@ -45,7 +45,7 @@ export default function HeroTwoSections({
           {children && <div className="my-1">{children}</div>}
         </div>
         <div className="hidden lg:col-span-5 lg:mt-0 lg:flex">
-          {typeof image === "string" ? <img src={image} /> : image}
+          {image && typeof image === "string" ? <img src={image} /> : image}
         </div>
       </div>
     </section>

apps/playground/src/pages/aiken/common.tsx

@@ -1,5 +1,5 @@
 import {
-  BrowserWallet,
+  IWallet,
   PlutusScript,
   resolveDataHash,
   resolvePaymentKeyHash,
@@ -20,7 +20,7 @@ export function getPageLinks() {
 
 export const compiledCode = `58f0010000323232323232323222232325333008323232533300b002100114a06644646600200200644a66602200229404c8c94ccc040cdc78010028a511330040040013014002375c60240026eb0c038c03cc03cc03cc03cc03cc03cc03cc03cc020c008c020014dd71801180400399b8f375c6002600e00a91010d48656c6c6f2c20576f726c6421002300d001149858c94ccc020cdc3a400000226464a66601a601e0042930b1bae300d00130060041630060033253330073370e900000089919299980618070010a4c2c6eb8c030004c01401058c01400c8c014dd5000918019baa0015734aae7555cf2ab9f5742ae89`;
 
-export async function getWalletAddress(wallet: BrowserWallet) {
+export async function getWalletAddress(wallet: IWallet) {
   const addresses = await wallet.getUsedAddresses();
   const address = addresses[0];
 

apps/playground/src/pages/api/blockfrost/[...slug].ts

@@ -1,6 +1,9 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import axios from "axios";
 
+import { bytesToHex, toBytes } from "@meshsdk/common";
+import { fromBytes } from "@meshsdk/core-csl";
+
 export default async function handler(
   _req: NextApiRequest,
   _res: NextApiResponse,
@@ -43,18 +46,31 @@ export default async function handler(
         url += `${key}=${params[key]}&`;
       }
     }
+
     // end get params if exists
+    if (url == "tx/submit") {
+      const body = _req.body;
 
-    /**
-     * call blockfrost api
-     */
-    if (url == "tx/submit" || url == "utils/txs/evaluate") {
+      const headers = { "Content-Type": "application/cbor" };
+      const { data, status } = await axiosInstance.post(
+        "tx/submit",
+        toBytes(body),
+        {
+          headers,
+        },
+      );
+      _res.status(status).json(data);
+    } else if (url == "utils/txs/evaluate") {
       const body = _req.body;
 
       const headers = { "Content-Type": "application/cbor" };
-      const { data, status } = await axiosInstance.post(url, body, {
-        headers,
-      });
+      const { status, data } = await axiosInstance.post(
+        "utils/txs/evaluate",
+        body,
+        {
+          headers,
+        },
+      );
       _res.status(status).json(data);
     } else {
       const { data, status } = await axiosInstance.get(`${url}`);

apps/playground/src/pages/apis/txbuilder/basics/send-values.tsx

@@ -73,7 +73,7 @@ function Right() {
   const { wallet, connected } = useWallet();
 
   const [address, setAddress] = useState<string>(demoAddresses.testnet);
-  const [amount, setAmount] = useState<string>("2000000");
+  const [amount, setAmount] = useState<string>("1000000");
 
   async function runDemo() {
     const utxos = await wallet.getUtxos();

apps/playground/src/pages/apis/txbuilder/common.tsx

@@ -6,6 +6,7 @@ export function getTxBuilder() {
   const blockchainProvider = getProvider();
   const txBuilder = new MeshTxBuilder({
     fetcher: blockchainProvider,
+    submitter: blockchainProvider,
     evaluator: blockchainProvider,
     verbose: true,
   });

apps/playground/src/pages/home/index.tsx

@@ -14,7 +14,7 @@ export default function HomePage() {
           title="Web3 TypeScript SDK & off-chain Framework"
           description="Mesh is a TypeScript open-source library providing numerous tools to easily build powerful dApps on the Cardano blockchain."
           link={{ label: "Get started", href: "/getting-started" }}
-          image={<Video />}
+          // image={<Video />}
           children={
             <Link
               href={`/about/catalyst`}

apps/playground/src/pages/react/ui-components/connect-wallet.tsx

@@ -1,5 +1,6 @@
 import { CardanoWallet } from "@meshsdk/react";
 
+import { CommonCardanoWallet } from "~/components/cardano/connect-browser-wallet";
 import Link from "~/components/link";
 import LiveCodeDemo from "~/components/sections/live-code-demo";
 import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
@@ -47,6 +48,13 @@ function Left() {
   codeCip95 += `  extensions={[95]}\n`;
   codeCip95 += `/>\n`;
 
+  let codeBurner = `<CardanoWallet\n`;
+  codeBurner += `  burnerWallet={{\n`;
+  codeBurner += `    networkId: 0,\n`;
+  codeBurner += `    provider: blockchainProvider,\n`;
+  codeBurner += `  }}\n`;
+  codeBurner += `/>\n`;
+
   return (
     <>
       <p>
@@ -116,6 +124,14 @@ function Left() {
         specific CIPs. For example, to enable CIP95, you would pass:
       </p>
       <Codeblock data={codeCip95} />
+
+      <h3>Burner wallet</h3>
+      <p>
+        Burner wallets are wallets that are created on the fly on the user's
+        device. They are temporary wallets useful for testing purposes. The
+        private keys are generated and stored on the user's device.
+      </p>
+      <Codeblock data={codeBurner} />
     </>
   );
 }
@@ -136,9 +152,21 @@ function Right() {
   example += `    <>\n`;
   example += `      <CardanoWallet\n`;
   example += `        label={"Connect a Wallet"}\n`;
-  example += `        isDark={${isDark}}\n`;
   example += `        onConnected={afterConnectedWallet}\n`;
   example += `        metamask={{ network: "preprod" }}\n`;
+  example += `        cardanoPeerConnect={{\n`;
+  example += `          dAppInfo: {\n`;
+  example += `            name: "Mesh SDK",\n`;
+  example += `            url: "https://meshjs.dev/",\n`;
+  example += `          },\n`;
+  example += `          announce: [\n`;
+  example += `            "wss://dev.btt.cf-identity-wallet.metadata.dev.cf-deployments.org",\n`;
+  example += `          ],\n`;
+  example += `        }}\n`;
+  example += `        burnerWallet={{\n`;
+  example += `          networkId: 0,\n`;
+  example += `          provider: provider,\n`;
+  example += `        }}\n`;
   example += `      />\n`;
   example += `    </>\n`;
   example += `  );\n`;
@@ -151,20 +179,7 @@ function Right() {
       code={example}
       childrenAfterCodeFunctions={true}
     >
-      <CardanoWallet
-        label={"Connect a Wallet"}
-        isDark={isDark}
-        metamask={{ network: "preprod" }}
-        cardanoPeerConnect={{
-          dAppInfo: {
-            name: "Mesh SDK",
-            url: "https://meshjs.dev/",
-          },
-          announce: [
-            "wss://dev.btt.cf-identity-wallet.metadata.dev.cf-deployments.org",
-          ],
-        }}
-      />
+      <CommonCardanoWallet />
     </LiveCodeDemo>
   );
 }

apps/playground/src/pages/smart-contracts/content-ownership/common.tsx

@@ -2,15 +2,15 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
 import { MeshContentOwnershipContract } from "@meshsdk/contract";
-import { BrowserWallet, MeshTxBuilder, UTxO } from "@meshsdk/core";
+import { IWallet, MeshTxBuilder, UTxO } from "@meshsdk/core";
 
 import Input from "~/components/form/input";
 import InputTable from "~/components/sections/input-table";
 import { demoAddresses } from "~/data/cardano";
 import { getProvider } from "../../../components/cardano/mesh-wallet";
 
 export function getContract(
-  wallet: BrowserWallet,
+  wallet: IWallet,
   operationAddress: string,
   paramUtxo?: UTxO["input"],
   refScriptUtxos?: {
@@ -80,22 +80,26 @@ export const useContentOwnership = create<State>()(
         set(() => ({
           paramUtxo: paramUtxo,
         })),
-      contentRegistry: "dfd2a2616e6154a092807b1ceebb9ddcadc0f22cf5c8e0e6b0757815083ccb70",
+      contentRegistry:
+        "dfd2a2616e6154a092807b1ceebb9ddcadc0f22cf5c8e0e6b0757815083ccb70",
       setContentRegistry: (address: string) =>
         set(() => ({
           contentRegistry: address,
         })),
-      contentRefToken: "8f731be135171df172c07578a5d74589ec8fb30b37c12fdbe2639d69b7587f5e",
+      contentRefToken:
+        "8f731be135171df172c07578a5d74589ec8fb30b37c12fdbe2639d69b7587f5e",
       setContentRefToken: (address: string) =>
         set(() => ({
           contentRefToken: address,
         })),
-      ownershipRegistry: "ec874b61eec4e5e8e395dead6c9bb18690e6d6ea64d773760c5e654ec9ff5f97",
+      ownershipRegistry:
+        "ec874b61eec4e5e8e395dead6c9bb18690e6d6ea64d773760c5e654ec9ff5f97",
       setOwnershipRegistry: (address: string) =>
         set(() => ({
           ownershipRegistry: address,
         })),
-      ownershipRefToken: "e1bdfc7ae6929f934cf9d418273dde143cbb65ec0eec23bdb6c342e4cd91dbd0",
+      ownershipRefToken:
+        "e1bdfc7ae6929f934cf9d418273dde143cbb65ec0eec23bdb6c342e4cd91dbd0",
       setOwnershipRefToken: (address: string) =>
         set(() => ({
           ownershipRefToken: address,

apps/playground/src/pages/smart-contracts/escrow/common.tsx

@@ -1,9 +1,9 @@
 import { MeshEscrowContract } from "@meshsdk/contract";
-import { BrowserWallet, MeshTxBuilder } from "@meshsdk/core";
+import { IWallet, MeshTxBuilder } from "@meshsdk/core";
 
 import { getProvider } from "../../../components/cardano/mesh-wallet";
 
-export function getContract(wallet: BrowserWallet) {
+export function getContract(wallet: IWallet) {
   const blockchainProvider = getProvider();
 
   const meshTxBuilder = new MeshTxBuilder({

apps/playground/src/pages/smart-contracts/giftcard/common.tsx

@@ -1,9 +1,9 @@
 import { MeshGiftCardContract } from "@meshsdk/contract";
-import { BrowserWallet, MeshTxBuilder } from "@meshsdk/core";
+import { IWallet, MeshTxBuilder } from "@meshsdk/core";
 
 import { getProvider } from "../../../components/cardano/mesh-wallet";
 
-export function getContract(wallet: BrowserWallet) {
+export function getContract(wallet: IWallet) {
   const blockchainProvider = getProvider();
 
   const meshTxBuilder = new MeshTxBuilder({

apps/playground/src/pages/smart-contracts/hello-world/common.tsx

@@ -1,9 +1,9 @@
 import { MeshHelloWorldContract } from "@meshsdk/contract";
-import { BrowserWallet, MeshTxBuilder } from "@meshsdk/core";
+import { IWallet, MeshTxBuilder } from "@meshsdk/core";
 
 import { getProvider } from "../../../components/cardano/mesh-wallet";
 
-export function getContract(wallet: BrowserWallet) {
+export function getContract(wallet: IWallet) {
   const blockchainProvider = getProvider();
 
   const meshTxBuilder = new MeshTxBuilder({

apps/playground/src/pages/smart-contracts/marketplace/common.tsx

@@ -1,13 +1,13 @@
 import { MeshMarketplaceContract } from "@meshsdk/contract";
-import { BrowserWallet, MeshTxBuilder } from "@meshsdk/core";
+import { IWallet, MeshTxBuilder } from "@meshsdk/core";
 
 import { getProvider } from "../../../components/cardano/mesh-wallet";
 import { demoAddresses, demoAsset } from "../../../data/cardano";
 
 export const asset = demoAsset;
 export const price = 10000000;
 
-export function getContract(wallet: BrowserWallet) {
+export function getContract(wallet: IWallet) {
   const blockchainProvider = getProvider();
 
   const meshTxBuilder = new MeshTxBuilder({

apps/playground/src/pages/smart-contracts/payment-splitter/common.tsx

@@ -1,9 +1,9 @@
 import { MeshPaymentSplitterContract } from "@meshsdk/contract";
-import { BrowserWallet, MeshTxBuilder } from "@meshsdk/core";
+import { IWallet, MeshTxBuilder } from "@meshsdk/core";
 
 import { getProvider } from "../../../components/cardano/mesh-wallet";
 
-export function getContract(wallet: BrowserWallet) {
+export function getContract(wallet: IWallet) {
   const blockchainProvider = getProvider();
 
   const meshTxBuilder = new MeshTxBuilder({

apps/playground/src/pages/smart-contracts/plutus-nft/common.tsx

@@ -2,14 +2,14 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
 import { MeshPlutusNFTContract } from "@meshsdk/contract";
-import { BrowserWallet, MeshTxBuilder, UTxO } from "@meshsdk/core";
+import { IWallet, MeshTxBuilder, UTxO } from "@meshsdk/core";
 
 import Input from "~/components/form/input";
 import InputTable from "~/components/sections/input-table";
 import { getProvider } from "../../../components/cardano/mesh-wallet";
 
 export function getContract(
-  wallet: BrowserWallet,
+  wallet: IWallet,
   collectionName: string,
   paramUtxo?: UTxO["input"],
 ) {

apps/playground/src/pages/smart-contracts/swap/common.tsx

@@ -1,9 +1,9 @@
 import { MeshSwapContract } from "@meshsdk/contract";
-import { BrowserWallet, MeshTxBuilder } from "@meshsdk/core";
+import { IWallet, MeshTxBuilder } from "@meshsdk/core";
 
 import { getProvider } from "../../../components/cardano/mesh-wallet";
 
-export function getContract(wallet: BrowserWallet) {
+export function getContract(wallet: IWallet) {
   const blockchainProvider = getProvider();
 
   const meshTxBuilder = new MeshTxBuilder({