@rainlanguage/ui-components 0.0.1-alpha.10

package/dist/utils/lightweightChartsThemes.d.ts

@@ -0,0 +1,52 @@
+import { ColorType } from 'lightweight-charts';
+export interface ChartTheme {
+    layout: {
+        textColor: string;
+        background: {
+            type: ColorType;
+            color: string;
+        };
+    };
+    grid: {
+        vertLines: {
+            color: string;
+        };
+        horzLines: {
+            color: string;
+        };
+    };
+}
+export declare const darkChartTheme: {
+    layout: {
+        textColor: string;
+        background: {
+            type: ColorType;
+            color: string;
+        };
+    };
+    grid: {
+        vertLines: {
+            color: string;
+        };
+        horzLines: {
+            color: string;
+        };
+    };
+};
+export declare const lightChartTheme: {
+    layout: {
+        textColor: string;
+        background: {
+            type: ColorType;
+            color: string;
+        };
+    };
+    grid: {
+        vertLines: {
+            color: string;
+        };
+        horzLines: {
+            color: string;
+        };
+    };
+};

package/dist/utils/lightweightChartsThemes.js

@@ -0,0 +1,21 @@
+import { ColorType } from 'lightweight-charts';
+export const darkChartTheme = {
+    layout: {
+        textColor: 'white',
+        background: { type: ColorType.Solid, color: 'transparent' }
+    },
+    grid: {
+        vertLines: { color: '#484848' },
+        horzLines: { color: '#484848' }
+    }
+};
+export const lightChartTheme = {
+    layout: {
+        textColor: 'black',
+        background: { type: ColorType.Solid, color: 'transparent' }
+    },
+    grid: {
+        vertLines: { color: '#ECECEC' },
+        horzLines: { color: '#ECECEC' }
+    }
+};

package/dist/utils/number.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Converts a bigint string value to a percentage with optionally given number of decimal points
+ * @param value - The bigint string value
+ * @param valueDecimals - The bigint string value decimals point
+ * @param decimalPoint - (optional) The number of digits to keep after "." in final result, defaults to valueDecimals
+ */
+export declare function bigintStringToPercentage(value: string, valueDecimals: number, finalDecimalsDigits?: number): string;
+/**
+ * Converts a bigint value to a floating point number with the specified number of decimals
+ * @param value - The bigint value to convert
+ * @param decimals - The number of decimal places to use in the conversion
+ * @returns The converted floating point number
+ */
+export declare function bigintToFloat(value: bigint, decimals: number): number;

package/dist/utils/number.js

@@ -0,0 +1,43 @@
+import { formatUnits } from 'viem';
+/**
+ * Converts a bigint string value to a percentage with optionally given number of decimal points
+ * @param value - The bigint string value
+ * @param valueDecimals - The bigint string value decimals point
+ * @param decimalPoint - (optional) The number of digits to keep after "." in final result, defaults to valueDecimals
+ */
+export function bigintStringToPercentage(value, valueDecimals, finalDecimalsDigits) {
+    const finalDecimals = typeof finalDecimalsDigits !== 'undefined' ? finalDecimalsDigits : valueDecimals;
+    let valueString = formatUnits(BigInt(value) * 100n, valueDecimals);
+    const index = valueString.indexOf('.');
+    if (index > -1) {
+        valueString = valueString.substring(0, finalDecimals === 0 ? index : index + finalDecimals + 1);
+    }
+    return valueString;
+}
+/**
+ * Converts a bigint value to a floating point number with the specified number of decimals
+ * @param value - The bigint value to convert
+ * @param decimals - The number of decimal places to use in the conversion
+ * @returns The converted floating point number
+ */
+export function bigintToFloat(value, decimals) {
+    return parseFloat(formatUnits(value, decimals));
+}
+if (import.meta.vitest) {
+    const { it, expect } = import.meta.vitest;
+    it('should get percentage string from bigint string', () => {
+        const value = '123456000000000000';
+        const decimals = 18;
+        const finalDecimalsDigits = 4;
+        const result = bigintStringToPercentage(value, decimals, finalDecimalsDigits);
+        const expected = '12.3456';
+        expect(result).toEqual(expected);
+    });
+    it('should convert bigint to float', () => {
+        const value = 123456000000000000n;
+        const decimals = 18;
+        const result = bigintToFloat(value, decimals);
+        const expected = 0.123456;
+        expect(result).toEqual(expected);
+    });
+}

