Merge pull request #418 from MeshJS/svelte-package-init-2

Svelte package and test

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/react/getting-started/install.tsx

@@ -19,7 +19,8 @@ function Left() {
 
       <p>
         Next, add the Mesh CSS to your application, doing so will apply the
-        default styles to the components:
+        default styles to the components. You can add this in{" "}
+        <code>/pages/_app.tsx</code>.
       </p>
       <Codeblock data={`import "@meshsdk/react/styles.css";`} />
     </>

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,36 @@
+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() {
+  let addStyle = ``;
+  addStyle += `<script lang="ts">\n`;
+  addStyle += `	import '@meshsdk/svelte/styles.css';\n`;
+  addStyle += `	let { children } = $props();\n`;
+  addStyle += `</script>\n`;
+  addStyle += `\n`;
+  addStyle += `{@render children()}\n`;
+
+  return (
+    <>
+      <p>To start, install:</p>
+      <Codeblock data={`npm install @meshsdk/svelte`} />
+
+      <p>
+        Next, add the Mesh CSS to your application, doing so will apply the
+        default styles to the components. You can add this in{" "}
+        <code>+layout.svelte</code>.
+      </p>
+      <Codeblock data={addStyle} />
+    </>
+  );
+}

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,145 @@
+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 a 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() {
+  let example = ``;
+  example += `<script lang="ts">\n`;
+  example += `  import { CardanoWallet, BrowserWalletState} from "@meshsdk/svelte";\n`;
+  example += `\n`;
+  example += `  export async function getAddress() {\n`;
+  example += `    const { browserWallet } = BrowserWalletState;\n`;
+  example += `    const address = await browserWallet.getChangeAddress();\n`;
+  example += `    console.log(address);\n`;
+  example += `  }\n`;
+  example += `</script>\n`;
+  example += `\n`;
+  example += `<main>\n`;
+  example += `  <CardanoWallet />\n`;
+  example += `  <button on:click={getAddress}>getAddress</button>\n`;
+  example += `</main>\n`;
+
+  return (
+    <LiveCodeDemo
+      title="Connect Wallet Component"
+      subtitle="Connect to user's wallet to interact with dApp"
+      code={example}
+      childrenAfterCodeFunctions={true}
+    ></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;