Move RaindexVersionValidator to components-ui

packages/ui-components/src/lib/components/RaindexVersionValidator.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Alert } from 'flowbite-svelte';
+	import { InfoCircleOutline } from 'flowbite-svelte-icons';
+
+	export let error: unknown;
+</script>
+
+{#if error && typeof error == 'string' && error.startsWith('Raindex version')}
+	<Alert color="red">
+		<InfoCircleOutline slot="icon" class="h-5 w-5" />
+		<div class="flex flex-col">
+			<span>{error}</span>
+			<span
+				>This order may not be compatible with this version of Raindex. Head to
+				<a class="underline" href="https://github.com/rainlanguage/rain.orderbook/releases"
+					>Github</a
+				> to find a compatible release.</span
+			>
+		</div>
+	</Alert>
+{/if}

packages/ui-components/src/lib/components/RaindexVersionValidator.test.ts

@@ -0,0 +1,30 @@
+import { describe, test, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import RaindexVersionValidator from './RaindexVersionValidator.svelte';
+
+describe('RaindexVersionValidator Component', () => {
+	test('should show error message if error is a string that starts with "Raindex version"', () => {
+		const error = 'Raindex version error';
+		const comp = render(RaindexVersionValidator, { props: { error } });
+
+		const alert = comp.getByRole('alert');
+		expect(alert).toContainHTML('<span>Raindex version error</span>');
+		expect(alert).toHaveTextContent(
+			`This order may not be compatible with this version of Raindex. `
+		);
+	});
+
+	test('should not show error message if error is not a string', () => {
+		const error = 42;
+		const comp = render(RaindexVersionValidator, { props: { error } });
+
+		expect(() => comp.getByRole('alert')).toThrow();
+	});
+
+	test('should not show error message if error does not start with "Raindex version"', () => {
+		const error = 'Some other error';
+		const comp = render(RaindexVersionValidator, { props: { error } });
+
+		expect(() => comp.getByRole('alert')).toThrow();
+	});
+});

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

@@ -46,6 +46,7 @@ export { default as IconSuccess } from './components/IconSuccess.svelte';
 export { default as IconTelegram } from './components/IconTelegram.svelte';
 export { default as IconWalletConnect } from './components/IconWalletConnect.svelte';
 export { default as IconWarning } from './components/IconWarning.svelte';
+export { default as RaindexVersionValidator } from './components/RaindexVersionValidator.svelte';
 
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';