package/dist/utils/time.d.ts

@@ -0,0 +1,12 @@
+import type { UTCTimestamp } from 'lightweight-charts';
+export declare function formatTimestampSecondsAsLocal(timestampSeconds: bigint): string;
+export declare function timestampSecondsToUTCTimestamp(timestampSeconds: bigint): UTCTimestamp;
+/**
+ * Method to put a timeout on a promise, throws the exception if promise is not settled within the time
+ * @param promise - The original promise
+ * @param time - The time in ms
+ * @param exception - The exception to reject with if time runs out before original promise settlement
+ * @returns A new promise that gets settled with initial promise settlement or rejected with exception value
+ * if the time runs out before the main promise settlement
+ */
+export declare function promiseTimeout<T>(promise: Promise<T>, time: number, exception: unknown): Promise<T>;

package/dist/utils/time.js

@@ -0,0 +1,27 @@
+import dayjs from 'dayjs';
+import bigIntSupport from 'dayjs/plugin/bigIntSupport';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+dayjs.extend(bigIntSupport);
+dayjs.extend(localizedFormat);
+export function formatTimestampSecondsAsLocal(timestampSeconds) {
+    return dayjs(timestampSeconds * BigInt('1000')).format('L LT');
+}
+export function timestampSecondsToUTCTimestamp(timestampSeconds) {
+    return dayjs(timestampSeconds * BigInt('1000')).unix();
+}
+/**
+ * Method to put a timeout on a promise, throws the exception if promise is not settled within the time
+ * @param promise - The original promise
+ * @param time - The time in ms
+ * @param exception - The exception to reject with if time runs out before original promise settlement
+ * @returns A new promise that gets settled with initial promise settlement or rejected with exception value
+ * if the time runs out before the main promise settlement
+ */
+export async function promiseTimeout(promise, time, exception) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let timeout;
+    return Promise.race([
+        promise,
+        new Promise((_resolve, reject) => (timeout = setTimeout(reject, time, exception)))
+    ]).finally(() => clearTimeout(timeout));
+}

package/dist/utils/vault.d.ts

@@ -0,0 +1,2 @@
+import type { SgVault } from '@rainlanguage/orderbook/js_api';
+export declare const vaultBalanceDisplay: (vault: SgVault) => string;

package/dist/utils/vault.js

@@ -0,0 +1,29 @@
+import { formatUnits } from 'viem';
+export const vaultBalanceDisplay = (vault) => {
+    return formatUnits(BigInt(vault.balance), +(vault.token?.decimals || 0));
+};
+if (import.meta.vitest) {
+    const { it, expect } = import.meta.vitest;
+    it('formats the vault balance correctly', () => {
+        const vault = {
+            id: '1',
+            balance: '1000000000000000000',
+            token: {
+                id: '1',
+                decimals: '18',
+                address: '0x00'
+            },
+            vaultId: '1',
+            owner: '0x00',
+            ordersAsInput: [],
+            ordersAsOutput: [],
+            balanceChanges: [],
+            orderbook: {
+                id: '0x00'
+            }
+        };
+        expect(vaultBalanceDisplay(vault)).toEqual('1');
+        vault.token.decimals = '6';
+        expect(vaultBalanceDisplay(vault)).toEqual('1000000000000');
+    });
+}

package/package.json

@@ -0,0 +1,86 @@
+{
+	"name": "@rainlanguage/ui-components",
+	"version": "0.0.1-alpha.10",
+	"description": "A component library for building Svelte applications to be used with Raindex.",
+	"license": "LicenseRef-DCL-1.0",
+	"author": "Rain Open Source Software Ltd",
+	"main": "dist/index.js",
+	"module": "dist/index.js",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"require": "./dist/index.js",
+			"svelte": "./dist/index.js"
+		},
+		"./services": {
+			"types": "./dist/services/index.d.ts",
+			"import": "./dist/services/index.js",
+			"require": "./dist/services/index.js",
+			"svelte": "./dist/services/index.js"
+		}
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"build:watch": "vite build --watch & svelte-package --watch",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write src",
+		"lint": "prettier --list-different src && eslint src",
+		"lint-check": "eslint src",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run",
+		"format-check": "prettier --list-different src",
+		"svelte-lint-format-check": "npm run lint && npm run check"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"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.10",
+		"@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"
+	}
+}