@fernolab/wallet-adapter-svelte 0.1.0

package/dist/components/WalletButton.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import WalletModal from './WalletModal.svelte';
+	import { wallet } from '../wallet/wallet.svelte.js';
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+
+	let showModal = $state(false);
+	let menuOpen = $state(false);
+	let container: HTMLDivElement | null = null;
+
+	function togglePrimary(): void {
+		if (wallet.connected) {
+			menuOpen = !menuOpen;
+		} else {
+			showModal = true;
+		}
+	}
+
+	async function handleDisconnect(): Promise<void> {
+		await wallet.disconnect();
+		menuOpen = false;
+	}
+
+	function handleSwitch(): void {
+		menuOpen = false;
+		showModal = true;
+	}
+</script>
+
+<div class={`wallet-control ${className}`} bind:this={container}>
+	<button
+		class={`wallet-button ${wallet.connected ? 'connected' : ''}`}
+		onclick={togglePrimary}
+		type="button"
+		aria-expanded={wallet.connected ? menuOpen : undefined}
+		aria-haspopup={wallet.connected ? 'menu' : undefined}
+		disabled={wallet.connecting}
+	>
+		{#if wallet.connected && wallet.standardWallet?.icon}
+			<img
+				alt={`${wallet.standardWallet.name} icon`}
+				class="wallet-icon"
+				src={wallet.standardWallet.icon}
+			/>
+		{/if}
+		<span class="label">
+			{wallet.connected ? wallet.shortAddress || 'Connected' : 'Connect wallet'}
+		</span>
+		{#if wallet.connected}
+			<span class="chevron">▾</span>
+		{/if}
+	</button>
+
+	{#if wallet.connected && menuOpen}
+		<div class="wallet-menu" role="menu">
+			<button type="button" role="menuitem" onclick={handleSwitch}>Switch wallet</button>
+			<button type="button" role="menuitem" onclick={handleDisconnect}>Disconnect</button>
+		</div>
+	{/if}
+
+	<WalletModal bind:show={showModal} onModalClosed={() => (menuOpen = false)} />
+</div>
+
+<style>
+	.wallet-control {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.wallet-button {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		min-height: 38px;
+		padding: 8px 12px;
+		border-radius: 6px;
+		border: 1px solid #111111;
+		background: #ffffff;
+		color: #111111;
+		font: inherit;
+		font-weight: 700;
+		cursor: pointer;
+		transition: background 0.15s ease, color 0.15s ease;
+	}
+
+	.wallet-button.connected {
+		background: #111111;
+		color: #ffffff;
+	}
+
+	.wallet-button:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.wallet-button:hover:not(:disabled) {
+		background: #111111;
+		color: #ffffff;
+	}
+
+	.wallet-icon {
+		width: 22px;
+		height: 22px;
+		border-radius: 5px;
+		object-fit: cover;
+	}
+
+	.label {
+		white-space: nowrap;
+	}
+
+	.chevron {
+		font-size: 0.8rem;
+		opacity: 0.8;
+	}
+
+	.wallet-menu {
+		position: absolute;
+		top: calc(100% + 6px);
+		right: 0;
+		display: grid;
+		padding: 6px;
+		background: #ffffff;
+		border: 1px solid #d8d8d8;
+		border-radius: 8px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		min-width: 150px;
+		z-index: 20;
+	}
+
+	.wallet-menu button {
+		background: none;
+		border: none;
+		text-align: left;
+		padding: 8px 10px;
+		border-radius: 6px;
+		font-weight: 600;
+		font-size: 14px;
+		color: #111111;
+		cursor: pointer;
+		transition: background 0.15s ease;
+	}
+
+	.wallet-menu button:hover {
+		background: #f7f7f7;
+	}
+</style>

package/dist/components/WalletButton.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    class?: string;
+}
+declare const WalletButton: import("svelte").Component<Props, {}, "">;
+type WalletButton = ReturnType<typeof WalletButton>;
+export default WalletButton;

package/dist/components/WalletListButton.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  interface Props {
+    icon: string;
+    name: string;
+    onclick?: () => void;
+  }
+
+  let { icon, name, onclick }: Props = $props();
+</script>
+
+<button class="wallet-list-button" type="button" onclick={onclick}>
+  <img src={icon} alt={`${name} icon`} />
+  <span>{name}</span>
+</button>
+
+<style>
+  .wallet-list-button {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 11px 12px;
+    border-radius: 8px;
+    border: 1px solid #d8d8d8;
+    background: #ffffff;
+    color: #111111;
+    cursor: pointer;
+    font: inherit;
+    transition: border-color 0.15s ease, background 0.15s ease;
+  }
+
+  .wallet-list-button:hover {
+    background: #f7f7f7;
+    border-color: #b8b8b8;
+  }
+
+  .wallet-list-button img {
+    width: 34px;
+    height: 34px;
+    border-radius: 7px;
+    object-fit: cover;
+  }
+
+  .wallet-list-button span {
+    font-weight: 700;
+    color: #111111;
+  }
+</style>

package/dist/components/WalletListButton.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    icon: string;
+    name: string;
+    onclick?: () => void;
+}
+declare const WalletListButton: import("svelte").Component<Props, {}, "">;
+type WalletListButton = ReturnType<typeof WalletListButton>;
+export default WalletListButton;

package/dist/components/WalletModal.svelte

@@ -0,0 +1,360 @@
+<script lang="ts">
+  import { wallet } from "../wallet/wallet.svelte.js";
+  import type { StandardWallet } from "../wallet/types.js";
+  import WalletListButton from "./WalletListButton.svelte";
+
+  interface Props {
+    show?: boolean;
+    onModalClosed?: () => void;
+  }
+
+  let { show = $bindable(false), onModalClosed }: Props = $props();
+
+  let connectError = $state<string | null>(null);
+
+  const standardWallets = $derived(
+    wallet.availableWallets.filter(
+      (standardWallet) => standardWallet.name !== wallet.mobileWalletAdapterName
+    )
+  );
+  const showMobileActions = $derived(
+    Boolean(wallet.mobileWalletAdapterWallet || wallet.detectedWalletBrowserName)
+  );
+  const hasWallets = $derived(standardWallets.length > 0);
+
+  function getWalletDisplayName(name: string): string {
+    return name === wallet.mobileWalletAdapterName ? wallet.mobileWalletAdapterDisplayName : name;
+  }
+
+  async function handleWalletSelect(
+    selectedWallet: StandardWallet
+  ): Promise<void> {
+    connectError = null;
+    try {
+      await wallet.connectStandard(selectedWallet);
+      show = false;
+      onModalClosed && onModalClosed();
+    } catch (error) {
+      connectError =
+        error instanceof Error
+          ? error.message
+          : "Failed to connect with the selected wallet.";
+    }
+  }
+
+  async function handleMobileWalletAdapter(): Promise<void> {
+    connectError = null;
+    try {
+      await wallet.connectMobileWalletAdapter();
+      show = false;
+      onModalClosed && onModalClosed();
+    } catch (error) {
+      connectError =
+        error instanceof Error
+          ? error.message
+          : "Mobile Wallet Adapter is not available.";
+    }
+  }
+
+  async function handleWalletBrowser(): Promise<void> {
+    connectError = null;
+    try {
+      await wallet.connectWalletBrowser();
+      show = false;
+      onModalClosed && onModalClosed();
+    } catch (error) {
+      connectError =
+        error instanceof Error
+          ? error.message
+          : "Wallet browser connection failed.";
+    }
+  }
+
+  async function handleRefresh(): Promise<void> {
+    connectError = null;
+    try {
+      await wallet.refreshAvailableWallets();
+    } catch (error) {
+      connectError =
+        error instanceof Error ? error.message : "Could not refresh wallets.";
+    }
+  }
+
+  function handleClose(): void {
+    show = false;
+    connectError = null;
+    onModalClosed && onModalClosed();
+  }
+
+  function handleOverlayKeydown(event: KeyboardEvent): void {
+    if (event.key === "Escape" || event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleClose();
+    }
+  }
+
+  function handleOverlayClick(event: MouseEvent): void {
+    if (event.target === event.currentTarget) {
+      handleClose();
+    }
+  }
+</script>
+
+{#if show}
+  <div
+    class="modal-overlay"
+    role="presentation"
+    onclick={handleOverlayClick}
+    onkeydown={handleOverlayKeydown}
+    tabindex="-1"
+  >
+    <div class="modal" role="dialog" aria-modal="true" tabindex="-1">
+      <div class="modal-header">
+        <div>
+          <h2>Connect wallet</h2>
+          <p>{wallet.runtimeLabel}</p>
+        </div>
+        <button
+          class="close-button"
+          type="button"
+          onclick={handleClose}
+          aria-label="Close">×</button
+        >
+      </div>
+
+      <div class="modal-content">
+        {#if showMobileActions}
+          <div class="mobile-actions">
+            {#if wallet.detectedWalletBrowserName}
+              <button
+                class="action-button primary"
+                type="button"
+                disabled={wallet.connecting}
+                onclick={handleWalletBrowser}
+              >
+                Connect {wallet.detectedWalletBrowserName}
+              </button>
+            {/if}
+
+            {#if wallet.mobileWalletAdapterWallet}
+              <button
+                class="action-button"
+                type="button"
+                disabled={wallet.connecting}
+                onclick={handleMobileWalletAdapter}
+              >
+                {wallet.mobileWalletAdapterDisplayName}
+              </button>
+            {/if}
+          </div>
+        {/if}
+
+        {#if wallet.mobileRuntime.isMobile && wallet.mobileWalletLinks.length > 0}
+          <div class="mobile-links" aria-label="Open in wallet browser">
+            {#each wallet.mobileWalletLinks as link}
+              <a href={link.url} rel="noreferrer">{link.name}</a>
+            {/each}
+          </div>
+        {/if}
+
+        <div class="wallet-list">
+          {#if standardWallets.length > 0}
+            <div class="section-title">Wallets</div>
+            {#each standardWallets as w (w.name)}
+              <WalletListButton
+                onclick={() => handleWalletSelect(w)}
+                icon={w.icon}
+                name={getWalletDisplayName(w.name)}
+              />
+            {/each}
+          {/if}
+
+          {#if !hasWallets}
+            <div class="no-wallets">
+              <p>No wallets detected.</p>
+            </div>
+          {/if}
+
+          <button class="refresh-button" type="button" onclick={handleRefresh}>
+            Refresh wallets
+          </button>
+
+          {#if connectError}
+            <p class="error" role="alert">{connectError}</p>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .modal-overlay {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    background: rgba(0, 0, 0, 0.48);
+    z-index: 40;
+  }
+
+  .modal {
+    background: white;
+    border-radius: 10px;
+    border: 1px solid #d8d8d8;
+    width: min(430px, 100%);
+    max-height: 85vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    border-bottom: 1px solid #e5e5e5;
+    gap: 16px;
+  }
+
+  .close-button {
+    background: none;
+    border: 1px solid transparent;
+    font-size: 1.25rem;
+    cursor: pointer;
+    color: #111111;
+    border-radius: 8px;
+    width: 32px;
+    height: 32px;
+    line-height: 1;
+  }
+
+  .close-button:hover {
+    background: #f7f7f7;
+    border-color: #d8d8d8;
+  }
+
+  h2 {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #111111;
+  }
+
+  .modal-header p {
+    margin: 3px 0 0;
+    color: #666666;
+    font-size: 0.86rem;
+  }
+
+  .modal-content {
+    padding: 16px;
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  .mobile-actions {
+    display: grid;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .action-button,
+  .refresh-button {
+    width: 100%;
+    border-radius: 8px;
+    border: 1px solid #d8d8d8;
+    background: #ffffff;
+    color: #111111;
+    cursor: pointer;
+    font-weight: 700;
+    padding: 11px 14px;
+    transition: background 0.15s ease, border-color 0.15s ease;
+  }
+
+  .action-button:hover:not(:disabled),
+  .refresh-button:hover {
+    background: #f7f7f7;
+    border-color: #b8b8b8;
+  }
+
+  .action-button.primary {
+    background: #111111;
+    border-color: #111111;
+    color: #ffffff;
+  }
+
+  .action-button.primary:hover:not(:disabled) {
+    background: #000000;
+    border-color: #000000;
+  }
+
+  .action-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .mobile-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 14px;
+  }
+
+  .mobile-links a {
+    border-radius: 8px;
+    border: 1px solid #d8d8d8;
+    color: #111111;
+    font-size: 0.86rem;
+    font-weight: 650;
+    padding: 7px 10px;
+    text-decoration: none;
+  }
+
+  .mobile-links a:hover {
+    background: #f7f7f7;
+    border-color: #b8b8b8;
+  }
+
+  .wallet-list {
+    display: grid;
+    gap: 8px;
+  }
+
+  .section-title {
+    color: #666666;
+    font-size: 0.88rem;
+    font-weight: 700;
+    margin-top: 4px;
+  }
+
+  .no-wallets {
+    padding: 14px;
+    background: #fafafa;
+    border-radius: 8px;
+    border: 1px solid #d8d8d8;
+    color: #666666;
+    font-size: 0.9rem;
+  }
+
+  .no-wallets p {
+    margin: 0;
+  }
+
+  .refresh-button {
+    margin-top: 4px;
+    padding: 9px 12px;
+    font-size: 0.9rem;
+  }
+
+  .error {
+    margin: 4px 0 0;
+    color: #111111;
+    font-weight: 600;
+    font-size: 0.85rem;
+  }
+</style>

package/dist/components/WalletModal.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    show?: boolean;
+    onModalClosed?: () => void;
+}
+declare const WalletModal: import("svelte").Component<Props, {}, "show">;
+type WalletModal = ReturnType<typeof WalletModal>;
+export default WalletModal;

package/dist/components/WalletProvider.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { setContext, untrack } from "svelte";
+  import type { Snippet } from "svelte";
+  import { PUBLIC_SOLANA_RPC_ENDPOINT } from "../config.js";
+  import { wallet } from "../wallet/wallet.svelte.js";
+
+  let { rpcEndpoint = PUBLIC_SOLANA_RPC_ENDPOINT, children } = $props<{
+    children?: Snippet;
+    rpcEndpoint?: string;
+  }>();
+
+  $effect(() => {
+    const endpoint = rpcEndpoint;
+
+    untrack(() => {
+      void wallet.initialize(endpoint).catch(() => undefined);
+    });
+  });
+
+  setContext("wallet", wallet);
+</script>
+
+{#if children}
+  {@render children()}
+{/if}

package/dist/components/WalletProvider.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children?: Snippet;
+    rpcEndpoint?: string;
+};
+declare const WalletProvider: import("svelte").Component<$$ComponentProps, {}, "">;
+type WalletProvider = ReturnType<typeof WalletProvider>;
+export default WalletProvider;

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as WalletProvider } from './WalletProvider.svelte';
+export { default as WalletButton } from './WalletButton.svelte';
+export { default as WalletModal } from './WalletModal.svelte';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export { default as WalletProvider } from './WalletProvider.svelte';
+export { default as WalletButton } from './WalletButton.svelte';
+export { default as WalletModal } from './WalletModal.svelte';

package/dist/config.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_PUBLIC_SOLANA_RPC = "https://api.mainnet-beta.solana.com";
+export declare const PUBLIC_SOLANA_RPC_ENDPOINT = "https://api.mainnet-beta.solana.com";

package/dist/config.js

@@ -0,0 +1,2 @@
+export const DEFAULT_PUBLIC_SOLANA_RPC = 'https://api.mainnet-beta.solana.com';
+export const PUBLIC_SOLANA_RPC_ENDPOINT = DEFAULT_PUBLIC_SOLANA_RPC;

package/dist/environment.d.ts

@@ -0,0 +1 @@
+export declare const browser: boolean;

package/dist/environment.js

@@ -0,0 +1 @@
+export const browser = typeof window !== 'undefined' && typeof document !== 'undefined';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components/index.js';
+export { createWalletStore, wallet, type WalletStore } from './wallet/wallet.svelte.js';
+export * from './wallet/mobile-detection.js';
+export * from '@fernolab/wallet-adapter-core';
+export type { WalletWithStandardCapabilities } from './wallet/types.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export { createWalletStore, wallet } from './wallet/wallet.svelte.js';
+export * from './wallet/mobile-detection.js';
+export * from '@fernolab/wallet-adapter-core';

package/dist/wallet/mobile-detection.d.ts

@@ -0,0 +1,3 @@
+export declare function isMobile(): boolean;
+export declare function supportsWalletMobileProtocol(): boolean;
+export declare function getDeviceType(): 'mobile' | 'tablet' | 'desktop';

package/dist/wallet/mobile-detection.js

@@ -0,0 +1,27 @@
+import { detectMobileRuntime } from '@fernolab/wallet-adapter-core';
+import { browser } from '../environment.js';
+function getRuntime() {
+    return detectMobileRuntime({
+        maxTouchPoints: browser ? navigator.maxTouchPoints : 0
+    });
+}
+export function isMobile() {
+    if (!browser)
+        return false;
+    return getRuntime().isMobile;
+}
+export function supportsWalletMobileProtocol() {
+    if (!browser)
+        return false;
+    return getRuntime().supportsMobileWalletAdapter;
+}
+export function getDeviceType() {
+    if (!browser)
+        return 'desktop';
+    if (!isMobile())
+        return 'desktop';
+    const width = window.innerWidth;
+    if (width < 768)
+        return 'mobile';
+    return 'tablet';
+}

package/dist/wallet/types.d.ts

@@ -0,0 +1,3 @@
+import type { StandardWallet as SharedStandardWallet, StandardWalletProvider } from '@fernolab/wallet-adapter-core';
+export type WalletWithStandardCapabilities = StandardWalletProvider;
+export type StandardWallet = SharedStandardWallet<StandardWalletProvider>;

package/dist/wallet/types.js

@@ -0,0 +1 @@
+export {};