@beclab/olaresid 0.1.6 → 0.1.8

package/examples/frontend-demo/src/App.vue

@@ -54,211 +54,213 @@
 				</div>
 			</section>
 
-			<!-- Domain Context Demo -->
-			<section class="card">
-				<h2>📋 Domain Context</h2>
+			<!-- Domain Input - Top Level -->
+			<section class="card domain-input-section">
+				<h2>🏷️ Domain Configuration</h2>
+				<p class="section-description">
+					Enter your domain name to manage its settings below
+				</p>
 				<div class="form-group">
+					<label class="input-label">Domain Name</label>
 					<input
 						v-model="domainName"
-						placeholder="e.g., 1.com"
+						placeholder="e.g., alice.olares.com or 1.com"
 						:disabled="!walletConnected"
-						class="input"
+						class="input input-large"
 					/>
 				</div>
-				<div class="button-grid">
-					<button
-						@click="getMetaInfo"
-						:disabled="
-							!domainName || !walletConnected || loading.metaInfo
-						"
-						class="btn-primary"
-					>
-						{{ loading.metaInfo ? 'Loading...' : 'Get Meta Info' }}
-					</button>
-					<button
-						@click="getOwner"
-						:disabled="
-							!domainName || !walletConnected || loading.owner
-						"
-						class="btn-primary"
-					>
-						{{ loading.owner ? 'Loading...' : 'Get Owner' }}
-					</button>
-					<button
-						@click="checkIsOwner"
-						:disabled="
-							!domainName || !walletConnected || loading.isOwner
-						"
-						class="btn-secondary"
-					>
-						{{ loading.isOwner ? 'Loading...' : 'Is Owner?' }}
-					</button>
-				</div>
-				<div v-if="results.domainContext" class="result">
-					<pre>{{ results.domainContext }}</pre>
+				<div v-if="!domainName && walletConnected" class="info-message">
+					👆 Please enter a domain name to access management features
 				</div>
 			</section>
 
