Merge branch 'svelte-package-init' into main

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

@@ -2,6 +2,7 @@ import { MenuItem } from "~/types/menu-item";
 import { metaData } from "./links-data";
 import { metaProviders } from "./links-providers";
 import { metaReact } from "./links-react";
+import { metaSvelte } from "./links-svelte";
 import { metaTransaction } from "./links-transactions";
 import { metaTxbuilder } from "./links-txbuilders";
 import { metaUtilities } from "./links-utilities";
@@ -13,6 +14,7 @@ export const linksApi: MenuItem[] = [
   metaTxbuilder,
   metaData,
   metaReact,
+  metaSvelte,
   metaProviders,
   metaUtilities,
 ];

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

@@ -8,8 +8,8 @@ import {
 import { MenuItem } from "~/types/menu-item";
 
 export const metaReactGettingstarted = {
-  title: "Getting Started Mesh React Components",
-  desc: "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.",
+  title: "Getting Started with React",
+  desc: "Frontend components for wallet connections, and useful React hooks to getting wallet states",
   link: "/react/getting-started",
   icon: RocketLaunchIcon,
 };
@@ -34,7 +34,7 @@ export const linksReact: MenuItem[] = [
 
 export const metaReact = {
   title: "React Components",
-  desc: "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.",
+  desc: "Frontend components for wallet connections, and useful React hooks to getting wallet states - Mesh provides what you need to bring your Web3 user interface to life.",
   link: "/react",
   icon: ComputerDesktopIcon,
   items: linksReact,

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

@@ -0,0 +1,33 @@
+import {
+  ComputerDesktopIcon,
+  PaintBrushIcon,
+  RocketLaunchIcon,
+} from "@heroicons/react/24/solid";
+
+import { MenuItem } from "~/types/menu-item";
+
+export const metaSvelteGettingstarted = {
+  title: "Getting Started with Svelte",
+  desc: "Svelte frontend components for wallet connections.",
+  link: "/svelte/getting-started",
+  icon: RocketLaunchIcon,
+};
+export const metaSvelteUicomponents = {
+  title: "UI Components",
+  desc: "UI components to speed up your app development.",
+  link: "/svelte/ui-components",
+  icon: PaintBrushIcon,
+};
+
+export const linksSvelte: MenuItem[] = [
+  metaSvelteGettingstarted,
+  metaSvelteUicomponents,
+];
+
+export const metaSvelte = {
+  title: "Svelte Components",
+  desc: "Svelte frontend components for bringing your Web3 user interface to life.",
+  link: "/svelte",
+  icon: ComputerDesktopIcon,
+  items: linksSvelte,
+};

apps/playground/src/pages/svelte/getting-started/index.tsx

@@ -0,0 +1,42 @@
+import type { NextPage } from "next";
+
+import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
+import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
+import Metatags from "~/components/site/metatags";
+import { metaSvelteGettingstarted } from "~/data/links-svelte";
+import SvelteConnectWallet from "../ui-components/connect-wallet";
+import SvelteInstall from "./install";
+
+const SveltePage: NextPage = () => {
+  const sidebarItems = [
+    { label: "Install", to: "SvelteInstall" },
+    { label: "Connect Wallet", to: "connectWallet" },
+  ];
+
+  return (
+    <>
+      <Metatags
+        title={metaSvelteGettingstarted.title}
+        description={metaSvelteGettingstarted.desc}
+      />
+      <SidebarFullwidth sidebarItems={sidebarItems}>
+        <TitleIconDescriptionBody
+          title={metaSvelteGettingstarted.title}
+          description={metaSvelteGettingstarted.desc}
+          heroicon={metaSvelteGettingstarted.icon}
+        >
+          <p>
+            Mesh provide a collection of useful UI components, so you can easily
+            include web3 functionality and convenient utilities for your
+            application.
+          </p>
+        </TitleIconDescriptionBody>
+
+        <SvelteInstall />
+        <SvelteConnectWallet />
+      </SidebarFullwidth>
+    </>
+  );
+};
+
+export default SveltePage;

apps/playground/src/pages/svelte/getting-started/install.tsx

@@ -0,0 +1,21 @@
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import Codeblock from "~/components/text/codeblock";
+
+export default function SvelteInstall() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="svelteInstall"
+      title="Install"
+      leftSection={Left()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>To start, install:</p>
+      <Codeblock data={`npm install @meshsdk/svelte`} />
+    </>
+  );
+}

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

@@ -0,0 +1,20 @@
+import type { NextPage } from "next";
+
+import HeaderAndCards from "~/components/layouts/header-and-cards";
+import Metatags from "~/components/site/metatags";
+import { linksSvelte, metaSvelte } from "~/data/links-svelte";
+
+const SveltePage: NextPage = () => {
+  return (
+    <>
+      <Metatags title={metaSvelte.title} description={metaSvelte.desc} />
+      <HeaderAndCards
+        headerTitle={metaSvelte.title}
+        headerParagraph={metaSvelte.desc}
+        listCards={linksSvelte}
+      />
+    </>
+  );
+};
+
+export default SveltePage;

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

@@ -0,0 +1,160 @@
+import { CardanoWallet } from "@meshsdk/react";
+
+import Link from "~/components/link";
+import LiveCodeDemo from "~/components/sections/live-code-demo";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import Codeblock from "~/components/text/codeblock";
+import { useDarkmode } from "~/hooks/useDarkmode";
+
+export default function SvelteConnectWallet() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="connectWallet"
+      title="Connect Wallet"
+      leftSection={Left()}
+      rightSection={Right()}
+    />
+  );
+}
+
+function Left() {
+  const isDark = useDarkmode((state) => state.isDark);
+
+  let codeSignature = ``;
+  codeSignature += `{\n`;
+  codeSignature += `  label?: string;\n`;
+  codeSignature += `  onConnected?: Function;\n`;
+  codeSignature += `  isDark?: boolean;\n`;
+  codeSignature += `}\n`;
+
+  let codeRunCode = ``;
+  codeRunCode += `export default function Page() {\n\n`;
+  codeRunCode += `  function afterConnectedWallet() {\n`;
+  codeRunCode += `    // do something\n`;
+  codeRunCode += `  }\n\n`;
+  codeRunCode += `  return (\n`;
+  codeRunCode += `    <>\n`;
+  codeRunCode += `      <CardanoWallet onConnected={afterConnectedWallet} />\n`;
+  codeRunCode += `    </>\n`;
+  codeRunCode += `  );\n`;
+  codeRunCode += `}\n`;
+
+  let codeMetamask = `<CardanoWallet\n`;
+  codeMetamask += `  metamask={{network: "preprod"}}\n`;
+  codeMetamask += `/>\n`;
+
+  let codeCip95 = `<CardanoWallet\n`;
+  codeCip95 += `  extensions={[95]}\n`;
+  codeCip95 += `/>\n`;
+
+  return (
+    <>
+      <p>
+        In order for dApps to communicate with the user's wallet, we need a way
+        to connect to their wallet.
+      </p>
+
+      <p>
+        Add this CardanoWallet to allow the user to select a wallet to connect
+        to your dApp. After the wallet is connected, see{" "}
+        <Link href="/apis/wallets/browserwallet">Browser Wallet</Link> for a
+        list of CIP-30 APIs.
+      </p>
+
+      <p>The signature for the CardanoWallet component is as follows:</p>
+
+      <Codeblock data={codeSignature} />
+
+      <h3>Customization</h3>
+      <p>For dark mode style, add isDark.</p>
+      <Codeblock data={`<CardanoWallet isDark={${isDark}} />`} />
+
+      <p>For a custom label, add the label prop.</p>
+      <Codeblock data={`<CardanoWallet label={"Connect Wallet"} />`} />
+
+      <p>
+        The customization is limited. For more customization, you can easily
+        build your own wallet connection component. You may also take reference
+        from{" "}
+        <Link href="https://github.com/MeshJS/mesh/tree/main/packages/mesh-svelte/src/lib/cardano-wallet">
+          this component
+        </Link>
+        .
+      </p>
+
+      <h3>onConnected</h3>
+      <p>
+        If you want to run a function after the wallet is connected, you can add
+        the onConnected prop.
+      </p>
+
+      <Codeblock data={codeRunCode} />
+      <p>
+        The above code will log "Hello, World!" to the console when the wallet
+        is connected.
+      </p>
+
+      <h3>MetaMask Snaps</h3>
+      <p>
+        You can define the NuFi network to connect to by adding the{" "}
+        <code>network</code> prop.
+      </p>
+      <Codeblock data={codeMetamask} />
+      <p>
+        This will connect to the preprod network. For the mainnet network, use{" "}
+        <code>mainnet</code>.
+      </p>
+      <p>
+        You can also define a custom network by passing a URL string to the{" "}
+        <code>network</code> prop.
+      </p>
+
+      <h3>CIP 95</h3>
+      <p>
+        You can also provide an <code>extensions</code> object to enable
+        specific CIPs. For example, to enable CIP95, you would pass:
+      </p>
+      <Codeblock data={codeCip95} />
+    </>
+  );
+}
+
+function Right() {
+  const isDark = useDarkmode((state) => state.isDark);
+
+  let example = ``;
+  example += `import { CardanoWallet } from '@meshsdk/svelte';\n`;
+  example += `\n`;
+  example += `export default function Page() {\n\n`;
+
+  example += `  function afterConnectedWallet() {\n`;
+  example += `    // do something\n`;
+  example += `  }\n\n`;
+
+  example += `  return (\n`;
+  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 += `      />\n`;
+  example += `    </>\n`;
+  example += `  );\n`;
+  example += `}\n`;
+
+  return (
+    <LiveCodeDemo
+      title="Connect Wallet Component"
+      subtitle="Connect to user's wallet to interact with dApp"
+      code={example}
+      childrenAfterCodeFunctions={true}
+    >
+      <CardanoWallet
+        label={"Connect a Wallet"}
+        isDark={isDark}
+        metamask={{ network: "preprod" }}
+      />
+    </LiveCodeDemo>
+  );
+}

