@beclab/olaresid 0.1.5 → 0.1.6

package/examples/frontend-demo/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import './style.css';
+
+createApp(App).mount('#app');

package/examples/frontend-demo/src/style.css

@@ -0,0 +1,323 @@
+/* Reset and base styles */
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', Arial, sans-serif;
+	line-height: 1.6;
+	color: #333;
+	background: #f5f5f5;
+}
+
+/* App layout */
+.app {
+	max-width: 900px;
+	margin: 0 auto;
+	padding: 20px;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+/* Header */
+header {
+	text-align: center;
+	margin-bottom: 30px;
+	padding: 20px;
+	background: white;
+	border-radius: 8px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+header h1 {
+	font-size: 2rem;
+	margin-bottom: 15px;
+	color: #2c3e50;
+}
+
+nav {
+	display: flex;
+	gap: 10px;
+	justify-content: center;
+	flex-wrap: wrap;
+}
+
+/* Buttons */
+button {
+	padding: 10px 20px;
+	border: 2px solid #3498db;
+	background: white;
+	color: #3498db;
+	font-size: 1rem;
+	cursor: pointer;
+	border-radius: 6px;
+	transition: all 0.3s ease;
+	font-weight: 500;
+}
+
+button:hover {
+	background: #3498db;
+	color: white;
+}
+
+button.active {
+	background: #3498db;
+	color: white;
+}
+
+button:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+	background: #ddd;
+	border-color: #ddd;
+	color: #999;
+}
+
+.btn-primary {
+	background: #3498db;
+	color: white;
+	border-color: #3498db;
+}
+
+.btn-primary:hover:not(:disabled) {
+	background: #2980b9;
+	border-color: #2980b9;
+}
+
+.btn-secondary {
+	background: #95a5a6;
+	color: white;
+	border-color: #95a5a6;
+	margin-top: 15px;
+}
+
+.btn-secondary:hover:not(:disabled) {
+	background: #7f8c8d;
+	border-color: #7f8c8d;
+}
+
+.btn-copy {
+	padding: 5px 10px;
+	font-size: 0.9rem;
+	background: #ecf0f1;
+	border: 1px solid #bdc3c7;
+	color: #2c3e50;
+}
+
+.btn-copy:hover {
+	background: #bdc3c7;
+	color: #2c3e50;
+}
+
+/* Main content */
+main {
+	flex: 1;
+}
+
+.section {
+	background: white;
+	padding: 30px;
+	border-radius: 8px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.section h2 {
+	font-size: 1.5rem;
+	margin-bottom: 10px;
+	color: #2c3e50;
+}
+
+.subtitle {
+	color: #7f8c8d;
+	margin-bottom: 20px;
+	font-size: 0.95rem;
+}
+
+/* Input group */
+.input-group {
+	display: flex;
+	gap: 10px;
+	margin-bottom: 20px;
+}
+
+input {
+	flex: 1;
+	padding: 12px;
+	border: 2px solid #ddd;
+	border-radius: 6px;
+	font-size: 1rem;
+	transition: border-color 0.3s ease;
+}
+
+input:focus {
+	outline: none;
+	border-color: #3498db;
+}
+
+input:disabled {
+	background: #f5f5f5;
+	cursor: not-allowed;
+}
+
+/* Result display */
+.result {
+	margin-top: 25px;
+	padding: 20px;
+	background: #f8f9fa;
+	border-radius: 6px;
+	border-left: 4px solid #3498db;
+}
+
+.result h3 {
+	margin-bottom: 15px;
+	color: #27ae60;
+	font-size: 1.2rem;
+}
+
+.result-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 15px;
+}
+
+.field {
+	margin-bottom: 15px;
+}
+
+.field:last-child {
+	margin-bottom: 0;
+}
+
+.field label {
+	display: block;
+	font-weight: 600;
+	margin-bottom: 5px;
+	color: #555;
+	font-size: 0.9rem;
+}
+
+.field.warning {
+	background: #fff3cd;
+	padding: 15px;
+	border-radius: 6px;
+	border-left: 4px solid #f39c12;
+}
+
+.field.warning label {
+	color: #856404;
+}
+
+.value-row {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+}
+
+code {
+	flex: 1;
+	display: block;
+	padding: 10px;
+	background: white;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	font-family: 'Monaco', 'Courier New', monospace;
+	font-size: 0.85rem;
+	word-break: break-all;
+	color: #333;
+}
+
+pre {
+	background: white;
+	padding: 15px;
+	border-radius: 6px;
+	overflow-x: auto;
+	font-family: 'Monaco', 'Courier New', monospace;
+	font-size: 0.85rem;
+	line-height: 1.5;
+	max-height: 500px;
+	overflow-y: auto;
+	border: 1px solid #ddd;
+}
+
+/* Error display */
+.error {
+	margin-top: 20px;
+	padding: 15px;
+	background: #f8d7da;
+	color: #721c24;
+	border-radius: 6px;
+	border-left: 4px solid #dc3545;
+}
+
+/* Toast notification */
+.toast {
+	position: fixed;
+	bottom: 30px;
+	right: 30px;
+	background: #27ae60;
+	color: white;
+	padding: 15px 25px;
+	border-radius: 6px;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+	animation: slideIn 0.3s ease;
+	z-index: 1000;
+}
+
+@keyframes slideIn {
+	from {
+		transform: translateY(100px);
+		opacity: 0;
+	}
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+/* Footer */
+footer {
+	text-align: center;
+	padding: 20px;
+	color: #7f8c8d;
+	font-size: 0.9rem;
+	margin-top: 30px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+	.app {
+		padding: 10px;
+	}
+
+	header h1 {
+		font-size: 1.5rem;
+	}
+
+	.section {
+		padding: 20px;
+	}
+
+	.input-group {
+		flex-direction: column;
+	}
+
+	.toast {
+		right: 10px;
+		left: 10px;
+		bottom: 10px;
+	}
+
+	nav {
+		gap: 5px;
+	}
+
+	button {
+		padding: 8px 16px;
+		font-size: 0.9rem;
+	}
+}

package/examples/frontend-demo/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "skipLibCheck": true,
+
+        /* Webpack mode */
+        "moduleResolution": "node",
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "jsx": "preserve",
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/examples/frontend-demo/webpack.config.js

@@ -0,0 +1,86 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { VueLoaderPlugin } = require('vue-loader');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = (env, argv) => {
+	const isDevelopment = argv.mode === 'development';
+
+	return {
+		mode: isDevelopment ? 'development' : 'production',
+		entry: './src/main.ts',
+		output: {
+			path: path.resolve(__dirname, 'dist'),
+			filename: isDevelopment ? '[name].js' : '[name].[contenthash].js',
+			clean: true
+		},
+		resolve: {
+			extensions: ['.ts', '.js', '.vue', '.json', '.wasm'],
+			alias: {
+				'@': path.resolve(__dirname, 'src')
+			},
+			fallback: {
+				crypto: false,
+				fs: false,
+				path: false,
+				'fs/promises': false
+			}
+		},
+		module: {
+			rules: [
+				{
+					test: /\.vue$/,
+					loader: 'vue-loader'
+				},
+				{
+					test: /\.ts$/,
+					loader: 'ts-loader',
+					options: {
+						appendTsSuffixTo: [/\.vue$/],
+						transpileOnly: true
+					},
+					exclude: /node_modules/
+				},
+				{
+					test: /\.css$/,
+					use: ['style-loader', 'css-loader']
+				},
+				{
+					test: /\.wasm$/,
+					type: 'webassembly/async'
+				}
+			]
+		},
+		plugins: [
+			new VueLoaderPlugin(),
+			new HtmlWebpackPlugin({
+				template: './index.html',
+				inject: true
+			}),
+			new CopyWebpackPlugin({
+				patterns: [
+					{
+						from: path.resolve(
+							__dirname,
+							'../../node_modules/@trustwallet/wallet-core/dist/lib/wallet-core.wasm'
+						),
+						to: 'wallet-core.wasm'
+					}
+				]
+			})
+		],
+		experiments: {
+			asyncWebAssembly: true,
+			topLevelAwait: true
+		},
+		devServer: {
+			port: 9000,
+			hot: true,
+			open: true
+		},
+		devtool: isDevelopment ? 'eval-source-map' : false,
+		performance: {
+			hints: false
+		}
+	};
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@beclab/olaresid",
-    "version": "0.1.5",
+    "version": "0.1.6",
     "description": "DID Contract SDK with CLI tool",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

package/src/utils/crypto-utils.ts

@@ -92,6 +92,7 @@ let loadingPromise: Promise<any> | null = null;
 /**
  * Load Trust Wallet Core (lazy loading)
  * Works in both Node.js and browser environments
+ * Handles different module export formats (CommonJS vs ESM)
  */
 async function loadWalletCore(): Promise<any> {
 	// Return cached instance if already loaded
@@ -108,8 +109,33 @@ async function loadWalletCore(): Promise<any> {
 	loadingPromise = (async () => {
 		try {
 			// Dynamic import works in both Node.js ESM and browser ESM
-			const { initWasm } = await import('@trustwallet/wallet-core');
-			walletCore = await initWasm();
+			const WalletCoreModule = await import('@trustwallet/wallet-core');
+
+			// Handle different export formats (CommonJS vs ESM)
+			let initWasmFunc: any;
+			if (WalletCoreModule.initWasm) {
+				// ESM named export
+				initWasmFunc = WalletCoreModule.initWasm;
+			} else if (
+				WalletCoreModule.default &&
+				(WalletCoreModule.default as any).initWasm
+			) {
+				// ESM default export with initWasm
+				initWasmFunc = (WalletCoreModule.default as any).initWasm;
+			} else if (WalletCoreModule.default) {
+				// Default export is the function itself
+				initWasmFunc = WalletCoreModule.default;
+			} else {
+				// Module itself is the function
+				initWasmFunc = WalletCoreModule as any;
+			}
+
+			// Call the init function
+			if (typeof initWasmFunc === 'function') {
+				walletCore = await initWasmFunc();
+			} else {
+				throw new Error('initWasm is not a function');
+			}
 
 			walletCoreLoaded = true;
 			return walletCore;
@@ -375,7 +401,6 @@ export async function getEd25519JwkFromMnemonic(mnemonic: string): Promise<{
 	idBytes.set(publicKeyBytes, ED25519_CODEC_ID.length);
 	const id = base58btc.encode(idBytes);
 	const did = `did:key:${id}`;
-	const keyId = `${did}#${id}`;
 
 	// Base64url encode the keys
 	const x = base64url.baseEncode(publicKeyBytes);
@@ -387,7 +412,7 @@ export async function getEd25519JwkFromMnemonic(mnemonic: string): Promise<{
 		crv: 'Ed25519', // Curve: Ed25519
 		alg: 'EdDSA', // Algorithm: EdDSA
 		use: 'sig', // Use: signature
-		kid: keyId, // Key ID
+		kid: did, // DID
 		x: x // Public key parameter
 	};
 

package/examples/quasar-demo/.eslintrc.js

@@ -1,23 +0,0 @@
-module.exports = {
-	root: true,
-	parserOptions: {
-		parser: '@typescript-eslint/parser',
-		ecmaVersion: 2021
-	},
-	env: {
-		browser: true,
-		es2021: true,
-		node: true
-	},
-	extends: [
-		'plugin:vue/vue3-essential',
-		'eslint:recommended',
-		'@vue/typescript/recommended',
-		'prettier'
-	],
-	plugins: ['vue', '@typescript-eslint'],
-	rules: {
-		'@typescript-eslint/no-explicit-any': 'off',
-		'@typescript-eslint/no-unused-vars': 'warn'
-	}
-};

package/examples/quasar-demo/.quasar/app.js

@@ -1,43 +0,0 @@
-/* eslint-disable */
-/**
- * THIS FILE IS GENERATED AUTOMATICALLY.
- * DO NOT EDIT.
- *
- * You are probably looking on adding startup/initialization code.
- * Use "quasar new boot <name>" and add it there.
- * One boot file per concern. Then reference the file(s) in quasar.config.js > boot:
- * boot: ['file', ...] // do not add ".js" extension to it.
- *
- * Boot files are your "main.js"
- **/
-
-import { Quasar } from 'quasar';
-import { markRaw } from 'vue';
-import RootComponent from 'app/src/App.vue';
-
-import createRouter from 'app/src/router/index';
-
-export default async function (createAppFn, quasarUserOptions) {
-	// Create the app instance.
-	// Here we inject into it the Quasar UI, the router & possibly the store.
-	const app = createAppFn(RootComponent);
-
-	app.config.performance = true;
-
-	app.use(Quasar, quasarUserOptions);
-
-	const router = markRaw(
-		typeof createRouter === 'function'
-			? await createRouter({})
-			: createRouter
-	);
-
-	// Expose the app, the router and the store.
-	// Note that we are not mounting the app here, since bootstrapping will be
-	// different depending on whether we are in a browser or on the server.
-	return {
-		app,
-
-		router
-	};
-}

package/examples/quasar-demo/.quasar/client-entry.js

@@ -1,38 +0,0 @@
-/* eslint-disable */
-/**
- * THIS FILE IS GENERATED AUTOMATICALLY.
- * DO NOT EDIT.
- *
- * You are probably looking on adding startup/initialization code.
- * Use "quasar new boot <name>" and add it there.
- * One boot file per concern. Then reference the file(s) in quasar.config.js > boot:
- * boot: ['file', ...] // do not add ".js" extension to it.
- *
- * Boot files are your "main.js"
- **/
-
-import { createApp } from 'vue';
-
-import '@quasar/extras/roboto-font/roboto-font.css';
-
-import '@quasar/extras/material-icons/material-icons.css';
-
-// We load Quasar stylesheet file
-import 'quasar/dist/quasar.css';
-
-import 'src/css/app.scss';
-
-import createQuasarApp from './app.js';
-import quasarUserOptions from './quasar-user-options.js';
-
-console.info('[Quasar] Running SPA.');
-
-const publicPath = `/`;
-
-async function start({ app, router }) {
-	app.use(router);
-
-	app.mount('#q-app');
-}
-
-createQuasarApp(createApp, quasarUserOptions).then(start);