-			<!-- IP Address Management -->
-			<section class="card">
-				<h2>🌐 IP Address Management</h2>
-				<div class="form-group">
-					<input
-						v-model="ipAddress"
-						placeholder="e.g., 192.168.1.100"
-						:disabled="!walletConnected"
-						class="input"
-					/>
-				</div>
-				<div class="button-grid">
-					<button
-						@click="setIP"
-						:disabled="
-							!domainName ||
-							!ipAddress ||
-							!walletConnected ||
-							loading.setIP
-						"
-						class="btn-success"
-					>
-						{{ loading.setIP ? 'Setting...' : 'Set IP' }}
-					</button>
-					<button
-						@click="getIP"
-						:disabled="
-							!domainName || !walletConnected || loading.getIP
-						"
-						class="btn-primary"
-					>
-						{{ loading.getIP ? 'Loading...' : 'Get IP' }}
-					</button>
-					<button
-						@click="removeIP"
-						:disabled="
-							!domainName || !walletConnected || loading.removeIP
-						"
-						class="btn-danger"
-					>
-						{{ loading.removeIP ? 'Removing...' : 'Remove IP' }}
-					</button>
-				</div>
-				<div class="button-grid-small">
-					<button
-						@click="convertIPv4ToBytes4"
-						:disabled="!ipAddress"
-						class="btn-link"
-					>
-						IPv4 → Bytes4
-					</button>
-					<button
-						@click="convertBytes4ToIPv4"
-						:disabled="!ipAddress"
-						class="btn-link"
-					>
-						Bytes4 → IPv4
-					</button>
-				</div>
-				<div v-if="results.ip" class="result success">
-					<pre>{{ results.ip }}</pre>
-				</div>
-			</section>
-
-			<!-- RSA Key Management -->
-			<section class="card">
-				<h2>🔐 RSA Key Management</h2>
-				<div class="button-grid">
-					<button
-						@click="generateRSAKeyPair"
-						:disabled="loading.generateRSA"
-						class="btn-purple"
-					>
-						{{
-							loading.generateRSA
-								? 'Generating...'
-								: '🔑 Generate RSA Key Pair'
-						}}
-					</button>
-				</div>
-
-				<div v-if="rsaKeyPair" class="rsa-keys">
-					<div class="key-display">
-						<strong>Public Key (PEM):</strong>
-						<pre
-							>{{
-								rsaKeyPair.publicKey.substring(0, 100)
-							}}...</pre
+			<!-- Domain Management Area - Only show when domain is entered -->
+			<div v-if="domainName" class="management-area">
+				<!-- Domain Info Demo -->
+				<section class="card subsection">
+					<h3>📋 Domain Info</h3>
+					<div class="button-grid">
+						<button
+							@click="getMetaInfo"
+							:disabled="
+								!domainName ||
+								!walletConnected ||
+								loading.metaInfo
+							"
+							class="btn-primary"
+						>
+							{{
+								loading.metaInfo
+									? 'Loading...'
+									: 'Get Meta Info'
+							}}
+						</button>
+						<button
+							@click="getOwner"
+							:disabled="
+								!domainName || !walletConnected || loading.owner
+							"
+							class="btn-primary"
+						>
+							{{ loading.owner ? 'Loading...' : 'Get Owner' }}
+						</button>
+						<button
+							@click="checkIsOwner"
+							:disabled="
+								!domainName ||
+								!walletConnected ||
+								loading.isOwner
+							"
+							class="btn-secondary"
+						>
+							{{ loading.isOwner ? 'Loading...' : 'Is Owner?' }}
+						</button>
+					</div>
+					<div v-if="results.domainContext" class="result">
+						<pre>{{ results.domainContext }}</pre>
+					</div>
+				</section>
+
+				<!-- IP Address Management -->
+				<section class="card subsection">
+					<h3>🌐 IP Address Management</h3>
+					<div class="form-group">
+						<input
+							v-model="ipAddress"
+							placeholder="e.g., 192.168.1.100"
+							:disabled="!walletConnected"
+							class="input"
+						/>
+					</div>
+					<div class="button-grid">
+						<button
+							@click="setIP"
+							:disabled="
+								!domainName ||
+								!ipAddress ||
+								!walletConnected ||
+								loading.setIP
+							"
+							class="btn-success"
 						>
+							{{ loading.setIP ? 'Setting...' : 'Set IP' }}
+						</button>
+						<button
+							@click="getIP"
+							:disabled="
+								!domainName || !walletConnected || loading.getIP
+							"
+							class="btn-primary"
+						>
+							{{ loading.getIP ? 'Loading...' : 'Get IP' }}
+						</button>
+						<button
+							@click="removeIP"
+							:disabled="
+								!domainName ||
+								!walletConnected ||
+								loading.removeIP
+							"
+							class="btn-danger"
+						>
+							{{ loading.removeIP ? 'Removing...' : 'Remove IP' }}
+						</button>
+					</div>
+					<div v-if="results.ip" class="result success">
+						<pre>{{ results.ip }}</pre>
 					</div>
-					<div class="key-display">
-						<strong>Private Key (PEM):</strong>
-						<pre
-							>{{
-								rsaKeyPair.privateKey.substring(0, 100)
-							}}...</pre
+				</section>
+
+				<!-- RSA Key Management -->
+				<section class="card subsection">
+					<h3>🔐 RSA Key Management</h3>
+					<div class="button-grid">
+						<button
+							@click="generateRSAKeyPair"
+							:disabled="loading.generateRSA"
+							class="btn-purple"
 						>
+							{{
+								loading.generateRSA
+									? 'Generating...'
+									: '🔑 Generate RSA Key Pair'
+							}}
+						</button>
 					</div>
-				</div>
 
