@beclab/olaresid 0.1.5 → 0.1.7

package/examples/quasar-demo/src/pages/IndexPage.vue

@@ -1,905 +0,0 @@
-<template>
-	<q-page class="flex flex-center">
-		<div class="q-pa-md">
-			<h3 class="text-h3 q-mb-md">OlaresID Demo</h3>
-
-			<q-card class="q-pa-md" style="min-width: 400px">
-				<q-separator />
-
-				<q-card-section>
-					<div class="text-h6 q-mb-md">MetaMask Connection</div>
-
-					<div v-if="currentNetwork" class="q-mb-md">
-						<q-chip
-							:color="
-								currentNetwork === 'Mainnet'
-									? 'orange'
-									: currentNetwork === 'Testnet'
-									? 'blue'
-									: 'red'
-							"
-							text-color="white"
-							:icon="
-								currentNetwork === 'Unsupported'
-									? 'warning'
-									: 'link'
-							"
-						>
-							{{ currentNetwork }} ({{ currentChainId }})
-						</q-chip>
-						<div
-							v-if="currentNetwork === 'Unsupported'"
-							class="text-caption text-red q-mt-sm"
-						>
-							Please switch to Optimism Mainnet or OP Sepolia
-							Testnet
-						</div>
-					</div>
-
-					<div v-if="!walletConnected">
-						<q-btn
-							color="primary"
-							label="Connect MetaMask"
-							icon="account_balance_wallet"
-							@click="connectMetaMask"
-							:loading="connecting"
-						/>
-					</div>
-					<div v-else>
-						<q-banner class="bg-green text-white q-mb-md" rounded>
-							<template v-slot:avatar>
-								<q-icon name="check_circle" />
-							</template>
-							Connected: {{ walletAddress }}
-						</q-banner>
-						<q-btn
-							flat
-							color="negative"
-							label="Disconnect"
-							@click="disconnectWallet"
-						/>
-					</div>
-				</q-card-section>
-
-				<q-separator />
-
-				<!-- Domain Context Demo -->
-				<q-card-section>
-					<div class="text-h6 q-mb-md">📋 Domain Context</div>
-					<q-input
-						v-model="domainName"
-						label="Domain Name"
-						placeholder="e.g., 1.com"
-						outlined
-						class="q-mb-md"
-						:disable="!walletConnected"
-					/>
-					<div class="q-gutter-sm">
-						<q-btn
-							color="primary"
-							label="Get Meta Info"
-							@click="getMetaInfo"
-							:loading="loading.metaInfo"
-							:disable="!domainName || !walletConnected"
-						/>
-						<q-btn
-							color="primary"
-							label="Get Owner"
-							@click="getOwner"
-							:loading="loading.owner"
-							:disable="!domainName || !walletConnected"
-						/>
-						<q-btn
-							color="secondary"
-							label="Is Owner?"
-							@click="checkIsOwner"
-							:loading="loading.isOwner"
-							:disable="!domainName || !walletConnected"
-						/>
-					</div>
-					<div v-if="results.domainContext" class="q-mt-md">
-						<q-banner class="bg-blue-1">
-							<pre class="text-caption">{{
-								results.domainContext
-							}}</pre>
-						</q-banner>
-					</div>
-				</q-card-section>
-
-				<q-separator />
-
-				<!-- IP Demo -->
-				<q-card-section>
-					<div class="text-h6 q-mb-md">🌐 IP Address Management</div>
-					<q-input
-						v-model="ipAddress"
-						label="IP Address"
-						placeholder="e.g., 192.168.1.100"
-						outlined
-						class="q-mb-md"
-						:disable="!walletConnected"
-					/>
-					<div class="q-gutter-sm q-mb-md">
-						<q-btn
-							color="green"
-							label="Set IP"
-							@click="setIP"
-							:loading="loading.setIP"
-							:disable="
-								!domainName || !ipAddress || !walletConnected
-							"
-						/>
-						<q-btn
-							color="primary"
-							label="Get IP"
-							@click="getIP"
-							:loading="loading.getIP"
-							:disable="!domainName || !walletConnected"
-						/>
-						<q-btn
-							color="negative"
-							label="Remove IP"
-							@click="removeIP"
-							:loading="loading.removeIP"
-							:disable="!domainName || !walletConnected"
-						/>
-					</div>
-					<div class="q-gutter-sm">
-						<q-btn
-							flat
-							color="blue"
-							label="IPv4 to Bytes4"
-							@click="convertIPv4ToBytes4"
-							:disable="!ipAddress"
-						/>
-						<q-btn
-							flat
-							color="blue"
-							label="Bytes4 to IPv4"
-							@click="convertBytes4ToIPv4"
-							:disable="!ipAddress"
-						/>
-					</div>
-					<div v-if="results.ip" class="q-mt-md">
-						<q-banner class="bg-green-1">
-							<pre class="text-caption">{{ results.ip }}</pre>
-						</q-banner>
-					</div>
-				</q-card-section>
-
-				<q-separator />
-
-				<!-- RSA Key Pair Demo -->
-				<q-card-section>
-					<div class="text-h6 q-mb-md">🔐 RSA Key Management</div>
-					<div class="q-gutter-sm q-mb-md">
-						<q-btn
-							color="purple"
-							label="Generate RSA Key Pair"
-							@click="generateRSAKeyPair"
-							:loading="loading.generateRSA"
-						/>
-					</div>
-					<div v-if="rsaKeyPair" class="q-mb-md">
-						<q-banner class="bg-purple-1">
-							<div class="text-caption">
-								<strong>Public Key (PEM):</strong>
-								<pre
-									>{{
-										rsaKeyPair.publicKey.substring(0, 100)
-									}}...</pre
-								>
-								<strong>Private Key (PEM):</strong>
-								<pre
-									>{{
-										rsaKeyPair.privateKey.substring(0, 100)
-									}}...</pre
-								>
-							</div>
-						</q-banner>
-					</div>
-					<div class="q-gutter-sm q-mb-md">
-						<q-btn
-							color="green"
-							label="Set RSA Public Key"
-							@click="setRSAPublicKey"
-							:loading="loading.setRSA"
-							:disable="
-								!domainName || !rsaKeyPair || !walletConnected
-							"
-						/>
-						<q-btn
-							color="primary"
-							label="Get RSA Public Key"
-							@click="getRSAPublicKey"
-							:loading="loading.getRSA"
-							:disable="!domainName || !walletConnected"
-						/>
-						<q-btn
-							color="negative"
-							label="Remove RSA Key"
-							@click="removeRSAPublicKey"
-							:loading="loading.removeRSA"
-							:disable="!domainName || !walletConnected"
-						/>
-					</div>
-					<div class="q-gutter-sm">
-						<q-btn
-							flat
-							color="blue"
-							label="PEM to DER"
-							@click="convertPEMToDER"
-							:disable="!rsaKeyPair"
-						/>
-						<q-btn
-							flat
-							color="blue"
-							label="DER to PEM"
-							@click="convertDERToPEM"
-							:disable="!rsaKeyPair"
-						/>
-					</div>
-					<div v-if="results.rsa" class="q-mt-md">
-						<q-banner class="bg-purple-1">
-							<pre class="text-caption">{{ results.rsa }}</pre>
-						</q-banner>
-					</div>
-				</q-card-section>
-			</q-card>
-		</div>
-	</q-page>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, onMounted, reactive } from 'vue';
-import { useQuasar } from 'quasar';
-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;
-
-declare global {
-	interface Window {
-		ethereum?: any;
-	}
-}
-
-export default defineComponent({
-	name: 'IndexPage',
-	setup() {
-		const $q = useQuasar();
-		const olaresIdInfo = ref('');
-		const domainName = ref('1.com');
-		const ipAddress = ref('192.168.1.100');
-		const rsaKeyPair = ref<any>(null);
-
-		// Loading states
-		const loading = reactive({
-			metaInfo: false,
-			owner: false,
-			isOwner: false,
-			setIP: false,
-			getIP: false,
-			removeIP: false,
-			generateRSA: false,
-			setRSA: false,
-			getRSA: false,
-			removeRSA: false
-		});
-
-		// Results
-		const results = reactive({
-			domainContext: '',
-			ip: '',
-			rsa: ''
-		});
-
-		// MetaMask state
-		const walletConnected = ref(false);
-		const walletAddress = ref('');
-		const connecting = ref(false);
-		const currentNetwork = ref('');
-		const currentChainId = ref('');
-
-		// Initialize OlaresID - will be set based on network
-		let olaresId = OlaresID.createTestnet(); // default to testnet
-
-		onMounted(async () => {
-			// Check if already connected and detect network
-			await checkMetaMaskConnection();
-
-			// Listen for network changes
-			if (typeof window.ethereum !== 'undefined') {
-				window.ethereum.on('chainChanged', handleChainChanged);
-				window.ethereum.on('accountsChanged', handleAccountsChanged);
-			}
-		});
-
-		const handleChainChanged = async (chainId: string) => {
-			console.log('Chain changed to:', chainId);
-			currentChainId.value = chainId;
-			await reinitializeOlaresId();
-
-			$q.notify({
-				type: 'info',
-				message: 'Network changed',
-				caption: `Switched to ${currentNetwork.value}`
-			});
-		};
-
-		const handleAccountsChanged = async (accounts: string[]) => {
-			console.log('Accounts changed:', accounts);
-			if (accounts.length === 0) {
-				disconnectWallet();
-			} else if (accounts[0] !== walletAddress.value) {
-				walletAddress.value = accounts[0];
-				await setSignerToOlaresId();
-			}
-		};
-
-		const getNetworkName = (chainId: string): string => {
-			const networks: Record<string, string> = {
-				'0xa': 'Optimism Mainnet',
-				'0xaa37dc': 'OP Sepolia Testnet'
-			};
-			return networks[chainId] || `Unsupported Network (${chainId})`;
-		};
-
-		const isMainnet = (chainId: string): boolean => {
-			// Only Optimism Mainnet
-			return chainId === '0xa';
-		};
-
-		const isSupportedNetwork = (chainId: string): boolean => {
-			// Only support Optimism Mainnet and OP Sepolia Testnet
-			return chainId === '0xa' || chainId === '0xaa37dc';
-		};
-
-		const reinitializeOlaresId = async () => {
-			// Check if network is supported
-			if (!isSupportedNetwork(currentChainId.value)) {
-				currentNetwork.value = 'Unsupported';
-				olaresIdInfo.value = `⚠️ Unsupported Network!
-Chain ID: ${currentChainId.value}
-Chain Name: ${getNetworkName(currentChainId.value)}
-
-Please switch to:
-• Optimism Mainnet (0xa)
-• OP Sepolia Testnet (0xaa37dc)`;
-				return;
-			}
-
-			const isMainnetNetwork = isMainnet(currentChainId.value);
-
-			// Reinitialize OlaresID based on network
-			if (isMainnetNetwork) {
-				olaresId = OlaresID.createMainnet();
-				currentNetwork.value = 'Mainnet';
-				console.log('Reinitialized OlaresID for Optimism Mainnet');
-			} else {
-				olaresId = OlaresID.createTestnet();
-				currentNetwork.value = 'Testnet';
-				console.log('Reinitialized OlaresID for OP Sepolia Testnet');
-			}
-
-			// Update info display
-			olaresIdInfo.value = `OlaresID instance created!
-Network: ${currentNetwork.value}
-Chain ID: ${currentChainId.value}
-Chain Name: ${getNetworkName(currentChainId.value)}
-Type: ${typeof olaresId}`;
-
-			// If wallet is connected, set signer again
-			if (walletConnected.value) {
-				await setSignerToOlaresId();
-			}
-		};
-
-		const checkMetaMaskConnection = async () => {
-			if (typeof window.ethereum !== 'undefined') {
-				try {
-					// Get current chain ID
-					const chainId = await window.ethereum.request({
-						method: 'eth_chainId'
-					});
-					currentChainId.value = chainId;
-					console.log('Current chain ID:', chainId);
-
-					// Reinitialize OlaresID based on detected network
-					await reinitializeOlaresId();
-
-					// Check if accounts are already connected
-					const accounts = await window.ethereum.request({
-						method: 'eth_accounts'
-					});
-					if (accounts.length > 0) {
-						walletAddress.value = accounts[0];
-						walletConnected.value = true;
-						await setSignerToOlaresId();
-					}
-				} catch (err) {
-					console.error('Error checking MetaMask connection:', err);
-				}
-			}
-		};
-
-		const connectMetaMask = async () => {
-			if (typeof window.ethereum === 'undefined') {
-				$q.notify({
-					type: 'negative',
-					message: 'MetaMask not detected',
-					caption: 'Please install MetaMask extension'
-				});
-				return;
-			}
-
-			connecting.value = true;
-
-			try {
-				// Get current chain ID first
-				const chainId = await window.ethereum.request({
-					method: 'eth_chainId'
-				});
-				currentChainId.value = chainId;
-				console.log(
-					'Connecting on chain:',
-					chainId,
-					getNetworkName(chainId)
-				);
-
-				// Check if network is supported
-				if (!isSupportedNetwork(chainId)) {
-					$q.notify({
-						type: 'negative',
-						message: 'Unsupported Network',
-						caption:
-							'Please switch to Optimism Mainnet or OP Sepolia Testnet',
-						timeout: 5000
-					});
-					await reinitializeOlaresId();
-					return;
-				}
-
-				// Reinitialize OlaresID based on network
-				await reinitializeOlaresId();
-
-				// Request account access
-				const accounts = await window.ethereum.request({
-					method: 'eth_requestAccounts'
-				});
-
-				if (accounts.length > 0) {
-					walletAddress.value = accounts[0];
-					walletConnected.value = true;
-
-					// Set signer to OlaresID
-					await setSignerToOlaresId();
-
-					$q.notify({
-						type: 'positive',
-						message: 'MetaMask connected successfully!',
-						caption: `${getNetworkName(
-							chainId
-						)} - ${walletAddress.value.substring(
-							0,
-							6
-						)}...${walletAddress.value.substring(38)}`
-					});
-
-					console.log(
-						'Connected wallet address:',
-						walletAddress.value
-					);
-					console.log(
-						'Using OlaresID network:',
-						currentNetwork.value
-					);
-				}
-			} catch (err: any) {
-				console.error('MetaMask connection error:', err);
-				$q.notify({
-					type: 'negative',
-					message: 'Failed to connect MetaMask',
-					caption: err.message
-				});
-			} finally {
-				connecting.value = false;
-			}
-		};
-
-		const setSignerToOlaresId = async () => {
-			try {
-				// Create ethers provider from MetaMask
-				const provider = new ethers.BrowserProvider(window.ethereum);
-				const signer = await provider.getSigner();
-
-				// Set signer to OlaresID instance
-				olaresId.setSigner(signer);
-
-				console.log('Signer set to OlaresID:', signer);
-				console.log('OlaresID now has signer:', olaresId.signer);
-
-				// Update info display
-				olaresIdInfo.value = `OlaresID instance with MetaMask signer!
-Network: ${currentNetwork.value}
-Chain ID: ${currentChainId.value}
-Chain Name: ${getNetworkName(currentChainId.value)}
-Type: ${typeof olaresId}
-Signer Address: ${await signer.getAddress()}
-Has Signer: ${olaresId.signer !== undefined}`;
-			} catch (err) {
-				console.error('Error setting signer to OlaresID:', err);
-				throw err;
-			}
-		};
-
-		const disconnectWallet = () => {
-			walletConnected.value = false;
-			walletAddress.value = '';
-
-			// Clear signer from OlaresID
-			olaresId.clearSigner();
-
-			olaresIdInfo.value = `OlaresID instance created!
-Network: ${currentNetwork.value}
-Chain ID: ${currentChainId.value}
-Chain Name: ${getNetworkName(currentChainId.value)}
-Type: ${typeof olaresId}
-Has Signer: ${olaresId.signer !== undefined}`;
-
-			$q.notify({
-				type: 'info',
-				message: 'Wallet disconnected'
-			});
-
-			console.log('Wallet disconnected, signer cleared from OlaresID');
-		};
-
-		// ===== Domain Context Methods =====
-		const getMetaInfo = async () => {
-			loading.metaInfo = true;
-			results.domainContext = '';
-			try {
-				const domain = olaresId.domain(domainName.value);
-				const metaInfo = await domain.getMetaInfo();
-				results.domainContext = `Meta Info:
-ID: ${metaInfo.id}
-Name: ${metaInfo.name}
-DID: ${metaInfo.did}
-Note: ${metaInfo.note || 'N/A'}
-Allow Subdomain: ${metaInfo.allowSubdomain}`;
-				$q.notify({
-					type: 'positive',
-					message: 'Meta info retrieved!'
-				});
-			} catch (err: any) {
-				$q.notify({
-					type: 'negative',
-					message: 'Failed',
-					caption: err.message
-				});
-			} finally {
-				loading.metaInfo = false;
-			}
-		};
-
-		const getOwner = async () => {
-			loading.owner = true;
-			results.domainContext = '';
-			try {
-				const domain = olaresId.domain(domainName.value);
-				const owner = await domain.getOwner();
-				results.domainContext = `Owner Address:\n${owner}`;
-				$q.notify({ type: 'positive', message: 'Owner retrieved!' });
-			} catch (err: any) {
-				$q.notify({
-					type: 'negative',
-					message: 'Failed',
-					caption: err.message
-				});
-			} finally {
-				loading.owner = false;
-			}
-		};
-
-		const checkIsOwner = async () => {
-			loading.isOwner = true;
-			results.domainContext = '';
-			try {
-				const domain = olaresId.domain(domainName.value);
-				const isOwner = await domain.isOwner();
-				results.domainContext = `Is Owner: ${
-					isOwner ? 'Yes ✅' : 'No ❌'
-				}`;
-				$q.notify({
-					type: isOwner ? 'positive' : 'info',
-					message: isOwner
-						? 'You are the owner!'
-						: 'You are not the owner'
-				});
-			} catch (err: any) {
-				$q.notify({
-					type: 'negative',
-					message: 'Failed',
-					caption: err.message
-				});
-			} finally {
-				loading.isOwner = false;
-			}
-		};
-
-		// ===== IP Methods =====
-		const setIP = async () => {
-			loading.setIP = true;
-			results.ip = '';
-			try {
-				const domain = olaresId.domain(domainName.value);
-				const result = await domain.setIP(ipAddress.value);
-				if (result.success) {
-					results.ip = `IP Set Successfully!
-Transaction Hash: ${result.transactionHash}
-Gas Used: ${result.gasUsed?.toString()}`;
-					$q.notify({
-						type: 'positive',
-						message: 'IP address set!',
-						timeout: 3000
-					});
-				} else {
-					throw new Error(result.error || 'Failed to set IP');
-				}
-			} catch (err: any) {
-				$q.notify({
-					type: 'negative',
-					message: 'Failed',
-					caption: err.message
-				});
-			} finally {
-				loading.setIP = false;
-			}
-		};
-
-		const getIP = async () => {
-			loading.getIP = true;
-			results.ip = '';
-			try {
-				const domain = olaresId.domain(domainName.value);
-				const ip = await domain.getIP();
-				results.ip = ip ? `IP Address: ${ip}` : 'No IP address set';
-				$q.notify({ type: 'positive', message: 'IP retrieved!' });
-			} catch (err: any) {
-				$q.notify({
-					type: 'negative',
-					message: 'Failed',
-					caption: err.message
-				});
-			} finally {
-				loading.getIP = false;
-			}
-		};
-
-		const removeIP = async () => {
-			loading.removeIP = true;
-			results.ip = '';
-			try {
-				const domain = olaresId.domain(domainName.value);
-				const result = await domain.removeIP();
-				if (result.success) {
-					results.ip = `IP Removed Successfully!
-Transaction Hash: ${result.transactionHash}`;
-					$q.notify({
-						type: 'positive',
-						message: 'IP address removed!'
-					});
-				} else {
-					throw new Error(result.error || 'Failed to remove IP');
-				}
-			} catch (err: any) {
-				$q.notify({
-					type: 'negative',
-					message: 'Failed',
-					caption: err.message
-				});
-			} finally {
-				loading.removeIP = false;
-			}
-		};
-
-		const convertIPv4ToBytes4 = () => {
-			try {
-				const bytes4 = ipv4ToBytes4(ipAddress.value);
-				results.ip = `IPv4 to Bytes4:
-${ipAddress.value} → ${bytes4}`;
-				$q.notify({ type: 'positive', message: 'Converted!' });
-			} catch (err: any) {
-				$q.notify({ type: 'negative', message: 'Invalid IP address' });
-			}
-		};
-
-		const convertBytes4ToIPv4 = () => {
-			try {
-				const ip = bytes4ToIpv4(ipAddress.value);
-				results.ip = `Bytes4 to IPv4:
-${ipAddress.value} → ${ip}`;
-				$q.notify({ type: 'positive', message: 'Converted!' });
-			} catch (err: any) {
-				$q.notify({
-					type: 'negative',
-					message: 'Invalid bytes4 format'
-				});
-			}
-		};
-
-		// ===== RSA Methods =====
-		const generateRSAKeyPair = async () => {
-			loading.generateRSA = true;
-			results.rsa = '';
-			try {
-				const keyPair = await createRsaKeyPair();
-				rsaKeyPair.value = {
-					publicKey: keyPair.rsaPublicKey,
-					privateKey: keyPair.rsaPrivateKey
-				};
-				results.rsa = 'RSA Key Pair Generated Successfully!';
-				$q.notify({
-					type: 'positive',
-					message: 'RSA key pair generated!'
-				});
-			} catch (err: any) {
-				$q.notify({
-					type: 'negative',
-					message: 'Failed',
-					caption: err.message
-				});
-			} finally {
-				loading.generateRSA = false;
-			}
-		};
-
-		const setRSAPublicKey = async () => {
-			loading.setRSA = true;
-			results.rsa = '';
-			try {
-				const domain = olaresId.domain(domainName.value);
-				const result = await domain.setRSAPublicKey(
-					rsaKeyPair.value.publicKey
-				);
-				if (result.success) {
-					results.rsa = `RSA Public Key Set Successfully!
-Transaction Hash: ${result.transactionHash}
-Gas Used: ${result.gasUsed?.toString()}`;
-					$q.notify({
-						type: 'positive',
-						message: 'RSA public key set!',
-						timeout: 3000
-					});
-				} else {
-					throw new Error(result.error || 'Failed to set RSA key');
-				}
-			} catch (err: any) {
-				$q.notify({
-					type: 'negative',
-					message: 'Failed',
-					caption: err.message
-				});
-			} finally {
-				loading.setRSA = false;
-			}
-		};
-
-		const getRSAPublicKey = async () => {
-			loading.getRSA = true;
-			results.rsa = '';
-			try {
-				const domain = olaresId.domain(domainName.value);
-				const key = await domain.getRSAPublicKey();
-				results.rsa = key
-					? `RSA Public Key (PEM):\n${key}`
-					: 'No RSA public key set';
-				$q.notify({ type: 'positive', message: 'RSA key retrieved!' });
-			} catch (err: any) {
-				$q.notify({
-					type: 'negative',
-					message: 'Failed',
-					caption: err.message
-				});
-			} finally {
-				loading.getRSA = false;
-			}
-		};
-
-		const removeRSAPublicKey = async () => {
-			loading.removeRSA = true;
-			results.rsa = '';
-			try {
-				const domain = olaresId.domain(domainName.value);
-				const result = await domain.removeRSAPublicKey();
-				if (result.success) {
-					results.rsa = `RSA Public Key Removed Successfully!
-Transaction Hash: ${result.transactionHash}`;
-					$q.notify({
-						type: 'positive',
-						message: 'RSA key removed!'
-					});
-				} else {
-					throw new Error(result.error || 'Failed to remove RSA key');
-				}
-			} catch (err: any) {
-				$q.notify({
-					type: 'negative',
-					message: 'Failed',
-					caption: err.message
-				});
-			} finally {
-				loading.removeRSA = false;
-			}
-		};
-
-		const convertPEMToDER = () => {
-			try {
-				const der = pemToDer(rsaKeyPair.value.publicKey);
-				results.rsa = `PEM to DER:
-${der.substring(0, 100)}...`;
-				$q.notify({ type: 'positive', message: 'Converted to DER!' });
-			} catch (err: any) {
-				$q.notify({ type: 'negative', message: 'Conversion failed' });
-			}
-		};
-
-		const convertDERToPEM = () => {
-			try {
-				const der = pemToDer(rsaKeyPair.value.publicKey);
-				const pem = derToPem(der);
-				results.rsa = `DER to PEM:
-${pem}`;
-				$q.notify({ type: 'positive', message: 'Converted to PEM!' });
-			} catch (err: any) {
-				$q.notify({ type: 'negative', message: 'Conversion failed' });
-			}
-		};
-
-		return {
-			olaresIdInfo,
-			domainName,
-			ipAddress,
-			rsaKeyPair,
-			loading,
-			results,
-			walletConnected,
-			walletAddress,
-			connecting,
-			currentNetwork,
-			currentChainId,
-			connectMetaMask,
-			disconnectWallet,
-			// Domain Context methods
-			getMetaInfo,
-			getOwner,
-			checkIsOwner,
-			// IP methods
-			setIP,
-			getIP,
-			removeIP,
-			convertIPv4ToBytes4,
-			convertBytes4ToIPv4,
-			// RSA methods
-			generateRSAKeyPair,
-			setRSAPublicKey,
-			getRSAPublicKey,
-			removeRSAPublicKey,
-			convertPEMToDER,
-			convertDERToPEM
-		};
-	}
-});
-</script>
-
-<style scoped>
-pre {
-	background: #f5f5f5;
-	padding: 12px;
-	border-radius: 4px;
-	overflow-x: auto;
-}
-</style>