apps/playground/src/pages/svelte/ui-components/index.tsx

@@ -0,0 +1,37 @@
+import type { NextPage } from "next";
+
+import SidebarFullwidth from "~/components/layouts/sidebar-fullwidth";
+import TitleIconDescriptionBody from "~/components/sections/title-icon-description-body";
+import Metatags from "~/components/site/metatags";
+import { metaSvelteUicomponents } from "~/data/links-svelte";
+import SvelteConnectWallet from "./connect-wallet";
+
+const SveltePage: NextPage = () => {
+  const sidebarItems = [{ label: "Connect Wallet", to: "connectWallet" }];
+
+  return (
+    <>
+      <Metatags
+        title={metaSvelteUicomponents.title}
+        description={metaSvelteUicomponents.desc}
+      />
+      <SidebarFullwidth sidebarItems={sidebarItems}>
+        <TitleIconDescriptionBody
+          title={metaSvelteUicomponents.title}
+          description={metaSvelteUicomponents.desc}
+          heroicon={metaSvelteUicomponents.icon}
+        >
+          <p>
+            Mesh provide a collection of useful UI components, so you can easily
+            include web3 functionality and convenient utilities for your
+            application.
+          </p>
+        </TitleIconDescriptionBody>
+
+        <SvelteConnectWallet />
+      </SidebarFullwidth>
+    </>
+  );
+};
+
+export default SveltePage;

packages/mesh-svelte/src/lib/cardano-wallet/component/connect-wallet-button.svelte

@@ -11,6 +11,7 @@
   } from "../state/browser-wallet-state.svelte.js";
   import { type ConnectWalletButtonProps } from "./";
 
+	// todo: looks like the typescript types are not exported?
   const {
     label = "Connect Wallet",
     isDark = false,
@@ -38,7 +39,8 @@
       });
     }
   });
-  // todo: the clickable area should be the whole button, not just the text
+	// todo: the clickable area should be the whole button, not just the text
+
 </script>
 
 <div

packages/mesh-svelte/src/lib/cardano-wallet/component/index.ts

@@ -1,4 +1,4 @@
 import Root from "./connect-wallet-button.svelte";
 import { type ConnectWalletButtonProps } from "./types";
 
-export { Root as ConnectWalletButton, type ConnectWalletButtonProps };
+export { Root as ConnectWallet, type ConnectWalletButtonProps };