-				<div class="button-grid">
-					<button
-						@click="setRSAPublicKey"
-						:disabled="
-							!domainName ||
-							!rsaKeyPair ||
-							!walletConnected ||
-							loading.setRSA
-						"
-						class="btn-success"
-					>
-						{{
-							loading.setRSA ? 'Setting...' : 'Set RSA Public Key'
-						}}
-					</button>
-					<button
-						@click="getRSAPublicKey"
-						:disabled="
-							!domainName || !walletConnected || loading.getRSA
-						"
-						class="btn-primary"
-					>
-						{{
-							loading.getRSA ? 'Loading...' : 'Get RSA Public Key'
-						}}
-					</button>
-					<button
-						@click="removeRSAPublicKey"
-						:disabled="
-							!domainName || !walletConnected || loading.removeRSA
-						"
-						class="btn-danger"
-					>
-						{{
-							loading.removeRSA ? 'Removing...' : 'Remove RSA Key'
-						}}
-					</button>
-				</div>
+					<div v-if="rsaKeyPair" class="rsa-keys">
+						<div class="key-display">
+							<strong>Public Key (PEM):</strong>
+							<pre
+								>{{
+									rsaKeyPair.publicKey.substring(0, 100)
+								}}...</pre
+							>
+						</div>
+						<div class="key-display">
+							<strong>Private Key (PEM):</strong>
+							<pre
+								>{{
+									rsaKeyPair.privateKey.substring(0, 100)
+								}}...</pre
+							>
+						</div>
+					</div>
 
-				<div class="button-grid-small">
-					<button
-						@click="convertPEMToDER"
-						:disabled="!rsaKeyPair"
-						class="btn-link"
-					>
-						PEM → DER
-					</button>
-					<button
-						@click="convertDERToPEM"
-						:disabled="!rsaKeyPair"
-						class="btn-link"
-					>
-						DER → PEM
-					</button>
-				</div>
+					<div class="button-grid">
+						<button
+							@click="setRSAPublicKey"
+							:disabled="
+								!domainName ||
+								!rsaKeyPair ||
+								!walletConnected ||
+								loading.setRSA
+							"
+							class="btn-success"
+						>
+							{{
+								loading.setRSA
+									? 'Setting...'
+									: 'Set RSA Public Key'
+							}}
+						</button>
+						<button
+							@click="getRSAPublicKey"
+							:disabled="
+								!domainName ||
+								!walletConnected ||
+								loading.getRSA
+							"
+							class="btn-primary"
+						>
+							{{
+								loading.getRSA
+									? 'Loading...'
+									: 'Get RSA Public Key'
+							}}
+						</button>
+						<button
+							@click="removeRSAPublicKey"
+							:disabled="
+								!domainName ||
+								!walletConnected ||
+								loading.removeRSA
+							"
+							class="btn-danger"
+						>
+							{{
+								loading.removeRSA
+									? 'Removing...'
+									: 'Remove RSA Key'
+							}}
+						</button>
+					</div>
 
-				<div v-if="results.rsa" class="result purple">
-					<pre>{{ results.rsa }}</pre>
-				</div>
-			</section>
+					<div v-if="results.rsa" class="result purple">
+						<pre>{{ results.rsa }}</pre>
+					</div>
+				</section>
+			</div>
 
 			<!-- Toast Messages -->
 			<div v-if="toast.show" class="toast" :class="toast.type">
@@ -274,8 +276,7 @@ import * as OlaresIDModule from '@beclab/olaresid';
 import { ethers } from 'ethers';
 
 const OlaresID = (OlaresIDModule as any).default || OlaresIDModule;
