@rainlanguage/ui-components 0.0.1-alpha.24 → 0.0.1-alpha.26

package/dist/components/detail/VaultDetail.svelte

@@ -152,7 +152,7 @@ onDestroy(() => {
 		<CardProperty>
 			<svelte:fragment slot="key">Orders as output</svelte:fragment>
 			<svelte:fragment slot="value">
-				<p data-testid="vaulDetailOrdersAsOutput" class="flex flex-wrap justify-start">
+				<p data-testid="vaultDetailOrdersAsOutput" class="flex flex-wrap justify-start">
 					{#if data.ordersAsOutput && data.ordersAsOutput.length > 0}
 						{#each data.ordersAsOutput as order}
 							<OrderOrVaultHash

package/dist/index.d.ts

@@ -87,5 +87,7 @@ export { default as transactionStore } from './stores/transactionStore';
 export { mockTransactionStore } from './__mocks__/mockTransactionStore';
 export { default as logoLight } from './assets/logo-light.svg';
 export { default as logoDark } from './assets/logo-dark.svg';
-export { useGui } from './hooks/useGui';
 export { default as GuiProvider } from './providers/GuiProvider.svelte';
+export { default as WalletProvider } from './providers/wallet/WalletProvider.svelte';
+export { useGui } from './hooks/useGui';
+export { useAccount } from './providers/wallet/useAccount';

package/dist/index.js

@@ -87,7 +87,9 @@ export { mockTransactionStore } from './__mocks__/mockTransactionStore';
 // Assets
 export { default as logoLight } from './assets/logo-light.svg';
 export { default as logoDark } from './assets/logo-dark.svg';
-// Hooks
-export { useGui } from './hooks/useGui';
 // Providers
 export { default as GuiProvider } from './providers/GuiProvider.svelte';
+export { default as WalletProvider } from './providers/wallet/WalletProvider.svelte';
+// Hooks
+export { useGui } from './hooks/useGui';
+export { useAccount } from './providers/wallet/useAccount';

package/dist/providers/wallet/WalletProvider.svelte

@@ -0,0 +1,7 @@
+<script>import { readable } from "svelte/store";
+import { setAccountContext } from "./context";
+export let account = readable(null);
+setAccountContext(account);
+</script>
+
+<slot />

package/dist/providers/wallet/WalletProvider.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { Account } from '../../types/account';
+declare const __propDef: {
+    props: {
+        account?: Account;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type WalletProviderProps = typeof __propDef.props;
+export type WalletProviderEvents = typeof __propDef.events;
+export type WalletProviderSlots = typeof __propDef.slots;
+export default class WalletProvider extends SvelteComponent<WalletProviderProps, WalletProviderEvents, WalletProviderSlots> {
+}
+export {};

package/dist/providers/wallet/context.d.ts

@@ -0,0 +1,10 @@
+import type { Account } from '../../types/account';
+export declare const ACCOUNT_KEY = "account_key";
+/**
+ * Retrieves the account store directly from Svelte's context
+ */
+export declare const getAccountContext: () => Account;
+/**
+ * Sets the account store in Svelte's context
+ */
+export declare const setAccountContext: (account: Account) => void;

package/dist/providers/wallet/context.js

@@ -0,0 +1,47 @@
+import { getContext, setContext } from 'svelte';
+import { readable } from 'svelte/store';
+export const ACCOUNT_KEY = 'account_key';
+/**
+ * Retrieves the account store directly from Svelte's context
+ */
+export const getAccountContext = () => {
+    const account = getContext(ACCOUNT_KEY);
+    if (!account) {
+        throw new Error('No account was found in Svelte context. Did you forget to wrap your component with WalletProvider?');
+    }
+    return account;
+};
+/**
+ * Sets the account store in Svelte's context
+ */
+export const setAccountContext = (account) => {
+    setContext(ACCOUNT_KEY, account);
+};
+if (import.meta.vitest) {
+    const { describe, it, expect, vi, beforeEach } = import.meta.vitest;
+    vi.mock('svelte', async (importOriginal) => ({
+        ...(await importOriginal()),
+        getContext: vi.fn()
+    }));
+    describe('getAccountContext', () => {
+        const mockGetContext = vi.mocked(getContext);
+        beforeEach(() => {
+            mockGetContext.mockReset();
+        });
+        it('should return the account from context when it exists', () => {
+            const mockAccount = readable('0x456');
+            mockGetContext.mockImplementation((key) => {
+                if (key === ACCOUNT_KEY)
+                    return mockAccount;
+                return undefined;
+            });
+            const result = getAccountContext();
+            expect(mockGetContext).toHaveBeenCalledWith(ACCOUNT_KEY);
+            expect(result).toEqual(mockAccount);
+        });
+        it('should throw an error when account is not in context', () => {
+            mockGetContext.mockReturnValue(undefined);
+            expect(() => getAccountContext()).toThrow('No account was found in Svelte context. Did you forget to wrap your component with WalletProvider?');
+        });
+    });
+}

package/dist/providers/wallet/useAccount.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook to access wallet account information from context
+ * Must be used within a component that is a child of WalletProvider
+ */
+export declare function useAccount(): {
+    account: import("../../types/account").Account;
+};

package/dist/providers/wallet/useAccount.js

@@ -0,0 +1,33 @@
+import { getAccountContext } from './context';
+import { readable } from 'svelte/store';
+/**
+ * Hook to access wallet account information from context
+ * Must be used within a component that is a child of WalletProvider
+ */
+export function useAccount() {
+    const account = getAccountContext();
+    return {
+        account
+    };
+}
+if (import.meta.vitest) {
+    const { describe, it, expect, vi, beforeEach } = import.meta.vitest;
+    vi.mock('./context', () => ({
+        getAccountContext: vi.fn()
+    }));
+    describe('useAccount', () => {
+        const mockGetAccountContext = vi.mocked(getAccountContext);
+        beforeEach(() => {
+            mockGetAccountContext.mockReset();
+        });
+        it('should return account wrapped in an object', () => {
+            const mockAccount = readable('0x123');
+            mockGetAccountContext.mockReturnValue(mockAccount);
+            const result = useAccount();
+            expect(mockGetAccountContext).toHaveBeenCalled();
+            expect(result).toEqual({
+                account: mockAccount
+            });
+        });
+    });
+}

package/dist/types/account.d.ts

@@ -0,0 +1,3 @@
+import type { Readable } from 'svelte/store';
+import type { Hex } from 'viem';
+export type Account = Readable<Hex | null>;

package/dist/types/account.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rainlanguage/ui-components",
-	"version": "0.0.1-alpha.24",
+	"version": "0.0.1-alpha.26",
 	"description": "A component library for building Svelte applications to be used with Raindex.",
 	"license": "LicenseRef-DCL-1.0",
 	"author": "Rain Open Source Software Ltd",
@@ -49,38 +49,38 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@codemirror/lang-yaml": "^6.0.0",
-		"@fontsource/dm-sans": "^5.0.18",
-		"@imask/svelte": "^7.3.0",
-		"@observablehq/plot": "^0.6.13",
-		"@rainlanguage/orderbook": "0.0.1-alpha.24",
-		"@reown/appkit": "^1.6.4",
-		"@reown/appkit-adapter-wagmi": "^1.6.4",
-		"@sentry/sveltekit": "^7.107.0",
-		"@square/svelte-store": "^1.0.18",
-		"@sveltejs/kit": "^2.0.0",
-		"@tanstack/svelte-query": "^5.59.20",
-		"@wagmi/core": "^2.16.3",
-		"@walletconnect/ethereum-provider": "^2.11.3",
-		"@walletconnect/modal": "^2.6.2",
-		"@web3modal/ethers5": "^4.1.1",
-		"camelcase-keys": "^9.1.3",
-		"codemirror-rainlang": "^3.0.13",
-		"dayjs": "^1.11.13",
-		"ethers": "^5.7.2",
-		"flowbite": "^2.2.1",
-		"flowbite-svelte": "^0.44.21",
-		"flowbite-svelte-icons": "^0.4.5",
-		"fuse.js": "^7.0.0",
-		"lightweight-charts": "^4.1.3",
-		"lodash": "^4.17.21",
-		"svelte": "^4.2.7",
-		"svelte-codemirror-editor": "^1.3.0",
-		"svelte-markdown": "^0.4.1",
-		"tailwind-merge": "^2.5.4",
-		"thememirror": "^2.0.1",
-		"uuid": "^9.0.1",
-		"viem": "^2.22.8",
-		"wagmi": "^2.14.7"
+		"@codemirror/lang-yaml": "6.1.1",
+		"@fontsource/dm-sans": "5.1.0",
+		"@imask/svelte": "7.6.1",
+		"@observablehq/plot": "0.6.16",
+		"@rainlanguage/orderbook": "0.0.1-alpha.26",
+		"@reown/appkit": "1.6.4",
+		"@reown/appkit-adapter-wagmi": "1.6.4",
+		"@sentry/sveltekit": "7.120.0",
+		"@square/svelte-store": "1.0.18",
+		"@sveltejs/kit": "2.8.1",
+		"@tanstack/svelte-query": "5.59.20",
+		"@wagmi/core": "2.16.3",
+		"@walletconnect/ethereum-provider": "2.17.2",
+		"@walletconnect/modal": "2.7.0",
+		"@web3modal/ethers5": "4.2.3",
+		"camelcase-keys": "9.1.3",
+		"codemirror-rainlang": "3.0.13",
+		"dayjs": "1.11.13",
+		"ethers": "5.7.2",
+		"flowbite": "2.5.2",
+		"flowbite-svelte": "0.44.24",
+		"flowbite-svelte-icons": "0.4.5",
+		"fuse.js": "7.0.0",
+		"lightweight-charts": "4.2.1",
+		"lodash": "4.17.21",
+		"svelte": "4.2.19",
+		"svelte-codemirror-editor": "1.4.1",
+		"svelte-markdown": "0.4.1",
+		"tailwind-merge": "2.5.4",
+		"thememirror": "2.0.1",
+		"uuid": "9.0.1",
+		"viem": "2.22.8",
+		"wagmi": "2.14.7"
 	}
 }