Merge branch 'main' into svelte-bump-version

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

@@ -136,7 +136,7 @@ function Right() {
   example += `    <>\n`;
   example += `      <CardanoWallet\n`;
   example += `        label={"Connect a Wallet"}\n`;
-  example += `        isDark={isDark}\n`;
+  example += `        isDark={${isDark}}\n`;
   example += `        onConnected={afterConnectedWallet}\n`;
   example += `        metamask={{ network: "preprod" }}\n`;
   example += `      />\n`;

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

@@ -6,11 +6,13 @@ import Metatags from "~/components/site/metatags";
 import { metaSvelteGettingstarted } from "~/data/links-svelte";
 import SvelteConnectWallet from "../ui-components/connect-wallet";
 import SvelteInstall from "./install";
+import SvelteState from "./state";
 
 const SveltePage: NextPage = () => {
   const sidebarItems = [
     { label: "Install", to: "SvelteInstall" },
     { label: "Connect Wallet", to: "connectWallet" },
+    { label: "Get Wallet State", to: "svelteState" },
   ];
 
   return (
@@ -34,6 +36,7 @@ const SveltePage: NextPage = () => {
 
         <SvelteInstall />
         <SvelteConnectWallet />
+        <SvelteState />
       </SidebarFullwidth>
     </>
   );

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

@@ -0,0 +1,90 @@
+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";
+
+export default function SvelteState() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="svelteState"
+      title="Get Wallet State"
+      leftSection={Left()}
+      rightSection={Right()}
+    />
+  );
+}
+
+function Left() {
+  let code = ``;
+  code += `<script lang="ts">\n`;
+  code += `  import { BrowserWalletState } from "@meshsdk/svelte";\n`;
+  code += `\n`;
+  code += `  const { wallet, connected, name, connecting, connect, disconnect } = BrowserWalletState;\n`;
+  code += `</script>`;
+
+  return (
+    <>
+      <p>
+        Provide information on the current wallet's state, and functions for
+        connecting and disconnecting user wallet.
+      </p>
+      <Codeblock data={code} />
+      <p>
+        <code>wallet</code> is a{" "}
+        <Link href="/apis/wallets/browserwallet">Browser Wallet</Link> instance,
+        which expose all CIP wallets functions from getting assets to signing
+        tranasction.
+      </p>
+      <p>
+        <code>connected</code>, a boolean, <code>true</code> if user's wallet is
+        connected.
+      </p>
+      <p>
+        <code>name</code>, a string, the name of the connect wallet.
+      </p>
+      <p>
+        <code>connecting</code>, a boolean, <code>true</code> if the wallet is
+        connecting and initializing.
+      </p>
+      <p>
+        <code>connect(walletName: string)</code>, a function, provide the wallet
+        name to connect wallet. Retrive a list of available wallets with{" "}
+        <code>useWalletList()</code>.
+      </p>
+      <p>
+        <code>disconnect()</code>, a function, to disconnect the connected
+        wallet.
+      </p>
+    </>
+  );
+}
+
+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 { wallet } = BrowserWalletState;\n`;
+  example += `\n`;
+  example += `    if (wallet) {\n`;
+  example += `      const address = await wallet.getChangeAddress();\n`;
+  example += `      console.log(address);\n`;
+  example += `    }\n`;
+  example += `  }\n`;
+  example += `</script>\n`;
+  example += `\n`;
+  example += `<main>\n`;
+  example += `  <CardanoWallet />\n`;
+  example += `  <button on:click={getAddress}>getAddress</button>\n`;
+  example += `</div>\n`;
+
+  return (
+    <LiveCodeDemo
+      title="Wallet State"
+      subtitle="Get the current wallet's state"
+      code={example}
+      childrenAfterCodeFunctions={true}
+    ></LiveCodeDemo>
+  );
+}

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

@@ -16,8 +16,6 @@ export default function SvelteConnectWallet() {
 }
 
 function Left() {
-  const isDark = useDarkmode((state) => state.isDark);
-
   let codeSignature = ``;
   codeSignature += `{\n`;
   codeSignature += `  label?: string;\n`;
@@ -65,7 +63,7 @@ function Left() {
 
       <h3>Customization</h3>
       <p>For dark mode style, add isDark.</p>
-      <Codeblock data={`<CardanoWallet isDark={${isDark}} />`} />
+      <Codeblock data={`<CardanoWallet isDark={true} />`} />
 
       <p>For a custom label, add the label prop.</p>
       <Codeblock data={`<CardanoWallet label={"Connect a Wallet"} />`} />
@@ -120,18 +118,11 @@ function Left() {
 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 += `  import { CardanoWallet } from "@meshsdk/svelte";\n`;
   example += `</script>\n`;
   example += `\n`;
   example += `<main>\n`;
   example += `  <CardanoWallet />\n`;
-  example += `  <button on:click={getAddress}>getAddress</button>\n`;
   example += `</main>\n`;
 
   return (

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

@@ -9,15 +9,15 @@
     connect,
     disconnect,
   } from "../state/browser-wallet-state.svelte.js";
-  import { type ConnectWalletButtonProps } from "./";
+  import { type CardanoWalletButtonProps } from "./";
 
   const {
     label = "Connect Wallet",
     onConnected,
     isDark = true,
     metamask = undefined,
     extensions = [],
-  }: ConnectWalletButtonProps = $props();
+  }: CardanoWalletButtonProps = $props();
 
   let availableWallets: Wallet[] = $state([]);
 

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";
+import { type CardanoWalletButtonProps } from "./types";
 
-export { Root as ConnectWallet, type ConnectWalletButtonProps };
+export { Root as CardanoWallet, type CardanoWalletButtonProps };

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

@@ -1,4 +1,4 @@
-export type ConnectWalletButtonProps = {
+export type CardanoWalletButtonProps = {
   label?: string;
   onConnected?: Function;
   isDark?: boolean;

packages/mesh-svelte/src/lib/cardano-wallet/state/browser-wallet-state.svelte.ts

@@ -23,6 +23,12 @@ export const BrowserWalletState = {
   get connecting() {
     return connecting;
   },
+  get connect() {
+    return connect;
+  },
+  get disconnect() {
+    return disconnect;
+  },
 };
 
 export async function connect(w: Wallet) {
@@ -47,9 +53,3 @@ export function disconnect() {
   icon = undefined;
   connected = false;
 }
-
-// todo: export the following:
-// import {
-//   BrowserWalletState,
-// } from "@meshsdk/svelte";
-// const { wallet, connected, name, connecting, connect, disconnect, error } = BrowserWalletState;