-const { createRsaKeyPair, pemToDer, derToPem, ipv4ToBytes4, bytes4ToIpv4 } =
-	OlaresIDModule as any;
+const { createRsaKeyPair } = OlaresIDModule as any;
 
 declare global {
 	interface Window {
@@ -355,7 +356,6 @@ const handleChainChanged = async (chainId: string) => {
 
 	if (!isSupportedNetwork(chainId)) {
 		networkClass.value = 'unsupported';
-		// 切换到不支持的网络时清除 signer
 		if (walletConnected.value) {
 			olaresId.clearSigner();
 		}
@@ -416,7 +416,6 @@ const reinitializeOlaresId = async () => {
 			networkClass.value = 'testnet';
 		}
 
-		// 重新设置 signer（如果钱包已连接）
 		if (walletConnected.value && walletAddress.value) {
 			await setSignerToOlaresId();
 			console.log(
@@ -534,7 +533,6 @@ const switchToMainnet = async () => {
 		});
 	} catch (error: any) {
 		if (error.code === 4902) {
-			// 网络不存在，添加网络
 			try {
 				await window.ethereum.request({
 					method: 'wallet_addEthereumChain',
@@ -599,7 +597,7 @@ const switchToTestnet = async () => {
 	}
 };
 
-// Domain Context Methods
+// Domain Info Methods
 const getMetaInfo = async () => {
 	loading.metaInfo = true;
 	results.domainContext = '';
@@ -709,26 +707,6 @@ const removeIP = async () => {
 	}
 };
 
-const convertIPv4ToBytes4 = () => {
-	try {
-		const bytes4 = ipv4ToBytes4(ipAddress.value);
-		results.ip = `IPv4 to Bytes4:\n${ipAddress.value} → ${bytes4}`;
-		showToast('Converted!', 'success');
-	} catch (err: any) {
-		showToast('Invalid IP address', 'error');
-	}
-};
-
-const convertBytes4ToIPv4 = () => {
-	try {
-		const ip = bytes4ToIpv4(ipAddress.value);
-		results.ip = `Bytes4 to IPv4:\n${ipAddress.value} → ${ip}`;
-		showToast('Converted!', 'success');
-	} catch (err: any) {
-		showToast('Invalid bytes4 format', 'error');
-	}
-};
-
 // RSA Methods
 const generateRSAKeyPair = async () => {
 	loading.generateRSA = true;
@@ -804,27 +782,6 @@ const removeRSAPublicKey = async () => {
 		loading.removeRSA = false;
 	}
 };
-
-const convertPEMToDER = () => {
-	try {
-		const der = pemToDer(rsaKeyPair.value.publicKey);
-		results.rsa = `PEM to DER:\n${der.substring(0, 100)}...`;
-		showToast('Converted to DER!', 'success');
-	} catch (err: any) {
-		showToast('Conversion failed', 'error');
-	}
-};
-
-const convertDERToPEM = () => {
-	try {
-		const der = pemToDer(rsaKeyPair.value.publicKey);
-		const pem = derToPem(der);
-		results.rsa = `DER to PEM:\n${pem}`;
-		showToast('Converted to PEM!', 'success');
-	} catch (err: any) {
-		showToast('Conversion failed', 'error');
-	}
-};
 </script>
 
 <style scoped>
@@ -946,6 +903,102 @@ main {
 	cursor: not-allowed;
 }
 
+/* Domain Input Section - Top Level */
+.domain-input-section {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: white;
+	border: 3px solid #667eea;
+}
+
+.domain-input-section h2 {
+	color: white;
+	margin-bottom: 0.5rem;
+}
+
+.section-description {
+	color: rgba(255, 255, 255, 0.9);
+	font-size: 0.95rem;
+	margin-bottom: 1rem;
+}
+
+.input-label {
+	display: block;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+	color: white;
+	font-size: 1rem;
+}
+
+.input-large {
+	font-size: 1.1rem;
+	padding: 1rem;
+	background: white;
+	color: #333;
+}
+
+.info-message {
+	background: rgba(255, 255, 255, 0.2);
+	padding: 0.75rem;
+	border-radius: 8px;
+	margin-top: 0.75rem;
+	text-align: center;
+	font-size: 0.95rem;
+	color: white;
+	border: 1px dashed rgba(255, 255, 255, 0.5);
+}
+
+/* Management Area - Container for subsections */
+.management-area {
+	margin-top: 2rem;
+	padding-left: 1.5rem;
+	border-left: 4px solid #667eea;
+	position: relative;
+}
+
+.management-area::before {
+	content: '';
+	position: absolute;
+	left: -2px;
+	top: 0;
+	bottom: 0;
+	width: 4px;
+	background: linear-gradient(180deg, #667eea 0%, transparent 100%);
+}
+
+/* Subsection - Child cards */
+.subsection {
+	position: relative;
+	margin-bottom: 1.5rem;
+	border-left: 3px solid #e0e0e0;
+	padding-left: 1.5rem;
+	margin-left: -1.5rem;
+}
+
+.subsection::before {
+	content: '';
+	position: absolute;
+	left: -1.5rem;
+	top: 2rem;
+	width: 1rem;
+	height: 2px;
+	background: #e0e0e0;
+}
+
+.subsection h3 {
+	font-size: 1.25rem;
+	color: #555;
+	margin-bottom: 1rem;
+	font-weight: 600;
+}
+
+.subsection:hover {
+	border-left-color: #667eea;
+}
+
+.subsection:hover::before {
+	background: #667eea;
+}
+
 .button-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@@ -968,6 +1021,8 @@ button {
 	font-weight: 600;
 	cursor: pointer;
 	transition: all 0.3s;
+	min-width: 150px;
+	width: 100%;
 }
 
 button:disabled {

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

@@ -2,4 +2,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import './style.css';
 
+import { Buffer } from 'buffer';
+(window as any).Buffer = Buffer;
+
 createApp(App).mount('#app');

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

@@ -11,11 +11,13 @@ body {
 	line-height: 1.6;
 	color: #333;
 	background: #f5f5f5;
+	overflow-x: hidden;
 }
 
 /* App layout */
 .app {
 	max-width: 900px;
+	width: 100%;
 	margin: 0 auto;
 	padding: 20px;
 	min-height: 100vh;
@@ -116,6 +118,8 @@ button:disabled {
 /* Main content */
 main {
 	flex: 1;
+	width: 100%;
+	overflow-x: hidden;
 }
 
 .section {
@@ -123,6 +127,8 @@ main {
 	padding: 30px;
 	border-radius: 8px;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	width: 100%;
+	overflow: hidden;
 }
 
 .section h2 {
@@ -170,6 +176,9 @@ input:disabled {
 	background: #f8f9fa;
 	border-radius: 6px;
 	border-left: 4px solid #3498db;
+	width: 100%;
+	overflow: hidden;
+	word-wrap: break-word;
 }
 
 .result h3 {
@@ -216,6 +225,8 @@ input:disabled {
 	display: flex;
 	gap: 10px;
 	align-items: center;
+	width: 100%;
+	min-width: 0;
 }
 
 code {
@@ -228,7 +239,10 @@ code {
 	font-family: 'Monaco', 'Courier New', monospace;
 	font-size: 0.85rem;
 	word-break: break-all;
+	overflow-wrap: break-word;
 	color: #333;
+	max-width: 100%;
+	overflow-x: auto;
 }
 
 pre {
@@ -242,6 +256,10 @@ pre {
 	max-height: 500px;
 	overflow-y: auto;
 	border: 1px solid #ddd;
+	word-break: break-all;
+	overflow-wrap: break-word;
+	white-space: pre-wrap;
+	max-width: 100%;
 }
 
 /* Error display */

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

@@ -20,6 +20,7 @@ module.exports = (env, argv) => {
 				'@': path.resolve(__dirname, 'src')
 			},
 			fallback: {
+				buffer: require.resolve('buffer/'),
 				crypto: false,
 				fs: false,
 				path: false,