Merge pull request #1185 from rainlanguage/01-20-2024-migrate-inputhe…

…x-components-to-ui-components

01 20 2024 migrate inputhex components to UI components

packages/ui-components/src/__tests__/InputHex.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import InputHex from '../lib/components/input/InputHex.svelte';
+
+describe('InputHex', () => {
+	it('renders an input element', () => {
+		render(InputHex);
+		expect(screen.getByRole('textbox')).toBeTruthy();
+	});
+
+	it('initializes with empty string when no value provided', () => {
+		render(InputHex);
+		const input = screen.getByRole('textbox') as HTMLInputElement;
+		expect(input.value).toBe('');
+	});
+
+	it('displays hex value when bigint is provided', () => {
+		render(InputHex, { props: { value: 255n } });
+		const input = screen.getByRole('textbox') as HTMLInputElement;
+		expect(input.value).toBe('0xff');
+	});
+});

packages/ui-components/src/lib/components/input/InputHex.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { InputMask } from 'imask';
+	import { imask } from '@imask/svelte';
+	import { fromHex, toHex } from 'viem';
+	import { HEX_INPUT_REGEX } from '../../utils/hex';
+
+	let valueRaw: string = '';
+	export let value: bigint | undefined;
+	export let required = true;
+
+	$: {
+		if (value !== undefined) {
+			valueRaw = toHex(value);
+		}
+	}
+
+	const maskOptions = {
+		// hexadecimal string, optionally starting with 0x
+		mask: HEX_INPUT_REGEX,
+		lazy: false
+	};
+
+	function complete({ detail }: { detail: InputMask }) {
+		valueRaw = detail.value;
+
+		if (detail.unmaskedValue.length === 0) {
+			value = 0n;
+		} else {
+			let valuePrefixed = detail.unmaskedValue;
+			if (detail.unmaskedValue.substring(0, 2) !== '0x') {
+				valuePrefixed = `0x${valuePrefixed}`;
+			}
+			try {
+				value = fromHex(valuePrefixed as `0x${string}`, 'bigint');
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+			} catch (e) {
+				value = 0n;
+			}
+		}
+	}
+</script>
+
+<input
+	{required}
+	type="text"
+	value={valueRaw}
+	class="focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-full rounded-lg border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right dark:border-gray-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400"
+	use:imask={maskOptions}
+	on:complete={complete}
+/>

packages/ui-components/src/lib/index.ts

@@ -60,6 +60,7 @@ export { default as InputToken } from './components/input/InputToken.svelte';
 export { default as CodeMirrorDotrain } from './components/CodeMirrorDotrain.svelte';
 export { default as License } from './components/License.svelte';
 export { default as ButtonDarkMode } from './components/ButtonDarkMode.svelte';
+export { default as InputHex } from './components/input/InputHex.svelte';
 
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';

tauri-app/src/lib/components/InputVaultId.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Helper } from 'flowbite-svelte';
-  import InputHex from '$lib/components/InputHex.svelte';
+  import { InputHex } from '@rainlanguage/ui-components';
 
   export let value: bigint | undefined;
 </script>